feat: 补充一些 vision API

lerna.json

@@ -1,6 +1,6 @@
 {
   "lerna": "2.11.0",
-  "version": "1.0.9-2",
+  "version": "0.10.0",
   "npmClient": "tyarn",
   "registry": "http://registry.npm.alibaba-inc.com",
   "useWorkspaces": true,

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

@@ -30,13 +30,15 @@ import {
   getRectTarget,
   Rect,
   CanvasPoint,
+  Designer,
 } from '../designer';
 import { parseMetadata } from './utils/parse-metadata';
-import { ComponentMetadata, NodeSchema, ComponentSchema } from '@ali/lowcode-types';
+import { ComponentMetadata, ComponentSchema } from '@ali/lowcode-types';
 import { BuiltinSimulatorRenderer } from './renderer';
 import clipboard from '../designer/clipboard';
 import { LiveEditing } from './live-editing/live-editing';
 import { Project } from '../project';
+import { Scroller } from '../designer/scroller';
 
 export interface LibraryItem {
   package: string;
@@ -110,9 +112,19 @@ const defaultRaxEnvironment = [
 export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProps> {
   readonly isSimulator = true;
 
-  constructor(readonly project: Project) {}
+  readonly project: Project;
 
-  readonly designer = this.project.designer;
+  readonly designer: Designer;
+
+  readonly viewport = new Viewport();
+
+  readonly scroller: Scroller;
+
+  constructor(project: Project) {
+    this.project = project;
+    this.designer = project?.designer;
+    this.scroller = this.designer.createScroller(this.viewport);
+  }
 
   get currentDocument() {
     return this.project.currentDocument;
@@ -182,9 +194,6 @@ export class BuiltinSimulatorHost implements ISimulatorHost<BuiltinSimulatorProp
     // todo
   }
 
-  readonly viewport = new Viewport();
-  readonly scroller = this.designer.createScroller(this.viewport);
-
   mountViewport(viewport: Element | null) {
     this.viewport.mount(viewport);
   }

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

@@ -4,7 +4,7 @@ import { EventEmitter } from 'events';
 import { Project } from '../project';
 import { ISimulatorHost } from '../simulator';
 import { ComponentMeta } from '../component-meta';
-import { isDragNodeDataObject, DragNodeObject, DragNodeDataObject, DropLocation } from '../designer';
+import { isDragNodeDataObject, DragNodeObject, DragNodeDataObject, DropLocation, Designer } from '../designer';
 import { Node, insertChildren, insertChild, isNode, RootNode, ParentalNode } from './node/node';
 import { Selection } from './selection';
 import { History } from './history';
@@ -56,6 +56,10 @@ export class DocumentModel {
 
   private _nodesMap = new Map<string, Node>();
 
+  readonly project: Project;
+
+  readonly designer: Designer;
+
   @obx.val private nodes = new Set<Node>();
 
   private seqId = 0;
@@ -83,28 +87,20 @@ export class DocumentModel {
   }
 
   get fileName(): string {
-    return this.rootNode.getExtraProp('fileName')?.getAsString() || this.id;
+    return this.rootNode?.getExtraProp('fileName')?.getAsString() || this.id;
   }
 
   set fileName(fileName: string) {
-    this.rootNode.getExtraProp('fileName', true)?.setValue(fileName);
+    this.rootNode?.getExtraProp('fileName', true)?.setValue(fileName);
   }
 
   private _modalNode?: ParentalNode;
 
   private _blank?: boolean;
 
-  get modalNode() {
-    return this._modalNode;
-  }
-
-  get currentRoot() {
-    return this.modalNode || this.rootNode;
-  }
-
   private inited = false;
 
-  constructor(readonly project: Project, schema?: RootSchema) {
+  constructor(project: Project, schema?: RootSchema) {
     /*
     // TODO
     // use special purge process
@@ -112,6 +108,8 @@ export class DocumentModel {
       console.info(this.willPurgeSpace);
     }, true);
     */
+    this.project = project;
+    this.designer = this.project?.designer;
     this.emitter = new EventEmitter();
 
     if (!schema) {
@@ -140,6 +138,14 @@ export class DocumentModel {
 
   @obx.val private willPurgeSpace: Node[] = [];
 
+  get modalNode() {
+    return this._modalNode;
+  }
+
+  get currentRoot() {
+    return this.modalNode || this.rootNode;
+  }
+
   addWillPurge(node: Node) {
     this.willPurgeSpace.push(node);
   }
@@ -155,8 +161,6 @@ export class DocumentModel {
     return this._blank && !this.isModified();
   }
 
-  readonly designer = this.project.designer;
-
   /**
    * 生成唯一id
    */
@@ -186,10 +190,6 @@ export class DocumentModel {
 
   @obx.val private activeNodes?: Node[];
 
-  private setupListenActiveNodes() {
-    // todo:
-  }
-
   /**
    * 根据 schema 创建一个节点
    */
@@ -664,6 +664,17 @@ export class DocumentModel {
   onRefresh(/* func: () => void */) {
     console.warn('onRefresh method is deprecated');
   }
+
+  onReady(fn: Function) {
+    this.designer.editor.on('document-open', fn);
+    return () => {
+      this.designer.editor.removeListener('document-open', fn);
+    };
+  }
+
+  private setupListenActiveNodes() {
+    // todo:
+  }
 }
 
 export function isDocumentModel(obj: any): obj is DocumentModel {

packages/designer/src/project/project.ts

@@ -261,7 +261,4 @@ export class Project {
       this.emitter.removeListener('current-document.change', fn);
     };
   }
-  // 通知标记删除，需要告知服务端
-  // 项目角度编辑不是全量打开所有文档，是按需加载，哪个更新就通知更新谁，
-  // 哪个删除就
 }

packages/editor-preset-vision/src/base/flags.ts

@@ -0,0 +1,147 @@
+import domReady from 'domready';
+import { EventEmitter } from 'events';
+
+const Shells = ['iphone6'];
+
+export class Flags {
+  public emitter: EventEmitter;
+  public flags: string[];
+  public ready: boolean;
+  public lastFlags: string[];
+  public lastShell: string;
+
+  private lastSimulatorDevice: string;
+
+  constructor() {
+    this.emitter = new EventEmitter();
+    this.flags = ['design-mode'];
+
+    domReady(() => {
+      this.ready = true;
+      this.applyFlags();
+    });
+  }
+
+  public setDragMode(flag: boolean) {
+    if (flag) {
+      this.add('drag-mode');
+    } else {
+      this.remove('drag-mode');
+    }
+  }
+
+  public setPreviewMode(flag: boolean) {
+    if (flag) {
+      this.add('preview-mode');
+      this.remove('design-mode');
+    } else {
+      this.add('design-mode');
+      this.remove('preview-mode');
+    }
+  }
+
+  public setWithShell(shell: string) {
+    if (shell === this.lastShell) {
+      return;
+    }
+    if (this.lastShell) {
+      this.remove(`with-${this.lastShell}shell`);
+    }
+    if (shell) {
+      if (Shells.indexOf(shell) < 0) {
+        shell = Shells[0];
+      }
+      this.add(`with-${shell}shell`);
+      this.lastShell = shell;
+    }
+  }
+
+  public setSimulator(device: string) {
+    if (this.lastSimulatorDevice) {
+      this.remove(`simulator-${this.lastSimulatorDevice}`);
+    }
+    if (device !== '' && device !== 'pc') {
+      this.add(`simulator-${device}`);
+    }
+    this.lastSimulatorDevice = device;
+  }
+
+  public setHideSlate(flag: boolean) {
+    if (this.has('slate-fixed')) {
+      return;
+    }
+    if (flag) {
+      this.add('hide-slate');
+    } else {
+      this.remove('hide-slate');
+    }
+  }
+
+  public setSlateFixedMode(flag: boolean) {
+    if (flag) {
+      this.remove('hide-slate');
+      this.add('slate-fixed');
+    } else {
+      this.remove('slate-fixed');
+    }
+  }
+
+  public setSlateFullMode(flag: boolean) {
+    if (flag) {
+      this.add('slate-full-screen');
+    } else {
+      this.remove('slate-full-screen');
+    }
+  }
+
+  public getFlags() {
+    return this.flags;
+  }
+
+  public applyFlags(modifiedFlag?: string) {
+    if (!this.ready) {
+      return;
+    }
+
+    const doe = document.documentElement;
+    if (this.lastFlags) {
+      this.lastFlags.filter((flag: string) => this.flags.indexOf(flag) < 0).forEach((flag) => {
+        doe.classList.remove(`engine-${flag}`);
+      });
+    }
+    this.flags.forEach((flag) => {
+      doe.classList.add(`engine-${flag}`);
+    });
+
+    this.lastFlags = this.flags.slice(0);
+    this.emitter.emit('flagschange', this.flags, modifiedFlag);
+  }
+
+  public has(flag: string) {
+    return this.flags.indexOf(flag) > -1;
+  }
+
+  public add(flag: string) {
+    if (!this.has(flag)) {
+      this.flags.push(flag);
+      this.applyFlags(flag);
+    }
+  }
+
+  public remove(flag: string) {
+    const i = this.flags.indexOf(flag);
+    if (i > -1) {
+      this.flags.splice(i, 1);
+      this.applyFlags(flag);
+    }
+  }
+
+  public onFlagsChange(func: () => any) {
+    this.emitter.on('flagschange', func);
+    return () => {
+      this.emitter.removeListener('flagschange', func);
+    };
+  }
+}
+
+export default new Flags();

packages/editor-preset-vision/src/index.ts

@@ -14,6 +14,7 @@ import Panes from './panes';
 import Exchange from './exchange';
 import context from './context';
 import VisualManager from './base/visualManager';
+import VisualDesigner from './base/visualDesigner';
 import Trunk from './bundle/trunk';
 import Prototype from './bundle/prototype';
 import Bundle from './bundle/bundle';
@@ -22,6 +23,7 @@ import * as Field from './fields';
 import Prop from './prop';
 import Env from './env';
 import DragEngine from './drag-engine';
+import Flags from './base/flags';
 import Viewport from './viewport';
 import Project from './project';
 
@@ -60,6 +62,7 @@ const ui = {
 
 const modules = {
   VisualManager,
+  VisualDesigner,
   I18nUtil,
   Prop,
 };
@@ -107,6 +110,7 @@ const VisualEngine = {
   Project,
   logger,
   Symbols,
+  Flags,
 };
 
 (window as any).VisualEngine = VisualEngine;

packages/editor-preset-vision/src/pages.ts

@@ -124,6 +124,9 @@ Object.defineProperty(pages, 'currentPage', {
   get() {
     return project.currentDocument;
   },
+  set(_currentPage) {
+    // do nothing
+  },
 });
 
 pages.onCurrentPageChange((page: DocumentModel) => {

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

@@ -38,7 +38,9 @@ export function composeTitle(title?: TitleContent, icon?: IconType, tip?: TipCon
     }
   }
   if (isTitleConfig(title) && noIcon) {
+    if (!isValidElement(title)) {
       title.icon = undefined;
     }
+  }
   return title;
 }

packages/react-renderer/src/utils/dataHelper.ts

@@ -160,7 +160,7 @@ export default class DataHelper {
       const _tb_token_ = csrfInput && csrfInput.value;
       asyncDataList.forEach((req) => {
         const { id, type, options } = req;
-        if (!id || !type) return;
+        if (!id || !type || type === 'legao') return;
         if (type === 'doServer') {
           const { uri, params } = options || {};
           if (!uri) return;

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

@@ -151,18 +151,18 @@ class Renderer extends Component<{
           viewProps._leaf = leaf;
           viewProps._componentName = leaf?.componentName;
           // 如果是容器 && 无children && 高宽为空 增加一个占位容器，方便拖动
-          if (
+          // if (
-            !viewProps.dataSource &&
+          //   !viewProps.dataSource &&
-            leaf?.isContainer() &&
+          //   leaf?.isContainer() &&
-            (children == null || (Array.isArray(children) && !children.length)) &&
+          //   (children == null || (Array.isArray(children) && !children.length)) &&
-            (!viewProps.style || Object.keys(viewProps.style).length === 0)
+          //   (!viewProps.style || Object.keys(viewProps.style).length === 0)
-          ) {
+          // ) {
-            children = (
+          //   children = (
-              <div className="lc-container-placeholder" style={viewProps.placeholderStyle}>
+          //     <div className="lc-container-placeholder" style={viewProps.placeholderStyle}>
-                {viewProps.placeholder || '拖拽组件或模板到这里'}
+          //       {viewProps.placeholder || '拖拽组件或模板到这里'}
-              </div>
+          //     </div>
-            );
+          //   );
-          }
+          // }
           if (viewProps._componentName === 'a') {
             delete viewProps.href;
           }

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

@@ -3,16 +3,15 @@ import { render as reactRender } from 'react-dom';
 import { host } from './host';
 import SimulatorRendererView from './renderer-view';
 import { computed, obx } from '@recore/obx';
-import { Asset } from '@ali/lowcode-utils';
 import { getClientRects } from './utils/get-client-rects';
 import { reactFindDOMNodes, FIBER_KEY } from './utils/react-find-dom-nodes';
 import {
+  Asset,
   isElement,
   cursor,
   setNativeSelection,
   buildComponents,
   getSubComponent,
-  AssetLoader,
 } from '@ali/lowcode-utils';
 import { RootSchema, ComponentSchema, TransformStage, NodeSchema } from '@ali/lowcode-types';
 // import { isESModule, isElement, acceptsRef, wrapReactClass, cursor, setNativeSelection } from '@ali/lowcode-utils';
@@ -270,7 +269,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     this._components = {
       ...builtinComponents,
       ...this._components,
-    }
+    };
   }
   @obx.ref private _components: any = {};
   @computed get components(): object {
@@ -365,7 +364,7 @@ export class SimulatorRendererContainer implements BuiltinSimulatorRenderer {
     }
 
     const node = host.currentDocument?.createNode(_schema);
-    _schema = node?.export(TransformStage.Render);
+    _schema = node?.export(TransformStage.Render) || {};
 
     const processPropsSchema = (propsSchema: any, propsMap: any): any => {
       if (!propsSchema) {