feat: add APIs for plugin-outline-pane which will be splitted in near future

packages/designer/src/designer/detecting.ts

@@ -7,6 +7,10 @@ const DETECTING_CHANGE_EVENT = 'detectingChange';
 export class Detecting {
   @obx.ref private _enable = true;
 
+  /**
+   * 控制大纲树 hover 时是否出现悬停效果
+   * TODO: 将该逻辑从设计器中抽离出来
+   */
   get enable() {
     return this._enable;
   }

packages/designer/src/designer/index.ts

@@ -8,3 +8,4 @@ export * from './location';
 export * from './offset-observer';
 export * from './scroller';
 export * from './setting';
+export * from './active-tracker';

packages/engine/src/modules/designer-cabin.ts

@@ -5,11 +5,18 @@ import {
   TransformStage,
   LiveEditing,
   isDragNodeDataObject,
+  isDragNodeObject,
+  isDragAnyObject,
   DragObjectType,
   isNode,
+  isShaken,
+  contains,
+  LocationDetailType,
+  isLocationChildrenDetail,
+  ScrollTarget,
 } from '@alilc/lowcode-designer';
 import { Editor } from '@alilc/lowcode-editor-core';
-import { Dragon } from '@alilc/lowcode-shell';
+import { designerCabinSymbol, Dragon } from '@alilc/lowcode-shell';
 
 export default function getDesignerCabin(editor: Editor) {
   const designer = editor.get('designer') as Designer;
@@ -23,5 +30,21 @@ export default function getDesignerCabin(editor: Editor) {
     DragObjectType,
     isDragNodeDataObject,
     isNode,
+    [designerCabinSymbol]: {
+      isDragNodeObject,
+      isDragAnyObject,
+      isShaken,
+      contains,
+      LocationDetailType,
+      isLocationChildrenDetail,
+      ScrollTarget,
+      isSettingField,
+      TransformStage,
+      SettingField,
+      LiveEditing,
+      DragObjectType,
+      isDragNodeDataObject,
+      isNode,
+    },
   };
 }

packages/engine/src/modules/symbols.ts

@@ -8,6 +8,7 @@ import {
   editorSymbol,
   settingPropEntrySymbol,
   settingTopEntrySymbol,
+  designerCabinSymbol,
 } from '@alilc/lowcode-shell';
 
 export default {
@@ -20,4 +21,5 @@ export default {
   designerSymbol,
   settingPropEntrySymbol,
   settingTopEntrySymbol,
+  designerCabinSymbol,
 };

packages/engine/src/modules/utils.ts

@@ -1,6 +1,6 @@
 import { isFormEvent, compatibleLegaoSchema, getNodeSchemaById } from '@alilc/lowcode-utils';
 import { isNodeSchema } from '@alilc/lowcode-types';
-import { getConvertedExtraKey, getOriginalExtraKey } from '@alilc/lowcode-designer';
+import { getConvertedExtraKey, getOriginalExtraKey, isNode, isSettingField } from '@alilc/lowcode-designer';
 
 const utils = {
   isNodeSchema,

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

@@ -1,6 +1,6 @@
 import { Component, MouseEvent as ReactMouseEvent } from 'react';
 import { observer, Editor, globalContext } from '@alilc/lowcode-editor-core';
-import { isRootNode, Node, DragObjectType, isShaken } from '@alilc/lowcode-designer';
+import { Node, DragObjectType, isShaken } from '@alilc/lowcode-designer';
 import { isFormEvent, canClickNode } from '@alilc/lowcode-utils';
 import { Tree } from '../tree';
 import RootTreeNodeView from './root-tree-node';

packages/shell/src/detecting.ts

@@ -1,3 +1,4 @@
+import Node from './node';
 import {
   Detecting as InnerDetecting,
   DocumentModel as InnerDocumentModel,
@@ -13,6 +14,13 @@ export default class Detecting {
     this[detectingSymbol] = document.designer.detecting;
   }
 
+  /**
+   * 当前 hover 的节点
+   */
+  get current() {
+    return Node.create(this[detectingSymbol].current);
+  }
+
   /**
    * hover 指定节点
    * @param id 节点 id

packages/shell/src/document-model.ts

@@ -2,15 +2,15 @@ import { Editor } from '@alilc/lowcode-editor-core';
 import {
   DocumentModel as InnerDocumentModel,
   Node as InnerNode,
-  ParentalNode,
   IOnChangeOptions as InnerIOnChangeOptions,
-  PropChangeOptions as InnerPropChangeOptions,
+  DragObject as InnerDragObject,
+  DragNodeObject,
+  DragNodeDataObject,
+  isDragNodeObject,
 } from '@alilc/lowcode-designer';
 import {
   TransformStage,
   RootSchema,
-  NodeSchema,
-  NodeData,
   GlobalEvent,
 } from '@alilc/lowcode-types';
 import Node from './node';
@@ -40,6 +40,8 @@ const Events = {
   IMPORT_SCHEMA: 'shell.document.importSchema',
 };
 
+const shellDocSymbol = Symbol('shellDocSymbol');
+
 export default class DocumentModel {
   private readonly [documentSymbol]: InnerDocumentModel;
   private readonly [editorSymbol]: Editor;
@@ -61,8 +63,13 @@ export default class DocumentModel {
   }
 
   static create(document: InnerDocumentModel | undefined | null) {
-    if (document == undefined) return null;
+    if (!document) return null;
-    return new DocumentModel(document);
+    // @ts-ignore 直接返回已挂载的 shell doc 实例
+    if (document[shellDocSymbol]) return document[shellDocSymbol];
+    const shellDoc = new DocumentModel(document);
+    // @ts-ignore 直接返回已挂载的 shell doc 实例
+    document[shellDocSymbol] = shellDoc;
+    return shellDoc;
   }
 
   /**
@@ -200,6 +207,23 @@ export default class DocumentModel {
     return this[documentSymbol].getComponentsMap(extraComps);
   }
 
+  /**
+   * 检查拖拽放置的目标节点是否可以放置该拖拽对象
+   * @param dropTarget 拖拽放置的目标节点
+   * @param dragObject 拖拽的对象
+   * @returns boolean 是否可以放置
+   */
+  checkNesting(dropTarget: Node, dragObject: DragNodeObject | DragNodeDataObject): boolean {
+    let innerDragObject: InnerDragObject = dragObject;
+    if (isDragNodeObject(dragObject)) {
+      innerDragObject.nodes = innerDragObject.nodes.map((node: Node) => (node[nodeSymbol] || node));
+    }
+    return this[documentSymbol].checkNesting(
+      (dropTarget[nodeSymbol] || dropTarget) as any,
+      innerDragObject as any,
+    );
+  }
+
   /**
    * 当前 document 新增节点事件
    */

packages/shell/src/node.ts

@@ -128,6 +128,13 @@ export default class Node {
     return true;
   }
 
+  /**
+   * 获取当前节点的锁定状态
+   */
+  get isLocked() {
+    return this[nodeSymbol].isLocked;
+  }
+
   /**
    * 下标
    */
@@ -314,6 +321,14 @@ export default class Node {
     return this[nodeSymbol].isConditionalVisible();
   }
 
+  /**
+   * 设置节点锁定状态
+   * @param flag
+   */
+  lock(flag?: boolean) {
+    this[nodeSymbol].lock(flag);
+  }
+
   /**
    * @deprecated use .props instead
    */
@@ -347,10 +362,11 @@ export default class Node {
    * 获取指定 path 的属性模型实例，
    *  注：导出时，不同于普通属性，该属性并不挂载在 props 之下，而是与 props 同级
    * @param path 属性路径，支持 a / a.b / a.0 等格式
+   * @param createIfNone 当没有属性的时候，是否创建一个属性
    * @returns
    */
-  getExtraProp(path: string): Prop | null {
+  getExtraProp(path: string, createIfNone?: boolean): Prop | null {
-    return Prop.create(this[nodeSymbol].getProp(getConvertedExtraKey(path)));
+    return Prop.create(this[nodeSymbol].getExtraProp(path, createIfNone));
   }
 
   /**
@@ -460,4 +476,8 @@ export default class Node {
   remove() {
     this[nodeSymbol].remove();
   }
+
+  internalToShellNode() {
+    return this;
+  }
 }

packages/shell/src/project.ts

@@ -4,18 +4,20 @@ import {
   PropsReducer as PropsTransducer,
   TransformStage,
 } from '@alilc/lowcode-designer';
-import { RootSchema, ProjectSchema } from '@alilc/lowcode-types';
+import { RootSchema, ProjectSchema, IEditor } from '@alilc/lowcode-types';
 import DocumentModel from './document-model';
 import SimulatorHost from './simulator-host';
-import { projectSymbol, simulatorHostSymbol, simulatorRendererSymbol, documentSymbol } from './symbols';
+import { editorSymbol, projectSymbol, simulatorHostSymbol, simulatorRendererSymbol, documentSymbol } from './symbols';
 
 export default class Project {
   private readonly [projectSymbol]: InnerProject;
+  private readonly [editorSymbol]: IEditor;
   private [simulatorHostSymbol]: BuiltinSimulatorHost;
   private [simulatorRendererSymbol]: any;
 
   constructor(project: InnerProject) {
     this[projectSymbol] = project;
+    this[editorSymbol] = project?.designer.editor;
   }
 
   static create(project: InnerProject) {
@@ -132,6 +134,15 @@ export default class Project {
     this[projectSymbol].designer.addPropsReducer(transducer, stage);
   }
 
+  /**
+   * 绑定删除文档事件
+   * @param fn
+   * @returns
+   */
+  onRemoveDocument(fn: (data: { id: string}) => void) {
+    return this[editorSymbol].on('designer.document.remove', (data: { id: string }) => fn(data));
+  }
+
   /**
    * 当前 project 内的 document 变更事件
    */

packages/shell/src/prop.ts

@@ -71,6 +71,13 @@ export default class Prop {
     return this[propSymbol].getValue();
   }
 
+  /**
+   * 移除值
+   */
+  remove() {
+    this[propSymbol].remove();
+  }
+
   /**
    * 导出值
    * @param stage

packages/shell/src/selection.ts

@@ -84,4 +84,15 @@ export default class Selection {
   getNodes(): Node[] {
     return this[selectionSymbol].getNodes().map((node: InnerNode) => Node.create(node));
   }
+
+  /**
+   * 获取选区的顶层节点
+   * for example:
+   *  getNodes() returns [A, subA, B], then
+   *  getTopNodes() will return [A, B], subA will be removed
+   * @returns
+   */
+  getTopNodes(): Node[] {
+    return this[selectionSymbol].getTopNodes().map((node: InnerNode) => Node.create(node));
+  }
 }

packages/shell/src/symbols.ts

@@ -23,4 +23,5 @@ export const dropLocationSymbol = Symbol('dropLocation');
 export const simulatorHostSymbol = Symbol('simulatorHost');
 export const simulatorRendererSymbol = Symbol('simulatorRenderer');
 export const dragObjectSymbol = Symbol('dragObject');
-export const locateEventSymbol = Symbol('locateEvent');
+export const locateEventSymbol = Symbol('locateEvent');
+export const designerCabinSymbol = Symbol('designerCabin');

packages/types/src/editor.ts

@@ -156,7 +156,7 @@ export interface Utils {
 }
 
 export interface PluginProps {
-  editor: IEditor;
+  editor?: IEditor;
   config: PluginConfig;
   [key: string]: any;
 }