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

packages/demo/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.20"></a>
+## [0.8.20](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.19...@ali/lowcode-demo@0.8.20) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-demo
+
+<a name="0.8.19"></a>
+## [0.8.19](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.18...@ali/lowcode-demo@0.8.19) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-demo
+
 <a name="0.8.18"></a>
 ## [0.8.18](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-demo@0.8.17...@ali/lowcode-demo@0.8.18) (2020-05-13)
 

packages/demo/build.plugin.js

@@ -16,7 +16,7 @@ module.exports = ({ onGetWebpackConfig }) => {
     .plugin('MonacoWebpackPlugin')
     // 第一项为具体插件，第二项为插件参数
     .use(new MonacoWebpackPlugin({
-      languages:["javascript","css","json"]
+      languages:["typescript","css","json"]
      }), []);
 
     config.plugins.delete('hot');

packages/demo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-demo",
-  "version": "0.8.18",
+  "version": "0.8.20",
   "private": true,
   "description": "低代码引擎 DEMO",
   "scripts": {
@@ -12,18 +12,18 @@
   "config": {},
   "dependencies": {
     "@ali/lowcode-editor-core": "^0.8.12",
-    "@ali/lowcode-editor-skeleton": "^0.8.15",
+    "@ali/lowcode-editor-skeleton": "^0.8.17",
-    "@ali/lowcode-plugin-components-pane": "^0.8.11",
+    "@ali/lowcode-plugin-components-pane": "^0.8.13",
-    "@ali/lowcode-plugin-designer": "^0.9.9",
+    "@ali/lowcode-plugin-designer": "^0.9.11",
     "@ali/lowcode-plugin-event-bind-dialog": "^0.8.12",
-    "@ali/lowcode-plugin-outline-pane": "^0.8.15",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.17",
     "@ali/lowcode-plugin-sample-logo": "^0.8.11",
-    "@ali/lowcode-plugin-sample-preview": "^0.8.14",
+    "@ali/lowcode-plugin-sample-preview": "^0.8.16",
     "@ali/lowcode-plugin-settings-pane": "^0.8.8",
-    "@ali/lowcode-plugin-undo-redo": "^0.8.14",
+    "@ali/lowcode-plugin-undo-redo": "^0.8.16",
     "@ali/lowcode-plugin-variable-bind-dialog": "^0.8.10",
     "@ali/lowcode-plugin-zh-en": "^0.8.14",
-    "@ali/lowcode-react-renderer": "^0.8.7",
+    "@ali/lowcode-react-renderer": "^0.8.8",
     "@ali/lowcode-runtime": "^0.8.13",
     "@ali/lowcode-utils": "^0.8.4",
     "@ali/ve-action-pane": "^4.7.0-beta.0",

packages/demo/public/legao-assets.json

@@ -115,8 +115,8 @@
     },
     {
       "prototypeConfigsUrl": [
-        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.0.11/proto.3f4f5d1.css",
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.611ab53.css",
-        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.0.11/proto.057b4c5.js"
+        "https://g.alicdn.com/legao-comp/web_bundle_0724/@ali/vc-deep/2.1.12/proto.5b7b3d3.js"
       ],
       "prototypeViewsUrl": null,
       "alias": "",

packages/demo/src/vision/index.ts

@@ -11,6 +11,7 @@ import PageHistoryPane from '@ali/ve-page-history-pane';
 // import I18nPane from '@ali/ve-i18n-pane';
 import I18nManagePane from '@ali/ve-i18n-manage-pane';
 import ActionPane from '@ali/ve-action-pane';
+import SourceEditor from '@ali/lowcode-plugin-source-editor';
 import fetchContext from '@ali/vu-legao-design-fetch-context';
 import EventBindDialog from '@ali/lowcode-plugin-event-bind-dialog';
 import loadUrls from './loader';
@@ -95,16 +96,43 @@ function initDemoPanes() {
     type: 'Widget',
     content: EventBindDialog,
   });
-  skeleton.add({
+
-    area: 'leftArea',
+  // skeleton.add({
-    name: 'icon1',
+  //   area: 'left',
-    type: 'Dock',
+  //   name: 'sourceEditor',
-    props: {
+  //   type: "PanelDock",
-      align: 'bottom',
+  //   content: SourceEditor,
-      icon: 'set',
+  //   props: {
-      description: '设置'
+  //     align: undefined,
-    },
+  //     description: "动作面板",
-  });
+  //     onDestroy: undefined,
+  //     icon: 'set',
+  //     onInit: undefined
+  //   },
+  //   panelProps:{
+  //     height: 300,
+  //     help: undefined,
+  //     hideTitleBar: true,
+  //     maxHeight: 800,
+  //     maxWidth: 1200,
+  //     title: "动作面板",
+  //     width: 600
+  //   }
+
+  // });
+
+  // skeleton.add({
+  //   area: 'leftArea',
+  //   name: 'icon1',
+  //   type: 'PanelDock',
+  //   props: {
+  //     align: 'bottom',
+  //     icon: 'set',
+  //     description: '设置'
+  //   },
+  // });
+
+
   skeleton.add({
     area: 'leftArea',
     name: 'icon2',
@@ -129,6 +157,8 @@ function initDemoPanes() {
       children: '发布',
     }),
   });
+
+
   skeleton.add({
     area: 'topArea',
     type: 'Dock',
@@ -322,6 +352,7 @@ function initActionPane() {
     enableHeaderTip: true,
   };
 
+
   Panes.add(ActionPane, {
     props,
   });

packages/designer/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.9.11"></a>
+## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.10...@ali/lowcode-designer@0.9.11) (2020-05-15)
+
+
+### Features
+
+* add ? to component designer/src/designer/setting/utils.js ([0025e3c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0025e3c))
+* add alias for get index ([e853a4f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/e853a4f))
+* add resize box ([14a55ae](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/14a55ae))
+* bord resizing ([361f4f6](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/361f4f6))
+* border resizing ([c7fc28c](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/c7fc28c))
+* for box resizing ([77e325f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/77e325f))
+* for box resizing ([cb2854d](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/cb2854d))
+
+
+
+
+<a name="0.9.10"></a>
+## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.9...@ali/lowcode-designer@0.9.10) (2020-05-15)
+
+
+### Bug Fixes
+
+* handling the undefined variable ([0efe8b4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0efe8b4))
+* lc-borders-actions ([56d9f5f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/56d9f5f))
+* 修复 toolbar 弹出位置异常 ([b40b9a4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b40b9a4))
+
+
+
+
 <a name="0.9.9"></a>
 ## [0.9.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-designer@0.9.8...@ali/lowcode-designer@0.9.9) (2020-05-13)
 

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-designer",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "description": "Designer for Ali LowCode Engine",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -19,6 +19,7 @@
     "@ali/lowcode-types": "^0.8.3",
     "@ali/lowcode-utils": "^0.8.4",
     "classnames": "^2.2.6",
+    "event": "^1.0.0",
     "react": "^16",
     "react-dom": "^16.7.0"
   },

packages/designer/src/builtin-simulator/bem-tools/border-resizing.tsx

@@ -0,0 +1,273 @@
+import { Component, Fragment } from 'react';
+import DragResizeEngine from './drag-resize-engine';
+import { observer, computed } from '@ali/lowcode-editor-core';
+import classNames from 'classnames';
+import { SimulatorContext } from '../context';
+import { BuiltinSimulatorHost } from '../host';
+import { OffsetObserver, Designer } from '../../designer';
+
+@observer
+export default class BoxResizing extends Component<{ host: BuiltinSimulatorHost }> {
+  static contextType = SimulatorContext;
+
+  get host(): BuiltinSimulatorHost {
+    return this.props.host;
+  }
+
+  get dragging(): boolean {
+    return this.host.designer.dragon.dragging;
+  }
+
+  @computed get selecting() {
+    const doc = this.host.document;
+    if (doc.suspensed) {
+      return null;
+    }
+    const selection = doc.selection;
+    return this.dragging ? selection.getTopNodes() : selection.getNodes();
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidUpdate() {
+    // this.hoveringCapture.setBoundary(this.outline);
+    // this.willBind();
+  }
+
+  render() {
+    const selecting = this.selecting;
+    if (!selecting || selecting.length < 1) {
+      // DIRTY FIX, recore has a bug!
+      return <Fragment />;
+    }
+
+    // const componentMeta = selecting[0].componentMeta;
+    // const metaData = componentMeta.getMetadata();
+
+    return (
+      <Fragment>
+        {selecting.map((node) => (
+          <BoxResizingForNode key={node.id} node={node} host={this.props.host} />
+        ))}
+      </Fragment>
+    );
+  }
+}
+
+@observer
+export class BoxResizingForNode extends Component<{ host: BuiltinSimulatorHost; node: Node }> {
+  static contextType = SimulatorContext;
+
+  get host(): BuiltinSimulatorHost {
+    return this.props.host;
+  }
+
+  get dragging(): boolean {
+    return this.host.designer.dragon.dragging;
+  }
+
+  @computed get instances() {
+    return this.host.getComponentInstances(this.props.node);
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    const { instances } = this;
+    const { node } = this.props;
+    const designer = this.host.designer;
+
+    if (!instances || instances.length < 1) {
+      return null;
+    }
+    return (
+      <Fragment key={node.id}>
+        {instances.map((instance: any) => {
+          const observed = designer.createOffsetObserver({
+            node,
+            instance,
+          });
+          if (!observed) {
+            return null;
+          }
+          return (
+            <BoxResizingInstance key={observed.id} dragging={this.dragging} designer={designer} observed={observed} />
+          );
+        })}
+      </Fragment>
+    );
+  }
+}
+
+@observer
+export class BoxResizingInstance extends Component<{
+  observed: OffsetObserver;
+  highlight?: boolean;
+  dragging?: boolean;
+  designer?: Designer;
+}> {
+  // private outline: any;
+  private willUnbind: () => any;
+  private outlineRight: any;
+  private outlineLeft: any;
+  private dragEngine: DragResizeEngine;
+
+  constructor(props: any) {
+    super(props);
+    this.dragEngine = new DragResizeEngine(props.designer);
+  }
+
+  componentWillUnmount() {
+    if (this.willUnbind) {
+      this.willUnbind();
+    }
+    this.props.observed.purge();
+  }
+
+  getExperiMentalFns = (metaData: any) => {
+    if (metaData.experimental && metaData.experimental.callbacks) {
+      return metaData.experimantal.callbacks;
+    }
+  };
+
+  componentDidMount() {
+    // this.hoveringCapture.setBoundary(this.outline);
+    this.willBind();
+
+    const resize = (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => {
+      const metaData = node.componentMeta.getMetadata();
+      if (
+        metaData &&
+        metaData.experimental &&
+        metaData.experimental.callbacks &&
+        typeof metaData.experimental.callbacks.onResize === 'function'
+      ) {
+        e.trigger = direction;
+        e.deltaX = moveX;
+        e.deltaY = moveY;
+        metaData.experimental.callbacks.onResize(e, node);
+      }
+    };
+
+    const resizeStart = (e: MouseEvent, direction: string, node: any) => {
+      const metaData = node.componentMeta.getMetadata();
+      if (
+        metaData &&
+        metaData.experimental &&
+        metaData.experimental.callbacks &&
+        typeof metaData.experimental.callbacks.onResizeStart === 'function'
+      ) {
+        e.trigger = direction;
+        metaData.experimental.callbacks.onResizeStart(e, node);
+      }
+    };
+
+    const resizeEnd = (e: MouseEvent, direction: string, node: any) => {
+      const metaData = node.componentMeta.getMetadata();
+      if (
+        metaData &&
+        metaData.experimental &&
+        metaData.experimental.callbacks &&
+        typeof metaData.experimental.callbacks.onResizeEnd === 'function'
+      ) {
+        e.trigger = direction;
+        metaData.experimental.callbacks.onResizeStart(e, node);
+      }
+    };
+
+    this.dragEngine.onResize(resize);
+    this.dragEngine.onResizeStart(resizeStart);
+    this.dragEngine.onResizeEnd(resizeEnd);
+  }
+
+  willBind() {
+    if (this.willUnbind) {
+      this.willUnbind();
+    }
+
+    if (!this.outlineRight && !this.outlineLeft) {
+      return;
+    }
+
+    const unBind: any[] = [];
+
+    unBind.push(
+      this.dragEngine.from(this.outlineRight, 'e', () => {
+        // if (!this.hoveringLine.hasOutline()) {
+        //   return null;
+        // }
+        // return this.hoveringLine.getCurrentNode();
+        return this.props.observed.node;
+      }),
+    );
+    unBind.push(
+      this.dragEngine.from(this.outlineLeft, 'w', () => {
+        return this.props.observed.node;
+        // if (!this.hoveringLine.hasOutline()) {
+        //   return null;
+        // }
+        // return this.hoveringLine.getCurrentNode();
+      }),
+    );
+
+    this.willUnbind = () => {
+      if (unBind && unBind.length > 0) {
+        unBind.forEach((item) => {
+          item();
+        });
+      }
+      this.willUnbind = () => {};
+    };
+  }
+
+  render() {
+    const { observed } = this.props;
+    if (!observed.hasOffset) {
+      return null;
+    }
+
+    const { node, offsetWidth, offsetHeight, offsetTop, offsetLeft } = observed;
+    let triggerVisible: any = [];
+    const metaData = node.componentMeta.getMetadata();
+    if (metaData && metaData.experimental && metaData.experimental.getResizingHandlers) {
+      triggerVisible = metaData.experimental.getResizingHandlers(node);
+    }
+
+    const className = classNames('lc-borders lc-resize-box');
+
+    return (
+      <div>
+        {triggerVisible.includes('w') && (
+          <div
+            ref={(ref) => {
+              this.outlineLeft = ref;
+            }}
+            className={className}
+            style={{
+              height: offsetHeight,
+              transform: `translate(${offsetLeft - 10}px, ${offsetTop}px)`,
+              width: 20,
+            }}
+          />
+        )}
+        {triggerVisible.includes('e') && (
+          <div
+            className={className}
+            ref={(ref) => {
+              this.outlineRight = ref;
+            }}
+            style={{
+              height: offsetHeight,
+              transform: `translate(${offsetLeft + offsetWidth - 10}px, ${offsetTop}px)`,
+              width: 20,
+            }}
+          />
+        )}
+      </div>
+    );
+  }
+}

packages/designer/src/builtin-simulator/bem-tools/border-selecting.tsx

@@ -15,6 +15,7 @@ import { ActionContentObject, isActionContentObject } from '@ali/lowcode-types';
 import { BuiltinSimulatorHost } from '../host';
 import { OffsetObserver } from '../../designer';
 import { Node } from '../../document';
+import NodeSelector from '../node-selector';
 
 @observer
 export class BorderSelectingInstance extends Component<{
@@ -68,7 +69,6 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
     let style: any;
     if (observed.top > SPACE_HEIGHT) {
       style = {
-        right: Math.max(-BORDER, observed.right - width - BORDER),
         top: -SPACE_HEIGHT,
         height: BAR_HEIGHT,
       };
@@ -76,15 +76,18 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
       style = {
         bottom: -SPACE_HEIGHT,
         height: BAR_HEIGHT,
-        right: Math.max(-BORDER, observed.right - width - BORDER),
       };
     } else {
       style = {
         height: BAR_HEIGHT,
         top: Math.max(MARGIN, MARGIN - observed.top),
-        right: Math.max(MARGIN, MARGIN + observed.right - width),
       };
     }
+    if (observed.width < 140) {
+      style.left = Math.max(-BORDER, observed.left - width - BORDER);
+    } else {
+      style.right = Math.max(-BORDER, observed.right - width - BORDER);
+    }
     const { node } = observed;
     const actions: ReactNodeArray = [];
     node.componentMeta.availableActions.forEach((action) => {
@@ -100,6 +103,7 @@ class Toolbar extends Component<{ observed: OffsetObserver }> {
     return (
       <div className="lc-borders-actions" style={style}>
         {actions}
+        <NodeSelector node={node} />
       </div>
     );
   }

packages/designer/src/builtin-simulator/bem-tools/borders.less

@@ -30,7 +30,8 @@
     }
   }
 
-  &-action {
+  &-action,
+  .ve-icon-button.ve-action-save {
     box-sizing: border-box;
     cursor: pointer;
     height: 20px;
@@ -48,6 +49,28 @@
     }
   }
 
+  &.lc-resize-box {
+    border-width: 0;
+    z-index: 1;
+    cursor: ew-resize;
+    pointer-events: auto;
+    align-items: center;
+    justify-content: center;
+    display: flex;
+
+    &:after {
+      content: "";
+      display: block;
+      height: calc(100% - 20px);
+      min-height: 50%;
+      width: 4px;
+      background: #738397;
+      border-radius: 2px;
+      // animation: flashing 1.5s infinite linear;
+    }
+  }
+
+  // &&-hovering {
   &&-detecting {
     z-index: 1;
     border-style: dashed;

packages/designer/src/builtin-simulator/bem-tools/drag-resize-engine.ts

@@ -0,0 +1,138 @@
+import * as EventEmitter from 'events';
+import { ISimulatorHost, isSimulatorHost } from '../../../../designer/src/simulator';
+import { Designer } from '../../../../designer/src/designer/designer';
+import { setNativeSelection, cursor } from '@ali/lowcode-utils';
+// import Cursor from './cursor';
+// import Pages from './pages';
+
+function makeEventsHandler(
+  boostEvent: MouseEvent | DragEvent,
+  sensors: ISimulatorHost[],
+): (fn: (sdoc: Document) => void) => void {
+  const topDoc = window.top.document;
+  const sourceDoc = boostEvent.view?.document || topDoc;
+  // TODO: optimize this logic, reduce listener
+  // const boostPrevented = boostEvent.defaultPrevented;
+  const docs = new Set<Document>();
+  // if (boostPrevented || isDragEvent(boostEvent)) {
+  docs.add(topDoc);
+  // }
+  docs.add(sourceDoc);
+  // if (sourceDoc !== topDoc || isDragEvent(boostEvent)) {
+  sensors.forEach((sim) => {
+    const sdoc = sim.contentDocument;
+    if (sdoc) {
+      docs.add(sdoc);
+    }
+  });
+  // }
+
+  return (handle: (sdoc: Document) => void) => {
+    docs.forEach((doc) => handle(doc));
+  };
+}
+
+// 拖动缩放
+export default class DragResizeEngine {
+  private emitter: EventEmitter;
+  private dragResizing = false;
+
+  constructor(readonly designer: Designer) {
+    this.designer = designer;
+    this.emitter = new EventEmitter();
+  }
+
+  private getMasterSensors(): ISimulatorHost[] {
+    return this.designer.project.documents
+      .map((doc) => {
+        // TODO: not use actived,
+        if (doc.actived && doc.simulator?.sensorAvailable) {
+          return doc.simulator;
+        }
+        return null;
+      })
+      .filter(Boolean) as any;
+  }
+
+  isDragResizing() {
+    return this.dragResizing;
+  }
+
+  /**
+   * drag reszie from
+   * @param shell
+   * @param direction n/s/e/w
+   * @param boost (e: MouseEvent) => VE.Node
+   */
+  from(shell: Element, direction: string, boost: (e: MouseEvent) => any) {
+    let node: any;
+    let startEvent: MouseEvent;
+
+    if (!shell) {
+      return () => {};
+    }
+
+    const move = (e: MouseEvent) => {
+      const moveX = e.clientX - startEvent.clientX;
+      const moveY = e.clientY - startEvent.clientY;
+
+      this.emitter.emit('resize', e, direction, node, moveX, moveY);
+    };
+
+    const masterSensors = this.getMasterSensors();
+
+    const over = (e: MouseEvent) => {
+      const handleEvents = makeEventsHandler(e, masterSensors);
+      handleEvents((doc) => {
+        doc.removeEventListener('mousemove', move, true);
+        doc.removeEventListener('mouseup', over, true);
+      });
+
+      this.dragResizing = false;
+      cursor.release();
+
+      this.emitter.emit('resizeEnd', e, direction, node);
+    };
+
+    const mousedown = (e: MouseEvent) => {
+      node = boost(e);
+      startEvent = e;
+      const handleEvents = makeEventsHandler(e, masterSensors);
+      handleEvents((doc) => {
+        doc.addEventListener('mousemove', move, true);
+        doc.addEventListener('mouseup', over, true);
+      });
+
+      this.emitter.emit('resizestart', e, direction, node);
+      this.dragResizing = true;
+      cursor.addState('ew-resize');
+    };
+    shell.addEventListener('mousedown', mousedown);
+    return () => {
+      shell.removeEventListener('mousedown', mousedown);
+    };
+  }
+
+  onResizeStart(func: (e: MouseEvent, direction: string, node: any) => any) {
+    this.emitter.on('resizestart', func);
+    return () => {
+      this.emitter.removeListener('resizestart', func);
+    };
+  }
+
+  onResize(func: (e: MouseEvent, direction: string, node: any, moveX: number, moveY: number) => any) {
+    this.emitter.on('resize', func);
+    return () => {
+      this.emitter.removeListener('resize', func);
+    };
+  }
+
+  onResizeEnd(func: (e: MouseEvent, direction: string, node: any) => any) {
+    this.emitter.on('resizeEnd', func);
+    return () => {
+      this.emitter.removeListener('resizeEnd', func);
+    };
+  }
+}
+
+// new DragResizeEngine();

packages/designer/src/builtin-simulator/bem-tools/index.tsx

@@ -3,6 +3,7 @@ import { observer } from '@ali/lowcode-editor-core';
 import { BorderDetecting } from './border-detecting';
 import { BuiltinSimulatorHost } from '../host';
 import { BorderSelecting } from './border-selecting';
+import BorderResizing from './border-resizing';
 import { InsertionView } from './insertion';
 import './bem-tools.less';
 import './borders.less';
@@ -21,6 +22,7 @@ export class BemTools extends Component<{ host: BuiltinSimulatorHost }> {
         <BorderDetecting key="hovering" host={host} />
         <BorderSelecting key="selecting" host={host} />
         <InsertionView key="insertion" host={host} />
+        <BorderResizing key="resizing" host={host} />
       </div>
     );
   }

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

@@ -31,12 +31,13 @@
 
   &-device-iphone6 {
     left: 50%;
-    width: 368px;
+    width: 378px;
     transform: translateX(-50%);
     background: url(https://img.alicdn.com/tps/TB12GetLpXXXXXhXFXXXXXXXXXX-756-1544.png) no-repeat top;
     background-size: 378px 772px;
     top: 8px;
     .@{scope}-canvas-viewport {
+      width: auto;
       top: 114px;
       left: 25px;
       right: 25px;

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

@@ -77,7 +77,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
 
   readonly designer = this.document.designer;
 
-  @computed get device(): string | undefined {
+  @computed get device(): string {
     return this.get('device') || 'default';
   }
 

packages/designer/src/builtin-simulator/live-editing/live-editing.ts

@@ -98,6 +98,7 @@ export class LiveEditing {
       const onSaveContent = matched?.onSaveContent || saveHandlers.find(item => item.condition(prop))?.onSaveContent || defaultSaveContent;
 
       setterPropElement.setAttribute('contenteditable', matched?.mode && matched.mode !== 'plaintext' ? 'true' : 'plaintext-only');
+      setterPropElement.removeAttribute('for');
       setterPropElement.classList.add('engine-live-editing');
       // be sure
       setterPropElement.focus();
@@ -107,14 +108,24 @@ export class LiveEditing {
         onSaveContent(setterPropElement!.innerText, prop);
       };
 
-      this._dispose = () => {
+      const keydown = (e: KeyboardEvent) => {
-        setterPropElement!.removeAttribute('contenteditable');
+        console.info(e.code);
-        setterPropElement!.classList.remove('engine-live-editing');
+        // esc
+        // enter
+        // tab
       };
-
+      const focusout = (e: FocusEvent) => {
-      setterPropElement.addEventListener('focusout', (e) => {
         this.saveAndDispose();
-      });
+      };
+      setterPropElement.addEventListener('focusout', focusout);
+      setterPropElement.addEventListener('keydown', keydown, true);
+
+      this._dispose = () => {
+        setterPropElement!.classList.remove('engine-live-editing');
+        setterPropElement!.removeAttribute('contenteditable');
+        setterPropElement!.removeEventListener('focusout', focusout);
+        setterPropElement!.removeEventListener('keydown', keydown, true);
+      };
 
       this._editing = prop;
     }

packages/designer/src/builtin-simulator/node-selector/index.less

@@ -0,0 +1,82 @@
+@import '~@ali/ve-less-variables/index.less';
+
+// 样式直接沿用之前的样式，优化了下命名
+.instance-node-selector {
+  position: relative;
+  margin-right: 2px;
+  color: var(--color-icon-white, @title-bgcolor);
+  border-radius: @global-border-radius;
+  margin-right: 2px;
+  pointer-events: auto;
+  flex-grow: 0;
+  flex-shrink: 0;
+
+  svg {
+    width: 16px;
+    height: 16px;
+    margin-right: 5px;
+    flex-grow: 0;
+    flex-shrink: 0;
+    max-width: inherit;
+    path {
+      fill: var(--color-icon-white, @title-bgcolor);
+    }
+  }
+  &-current {
+    background: var(--color-brand, @brand-color-1);
+    padding: 0 6px;
+    display: flex;
+    align-items: center;
+    height: 20px;
+    cursor: pointer;
+    color: var(--color-icon-white, @title-bgcolor);
+    border-radius: 3px;
+
+    &-title {
+      padding-right: 6px;
+      color: var(--color-icon-white, @title-bgcolor);
+    }
+  }
+  &-list {
+    position: absolute;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    visibility: hidden;
+  }
+  &-node {
+    margin: 2px 0;
+    &-content {
+      padding-left: 6px;
+      background: #78869a;
+      display: inline-flex;
+      border-radius: 3px;
+      align-items: center;
+      height: 20px;
+      color: var(--color-icon-white, @title-bgcolor);
+      cursor: pointer;
+      overflow: visible;
+    }
+    &-title {
+      padding-right: 6px;
+      // margin-left: 5px;
+      color: var(--color-icon-white, @title-bgcolor);
+      cursor: pointer;
+      overflow: visible;
+    }
+    &:hover {
+      opacity: 0.8;
+    }
+  }
+}
+
+&:hover {
+  .instance-node-selector-current {
+    color: ar(--color-text-reverse, @white-alpha-2);
+  }
+  .instance-node-selector-popup {
+    visibility: visible;
+    opacity: 1;
+    transition: 0.2s all ease-in;
+  }
+}

packages/designer/src/builtin-simulator/node-selector/index.tsx

@@ -0,0 +1,111 @@
+import { Overlay } from '@alifd/next';
+import React from 'react';
+import './index.less';
+import { Title } from '@ali/lowcode-editor-core';
+
+import { Node, ParentalNode } from '@ali/lowcode-designer';
+
+const { Popup } = Overlay;
+
+export interface IProps {
+  node: Node;
+}
+
+export interface IState {
+  parentNodes: Node[];
+}
+
+type UnionNode = Node | ParentalNode | null;
+
+export default class InstanceNodeSelector extends React.Component<IProps, IState> {
+  state: IState = {
+    parentNodes: [],
+  };
+
+  componentDidMount() {
+    const parentNodes = this.getParentNodes(this.props.node);
+    this.setState({
+      parentNodes,
+    });
+  }
+
+  // 获取节点的父级节点（最多获取5层）
+  getParentNodes = (node: Node) => {
+    const parentNodes = [];
+    let currentNode: UnionNode = node;
+
+    while (currentNode && parentNodes.length < 5) {
+      currentNode = currentNode.getParent();
+      if (currentNode) {
+        parentNodes.push(currentNode);
+      }
+    }
+    return parentNodes;
+  };
+
+  onSelect = (node: Node) => () => {
+    if (node && typeof node.select === 'function') {
+      node.select();
+    }
+  };
+  onMouseOver = (node: Node) => (_: any, flag = true) => {
+    if (node && typeof node.hover === 'function') {
+      node.hover(flag);
+    }
+  };
+  onMouseOut = (node: Node) => (_: any, flag = false) => {
+    if (node && typeof node.hover === 'function') {
+      node.hover(flag);
+    }
+  };
+  renderNodes = (node: Node) => {
+    const nodes = this.state.parentNodes || [];
+    const children = nodes.map((node, key) => {
+      return (
+        <div
+          key={key}
+          onClick={this.onSelect(node)}
+          onMouseEnter={this.onMouseOver(node)}
+          onMouseLeave={this.onMouseOut(node)}
+          className="instance-node-selector-node"
+        >
+          <div className="instance-node-selector-node-content">
+            <Title
+              className="instance-node-selector-node-title"
+              title={{
+                label: node.title,
+                icon: node.icon,
+              }}
+            />
+          </div>
+        </div>
+      );
+    });
+    return children;
+  };
+
+  render() {
+    const { node } = this.props;
+    return (
+      <div className="instance-node-selector">
+        <Popup
+          trigger={
+            <div className="instance-node-selector-current">
+              <Title
+                className="instance-node-selector-node-title"
+                title={{
+                  label: node.title,
+                  icon: node.icon,
+                }}
+              />
+            </div>
+          }
+          triggerType="hover"
+          offset={[0, 2]}
+        >
+          <div className="instance-node-selector">{this.renderNodes(node)}</div>
+        </Popup>
+      </div>
+    );
+  }
+}

packages/designer/src/designer/builtin-hotkey.ts

@@ -108,6 +108,8 @@ hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
   const componentsMap = {};
   const componentsTree = selected.map((item) => item.export(TransformStage.Save));
 
+  // FIXME: clear node.id
+
   const data = { type: 'nodeSchema', componentsMap, componentsTree };
 
   clipboard.setData(data);

packages/designer/src/designer/setting/utils.js

@@ -47,6 +47,9 @@ export class Transducer {
     }
     if (typeof setter === 'string') {
       setter = getSetter(setter)?.component;
+      if (!setter) {
+        debugger;
+      }
     }
 
     this.setterTransducer = combineTransducer(

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

@@ -483,7 +483,7 @@ export class DocumentModel {
 
   // add toData
   toData() {
-    const node = this.project?.currentDocument?.export(TransformStage.Serilize);
+    const node = this.project?.currentDocument?.export(TransformStage.Save);
     return { componentsTree: [node] };
   }
 

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

@@ -426,6 +426,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
     return this.parent.children.indexOf(this);
   }
 
+
   /**
    * 获取下一个兄弟节点
    */
@@ -486,9 +487,9 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
       componentName: this.componentName,
     };
 
-    if (stage !== TransformStage.Save) {
+    // if (stage !== TransformStage.Save) {
       baseSchema.id = this.id;
-    }
+    // }
 
     if (this.isLeaf()) {
       baseSchema.children = this.props.get('children')?.export(stage);
@@ -618,6 +619,9 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   getId() {
     return this.id;
   }
+  getIndex() {
+    return this.index;
+  }
   getNode() {
     return this;
   }

packages/designer/src/simulator.ts

@@ -81,7 +81,10 @@ export interface ISimulatorHost<P = object> extends ISensor {
   // later:
   // layout: ComponentName
   // 获取区块代码, 通过 components 传递，可异步获取
+  // 设置 simulator Props
   setProps(props: P): void;
+  // 设置单个 Prop
+  set(key: string, value: any): void;
 
   setSuspense(suspensed: boolean): void;
 

packages/editor-skeleton/CHANGELOG.md

@@ -3,6 +3,27 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.17"></a>
+## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.16...@ali/lowcode-editor-skeleton@0.8.17) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-editor-skeleton
+
+<a name="0.8.16"></a>
+## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.15...@ali/lowcode-editor-skeleton@0.8.16) (2020-05-15)
+
+
+### Bug Fixes
+
+* setting pane tab active ([06d7b50](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/06d7b50))
+* topbar search icon ([0447801](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0447801))
+* 修复 toolbar 弹出位置异常 ([b40b9a4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/b40b9a4))
+
+
+
+
 <a name="0.8.15"></a>
 ## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-editor-skeleton@0.8.14...@ali/lowcode-editor-skeleton@0.8.15) (2020-05-13)
 

packages/editor-skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-editor-skeleton",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "description": "alibaba lowcode editor skeleton",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -19,7 +19,7 @@
     "editor"
   ],
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
     "@ali/lowcode-editor-core": "^0.8.12",
     "@ali/lowcode-types": "^0.8.3",
     "@ali/lowcode-utils": "^0.8.4",

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

@@ -96,6 +96,7 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor }> {
     return (
       <div className="lc-settings-main">
         <Tab
+          key={settings.id}
           navClassName="lc-settings-tabs"
           animation={false}
           excessMode="dropdown"

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

@@ -156,6 +156,9 @@ body {
         margin-left: 4px;
         margin-right: 4px;
       }
+      .ve-quick-search-trigger{
+        display: flex;
+      }
     }
   }
   .lc-workbench-body {
@@ -229,6 +232,7 @@ body {
       flex-shrink: 0;
       flex-direction: column;
       justify-content: space-between;
+      overflow: hidden;
       &.lc-area-visible {
         display: flex;
       }

packages/plugin-components-pane/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.13"></a>
+## [0.8.13](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.12...@ali/lowcode-plugin-components-pane@0.8.13) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
+
+<a name="0.8.12"></a>
+## [0.8.12](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.11...@ali/lowcode-plugin-components-pane@0.8.12) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-components-pane
+
 <a name="0.8.11"></a>
 ## [0.8.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-components-pane@0.8.10...@ali/lowcode-plugin-components-pane@0.8.11) (2020-05-13)
 

packages/plugin-components-pane/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-components-pane",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "description": "alibaba lowcode editor component-list plugin",
   "files": [
     "es/",
@@ -23,7 +23,7 @@
     "@ali/iceluna-addon-component-list": "^1.0.11",
     "@ali/iceluna-comp-material-show": "^1.0.10",
     "@ali/iceluna-sdk": "^1.0.6-beta.6",
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
     "@ali/lowcode-editor-core": "^0.8.12",
     "@ali/lowcode-types": "^0.8.3",
     "@alifd/next": "^1.19.19",

packages/plugin-designer/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.9.11"></a>
+## [0.9.11](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.10...@ali/lowcode-plugin-designer@0.9.11) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-designer
+
+<a name="0.9.10"></a>
+## [0.9.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.9...@ali/lowcode-plugin-designer@0.9.10) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-designer
+
 <a name="0.9.9"></a>
 ## [0.9.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-designer@0.9.8...@ali/lowcode-plugin-designer@0.9.9) (2020-05-13)
 

packages/plugin-designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-designer",
-  "version": "0.9.9",
+  "version": "0.9.11",
   "description": "alibaba lowcode editor designer plugin",
   "files": [
     "es",
@@ -20,7 +20,7 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
     "@ali/lowcode-editor-core": "^0.8.12",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"

packages/plugin-outline-pane/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.17"></a>
+## [0.8.17](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.16...@ali/lowcode-plugin-outline-pane@0.8.17) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
+
+<a name="0.8.16"></a>
+## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.15...@ali/lowcode-plugin-outline-pane@0.8.16) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-outline-pane
+
 <a name="0.8.15"></a>
 ## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-outline-pane@0.8.14...@ali/lowcode-plugin-outline-pane@0.8.15) (2020-05-13)
 

packages/plugin-outline-pane/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-outline-pane",
-  "version": "0.8.15",
+  "version": "0.8.17",
   "description": "Outline pane for Ali lowCode engine",
   "files": [
     "es",
@@ -14,7 +14,7 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
     "@ali/lowcode-editor-core": "^0.8.12",
     "@ali/lowcode-types": "^0.8.3",
     "@ali/lowcode-utils": "^0.8.4",

packages/plugin-sample-preview/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.16"></a>
+## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.15...@ali/lowcode-plugin-sample-preview@0.8.16) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
+
+<a name="0.8.15"></a>
+## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.14...@ali/lowcode-plugin-sample-preview@0.8.15) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-sample-preview
+
 <a name="0.8.14"></a>
 ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-sample-preview@0.8.13...@ali/lowcode-plugin-sample-preview@0.8.14) (2020-05-13)
 

packages/plugin-sample-preview/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-sample-preview",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "description": "alibaba lowcode editor sample preview plugin",
   "files": [
     "es",
@@ -18,7 +18,7 @@
     "editor"
   ],
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
     "@ali/lowcode-editor-core": "^0.8.12",
     "@alifd/next": "^1.x",
     "react": "^16.8.1"

packages/plugin-source-editor/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.9"></a>
+## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.8...@ali/lowcode-plugin-source-editor@0.8.9) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-source-editor
+
 <a name="0.8.8"></a>
 ## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-source-editor@0.8.7...@ali/lowcode-plugin-source-editor@0.8.8) (2020-05-13)
 

packages/plugin-source-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-source-editor",
-  "version": "0.8.8",
+  "version": "0.8.9",
   "description": "alibaba lowcode editor source-editor plugin",
   "files": [
     "es",

packages/plugin-source-editor/src/index.scss

@@ -19,5 +19,16 @@
     height: 100%;
   }
 
+  .full-screen-container{
+    position: absolute;
+    top: 40px;
+    right: 20px;
+    cursor: pointer;
+    img{
+      width: 20px;
+      height: 20px;
+    }
+  }
+
 }
 

packages/plugin-source-editor/src/index.tsx

@@ -1,11 +1,8 @@
 import { Component, isValidElement, ReactElement, ReactNode } from 'react';
 import { Tab, Search, Input, Button } from '@alifd/next';
-import { Editor } from '@ali/lowcode-editor-core';
+import {Editor} from '@ali/lowcode-editor-core';
 import { js_beautify, css_beautify } from 'js-beautify';
 import MonacoEditor from 'react-monaco-editor';
-
-// import lolizer from './sorceEditorPlugin',
-
 import { Designer } from '@ali/lowcode-designer';
 const TAB_KEY = {
   JS_TAB: 'js_tab',
@@ -46,23 +43,33 @@ interface FunctionEventParam {
 
 export default class SourceEditor extends Component<{
   editor: Editor;
-  panel?: any
 }> {
-  private monocoEditer: any;
+  private monocoEditor: Object;
-  private editorCmd: any;
+  private editorCmd: Object;
+  private editorRef = React.createRef();
+  private editorNode: Object;
+  private editorParentNode: Object;
 
-  state: any = {
+  state = {
     isShow: false,
     tabKey: TAB_KEY.JS_TAB,
   };
 
-  async componentWillMount() {
+  componentWillMount() {
     const { editor } = this.props;
     editor.on('leftPanel.show', (key: String) => {
-      if (key === 'sourceEditor' && !this.monocoEditer) {
+      debugger;
+      if (key === 'sourceEditor' && !this.monocoEditor) {
         this.setState({
           isShow: true,
         });
+
+
+        setTimeout(()=>{
+          this.editorNode = this.editorRef.current; //记录当前dom节点；
+          this.editorParentNode = this.editorNode.parentNode; //记录父节点;
+          console.log(this.editorNode);
+        },0)
       }
     });
 
@@ -73,12 +80,12 @@ export default class SourceEditor extends Component<{
     });
 
     // 定位函数
-    editor.on('sourceEditor.focusByFunction',(params:FunctionEventParam)=>{
+    editor.on('sourceEditor.focusByFunction', (params: FunctionEventParam) => {
       this.callEditorEvent('sourceEditor.focusByFunction', params);
       this.openPluginPannel();
-    })
+    });
 
-    const designer = await editor.onceGot(Designer);
+    //editor.once('designer.mount', (designer: Designer) => {
       // let schema = designer.project.getSchema();
       // mock data
       let schema = {
@@ -113,17 +120,28 @@ export default class SourceEditor extends Component<{
       };
 
       this.initCode(schema);
+    //});
+  }
+
+  componentDidMount(){
+
+
   }
 
   openPluginPannel = () => {
-    const { panel } = this.props;
+    const { editor } = this.props;
-    if (panel) {
+    // 判断面板是否处于激活状态
-      panel.show();
+    if (!editor.leftNav || editor.leftNav != 'sourceEditor') {
-    }
+      // 打开面板
+      editor.emit('leftNav.change', 'sourceEditor');
     }
+  };
 
-  callEditorEvent = (eventName: any, params: any) => {
+  /**
-    if (!this.monocoEditer) {
+   * 执行编辑器事件
+   */
+  callEditorEvent = (eventName, params) => {
+    if (!this.monocoEditor) {
       this.editorCmd = {
         eventName,
         params,
@@ -131,16 +149,24 @@ export default class SourceEditor extends Component<{
       return;
     }
 
-    if (eventName === 'sourceEditor.addFunction') {
+    if (this.state.selectTab == TAB_KEY.CSS_TAB) {
-      this.addFunction(params);
+      this.setState({
-    }else if (eventName === 'sourceEditor.focusByFunction'){
+        selectTab: TAB_KEY.JS_TAB,
-      this.focusByFunctionName(params);
+      });
     }
 
-
+    if (eventName === 'sourceEditor.addFunction') {
+      setTimeout(() => {
+        this.addFunction(params);
+      }, 100);
+    } else if (eventName === 'sourceEditor.focusByFunction') {
+      setTimeout(() => {
+        this.focusByFunctionName(params);
+      }, 100);
+    }
   };
 
-  initCode = (schema: any) => {
+  initCode = (schema) => {
     let jsCode = js_beautify(transfrom.schema2Code(schema), { indent_size: 2, indent_empty_lines: true });
     let css;
 
@@ -160,19 +186,19 @@ export default class SourceEditor extends Component<{
    * @param params
    */
   addFunction(params: FunctionEventParam) {
-    const count = this.monocoEditer.getModel().getLineCount() || 0;
+    const count = this.monocoEditor.getModel().getLineCount() || 0;
-    const range = new (window as any).monaco.Range(count, 1, count, 1);
+    const range = new monaco.Range(count, 1, count, 1);
     const functionCode = transfrom.getNewFunctionCode(params.functionName);
-    this.monocoEditer.executeEdits('log-source', [
+    this.monocoEditor.executeEdits('log-source', [
       { identifier: 'event_id', range: range, text: functionCode, forceMoveMarkers: true },
     ]);
     setTimeout(() => {
-      let newPosition = new (window as any).monaco.Position(count + 1, 2);
+      let newPosition = new monaco.Position(count + 1, 2);
-      this.monocoEditer.setPosition(newPosition);
+      this.monocoEditor.setPosition(newPosition);
-      this.monocoEditer.focus();
+      this.monocoEditor.focus();
     }, 100);
 
-    this.updateCode(this.monocoEditer.getModel().getValue());
+    this.updateCode(this.monocoEditor.getModel().getValue());
   }
 
   /**
@@ -181,30 +207,24 @@ export default class SourceEditor extends Component<{
    */
   focusByFunctionName(params: FunctionEventParam) {
     const functionName = params.functionName;
-    const matchedResult = this.monocoEditer
+    const matchedResult = this.monocoEditor
       .getModel()
       .findMatches(`${functionName}\\s*\\([\\s\\S]*\\)[\\s\\S]*\\{`, false, true)[0];
     if (matchedResult) {
-
+      let monocoEditor = this.monocoEditor;
-      setTimeout(()=>{
+      setTimeout(() => {
-        this.monocoEditer.revealLineInCenter(matchedResult.range.startLineNumber);
+        monocoEditor.revealLineInCenter(matchedResult.range.startLineNumber);
-        this.monocoEditer.setPosition({
+        monocoEditor.setPosition({
           column: matchedResult.range.endColumn,
           lineNumber: matchedResult.range.endLineNumber,
         });
-
+        monocoEditor.focus();
-        this.monocoEditer.focus();
+      }, 100);
-      },100)
     }
   }
 
-  editorDidMount = (editor: any, monaco: any) => {
+  editorDidMount = (editor, monaco) => {
     console.log('editorDidMount', editor);
-    this.monocoEditer = editor;
-
-    if (this.editorCmd) {
-      this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params);
-    }
 
     // var commandId = editor.addCommand(
     //   0,
@@ -215,39 +235,22 @@ export default class SourceEditor extends Component<{
     //   '',
     // );
 
-    // monaco.languages.registerCodeLensProvider('javascript', {
+    if (this.state.selectTab == TAB_KEY.JS_TAB) {
-    //   provideCodeLenses: function(model, token) {
+      this.monocoEditor = editor;
-    //     return {
+    }
-    //       lenses: [
+
-    //         {
+    if (this.editorCmd) {
-    //           range: {
+      this.callEditorEvent(this.editorCmd.eventName, this.editorCmd.params);
-    //             startLineNumber: 1,
+    }
-    //             startColumn: 1,
-    //             endLineNumber: 1,
-    //             endColumn: 1,
-    //           },
-    //           id: 'First Line',
-    //           command: {
-    //             id: commandId,
-    //             title: 'First Line',
-    //           },
-    //         },
-    //       ],
-    //     };
-    //   },
-    //   resolveCodeLens: function(model, codeLens, token) {
-    //     return codeLens;
-    //   },
-    // });
   };
 
-  onTabChange = (key: any) => {
+  onTabChange = (key) => {
     this.setState({
       selectTab: key,
     });
   };
 
-  updateCode = (newCode: any) => {
+  updateCode = (newCode) => {
     const { selectTab } = this.state;
     if (selectTab === TAB_KEY.JS_TAB) {
       this.setState({
@@ -270,22 +273,28 @@ export default class SourceEditor extends Component<{
     ];
 
     return (
-      <div className="source-editor-container">
+      <div className="source-editor-container" >
-        <Tab size="small" shape="wrapped" onChange={this.onTabChange}>
+        <Tab size="small" shape="wrapped" onChange={this.onTabChange} activeKey={selectTab}>
           {tabs.map((item) => (
             <Tab.Item key={item.key} title={item.tab}>
               {isShow && (
+                <div style={{ height: '100%' }} ref={this.editorRef}>
                   <MonacoEditor
                     value={selectTab == TAB_KEY.JS_TAB ? jsCode : css}
-                  {...defaultEditorOption as any}
+                    {...defaultEditorOption}
-                  {...{ language: selectTab == TAB_KEY.JS_TAB ? 'javascript' : 'css' }}
+                    {...{ language: selectTab == TAB_KEY.JS_TAB ? 'typescript' : 'css' }}
                     onChange={(newCode) => this.updateCode(newCode)}
-                  editorDidMount={this.editorDidMount}
+                    editorDidMount={(editor, monaco) => this.editorDidMount.call(this, editor, monaco)}
                   />
+                </div>
               )}
             </Tab.Item>
           ))}
         </Tab>
+
+        <div className="full-screen-container" onClick={this.fullScreen}>
+          <img src="https://gw.alicdn.com/tfs/TB1d7XqE1T2gK0jSZFvXXXnFXXa-200-200.png"></img>
+        </div>
       </div>
     );
   }

packages/plugin-undo-redo/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.16"></a>
+## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.15...@ali/lowcode-plugin-undo-redo@0.8.16) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
+
+<a name="0.8.15"></a>
+## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.14...@ali/lowcode-plugin-undo-redo@0.8.15) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-plugin-undo-redo
+
 <a name="0.8.14"></a>
 ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-plugin-undo-redo@0.8.13...@ali/lowcode-plugin-undo-redo@0.8.14) (2020-05-13)
 

packages/plugin-undo-redo/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-plugin-undo-redo",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "description": "alibaba lowcode editor undo redo plugin",
   "files": [
     "es",
@@ -19,9 +19,9 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
     "@ali/lowcode-editor-core": "^0.8.12",
-    "@ali/lowcode-editor-skeleton": "^0.8.15",
+    "@ali/lowcode-editor-skeleton": "^0.8.17",
     "@ali/lowcode-types": "^0.8.3",
     "@ali/lowcode-utils": "^0.8.4",
     "react": "^16.8.1",

packages/react-renderer/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.8"></a>
+## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-renderer@0.8.7...@ali/lowcode-react-renderer@0.8.8) (2020-05-15)
+
+
+### Bug Fixes
+
+* handling the undefined variable ([0efe8b4](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/0efe8b4))
+
+
+
+
 <a name="0.8.7"></a>
 ## [0.8.7](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-renderer@0.8.6...@ali/lowcode-react-renderer@0.8.7) (2020-05-13)
 

packages/react-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ali/lowcode-react-renderer",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "description": "react renderer for ali lowcode engine",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/react-simulator-renderer/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.16"></a>
+## [0.8.16](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.15...@ali/lowcode-react-simulator-renderer@0.8.16) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer
+
+<a name="0.8.15"></a>
+## [0.8.15](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.14...@ali/lowcode-react-simulator-renderer@0.8.15) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-react-simulator-renderer
+
 <a name="0.8.14"></a>
 ## [0.8.14](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-react-simulator-renderer@0.8.13...@ali/lowcode-react-simulator-renderer@0.8.14) (2020-05-13)
 

packages/react-simulator-renderer/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@ali/lowcode-react-simulator-renderer",
-  "version": "0.8.14",
+  "version": "0.8.16",
   "description": "react simulator renderer for alibaba lowcode designer",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,8 +13,8 @@
     "test:snapshot": "ava --update-snapshots"
   },
   "dependencies": {
-    "@ali/lowcode-designer": "^0.9.9",
+    "@ali/lowcode-designer": "^0.9.11",
-    "@ali/lowcode-react-renderer": "^0.8.7",
+    "@ali/lowcode-react-renderer": "^0.8.8",
     "@ali/lowcode-types": "^0.8.3",
     "@ali/lowcode-utils": "^0.8.4",
     "@ali/vu-css-style": "^1.0.2",

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

@@ -47,6 +47,26 @@ export default class SimulatorRendererView extends Component<{ renderer: Simulat
   }
 }
 
+function ucfirst(s: string) {
+  return s.charAt(0).toUpperCase() + s.substring(1);
+}
+function getDeviceView(view: any, device: string, mode: string) {
+  if (!view || typeof view === 'string') {
+    return view;
+  }
+
+  // compatible vision Mobile | Preview
+  device = ucfirst(device);
+  if (device === 'Mobile' && view.hasOwnProperty(device)) {
+    view = view[device];
+  }
+  mode = ucfirst(mode);
+  if (mode === 'Preview' && view.hasOwnProperty(mode)) {
+    view = view[mode];
+  }
+  return view;
+}
+
 @observer
 class Layout extends Component<{ renderer: SimulatorRenderer }> {
   shouldComponentUpdate() {
@@ -72,13 +92,14 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
   }
   render() {
     const { renderer } = this.props;
+    const { device, designMode } = renderer;
     return (
       <LowCodeRenderer
         schema={renderer.schema}
         components={renderer.components}
         appHelper={renderer.context}
         // context={renderer.context}
-        designMode={renderer.designMode}
+        designMode={designMode}
         suspended={renderer.suspended}
         self={renderer.scope}
         customCreateElement={(Component: any, props: any, children: any) => {
@@ -87,7 +108,7 @@ class Renderer extends Component<{ renderer: SimulatorRenderer }> {
           viewProps._leaf = host.document.getNode(__id);
 
           return createElement(
-            Component,
+            getDeviceView(Component, device, designMode),
             viewProps,
             children == null ? [] : Array.isArray(children) ? children : [children],
           );

packages/react-simulator-renderer/src/renderer.ts

@@ -35,12 +35,14 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
       }
 
       // sync designMode
+      this._designMode = host.designMode;
 
       // sync suspended
 
       // sync scope
 
       // sync device
+      this._device = host.device;
     });
     host.componentsConsumer.consume(async (componentsAsset) => {
       if (componentsAsset) {
@@ -83,9 +85,13 @@ export class SimulatorRenderer implements BuiltinSimulatorRenderer {
   @computed get context(): any {
     return this._appContext;
   }
-
+  @obx.ref private _designMode: string = 'design';
   @computed get designMode(): any {
-    return 'preview';
+    return this._designMode;
+  }
+  @obx.ref private _device: string = 'default';
+  @computed get device() {
+    return this._device;
   }
   @obx.ref private _componentsMap = {};
   @computed get componentsMap(): any {

packages/types/src/metadata.ts

@@ -45,6 +45,10 @@ export interface InitialItem {
   name: string;
   initial: (target: SettingTarget, currentValue: any) => any;
 }
+export interface FilterItem {
+  name: string;
+  filter: (target: SettingTarget, currentValue: any) => any;
+}
 
 export interface Experimental {
   context?: { [contextInfoName: string]: any };
@@ -52,6 +56,7 @@ export interface Experimental {
   view?: ComponentType<any>;
   transducers?: any; // ? should support
   initials?: InitialItem[];
+  filters?: FilterItem[];
   callbacks?: Callbacks;
   // TODO: thinkof function
   initialChildren?: NodeData[] | ((target: SettingTarget) => NodeData[]);

packages/vision-preset/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<a name="0.8.10"></a>
+## [0.8.10](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.9...@ali/lowcode-vision-preset@0.8.10) (2020-05-15)
+
+
+
+
+**Note:** Version bump only for package @ali/lowcode-vision-preset
+
+<a name="0.8.9"></a>
+## [0.8.9](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.8...@ali/lowcode-vision-preset@0.8.9) (2020-05-15)
+
+
+### Bug Fixes
+
+* add pages.toData method ([95d3cb3](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/95d3cb3))
+* lc-borders-actions ([56d9f5f](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/commit/56d9f5f))
+
+
+
+
 <a name="0.8.8"></a>
 ## [0.8.8](https://gitlab.alibaba-inc.com/ali-lowcode/ali-lowcode-engine/compare/@ali/lowcode-vision-preset@0.8.7...@ali/lowcode-vision-preset@0.8.8) (2020-05-13)
 

packages/vision-preset/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ali/lowcode-vision-preset",
   "private": true,
-  "version": "0.8.8",
+  "version": "0.8.10",
   "description": "Vision Polyfill for Ali lowCode engine",
   "main": "lib/index.js",
   "files": [
@@ -15,9 +15,9 @@
   "license": "MIT",
   "dependencies": {
     "@ali/lowcode-editor-core": "^0.8.12",
-    "@ali/lowcode-editor-skeleton": "^0.8.15",
+    "@ali/lowcode-editor-skeleton": "^0.8.17",
-    "@ali/lowcode-plugin-designer": "^0.9.9",
+    "@ali/lowcode-plugin-designer": "^0.9.11",
-    "@ali/lowcode-plugin-outline-pane": "^0.8.15",
+    "@ali/lowcode-plugin-outline-pane": "^0.8.17",
     "@ali/ve-i18n-util": "^2.0.2",
     "@ali/ve-icons": "^4.1.9",
     "@ali/ve-less-variables": "2.0.3",

packages/vision-preset/src/bundle/prototype.ts

@@ -1,5 +1,5 @@
 import { ComponentType, ReactElement } from 'react';
-import { ComponentMetadata, FieldConfig, InitialItem } from '@ali/lowcode-types';
+import { ComponentMetadata, FieldConfig, InitialItem, FilterItem } from '@ali/lowcode-types';
 import {
   ComponentMeta,
   addBuiltinComponentAction,
@@ -18,22 +18,35 @@ import {
 import { designer } from '../editor';
 import { uniqueId } from '@ali/lowcode-utils';
 
-const GlobalPropsConfigure: Array<{ position: string; initials?: InitialItem[]; config: FieldConfig }> = [];
+const GlobalPropsConfigure: Array<{
+  position: string;
+  initials?: InitialItem[];
+  filters?: FilterItem[];
+  config: FieldConfig
+}> = [];
 const Overrides: {
   [componentName: string]: {
     initials?: InitialItem[];
+    filters?: FilterItem[];
     override: any;
   };
 } = {};
 
 function addGlobalPropsConfigure(config: OldGlobalPropConfig) {
   const initials: InitialItem[] = [];
+  const filters: FilterItem[] = [];
   GlobalPropsConfigure.push({
     position: config.position || 'bottom',
     initials,
-    config: upgradePropConfig(config, (item) => {
+    filters,
+    config: upgradePropConfig(config, {
+      addInitial: (item) => {
         initials.push(item);
-    }),
+      },
+      addFilter: (item) => {
+        filters.push(item);
+      },
+    })
   });
 }
 function removeGlobalPropsConfigure(name: string) {
@@ -46,20 +59,25 @@ function removeGlobalPropsConfigure(name: string) {
 }
 function overridePropsConfigure(componentName: string, config: { [name: string]: OldPropConfig } | OldPropConfig[]) {
   const initials: InitialItem[] = [];
+  const filters: FilterItem[] = [];
   const addInitial = (item: InitialItem) => {
     initials.push(item);
   };
+  const addFilter = (item: FilterItem) => {
+    filters.push(item);
+  };
   let override: any;
   if (Array.isArray(config)) {
-    override = upgradeConfigure(config, addInitial);
+    override = upgradeConfigure(config, { addInitial, addFilter });
   } else {
     override = {};
     Object.keys(config).forEach(key => {
-      override[key] = upgradePropConfig(config[key], addInitial);
+      override[key] = upgradePropConfig(config[key], { addInitial, addFilter });
     });
   }
   Overrides[componentName] = {
     initials,
+    filters,
     override,
   };
 }

packages/vision-preset/src/bundle/upgrade-metadata.ts

@@ -1,6 +1,6 @@
 import { ComponentType, ReactElement, isValidElement, ComponentClass } from 'react';
 import { isPlainObject } from '@ali/lowcode-utils';
-import { isI18nData, SettingTarget, InitialItem, isJSSlot, isJSExpression } from '@ali/lowcode-types';
+import { isI18nData, SettingTarget, InitialItem, FilterItem, isJSSlot, isJSExpression } from '@ali/lowcode-types';
 
 type Field = SettingTarget;
 
@@ -178,7 +178,7 @@ type SetterGetter = (this: Field, value: any) => ComponentClass;
 
 type ReturnBooleanFunction = (this: Field, value: any) => boolean;
 
-export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial) {
+export function upgradePropConfig(config: OldPropConfig, collector: ConfigCollector) {
   const {
     type,
     name,
@@ -261,22 +261,9 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial)
   } else if (hidden != null || disabled != null) {
     extraProps.condition = (field: Field) => !(isHidden(field) || isDisabled(field));
   }
-  if (ignore != null || disabled != null) {
-    // FIXME! addFilter
-    extraProps.virtual = (field: Field) => {
-      if (isDisabled(field)) {
-        return true;
-      }
-
-      if (typeof ignore === 'function') {
-        return ignore.call(field, field.getValue()) === true;
-      }
-      return ignore === true;
-    };
-  }
 
   if (type === 'group') {
-    newConfig.items = items ? upgradeConfigure(items, addInitial) : [];
+    newConfig.items = items ? upgradeConfigure(items, collector) : [];
     return newConfig;
   }
 
@@ -314,7 +301,7 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial)
 
   const setterInitial = getInitialFromSetter(setter);
 
-  addInitial({
+  collector.addInitial({
     name: slotName || name,
     initial: (field: Field, currentValue: any) => {
       // FIXME! read from prototype.defaultProps
@@ -334,6 +321,28 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial)
     },
   });
 
+  if (ignore != null || disabled != null) {
+    collector.addFilter({
+      name: slotName || name,
+      filter: (field: Field, currentValue: any) => {
+        let disabledValue: boolean;
+        if (typeof disabled === 'function') {
+          disabledValue = disabled.call(field, currentValue) === true;
+        }
+        else {
+          disabledValue = disabled === true;
+        }
+        if (disabledValue) {
+          return false;
+        }
+        if (typeof ignore === 'function') {
+          return ignore.call(field, currentValue) !== true;
+        }
+        return ignore !== true;
+      }
+    });
+  }
+
   if (sync) {
     extraProps.autorun = (field: Field) => {
       const value = sync.call(field, field.getValue());
@@ -385,10 +394,18 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial)
   let primarySetter: any;
   if (type === 'composite') {
     const initials: InitialItem[] = [];
+    const filters: FilterItem[] = [];
     const objItems = items
-      ? upgradeConfigure(items, (item) => {
+      ? upgradeConfigure(items, 
+        {
+          addInitial: (item) => {
             initials.push(item);
-        })
+          },
+          addFilter: (item) => {
+            filters.push(item);
+          }
+        }
+      )
       : [];
     const initial = (target: SettingTarget, value?: any) => {
       // TODO:
@@ -400,7 +417,7 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial)
       });
       return data;
     };
-    addInitial({
+    collector.addInitial({
       name,
       initial,
     });
@@ -460,7 +477,13 @@ export function upgradePropConfig(config: OldPropConfig, addInitial: AddIntial)
   return newConfig;
 }
 
-type AddIntial = (initialItem: InitialItem) => void;
+type AddInitial = (initialItem: InitialItem) => void;
+type AddFilter = (filterItem: FilterItem) => void;
+
+type ConfigCollector = {
+  addInitial: AddInitial,
+  addFilter: AddFilter,
+}
 
 function getInitialFromSetter(setter: any) {
   return setter && (
@@ -474,7 +497,7 @@ function defaultInitial(value: any, defaultValue: any) {
 }
 
 
-export function upgradeConfigure(items: OldPropConfig[], addInitial: AddIntial) {
+export function upgradeConfigure(items: OldPropConfig[], collector: ConfigCollector) {
   const configure: any[] = [];
   let ignoreSlotName: any = null;
   items.forEach((config) => {
@@ -487,7 +510,7 @@ export function upgradeConfigure(items: OldPropConfig[], addInitial: AddIntial)
       }
       ignoreSlotName = null;
     }
-    configure.push(upgradePropConfig(config, addInitial));
+    configure.push(upgradePropConfig(config, collector));
   });
   return configure;
 }
@@ -724,10 +747,19 @@ export function upgradeMetadata(oldConfig: OldPrototypeConfig) {
   experimental.callbacks = callbacks;
 
   const initials: InitialItem[] = [];
-  const props = upgradeConfigure(configure || [], (item) => {
+  const filters: FilterItem[] = [];
+  const props = upgradeConfigure(configure || [],
+    {
+      addInitial: (item) => {
         initials.push(item);
-  });
+      },
+      addFilter: (item) => {
+        filters.push(item);
+      },
+    }
+  );
   experimental.initials = initials;
+  experimental.filters = filters;
 
   const supports: any = {};
   if (canUseCondition != null) {

packages/vision-preset/src/editor.ts

@@ -1,7 +1,7 @@
 import { isJSBlock, isJSExpression, isJSSlot } from '@ali/lowcode-types';
 import { isPlainObject } from '@ali/lowcode-utils';
 import { globalContext, Editor } from '@ali/lowcode-editor-core';
-import { Designer, LiveEditing, TransformStage, addBuiltinComponentAction } from '@ali/lowcode-designer';
+import { Designer, LiveEditing, TransformStage, addBuiltinComponentAction, Node } from '@ali/lowcode-designer';
 import Outline, { OutlineBackupPane, getTreeMaster } from '@ali/lowcode-plugin-outline-pane';
 import { toCss } from '@ali/vu-css-style';
 
@@ -44,6 +44,23 @@ designer.addPropsReducer((props, node) => {
 // 国际化渲染时处理
 designer.addPropsReducer(i18nReducer, TransformStage.Render);
 
+function filterReducer(props: any, node: Node): any {
+  const filters = node.componentMeta.getMetadata().experimental?.filters;
+  if (filters && filters.length) {
+    const newProps = { ...props };
+    filters.forEach((item) => {
+      const v = item.filter(node as any, props[item.name]);
+      if (!v) {
+        delete newProps[item.name];
+      }
+    });
+    return newProps;
+  }
+  return props;
+}
+designer.addPropsReducer(filterReducer, TransformStage.Save);
+designer.addPropsReducer(filterReducer, TransformStage.Render);
+
 function upgradePropsReducer(props: any) {
   if (!isPlainObject(props)) {
     return props;
@@ -180,9 +197,9 @@ skeleton.add({
 LiveEditing.addLiveEditingSpecificRule(liveEditingRule);
 
 // 实例节点选择器，线框高亮
-addBuiltinComponentAction({
+// addBuiltinComponentAction({
-  name: 'instance-node-selector',
+//   name: 'instance-node-selector',
-  content: InstanceNodeSelector,
+//   content: InstanceNodeSelector,
-  important: true,
+//   important: true,
-  condition: 'always',
+//   condition: 'always'
-});
+// });

packages/vision-preset/src/viewport.ts

@@ -2,6 +2,7 @@ import { EventEmitter } from 'events';
 
 const domReady = require('domready');
 import Flags from './flags';
+import { designer } from './editor';
 
 function enterFullscreen() {
   const elem = document.documentElement;
@@ -185,8 +186,9 @@ export class Viewport {
   setDevice(device = 'pc') {
     if (this.getDevice() !== device) {
       this.device = device;
-      Flags.setSimulator(device);
+      designer.currentDocument?.simulator?.set('device', device === 'mobile' ? 'mobile' : 'default');
-      this.applyMediaCSS();
+      // Flags.setSimulator(device);
+      // this.applyMediaCSS();
       this.emitter.emit('devicechange', device);
       this.changeViewport();
     }
@@ -229,7 +231,7 @@ export class Viewport {
   }
 
   setWithShell(shell: string) {
-    Flags.setWithShell(shell);
+    // Flags.setWithShell(shell);
   }
 
   onFullscreenChange(func: () => any) {