From 7fda0efe131e0e2e3141849cf3f87307e7ce1b36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LeoYuan=20=E8=A2=81=E5=8A=9B=E7=9A=93?=
 <yuanlihao1988@gmail.com>
Date: Tue, 26 Apr 2022 15:05:21 +0800
Subject: [PATCH] fix: use uppercase resize trigger names based on material
 spec

---
 .../bem-tools/border-resizing.tsx             | 19 +++++++++++--------
 packages/designer/src/utils/misc.ts           |  8 ++++++++
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
index d8e9c8ffc..08a44b25d 100644
--- a/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
+++ b/packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx
@@ -6,6 +6,7 @@ import { SimulatorContext } from '../context';
 import { BuiltinSimulatorHost } from '../host';
 import { OffsetObserver, Designer } from '../../designer';
 import { Node } from '../../document';
+import { normalizeTriggers } from '../../utils/misc';
 
 @observer
 export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> {
@@ -245,12 +246,14 @@ export class BoxResizingInstance extends Component<{
       triggerVisible = metadata.configure.advanced.getResizingHandlers(node.internalToShellNode());
     }
 
+    triggerVisible = normalizeTriggers(triggerVisible);
+
     const baseSideClass = 'lc-borders lc-resize-side';
     const baseCornerClass = 'lc-borders lc-resize-corner';
 
     return (
       <div>
-        {triggerVisible.includes('n') && (
+        {triggerVisible.includes('N') && (
           <div
             ref={(ref) => { this.outlineN = ref; }}
             className={classNames(baseSideClass, 'n')}
@@ -261,7 +264,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('ne') && (
+        {triggerVisible.includes('NE') && (
           <div
             ref={(ref) => { this.outlineNE = ref; }}
             className={classNames(baseCornerClass, 'ne')}
@@ -271,7 +274,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('e') && (
+        {triggerVisible.includes('E') && (
           <div
             className={classNames(baseSideClass, 'e')}
             ref={(ref) => { this.outlineE = ref; }}
@@ -282,7 +285,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('se') && (
+        {triggerVisible.includes('SE') && (
           <div
             ref={(ref) => { this.outlineSE = ref; }}
             className={classNames(baseCornerClass, 'se')}
@@ -292,7 +295,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('s') && (
+        {triggerVisible.includes('S') && (
           <div
             ref={(ref) => { this.outlineS = ref; }}
             className={classNames(baseSideClass, 's')}
@@ -303,7 +306,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('sw') && (
+        {triggerVisible.includes('SW') && (
           <div
             ref={(ref) => { this.outlineSW = ref; }}
             className={classNames(baseCornerClass, 'sw')}
@@ -313,7 +316,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('w') && (
+        {triggerVisible.includes('W') && (
           <div
             ref={(ref) => { this.outlineW = ref; }}
             className={classNames(baseSideClass, 'w')}
@@ -324,7 +327,7 @@ export class BoxResizingInstance extends Component<{
             }}
           />
         )}
-        {triggerVisible.includes('nw') && (
+        {triggerVisible.includes('NW') && (
           <div
             ref={(ref) => { this.outlineNW = ref; }}
             className={classNames(baseCornerClass, 'nw')}
diff --git a/packages/designer/src/utils/misc.ts b/packages/designer/src/utils/misc.ts
index dadfe0f97..7b999f5ff 100644
--- a/packages/designer/src/utils/misc.ts
+++ b/packages/designer/src/utils/misc.ts
@@ -21,3 +21,11 @@ export function isDOMNodeVisible(domNode: Element, viewport: Viewport) {
     right <= width + nodeWidth
   );
 }
+
+/**
+ * normalize triggers
+ * @param triggers
+ */
+export function normalizeTriggers(triggers: string[]) {
+  return triggers.map((trigger: string) => trigger?.toUpperCase());
+}
\ No newline at end of file