feat(shell): add editor-view model

alibaba · Apr 23, 2023 · d35f735 · d35f735
1 parent c50a082
commit d35f735
Show file tree

Hide file tree

Showing 33 changed files with 395 additions and 186 deletions.
diff --git a/docs/docs/api/model/editor-view.md b/docs/docs/api/model/editor-view.md
@@ -0,0 +1,21 @@
+---
+title: EditorView
+sidebar_position: 12
+---
+
+> **[@experimental](./#experimental)**<br/>
+> **@types** [IPublicModelEditorView](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/editor-view.ts)<br/>
+> **@since** v1.1.7
+
+窗口编辑视图
+
+## 类型定义
+
+```
+import { IPublicModelPluginContext } from "./plugin-context";
+
+export interface IPublicModelEditorView extends IPublicModelPluginContext {};
+
+```
+
+相关类型定义: [IPublicModelPluginContext](https://github.com/alibaba/lowcode-engine/blob/main/packages/types/src/shell/model/plugin-context.ts)
diff --git a/docs/docs/api/model/window.md b/docs/docs/api/model/window.md
@@ -38,6 +38,22 @@ sidebar_position: 12
 
 关联模型 [IPublicModelResource](./resource)
 
+### currentEditorView
+窗口当前视图
+
+`@type {IPublicModelEditorView}`
+
+关联模型 [IPublicModelEditorView](./editor-view)
+
+### editorViews
+
+窗口所有视图
+
+`@type {IPublicModelEditorView[]}`
+
+关联模型 [IPublicModelEditorView](./editor-view)
+
+
 ## 方法
 
 ### importSchema

diff --git a/packages/designer/src/plugin/plugin-types.ts b/packages/designer/src/plugin/plugin-types.ts
@@ -17,6 +17,7 @@ import {
   IPublicTypePluginMeta,
   IPublicTypePluginRegisterOptions,
   IPublicModelWindow,
+  IPublicEnumPluginRegisterLevel,
 } from '@alilc/lowcode-types';
 import PluginContext from './plugin-context';
 
@@ -58,6 +59,7 @@ export interface ILowCodePluginContextPrivate {
   set canvas(canvas: IPublicApiCanvas);
   set workspace(workspace: IPublicApiWorkspace);
   set editorWindow(window: IPublicModelWindow);
+  set registerLevel(level: IPublicEnumPluginRegisterLevel);
 }
 export interface ILowCodePluginContextApiAssembler {
   assembleApis(

diff --git a/packages/engine/src/engine-core.ts b/packages/engine/src/engine-core.ts
@@ -18,6 +18,7 @@ import {
   IPublicTypeDisposable,
   IPublicApiPlugins,
   IPublicApiWorkspace,
+  IPublicEnumPluginRegisterLevel,
 } from '@alilc/lowcode-types';
 import {
   Designer,
@@ -138,6 +139,7 @@ const pluginContextApiAssembler: ILowCodePluginContextApiAssembler = {
     context.plugins = plugins;
     context.logger = new Logger({ level: 'warn', bizName: `plugin:${pluginName}` });
     context.workspace = workspace;
+    context.registerLevel = IPublicEnumPluginRegisterLevel.Default;
   },
 };
 

diff --git a/packages/plugin-outline-pane/package.json b/packages/plugin-outline-pane/package.json
@@ -13,8 +13,6 @@
   },
   "dependencies": {
     "@alifd/next": "^1.19.16",
-    "@alilc/lowcode-designer": "1.1.6",
-    "@alilc/lowcode-editor-core": "1.1.6",
     "@alilc/lowcode-types": "1.1.6",
     "@alilc/lowcode-utils": "1.1.6",
     "classnames": "^2.2.6",

diff --git a/packages/plugin-outline-pane/src/controllers/pane-controller.ts b/packages/plugin-outline-pane/src/controllers/pane-controller.ts
@@ -16,16 +16,15 @@ import {
   IPublicModelDropLocation,
   IPublicModelScroller,
   IPublicModelScrollTarget,
-  IPublicModelPluginContext,
   IPublicModelLocateEvent,
 } from '@alilc/lowcode-types';
 import TreeNode from './tree-node';
 import { IndentTrack } from '../helper/indent-track';
 import DwellTimer from '../helper/dwell-timer';
-import { ITreeBoard, TreeMaster } from './tree-master';
+import { IOutlinePanelPluginContext, ITreeBoard, TreeMaster } from './tree-master';
 
 export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTypeScrollable {
-  private pluginContext: IPublicModelPluginContext;
+  private pluginContext: IOutlinePanelPluginContext;
 
   private treeMaster?: TreeMaster;
 
@@ -100,8 +99,8 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
 
   private _shell: HTMLDivElement | null = null;
 
-  constructor(at: string | symbol, pluginContext: IPublicModelPluginContext, treeMaster: TreeMaster) {
-    this.pluginContext = pluginContext;
+  constructor(at: string | symbol, treeMaster: TreeMaster) {
+    this.pluginContext = treeMaster.pluginContext;
     this.treeMaster = treeMaster;
     this.at = at;
     let inited = false;
@@ -237,7 +236,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
         let { node } = treeNode;
         if (isDragNodeObject(dragObject)) {
           const newNodes = operationalNodes;
-          let i = newNodes.length;
+          let i = newNodes?.length;
           let p: any = node;
           while (i-- > 0) {
             if (newNodes[i].contains(p)) {
@@ -482,7 +481,7 @@ export class PaneController implements IPublicModelSensor, ITreeBoard, IPublicTy
     const isSlotContainer = treeNode.hasSlots();
     const isContainer = treeNode.isContainer();
 
-    if (container.isSlot && !treeNode.expanded) {
+    if (container.isSlotNode && !treeNode.expanded) {
       // 未展开，直接定位到内部第一个节点
       if (isSlotContainer) {
         detail.index = null;

diff --git a/packages/plugin-outline-pane/src/controllers/tree-master.ts b/packages/plugin-outline-pane/src/controllers/tree-master.ts
@@ -1,69 +1,141 @@
 import { isLocationChildrenDetail } from '@alilc/lowcode-utils';
-import { IPublicModelPluginContext, IPublicTypeActiveTarget, IPublicModelNode } from '@alilc/lowcode-types';
+import { IPublicModelPluginContext, IPublicTypeActiveTarget, IPublicModelNode, IPublicTypeDisposable, IPublicEnumPluginRegisterLevel } from '@alilc/lowcode-types';
 import TreeNode from './tree-node';
 import { Tree } from './tree';
+import EventEmitter from 'events';
+import { enUS, zhCN } from '../locale';
+import { ReactNode } from 'react';
 
 export interface ITreeBoard {
   readonly at: string | symbol;
   scrollToNode(treeNode: TreeNode, detail?: any): void;
 }
 
+enum EVENT_NAMES {
+  pluginContextChanged = 'pluginContextChanged',
+}
+
+export interface IOutlinePanelPluginContext extends IPublicModelPluginContext {
+  extraTitle?: string;
+  intlNode(id: string, params?: object): ReactNode;
+  intl(id: string, params?: object): string;
+  getLocale(): string;
+}
+
 export class TreeMaster {
-  readonly pluginContext: IPublicModelPluginContext;
+  pluginContext: IOutlinePanelPluginContext;
 
   private boards = new Set<ITreeBoard>();
 
   private treeMap = new Map<string, Tree>();
 
-  constructor(pluginContext: IPublicModelPluginContext) {
-    this.pluginContext = pluginContext;
-    let startTime: any;
-    const { event, project, canvas } = this.pluginContext;
-    canvas.dragon?.onDragstart(() => {
-      startTime = Date.now() / 1000;
-      // needs?
-      this.toVision();
-    });
-    canvas.activeTracker?.onChange((target: IPublicTypeActiveTarget) => {
-      const { node, detail } = target;
-      const tree = this.currentTree;
-      if (!tree/* || node.document !== tree.document */) {
-        return;
-      }
-      const treeNode = tree.getTreeNode(node);
-      if (detail && isLocationChildrenDetail(detail)) {
-        treeNode.expand(true);
-      } else {
-        treeNode.expandParents();
-      }
-      this.boards.forEach((board) => {
-        board.scrollToNode(treeNode, detail);
+  private disposeEvents: (IPublicTypeDisposable | undefined)[] = [];
+
+  event = new EventEmitter();
+
+  constructor(pluginContext: IPublicModelPluginContext, readonly options: {
+    extraTitle?: string;
+  }) {
+    this.setPluginContext(pluginContext);
+    const { workspace } = this.pluginContext;
+    this.initEvent();
+    if (pluginContext.registerLevel === IPublicEnumPluginRegisterLevel.Workspace) {
+      workspace.onWindowRendererReady(() => {
+        this.setPluginContext(workspace.window?.currentEditorView);
+        let dispose: IPublicTypeDisposable | undefined;
+        const windowViewTypeChangeEvent = () => {
+          dispose = workspace.window?.onChangeViewType(() => {
+            this.setPluginContext(workspace.window?.currentEditorView);
+          });
+        };
+
+        windowViewTypeChangeEvent();
+
+        workspace.onChangeActiveWindow(() => {
+          windowViewTypeChangeEvent();
+          this.setPluginContext(workspace.window?.currentEditorView);
+          dispose && dispose();
+        });
       });
+    }
+  }
+
+  private setPluginContext(pluginContext: IPublicModelPluginContext | undefined) {
+    if (!pluginContext) {
+      return;
+    }
+    const { intl, intlNode, getLocale } = pluginContext.common.utils.createIntl({
+      'en-US': enUS,
+      'zh-CN': zhCN,
     });
-    canvas.dragon?.onDragend(() => {
-      const endTime: any = Date.now() / 1000;
-      const nodes = project.currentDocument?.selection?.getNodes();
-      event.emit('outlinePane.dragend', {
-        selected: nodes
-          ?.map((n) => {
-            if (!n) {
-              return;
-            }
-            const npm = n?.componentMeta?.npm;
-            return (
-              [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || n?.componentMeta?.componentName
-            );
-          })
-          .join('&'),
-        time: (endTime - startTime).toFixed(2),
-      });
+    let _pluginContext: IOutlinePanelPluginContext = Object.assign(pluginContext, {
+      intl,
+      intlNode,
+      getLocale,
     });
-    project.onRemoveDocument((data: {id: string}) => {
-      const { id } = data;
-      this.treeMap.delete(id);
+    _pluginContext.extraTitle = this.options && this.options['extraTitle'];
+    this.pluginContext = _pluginContext;
+    this.disposeEvent();
+    this.initEvent();
+    this.emitPluginContextChange();
+  }
+
+  private disposeEvent() {
+    this.disposeEvents.forEach(d => {
+      d && d();
     });
   }
 
+  private initEvent() {
+    let startTime: any;
+    const { event, project, canvas } = this.pluginContext;
+    this.disposeEvents = [
+      canvas.dragon?.onDragstart(() => {
+        startTime = Date.now() / 1000;
+        // needs?
+        this.toVision();
+      }),
+      canvas.activeTracker?.onChange((target: IPublicTypeActiveTarget) => {
+        const { node, detail } = target;
+        const tree = this.currentTree;
+        if (!tree/* || node.document !== tree.document */) {
+          return;
+        }
+        const treeNode = tree.getTreeNode(node);
+        if (detail && isLocationChildrenDetail(detail)) {
+          treeNode.expand(true);
+        } else {
+          treeNode.expandParents();
+        }
+        this.boards.forEach((board) => {
+          board.scrollToNode(treeNode, detail);
+        });
+      }),
+      canvas.dragon?.onDragend(() => {
+        const endTime: any = Date.now() / 1000;
+        const nodes = project.currentDocument?.selection?.getNodes();
+        event.emit('outlinePane.dragend', {
+          selected: nodes
+            ?.map((n) => {
+              if (!n) {
+                return;
+              }
+              const npm = n?.componentMeta?.npm;
+              return (
+                [npm?.package, npm?.componentName].filter((item) => !!item).join('-') || n?.componentMeta?.componentName
+              );
+            })
+            .join('&'),
+          time: (endTime - startTime).toFixed(2),
+        });
+      }),
+      project.onRemoveDocument((data: {id: string}) => {
+        const { id } = data;
+        this.treeMap.delete(id);
+      }),
+    ];
+  }
+
   private toVision() {
     const tree = this.currentTree;
     if (tree) {
@@ -86,14 +158,22 @@ export class TreeMaster {
     // todo others purge
   }
 
+  onPluginContextChange(fn: () => void) {
+    this.event.on(EVENT_NAMES.pluginContextChanged, fn);
+  }
+
+  emitPluginContextChange() {
+    this.event.emit(EVENT_NAMES.pluginContextChanged);
+  }
+
   get currentTree(): Tree | null {
     const doc = this.pluginContext.project.getCurrentDocument();
     if (doc) {
       const { id } = doc;
       if (this.treeMap.has(id)) {
         return this.treeMap.get(id)!;
       }
-      const tree = new Tree(this.pluginContext);
+      const tree = new Tree(this);
       this.treeMap.set(id, tree);
       return tree;
     }

diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts
@@ -2,12 +2,12 @@ import {
   IPublicTypeTitleContent,
   IPublicTypeLocationChildrenDetail,
   IPublicModelNode,
-  IPublicModelPluginContext,
   IPublicTypeDisposable,
 } from '@alilc/lowcode-types';
 import { isI18nData, isLocationChildrenDetail } from '@alilc/lowcode-utils';
 import EventEmitter from 'events';
 import { Tree } from './tree';
+import { IOutlinePanelPluginContext } from './tree-master';
 
 /**
  * 大纲树过滤结果
@@ -38,7 +38,7 @@ enum EVENT_NAMES {
 }
 
 export default class TreeNode {
-  readonly pluginContext: IPublicModelPluginContext;
+  readonly pluginContext: IOutlinePanelPluginContext;
   event = new EventEmitter();
 
   private _node: IPublicModelNode;
@@ -160,9 +160,9 @@ export default class TreeNode {
     return this._node;
   }
 
-  constructor(tree: Tree, node: IPublicModelNode, pluginContext: IPublicModelPluginContext) {
+  constructor(tree: Tree, node: IPublicModelNode) {
     this.tree = tree;
-    this.pluginContext = pluginContext;
+    this.pluginContext = tree.pluginContext;
     this._node = node;
   }