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

packages/designer/src/component-meta.ts

@@ -20,6 +20,7 @@ import { IconComponent } from './icons/component';
 import { IconRemove } from './icons/remove';
 import { IconClone } from './icons/clone';
 import { ReactElement } from 'react';
+import { IconHidden } from './icons/hidden';
 
 function ensureAList(list?: string | string[]): string[] | null {
   if (!list) {
@@ -341,6 +342,20 @@ const builtinComponentActions: ComponentAction[] = [
     },
     important: true,
   },
+  {
+    name: 'hide',
+    content: {
+      icon: IconHidden,
+      title: intlNode('hide'),
+      action(node: Node) {
+        node.getExtraProp('hidden', true)?.setValue(true);
+      },
+    },
+    condition: (node: Node) => {
+      return node.componentMeta.isModal;
+    },
+    important: true,
+  },
 ];
 
 export function removeBuiltinComponentAction(name: string) {

packages/designer/src/document/document-model.ts

@@ -461,14 +461,16 @@ export class DocumentModel {
     return config.checkNestingDown(parent, obj) && this.checkNestingUp(parent, obj);
   }
 
-  // ======= compatibles
+  // ======= compatibles for vision
   getRoot() {
     return this.rootNode;
   }
 
-  /**
+  // add toData
-   * 兼容vision
+  toData() {
-   */
+    return { componentsTree: [this.project?.currentDocument?.export()] };
+  }
+
   getHistory(): History {
     return this.history;
   }

packages/designer/src/locale/en-US.json

@@ -1,6 +1,7 @@
 {
   "copy": "Copy",
   "remove": "Remove",
+  "hide": "Hide",
   "Condition Group": "Condition Group",
   "No opened document": "No opened document, open some document to editing"
 }

packages/designer/src/locale/zh-CN.json

@@ -1,6 +1,7 @@
 {
   "copy": "复制",
   "remove": "删除",
+  "hide": "隐藏",
   "Condition Group": "条件组",
   "No opened document": "没有打开的页面，请选择页面打开编辑"
 }

packages/editor-skeleton/src/layouts/top-area.tsx

@@ -4,23 +4,23 @@ import { observer } from '@ali/lowcode-editor-core';
 import Area from '../area';
 
 @observer
-export default class TopArea extends Component<{ area: Area }> {
+export default class TopArea extends Component<{ area: Area, itemClassName?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, itemClassName } = this.props;
     return (
       <div className={classNames("lc-top-area engine-actionpane", {
         'lc-area-visible': area.visible
       })}>
-        <Contents area={area} />
+        <Contents area={area} itemClassName={itemClassName} />
       </div>
     );
   }
 }
 
 @observer
-class Contents extends Component<{ area: Area }> {
+class Contents extends Component<{ area: Area, itemClassName?: string }> {
   render() {
-    const { area } = this.props;
+    const { area, itemClassName } = this.props;
     const left: any[] = [];
     const center: any[] = [];
     const right: any[] = [];
@@ -29,12 +29,17 @@ class Contents extends Component<{ area: Area }> {
       const index2 = b.config?.index || 0;
       return index1 === index2 ? 0 : (index1 > index2 ? 1 : -1);
     }).forEach(item => {
+      const content = (
+        <div className={itemClassName || ''}>
+          {item.content}
+        </div>
+      );
       if (item.align === 'center') {
-        center.push(item.content);
+        center.push(content);
       } else if (item.align === 'left') {
-        left.push(item.content);
+        left.push(content);
       } else {
-        right.push(item.content);
+        right.push(content);
       }
     });
     return (

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

@@ -185,12 +185,12 @@ body {
     display: flex;
     margin-bottom: 2px;
     padding: 8px;
-    .lc-top-area-left{}
+
     .lc-top-area-center{
       flex: 1;
       display: flex;
-      justify-content: flex-end;
+      justify-content: center;
-      margin-right: 8px;
+      margin: 0 8px;
     }
     .lc-top-area-right{
       display: flex;
@@ -268,6 +268,13 @@ body {
         .lc-title{
           padding: 12px;
           flex-direction: column;
+          width: 46px;
+          height: 46px;
+
+          svg {
+            fill: var(--color-icon-normal,rgba(31,56,88,.4));
+          }
+
           &.has-tip{
             cursor: pointer;
           }
@@ -324,6 +331,7 @@ body {
       flex: 1;
       display: flex;
       flex-direction: column;
+      z-index: 10;
       .lc-toolbar {
         height: var(--toolbar-height);
         background-color: var(--color-pane-background);

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

@@ -13,16 +13,16 @@ import RightArea from './right-area';
 import './workbench.less';
 
 @observer
-export class Workbench extends Component<{ skeleton: Skeleton, className?: string }> {
+export class Workbench extends Component<{ skeleton: Skeleton, className?: string, topAreaItemClassName?: string }> {
   shouldComponentUpdate() {
     return false;
   }
 
   render() {
-    const { skeleton, className } = this.props;
+    const { skeleton, className, topAreaItemClassName } = this.props;
     return (
       <div className={classNames('lc-workbench', className)}>
-        <TopArea area={skeleton.topArea} />
+        <TopArea area={skeleton.topArea} itemClassName={topAreaItemClassName} />
         <div className="lc-workbench-body">
           <LeftArea area={skeleton.leftArea} />
           <LeftFloatPane area={skeleton.leftFloatArea} />

packages/editor-skeleton/src/transducers/addon-combine.ts

@@ -183,8 +183,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
       items: [
         {
           name: '___condition',
-          title: { type: 'i18n', 'zh-CN': '条件显示', 'en-US': 'Condition' },
+          title: { type: 'i18n', 'zh-CN': '是否渲染', 'en-US': 'Condition' },
-          setter: 'ExpressionSetter',
+          setter: [{
+            componentName: 'BoolSetter',
+          }, {
+            componentName: 'VariableSetter'
+          }],
         },
         {
           name: '#loop',
@@ -193,27 +197,14 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             {
               name: '___loop',
               title: { type: 'i18n', 'zh-CN': '循环数据', 'en-US': 'Loop Data' },
-              setter: {
+              setter: [{
-                componentName: 'MixinSetter',
+                componentName: 'JsonSetter',
                 props: {
-                  // TODO:
+                  label: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data'},
-                  setters: [
-                    {
-                      componentName: 'JSONSetter',
-                      props: {
-                        mode: 'popup',
-                        placeholder: { type: 'i18n', 'zh-CN': '编辑数据', 'en-US': 'Edit Data' },
-                      },
-                    },
-                    {
-                      componentName: 'ExpressionSetter',
-                      props: {
-                        placeholder: { type: 'i18n', 'zh-CN': '绑定数据', 'en-US': 'Bind Data' },
-                      },
-                    },
-                  ],
-                },
                 },
+              }, {
+                componentName: 'VariableSetter'
+              }],
             },
             {
               name: '___loopArgs.0',
@@ -237,8 +228,12 @@ export default function(metadata: TransformedComponentMetadata): TransformedComp
             },
             {
               name: 'key',
-              title: 'Key',
+              title: '循环 Key',
-              setter: 'ExpressionSetter',
+              setter: [{
+                componentName: 'StringSetter',
+              }, {
+                componentName: 'VariableSetter'
+              }],
             },
           ],
         },

packages/plugin-outline-pane/src/views/tree-title.tsx

@@ -126,7 +126,7 @@ export default class TreeTitle extends Component<{
           )}
         </div>
         {isCNode && isNodeParent && <HideBtn treeNode={treeNode} />}
-        {isCNode && isNodeParent && <LockBtn treeNode={treeNode} />}
+        {/*isCNode && isNodeParent && <LockBtn treeNode={treeNode} />*/}
       </div>
     );
   }

packages/react-renderer/src/engine/base.jsx

@@ -228,6 +228,11 @@ export default class BaseEngine extends PureComponent {
 
     let Comp = components[schema.componentName] || Div;
 
+    console.info('node schema', schema, engine.props);
+    if (schema.hidden) {
+      return null;
+    }
+
     if (schema.loop !== undefined) {
       return this.__createLoopVirtualDom(
         {

packages/react-simulator-renderer/package.json

@@ -21,6 +21,7 @@
     "@recore/obx-react": "^1.0.7",
     "classnames": "^2.2.6",
     "react": "^16",
+    "@ali/vu-css-style": "^1.0.2",
     "react-dom": "^16.7.0"
   },
   "devDependencies": {

packages/react-simulator-renderer/src/renderer-view.tsx

@@ -1,9 +1,11 @@
 import LowCodeRenderer from '@ali/lowcode-react-renderer';
+import { isObject } from 'lodash';
 import { ReactInstance, Fragment, Component, createElement } from 'react';
 import { observer } from '@recore/obx-react';
 import { SimulatorRenderer } from './renderer';
 import { host } from './host';
 import './renderer.less';
+import { toCss } from '@ali/vu-css-style';
 
 // patch cloneElement avoid lost keyProps
 const originCloneElement = window.React.cloneElement;
@@ -84,6 +86,10 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           const { __id, __desingMode, ...viewProps } = props;
           viewProps.componentId = __id;
           viewProps._leaf = host.document.getNode(__id);
+
+          // FIXME: 此处未来使用propsReducer方式处理
+          this.createNodeStyleSheet(viewProps);
+
           return createElement(
             Component,
             viewProps,
@@ -99,4 +105,28 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
       />
     );
   }
+  createNodeStyleSheet(props: any) {
+    if (props && props.fieldId) {
+      let styleProp = props.__style__;
+
+      if (isObject(styleProp)) {
+        styleProp = toCss(styleProp);
+      }
+
+      if (typeof styleProp === 'string') {
+        const s = document.createElement('style');
+        const cssId = '_style_pesudo_' + props.fieldId;
+        const cssClass = '_css_pesudo_' + props.fieldId;
+
+        props.className = cssClass;
+        s.setAttribute('type', 'text/css');
+        s.setAttribute('id', cssId);
+        document.getElementsByTagName('head')[0].appendChild(s);
+
+        s.appendChild(document.createTextNode(styleProp.replace(/:root/g, '.' + cssClass)));
+
+        return s;
+      }
+    }
+  }
 }

packages/vision-preset/src/index.ts

@@ -44,6 +44,7 @@ function init(container?: Element) {
     createElement(Workbench, {
       skeleton,
       className: 'engine-main',
+      topAreaItemClassName: 'engine-actionitem',
     }),
     container,
   );