feat: merge from dnd

trionesdev · Dec 14, 2023 · 2cd4a63 · 2cd4a63
2 parents c200f83 + bf4f0d3
commit 2cd4a63
Show file tree

Hide file tree

Showing 42 changed files with 719 additions and 349 deletions.
diff --git a/.idea/.gitignore b/.idea/.gitignore
diff --git a/.idea/modules.xml b/.idea/modules.xml
diff --git a/.idea/triones-form-design.iml b/.idea/triones-form-design.iml
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
diff --git a/examples/form-designer-react/package.json b/examples/form-designer-react/package.json
@@ -25,7 +25,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "PUBLIC_URL=/ &&  craco start",
+    "start": "craco start",
     "build": "PUBLIC_URL=. &&  craco build",
     "test": "craco test",
     "eject": "react-scripts eject"

diff --git a/examples/form-designer-react/src/App.tsx b/examples/form-designer-react/src/App.tsx
@@ -3,30 +3,63 @@ import './App.css';
 import {
     ComponentsWidget,
     CompositePanel,
-    FormDesigner, GlobalStore,
-    ResourceWidget, StudioPanel, ViewPanel, ViewportPanel,
+    FormDesigner,
+    GlobalStore,
+    ResourceWidget,
+    StudioPanel,
+    ViewPanel,
+    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";
 
 function App() {
 
     GlobalStore.registerIcons(icons)
 
+    const handleOnChange = (value: any) => {
+        console.log("[TreeInfo]value", value)
+    }
+
+    const value = {
+        "x-id": "td_tXAABwaZAE",
+        "type": "object",
+        "x-component-name": "Form",
+        "properties": {
+            "td_rszikvOzVh": {
+                "type": "string",
+                "title": "文本框",
+                "required": true,
+                "x-decorator": "FormItem",
+                "x-component": "Input.TextArea",
+                "x-id": "td_rszikvOzVh",
+                "x-index": 0,
+                "x-component-name": "Field",
+            },
+            "td_AaMFjiFfps": {
+                "title": "性别",
+                "x-decorator": "FormItem",
+                "x-component": "Select",
+                "x-id": "td_AaMFjiFfps",
+                "x-index": 1,
+                "x-component-name": "Field",
+            }
+        }
+    }
+
     return (
         <div className="App">
-            <FormDesigner>
+            <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>
-                                <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/Form.tsx b/examples/form-designer-react/src/components/Form.tsx
@@ -22,6 +22,7 @@ Form.Resource = createResource([
         title: '表单',
         droppable: true,
         schema: {
+            type: 'object',
             title: '表单',
             'x-component': 'Form',
         }

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">
@@ -10,7 +28,8 @@ export const MoveIcon: React.JSX.Element = (
     </svg>)
 
 export const DeleteIcon = (
-    <svg  className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200" height="200">
+    <svg className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="200"
+         height="200">
         <path
             d="M768 384c-19.2 0-32 12.8-32 32l0 377.6c0 25.6-19.2 38.4-38.4 38.4L326.4 832c-25.6 0-38.4-19.2-38.4-38.4L288 416C288 396.8 275.2 384 256 384S224 396.8 224 416l0 377.6c0 57.6 44.8 102.4 102.4 102.4l364.8 0c57.6 0 102.4-44.8 102.4-102.4L793.6 416C800 396.8 787.2 384 768 384z"
             fill="#ffffff" p-id="5240"></path>
@@ -23,4 +42,21 @@ export const DeleteIcon = (
         <path
             d="M832 256l-160 0L672 211.2C672 166.4 633.6 128 588.8 128L435.2 128C390.4 128 352 166.4 352 211.2L352 256 192 256C172.8 256 160 268.8 160 288S172.8 320 192 320l640 0c19.2 0 32-12.8 32-32S851.2 256 832 256zM416 211.2C416 198.4 422.4 192 435.2 192l153.6 0c12.8 0 19.2 6.4 19.2 19.2L608 256l-192 0L416 211.2z"
             fill="#ffffff" p-id="5243"></path>
+    </svg>)
+
+export const MobileDeleteIcon = (
+    <svg d="1702454721524" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+         p-id="3591" xmlnsXlink="http://www.w3.org/1999/xlink" width="200" height="200">
+        <path
+            d="M768 384c-19.2 0-32 12.8-32 32l0 377.6c0 25.6-19.2 38.4-38.4 38.4L326.4 832c-25.6 0-38.4-19.2-38.4-38.4L288 416C288 396.8 275.2 384 256 384S224 396.8 224 416l0 377.6c0 57.6 44.8 102.4 102.4 102.4l364.8 0c57.6 0 102.4-44.8 102.4-102.4L793.6 416C800 396.8 787.2 384 768 384z"
+            fill="#272636" p-id="3592"></path>
+        <path
+            d="M460.8 736l0-320C460.8 396.8 448 384 435.2 384S396.8 396.8 396.8 416l0 320c0 19.2 12.8 32 32 32S460.8 755.2 460.8 736z"
+            fill="#272636" p-id="3593"></path>
+        <path
+            d="M627.2 736l0-320C627.2 396.8 608 384 588.8 384S563.2 396.8 563.2 416l0 320C563.2 755.2 576 768 588.8 768S627.2 755.2 627.2 736z"
+            fill="#272636" p-id="3594"></path>
+        <path
+            d="M832 256l-160 0L672 211.2C672 166.4 633.6 128 588.8 128L435.2 128C390.4 128 352 166.4 352 211.2L352 256 192 256C172.8 256 160 268.8 160 288S172.8 320 192 320l640 0c19.2 0 32-12.8 32-32S851.2 256 832 256zM416 211.2C416 198.4 422.4 192 435.2 192l153.6 0c12.8 0 19.2 6.4 19.2 19.2L608 256l-192 0L416 211.2z"
+            fill="#272636" p-id="3595"></path>
     </svg>)
diff --git a/packages/form-designer-react/src/container/FormDesigner.tsx b/packages/form-designer-react/src/container/FormDesigner.tsx
@@ -1,8 +1,9 @@
-import React from "react";
+import React, {useEffect} from "react";
 import {FC} from "react";
 import {FormDesignerContext} from "../context";
 import {FormDesignerEngine} from "../model";
 import {GhostWidget} from "../widget/GhostWidget";
+import {transformToTreeNode} from "../coordinate";
 
 
 type FormDesignerProps = {
@@ -11,11 +12,20 @@ type FormDesignerProps = {
     value?: any
     onChange?: (value: any) => void
 }
-export const FormDesigner: FC<FormDesignerProps> = ({children, engine}) => {
+export const FormDesigner: FC<FormDesignerProps> = ({children, engine,value,onChange}) => {
     let scopeEngine = engine
     if (!scopeEngine) {
         scopeEngine = new FormDesignerEngine({rootComponentName: 'Form'})
     }
+    scopeEngine?.setOnchange(onChange)
+
+    useEffect(() => {
+        if (value) {
+           const tree = scopeEngine.operation?.tree.from(transformToTreeNode(value))
+            debugger
+        }
+    }, [value])
+
 
     return <FormDesignerContext.Provider value={scopeEngine}>
         {children}