chore(release): publish 1.1.0-beta.1

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "4.0.0",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "packages": [

modules/material-parser/test/fixtures/ts-component2/package.json

@@ -34,7 +34,7 @@
     "@alife/build-plugin-lowcode": "^1.0.7",
     "@alib/build-scripts": "^0.1.3",
     "@alifd/adaptor-generate": "^0.1.3",
-    "build-plugin-component": "^0.2.0",
+    "build-plugin-component": "^1.0.0",
     "build-plugin-fusion": "^0.1.0",
     "build-plugin-fusion-cool": "^0.1.0",
     "build-plugin-moment-locales": "^0.1.0",

packages/designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-designer",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Designer for Ali LowCode Engine",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -15,9 +15,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@alilc/lowcode-editor-core": "1.0.17",
+    "@alilc/lowcode-editor-core": "1.1.0-beta.1",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "react": "^16",
     "react-dom": "^16.7.0",
@@ -27,10 +27,12 @@
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.29",
-    "@alilc/lowcode-shell": "1.0.17",
+    "@alilc/lowcode-shell": "1.1.0-beta.1",
     "@alilc/lowcode-test-mate": "^1.0.1",
     "@testing-library/react": "^11.2.2",
     "@types/classnames": "^2.2.7",
+    "@types/enzyme": "^3.10.12",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/jest": "^26.0.16",
     "@types/lodash": "^4.14.165",
     "@types/medium-editor": "^5.0.3",
@@ -42,9 +44,7 @@
     "build-plugin-component": "^1.0.0",
     "build-scripts-config": "^3.0.3",
     "enzyme": "^3.11.0",
-    "@types/enzyme": "^3.10.12",
     "enzyme-adapter-react-16": "^1.15.5",
-    "@types/enzyme-adapter-react-16": "^1.0.6",
     "jest": "^26.6.3",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",

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

@@ -172,7 +172,8 @@ export class BoxResizingInstance extends Component<{
         metadata.configure.advanced.callbacks.onResizeEnd(e, cbNode);
       }
 
-      const editor = globalContext.get(Editor);
+      const workSpace = globalContext.get('workSpace');
+      const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
       const npm = node?.componentMeta?.npm;
       const selected =
         [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||

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

@@ -131,7 +131,8 @@ function createAction(content: ReactNode | ComponentType<any> | ActionContentObj
         className="lc-borders-action"
         onClick={() => {
           action && action(node);
-          const editor = globalContext.get('editor');
+          const workSpace = globalContext.get('workSpace');
+          const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
           const npm = node?.componentMeta?.npm;
           const selected =
             [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||

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

@@ -22,6 +22,7 @@ export function createSimulator(
   const doc = iframe.contentDocument!;
 
   win.LCSimulatorHost = host;
+  win._ = window._;
 
   const styles: any = {};
   const scripts: any = {};

packages/designer/src/builtin-simulator/host-view.tsx

@@ -23,8 +23,8 @@ export class BuiltinSimulatorHostView extends Component<SimulatorHostProps> {
 
   constructor(props: any) {
     super(props);
-    const { project, onMount } = this.props;
+    const { project, onMount, designer } = this.props;
-    this.host = (project.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(project);
+    this.host = (project.simulator as BuiltinSimulatorHost) || new BuiltinSimulatorHost(project, designer);
     this.host.setProps(this.props);
     onMount?.(this.host);
   }
@@ -76,7 +76,8 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
   private dispose?: () => void;
 
   componentDidMount() {
-    const editor = globalContext.get('editor');
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const onEnableEvents = (type: boolean) => {
       this.setState({
         disabledEvents: type,
@@ -97,7 +98,7 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
   render() {
     const sim = this.props.host;
     const { disabledEvents } = this.state;
-    const { viewport } = sim;
+    const { viewport, designer } = sim;
     const frameStyle: any = {
       transform: `scale(${viewport.scale})`,
       height: viewport.contentHeight,
@@ -107,10 +108,12 @@ class Content extends Component<{ host: BuiltinSimulatorHost }> {
       frameStyle.pointerEvents = 'none';
     }
 
+    const name = designer.name;
+
     return (
       <div className="lc-simulator-content">
         <iframe
-          name="SimulatorRenderer"
+          name={`${name}-SimulatorRenderer`}
           className="lc-simulator-content-frame"
           style={frameStyle}
           ref={(frame) => sim.mountContentFrame(frame)}

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

@@ -64,7 +64,7 @@ import {
   DragNodeObject,
 } from '@alilc/lowcode-types';
 import { BuiltinSimulatorRenderer } from './renderer';
-import clipboard from '../designer/clipboard';
+import { clipboard } from '../designer/clipboard';
 import { LiveEditing } from './live-editing/live-editing';
 import { Project } from '../project';
 import { Scroller } from '../designer/scroller';
@@ -192,10 +192,10 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this.renderer?.enableAutoRepaintNode();
   }
 
-  constructor(project: Project) {
+  constructor(project: Project, designer: Designer) {
     makeObservable(this);
     this.project = project;
-    this.designer = project?.designer;
+    this.designer = designer;
     this.scroller = this.designer.createScroller(this.viewport);
     this.autoRender = !engineConfig.get('disableAutoRender', false);
     this.componentsConsumer = new ResourceConsumer<Asset | undefined>(() => this.componentsAsset);
@@ -418,7 +418,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this.renderer?.rerender?.();
   }
 
-  async mountContentFrame(iframe: HTMLIFrameElement | null) {
+  async mountContentFrame(iframe: HTMLIFrameElement | null): Promise<void> {
     if (!iframe || this._iframe === iframe) {
       return;
     }
@@ -478,6 +478,7 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     this.setupEvents();
 
     // bind hotkey & clipboard
+    const hotkey = this.designer.editor.get('innerHotkey');
     hotkey.mount(this._contentWindow);
     focusTracker.mount(this._contentWindow);
     clipboard.injectCopyPaster(this._contentDocument);

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

@@ -52,7 +52,8 @@ export class LiveEditing {
     const targetElement = event.target as HTMLElement;
     const { liveTextEditing } = node.componentMeta;
 
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const npm = node?.componentMeta?.npm;
     const selected =
       [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || node?.componentMeta?.componentName || '';

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

@@ -62,7 +62,8 @@ export default class InstanceNodeSelector extends React.Component<IProps, IState
 
     if (canClick && typeof node.select === 'function') {
       node.select();
-      const editor = globalContext.get(Editor);
+      const workSpace = globalContext.get('workSpace');
+      const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
       const npm = node?.componentMeta?.npm;
       const selected =
         [npm?.package, npm?.componentName].filter((item) => !!item).join('-') ||

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

@@ -1,354 +0,0 @@
-import { hotkey, Editor, globalContext } from '@alilc/lowcode-editor-core';
-import { isFormEvent } from '@alilc/lowcode-utils';
-import { focusing } from './focusing';
-import { insertChildren, TransformStage } from '../document';
-import clipboard from './clipboard';
-
-export function isInLiveEditing() {
-  if (globalContext.has(Editor)) {
-    return Boolean(
-      globalContext.get(Editor).get('designer')?.project?.simulator?.liveEditing?.editing,
-    );
-  }
-}
-
-/* istanbul ignore next */
-function getNextForSelect(next: any, head?: any, parent?: any): any {
-  if (next) {
-    if (!head) {
-      return next;
-    }
-
-    let ret;
-    if (next.isContainer()) {
-      const children = next.getChildren() || [];
-      if (children && !children.isEmpty()) {
-        ret = getNextForSelect(children.get(0));
-        if (ret) {
-          return ret;
-        }
-      }
-    }
-
-    ret = getNextForSelect(next.nextSibling);
-    if (ret) {
-      return ret;
-    }
-  }
-
-  if (parent) {
-    return getNextForSelect(parent.nextSibling, false, parent.getParent());
-  }
-
-  return null;
-}
-
-/* istanbul ignore next */
-function getPrevForSelect(prev: any, head?: any, parent?: any): any {
-  if (prev) {
-    let ret;
-    if (!head && prev.isContainer()) {
-      const children = prev.getChildren() || [];
-      const lastChild = children && !children.isEmpty() ? children.get(children.size - 1) : null;
-
-      ret = getPrevForSelect(lastChild);
-      if (ret) {
-        return ret;
-      }
-    }
-
-    if (!head) {
-      return prev;
-    }
-
-    ret = getPrevForSelect(prev.prevSibling);
-    if (ret) {
-      return ret;
-    }
-  }
-
-  if (parent) {
-    return parent;
-  }
-
-  return null;
-}
-
-// hotkey binding
-hotkey.bind(['backspace', 'del'], (e: KeyboardEvent) => {
-  if (isInLiveEditing()) return;
-  // TODO: use focus-tracker
-  const doc = focusing.focusDesigner?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-
-  const sel = doc.selection;
-  const topItems = sel.getTopNodes();
-  // TODO: check can remove
-  topItems.forEach((node) => {
-    if (node.canPerformAction('remove')) {
-      doc.removeNode(node);
-    }
-  });
-  sel.clear();
-});
-
-hotkey.bind('escape', (e: KeyboardEvent) => {
-  // const currentFocus = focusing.current;
-  if (isInLiveEditing()) return;
-  const sel = focusing.focusDesigner?.currentDocument?.selection;
-  if (isFormEvent(e) || !sel) {
-    return;
-  }
-  e.preventDefault();
-
-  sel.clear();
-  // currentFocus.esc();
-});
-
-// command + c copy  command + x cut
-hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
-  if (isInLiveEditing()) return;
-  const doc = focusing.focusDesigner?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-
-  let selected = doc.selection.getTopNodes(true);
-  selected = selected.filter((node) => {
-    return node.canPerformAction('copy');
-  });
-  if (!selected || selected.length < 1) {
-    return;
-  }
-
-  const componentsMap = {};
-  const componentsTree = selected.map((item) => item.export(TransformStage.Clone));
-
-  // FIXME: clear node.id
-
-  const data = { type: 'nodeSchema', componentsMap, componentsTree };
-
-  clipboard.setData(data);
-
-  const cutMode = action && action.indexOf('x') > 0;
-  if (cutMode) {
-    selected.forEach((node) => {
-      const parentNode = node.getParent();
-      parentNode?.select();
-      node.remove();
-    });
-  }
-});
-
-// command + v paste
-hotkey.bind(['command+v', 'ctrl+v'], (e) => {
-  if (isInLiveEditing()) return;
-  const designer = focusing.focusDesigner;
-  const doc = designer?.currentDocument;
-  if (isFormEvent(e) || !designer || !doc) {
-    return;
-  }
-  /* istanbul ignore next */
-  clipboard.waitPasteData(e, ({ componentsTree }) => {
-    if (componentsTree) {
-      const { target, index } = designer.getSuitableInsertion(componentsTree) || {};
-      if (!target) {
-        return;
-      }
-      let canAddComponentsTree = componentsTree.filter((i) => {
-        return doc.checkNestingUp(target, i);
-      });
-      if (canAddComponentsTree.length === 0) return;
-      const nodes = insertChildren(target, canAddComponentsTree, index);
-      if (nodes) {
-        doc.selection.selectAll(nodes.map((o) => o.id));
-        setTimeout(() => designer.activeTracker.track(nodes[0]), 10);
-      }
-    }
-  });
-});
-
-// command + z undo
-hotkey.bind(['command+z', 'ctrl+z'], (e) => {
-  if (isInLiveEditing()) return;
-  const his = focusing.focusDesigner?.currentHistory;
-  if (isFormEvent(e) || !his) {
-    return;
-  }
-
-  e.preventDefault();
-  const selection = focusing.focusDesigner?.currentSelection;
-  const curSelected = Array.from(selection?.selected);
-  his.back();
-  selection?.selectAll(curSelected);
-});
-
-// command + shift + z redo
-hotkey.bind(['command+y', 'ctrl+y', 'command+shift+z'], (e) => {
-  if (isInLiveEditing()) return;
-  const his = focusing.focusDesigner?.currentHistory;
-  if (isFormEvent(e) || !his) {
-    return;
-  }
-  e.preventDefault();
-  const selection = focusing.focusDesigner?.currentSelection;
-  const curSelected = Array.from(selection?.selected);
-  his.forward();
-  selection?.selectAll(curSelected);
-});
-
-// sibling selection
-hotkey.bind(['left', 'right'], (e, action) => {
-  if (isInLiveEditing()) return;
-  const designer = focusing.focusDesigner;
-  const doc = designer?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-  const selected = doc.selection.getTopNodes(true);
-  if (!selected || selected.length < 1) {
-    return;
-  }
-  const firstNode = selected[0];
-  const silbing = action === 'left' ? firstNode?.prevSibling : firstNode?.nextSibling;
-  silbing?.select();
-});
-
-hotkey.bind(['up', 'down'], (e, action) => {
-  if (isInLiveEditing()) return;
-  const designer = focusing.focusDesigner;
-  const doc = designer?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-  const selected = doc.selection.getTopNodes(true);
-  if (!selected || selected.length < 1) {
-    return;
-  }
-  const firstNode = selected[0];
-
-  if (action === 'down') {
-    const next = getNextForSelect(firstNode, true, firstNode.getParent());
-    next?.select();
-  } else if (action === 'up') {
-    const prev = getPrevForSelect(firstNode, true, firstNode.getParent());
-    prev?.select();
-  }
-});
-
-hotkey.bind(['option+left', 'option+right'], (e, action) => {
-  if (isInLiveEditing()) return;
-  const designer = focusing.focusDesigner;
-  const doc = designer?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-  const selected = doc.selection.getTopNodes(true);
-  if (!selected || selected.length < 1) {
-    return;
-  }
-  // TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
-  // TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
-
-  const firstNode = selected[0];
-  const parent = firstNode.getParent();
-  if (!parent) return;
-
-  const isPrev = action && /(left)$/.test(action);
-
-  const silbing = isPrev ? firstNode.prevSibling : firstNode.nextSibling;
-  if (silbing) {
-    if (isPrev) {
-      parent.insertBefore(firstNode, silbing);
-    } else {
-      parent.insertAfter(firstNode, silbing);
-    }
-    firstNode?.select();
-  }
-});
-
-hotkey.bind(['option+up'], (e) => {
-  if (isInLiveEditing()) return;
-  const designer = focusing.focusDesigner;
-  const doc = designer?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-  const selected = doc.selection.getTopNodes(true);
-  if (!selected || selected.length < 1) {
-    return;
-  }
-  // TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
-  // TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
-
-  const firstNode = selected[0];
-  const parent = firstNode.getParent();
-  if (!parent) {
-    return;
-  }
-
-  const silbing = firstNode.prevSibling;
-  if (silbing) {
-    if (silbing.isContainer()) {
-      const place = silbing.getSuitablePlace(firstNode, null);
-      place.container.insertAfter(firstNode, place.ref);
-    } else {
-      parent.insertBefore(firstNode, silbing);
-    }
-    firstNode?.select();
-  } else {
-    const place = parent.getSuitablePlace(firstNode, null); // upwards
-    if (place) {
-      place.container.insertBefore(firstNode, place.ref);
-      firstNode?.select();
-    }
-  }
-});
-
-hotkey.bind(['option+down'], (e) => {
-  if (isInLiveEditing()) return;
-  const designer = focusing.focusDesigner;
-  const doc = designer?.currentDocument;
-  if (isFormEvent(e) || !doc) {
-    return;
-  }
-  e.preventDefault();
-  const selected = doc.selection.getTopNodes(true);
-  if (!selected || selected.length < 1) {
-    return;
-  }
-  // TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
-  // TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
-
-  const firstNode = selected[0];
-  const parent = firstNode.getParent();
-  if (!parent) {
-    return;
-  }
-
-  const silbing = firstNode.nextSibling;
-  if (silbing) {
-    if (silbing.isContainer()) {
-      // const place = silbing.getSuitablePlace(firstNode, null);
-      silbing.insertBefore(firstNode, undefined);
-      // place.container.insertBefore(firstNode, place.ref);
-    } else {
-      parent.insertAfter(firstNode, silbing);
-    }
-    firstNode?.select();
-  } else {
-    const place = parent.getSuitablePlace(firstNode, null); // upwards
-    if (place) {
-      place.container.insertAfter(firstNode, place.ref);
-      firstNode?.select();
-    }
-  }
-});

packages/designer/src/designer/clipboard.ts

@@ -109,4 +109,4 @@ class Clipboard {
   }
 }
 
-export default new Clipboard();
+export const clipboard = new Clipboard();

packages/designer/src/designer/designer-view.tsx

@@ -4,16 +4,18 @@ import BuiltinDragGhostComponent from './drag-ghost';
 import { Designer, DesignerProps } from './designer';
 import { ProjectView } from '../project';
 import './designer.less';
-import clipboard from './clipboard';
+import { clipboard } from './clipboard';
 
 export class DesignerView extends Component<DesignerProps & {
   designer?: Designer;
 }> {
   readonly designer: Designer;
+  readonly name: string;
 
   constructor(props: any) {
     super(props);
     const { designer, ...designerProps } = props;
+    this.name = designer.name;
     if (designer) {
       this.designer = designer;
       designer.setProps(designerProps);

packages/designer/src/designer/designer.ts

@@ -74,14 +74,17 @@ export class Designer {
     return this.currentDocument?.selection;
   }
 
+  name: string;
+
   constructor(props: DesignerProps) {
     makeObservable(this);
-    const { editor, shellModelFactory } = props;
+    const { editor, name, shellModelFactory } = props;
     this.editor = editor;
+    this.name = name;
     this.shellModelFactory = shellModelFactory;
     this.setProps(props);
 
-    this.project = new Project(this, props.defaultSchema);
+    this.project = new Project(this, props.defaultSchema, name);
 
     this.dragon.onDragstart((e) => {
       this.detecting.enable = false;
@@ -364,12 +367,12 @@ export class Designer {
     const { components, packages } = incrementalAssets;
     components && this.buildComponentMetasMap(components);
     if (packages) {
-      await this.project.simulator!.setupComponents(packages);
+      await this.project.simulator?.setupComponents(packages);
     }
 
     if (components) {
-      // 合并assets
+      // 合并 assets
-      let assets = this.editor.get('assets');
+      let assets = this.editor.get('assets') || {};
       let newAssets = megreAssets(assets, incrementalAssets);
       // 对于 assets 存在需要二次网络下载的过程，必须 await 等待结束之后，再进行事件触发
       await this.editor.set('assets', newAssets);
@@ -403,6 +406,21 @@ export class Designer {
     return this._simulatorProps || {};
   }
 
+  /**
+   * 提供给模拟器的参数
+   */
+  @computed get projectSimulatorProps(): any {
+    return {
+      ...this.simulatorProps,
+      project: this.project,
+      designer: this,
+      onMount: (simulator: any) => {
+        this.project.mountSimulator(simulator);
+        this.editor.set('simulator', simulator);
+      },
+    };
+  }
+
   @obx.ref private _suspensed = false;
 
   get suspensed(): boolean {

packages/designer/src/designer/dragon.ts

@@ -145,6 +145,8 @@ function isDragEvent(e: any): e is DragEvent {
 export class Dragon {
   private sensors: ISensor[] = [];
 
+  key = Math.random();
+
   /**
    * current active sensor, 可用于感应区高亮
    */
@@ -162,10 +164,13 @@ export class Dragon {
     return this._dragging;
   }
 
+  name: string;
+
   private emitter = new EventEmitter();
 
   constructor(readonly designer: Designer) {
     makeObservable(this);
+    this.name = designer.name;
   }
 
   /**

packages/designer/src/designer/index.ts

@@ -1,5 +1,3 @@
-import './builtin-hotkey';
-
 export * from './designer';
 export * from './designer-view';
 export * from './dragon';
@@ -9,3 +7,6 @@ export * from './offset-observer';
 export * from './scroller';
 export * from './setting';
 export * from './active-tracker';
+export * from './focusing';
+export * from '../document';
+export * from './clipboard';

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

@@ -1,4 +1,4 @@
-import { obx, computed, makeObservable, runInAction } from '@alilc/lowcode-editor-core';
+import { obx, computed, makeObservable, runInAction, Setters } from '@alilc/lowcode-editor-core';
 import { GlobalEvent, IEditor, ISetValueOptions } from '@alilc/lowcode-types';
 import { uniqueId, isJSExpression } from '@alilc/lowcode-utils';
 import { SettingEntry } from './setting-entry';
@@ -18,6 +18,8 @@ export class SettingPropEntry implements SettingEntry {
 
   readonly isSingle: boolean;
 
+  readonly setters: Setters;
+
   readonly nodes: Node[];
 
   readonly componentMeta: ComponentMeta | null;
@@ -70,6 +72,7 @@ export class SettingPropEntry implements SettingEntry {
     // copy parent static properties
     this.editor = parent.editor;
     this.nodes = parent.nodes;
+    this.setters = parent.setters;
     this.componentMeta = parent.componentMeta;
     this.isSameComponent = parent.isSameComponent;
     this.isMultiple = parent.isMultiple;

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

@@ -72,6 +72,8 @@ export class SettingTopEntry implements SettingEntry {
 
   readonly designer: Designer;
 
+  readonly setters: any;
+
   disposeFunctions: any[] = [];
 
   constructor(readonly editor: IEditor, readonly nodes: Node[]) {
@@ -81,6 +83,7 @@ export class SettingTopEntry implements SettingEntry {
     this.id = generateSessionId(nodes);
     this.first = nodes[0];
     this.designer = this.first.document.designer;
+    this.setters = editor.get('setters');
 
     // setups
     this.setupComponentMeta();

packages/designer/src/designer/setting/utils.ts

@@ -2,7 +2,6 @@
 import { isValidElement } from 'react';
 import { FieldConfig, SetterConfig } from '@alilc/lowcode-types';
 import { isSetterConfig, isDynamicSetter } from '@alilc/lowcode-utils';
-import { getSetter } from '@alilc/lowcode-editor-core';
 import { SettingField } from './setting-field';
 
 function getHotterFromSetter(setter) {
@@ -64,7 +63,7 @@ export class Transducer {
       isDynamic = dynamicFlag !== false;
     }
     if (typeof setter === 'string') {
-      const { component, isDynamic: dynamicFlag } = getSetter(setter) || {};
+      const { component, isDynamic: dynamicFlag } = context.setters.getSetter(setter) || {};
       setter = component;
       // 如果在物料配置中声明了，在 registerSetter 没有声明，取物料配置中的声明
       isDynamic = dynamicFlag === undefined ? isDynamic : dynamicFlag !== false;

packages/designer/src/document/history.ts

@@ -118,7 +118,8 @@ export class History<T = NodeSchema> {
     }
     const cursor = this.session.cursor - 1;
     this.go(cursor);
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     if (!editor) {
       return;
     }
@@ -131,7 +132,8 @@ export class History<T = NodeSchema> {
     }
     const cursor = this.session.cursor + 1;
     this.go(cursor);
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     if (!editor) {
       return;
     }

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

@@ -161,7 +161,9 @@ export class NodeChildren {
     const { document } = node;
     /* istanbul ignore next */
     if (globalContext.has('editor')) {
-      globalContext.get('editor').emit('node.remove', { node, index: i });
+      const workSpace = globalContext.get('workSpace');
+      const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
+      editor.emit('node.remove', { node, index: i });
     }
     document.unlinkNode(node);
     document.selection.remove(node.id);
@@ -196,13 +198,15 @@ export class NodeChildren {
     const i = children.indexOf(node);
 
     if (node.parent) {
-      /* istanbul ignore next */
+      if (globalContext.has('editor')) {
-      globalContext.has('editor') &&
+        const workSpace = globalContext.get('workSpace');
-        globalContext.get('editor').emit('node.remove.topLevel', {
+        const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
+        editor.emit('node.remove.topLevel', {
           node,
           index: node.index,
         });
       }
+    }
 
     if (i < 0) {
       if (index < children.length) {
@@ -231,7 +235,9 @@ export class NodeChildren {
     this.emitter.emit('insert', node);
     /* istanbul ignore next */
     if (globalContext.has('editor')) {
-      globalContext.get('editor').emit('node.add', { node });
+      const workSpace = globalContext.get('workSpace');
+      const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
+      editor.emit('node.add', { node });
     }
     if (useMutator) {
       this.reportModified(node, this.owner, { type: 'insert' });

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

@@ -1018,7 +1018,7 @@ export class Node<Schema extends NodeSchema = NodeSchema> {
   }
 
   /**
-   * @deprecated
+   * TODO: replace non standard metas with standard ones.
    */
   getSuitablePlace(node: Node, ref: any): any {
     const focusNode = this.document?.focusNode;

packages/designer/src/plugin/plugin-context.ts

@@ -42,7 +42,6 @@ export default class PluginContext implements ILowCodePluginContext, ILowCodePlu
       contextApiAssembler: ILowCodePluginContextApiAssembler,
     ) {
     contextApiAssembler.assembleApis(this);
-    this.plugins = plugins;
     const { pluginName = 'anonymous' } = options;
     this.logger = getLogger({ level: 'warn', bizName: `designer:plugin:${pluginName}` });
 

packages/designer/src/plugin/plugin-manager.ts

@@ -27,19 +27,19 @@ const logger = getLogger({ level: 'warn', bizName: 'designer:pluginManager' });
 export class LowCodePluginManager implements ILowCodePluginManager {
   private plugins: ILowCodePlugin[] = [];
 
-  private pluginsMap: Map<string, ILowCodePlugin> = new Map();
+  pluginsMap: Map<string, ILowCodePlugin> = new Map();
 
   private pluginPreference?: PluginPreference = new Map();
 
   contextApiAssembler: ILowCodePluginContextApiAssembler;
 
-  constructor(contextApiAssembler: ILowCodePluginContextApiAssembler) {
+  constructor(contextApiAssembler: ILowCodePluginContextApiAssembler, readonly name = 'unknown') {
     this.contextApiAssembler = contextApiAssembler;
   }
 
-  private _getLowCodePluginContext(options: IPluginContextOptions) {
+  _getLowCodePluginContext = (options: IPluginContextOptions) => {
     return new LowCodePluginContext(this, options, this.contextApiAssembler);
-  }
+  };
 
   isEngineVersionMatched(versionExp: string): boolean {
     const engineVersion = engineConfig.get('ENGINE_VERSION');
@@ -107,6 +107,7 @@ export class LowCodePluginManager implements ILowCodePluginManager {
     const plugin = new LowCodePlugin(pluginName, this, config, meta);
     // support initialization of those plugins which registered after normal initialization by plugin-manager
     if (registerOptions?.autoInit) {
+      // debugger
       await plugin.init();
     }
     this.plugins.push(plugin);

packages/designer/src/plugin/plugin-types.ts

@@ -10,6 +10,7 @@ import {
   CompositeObject,
   ComponentAction,
   MetadataTransducer,
+  IPublicApiPlugins,
 } from '@alilc/lowcode-types';
 import { EngineConfig } from '@alilc/lowcode-editor-core';
 import { Setters } from '../types';
@@ -126,6 +127,7 @@ export interface ILowCodePluginContextPrivate {
   set event(event: IPublicApiEvent);
   set config(config: EngineConfig);
   set common(common: IPublicApiCommon);
+  set plugins(plugins: IPublicApiPlugins);
 }
 export interface ILowCodePluginContextApiAssembler {
   assembleApis: (context: ILowCodePluginContextPrivate) => void;

packages/designer/src/project/project-view.tsx

@@ -26,8 +26,7 @@ export class ProjectView extends Component<{ designer: Designer }> {
   }
   render() {
     const { designer } = this.props;
-    const { project } = designer;
+    const { project, projectSimulatorProps: simulatorProps } = designer;
-    const { simulatorProps } = project;
     const Simulator = designer.simulatorComponent || BuiltinSimulatorHostView;
     const Loading = engineConfig.get('loadingComponent', BuiltinLoading);
 

packages/designer/src/project/project.less

@@ -13,6 +13,10 @@
     padding-top: 50%;
   }
 
+  .lc-simulator {
+    background: rgb(237, 239, 243);
+  }
+
   .lc-simulator-shell {
     width: 100%;
     height: 100%;

packages/designer/src/project/project.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from 'events';
-import { obx, computed, makeObservable, action } from '@alilc/lowcode-editor-core';
+import { obx, computed, makeObservable, action, engineConfig } from '@alilc/lowcode-editor-core';
 import { Designer } from '../designer';
 import { DocumentModel, isDocumentModel } from '../document';
 import {
@@ -32,9 +32,11 @@ export class Project {
     return this._simulator || null;
   }
 
+  key = Math.random();
+
   // TODO: 考虑项目级别 History
 
-  constructor(readonly designer: Designer, schema?: ProjectSchema) {
+  constructor(readonly designer: Designer, schema?: ProjectSchema, public name = 'unknown') {
     makeObservable(this);
     this.load(schema);
   }
@@ -301,25 +303,9 @@ export class Project {
     });
   }
 
-  /**
+  mountSimulator(simulator: ISimulatorHost) {
-   * 提供给模拟器的参数
-   */
-  @computed get simulatorProps(): object {
-    let { simulatorProps } = this.designer;
-    if (typeof simulatorProps === 'function') {
-      simulatorProps = simulatorProps(this);
-    }
-    return {
-      ...simulatorProps,
-      project: this,
-      onMount: this.mountSimulator.bind(this),
-    };
-  }
-
-  private mountSimulator(simulator: ISimulatorHost) {
     // TODO: 多设备 simulator 支持
     this._simulator = simulator;
-    this.designer.editor.set('simulator', simulator);
     this.emitter.emit('lowcode_engine_simulator_ready', simulator);
   }
 

packages/editor-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-editor-core",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Core Api for Ali lowCode engine",
   "license": "MIT",
   "main": "lib/index.js",
@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "intl-messageformat": "^9.3.1",

packages/editor-core/src/di/setter.ts

@@ -44,16 +44,55 @@ function getInitialFromSetter(setter: any) {
     ) || null; // eslint-disable-line
 }
 
-export function getSetter(type: string): RegisteredSetter | null {
+export class Setters {
-  return settersMap.get(type) || null;
+  constructor(public name: string = 'unknown') {}
-}
-export function getSettersMap() {
-  return settersMap;
-}
 
-export function createSetterContent(setter: any, props: Record<string, any>): ReactNode {
+  settersMap = new Map<string, RegisteredSetter & {
+    type: string;
+  }>();
+
+  getSetter = (type: string): RegisteredSetter | null => {
+    return this.settersMap.get(type) || null;
+  };
+
+  registerSetter = (
+    typeOrMaps: string | { [key: string]: CustomView | RegisteredSetter },
+    setter?: CustomView | RegisteredSetter,
+  ) => {
+    if (typeof typeOrMaps === 'object') {
+      Object.keys(typeOrMaps).forEach(type => {
+        this.registerSetter(type, typeOrMaps[type]);
+      });
+      return;
+    }
+    if (!setter) {
+      return;
+    }
+    if (isCustomView(setter)) {
+      setter = {
+        component: setter,
+        // todo: intl
+        title: (setter as any).displayName || (setter as any).name || 'CustomSetter',
+      };
+    }
+    if (!setter.initialValue) {
+      const initial = getInitialFromSetter(setter.component);
+      if (initial) {
+        setter.initialValue = (field: any) => {
+          return initial.call(field, field.getValue());
+        };
+      }
+    }
+    this.settersMap.set(typeOrMaps, { type: typeOrMaps, ...setter });
+  };
+
+  getSettersMap = () => {
+    return this.settersMap;
+  };
+
+  createSetterContent = (setter: any, props: Record<string, any>): ReactNode => {
     if (typeof setter === 'string') {
-    setter = getSetter(setter);
+      setter = this.getSetter(setter);
       if (!setter) {
         return null;
       }
@@ -72,4 +111,5 @@ export function createSetterContent(setter: any, props: Record<string, any>): Re
     }
 
     return createContent(setter, props);
+  };
 }

packages/editor-core/src/editor.ts

@@ -51,6 +51,10 @@ export declare interface Editor extends StrictEventEmitter<EventEmitter, GlobalE
 
 // eslint-disable-next-line no-redeclare
 export class Editor extends (EventEmitter as any) implements IEditor {
+  constructor(public name: string = 'unknown', public workspaceMode: boolean = false) {
+    // eslint-disable-next-line constructor-super
+    super();
+  }
   /**
    * Ioc Container
    */
@@ -114,11 +118,47 @@ export class Editor extends (EventEmitter as any) implements IEditor {
       if (remoteComponentDescriptions && remoteComponentDescriptions.length) {
         await Promise.all(
           remoteComponentDescriptions.map(async (component: any) => {
-            const { exportName, url } = component;
+            const { exportName, url, npm } = component;
             await (new AssetLoader()).load(url);
+            function setAssetsComponent(component: any, extraNpmInfo: any = {}) {
+              const components = component.components;
+              if (Array.isArray(components)) {
+                components.forEach(d => {
+                  assets.components = assets.components.concat({
+                    npm: {
+                      ...npm,
+                      ...extraNpmInfo,
+                    },
+                    ...d,
+                  } || []);
+                });
+                return;
+              }
+              assets.components = assets.components.concat({
+                npm: {
+                  ...npm,
+                  ...extraNpmInfo,
+                },
+                ...component.components,
+              } || []);
+              // assets.componentList = assets.componentList.concat(component.componentList || []);
+            }
+            function setArrayAssets(value: any[], preExportName: string = '', preSubName: string = '') {
+              value.forEach((d: any, i: number) => {
+                const exportName = [preExportName, i.toString()].filter(d => !!d).join('.');
+                const subName = [preSubName, i.toString()].filter(d => !!d).join('.');
+                Array.isArray(d) ? setArrayAssets(d, exportName, subName) : setAssetsComponent(d, {
+                  exportName,
+                  subName,
+                });
+              });
+            }
             if (window[exportName]) {
-              assets.components = assets.components.concat((window[exportName] as any).components || []);
+              if (Array.isArray(window[exportName])) {
-              assets.componentList = assets.componentList?.concat((window[exportName] as any).componentList || []);
+                setArrayAssets(window[exportName] as any);
+              } else {
+                setAssetsComponent(window[exportName] as any);
+              }
             }
             return window[exportName];
           }),

packages/editor-core/src/hotkey.ts

@@ -330,7 +330,8 @@ function getKeyInfo(combination: string, action?: string): KeyInfo {
  */
 function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string, sequence?: string): void {
   try {
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const designer = editor.get('designer');
     const node = designer?.currentSelection?.getNodes()?.[0];
     const npm = node?.componentMeta?.npm;
@@ -353,7 +354,7 @@ function fireCallback(callback: HotkeyCallback, e: KeyboardEvent, combo?: string
 }
 
 export class Hotkey {
-  private callBacks: HotkeyCallbacks = {};
+  callBacks: HotkeyCallbacks = {};
 
   private directMap: HotkeyDirectMap = {};
 
@@ -367,6 +368,16 @@ export class Hotkey {
 
   private nextExpectedAction: boolean | string = false;
 
+  private isActivate = true;
+
+  constructor(readonly name: string = 'unknown') {
+    this.mount(window);
+  }
+
+  activate(activate: boolean): void {
+    this.isActivate = activate;
+  }
+
   mount(window: Window) {
     const { document } = window;
     const handleKeyEvent = this.handleKeyEvent.bind(this);
@@ -541,6 +552,9 @@ export class Hotkey {
   }
 
   private handleKeyEvent(e: KeyboardEvent): void {
+    if (!this.isActivate) {
+      return;
+    }
     const character = characterFromEvent(e);
 
     // no character found then stop
@@ -644,5 +658,5 @@ export class Hotkey {
   }
 }
 
-export const hotkey = new Hotkey();
+// export const hotkey = new Hotkey();
-hotkey.mount(window);
+// hotkey.mount(window);

packages/editor-skeleton/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-editor-skeleton",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "alibaba lowcode editor skeleton",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -18,10 +18,10 @@
   ],
   "dependencies": {
     "@alifd/next": "^1.20.12",
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-core": "1.0.17",
+    "@alilc/lowcode-editor-core": "1.1.0-beta.1",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"

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

@@ -1,5 +1,5 @@
 import { Component, MouseEvent, Fragment } from 'react';
-import { shallowIntl, createSetterContent, observer, obx, engineConfig, runInAction, globalContext } from '@alilc/lowcode-editor-core';
+import { shallowIntl, observer, obx, engineConfig, runInAction, globalContext } from '@alilc/lowcode-editor-core';
 import { createContent, isJSSlot, isSetterConfig } from '@alilc/lowcode-utils';
 import { Skeleton } from '@alilc/lowcode-editor-skeleton';
 import { CustomView } from '@alilc/lowcode-types';
@@ -8,6 +8,7 @@ import { createField } from '../field';
 import PopupService, { PopupPipe } from '../popup';
 import { SkeletonContext } from '../../context';
 import { intl } from '../../locale';
+import { Setters } from '@alilc/lowcode-shell';
 
 function isStandardComponent(componentMeta: ComponentMeta | null) {
   if (!componentMeta) return false;
@@ -38,6 +39,8 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
 
   stageName: string | undefined;
 
+  setters: Setters;
+
   constructor(props: SettingFieldViewProps) {
     super(props);
 
@@ -45,8 +48,10 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
     const { extraProps } = field;
     const { display } = extraProps;
 
-    const editor = globalContext.get('editor');
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const { stages } = editor.get('skeleton') as Skeleton;
+    this.setters = editor.get('setters');
     let stageName;
     if (display === 'entry') {
       runInAction(() => {
@@ -192,7 +197,6 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
       setterProps = {},
       setterType,
       initialValue = null,
-
     } = this.setterInfo;
 
     const value = this.value;
@@ -215,7 +219,7 @@ class SettingFieldView extends Component<SettingFieldViewProps, SettingFieldView
         ...extraProps,
       },
       !stageName &&
-      createSetterContent(setterType, {
+      this.setters.createSetterContent(setterType, {
         ...shallowIntl(setterProps),
         forceInline: extraProps.forceInline,
         key: field.id,
@@ -268,7 +272,8 @@ class SettingGroupView extends Component<SettingGroupViewProps> {
     const { field } = this.props;
     const { extraProps } = field;
     const { display } = extraProps;
-    const editor = globalContext.get('editor');
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const { stages } = editor.get('skeleton') as Skeleton;
     // const items = field.items;
 

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

@@ -14,19 +14,25 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
   state = {
     shouldIgnoreRoot: false,
   };
-  private main = new SettingsMain(globalContext.get('editor'));
+  private main;
 
   @obx.ref private _activeKey?: any;
 
   constructor(props) {
     super(props);
     makeObservable(this);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
+    this.main = new SettingsMain(editor);
   }
 
   componentDidMount() {
     this.setShouldIgnoreRoot();
 
-    globalContext.get('editor').on('designer.selection.change', () => {
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
+
+    editor.on('designer.selection.change', () => {
       if (!engineConfig.get('stayOnTheSameSettingTab', false)) {
         this._activeKey = null;
       }
@@ -65,7 +71,8 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
       );
     }
 
-    const editor = globalContext.get('editor');
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const designer = editor.get('designer');
     const current = designer?.currentSelection?.getNodes()?.[0];
     let node: Node | null = settings.first;
@@ -128,7 +135,8 @@ export class SettingsPrimaryPane extends Component<{ editor: Editor; config: any
 
   render() {
     const { settings } = this.main;
-    const editor = globalContext.get('editor');
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     if (!settings) {
       // 未选中节点，提示选中 或者 显示根节点设置
       return (

packages/editor-skeleton/src/components/widget-views/index.tsx

@@ -116,12 +116,14 @@ export class DraggableLineView extends Component<{ panel: Panel }> {
     }
 
     // 抛出事件，对于有些需要 panel 插件随着 度变化进行再次渲染的，由panel插件内部监听事件实现
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     editor?.emit('dockpane.drag', width);
   }
 
   onDragChange(type: 'start' | 'end') {
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     editor?.emit('dockpane.dragchange', type);
     // builtinSimulator 屏蔽掉 鼠标事件
     editor?.emit('designer.builtinSimulator.disabledEvents', type === 'start');
@@ -185,7 +187,8 @@ export class TitledPanelView extends Component<{ panel: Panel; area?: string }>
     if (!panel.inited) {
       return null;
     }
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const panelName = area ? `${area}-${panel.name}` : panel.name;
     editor?.emit('skeleton.panel.toggle', {
       name: panelName || '',
@@ -247,7 +250,8 @@ export class PanelView extends Component<{
     if (!panel.inited) {
       return null;
     }
-    const editor = globalContext.get(Editor);
+    const workSpace = globalContext.get('workSpace');
+    const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
     const panelName = area ? `${area}-${panel.name}` : panel.name;
     editor?.emit('skeleton.panel.toggle', {
       name: panelName || '',

packages/editor-skeleton/src/layouts/left-float-pane.tsx

@@ -65,7 +65,6 @@ export default class LeftFloatPane extends Component<{ area: Area<any, Panel> }>
         this.props.area.setVisible(false);
       },
       onBlur: () => {
-        // debugger
         this.props.area.setVisible(false);
       },
     });

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

@@ -133,11 +133,38 @@ body {
   }
 }
 
-.lc-workbench {
+.workspace-engine-main {
   height: 100%;
   display: flex;
   flex-direction: column;
   background-color: #edeff3;
+
+  .lc-workbench {
+
+  }
+
+  .engine-editor-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    flex-direction: column;
+
+    &.active {
+      z-index: 999;
+    }
+  }
+}
+
+.lc-workbench {
+  &.engine-main {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    background-color: #edeff3;
+  }
   .lc-top-area {
     height: var(--top-area-height);
     background-color: var(--color-pane-background);
@@ -349,6 +376,7 @@ body {
       }
       .lc-main-area {
         flex: 1;
+        background-color: #edeff3;
       }
       .lc-bottom-area {
         height: var(--bottom-area-height);

packages/editor-skeleton/src/skeleton.ts

@@ -1,4 +1,4 @@
-import { Editor, action, makeObservable } from '@alilc/lowcode-editor-core';
+import { Editor, action, makeObservable, obx } from '@alilc/lowcode-editor-core';
 import {
   DockConfig,
   PanelConfig,
@@ -56,13 +56,13 @@ export class Skeleton {
 
   readonly rightArea: Area<PanelConfig, Panel>;
 
-  readonly mainArea: Area<WidgetConfig | PanelConfig, Widget | Panel>;
+  @obx readonly mainArea: Area<WidgetConfig | PanelConfig, Widget | Panel>;
 
   readonly bottomArea: Area<PanelConfig, Panel>;
 
   readonly stages: Area<StageConfig, Stage>;
 
-  constructor(readonly editor: Editor) {
+  constructor(readonly editor: Editor, readonly name: string = 'unknown') {
     makeObservable(this);
     this.leftArea = new Area(
       this,
@@ -366,6 +366,12 @@ export class Skeleton {
       ...this.parseConfig(config),
       ...extraConfig,
     };
+    parsedConfig.contentProps = {
+      context: this.editor.get('innerPlugins')?._getLowCodePluginContext({
+        pluginName: 'any',
+      }),
+      ...(parsedConfig.contentProps || {}),
+    };
     let { area } = parsedConfig;
     if (!area) {
       if (parsedConfig.type === 'Panel') {

packages/engine/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-engine",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "An enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系",
   "main": "lib/engine-core.js",
   "module": "es/engine-core.js",
@@ -19,14 +19,14 @@
   "license": "MIT",
   "dependencies": {
     "@alifd/next": "^1.19.12",
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-core": "1.0.17",
+    "@alilc/lowcode-editor-core": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-skeleton": "1.0.17",
+    "@alilc/lowcode-editor-skeleton": "1.1.0-beta.1",
     "@alilc/lowcode-engine-ext": "^1.0.0",
-    "@alilc/lowcode-plugin-designer": "1.0.17",
+    "@alilc/lowcode-plugin-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-plugin-outline-pane": "1.0.17",
+    "@alilc/lowcode-plugin-outline-pane": "1.1.0-beta.1",
-    "@alilc/lowcode-shell": "1.0.17",
+    "@alilc/lowcode-shell": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },

packages/engine/src/engine-core.ts

@@ -1,23 +1,32 @@
 /* eslint-disable no-param-reassign */
 import { createElement } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
-import { globalContext, Editor, engineConfig, EngineOptions } from '@alilc/lowcode-editor-core';
+import {
+  globalContext,
+  Editor,
+  engineConfig,
+  Setters as InnerSetters,
+  Hotkey as InnerHotkey,
+} from '@alilc/lowcode-editor-core';
+import { EngineOptions,
+  IPublicModelDocumentModel,
+} from '@alilc/lowcode-types';
 import {
   Designer,
   LowCodePluginManager,
-  ILowCodePluginContext,
   ILowCodePluginContextPrivate,
   ILowCodePluginContextApiAssembler,
   PluginPreference,
 } from '@alilc/lowcode-designer';
 import {
   Skeleton as InnerSkeleton,
-  SettingsPrimaryPane,
   registerDefaults,
 } from '@alilc/lowcode-editor-skeleton';
+import {
+  WorkSpace,
+  Workbench as WorkSpaceWorkbench,
+} from '@alilc/lowcode-workspace';
 
-import Outline, { OutlineBackupPane, getTreeMaster } from '@alilc/lowcode-plugin-outline-pane';
-import DesignerPlugin from '@alilc/lowcode-plugin-designer';
 import {
   Hotkey,
   Project,
@@ -25,6 +34,7 @@ import {
   Setters,
   Material,
   Event,
+  Plugins,
   DocumentModel,
   Common,
 } from '@alilc/lowcode-shell';
@@ -32,7 +42,11 @@ import { getLogger, isPlainObject } from '@alilc/lowcode-utils';
 import './modules/live-editing';
 import classes from './modules/classes';
 import symbols from './modules/symbols';
+import { componentMetaParser } from './inner-plugins/component-meta-parser';
+import { setterRegistry } from './inner-plugins/setter-registry';
+import { defaultPanelRegistry } from './inner-plugins/default-panel-registry';
 import { shellModelFactory } from './modules/shell-model-factory';
+import { builtinHotkey } from './inner-plugins/builtin-hotkey';
 
 export * from './modules/skeleton-types';
 export * from './modules/designer-types';
@@ -40,9 +54,11 @@ export * from './modules/lowcode-types';
 
 registerDefaults();
 
+const workSpace = new WorkSpace();
 const editor = new Editor();
 globalContext.register(editor, Editor);
 globalContext.register(editor, 'editor');
+globalContext.register(workSpace, 'workSpace');
 
 const innerSkeleton = new InnerSkeleton(editor);
 editor.set('skeleton' as any, innerSkeleton);
@@ -51,15 +67,23 @@ const designer = new Designer({ editor, shellModelFactory });
 editor.set('designer' as any, designer);
 const { project: innerProject } = designer;
 
-const hotkey = new Hotkey();
+const innerHotkey = new InnerHotkey();
+const hotkey = new Hotkey(innerHotkey);
 const project = new Project(innerProject);
 const skeleton = new Skeleton(innerSkeleton);
-const setters = new Setters();
+const innerSetters = new InnerSetters();
+const setters = new Setters(innerSetters);
+
 const material = new Material(editor);
+editor.set('project', project);
+editor.set('setters' as any, setters);
+editor.set('material', material);
+editor.set('innerHotkey', innerHotkey);
 const config = engineConfig;
 const event = new Event(editor, { prefix: 'common' });
 const logger = getLogger({ level: 'warn', bizName: 'common' });
 const common = new Common(editor, innerSkeleton);
+let plugins: Plugins;
 
 const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
   assembleApis: (context: ILowCodePluginContextPrivate) => {
@@ -71,9 +95,13 @@ const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
     context.event = event;
     context.config = config;
     context.common = common;
+    context.plugins = plugins;
   },
 };
-const plugins = new LowCodePluginManager(pluginContextApiAssembler).toProxy();
+
+const innerPlugins = new LowCodePluginManager(pluginContextApiAssembler);
+plugins = new Plugins(innerPlugins).toProxy();
+editor.set('innerPlugins' as any, innerPlugins);
 editor.set('plugins' as any, plugins);
 
 export {
@@ -89,6 +117,7 @@ export {
   common,
   // 兼容原 editor 的事件功能
   event as editor,
+  workSpace,
 };
 // declare this is open-source version
 export const isOpenSource = true;
@@ -96,100 +125,7 @@ export const __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
   symbols,
   classes,
 };
-engineConfig.set('isOpenSource', isOpenSource);
+config.set('isOpenSource', isOpenSource);
-
-// 注册一批内置插件
-(async function registerPlugins() {
-  // 处理 editor.set('assets')，将组件元数据创建好
-  const componentMetaParser = (ctx: ILowCodePluginContext) => {
-    return {
-      init() {
-        editor.onGot('assets', (assets: any) => {
-          const { components = [] } = assets;
-          designer.buildComponentMetasMap(components);
-        });
-      },
-    };
-  };
-  componentMetaParser.pluginName = '___component_meta_parser___';
-  await plugins.register(componentMetaParser);
-
-  // 注册默认的 setters
-  const setterRegistry = (ctx: ILowCodePluginContext) => {
-    return {
-      init() {
-        if (engineConfig.get('disableDefaultSetters')) return;
-        const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
-        if (builtinSetters) {
-          ctx.setters.registerSetter(builtinSetters);
-        }
-      },
-    };
-  };
-  setterRegistry.pluginName = '___setter_registry___';
-  await plugins.register(setterRegistry);
-
-  // 注册默认的面板
-  const defaultPanelRegistry = (ctx: ILowCodePluginContext) => {
-    return {
-      init() {
-        skeleton.add({
-          area: 'mainArea',
-          name: 'designer',
-          type: 'Widget',
-          content: DesignerPlugin,
-        });
-        if (!engineConfig.get('disableDefaultSettingPanel')) {
-          skeleton.add({
-            area: 'rightArea',
-            name: 'settingsPane',
-            type: 'Panel',
-            content: SettingsPrimaryPane,
-            props: {
-              ignoreRoot: true,
-            },
-          });
-        }
-
-        // by default in float area;
-        let isInFloatArea = true;
-        const hasPreferenceForOutline = editor
-          ?.getPreference()
-          ?.contains('outline-pane-pinned-status-isFloat', 'skeleton');
-        if (hasPreferenceForOutline) {
-          isInFloatArea = editor
-            ?.getPreference()
-            ?.get('outline-pane-pinned-status-isFloat', 'skeleton');
-        }
-
-        skeleton.add({
-          area: 'leftArea',
-          name: 'outlinePane',
-          type: 'PanelDock',
-          content: Outline,
-          panelProps: {
-            area: isInFloatArea ? 'leftFloatArea' : 'leftFixedArea',
-            keepVisibleWhileDragging: true,
-            ...engineConfig.get('defaultOutlinePaneProps'),
-          },
-        });
-        skeleton.add({
-          area: 'rightArea',
-          name: 'backupOutline',
-          type: 'Panel',
-          props: {
-            condition: () => {
-              return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard();
-            },
-          },
-          content: OutlineBackupPane,
-        });
-      },
-    };
-  };
-  defaultPanelRegistry.pluginName = '___default_panel___';
-  await plugins.register(defaultPanelRegistry);
-})();
 
 // container which will host LowCodeEngine DOM
 let engineContainer: HTMLElement;
@@ -202,6 +138,7 @@ export async function init(
   options?: EngineOptions,
   pluginPreference?: PluginPreference,
   ) {
+
   await destroy();
   let engineOptions = null;
   if (isPlainObject(container)) {
@@ -220,9 +157,42 @@ export async function init(
   }
   engineConfig.setEngineOptions(engineOptions as any);
 
+
+  if (options && options.enableWorkspaceMode) {
+    render(
+      createElement(WorkSpaceWorkbench, {
+        workSpace,
+        className: 'engine-main',
+        topAreaItemClassName: 'engine-actionitem',
+      }),
+      engineContainer,
+    );
+    workSpace.setActive(true);
+    return;
+  }
+
+  // 注册一批内置插件
+  await plugins.register(componentMetaParser(designer));
+  await plugins.register(setterRegistry);
+  await plugins.register(defaultPanelRegistry(editor, designer));
+  await plugins.register(builtinHotkey);
+
   await plugins.init(pluginPreference as any);
 
   const { Workbench } = common.skeletonCabin;
+  if (options && options.enableWorkspaceMode) {
+    render(
+      createElement(WorkSpaceWorkbench, {
+        workSpace,
+        // skeleton: workSpace.skeleton,
+        className: 'engine-main',
+        topAreaItemClassName: 'engine-actionitem',
+      }),
+      engineContainer,
+    );
+    return;
+  }
+
   render(
     createElement(Workbench, {
       skeleton: innerSkeleton,
@@ -237,7 +207,7 @@ export async function destroy() {
   // remove all documents
   const { documents } = project;
   if (Array.isArray(documents) && documents.length > 0) {
-    documents.forEach(((doc: DocumentModel) => project.removeDocument(doc)));
+    documents.forEach(((doc: IPublicModelDocumentModel) => project.removeDocument(doc)));
   }
 
   // TODO: delete plugins except for core plugins

packages/engine/src/inner-plugins/builtin-hotkey.ts

@@ -0,0 +1,407 @@
+import { IPublicModelNode } from './../../../types/src/shell/model/node';
+import { Editor, globalContext } from '@alilc/lowcode-editor-core';
+import { isFormEvent } from '@alilc/lowcode-utils';
+import {
+  focusing,
+  insertChildren,
+  TransformStage,
+  clipboard,
+  ILowCodePluginContext,
+} from '@alilc/lowcode-designer';
+
+export function isInLiveEditing() {
+  const workSpace = globalContext.get('workSpace');
+  if (workSpace.isActive) {
+    return Boolean(
+      workSpace.window.editor.get('designer')?.project?.simulator?.liveEditing?.editing,
+    );
+  }
+
+  if (globalContext.has(Editor)) {
+    return Boolean(
+      globalContext.get(Editor).get('designer')?.project?.simulator?.liveEditing?.editing,
+    );
+  }
+}
+
+/* istanbul ignore next */
+function getNextForSelect(next: IPublicModelNode | null, head?: any, parent?: IPublicModelNode | null): any {
+  if (next) {
+    if (!head) {
+      return next;
+    }
+
+    let ret;
+    if (next.isContainer) {
+      const children = next.children;
+      if (children && !children.isEmpty) {
+        ret = getNextForSelect(children.get(0));
+        if (ret) {
+          return ret;
+        }
+      }
+    }
+
+    ret = getNextForSelect(next.nextSibling);
+    if (ret) {
+      return ret;
+    }
+  }
+
+  if (parent) {
+    return getNextForSelect(parent.nextSibling, false, parent?.parent);
+  }
+
+  return null;
+}
+
+/* istanbul ignore next */
+function getPrevForSelect(prev: IPublicModelNode | null, head?: any, parent?: IPublicModelNode | null): any {
+  if (prev) {
+    let ret;
+    if (!head && prev.isContainer) {
+      const children = prev.children;
+      const lastChild = children && !children.isEmpty ? children.get(children.size - 1) : null;
+
+      ret = getPrevForSelect(lastChild);
+      if (ret) {
+        return ret;
+      }
+    }
+
+    if (!head) {
+      return prev;
+    }
+
+    ret = getPrevForSelect(prev.prevSibling);
+    if (ret) {
+      return ret;
+    }
+  }
+
+  if (parent) {
+    return parent;
+  }
+
+  return null;
+}
+
+// 注册默认的 setters
+export const builtinHotkey = (ctx: ILowCodePluginContext) => {
+  return {
+    init() {
+      const { hotkey, project, logger } = ctx;
+      // hotkey binding
+      hotkey.bind(['backspace', 'del'], (e: KeyboardEvent, action) => {
+        logger.info(`action ${action} is triggered`);
+
+        if (isInLiveEditing()) {
+          return;
+        }
+        // TODO: use focus-tracker
+        const doc = project.currentDocument;
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+
+        const sel = doc.selection;
+        const topItems = sel.getTopNodes();
+        // TODO: check can remove
+        topItems.forEach((node) => {
+          if (node?.canPerformAction('remove')) {
+            node && doc.removeNode(node);
+          }
+        });
+        sel.clear();
+      });
+
+      hotkey.bind('escape', (e: KeyboardEvent, action) => {
+        logger.info(`action ${action} is triggered`);
+        // const currentFocus = focusing.current;
+        if (isInLiveEditing()) {
+          return;
+        }
+        const sel = focusing.focusDesigner?.currentDocument?.selection;
+        if (isFormEvent(e) || !sel) {
+          return;
+        }
+        e.preventDefault();
+
+        sel.clear();
+        // currentFocus.esc();
+      });
+
+      // command + c copy  command + x cut
+      hotkey.bind(['command+c', 'ctrl+c', 'command+x', 'ctrl+x'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const doc = project.currentDocument;
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+
+        let selected = doc.selection.getTopNodes(true);
+        selected = selected.filter((node) => {
+          return node?.canPerformAction('copy');
+        });
+        if (!selected || selected.length < 1) {
+          return;
+        }
+
+        const componentsMap = {};
+        const componentsTree = selected.map((item) => item?.exportSchema(TransformStage.Clone));
+
+        // FIXME: clear node.id
+
+        const data = { type: 'nodeSchema', componentsMap, componentsTree };
+
+        clipboard.setData(data);
+
+        const cutMode = action && action.indexOf('x') > 0;
+        if (cutMode) {
+          selected.forEach((node) => {
+            const parentNode = node?.parent;
+            parentNode?.select();
+            node?.remove();
+          });
+        }
+      });
+
+      // command + v paste
+      hotkey.bind(['command+v', 'ctrl+v'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        if (isInLiveEditing()) return;
+        // TODO
+        const designer = focusing.focusDesigner;
+        const doc = designer?.currentDocument;
+        if (isFormEvent(e) || !designer || !doc) {
+          return;
+        }
+        /* istanbul ignore next */
+        clipboard.waitPasteData(e, ({ componentsTree }) => {
+          if (componentsTree) {
+            const { target, index } = designer.getSuitableInsertion(componentsTree) || {};
+            if (!target) {
+              return;
+            }
+            let canAddComponentsTree = componentsTree.filter((i) => {
+              return doc.checkNestingUp(target, i);
+            });
+            if (canAddComponentsTree.length === 0) return;
+            const nodes = insertChildren(target, canAddComponentsTree, index);
+            if (nodes) {
+              doc.selection.selectAll(nodes.map((o) => o.id));
+              setTimeout(() => designer.activeTracker.track(nodes[0]), 10);
+            }
+          }
+        });
+      });
+
+      // command + z undo
+      hotkey.bind(['command+z', 'ctrl+z'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const history = project.currentDocument?.history;
+        if (isFormEvent(e) || !history) {
+          return;
+        }
+
+        e.preventDefault();
+        const selection = project.currentDocument?.selection;
+        const curSelected = selection?.selected && Array.from(selection?.selected);
+        history.back();
+        selection?.selectAll(curSelected);
+      });
+
+      // command + shift + z redo
+      hotkey.bind(['command+y', 'ctrl+y', 'command+shift+z'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const history = project.currentDocument?.history;
+        if (isFormEvent(e) || !history) {
+          return;
+        }
+        e.preventDefault();
+        const selection = project.currentDocument?.selection;
+        const curSelected = selection?.selected && Array.from(selection?.selected);
+        history.forward();
+        selection?.selectAll(curSelected);
+      });
+
+      // sibling selection
+      hotkey.bind(['left', 'right'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const doc = project.currentDocument;
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+        const selected = doc.selection.getTopNodes(true);
+        if (!selected || selected.length < 1) {
+          return;
+        }
+        const firstNode = selected[0];
+        const silbing = action === 'left' ? firstNode?.prevSibling : firstNode?.nextSibling;
+        silbing?.select();
+      });
+
+      hotkey.bind(['up', 'down'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const doc = project.currentDocument;
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+        const selected = doc.selection.getTopNodes(true);
+        if (!selected || selected.length < 1) {
+          return;
+        }
+        const firstNode = selected[0];
+
+        if (action === 'down') {
+          const next = getNextForSelect(firstNode, true, firstNode?.parent);
+          next?.select();
+        } else if (action === 'up') {
+          const prev = getPrevForSelect(firstNode, true, firstNode?.parent);
+          prev?.select();
+        }
+      });
+
+      hotkey.bind(['option+left', 'option+right'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const doc = project.currentDocument;
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+        const selected = doc.selection.getTopNodes(true);
+        if (!selected || selected.length < 1) {
+          return;
+        }
+        // TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
+        // TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
+
+        const firstNode = selected[0];
+        const parent = firstNode?.parent;
+        if (!parent) return;
+
+        const isPrev = action && /(left)$/.test(action);
+
+        const silbing = isPrev ? firstNode.prevSibling : firstNode.nextSibling;
+        if (silbing) {
+          if (isPrev) {
+            parent.insertBefore(firstNode, silbing);
+          } else {
+            parent.insertAfter(firstNode, silbing);
+          }
+          firstNode?.select();
+        }
+      });
+
+      hotkey.bind(['option+up'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const doc = project.currentDocument;
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+        const selected = doc.selection.getTopNodes(true);
+        if (!selected || selected.length < 1) {
+          return;
+        }
+        // TODO: 此处需要增加判断当前节点是否可被操作移动，原ve里是用 node.canOperating()来判断
+        // TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
+
+        const firstNode = selected[0];
+        const parent = firstNode?.parent;
+        if (!parent) {
+          return;
+        }
+
+        const silbing = firstNode.prevSibling;
+        if (silbing) {
+          if (silbing.isContainer) {
+            const place = silbing.getSuitablePlace(firstNode, null);
+            silbing.insertAfter(place, place.ref);
+          } else {
+            parent.insertBefore(firstNode, silbing);
+          }
+          firstNode?.select();
+        } else {
+          const place = parent.getSuitablePlace(firstNode, null); // upwards
+          if (place) {
+            place.container.insertBefore(firstNode, place.ref);
+            firstNode?.select();
+          }
+        }
+      });
+
+      hotkey.bind(['option+down'], (e, action) => {
+        logger.info(`action ${action} is triggered`);
+        if (isInLiveEditing()) {
+          return;
+        }
+        const doc = project.getCurrentDocument();
+        if (isFormEvent(e) || !doc) {
+          return;
+        }
+        e.preventDefault();
+        const selected = doc.selection.getTopNodes(true);
+        if (!selected || selected.length < 1) {
+          return;
+        }
+        // TODO: 此处需要增加判断当前节点是否可被操作移动，原 ve 里是用 node.canOperating() 来判断
+        // TODO: 移动逻辑也需要重新梳理，对于移动目标位置的选择，是否可以移入，需要增加判断
+
+        const firstNode = selected[0];
+        const parent = firstNode?.parent;
+        if (!parent) {
+          return;
+        }
+
+        const silbing = firstNode.nextSibling;
+        if (silbing) {
+          if (silbing.isContainer) {
+            // const place = silbing.getSuitablePlace(firstNode, null);
+            silbing.insertBefore(firstNode, undefined);
+            // place.container.insertBefore(firstNode, place.ref);
+          } else {
+            parent.insertAfter(firstNode, silbing);
+          }
+          firstNode?.select();
+        } else {
+          const place = parent.getSuitablePlace(firstNode, null); // upwards
+          if (place) {
+            place.container.insertAfter(firstNode, place.ref);
+            firstNode?.select();
+          }
+        }
+      });
+    },
+  };
+};
+
+builtinHotkey.pluginName = '___builtin_hotkey___';

packages/engine/src/inner-plugins/component-meta-parser.ts

@@ -0,0 +1,20 @@
+import { ILowCodePluginContext } from '@alilc/lowcode-designer';
+
+export const componentMetaParser = (designer: any) => {
+  const fun = (ctx: ILowCodePluginContext) => {
+    return {
+      init() {
+        const { material } = ctx;
+        material.onChangeAssets(() => {
+          const assets = material.getAssets();
+          const { components = [] } = assets;
+          designer.buildComponentMetasMap(components);
+        });
+      },
+    };
+  };
+
+  fun.pluginName = '___component_meta_parser___';
+
+  return fun;
+};

packages/engine/src/inner-plugins/default-panel-registry.tsx

@@ -0,0 +1,93 @@
+import { ILowCodePluginContext } from '@alilc/lowcode-designer';
+import { SettingsPrimaryPane } from '@alilc/lowcode-editor-skeleton';
+import DesignerPlugin from '@alilc/lowcode-plugin-designer';
+import Outline, { getTreeMaster, OutlineBackupPane } from '@alilc/lowcode-plugin-outline-pane';
+
+// 注册默认的面板
+export const defaultPanelRegistry = (editor: any, designer: any) => {
+  const fun = (ctx: ILowCodePluginContext) => {
+    return {
+      init() {
+        const { skeleton, config } = ctx;
+        skeleton.add({
+          area: 'mainArea',
+          name: 'designer',
+          type: 'Widget',
+          content: <DesignerPlugin
+            engineConfig={config}
+            engineEditor={editor}
+          />,
+        });
+        if (!config.get('disableDefaultSettingPanel')) {
+          skeleton.add({
+            area: 'rightArea',
+            name: 'settingsPane',
+            type: 'Panel',
+            content: SettingsPrimaryPane,
+            props: {
+              ignoreRoot: true,
+            },
+          });
+        }
+
+        // by default in float area;
+        let isInFloatArea = true;
+        const hasPreferenceForOutline = editor
+          ?.getPreference()
+          ?.contains('outline-pane-pinned-status-isFloat', 'skeleton');
+        if (hasPreferenceForOutline) {
+          isInFloatArea = editor
+            ?.getPreference()
+            ?.get('outline-pane-pinned-status-isFloat', 'skeleton');
+        }
+
+        skeleton.add({
+          area: 'leftArea',
+          name: 'outlinePane',
+          type: 'PanelDock',
+          content: {
+            ...Outline,
+            content: (props: any) => {
+              const Content = Outline.content;
+              return (
+                <Content
+                  engineConfig={config}
+                  engineEditor={editor}
+                  {...props}
+                />
+              );
+            },
+          },
+          panelProps: {
+            area: isInFloatArea ? 'leftFloatArea' : 'leftFixedArea',
+            keepVisibleWhileDragging: true,
+            ...config.get('defaultOutlinePaneProps'),
+          },
+        });
+        skeleton.add({
+          area: 'rightArea',
+          name: 'backupOutline',
+          type: 'Panel',
+          props: {
+            condition: () => {
+              return designer.dragon.dragging && !getTreeMaster(designer).hasVisibleTreeBoard();
+            },
+          },
+          content: () => (
+            <OutlineBackupPane
+              engineConfig={config}
+              engineEditor={editor}
+            />
+          ),
+        });
+      },
+    };
+  };
+
+  fun.pluginName = '___default_panel___';
+
+  return fun;
+};
+
+
+export default defaultPanelRegistry;

packages/engine/src/inner-plugins/setter-registry.ts

@@ -0,0 +1,17 @@
+import { ILowCodePluginContext } from '@alilc/lowcode-designer';
+
+// 注册默认的 setters
+export const setterRegistry = (ctx: ILowCodePluginContext) => {
+  return {
+    init() {
+      const { config } = ctx;
+      if (config.get('disableDefaultSetters')) return;
+      const builtinSetters = require('@alilc/lowcode-engine-ext')?.setters;
+      if (builtinSetters) {
+        ctx.setters.registerSetter(builtinSetters);
+      }
+    },
+  };
+};
+
+setterRegistry.pluginName = '___setter_registry___';

packages/ignitor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-ignitor",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "点火器，bootstrap lce project",
   "main": "lib/index.js",
   "private": true,

packages/plugin-designer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-plugin-designer",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "alibaba lowcode editor designer plugin",
   "files": [
     "es",
@@ -18,9 +18,9 @@
   ],
   "author": "xiayang.xy",
   "dependencies": {
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-core": "1.0.17",
+    "@alilc/lowcode-editor-core": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },

packages/plugin-designer/src/index.tsx

@@ -5,7 +5,9 @@ import { Asset } from '@alilc/lowcode-utils';
 import './index.scss';
 
 export interface PluginProps {
-  editor: Editor;
+  // editor?: Editor;
+  // engineConfig?: any;
+  engineEditor?: any;
 }
 
 interface DesignerPluginState {
@@ -46,7 +48,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
   }
 
   private async setupAssets() {
-    const editor = globalContext.get('editor');
+    const editor = this.props.engineEditor;
     try {
       const assets = await editor.onceGot('assets');
       const renderEnv = engineConfig.get('renderEnv') || editor.get('renderEnv');
@@ -85,7 +87,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
   }
 
   private handleDesignerMount = (designer: Designer): void => {
-    const editor = globalContext.get('editor');
+    const editor = this.props.engineEditor;
     editor.set('designer', designer);
     editor.emit('designer.ready', designer);
     editor.onGot('schema', (schema) => {
@@ -94,7 +96,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
   };
 
   render(): React.ReactNode {
-    const editor = globalContext.get('editor');
+    const editor = this.props.engineEditor;
     const {
       componentMetadatas,
       utilsMetadata,
@@ -119,6 +121,7 @@ export default class DesignerPlugin extends PureComponent<PluginProps, DesignerP
         onMount={this.handleDesignerMount}
         className="lowcode-plugin-designer"
         editor={editor}
+        name={editor.name}
         designer={editor.get('designer')}
         componentMetadatas={componentMetadatas}
         simulatorProps={{

packages/plugin-outline-pane/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-plugin-outline-pane",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Outline pane for Ali lowCode engine",
   "files": [
     "es",
@@ -13,10 +13,10 @@
   },
   "dependencies": {
     "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-core": "1.0.17",
+    "@alilc/lowcode-editor-core": "1.1.0-beta.1",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "react": "^16",
     "react-dom": "^16.7.0",

packages/plugin-outline-pane/src/views/backup-pane.tsx

@@ -5,11 +5,12 @@ import { OutlinePane } from './pane';
 
 export const Backup = Symbol.for('backup-outline');
 
-export class OutlineBackupPane extends PureComponent<PluginProps> {
+export class OutlineBackupPane extends PureComponent<any> {
   render() {
     return (
       <OutlinePane
-        editor={globalContext.get('editor')}
+        editor={this.props.engineEditor}
+        engineEditor={this.props.engineEditor}
         config={{
           name: Backup,
         }}

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

@@ -7,9 +7,15 @@ import './style.less';
 import { IEditor } from '@alilc/lowcode-types';
 import Filter from './filter';
 
+interface Props { config: any; editor: IEditor }
 @observer
-export class OutlinePane extends Component<{ config: any; editor: IEditor }> {
+export class OutlinePane extends Component<any> {
-  private main = new OutlineMain(globalContext.get('editor'), this.props.config.name || this.props.config.pluginKey);
+  private main;
+
+  constructor(props: Props) {
+    super(props);
+    this.main = new OutlineMain(this.props.engineEditor, this.props.config.name || this.props.config.pluginKey);
+  }
 
   componentWillUnmount() {
     this.main.purge();

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

@@ -16,7 +16,8 @@ import { IconLock, IconUnlock } from '../icons';
 
 
 function emitOutlineEvent(type: string, treeNode: TreeNode, rest?: Record<string, unknown>) {
-  const editor = globalContext.get(Editor);
+  const workSpace = globalContext.get('workSpace');
+  const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
   const node = treeNode?.node;
   const npm = node?.componentMeta?.npm;
   const selected =

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

@@ -67,7 +67,8 @@ export default class TreeView extends Component<{ tree: Tree }> {
       }
     } else {
       selection.select(id);
-      const editor = globalContext.get(Editor);
+      const workSpace = globalContext.get('workSpace');
+      const editor = workSpace.isActive ? workSpace.window.editor : globalContext.get('editor');
       const selectedNode = designer.currentSelection?.getNodes()?.[0];
       const npm = selectedNode?.componentMeta?.npm;
       const selected =

packages/rax-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-rax-renderer",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Rax renderer for Ali lowCode engine",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -30,8 +30,8 @@
     "build": "build-scripts build"
   },
   "dependencies": {
-    "@alilc/lowcode-renderer-core": "1.0.17",
+    "@alilc/lowcode-renderer-core": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "rax-find-dom-node": "^1.0.1"
   },
   "devDependencies": {

packages/rax-simulator-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-rax-simulator-renderer",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "rax simulator renderer for alibaba lowcode designer",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -13,10 +13,10 @@
     "build:umd": "build-scripts build --config build.umd.json"
   },
   "dependencies": {
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-rax-renderer": "1.0.17",
+    "@alilc/lowcode-rax-renderer": "1.1.0-beta.1",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "driver-universal": "^3.1.3",
     "history": "^5.0.0",

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

@@ -245,7 +245,6 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
   constructor() {
     this.dispose = host.connect(this, () => {
       // sync layout config
-      // debugger;
       this._layout = host.project.get('config').layout;
       // todo: split with others, not all should recompute
       if (this._libraryMap !== host.libraryMap || this._componentsMap !== host.designer.componentsMap) {

packages/react-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-react-renderer",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "react renderer for ali lowcode engine",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
   ],
   "dependencies": {
     "@alifd/next": "^1.21.16",
-    "@alilc/lowcode-renderer-core": "1.0.17"
+    "@alilc/lowcode-renderer-core": "1.1.0-beta.1"
   },
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",

packages/react-simulator-renderer/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-react-simulator-renderer",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "react simulator renderer for alibaba lowcode designer",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -17,10 +17,10 @@
     "test:cov": "build-scripts test --config build.test.json --jest-coverage"
   },
   "dependencies": {
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-react-renderer": "1.0.17",
+    "@alilc/lowcode-react-renderer": "1.1.0-beta.1",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "mobx": "^6.3.0",
     "mobx-react": "^7.2.0",

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

@@ -171,6 +171,7 @@ class Renderer extends Component<{
     this.schemaChangedSymbol = false;
 
     if (!container.autoRender || isRendererDetached()) return null;
+
     return (
       <LowCodeRenderer
         locale={locale}

packages/renderer-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-renderer-core",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "renderer core",
   "license": "MIT",
   "main": "lib/index.js",
@@ -16,8 +16,8 @@
   },
   "dependencies": {
     "@alilc/lowcode-datasource-engine": "^1.0.0",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
     "fetch-jsonp": "^1.1.3",
@@ -33,7 +33,7 @@
   "devDependencies": {
     "@alib/build-scripts": "^0.1.18",
     "@alifd/next": "^1.26.0",
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
     "@alilc/lowcode-test-mate": "^1.0.1",
     "@babel/plugin-transform-typescript": "^7.16.8",
     "@testing-library/react": "^11.2.2",

packages/shell/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-shell",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Shell Layer for AliLowCodeEngine",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -15,11 +15,11 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@alilc/lowcode-designer": "1.0.17",
+    "@alilc/lowcode-designer": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-core": "1.0.17",
+    "@alilc/lowcode-editor-core": "1.1.0-beta.1",
-    "@alilc/lowcode-editor-skeleton": "1.0.17",
+    "@alilc/lowcode-editor-skeleton": "1.1.0-beta.1",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
-    "@alilc/lowcode-utils": "1.0.17",
+    "@alilc/lowcode-utils": "1.1.0-beta.1",
     "classnames": "^2.2.6",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.5",

packages/shell/src/common.tsx

@@ -48,7 +48,7 @@ import {
   shallowIntl as innerShallowIntl,
   createIntl as innerCreateIntl,
   intl as innerIntl,
-  createSetterContent as innerCreateSetterContent,
+  // createSetterContent as innerCreateSetterContent,
   globalLocale as innerGlobalLocale,
   obx as innerObx,
   observable as innerObservable,
@@ -59,7 +59,6 @@ import {
 } from '@alilc/lowcode-editor-core';
 import { ReactNode } from 'react';
 
-
 class DesignerCabin implements IPublicCommonDesignerCabin {
   private readonly [editorSymbol]: Editor;
   /**
@@ -225,6 +224,11 @@ class Utils implements IPublicCommonUtils {
 }
 
 class EditorCabin {
+  private readonly [editorSymbol]: Editor;
+
+  constructor(editor: Editor) {
+    this[editorSymbol] = editor;
+  }
   /**
    * @deprecated
    */
@@ -263,9 +267,10 @@ class EditorCabin {
   /**
    * @deprecated
    */
-  createSetterContent(setter: any, props: Record<string, any>): ReactNode {
+  createSetterContent = (setter: any, props: Record<string, any>): ReactNode => {
-    return innerCreateSetterContent(setter, props);
+    const setters = this[editorSymbol].get('setters');
-  }
+    return setters.createSetterContent(setter, props);
+  };
 
   /**
    * @deprecated
@@ -327,7 +332,7 @@ export default class Common implements IPublicApiCommon {
   constructor(editor: Editor, skeleton: InnerSkeleton) {
     this.__designerCabin = new DesignerCabin(editor);
     this.__skeletonCabin = new SkeletonCabin(skeleton);
-    this.__editorCabin = new EditorCabin();
+    this.__editorCabin = new EditorCabin(editor);
     this.__utils = new Utils();
   }
 

packages/shell/src/component-meta.ts

@@ -106,6 +106,7 @@ export default class ComponentMeta implements IPublicModelComponentMeta {
     return this[componentMetaSymbol].getMetadata();
   }
 
+  isComponentMeta = true;
   /**
    * check if the current node could be placed in parent node
    * @param my

packages/shell/src/document-model.ts

@@ -33,7 +33,7 @@ import Canvas from './canvas';
 import ModalNodesManager from './modal-nodes-manager';
 import { documentSymbol, editorSymbol, nodeSymbol } from './symbols';
 
-const Events = {
+export const Events = {
   IMPORT_SCHEMA: 'shell.document.importSchema',
 };
 

packages/shell/src/dragon.ts

@@ -5,6 +5,7 @@ import {
 import { dragonSymbol } from './symbols';
 import LocateEvent from './locate-event';
 import DragObject from './drag-object';
+import { globalContext } from '@alilc/lowcode-editor-core';
 import {
   IPublicModelDragon,
   IPublicModelLocateEvent,
@@ -13,11 +14,26 @@ import {
   DragNodeDataObject,
 } from '@alilc/lowcode-types';
 
-export default class Dragon implements IPublicModelDragon {
+export const innerDragonSymbol = Symbol('innerDragonSymbol');
-  private readonly [dragonSymbol]: InnerDragon;
 
+
+export default class Dragon implements IPublicModelDragon {
   constructor(dragon: InnerDragon) {
-    this[dragonSymbol] = dragon;
+    this[innerDragonSymbol] = dragon;
+  }
+
+  private readonly [innerDragonSymbol]: InnerDragon;
+
+  get [dragonSymbol](): any {
+    const workSpace = globalContext.get('workSpace');
+    let editor = globalContext.get('editor');
+
+    if (workSpace.isActive) {
+      editor = workSpace.window.editor;
+    }
+
+    const designer = editor.get('designer');
+    return designer.dragon;
   }
 
   static create(dragon: InnerDragon | null): IPublicModelDragon | null {

packages/shell/src/event.ts

@@ -9,8 +9,11 @@ type EventOptions = {
   prefix: string;
 };
 
+const innerEditorSymbol = Symbol('editor');
+
 export default class Event implements IPublicApiEvent {
-  private readonly [editorSymbol]: InnerEditor;
+  private readonly [innerEditorSymbol]: InnerEditor;
+  // private readonly [editorSymbol]: InnerEditor;
   private readonly options: EventOptions;
 
   // TODO:
@@ -19,8 +22,20 @@ export default class Event implements IPublicApiEvent {
    */
   readonly names = [];
 
-  constructor(editor: InnerEditor, options: EventOptions) {
+  get [editorSymbol](): InnerEditor {
-    this[editorSymbol] = editor;
+    if (this.workspaceMode) {
+      return this[innerEditorSymbol];
+    }
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.editor;
+    }
+
+    return this[innerEditorSymbol];
+  }
+
+  constructor(editor: InnerEditor, options: EventOptions, public workspaceMode = false) {
+    this[innerEditorSymbol] = editor;
     this.options = options;
     if (!this.options.prefix) {
       logger.warn('prefix is required while initializing Event');

packages/shell/src/hotkey.ts

@@ -1,9 +1,29 @@
-import { hotkey } from '@alilc/lowcode-editor-core';
+import { globalContext, Hotkey as InnerHotkey } from '@alilc/lowcode-editor-core';
+import { hotkeySymbol } from './symbols';
 import { Disposable, HotkeyCallback, IPublicApiHotkey } from '@alilc/lowcode-types';
 
+const innerHotkeySymbol = Symbol('innerHotkey');
+
 export default class Hotkey implements IPublicApiHotkey {
-  get callbacks() {
+  private readonly [innerHotkeySymbol]: InnerHotkey;
-    return hotkey.callBacks;
+  get [hotkeySymbol](): InnerHotkey {
+    if (this.workspaceMode) {
+      return this[innerHotkeySymbol];
+    }
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.innerHotkey;
+    }
+
+    return this[innerHotkeySymbol];
+  }
+
+  constructor(hotkey: InnerHotkey, public name: string = 'unknown', public workspaceMode: boolean = false) {
+    this[innerHotkeySymbol] = hotkey;
+  }
+
+  get callbacks(): any {
+    return this[hotkeySymbol].callBacks;
   }
   /**
    * @deprecated
@@ -19,9 +39,9 @@ export default class Hotkey implements IPublicApiHotkey {
    * @returns
    */
   bind(combos: string[] | string, callback: HotkeyCallback, action?: string): Disposable {
-    hotkey.bind(combos, callback, action);
+    this[hotkeySymbol].bind(combos, callback, action);
     return () => {
-      hotkey.unbind(combos, callback, action);
+      this[hotkeySymbol].unbind(combos, callback, action);
     };
   }
 }

packages/shell/src/index.ts

@@ -15,6 +15,7 @@ import Dragon from './dragon';
 import SettingPropEntry from './setting-prop-entry';
 import SettingTopEntry from './setting-top-entry';
 import Common from './common';
+import Plugins from './plugins';
 
 export * from './symbols';
 
@@ -44,4 +45,5 @@ export {
   Dragon,
   Common,
   getEvent,
+  Plugins,
 };

packages/shell/src/material.ts

@@ -1,4 +1,4 @@
-import { Editor } from '@alilc/lowcode-editor-core';
+import { Editor, globalContext } from '@alilc/lowcode-editor-core';
 import {
   Designer,
   registerMetadataTransducer,
@@ -19,13 +19,31 @@ import {
 import { editorSymbol, designerSymbol } from './symbols';
 import ComponentMeta from './component-meta';
 
+const innerEditorSymbol = Symbol('editor');
 export default class Material implements IPublicApiMaterial {
-  private readonly [editorSymbol]: Editor;
+  // private readonly [editorSymbol]: Editor;
-  private readonly [designerSymbol]: Designer;
+  private readonly [innerEditorSymbol]: Editor;
+  // private readonly [designerSymbol]: Designer;
 
-  constructor(editor: Editor) {
+  get [editorSymbol](): Editor {
-    this[editorSymbol] = editor;
+    if (this.workspaceMode) {
-    this[designerSymbol] = editor.get('designer')!;
+      return this[innerEditorSymbol];
+    }
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.editor;
+    }
+
+    return this[innerEditorSymbol];
+  }
+
+  get [designerSymbol](): Designer {
+    return this[editorSymbol].get('designer')!;
+  }
+
+  constructor(editor: Editor, public workspaceMode: boolean = false, public name: string = 'unknown') {
+    this[innerEditorSymbol] = editor;
+    // this[designerSymbol] = editor.get('designer')!;
   }
 
   /**
@@ -52,6 +70,10 @@ export default class Material implements IPublicApiMaterial {
     return this[editorSymbol].get('assets');
   }
 
+  async asyncGetAssets() {
+    return await this[editorSymbol].get('assets');
+  }
+
   /**
    * 加载增量的「资产包」结构，该增量包会与原有的合并
    * @param incrementalAssets

packages/shell/src/node-children.ts

@@ -10,11 +10,11 @@ export default class NodeChildren implements IPublicModelNodeChildren {
     this[nodeChildrenSymbol] = nodeChildren;
   }
 
-  static create(nodeChldren: InnerNodeChildren | null): IPublicModelNodeChildren | null {
+  static create(nodeChildren: InnerNodeChildren | null): IPublicModelNodeChildren | null {
-    if (!nodeChldren) {
+    if (!nodeChildren) {
       return null;
     }
-    return new NodeChildren(nodeChldren);
+    return new NodeChildren(nodeChildren);
   }
 
   /**

packages/shell/src/node.ts

@@ -527,4 +527,8 @@ export default class Node implements IPublicModelNode {
   internalToShellNode() {
     return this;
   }
+
+  canPerformAction(actionName: string): boolean {
+    return this[nodeSymbol].canPerformAction(actionName);
+  }
 }

packages/shell/src/plugins.ts

@@ -0,0 +1,60 @@
+import {
+  LowCodePluginManager,
+} from '@alilc/lowcode-designer';
+import { globalContext } from '@alilc/lowcode-editor-core';
+import {
+  IPublicApiPlugins,
+} from '@alilc/lowcode-types';
+import { pluginsSymbol } from './symbols';
+
+const innerPluginsSymbol = Symbol('plugin');
+export default class Plugins implements IPublicApiPlugins {
+  private readonly [innerPluginsSymbol]: LowCodePluginManager;
+  get [pluginsSymbol](): LowCodePluginManager {
+    if (this.workspaceMode) {
+      return this[innerPluginsSymbol];
+    }
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.innerPlugins;
+    }
+
+    return this[innerPluginsSymbol];
+  }
+
+  constructor(plugins: LowCodePluginManager, public workspaceMode: boolean = false) {
+    this[innerPluginsSymbol] = plugins;
+  }
+
+  async register(
+    pluginConfigCreator: (ctx: any, options: any) => any,
+    options?: any,
+    registerOptions?: any,
+  ): Promise<void> {
+    await this[pluginsSymbol].register(pluginConfigCreator, options, registerOptions);
+  }
+
+  async init(registerOptions: any) {
+    await this[pluginsSymbol].init(registerOptions);
+  }
+
+  async getPluginPreference(pluginName: string) {
+    await this[pluginsSymbol].getPluginPreference(pluginName);
+  }
+
+  toProxy() {
+    return new Proxy(this, {
+      get(target, prop, receiver) {
+        const _target = target[pluginsSymbol];
+        if (_target.pluginsMap.has(prop as string)) {
+          // 禁用态的插件，直接返回 undefined
+          if (_target.pluginsMap.get(prop as string)!.disabled) {
+            return undefined;
+          }
+          return _target.pluginsMap.get(prop as string)?.toProxy();
+        }
+        return Reflect.get(target, prop, receiver);
+      },
+    });
+  }
+}

packages/shell/src/project.ts

@@ -3,6 +3,7 @@ import {
   Project as InnerProject,
   TransformStage,
 } from '@alilc/lowcode-designer';
+import { globalContext } from '@alilc/lowcode-editor-core';
 import {
   RootSchema,
   ProjectSchema,
@@ -12,18 +13,32 @@ import {
   IPublicModelDocumentModel,
   PropsTransducer,
 } from '@alilc/lowcode-types';
+
+
 import DocumentModel from './document-model';
 import SimulatorHost from './simulator-host';
 import { editorSymbol, projectSymbol, simulatorHostSymbol, simulatorRendererSymbol, documentSymbol } from './symbols';
 
+const innerProjectSymbol = Symbol('project');
 export default class Project implements IPublicApiProject {
-  private readonly [projectSymbol]: InnerProject;
   private readonly [editorSymbol]: IEditor;
+  private readonly [innerProjectSymbol]: InnerProject;
   private [simulatorHostSymbol]: BuiltinSimulatorHost;
   private [simulatorRendererSymbol]: any;
+  get [projectSymbol]() {
+    if (this.workspaceMode) {
+      return this[innerProjectSymbol];
+    }
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.innerProject;
+    }
 
-  constructor(project: InnerProject) {
+    return this[innerProjectSymbol];
-    this[projectSymbol] = project;
+  }
+
+  constructor(project: InnerProject, public workspaceMode: boolean = false) {
+    this[innerProjectSymbol] = project;
     this[editorSymbol] = project?.designer.editor;
   }
 
@@ -122,6 +137,7 @@ export default class Project implements IPublicApiProject {
    */
   importSchema(schema?: ProjectSchema): void {
     this[projectSymbol].load(schema, true);
+    // this[editorSymbol].emit(Events.IMPORT_SCHEMA, schema);
   }
 
   /**

packages/shell/src/selection.ts

@@ -92,7 +92,7 @@ export default class Selection implements IPublicModelSelection {
    *  getTopNodes() will return [A, B], subA will be removed
    * @returns
    */
-  getTopNodes(): Array<IPublicModelNode | null> {
+  getTopNodes(includeRoot: boolean = false): Array<IPublicModelNode | null> {
-    return this[selectionSymbol].getTopNodes().map((node: InnerNode) => Node.create(node));
+    return this[selectionSymbol].getTopNodes(includeRoot).map((node: InnerNode) => Node.create(node));
   }
 }

packages/shell/src/setters.ts

@@ -1,15 +1,38 @@
-import { getSetter, registerSetter, getSettersMap } from '@alilc/lowcode-editor-core';
 import { CustomView, IPublicApiSetters, RegisteredSetter } from '@alilc/lowcode-types';
+import { Setters as InnerSetters, globalContext } from '@alilc/lowcode-editor-core';
+import { ReactNode } from 'react';
+
+const innerSettersSymbol = Symbol('setters');
+const settersSymbol = Symbol('setters');
 
 export default class Setters implements IPublicApiSetters {
+  readonly [innerSettersSymbol]: InnerSetters;
+
+  get [settersSymbol](): InnerSetters {
+    if (this.workspaceMode) {
+      return this[innerSettersSymbol];
+    }
+
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.innerSetters;
+    }
+
+    return this[innerSettersSymbol];
+  }
+
+  constructor(innerSetters: InnerSetters, readonly workspaceMode = false) {
+    this[innerSettersSymbol] = innerSetters;
+  }
+
   /**
    * 获取指定 setter
    * @param type
    * @returns
    */
-  getSetter(type: string): RegisteredSetter | null {
+  getSetter = (type: string) => {
-    return getSetter(type);
+    return this[settersSymbol].getSetter(type);
-  }
+  };
 
   /**
    * 获取已注册的所有 settersMap
@@ -18,7 +41,7 @@ export default class Setters implements IPublicApiSetters {
   getSettersMap(): Map<string, RegisteredSetter & {
     type: string;
   }> {
-    return getSettersMap();
+    return this[settersSymbol].getSettersMap();
   }
 
   /**
@@ -27,10 +50,14 @@ export default class Setters implements IPublicApiSetters {
    * @param setter
    * @returns
    */
-  registerSetter(
+  registerSetter = (
     typeOrMaps: string | { [key: string]: CustomView | RegisteredSetter },
     setter?: CustomView | RegisteredSetter | undefined,
-  ) {
+  ) => {
-    return registerSetter(typeOrMaps, setter);
+    return this[settersSymbol].registerSetter(typeOrMaps, setter);
-  }
+  };
+
+  createSetterContent = (setter: any, props: Record<string, any>): ReactNode => {
+    return this[settersSymbol].createSetterContent(setter, props);
+  };
 }

packages/shell/src/skeleton.ts

@@ -1,3 +1,4 @@
+import { globalContext } from '@alilc/lowcode-editor-core';
 import {
   Skeleton as InnerSkeleton,
   SkeletonEvents,
@@ -5,11 +6,24 @@ import {
 import { skeletonSymbol } from './symbols';
 import { IPublicApiSkeleton, IWidgetBaseConfig, IWidgetConfigArea } from '@alilc/lowcode-types';
 
+const innerSkeletonSymbol = Symbol('skeleton');
 export default class Skeleton implements IPublicApiSkeleton {
-  private readonly [skeletonSymbol]: InnerSkeleton;
+  private readonly [innerSkeletonSymbol]: InnerSkeleton;
 
-  constructor(skeleton: InnerSkeleton) {
+  get [skeletonSymbol]() {
-    this[skeletonSymbol] = skeleton;
+    if (this.workspaceMode) {
+      return this[innerSkeletonSymbol];
+    }
+    const workSpace = globalContext.get('workSpace');
+    if (workSpace.isActive) {
+      return workSpace.window.innerSkeleton;
+    }
+
+    return this[innerSkeletonSymbol];
+  }
+
+  constructor(skeleton: InnerSkeleton, readonly workspaceMode: boolean = false) {
+    this[innerSkeletonSymbol] = skeleton;
   }
 
   /**

packages/shell/src/symbols.ts

@@ -25,3 +25,5 @@ export const simulatorRendererSymbol = Symbol('simulatorRenderer');
 export const dragObjectSymbol = Symbol('dragObject');
 export const locateEventSymbol = Symbol('locateEvent');
 export const designerCabinSymbol = Symbol('designerCabin');
+export const hotkeySymbol = Symbol('hotkey');
+export const pluginsSymbol = Symbol('plugins');

packages/types/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-types",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Types for Ali lowCode engine",
   "files": [
     "es",

packages/types/src/engine-config.ts

@@ -132,6 +132,11 @@ export interface EngineOptions {
    * 配置指定节点为根组件
    */
   focusNodeSelector?: (rootNode: Node) => Node;
+
+  /**
+   * 开启应用级设计模式
+   */
+  enableWorkspaceMode?: boolean;
 }
 
 export interface IEngineConfig {

packages/types/src/npm.ts

@@ -1,4 +1,5 @@
 import { EitherOr } from './utils';
+
 /**
  * npm 源引入完整描述对象
  */

packages/types/src/setting-target.ts

@@ -21,6 +21,8 @@ export interface SettingTarget {
    */
   readonly editor: IEditor;
 
+  readonly setters: any;
+
   /**
    * 访问路径
    */

packages/types/src/shell/api/index.ts

@@ -6,3 +6,4 @@ export * from './project';
 export * from './setters';
 export * from './simulator-host';
 export * from './skeleton';
+export * from './plugins';

packages/types/src/shell/api/plugins.ts

@@ -0,0 +1,7 @@
+export interface IPublicApiPlugins {
+  register(
+    pluginConfigCreator: (ctx: any, options: any) => any,
+    options?: any,
+    registerOptions?: any,
+  ): Promise<void>;
+}

packages/types/src/shell/model/document-model.ts

@@ -5,6 +5,8 @@ import { IPublicApiProject } from '../api';
 import { PropChangeOptions } from '../index';
 import { IPublicModelModalNodesManager } from './modal-nodes-manager';
 import { IPublicModelNode } from './node';
+import { IPublicModelSelection } from './selection';
+import { IPublicModelHistory } from './history';
 
 
 export interface IPublicModelDocumentModel {
@@ -16,6 +18,10 @@ export interface IPublicModelDocumentModel {
 
   set id(id);
 
+  selection: IPublicModelSelection;
+
+  history: IPublicModelHistory;
+
   /**
    * 获取当前文档所属的 project
    * @returns

packages/types/src/shell/model/node.ts

@@ -12,7 +12,6 @@ import { IPublicModelNodeChildren } from './node-children';
 import { IPublicModelComponentMeta } from './component-meta';
 
 export interface IPublicModelNode {
-
   /**
    * 节点 id
    */
@@ -313,4 +312,11 @@ export interface IPublicModelNode {
    * @returns Boolean
    */
   get isRGLContainer();
+
+  /**
+   * 是否可执行某 action
+   * @param actionName action 名字
+   * @returns boolean
+   */
+  canPerformAction(actionName: string): boolean;
 }

packages/types/src/shell/model/selection.ts

@@ -61,5 +61,5 @@ export interface IPublicModelSelection {
    *  getTopNodes() will return [A, B], subA will be removed
    * @returns
    */
-  getTopNodes(): Array<IPublicModelNode | null>;
+  getTopNodes(includeRoot?: boolean): Array<IPublicModelNode | null>;
 }

packages/utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alilc/lowcode-utils",
-  "version": "1.0.17",
+  "version": "1.1.0-beta.1",
   "description": "Utils for Ali lowCode engine",
   "files": [
     "lib",
@@ -14,7 +14,7 @@
   },
   "dependencies": {
     "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-types": "1.0.17",
+    "@alilc/lowcode-types": "1.1.0-beta.1",
     "lodash": "^4.17.21",
     "mobx": "^6.3.0",
     "react": "^16",

packages/utils/src/asset.ts

@@ -53,10 +53,9 @@ export function megreAssets(assets: AssetsJson, incrementalAssets: AssetsJson):
   }
 
   if (incrementalAssets.components) {
-    assets.components = [...assets.components, ...incrementalAssets.components];
+    assets.components = [...(assets.components || []), ...incrementalAssets.components];
   }
 
-
   megreAssetsComponentList(assets, incrementalAssets, 'componentList');
   megreAssetsComponentList(assets, incrementalAssets, 'bizComponentList');
 

packages/workspace/build.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    "build-plugin-component"
+  ]
+}

packages/workspace/build.test.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    "build-plugin-component",
+    "@alilc/lowcode-test-mate/plugin/index.ts"
+  ]
+}

packages/workspace/jest.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'json'],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+  ],
+};

packages/workspace/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@alilc/lowcode-workspace",
+  "version": "1.1.0-beta.1",
+  "description": "Shell Layer for AliLowCodeEngine",
+  "main": "lib/index.js",
+  "private": true,
+  "module": "es/index.js",
+  "files": [
+    "lib",
+    "es"
+  ],
+  "scripts": {
+    "build": "build-scripts build --skip-demo",
+    "test": "build-scripts test --config build.test.json",
+    "test:cov": "build-scripts test --config build.test.json --jest-coverage"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@alilc/lowcode-designer": "1.0.15",
+    "@alilc/lowcode-editor-core": "1.0.15",
+    "@alilc/lowcode-editor-skeleton": "1.0.15",
+    "@alilc/lowcode-types": "1.0.15",
+    "@alilc/lowcode-utils": "1.0.15",
+    "classnames": "^2.2.6",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.5",
+    "react": "^16",
+    "react-dom": "^16.7.0",
+    "zen-logger": "^1.1.0"
+  },
+  "devDependencies": {
+    "@alib/build-scripts": "^0.1.29",
+    "@alilc/lowcode-test-mate": "^1.0.1",
+    "@testing-library/react": "^11.2.2",
+    "@types/classnames": "^2.2.7",
+    "@types/jest": "^26.0.16",
+    "@types/lodash": "^4.14.165",
+    "@types/medium-editor": "^5.0.3",
+    "@types/node": "^13.7.1",
+    "@types/react": "^16",
+    "@types/react-dom": "^16",
+    "babel-jest": "^26.5.2",
+    "build-plugin-component": "^1.0.0",
+    "build-scripts-config": "^3.0.3",
+    "jest": "^26.6.3",
+    "lodash": "^4.17.20",
+    "moment": "^2.29.1",
+    "typescript": "^4.0.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "resolutions": {
+    "@builder/babel-preset-ice": "1.0.1"
+  },
+  "repository": {
+    "type": "http",
+    "url": "https://github.com/alibaba/lowcode-engine/tree/main/packages/shell"
+  },
+  "gitHead": "2669f179e6f899d395ce1942d0fe04f9c5ed48a6"
+}

packages/workspace/src/base-context.ts

@@ -0,0 +1,133 @@
+import { Editor, engineConfig, Setters as InnerSetters, Hotkey as InnerHotkey } from '@alilc/lowcode-editor-core';
+import {
+  Designer,
+  ILowCodePluginContextApiAssembler,
+  LowCodePluginManager,
+  ILowCodePluginContextPrivate,
+  Project as InnerProject,
+} from '@alilc/lowcode-designer';
+import {
+  Skeleton as InnerSkeleton,
+} from '@alilc/lowcode-editor-skeleton';
+import {
+  // EditorWindow,
+  WorkSpace,
+} from '@alilc/lowcode-workspace';
+
+import {
+  Hotkey,
+  Plugins,
+  Project,
+  Skeleton,
+  Setters,
+  Material,
+  Event,
+  Common,
+} from '@alilc/lowcode-shell';
+import { getLogger } from '@alilc/lowcode-utils';
+import { setterRegistry } from 'engine/src/inner-plugins/setter-registry';
+import { componentMetaParser } from 'engine/src/inner-plugins/component-meta-parser';
+import defaultPanelRegistry from 'engine/src/inner-plugins/default-panel-registry';
+import { builtinHotkey } from 'engine/src/inner-plugins/builtin-hotkey';
+import { EditorWindow } from './editor-window/context';
+import { shellModelFactory } from './shell-model-factory';
+
+export class BasicContext {
+  skeleton: Skeleton;
+  plugins: Plugins;
+  project: Project;
+  setters: Setters;
+  material: Material;
+  config;
+  event;
+  logger;
+  hotkey: Hotkey;
+  innerProject: InnerProject;
+  editor: Editor;
+  designer: Designer;
+  registerInnerPlugins: () => Promise<void>;
+  innerSetters: InnerSetters;
+  innerSkeleton: any;
+  innerHotkey: InnerHotkey;
+  innerPlugins: LowCodePluginManager;
+
+  constructor(workSpace: WorkSpace, name: string, public editorWindow?: EditorWindow) {
+    const editor = new Editor(name, true);
+
+    const innerSkeleton = new InnerSkeleton(editor, name);
+    editor.set('skeleton' as any, innerSkeleton);
+
+    const designer: Designer = new Designer({
+      editor,
+      name,
+      shellModelFactory,
+    });
+    editor.set('designer' as any, designer);
+
+    const { project: innerProject } = designer;
+    const innerHotkey = new InnerHotkey(name);
+    const hotkey = new Hotkey(innerHotkey, name, true);
+    const innerSetters = new InnerSetters(name);
+    const setters = new Setters(innerSetters, true);
+    const material = new Material(editor, true, name);
+    const project = new Project(innerProject, true);
+    const config = engineConfig;
+    const event = new Event(editor, { prefix: 'common' });
+    const logger = getLogger({ level: 'warn', bizName: 'common' });
+    const skeleton = new Skeleton(innerSkeleton, true);
+    editor.set('setters', setters);
+    editor.set('project', project);
+    editor.set('material', material);
+    editor.set('hotkey', hotkey);
+    editor.set('innerHotkey', innerHotkey);
+    this.innerSetters = innerSetters;
+    this.innerSkeleton = innerSkeleton;
+    this.skeleton = skeleton;
+    this.innerProject = innerProject;
+    this.project = project;
+    this.setters = setters;
+    this.material = material;
+    this.config = config;
+    this.event = event;
+    this.logger = logger;
+    this.hotkey = hotkey;
+    this.innerHotkey = innerHotkey;
+    this.editor = editor;
+    this.designer = designer;
+    const common = new Common(editor, innerSkeleton);
+    let plugins: any;
+
+    const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
+      assembleApis: (context: ILowCodePluginContextPrivate) => {
+        context.hotkey = hotkey;
+        context.project = project;
+        context.skeleton = skeleton;
+        context.setters = setters;
+        context.material = material;
+        context.event = event;
+        context.config = config;
+        context.common = common;
+        context.plugins = plugins;
+      },
+    };
+
+    const innerPlugins = new LowCodePluginManager(pluginContextApiAssembler, name);
+    this.innerPlugins = innerPlugins;
+    plugins = new Plugins(innerPlugins, true).toProxy();
+    editor.set('plugins' as any, plugins);
+    editor.set('innerPlugins' as any, innerPlugins);
+    this.plugins = plugins;
+
+    // 注册一批内置插件
+    this.registerInnerPlugins = async function registerPlugins() {
+      await plugins.register(componentMetaParser(designer));
+      await plugins.register(setterRegistry);
+      await plugins.register(defaultPanelRegistry(editor, designer));
+      await plugins.register(builtinHotkey);
+    };
+  }
+
+  // get project() {
+  //   return this.editorWindow ? this.editorWindow.project : this._project;
+  // }
+}

packages/workspace/src/context.ts

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+import { Skeleton } from './skeleton';
+
+export const SkeletonContext = createContext<Skeleton>({} as any);

packages/workspace/src/editor-view/context.ts

@@ -0,0 +1,36 @@
+import { makeObservable, obx, runInAction } from '@alilc/lowcode-editor-core';
+import { EditorViewOptions, EditorWindow } from '@alilc/lowcode-workspace';
+import { flow } from 'mobx';
+import { BasicContext } from '../base-context';
+
+export class Context extends BasicContext {
+  name = 'editor-view';
+
+  constructor(public workspace: any, public editorWindow: EditorWindow, public editorView: EditorViewOptions) {
+    super(workspace, editorView.name, editorWindow);
+    this.name = editorView.name;
+    makeObservable(this);
+  }
+
+  @obx _activate = false;
+
+  setActivate = (_activate: boolean) => {
+    this._activate = _activate;
+    this.innerHotkey.activate(this._activate);
+  };
+
+  get active() {
+    return this._activate;
+  }
+
+  @obx isInit: boolean = false;
+
+  init = flow(function* (this: any) {
+    yield this.registerInnerPlugins();
+    yield this.editorView?.init(this.innerPlugins._getLowCodePluginContext({
+      pluginName: 'any',
+    }));
+    yield this.innerPlugins.init();
+    this.isInit = true;
+  });
+}

packages/workspace/src/editor-view/view.tsx

@@ -0,0 +1,39 @@
+import { skeletonSymbol } from '@alilc/lowcode-shell';
+import { observer } from '@alilc/lowcode-editor-core';
+import {
+  Workbench,
+} from '@alilc/lowcode-editor-skeleton';
+import { Component } from 'react';
+import { Context } from './context';
+
+export * from '../base-context';
+
+@observer
+export class EditorView extends Component<any, any> {
+  // 因为 document 数据在不同视图下使用的是同一份，所以这里通过 constructor 传入
+  constructor(props: any) {
+    super(props);
+    // this.ctx = new Context(props.editorView);
+  }
+
+  // ctx: Context;
+
+  render() {
+    const { active } = this.props;
+    const editorView = this.props.editorView;
+    const skeleton = editorView.innerSkeleton;
+    if (!editorView.isInit) {
+      return null;
+    }
+
+    return (
+      <>
+        <Workbench
+          skeleton={skeleton}
+          className={active ? 'active engine-editor-view' : 'engine-editor-view'}
+          topAreaItemClassName="engine-actionitem"
+        />
+      </>
+    );
+  }
+}

packages/workspace/src/editor-window.ts

@@ -0,0 +1,16 @@
+import { makeObservable, obx } from '@alilc/lowcode-editor-core';
+import { Resource } from './resource';
+
+export class EditorWindow {
+  constructor(public resource: Resource) {
+    // debugger
+    makeObservable(this);
+    this.editorView = resource.getEditorView(this.resource.defaultViewType);
+  }
+
+  @obx editorView;
+
+  changeViewType(name: string) {
+    this.editorView = this.resource.getEditorView(name);
+  }
+}

packages/workspace/src/editor-window/context.ts

@@ -0,0 +1,103 @@
+import { computed, makeObservable, obx } from '@alilc/lowcode-editor-core';
+import { Context } from '../editor-view/context';
+import { WorkSpace } from '..';
+import { Resource } from '../resource';
+
+export class EditorWindow {
+  constructor(public resource: Resource, public workspace: WorkSpace) {
+    makeObservable(this);
+    this.init();
+  }
+
+  async importSchema(schema: any) {
+    const newSchema = await this.resource.import(schema);
+
+    Object.keys(newSchema).forEach(key => {
+      const view = this.editorViews.get(key);
+      view?.project.importSchema(newSchema[key]);
+    });
+  }
+
+  async init() {
+    await this.initViewTypes();
+    await this.execViewTypesInit();
+    this.setDefaultViewType();
+  }
+
+  initViewTypes = async () => {
+    const editorViews = this.resource.editorViews;
+    for (let i = 0; i < editorViews.length; i++) {
+      const name = editorViews[i].name;
+      await this.initViewType(name);
+      if (!this.editorView) {
+        this.changeViewType(name);
+      }
+    }
+  };
+
+  execViewTypesInit = async () => {
+    const editorViews = this.resource.editorViews;
+    for (let i = 0; i < editorViews.length; i++) {
+      const name = editorViews[i].name;
+      this.changeViewType(name);
+      await this.editorViews.get(name)?.init();
+    }
+  };
+
+  setDefaultViewType = () => {
+    this.changeViewType(this.resource.defaultViewType);
+  };
+
+  @obx.ref editorView: Context;
+
+  @obx editorViews: Map<string, Context> = new Map<string, Context>();
+
+  initViewType = async (name: string) => {
+    const viewInfo = this.resource.getEditorView(name);
+    if (this.editorViews.get(name)) {
+      return;
+    }
+    const editorView = new Context(this.workspace, this, viewInfo as any);
+    // await editorView.init();
+    this.editorViews.set(name, editorView);
+  };
+
+  changeViewType = (name: string) => {
+    this.editorView?.setActivate(false);
+    this.editorView = this.editorViews.get(name)!;
+
+    this.editorView.setActivate(true);
+  };
+
+  get project() {
+    return this.editorView?.project;
+  }
+
+  get innerProject() {
+    return this.editorView?.innerProject;
+  }
+
+  get innerSkeleton() {
+    return this.editorView?.innerSkeleton;
+  }
+
+  get innerSetters() {
+    return this.editorView?.innerSetters;
+  }
+
+  get innerHotkey() {
+    return this.editorView?.innerHotkey;
+  }
+
+  get editor() {
+    return this.editorView?.editor;
+  }
+
+  get designer() {
+    return this.editorView?.designer;
+  }
+
+  get innerPlugins() {
+    return this.editorView?.innerPlugins;
+  }
+}

packages/workspace/src/editor-window/view.tsx

@@ -0,0 +1,45 @@
+import { Component } from 'react';
+import { EditorView } from '../editor-view/view';
+import { observer } from '@alilc/lowcode-editor-core';
+import { EditorWindow } from './context';
+
+@observer
+export class EditorWindowView extends Component<{
+  editorWindow: EditorWindow;
+}, any> {
+  constructor(props: any) {
+    super(props);
+  }
+
+  render() {
+    const { resource, editorView, editorViews } = this.props.editorWindow;
+    // const editorViews = Array.from(editorViews.values())
+    if (!editorView) {
+      return null;
+    }
+    return (
+      <div className="workspace-engine-main">
+        {/* <EditorView
+          resource={resource}
+          key={editorView.name}
+          active={editorView.active}
+          editorView={editorView}
+          defaultViewType
+        /> */}
+        {
+          Array.from(editorViews.values()).map((editorView: any) => {
+            return (
+              <EditorView
+                resource={resource}
+                key={editorView.name}
+                active={editorView.active}
+                editorView={editorView}
+                defaultViewType
+              />
+            );
+          })
+        }
+      </div>
+    );
+  }
+}

packages/workspace/src/index.ts

@@ -0,0 +1,77 @@
+import { Editor } from '@alilc/lowcode-editor-core';
+import {
+  Skeleton as InnerSkeleton,
+} from '@alilc/lowcode-editor-skeleton';
+import { EditorWindow } from './editor-window/context';
+import { Resource } from './resource';
+export { Resource } from './resource';
+export * from './editor-window/context';
+export * from './layouts/workbench';
+
+export class WorkSpace {
+  constructor() {
+    this.editor = new Editor();
+    this.skeleton = new InnerSkeleton(this.editor);
+    if (this.defaultResource) {
+      this.window = new EditorWindow(this.defaultResource, this);
+    }
+  }
+
+  private _isActive = false;
+
+  get isActive() {
+    return this._isActive;
+  }
+
+  setActive(value: boolean) {
+    this._isActive = value;
+  }
+
+  editorWindows: [];
+
+  window: EditorWindow;
+
+  private resources: Map<string, Resource> = new Map();
+
+  registerResourceType(resourceName: string, resourceType: 'editor' | 'webview', options: ResourceOptions): void {
+    if (resourceType === 'editor') {
+      const resource = new Resource(options);
+      this.resources.set(resourceName, resource);
+
+      if (!this.window) {
+        this.window = new EditorWindow(this.defaultResource, this);
+      }
+    }
+  }
+
+  get defaultResource() {
+    if (this.resources.size === 1) {
+      return this.resources.values().next().value;
+    }
+
+    return null;
+  }
+
+  removeResourceType(resourceName: string) {
+    if (this.resources.has(resourceName)) {
+      this.resources.delete(resourceName);
+    }
+  }
+
+  openEditorWindow() {}
+}
+
+export interface ResourceOptions {
+  description: string;
+  defaultViewType?: string;
+  editorViews?: EditorViewOptions[];
+  init: (ctx: any) => Promise<void>;
+  dispose: (ctx: any) => Promise<void>;
+  import: (ctx: any) => Promise<any>;
+}
+
+export interface EditorViewOptions {
+  name: string;
+  init: (ctx: any) => Promise<void>;
+  save: (ctx: any) => Promise<void>;
+}