chore: add translate example code

alibaba · Jan 19, 2022 · c45fea6 · c45fea6
1 parent 40abbc2
commit c45fea6
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 4 deletions.
diff --git a/examples/basic/src/content.tsx b/examples/basic/src/content.tsx
@@ -24,24 +24,26 @@ export const Content = () => (
           </span>
         )
       }),
-      Card: (props) => {
+      Card: observer((props) => {
         return (
           <div
             {...props}
             style={{
+              width: 400,
+              height: 400,
+              ...props.style,
               background: '#eee',
               border: '1px solid #ddd',
               display: 'flex',
               padding: 10,
-              height: props.children ? 'auto' : 150,
               justifyContent: 'center',
               alignItems: 'center',
             }}
           >
             {props.children ? props.children : <span>拖拽字段进入该区域</span>}
           </div>
         )
-      },
+      }),
     }}
   />
 )
diff --git a/examples/basic/src/main.tsx b/examples/basic/src/main.tsx
@@ -212,6 +212,73 @@ const CardBehavior = createBehavior({
   selector: 'Card',
   designerProps: {
     droppable: true,
+    resizable: {
+      width(node, element) {
+        const width = Number(
+          node.props?.style?.width ?? element.getBoundingClientRect().width
+        )
+        return {
+          plus: () => {
+            node.props = node.props || {}
+            node.props.style = node.props.style || {}
+            node.props.style.width = width + 10
+          },
+          minus: () => {
+            node.props = node.props || {}
+            node.props.style = node.props.style || {}
+            node.props.style.width = width - 10
+          },
+        }
+      },
+      height(node, element) {
+        const height = Number(
+          node.props?.style?.height ?? element.getBoundingClientRect().height
+        )
+        return {
+          plus: () => {
+            node.props = node.props || {}
+            node.props.style = node.props.style || {}
+            node.props.style.height = height + 10
+          },
+          minus: () => {
+            node.props = node.props || {}
+            node.props.style = node.props.style || {}
+            node.props.style.height = height - 10
+          },
+        }
+      },
+    },
+    translatable: {
+      x(node, element, diffX) {
+        const left =
+          parseInt(node.props?.style?.left ?? element?.style.left) || 0
+        const rect = element.getBoundingClientRect()
+        return {
+          translate: () => {
+            node.props = node.props || {}
+            node.props.style = node.props.style || {}
+            node.props.style.position = 'absolute'
+            node.props.style.width = rect.width
+            node.props.style.height = rect.height
+            node.props.style.left = left + parseInt(String(diffX)) + 'px'
+          },
+        }
+      },
+      y(node, element, diffY) {
+        const top = parseInt(node.props?.style?.top ?? element?.style.top) || 0
+        const rect = element.getBoundingClientRect()
+        return {
+          translate: () => {
+            node.props = node.props || {}
+            node.props.style = node.props.style || {}
+            node.props.style.position = 'absolute'
+            node.props.style.width = rect.width
+            node.props.style.height = rect.height
+            node.props.style.top = top + parseInt(String(diffY)) + 'px'
+          },
+        }
+      },
+    },
   },
   designerLocales: {
     'zh-CN': {
@@ -363,7 +430,7 @@ const App = () => {
             <ViewportPanel>
               <ViewPanel type="DESIGNABLE">{() => <Content />}</ViewPanel>
               <ViewPanel type="JSONTREE">
-                {(tree) => {
+                {() => {
                   return (
                     <div style={{ overflow: 'hidden', height: '100%' }}>
                       <MonacoInput