feat:

trionesdev · Dec 14, 2023 · bf4f0d3 · bf4f0d3
1 parent a4636cf
commit bf4f0d3
Show file tree

Hide file tree

Showing 30 changed files with 267 additions and 277 deletions.
diff --git a/examples/form-designer-react/src/App.tsx b/examples/form-designer-react/src/App.tsx
@@ -11,7 +11,7 @@ import {
     ViewportPanel,
     WorkspacePanel
 } from "@trionesdev/form-designer-react";
-import {Form, Input, Select} from "./components";
+import {Form, Input, Password, Select} from "./components";
 import {AntdSettingsPanel} from "./AntdSettingsPanel";
 import * as icons from "./Icons";
 
@@ -26,7 +26,7 @@ function App() {
     const value = {
         "x-id": "td_tXAABwaZAE",
         "type": "object",
-        "x-component-name":"Form",
+        "x-component-name": "Form",
         "properties": {
             "td_rszikvOzVh": {
                 "type": "string",
@@ -36,15 +36,15 @@ function App() {
                 "x-component": "Input.TextArea",
                 "x-id": "td_rszikvOzVh",
                 "x-index": 0,
-                "x-component-name":"Field",
+                "x-component-name": "Field",
             },
             "td_AaMFjiFfps": {
                 "title": "性别",
                 "x-decorator": "FormItem",
                 "x-component": "Select",
                 "x-id": "td_AaMFjiFfps",
                 "x-index": 1,
-                "x-component-name":"Field",
+                "x-component-name": "Field",
             }
         }
     }
@@ -54,13 +54,12 @@ function App() {
             <FormDesigner value={value} onChange={handleOnChange}>
                 <StudioPanel>
                     <CompositePanel style={{width: 300}}>
-                        <ResourceWidget sources={[Input, Select]}/>
+                        <ResourceWidget title={`基础组件`} sources={[Input, Select, Password]}/>
                     </CompositePanel>
                     <WorkspacePanel>
-                        <div>ssss</div>
                         <ViewportPanel>
-                            <ViewPanel type={'MOBILE'}>
-                                <ComponentsWidget components={{Form, Input, Select}}/>
+                            <ViewPanel >
+                                <ComponentsWidget components={{Form, Input, Select, Password}}/>
                             </ViewPanel>
                         </ViewportPanel>
                     </WorkspacePanel>

diff --git a/examples/form-designer-react/src/Icons.tsx b/examples/form-designer-react/src/Icons.tsx
@@ -1,15 +1,74 @@
 import React from "react";
 
-export const InputIcon = (<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
-    <defs>
-        <style>{`.cls-1{fill:#a83b94;}.cls-2{fill:#fff;}`}</style>
-    </defs>
-    <g id="图层_2" data-name="图层 2">
-        <g id="图层_1-2" data-name="图层 1">
-            <rect
-                className="cls-1" width="500" height="500" rx="88.05"/>
-            <path className="cls-2"
-                  d="M224.84,406.18a12,12,0,0,1-3.13-.41c-20.19-5.46-43.17-17.7-63-33.59-20.69-16.55-35.29-34.64-41.11-50.94-8.6-24.07-7.49-40.35-7-44.49,1.49-38.29,32-67.14,74.85-103.65,9.77-8.33,19.11-21.26,26.32-36.42,6.52-13.73,8.86-24.4,8.69-27.21a13,13,0,0,1,5.67-13.36c5.09-3.33,11.72-3,21.48,1a117,117,0,0,1,21.61,12.16c12.22,8.57,29.25,23.35,41,45.14a104.33,104.33,0,0,1,11.87,36.48c3.23-2.9,4.92-3.57,5.91-4a12,12,0,0,1,13.67,3.49c2,2.37,48,58.68,48.1,107.81,0,30-13.83,56.52-40.08,76.85-25,19.39-54.57,28-66.11,30.78A12,12,0,0,1,270.5,388c19.16-31.56,11-46.61,10.66-47.24-3.67-6.45-8.86-11.4-14.86-17.13s-13-12.42-19.46-21.72c-4-5.77-7.75-16.61-8.42-28.3-13.81,12.08-25.7,29.27-30.15,43.07-8.79,27.23,7.45,57.62,23,67.41a12,12,0,0,1-6.39,22.1Zm31.82-169.33a12,12,0,0,1,9.26,19.58c-7,8.46-2.48,27.4.58,31.79,5.09,7.32,10.81,12.79,16.35,18.08,6.74,6.44,13.72,13.1,19.12,22.6,2.81,4.93,9.33,20.21,1.3,45.26,26.59-11.09,62.57-33.88,62.52-75.92,0-29.46-22.34-64.78-34.66-82-3.19,3.81-7.52,9.34-13.26,17.31a12,12,0,0,1-21.37-9.74c5.65-24.09,1.25-46.7-13.06-67.2a115.57,115.57,0,0,0-40.68-35.42c-4.85,21-20.56,52.08-41.8,70.18-39.57,33.71-65.58,58-66.46,86.77a8.33,8.33,0,0,1-.13,1.42c-.11,1-1.35,13.73,5.76,33.67,5.74,16.06,25.07,35.62,47.38,50.29-6.2-16.86-7.85-36.13-2-54.16,8.7-27,37.9-62.29,67.5-71.89A12.09,12.09,0,0,1,256.66,236.85ZM122.53,277.73h0Zm97.93-168.12a.15.15,0,0,1,0,.07Z"/>
-        </g>
-    </g>
-</svg>)
+export const InputIcon = (
+    <svg className="icon" viewBox="0 0 2680 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="1869" data-spm-anchor-id="a313x.manage_type_myprojects.0.i0.54a33a81DXD9fs"
+         xmlnsXlink="http://www.w3.org/1999/xlink" width="523.4375" height="200">
+        <path
+            d="M2524.505169 92.044944A64.316404 64.316404 0 0 1 2588.764045 156.30382v711.39236A64.316404 64.316404 0 0 1 2524.505169 931.955056H156.30382A64.316404 64.316404 0 0 1 92.044944 867.69618V156.30382A64.316404 64.316404 0 0 1 156.30382 92.044944h2368.201349m0-92.044944H156.30382A156.246292 156.246292 0 0 0 0 156.30382v711.39236A156.246292 156.246292 0 0 0 156.30382 1024h2368.201349A156.246292 156.246292 0 0 0 2680.808989 867.69618V156.30382A156.246292 156.246292 0 0 0 2524.505169 0z"
+            p-id="1870"></path>
+        <path
+            d="M362.426966 788.134831a46.022472 46.022472 0 0 1-46.022472-46.022471V258.876404a46.022472 46.022472 0 0 1 92.044944 0v483.235956a46.022472 46.022472 0 0 1-46.022472 46.022471z"
+            fill="#2c2c2c" p-id="1871" data-spm-anchor-id="a313x.manage_type_myprojects.0.i1.54a33a81DXD9fs"
+            className="selected"></path>
+    </svg>
+)
+
+export const TextAreaIcon = (
+    <svg className="icon" viewBox="0 0 1096 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="2037" xmlnsXlink="http://www.w3.org/1999/xlink" width="214.0625" height="200">
+        <path
+            d="M134.17931 331.917241a23.54023 23.54023 0 0 1-23.54023-23.54023V110.63908a23.54023 23.54023 0 0 1 47.08046 0v197.737931a23.54023 23.54023 0 0 1-23.54023 23.54023z"
+            fill="#2c2c2c" p-id="2038" data-spm-anchor-id="a313x.manage_type_myprojects.0.i3.54a33a81DXD9fs"
+            className="selected"></path>
+        <path
+            d="M1033.015908 37.664368A26.317977 26.317977 0 0 1 1059.310345 63.958805v896.08239A26.317977 26.317977 0 0 1 1033.015908 986.335632H63.958805A26.317977 26.317977 0 0 1 37.664368 960.041195V63.958805A26.317977 26.317977 0 0 1 63.958805 37.664368h969.057103m0-37.664368H63.958805A63.935264 63.935264 0 0 0 0 63.958805v896.08239A63.935264 63.935264 0 0 0 63.958805 1024h969.057103A63.935264 63.935264 0 0 0 1096.974713 960.041195V63.958805A63.935264 63.935264 0 0 0 1033.015908 0z"
+            p-id="2039"></path>
+        <path
+            d="M739.163218 998.105747a18.832184 18.832184 0 0 1-13.32377-32.155954l324.855173-324.855172a18.832184 18.832184 0 0 1 26.64754 26.64754l-324.855172 324.855172A18.832184 18.832184 0 0 1 739.163218 998.105747z"
+            p-id="2040"></path>
+    </svg>
+)
+
+export const SelectIcon = (
+    <svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="1783" xmlnsXlink="http://www.w3.org/1999/xlink" width="200" height="200">
+        <path
+            d="M924.83584 98.304a22.89664 22.89664 0 0 1 22.87616 22.87616v779.59168A22.89664 22.89664 0 0 1 924.83584 923.648H81.75616a22.89664 22.89664 0 0 1-22.87616-22.87616V121.18016A22.89664 22.89664 0 0 1 81.75616 98.304h843.07968m0-32.768H81.75616a55.64416 55.64416 0 0 0-55.64416 55.64416v779.59168A55.64416 55.64416 0 0 0 81.75616 956.416h843.07968a55.62368 55.62368 0 0 0 55.64416-55.64416V121.18016A55.62368 55.62368 0 0 0 924.83584 65.536z"
+            p-id="1784"></path>
+        <path
+            d="M950.784 362.496h-894.976a16.384 16.384 0 0 1 0-32.768h894.976a16.384 16.384 0 0 1 0 32.768zM600.064 241.664H180.224a16.384 16.384 0 0 1 0-32.768h419.84a16.384 16.384 0 0 1 0 32.768zM815.104 526.336H180.224a16.384 16.384 0 0 1 0-32.768h634.88a16.384 16.384 0 0 1 0 32.768zM815.104 774.144H180.224a16.384 16.384 0 0 1 0-32.768h634.88a16.384 16.384 0 0 1 0 32.768zM826.6752 268.288a6.144 6.144 0 0 1-4.75136-2.2528l-48.45568-59.392a6.144 6.144 0 0 1 9.54368-7.7824l43.60192 53.47328 42.35264-53.39136a6.144 6.144 0 1 1 9.6256 7.61856l-47.104 59.392a6.144 6.144 0 0 1-4.77184 2.33472z"
+            p-id="1785"></path>
+        <path d="M1024 1024H0V0h1024zM2.048 1021.952h1019.904V2.048H2.048z" p-id="1786"></path>
+    </svg>
+)
+
+export const PasswordIcon = (
+    <svg  className="icon" viewBox="0 0 2680 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="1920" xmlnsXlink="http://www.w3.org/1999/xlink" width="523.4375" height="200">
+        <path
+            d="M2524.505169 92.044944A64.316404 64.316404 0 0 1 2588.764045 156.30382v711.39236A64.316404 64.316404 0 0 1 2524.505169 931.955056H156.30382A64.316404 64.316404 0 0 1 92.044944 867.69618V156.30382A64.316404 64.316404 0 0 1 156.30382 92.044944h2368.201349m0-92.044944H156.30382A156.246292 156.246292 0 0 0 0 156.30382v711.39236A156.246292 156.246292 0 0 0 156.30382 1024h2368.201349A156.246292 156.246292 0 0 0 2680.808989 867.69618V156.30382A156.246292 156.246292 0 0 0 2524.505169 0z"
+            p-id="1921"></path>
+        <path
+            d="M1559.011236 522.815281m-97.797753 0a97.797753 97.797753 0 1 0 195.595506 0 97.797753 97.797753 0 1 0-195.595506 0Z"
+            p-id="1922"></path>
+        <path
+            d="M1177.427416 522.815281m-97.797753 0a97.797753 97.797753 0 1 0 195.595506 0 97.797753 97.797753 0 1 0-195.595506 0Z"
+            p-id="1923"></path>
+        <path
+            d="M795.786067 522.815281m-97.797752 0a97.797753 97.797753 0 1 0 195.595505 0 97.797753 97.797753 0 1 0-195.595505 0Z"
+            p-id="1924"></path>
+        <path
+            d="M414.202247 522.815281m-97.797753 0a97.797753 97.797753 0 1 0 195.595506 0 97.797753 97.797753 0 1 0-195.595506 0Z"
+            p-id="1925"></path>
+        <path
+            d="M2214.831461 837.033708a155.325843 155.325843 0 1 1 155.325842-155.325843 155.325843 155.325843 0 0 1-155.325842 155.325843z m0-218.606742a63.280899 63.280899 0 1 0 63.280899 63.280899 63.280899 63.280899 0 0 0-63.280899-63.280899z"
+            p-id="1926"></path>
+        <path
+            d="M2122.786517 618.426966a46.022472 46.022472 0 0 1-39.924495-23.011236l-195.595505-339.41573a46.022472 46.022472 0 1 1 79.733932-46.022472l195.595506 339.41573a46.022472 46.022472 0 0 1-16.798202 62.878203 45.332135 45.332135 0 0 1-23.011236 6.155505z"
+            p-id="1927"></path>
+        <path
+            d="M2082.516854 474.606742a46.022472 46.022472 0 0 1-25.6-84.33618l51.775281-34.516854a46.022472 46.022472 0 1 1 51.084944 76.627416l-51.775281 34.516854A46.022472 46.022472 0 0 1 2082.516854 474.606742zM2024.988764 336.539326a46.022472 46.022472 0 0 1-26.232809-83.875955l74.786517-51.775281a46.022472 46.022472 0 1 1 52.350562 75.706966l-74.786517 51.775281A45.619775 45.619775 0 0 1 2024.988764 336.539326z"
+            p-id="1928"></path>
+    </svg>
+)
diff --git a/examples/form-designer-react/src/components/Input.tsx b/examples/form-designer-react/src/components/Input.tsx
@@ -41,7 +41,7 @@ Input.Resource = createResource([
     },
     {
         name: 'Input.TextArea',
-        icon: 'InputIcon',
+        icon: 'TextAreaIcon',
         title: '多行输入框',
         componentName: 'Field',
         schema: {

diff --git a/examples/form-designer-react/src/components/Password.tsx b/examples/form-designer-react/src/components/Password.tsx
@@ -0,0 +1,40 @@
+import {DesignerCore, TdFC} from "@trionesdev/form-designer-react";
+import {Password as FormilyPassword} from '@formily/antd-v5'
+import createResource = DesignerCore.createResource;
+import React from "react";
+
+export const Password: TdFC<React.ComponentProps<typeof FormilyPassword>> =
+    FormilyPassword
+
+Password.Resource = createResource([
+    {
+        name: 'Password',
+        icon: 'PasswordIcon',
+        title: '密码输入',
+        componentName: 'Field',
+        schema: {
+            title: '密码输入',
+            'x-decorator': 'FormItem',
+            'x-component': 'Password',
+        },
+        designerProps: {
+            propsSchema: {
+                type: 'object',
+                properties: {
+                    title: {
+                        type: 'string',
+                        title: '标题',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Input',
+                    },
+                    required: {
+                        type: 'string',
+                        title: '是否必填',
+                        'x-decorator': 'FormItem',
+                        'x-component': 'Switch',
+                    },
+                }
+            }
+        }
+    }
+])
diff --git a/examples/form-designer-react/src/components/Select.tsx b/examples/form-designer-react/src/components/Select.tsx
@@ -8,23 +8,18 @@ export const Select: TdFC<React.ComponentProps<typeof FormilySelect>> = FormilyS
 Select.Resource = createResource([
     {
         name: 'Select',
-        title: '选择',
+        icon:'SelectIcon',
+        title: '选择框',
         componentName: 'Field',
         schema: {
-            title: '性别',
+            title: '选择',
             'x-decorator': 'FormItem',
             'x-component': 'Select',
         },
         designerProps: {
             propsSchema: {
                 type: 'object',
                 properties: {
-                    name: {
-                        type: 'string',
-                        title: '字段标识',
-                        'x-decorator': 'FormItem',
-                        'x-component': 'Input',
-                    },
                     title: {
                         type: 'string',
                         title: '标题',

diff --git a/examples/form-designer-react/src/components/index.ts b/examples/form-designer-react/src/components/index.ts
@@ -1,3 +1,4 @@
 export * from "./Input"
 export * from "./Form"
-export * from "./Select"
+export * from "./Select"
+export * from "./Password"
diff --git a/packages/form-designer-react/src/Icon.tsx b/packages/form-designer-react/src/Icon.tsx
@@ -1,6 +1,24 @@
 import React from "react";
 
 
+export const Up = (
+    <svg d="1702520084633" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="9304" xmlnsXlink="http://www.w3.org/1999/xlink" width="200" height="200">
+        <path
+            d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3c-3.8 5.3-0.1 12.7 6.5 12.7h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
+            p-id="9305"></path>
+    </svg>
+)
+
+export const Down = (
+    <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="8344" xmlnsXlink="http://www.w3.org/1999/xlink" width="200" height="200">
+        <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3 0.1-12.7-6.4-12.7z"
+            p-id="8345"></path>
+    </svg>
+)
+
 export const MoveIcon: React.JSX.Element = (
     <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
          height="200">

diff --git a/packages/form-designer-react/src/container/Simulator.tsx b/packages/form-designer-react/src/container/Simulator.tsx
@@ -1,13 +1,19 @@
 import React, {FC} from "react";
-import {PCSimulator} from "../simulator";
+import {MobileSimulator, PCSimulator} from "../simulator";
 import {observer} from "@formily/react";
 import {requestIdle} from "../request-idle";
+import {useFormDesigner} from "../hooks";
 
 type SimulatorProps = {
     children: React.ReactNode;
 }
 export const Simulator: FC<SimulatorProps> = observer(({children}) => {
-    return <PCSimulator>{children}</PCSimulator>
+    const {type} = useFormDesigner()
+    if (type == 'PC'){
+        return <PCSimulator>{children}</PCSimulator>
+    }else if (type == 'MOBILE'){
+        return <MobileSimulator>{children}</MobileSimulator>
+    }
 }, {
     scheduler: requestIdle
 })
diff --git a/packages/form-designer-react/src/coordinate.ts b/packages/form-designer-react/src/coordinate.ts
@@ -146,12 +146,22 @@ export const transformToTreeNode = (data: any) => {
         children: []
     }
     const schema = new Schema(data)
+
+    const cleanProps = (props: any) => {
+        if (props['name'] === props['x-id']) {
+            delete props.name
+        }
+        delete props['version']
+        delete props['_isJSONSchemaObject']
+        return props
+    }
+
     const appendTreeNode = (parent: ITreeNode, schema: Schema) => {
         if (!schema) return
         const current = {
             id: schema['x-id'],
             componentName: schema['x-component-name'],
-            schema: schema.toJSON(false),
+            schema: cleanProps(schema.toJSON(false)), //一定要cleanProps,否则无法修改属性
             children: [],
         }
         parent.children.push(current)

diff --git a/packages/form-designer-react/src/effect/dragDropEffect.tsx b/packages/form-designer-react/src/effect/dragDropEffect.tsx
@@ -49,6 +49,7 @@ export const dragMoveEffect = (e, operation: Operation) => {
         topClientY: e.clientY,
     }
     operation.cursor.setPosition()
+    operation.dragMove(position)
     const engine = operation.engine
     const target = e.target as HTMLElement
     const el = target?.closest(`
@@ -58,7 +59,7 @@ export const dragMoveEffect = (e, operation: Operation) => {
         operation.cleanDraggingHover()
         return
     }
-    operation.dragMove(position)
+
     operation.calcClosestPosition(new Point(e.clientX, e.clientX))
     const nodeId = el.getAttribute(engine.nodeIdAttrName)
     if (nodeId) {
@@ -73,13 +74,9 @@ export const dragEndEffect = (e: React.MouseEvent, operation: Operation) => {
 
     const closestNode = operation.closestNode
     const closestPosition = operation.closestPosition
-    console.log("dragEndEffect operation", operation, operation.draggingNode)
+
     if (operation.draggingNode) {
 
-        console.log("dragEndEffect operation draggingNode", operation.draggingNode)
-        console.log("dragEndEffect operation closestNode", closestNode)
-        console.log("dragEndEffect operation closestPosition", closestPosition)
-        console.log("dragEndEffect operation draggingHoverNode", operation.draggingHoverNode)
         if (ClosestPosition.INNER === closestPosition) {
             closestNode.append(operation.draggingNode)
         } else if (ClosestPosition.BEFORE === closestPosition || ClosestPosition.UPPER === closestPosition) {

diff --git a/packages/form-designer-react/src/event/event.tsx b/packages/form-designer-react/src/event/event.tsx
@@ -60,7 +60,6 @@ export class EventManager {
     }
 
     onViewportScroll(e: React.UIEvent) {
-        console.log("onViewportScroll",e)
         ViewportEffect.viewportScrollEffect(e, this.operation)
     }
 

diff --git a/packages/form-designer-react/src/hooks/useValidNodeOffsetRect.tsx b/packages/form-designer-react/src/hooks/useValidNodeOffsetRect.tsx
@@ -21,7 +21,6 @@ export const useValidNodeOffsetRect = (node: TreeNode) => {
     }, [viewport, node])
 
     useEffect(() => {
-        console.log("useValidNodeOffsetRect ", node,element)
         const layoutObserver = new LayoutObserver(compute)
         if (element) layoutObserver.observe(element)
         return () => {

diff --git a/packages/form-designer-react/src/model/Operation.ts b/packages/form-designer-react/src/model/Operation.ts
@@ -1,6 +1,6 @@
 import {TreeNode} from "./TreeNode";
 import {FormDesignerEngine} from "./FormDesignerEngine";
-import {action, autorun, define, observable, observe} from "@formily/reactive";
+import {action, define, observable} from "@formily/reactive";
 import {EventManager} from "../event/event";
 import {Cursor, CursorStatus, ICursorPosition} from "./Cursor";
 import {requestIdle} from "../request-idle";
@@ -75,14 +75,9 @@ export class Operation {
             onChange:action
         })
 
-        autorun(() => {
-            console.log("[TreeInfo]", "sssssssssss")
-        })
-
     }
 
     onChange = (msg) => {
-        console.log("[TreeInfo]", "tree change sssse",msg, this.tree)
         this.engine.onChange?.(transformToSchema(this.tree))
     }
-Original file line number
+Diff line change
@@ Expand Up / @@ -60,7 +60,6 @@ export class EventManager { @@
         }
         onViewportScroll(e: React.UIEvent) {
-            console.log("onViewportScroll",e)
             ViewportEffect.viewportScrollEffect(e, this.operation)
         }
@@ Expand Down @@