feat: add skeleton item model

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

@@ -141,7 +141,7 @@ export interface IDocumentModel extends Omit<IPublicModelDocumentModel<
 
   insertNodes(parent: INode, thing: INode[] | IPublicTypeNodeData[], at?: number | null, copy?: boolean): INode[];
 
-  open(): DocumentModel;
+  open(): IDocumentModel;
 
   remove(): void;
 

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

@@ -16,6 +16,8 @@ export type UNSET = typeof UNSET;
 export interface IProp extends Omit<IPublicModelProp<
   INode
 >, 'exportSchema' | 'node'>, IPropParent {
+  spread: boolean;
+
   key: string | number | undefined;
 
   readonly props: IProps;
@@ -42,6 +44,8 @@ export interface IProp extends Omit<IPublicModelProp<
 
   setupItems(): IProp[] | null;
 
+  isVirtual(): boolean;
+
   get type(): ValueTypes;
 
   get size(): number;

packages/designer/src/project/project.ts

@@ -1,7 +1,7 @@
 import { obx, computed, makeObservable, action, IEventBus, createModuleEventBus } from '@alilc/lowcode-editor-core';
 import { IDesigner } from '../designer';
 import { DocumentModel, isDocumentModel } from '../document';
-import type { IDocumentModel } from "../document";
+import type { IDocumentModel } from '../document';
 import {
   IPublicTypeComponentsMap,
   IPublicEnumTransformStage,
@@ -317,13 +317,13 @@ export class Project implements IProject {
       doc = this.createDocument();
       return doc.open();
     }
-    if (typeof doc === 'string') {
-      const got = this.documents.find((item) => item.fileName === doc || item.id === doc);
+    if (typeof doc === 'string' || typeof doc === 'number') {
+      const got = this.documents.find((item) => item.fileName === String(doc) || String(item.id) === String(doc));
       if (got) {
         return got.open();
       }
 
-      const data = this.data.componentsTree.find((data) => data.fileName === doc);
+      const data = this.data.componentsTree.find((data) => data.fileName === String(doc));
       if (data) {
         doc = this.createDocument(data);
         return doc.open();

packages/editor-skeleton/src/skeleton.ts

@@ -56,7 +56,8 @@ export interface ISkeleton extends Omit<IPublicApiSkeleton,
   'onShowWidget' |
   'onHideWidget' |
   'remove' |
-  'hideArea'
+  'hideArea' |
+  'add'
 > {
   editor: IEditor;
 
@@ -101,6 +102,8 @@ export interface ISkeleton extends Omit<IPublicApiSkeleton,
   ): WidgetContainer;
 
   createPanel(config: PanelConfig): Panel;
+
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IWidget | Widget | Panel | Stage | Dock | PanelDock | undefined;
 }
 
 export class Skeleton {
@@ -440,7 +443,7 @@ export class Skeleton {
     return restConfig;
   }
 
-  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>) {
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IWidget | Widget | Panel | Stage | Dock | PanelDock | undefined {
     const parsedConfig = {
       ...this.parseConfig(config),
       ...extraConfig,

packages/editor-skeleton/src/widget/panel.ts

@@ -211,6 +211,10 @@ export class Panel implements IWidget {
     this.setActive(false);
   }
 
+  disable() {}
+
+  enable(): void {}
+
   show() {
     this.setActive(true);
   }

packages/engine/src/modules/classes.ts

@@ -10,6 +10,7 @@ import {
   Selection,
   Prop,
   SimulatorHost,
+  SkeletonItem,
 } from '@alilc/lowcode-shell';
 import { Node as InnerNode } from '@alilc/lowcode-designer';
 
@@ -26,4 +27,5 @@ export default {
   Selection,
   Prop,
   SimulatorHost,
+  SkeletonItem,
 };

packages/engine/src/modules/symbols.ts

@@ -11,6 +11,7 @@ import {
   designerCabinSymbol,
   propSymbol,
   simulatorHostSymbol,
+  skeletonItemSymbol,
 } from '@alilc/lowcode-shell';
 
 export default {
@@ -26,4 +27,5 @@ export default {
   designerCabinSymbol,
   propSymbol,
   simulatorHostSymbol,
+  skeletonItemSymbol,
 };

packages/shell/src/api/skeleton.ts

@@ -4,8 +4,9 @@ import {
   SkeletonEvents,
 } from '@alilc/lowcode-editor-skeleton';
 import { skeletonSymbol } from '../symbols';
-import { IPublicApiSkeleton, IPublicTypeDisposable, IPublicTypeSkeletonConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';
+import { IPublicApiSkeleton, IPublicModelSkeletonItem, IPublicTypeDisposable, IPublicTypeSkeletonConfig, IPublicTypeWidgetConfigArea } from '@alilc/lowcode-types';
 import { getLogger } from '@alilc/lowcode-utils';
+import { SkeletonItem } from '../model/skeleton-item';
 
 const innerSkeletonSymbol = Symbol('skeleton');
 
@@ -46,12 +47,15 @@ export class Skeleton implements IPublicApiSkeleton {
    * @param extraConfig
    * @returns
    */
-  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>) {
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IPublicModelSkeletonItem | undefined {
     const configWithName = {
       ...config,
       pluginName: this.pluginName,
     };
-    return this[skeletonSymbol].add(configWithName, extraConfig);
+    const item = this[skeletonSymbol].add(configWithName, extraConfig);
+    if (item) {
+      return new SkeletonItem(item);
+    }
   }
 
   /**
@@ -68,6 +72,10 @@ export class Skeleton implements IPublicApiSkeleton {
     skeleton[normalizeArea(area)].container?.remove(name);
   }
 
+  getAreaItems(areaName: IPublicTypeWidgetConfigArea): IPublicModelSkeletonItem[] {
+    return this[skeletonSymbol][normalizeArea(areaName)].container.items?.map(d => new SkeletonItem(d));
+  }
+
   /**
    * 显示面板
    * @param name
@@ -193,7 +201,7 @@ export class Skeleton implements IPublicApiSkeleton {
   }
 }
 
-function normalizeArea(area: IPublicTypeWidgetConfigArea | undefined): 'leftArea' | 'rightArea' | 'topArea' | 'toolbar' | 'mainArea' | 'bottomArea' | 'leftFixedArea' | 'leftFloatArea' | 'stages' {
+function normalizeArea(area: IPublicTypeWidgetConfigArea | undefined): 'leftArea' | 'rightArea' | 'topArea' | 'toolbar' | 'mainArea' | 'bottomArea' | 'leftFixedArea' | 'leftFloatArea' | 'stages' | 'subTopArea' {
   switch (area) {
     case 'leftArea':
     case 'left':
@@ -220,6 +228,8 @@ function normalizeArea(area: IPublicTypeWidgetConfigArea | undefined): 'leftArea
       return 'leftFloatArea';
     case 'stages':
       return 'stages';
+    case 'subTopArea':
+      return 'subTopArea';
     default:
       throw new Error(`${area} not supported`);
   }

packages/shell/src/index.ts

@@ -11,6 +11,7 @@ import {
   Clipboard,
   SettingField,
   Window,
+  SkeletonItem,
 } from './model';
 import {
   Project,
@@ -66,4 +67,5 @@ export {
   SimulatorHost,
   Config,
   SettingField,
+  SkeletonItem,
 };

packages/shell/src/model/index.ts

@@ -20,3 +20,4 @@ export * from './plugin-instance';
 export * from './window';
 export * from './clipboard';
 export * from './editor-view';
+export * from './skeleton-item';

packages/shell/src/model/skeleton-item.ts

@@ -0,0 +1,31 @@
+import { skeletonItemSymbol } from '../symbols';
+import { IPublicModelSkeletonItem } from '@alilc/lowcode-types';
+import { Dock, IWidget, Panel, PanelDock, Stage, Widget } from '@alilc/lowcode-editor-skeleton';
+
+export class SkeletonItem implements IPublicModelSkeletonItem {
+  private [skeletonItemSymbol]: IWidget | Widget | Panel | Stage | Dock | PanelDock;
+
+  constructor(skeletonItem: IWidget | Widget | Panel | Stage | Dock | PanelDock) {
+    this[skeletonItemSymbol] = skeletonItem;
+  }
+
+  get name() {
+    return this[skeletonItemSymbol].name;
+  }
+
+  disable() {
+    this[skeletonItemSymbol].disable?.();
+  }
+
+  enable() {
+    this[skeletonItemSymbol].enable?.();
+  }
+
+  hide() {
+    this[skeletonItemSymbol].hide();
+  }
+
+  show() {
+    this[skeletonItemSymbol].show();
+  }
+}

packages/shell/src/symbols.ts

@@ -35,4 +35,5 @@ export const clipboardSymbol = Symbol('clipboard');
 export const configSymbol = Symbol('configSymbol');
 export const conditionGroupSymbol = Symbol('conditionGroup');
 export const editorViewSymbol = Symbol('editorView');
-export const pluginContextSymbol = Symbol('pluginContext');
+export const pluginContextSymbol = Symbol('pluginContext');
+export const skeletonItemSymbol = Symbol('skeletonItem');

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

@@ -1,3 +1,4 @@
+import { IPublicModelSkeletonItem } from '../model';
 import { IPublicTypeDisposable, IPublicTypeSkeletonConfig } from '../type';
 
 export interface IPublicApiSkeleton {
@@ -9,7 +10,7 @@ export interface IPublicApiSkeleton {
    * @param extraConfig
    * @returns
    */
-  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): any;
+  add(config: IPublicTypeSkeletonConfig, extraConfig?: Record<string, any>): IPublicModelSkeletonItem | undefined;
 
   /**
    * 移除一个面板实例

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

@@ -31,3 +31,4 @@ export * from './resource';
 export * from './clipboard';
 export * from './setting-field';
 export * from './editor-view';
+export * from './skeleton-item';

packages/types/src/shell/model/skeleton-item.ts

@@ -0,0 +1,6 @@
+/**
+ * @since 1.1.7
+ */
+export interface IPublicModelSkeletonItem {
+
+}

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

@@ -7,7 +7,9 @@ import { IEditorWindow } from '../window';
 import { getWebviewPlugin } from '../inner-plugins/webview';
 
 export interface IViewContext extends IBasicContext {
+  editorWindow: IEditorWindow;
 
+  viewName: string;
 }
 
 export class Context extends BasicContext implements IViewContext {