Merge branch 'components-panel' of gitlab.alibaba-inc.com:ali-lowcode/ali-lowcode-engine into components-panel

packages/demo/package.json

@@ -39,7 +39,9 @@
     "@alife/theme-lowcode-light": "^0.1.0",
     "compare-versions": "^3.0.1",
     "react": "^16.8.1",
-    "react-dom": "^16.8.1"
+    "react-dom": "^16.8.1",
+    "streamsaver": "^2.0.4",
+    "web-streams-polyfill": "^2.1.1"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",

packages/demo/public/assets.json

@@ -12,6 +12,13 @@
       "version": "1.19.18",
       "urls": ["https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.js", "https://unpkg.antfin-inc.com/@alife/next@1.19.18/dist/next.css"],
       "library": "Next"
+    },
+    {
+      "title": "MCBreadcrumb",
+      "package": "mc-breadcrumb",
+      "version": "1.0.0",
+      "urls": ["https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.js", "https://unpkg.alibaba-inc.com/mc-breadcrumb@1.0.0/dist/MCBreadcrumb.css"],
+      "library": "MCBreadcrumb"
     }
   ],
   "components": [
@@ -649,6 +656,87 @@
         }
       ]
     },
+    {
+      "componentName": "MCBreadcrumb",
+      "title": "MCBreadcrumb",
+      "docUrl": "",
+      "screenshot": "",
+      "npm": {
+        "package": "mc-breadcrumb",
+        "version": "1.0.0",
+        "exportName": "MCBreadcrumb",
+        "main": "lib/index.js",
+        "destructuring": false,
+        "subName": ""
+      },
+      "props": [
+        {
+          "name": "prefix",
+          "propType": "string",
+          "description": "样式类名的品牌前缀",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "title",
+          "propType": "string",
+          "description": "标题",
+          "defaultValue": "next-"
+        },
+        {
+          "name": "rtl",
+          "propType": "bool"
+        },
+        {
+          "name": "children",
+          "propType": {
+            "type": "instanceOf",
+            "value": "custom"
+          },
+          "description": "面包屑子节点，需传入 Breadcrumb.Item"
+        },
+        {
+          "name": "maxNode",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "number",
+              {
+                "type": "oneOf",
+                "value": [
+                  "auto"
+                ]
+              }
+            ]
+          },
+          "description": "面包屑最多显示个数，超出部分会被隐藏, 设置为 auto 会自动根据父元素的宽度适配。",
+          "defaultValue": 100
+        },
+        {
+          "name": "separator",
+          "propType": {
+            "type": "instanceOf",
+            "value": "node"
+          },
+          "description": "分隔符，可以是文本或 Icon"
+        },
+        {
+          "name": "component",
+          "propType": {
+            "type": "oneOfType",
+            "value": [
+              "string",
+              "func"
+            ]
+          },
+          "description": "设置标签类型",
+          "defaultValue": "nav"
+        },
+        {
+          "name": "className",
+          "propType": "any"
+        }
+      ]
+    },
     {
       "componentName": "Breadcrumb.Item",
       "title": "@alifd/next",
@@ -856,7 +944,7 @@
     },
     {
       "componentName": "Button.Group",
-      "title": "@alifd/next",
+      "title": "Button.Group",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4079,7 +4167,7 @@
     },
     {
       "componentName": "Form",
-      "title": "@alifd/next",
+      "title": "Form",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -4241,7 +4329,7 @@
     },
     {
       "componentName": "Form.Item",
-      "title": "@alifd/next",
+      "title": "Form.Item",
       "docUrl": "",
       "screenshot": "",
       "npm": {
@@ -12189,6 +12277,27 @@
             }
           ]
         },
+        {
+          "componentName": "MCBreadcrumb",
+          "title": "MC面包屑",
+          "icon": "",
+          "package": "mc-breadcrumb",
+          "library": "MCBreadcrumb",
+          "snippets": [
+            {
+              "title": "面包屑",
+              "screenshot": "https://alifd.oss-cn-hangzhou.aliyuncs.com/fusion-cool/icons/icon-light/ic_light_breadcrumb.png",
+              "schema": {
+                "componentName": "MCBreadcrumb",
+                "props": {
+                  "title": "物料中心",
+                  "prefix": "next-",
+                  "maxNode": 100
+                }
+              }
+            }
+          ]
+        },
         {
           "componentName": "Nav",
           "title": "导航",

packages/demo/public/index.html

@@ -69,7 +69,5 @@
   <body>
     <!-- lowcode engine globals -->
     <div id="lce-container"></div>
-    <script src="/js/editor-preset-vision.js"></script>
-    <script src="https://dev.g.alicdn.com/vision/visualengine-utils/5.0.0/engine-utils.js"></script>
   </body>
 </html>

packages/demo/public/schema.json

@@ -94,7 +94,7 @@
         }
       }]
     }, {
-      "componentName": "Div",
+      "componentName": "Box",
       "props": {
         "style": {
           "textAlign": "center"

packages/demo/src/editor/components.ts

@@ -8,6 +8,8 @@ import eventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import variableBindDialog from '@ali/lowcode-plugin-variable-bind-dialog';
 import sourceEditor from '@ali/lowcode-plugin-source-editor';
 
+import codeout from './plugins/codeout';
+
 export default {
   logo,
   samplePreview,
@@ -18,4 +20,5 @@ export default {
   eventBindDialog,
   variableBindDialog,
   sourceEditor,
-}
+  codeout,
+};

packages/demo/src/editor/config.js

@@ -37,6 +37,14 @@ export default {
           width: 64,
         },
       },
+      {
+        pluginKey: 'codeout',
+        type: 'Custom',
+        props: {
+          align: 'right',
+          width: 64,
+        },
+      },
     ],
     leftArea: [
       {

packages/demo/src/editor/plugins/codeout.scss

@@ -0,0 +1,3 @@
+.lowcode-plugin-codeout {
+  padding: 10px 4px;
+}

packages/demo/src/editor/plugins/codeout.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+/* eslint-disable @typescript-eslint/no-empty-interface */
+import React from 'react';
+import { Button } from '@alifd/next';
+import { PluginProps } from '@ali/lowcode-types';
+import { Designer } from '@ali/lowcode-designer';
+import streamSaver from 'streamsaver';
+
+import './codeout.scss';
+
+const CODEOUT_SERVICE_HOST = '30.8.52.239:3000';
+
+const Codeout = ({ editor }: PluginProps) => {
+  const handleClick = () => {
+    const designer = editor.get(Designer);
+    if (designer) {
+      const fullSchema = {
+        ...designer.schema,
+        config: {
+          historyMode: 'hash',
+          targetRootID: 'J_Container',
+        },
+        meta: {
+          name: 'demoproject',
+        },
+      };
+
+      console.info('codeout schema:', fullSchema);
+      // localStorage.setItem('lce-dev-store', JSON.stringify(designer.schema));
+      fetch(`http://${CODEOUT_SERVICE_HOST}/api/generate/project`, {
+        method: 'POST',
+        body: JSON.stringify({ schema: JSON.stringify(fullSchema) }),
+        headers: new Headers({
+          'Content-Type': 'application/json',
+        }),
+        mode: 'cors',
+      }).then((res) => {
+        console.log(res);
+
+        const fileStream = streamSaver.createWriteStream('demoProject.zip');
+        res.body.pipeTo(fileStream).then(
+          () => {
+            console.log('success');
+          },
+          (err) => {
+            console.log(err);
+          },
+        );
+      });
+    }
+  };
+
+  return (
+    <div className="lowcode-plugin-codeout">
+      <Button type="primary" onClick={handleClick}>
+        出码
+      </Button>
+    </div>
+  );
+};
+
+export default Codeout;

packages/designer/src/builtin-simulator/host.ts

@@ -826,7 +826,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
       event: e,
     };
 
-    if (e.dragObject && e.dragObject.nodes && e.dragObject.nodes.length && e.dragObject.nodes[0].getPrototype().isModal()) {
+    if (e.dragObject && e.dragObject.nodes && e.dragObject.nodes.length && e.dragObject.nodes[0].getPrototype()?.isModal()) {
       return this.designer.createLocation({
         target: this.document.rootNode,
         detail,

packages/editor-skeleton/src/components/object-setter/index.tsx

@@ -161,7 +161,7 @@ class FormSetter extends Component<FormSetterProps> {
   constructor(props: RowSetterProps) {
     super(props);
     const { config, field } = props;
-    this.items = (config.items || []).map((conf) => field.createField(conf));
+    this.items = (config?.items || []).map((conf) => field.createField(conf));
 
     // TODO: extraConfig for custom fields
   }

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -158,5 +158,5 @@ function hoverNode(node: Node, flag: boolean) {
   node.hover(flag);
 }
 function selectNode(node: Node) {
-  node.select();
+  node?.select();
 }