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

packages/demo/package.json

@@ -20,20 +20,18 @@
     "@ali/lowcode-plugin-sample-logo": "^0.8.8",
     "@ali/lowcode-plugin-sample-preview": "^0.8.11",
     "@ali/lowcode-plugin-settings-pane": "^0.8.8",
-    "@ali/lowcode-plugin-source-editor": "^0.8.5",
     "@ali/lowcode-plugin-undo-redo": "^0.8.9",
     "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.7",
     "@ali/lowcode-plugin-zh-en": "^0.8.11",
     "@ali/lowcode-react-renderer": "^0.8.5",
     "@ali/lowcode-runtime": "^0.8.13",
-    "@ali/lowcode-setters": "^0.8.11",
     "@ali/lowcode-utils": "^0.8.2",
-    "@ali/vs-variable-setter": "^3.1.0",
     "@ali/ve-action-pane": "^4.7.0-beta.0",
     "@ali/ve-datapool-pane": "^6.4.3",
     "@ali/ve-i18n-manage-pane": "^4.3.0",
     "@ali/ve-i18n-pane": "^4.0.0-beta.0",
     "@ali/ve-trunk-pane": "^5.1.0-beta.14",
+    "@ali/vs-variable-setter": "^3.1.0",
     "@ali/vu-legao-design-fetch-context": "^1.0.3",
     "@alifd/next": "^1.19.12",
     "@alife/theme-lowcode-dark": "^0.1.0",

packages/demo/src/editor/config/components.js

@@ -9,7 +9,7 @@ import settingsPane from '@ali/lowcode-plugin-settings-pane';
 import designer from '@ali/lowcode-plugin-designer';
 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 sourceEditor from '@ali/lowcode-plugin-source-editor';
 export default {
   LowcodeSkeleton,
   logo,
@@ -22,5 +22,5 @@ export default {
   designer,
   eventBindDialog,
   variableBindDialog,
-  sourceEditor
+  // sourceEditor
 };

packages/demo/src/editor/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { registerSetters } from '@ali/lowcode-setters';
+// import { registerSetters } from '@ali/lowcode-setters';
 import config from './config/skeleton';
 import components from './config/components';
 import utils from './config/utils';
@@ -8,7 +8,7 @@ import utils from './config/utils';
 import './global.scss';
 import './config/theme.scss';
 
-registerSetters();
+// registerSetters();
 const Skeleton = components.LowcodeSkeleton;
 const LCE_CONTAINER = document.getElementById('lce-container');
 

packages/demo/src/vision/index.ts

@@ -2,6 +2,7 @@
 import { createElement } from 'react';
 import { Button } from '@alifd/next';
 import Engine, { Panes } from '@ali/visualengine';
+import { ActionUtil as actionUtil } from '@ali/visualengine-utils';
 import getTrunkPane from '@ali/ve-trunk-pane';
 import DatapoolPane from '@ali/ve-datapool-pane';
 // import I18nPane from '@ali/ve-i18n-pane';
@@ -273,6 +274,43 @@ function initI18nPane() {
 
 // 动作面板
 function initActionPane() {
+  actionUtil.setActions({
+    module: {
+      compiled: "'use strict';\n\nexports.__esModule = true;\n\nvar _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };\n\nexports.submit = submit;\nexports.onLoadData = onLoadData;\nexports.add = add;\nexports.edit = edit;\nexports.del = del;\nexports.search = search;\nexports.reset = reset;\n/**\n* 点击弹框的“确认”\n*/\nfunction submit() {\n  var _this = this;\n\n  this.$('form').submit(function (data, error) {\n    if (data) {\n      _this.dataSourceMap['table_submit'].load(data).then(function (res) {\n        _this.utils.toast({\n          type: 'success',\n          title: '提交成功'\n        });\n        _this.$('dialog').hide();\n        _this.dataSourceMap['table_list'].load();\n      }).catch(function () {\n        _this.utils.toast({\n          type: 'error',\n          title: '提交失败'\n        });\n      });\n    }\n  });\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nfunction onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n  var tableParams = {\n    currentPage: from === 'search' ? 1 : currentPage,\n    pageSize: pageSize,\n    searchKey: searchKey,\n    orderColumn: orderColumn,\n    orderType: orderType\n  };\n  this.setState({ tableParams: tableParams });\n}\n\n// 点击新增\nfunction add() {\n  this.setState({\n    formData: null\n  });\n  this.$('dialog').show();\n}\n\n// 点击编辑\nfunction edit(rowData) {\n  this.setState({\n    formData: rowData\n  });\n  this.$('dialog').show();\n}\n\n// 点击删除\nfunction del(rowData) {\n  var _this2 = this;\n\n  this.utils.dialog({\n    method: 'confirm',\n    title: '提示',\n    content: '确认删除该条目吗？',\n    onOk: function onOk() {\n      _this2.dataSourceMap['table_delete'].load({ id: rowData.id }).then(function () {\n        _this2.utils.toast({\n          type: 'success',\n          title: '删除成功'\n        });\n        _this2.dataSourceMap['table_list'].load();\n      }).catch(function () {\n        _this2.utils.toast({\n          type: 'error',\n          title: '删除失败'\n        });\n      });\n    }\n  });\n}\n\n/**\n* button onClick\n*/\nfunction search() {\n  var filterData = this.$('filter').getValue();\n  this.setState({\n    filterData: filterData,\n    tableParams: _extends({}, this.state.tableParams, {\n      time: Date.now(),\n      currentPage: 1\n    })\n  });\n}\n\n/**\n* button onClick\n*/\nfunction reset() {\n  this.$('filter').reset();\n  this.setState({\n    filterData: {},\n    tableParams: _extends({}, this.state.tableParams, {\n      time: Date.now(),\n      currentPage: 1\n    })\n  });\n}",
+      source: "/**\n* 点击弹框的“确认”\n*/\nexport function submit() {\n  this.$('form').submit((data, error) => {\n    if (data) {\n      this.dataSourceMap['table_submit'].load(data).then((res) => {\n        this.utils.toast({\n          type: 'success',\n          title: '提交成功'\n        });\n        this.$('dialog').hide();\n        this.dataSourceMap['table_list'].load();\n      }).catch(()=>{\n        this.utils.toast({\n          type: 'error',\n          title: '提交失败'\n        });\n      })\n    }\n  })\n}\n\n/**\n* tablePc onLoadData\n* @param currentPage 当前页码\n* @param pageSize 每页显示条数\n* @param searchKey 搜索关键字\n* @param orderColumn 排序列\n* @param orderType 排序方式（desc,asc）\n* @param from 触发来源（order,search,pagination）\n*/\nexport function onLoadData(currentPage, pageSize, searchKey, orderColumn, orderType, from) {\n  const tableParams = {\n    currentPage: from === 'search' ? 1 : currentPage,\n    pageSize,\n    searchKey,\n    orderColumn,\n    orderType\n  };\n  this.setState({ tableParams });\n}\n\n// 点击新增\nexport function add() {\n  this.setState({\n    formData: null,\n  });\n  this.$('dialog').show();\n}\n\n\n// 点击编辑\nexport function edit(rowData) {\n  this.setState({\n    formData: rowData\n  });\n  this.$('dialog').show();\n}\n\n// 点击删除\nexport function del(rowData) {\n  this.utils.dialog({\n    method: 'confirm',\n    title: '提示',\n    content: '确认删除该条目吗？',\n    onOk: () => {\n      this.dataSourceMap['table_delete'].load({ id: rowData.id }).then(() => {\n        this.utils.toast({\n          type: 'success',\n          title: '删除成功'\n        });\n        this.dataSourceMap['table_list'].load();\n      }).catch(()=>{\n        this.utils.toast({\n          type: 'error',\n          title: '删除失败'\n        });\n      })\n    }\n  })\n}\n\n/**\n* button onClick\n*/\nexport function search(){\n  const filterData = this.$('filter').getValue();\n  this.setState({\n    filterData,\n    tableParams: {\n      ...this.state.tableParams,\n      time: Date.now(),\n      currentPage: 1\n    }\n  });\n}\n\n/**\n* button onClick\n*/\nexport function reset(){\n  this.$('filter').reset();\n  this.setState({\n    filterData: {},\n    tableParams: {\n      ...this.state.tableParams,\n      time: Date.now(),\n      currentPage: 1\n    }\n  });\n}"
+    },
+    type: "FUNCTION",
+    list: [
+      {
+        "id": "submit",
+        "title": "submit"
+      },
+      {
+        "id": "onLoadData",
+        "title": "onLoadData"
+      },
+      {
+        "id": "add",
+        "title": "add"
+      },
+      {
+        "id": "edit",
+        "title": "edit"
+      },
+      {
+        "id": "del",
+        "title": "del"
+      },
+      {
+        "id": "search",
+        "title": "search"
+      },
+      {
+        "id": "reset",
+        "title": "reset"
+      }
+    ]
+  });
   const props = {
     enableGlobalJS: false,
     enableVsCodeEdit: false,

packages/designer/src/designer/setting/setting-prop-entry.ts

@@ -1,10 +1,11 @@
-import { obx, computed } from '@ali/lowcode-editor-core';
+import { obx, computed, autorun } from '@ali/lowcode-editor-core';
 import { IEditor, isJSExpression } from '@ali/lowcode-types';
 import { uniqueId } from '@ali/lowcode-utils';
 import { SettingEntry } from './setting-entry';
 import { Node } from '../../document';
 import { ComponentMeta } from '../../component-meta';
 import { Designer } from '../designer';
+import { EventEmitter } from 'events';
 
 export class SettingPropEntry implements SettingEntry {
   // === static properties ===
@@ -20,6 +21,8 @@ export class SettingPropEntry implements SettingEntry {
   readonly type: 'field' | 'group';
   readonly id = uniqueId('entry');
 
+  readonly emitter = new EventEmitter();
+
   // ==== dynamic properties ====
   @obx.ref private _name: string | number;
   get name() {
@@ -59,6 +62,14 @@ export class SettingPropEntry implements SettingEntry {
     this.isSingle = parent.isSingle;
     this.designer = parent.designer;
     this.top = parent.top;
+
+    autorun(({ firstRun }) => {
+      const value = this.getValue();
+      if (firstRun) {
+        return;
+      }
+      this.emitter.emit('valuechange', value);
+    });
   }
 
   getId() {
@@ -88,7 +99,7 @@ export class SettingPropEntry implements SettingEntry {
     const propName = this.path.join('.');
     let l = this.nodes.length;
     while (l-- > 1) {
-      this.nodes[l].getProp(propName)?.remove()
+      this.nodes[l].getProp(propName)?.remove();
     }
   }
 
@@ -117,7 +128,6 @@ export class SettingPropEntry implements SettingEntry {
     if (setValue) {
       setValue(this, val);
     }
-    // TODO: emit value change
   }
 
   /**
@@ -170,9 +180,21 @@ export class SettingPropEntry implements SettingEntry {
     return this.top;
   }
 
-  onValueChange() {
-    // TODO:
-    return () => {};
+  onValueChange(func: () => any) {
+    this.emitter.on('valuechange', func);
+
+    return () => {
+      this.emitter.removeListener('valuechange', func);
+    };
+  }
+
+  /**
+   * @deprecated
+   */
+  valueChange() {
+    console.warn('valueChange deprecated');
+
+    this.emitter.emit('valuechange');
   }
 
   getDefaultValue() {

packages/designer/src/document/node/node.ts

@@ -10,6 +10,7 @@ import {
   SlotSchema,
   PageSchema,
   ComponentSchema,
+  NodeStatus,
 } from '@ali/lowcode-types';
 import { Props, EXTRA_KEY_PREFIX } from './props/props';
 import { DocumentModel } from '../document-model';
@@ -483,7 +484,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     }
 
     const { props = {}, extras } = this.props.export(stage) || {};
-    const _extras_: {[key: string]: any} = {
+    const _extras_: { [key: string]: any } = {
       ...extras,
     };
     if (_extras_) {
@@ -601,16 +602,34 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     this.children?.mergeChildren(remover, adder, sorter);
   }
 
+  @obx.val status: NodeStatus = {
+    inPlaceEditing: false,
+    locking: false,
+    pseudo: false,
+  };
+
   /**
    * @deprecated
    */
-  getStatus() {
-    return 'default';
+  getStatus(field?: keyof NodeStatus) {
+    if (field && this.status[field] != null) {
+      return this.status[field];
+    }
+
+    return this.status;
   }
   /**
    * @deprecated
    */
-  setStatus() {}
+  setStatus(field: keyof NodeStatus, flag: boolean) {
+    if (!this.status.hasOwnProperty(field)) {
+      return;
+    }
+
+    if (flag !== this.status[field]) {
+      this.status[field] = flag;
+    }
+  }
   /**
    * @deprecated
    */
@@ -674,9 +693,9 @@ export interface LeafNode extends Node {
   readonly children: null;
 }
 
-export interface SlotNode extends ParentalNode<SlotSchema> {}
-export interface PageNode extends ParentalNode<PageSchema> {}
-export interface ComponentNode extends ParentalNode<ComponentSchema> {}
+export type SlotNode = ParentalNode<SlotSchema>;
+export type PageNode = ParentalNode<PageSchema>;
+export type ComponentNode = ParentalNode<ComponentSchema>;
 export type RootNode = PageNode | ComponentNode;
 
 export function isNode(node: any): node is Node {

packages/editor-skeleton/src/layouts/workbench.tsx

@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import { TipContainer, observer } from '@ali/lowcode-editor-core';
+import classNames from 'classnames';
 import { Skeleton } from '../skeleton';
 import TopArea from './top-area';
 import LeftArea from './left-area';
@@ -12,15 +13,15 @@ import RightArea from './right-area';
 import './workbench.less';
 
 @observer
-export class Workbench extends Component<{ skeleton: Skeleton}> {
+export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> {
   shouldComponentUpdate() {
     return false;
   }
 
   render() {
-    const { skeleton } = this.props;
+    const { skeleton, className } = this.props;
     return (
-      <div className="lc-workbench">
+      <div className={classNames('lc-workbench', className)}>
         <TopArea area={skeleton.topArea} />
         <div className="lc-workbench-body">
           <LeftArea area={skeleton.leftArea} />

packages/editor-skeleton/src/widget/panel-dock.ts

@@ -64,7 +64,7 @@ export default class PanelDock implements IWidget {
         name: this.panelName,
         props: {
           // FIXME! give default title for panel
-          title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
+          // title: props ? composeTitle(props?.title, props?.icon, props?.description, true) : '',
           ...panelProps,
         },
         contentProps,

packages/editor-skeleton/src/widget/panel.ts

@@ -163,15 +163,23 @@ export default class Panel implements IWidget {
     this.setActive(true);
   }
 
-
+  /**
+   * @deprecated
+   */
   getSupportedPositions() {
     return ['default'];
   }
 
+  /**
+   * @deprecated
+   */
   getCurrentPosition() {
     return 'default';
   }
 
+  /**
+   * @deprecated
+   */
   setPosition(position: string) {
   }
 }

packages/types/src/index.ts

@@ -13,3 +13,4 @@ export * from './utils';
 export * from './value-type';
 export * from './setter-config';
 export * from './setting-target';
+export * from './node';

packages/types/src/node.ts

@@ -0,0 +1,5 @@
+export interface NodeStatus {
+  locking: boolean;
+  pseudo: boolean;
+  inPlaceEditing: boolean;
+}

packages/vision-preset/package.json

@@ -20,7 +20,6 @@
     "@ali/lowcode-plugin-outline-pane": "^0.8.12",
     "@ali/lowcode-plugin-undo-redo": "^0.8.9",
     "@ali/lowcode-plugin-zh-en": "^0.8.11",
-    "@ali/lowcode-setters": "^0.8.11",
     "@ali/ve-i18n-util": "^2.0.2",
     "@ali/ve-icons": "^4.1.9",
     "@ali/ve-less-variables": "2.0.3",

packages/vision-preset/src/editor.ts

@@ -2,16 +2,16 @@ import { isJSBlock } from '@ali/lowcode-types';
 import { isPlainObject } from '@ali/lowcode-utils';
 import { globalContext, Editor } from '@ali/lowcode-editor-core';
 import { Designer, TransformStage } from '@ali/lowcode-designer';
-import { registerSetters } from '@ali/lowcode-setters';
+// import { registerSetters } from '@ali/lowcode-setters';
 import Outline from '@ali/lowcode-plugin-outline-pane';
 import DesignerPlugin from '@ali/lowcode-plugin-designer';
 import { Skeleton, SettingsPrimaryPane } from '@ali/lowcode-editor-skeleton';
 
 import Preview from '@ali/lowcode-plugin-sample-preview';
-import SourceEditor from '@ali/lowcode-plugin-source-editor';
+// import SourceEditor from '@ali/lowcode-plugin-source-editor';
 import { i18nReducer } from './i18n-reducer';
 
-registerSetters();
+// registerSetters();
 
 export const editor = new Editor();
 globalContext.register(editor, Editor);

packages/vision-preset/src/index.ts

@@ -26,6 +26,11 @@ import { designer, editor } from './editor';
 import './vision.less';
 
 function init(container?: Element) {
+  //TODO: dirty fix
+  // 之前的组件库依赖了这个样式，临时fix一下。
+  // 取决于预览模式是否保留。
+  document.documentElement.classList.add('engine-design-mode');
+
   if (!container) {
     container = document.createElement('div');
     document.body.appendChild(container);
@@ -35,6 +40,7 @@ function init(container?: Element) {
   render(
     createElement(Workbench, {
       skeleton,
+      className: 'engine-main',
     }),
     container,
   );

packages/vision-preset/src/vision.less

@@ -46,6 +46,23 @@ html.engine-blur #engine {
   -webkit-filter: blur(4px);
 }
 
+.engine-main {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  .ve-icon-button {
+    > .ve-icon-contents {
+      color: var(--color-text, rgba(51,51,51,.6));
+    }
+    &:hover, &.active {
+      > .ve-icon-contents {
+        color: var(--color-text-light, rgba(51,51,51,.8));
+      }
+    }
+  }
+}
+
 .engine-empty {
   background: #f2f3f5;
   color: #a7b1bd;