@gedit/editor-2d 0.2.46 → 0.2.48

package/src/browser/playground/canvas-draw.ts

@@ -1,67 +1,102 @@
-import { ComponentGameObjectData, GameConfig, GameObject, GameObjectBaseType, GameObjectData, GameObjectError } from '@gedit/render-engine';
+import {
+  ComponentGameObjectData,
+  GameConfig,
+  GameObject,
+  GameObjectBaseType,
+  GameObjectData,
+  GameObjectError,
+} from '@gedit/render-engine';
 import { Editor2dNode } from '../model/editor2d';
-import { GameSceneIDE, GameWidgetIDE, RenderEngineIDEService } from '@gedit/render-engine-ide';
+import {
+  GameSceneIDE,
+  GameWidgetIDE,
+  RenderEngineIDEService,
+} from '@gedit/render-engine-ide';
 import { AppConfigData } from '@gedit/app-config/lib/common';
-import { Disposable, DisposableImpl, Emitter, omit, SizeSchema, URI } from '@gedit/utils';
+import {
+  Disposable,
+  DisposableImpl,
+  Emitter,
+  omit,
+  SizeSchema,
+  URI,
+} from '@gedit/utils';
+import { EntityManager, SnaplineConfigEntity } from '@gedit/playground';
 
 const WAIT_TO_DISPOSE_TIME = 30000; // 延迟删除, 这样tab在频繁切换时候不会有延迟
 const SCENE_KEY = 'boot';
 interface GameObjectState {
-  selectable: boolean,
-  adsorbable: boolean,
-  isInside: boolean
+  selectable: boolean;
+  adsorbable: boolean;
+  isInside: boolean;
 }
 
 export interface CanvasDrawOpts {
-  host: HTMLElement,
-  renderEngine: RenderEngineIDEService,
-  assetsURI: string, // 资源地址
-  getComponentContent: (compId: string, parentNode?: Editor2dNode, getParent?: boolean) => Editor2dNode[] | undefined
-  isSnapshot?: boolean
-  isTemplate?: boolean
+  entityManager?: EntityManager;
+  host: HTMLElement;
+  renderEngine: RenderEngineIDEService;
+  assetsURI: string; // 资源地址
+  getComponentContent: (
+    compId: string,
+    parentNode?: Editor2dNode,
+    getParent?: boolean
+  ) => Editor2dNode[] | undefined;
+  isSnapshot?: boolean;
+  isTemplate?: boolean;
 }
 export interface CanvasDrawData {
-  visible: boolean
-  engineName: string,
-  appConfig?: GameConfig, // 应用配置
-  content?: Editor2dNode // 画布数据
-  uri?: string, // 画布文档uri
-  configVersion?: number | string // 配置版本，用于控制刷新
+  visible: boolean;
+  engineName: string;
+  appConfig?: GameConfig; // 应用配置
+  content?: Editor2dNode; // 画布数据
+  uri?: string; // 画布文档uri
+  configVersion?: number | string; // 配置版本，用于控制刷新
 }
 export enum GameObjectEventType {
   CREATE,
   CREATE_READY,
   DESTROY,
   UPDATE,
-  ERROR
+  ERROR,
 }
 
 export interface GameObjectChangeEvent {
-  type: GameObjectEventType,
-  state?: GameObjectState,
-  node: Editor2dNode,
-  gameObject: GameObject
+  type: GameObjectEventType;
+  state?: GameObjectState;
+  node: Editor2dNode;
+  gameObject: GameObject;
   error?: GameObjectError;
   parentObject?: GameObject;
   parentNode?: Editor2dNode;
 }
 
 export interface CanvasDrawLoadingState {
-  allCount: number,
-  currentCount: number,
-  loaded: boolean,
-  reload?: boolean, // 重新加载
+  allCount: number;
+  currentCount: number;
+  loaded: boolean;
+  reload?: boolean; // 重新加载
 }
 
-function toNodeData(node: Editor2dNode, symbols: GameConfig.Symbol[]): GameObjectData {
-  const originData = omit(node, ['parent', 'previousSibling', 'nextSibling', 'children']);
+function toNodeData(
+  node: Editor2dNode,
+  symbols: GameConfig.Symbol[]
+): GameObjectData {
+  const originData = omit(node, [
+    'parent',
+    'previousSibling',
+    'nextSibling',
+    'children',
+  ]);
   return GameObjectData.replaceSymbolKey(originData, symbols, true, originData);
-};
+}
 
 /**
  * 获取当前画布的变量
  */
-function getCurrentSymbols(appConfig: AppConfigData, root?: Editor2dNode): GameConfig.Symbol[] {
+function getCurrentSymbols(
+  appConfig: AppConfigData,
+  root?: Editor2dNode
+): GameConfig.Symbol[] {
   const symbols = appConfig.symbols || [];
   if (root && root.displayType === 'component') {
     return symbols.concat(GameObjectData.getComponentSymbols(root));
@@ -86,7 +121,10 @@ export class CanvasDraw extends DisposableImpl {
   readonly gameObjectCache: Map<string, GameObject> = new Map();
   readonly nodeCache: Map<string, Editor2dNode> = new Map();
   protected nodeVersionCache: Map<string, string> = new Map();
-  protected maskCache: Map<string, {mask?: string; isMask?: boolean; ignoreMask?: boolean }> = new Map();
+  protected maskCache: Map<
+  string,
+  { mask?: string; isMask?: boolean; ignoreMask?: boolean }
+  > = new Map();
   protected lastRenderKeys: string[] = [];
   protected renderWidgetDispose: Disposable | undefined;
   protected pixelArt: boolean;
@@ -100,9 +138,8 @@ export class CanvasDraw extends DisposableImpl {
   readonly onGameObjectChange = this.onGameObjectChangeEmitter.event;
   readonly onRenderWidgetCreate = this.onRenderWidgetCreateEmitter.event;
   loading = true;
-  constructor(
-    protected opts: CanvasDrawOpts,
-  ) {
+  engineName: string;
+  constructor(protected opts: CanvasDrawOpts) {
     super();
     this.toDispose.pushAll([
       this.onDrawEmitter,
@@ -126,7 +163,7 @@ export class CanvasDraw extends DisposableImpl {
    * @param engineName
    * @return visible changed
    */
-  protected toggleVisible(appConfig: AppConfigData, visible: boolean, engineName: string): boolean {
+  protected toggleVisible(appConfig: AppConfigData, visible: boolean): boolean {
     if (this.waitToDispose) {
       this.waitToDispose.dispose();
       this.waitToDispose = undefined;
@@ -140,37 +177,45 @@ export class CanvasDraw extends DisposableImpl {
     const backgroundColor = isScene ? appConfig.backgroundColor : '';
     this.pixelArt = appConfig.pixelArt;
     if (visible && !this.renderWidget) {
-      const element = window.document.createElement('canvas');
+      const element = window.document.createElement(
+        this.engineName === 'dom' ? 'div' : 'canvas'
+      );
       this.opts.host.appendChild(element);
       element.className = 'gedit-canvas-transparent';
-      this.renderWidget = this.opts.renderEngine.createGameWidget(engineName, {
-        ...appConfig,
-        width: 0,
-        height: 0,
-        uri: this.data?.uri,
-        canvas: element,
-        backgroundColor,
-        assetsURI: this.opts.assetsURI, // 资源路径
-        isSnapshot: this.opts.isSnapshot,
-        isIDE: true,
-      });
-      this.renderWidget.toDispose.push(Disposable.create(() => {
-        if (this.renderWidgetDispose) {
-          this.renderWidgetDispose.dispose();
-          this.renderWidgetDispose = undefined;
+      this.renderWidget = this.opts.renderEngine.createGameWidget(
+        this.engineName,
+        {
+          ...appConfig,
+          width: 0,
+          height: 0,
+          uri: this.data?.uri,
+          canvas: element,
+          rootEngine: appConfig.engine,
+          backgroundColor,
+          assetsURI: this.opts.assetsURI, // 资源路径
+          isSnapshot: this.opts.isSnapshot,
+          isIDE: true,
         }
-        element.remove();
-        // this.opts.host.removeChild(element);
-        this.renderWidget = undefined;
-        this.booted = false;
-        this.loading = true;
-        this.onLoadingEmitter.fire({
-          loaded: false,
-          allCount: this.allCount,
-          currentCount: 0,
-          reload: true,
-        });
-      }));
+      );
+      this.renderWidget.toDispose.push(
+        Disposable.create(() => {
+          if (this.renderWidgetDispose) {
+            this.renderWidgetDispose.dispose();
+            this.renderWidgetDispose = undefined;
+          }
+          element.remove();
+          // this.opts.host.removeChild(element);
+          this.renderWidget = undefined;
+          this.booted = false;
+          this.loading = true;
+          this.onLoadingEmitter.fire({
+            loaded: false,
+            allCount: this.allCount,
+            currentCount: 0,
+            reload: true,
+          });
+        })
+      );
       this.renderWidgetDispose = this.toDispose.push(this.renderWidget);
       Promise.resolve(this.renderWidget.start()).then(() => {
         this.onRenderWidgetCreateEmitter.fire(this.renderWidget!);
@@ -196,7 +241,7 @@ export class CanvasDraw extends DisposableImpl {
       return true;
     }
     return false;
-  };
+  }
   addComponentSymbolsMetaToLoader(scene: GameSceneIDE): void {
     if (this.currentSymbols.length) {
       this.currentSymbols.forEach(c => {
@@ -207,6 +252,62 @@ export class CanvasDraw extends DisposableImpl {
       });
     }
   }
+
+  protected switchSnapline(node?: Editor2dNode): void {
+    // dom 下开启滚动的话，，显示标尺展示场景大小;
+    if (
+      node &&
+      Editor2dNode.isRootNode(node) &&
+      node.displayType === GameObjectBaseType.COMPONENT &&
+      this.data?.engineName === 'dom'
+    ) {
+      const snaplineEntity = this.opts.entityManager?.getEntity<SnaplineConfigEntity>(
+        SnaplineConfigEntity
+      );
+      if (!snaplineEntity) {
+        return;
+      }
+      if (node.scene?.scrollXBool || node.scene?.scrollYBool) {
+        snaplineEntity.updateConfig({
+          lines: [
+            {
+              id: 'component_scene_top',
+              color: '#fff000',
+              horizontal: true,
+              start: { x: 0, y: 0 },
+              strokeWidth: 1,
+            },
+            {
+              id: 'component_scene_top',
+              color: '#fff000',
+              horizontal: true,
+              start: { x: 0, y: node.scene?.height || 400 },
+              strokeWidth: 1,
+            },
+            {
+              id: 'component_scene_left',
+              color: 'red',
+              vertical: true,
+              start: { x: 0, y: 0 },
+              strokeWidth: 1,
+            },
+            {
+              id: 'component_scene_right',
+              color: 'red',
+              vertical: true,
+              start: { x: node.scene?.width || 400, y: 0 },
+              strokeWidth: 1,
+            },
+          ],
+        });
+      } else {
+        snaplineEntity.updateConfig({
+          lines: [],
+        });
+      }
+    }
+  }
+
   updateGameObjects(scene: GameSceneIDE, content: Editor2dNode): void {
     const renderKeys: string[] = [];
     if (!content) return;
@@ -225,16 +326,42 @@ export class CanvasDraw extends DisposableImpl {
     this.lastRenderKeys = renderKeys;
   }
 
-  updateGameObject(scene: GameSceneIDE, node: Editor2dNode, depth: number, renderKeys: string[], isInside: boolean = false, parentId?: string): number {
+  updateGameObject(
+    scene: GameSceneIDE,
+    node: Editor2dNode,
+    depth: number,
+    renderKeys: string[],
+    isInside: boolean = false,
+    parentId?: string,
+    engineName?: string
+  ): number {
     const nodePath = Editor2dNode.getNodePath(node);
-    let children = (node.children as Editor2dNode[] || []).slice().reverse();
-    const deco =  this.opts.renderEngine.getGameObjectDecoration(this.data!.engineName, node.displayType);
-    const compId = !Editor2dNode.isRootNode(node) && deco.getComponentId ? deco.getComponentId(node) : undefined;
+    let children = ((node.children as Editor2dNode[]) || []).slice().reverse();
+    // console.log(this.data, scene, node);
+    const deco = this.opts.renderEngine.getGameObjectDecoration(
+      engineName || this.engineName,
+      node.displayType
+    );
+    if (node.parent) {
+    }
+    // console.log(deco);
+    const compId =
+      !Editor2dNode.isRootNode(node) && deco.getComponentId
+        ? deco.getComponentId(node)
+        : undefined;
     let adsorbable = true; // 是否可被吸附
-    const selectable: boolean = !isInside && (!this.opts.isTemplate || !Editor2dNode.isTemplateDisabled(node)); // 是否可被选中
+    const selectable: boolean =
+      !isInside &&
+      (!this.opts.isTemplate || !Editor2dNode.isTemplateDisabled(node)); // 是否可被选中
     let childInside = false;
+    let componentScene: any;
     if (compId) {
-      children = (this.opts.getComponentContent(compId, node) || []).slice().reverse().concat(children);
+      children = (this.opts.getComponentContent(compId, node) || [])
+        .slice()
+        .reverse()
+        .concat(children);
+      const component = this.opts.getComponentContent(compId, node, true);
+      componentScene = component?.[0].scene;
       // 内部节点
       childInside = true;
       // 拥有内部节点的父节点无法被吸附
@@ -243,7 +370,15 @@ export class CanvasDraw extends DisposableImpl {
     // 子节点先创建
     if (children && children.length > 0) {
       for (const child of children) {
-        depth = this.updateGameObject(scene, child, depth, renderKeys, childInside || isInside, nodePath);
+        depth = this.updateGameObject(
+          scene,
+          child,
+          depth,
+          renderKeys,
+          childInside || isInside,
+          nodePath,
+          componentScene?.engine || node.scene?.engine
+        );
       }
     }
     const gameObjectCache = this.gameObjectCache;
@@ -257,62 +392,86 @@ export class CanvasDraw extends DisposableImpl {
     }
     let firstCreate = false;
     const nodeData = toNodeData(node, this.currentSymbols);
-    const newVersion = currentDepth + (node.version || 0) + ':' + (this.data?.configVersion || 0) + ':' + this.symbolVersion;
+    const newVersion =
+      currentDepth +
+      (node.version || 0) +
+      ':' +
+      (this.data?.configVersion || 0) +
+      ':' +
+      this.symbolVersion;
     // 内部节点无法选中
     if (!gameObject) {
-      const gameObjectChildren = children ? children.map(c => gameObjectCache.get(Editor2dNode.getNodePath(c))!) : [];
+      const gameObjectChildren = children
+        ? children.map(c => gameObjectCache.get(Editor2dNode.getNodePath(c))!)
+        : [];
       try {
         const d = { ...nodeData, id: nodePath, depth: currentDepth, parentId };
         if (d.mask) {
           d.mask = `${parentId}/${d.mask}`;
         }
-        gameObject = scene.createAuto(d, gameObjectChildren);
+        if (compId && componentScene) {
+          d.scene = componentScene;
+          node.scene = componentScene;
+        }
+        gameObject = scene.createAuto(d, gameObjectChildren, engineName);
       } catch (e) {
         console.error(e);
         return depth;
       }
       gameObjectCache.set(nodePath, gameObject);
+      const updateParent = (
+        node?: Editor2dNode,
+        obj?: GameObject,
+        type: GameObjectEventType = GameObjectEventType.UPDATE
+      ) => {
+        // 如果父级是组件或分组更新中心点；
+        if (node && obj && !Editor2dNode.isRootNode(node)) {
+          this.onGameObjectChangeEmitter.fire({
+            type,
+            gameObject: obj!,
+            node: node!,
+          });
+          if (node.parent && obj.parent) {
+            updateParent(node.parent, obj.parent, type);
+          }
+        }
+      };
       scene.onGameObjectDispose(gameObject, () => {
-        const parentObject = parentId ? this.gameObjectCache.get(parentId) : undefined;
-        const parentNode = parentId ? this.nodeCache.get(parentId) : undefined;
         const node = this.nodeCache.get(nodePath)!;
-        this.gameObjectCache.delete(nodePath);
-        this.nodeVersionCache.delete(nodePath);
-        this.nodeCache.delete(nodePath);
-        this.maskCache.delete(nodePath);
         this.onGameObjectChangeEmitter.fire({
           type: GameObjectEventType.DESTROY,
           gameObject: gameObject!,
-          parentObject,
-          parentNode,
           node,
         });
+        updateParent(node, gameObject);
+        this.gameObjectCache.delete(nodePath);
+        this.nodeVersionCache.delete(nodePath);
+        this.nodeCache.delete(nodePath);
+        this.maskCache.delete(nodePath);
       });
       scene.onGameObjectUpdate(gameObject, () => {
-        const parentObject = parentId ? this.gameObjectCache.get(parentId) : undefined;
-        const parentNode = parentId ? this.nodeCache.get(parentId) : undefined;
-        this.onGameObjectChangeEmitter.fire({
+        const node = this.nodeCache.get(nodePath);
+        /*  this.onGameObjectChangeEmitter.fire({
           type: GameObjectEventType.UPDATE,
           gameObject: gameObject!,
-          parentObject,
-          parentNode,
-          node: this.nodeCache.get(nodePath)!,
-        });
+          node: node!,
+        }); */
+        // 更新父级
+        updateParent(node, gameObject);
+        this.switchSnapline(node);
       });
       scene.onGameObjectCreate(gameObject, () => {
         this.nodeVersionCache.set(nodePath, newVersion);
-        this.maskCache.set(nodePath, { mask: node.mask, isMask: node.isMask, ignoreMask: node.ignoreMask });
-        const parentObject = parentId ? this.gameObjectCache.get(parentId) : undefined;
-        const parentNode = parentId ? this.nodeCache.get(parentId) : undefined;
-        this.onGameObjectChangeEmitter.fire({
-          type: GameObjectEventType.CREATE_READY,
-          gameObject: gameObject!,
-          node: this.nodeCache.get(nodePath)!,
-          parentObject,
-          parentNode
+        this.maskCache.set(nodePath, {
+          mask: node.mask,
+          isMask: node.isMask,
+          ignoreMask: node.ignoreMask,
         });
         // 根节点创建完成则代表加载完成
-        this.fireLoading(Editor2dNode.isRootNode(this.nodeCache.get(nodePath)!));
+        this.fireLoading(
+          Editor2dNode.isRootNode(this.nodeCache.get(nodePath)!)
+        );
+        updateParent(this.nodeCache.get(nodePath), gameObject);
       });
       scene.onGameObjectError(gameObject, error => {
         this.onGameObjectChangeEmitter.fire({
@@ -326,7 +485,7 @@ export class CanvasDraw extends DisposableImpl {
         type: GameObjectEventType.CREATE,
         gameObject: gameObject!,
         node: this.nodeCache.get(nodePath)!,
-        state: { selectable, adsorbable, isInside }
+        state: { selectable, adsorbable, isInside },
       });
       firstCreate = true;
     }
@@ -337,14 +496,31 @@ export class CanvasDraw extends DisposableImpl {
       if (oldTexture.toString() !== newTexture.toString()) {
         gameObject.dispose();
         this.nodeCache.set(nodePath, node);
-        return this.updateGameObject(scene, node, currentDepth, renderKeys, isInside, parentId);
+        return this.updateGameObject(
+          scene,
+          node,
+          currentDepth,
+          renderKeys,
+          isInside,
+          parentId
+        );
       }
     }
     const update = () => {
       const oldVersion = this.nodeVersionCache.get(nodePath);
       const oldMask = this.maskCache.get(nodePath);
-      const maskChange = oldMask?.mask !== node.mask || oldMask?.isMask !== node.isMask || oldMask?.ignoreMask !== node.ignoreMask;
-      if (nodeChanged || maskChange || oldVersion !== newVersion) {
+      const maskChange =
+        oldMask?.mask !== node.mask ||
+        oldMask?.isMask !== node.isMask ||
+        oldMask?.ignoreMask !== node.ignoreMask;
+      const compSceneChange =
+        JSON.stringify(componentScene) !== JSON.stringify(node.scene);
+      if (
+        nodeChanged ||
+        maskChange ||
+        oldVersion !== newVersion ||
+        compSceneChange
+      ) {
         const d = {
           ...nodeData,
           parentId,
@@ -355,12 +531,20 @@ export class CanvasDraw extends DisposableImpl {
         if (d.mask) {
           d.mask = `${parentId}/${d.mask}`;
         }
+        if (compId && componentScene) {
+          d.scene = componentScene;
+          node.scene = componentScene;
+        }
         gameObject!.update(d);
         this.nodeVersionCache.set(nodePath, newVersion);
-        this.maskCache.set(nodePath, { mask: node.mask, isMask: node.isMask, ignoreMask: node.ignoreMask });
+        this.maskCache.set(nodePath, {
+          mask: node.mask,
+          isMask: node.isMask,
+          ignoreMask: node.ignoreMask,
+        });
       }
     };
-    if (!firstCreate && gameObject.created) {
+    if (!firstCreate && gameObject?.created) {
       try {
         update();
       } catch (e) {
@@ -405,14 +589,21 @@ export class CanvasDraw extends DisposableImpl {
     this.draw();
   }
 
-  setComponentSymbolsToLoader(scene: GameSceneIDE, child: GameObjectData[] = []): void {
+  setComponentSymbolsToLoader(
+    scene: GameSceneIDE,
+    child: GameObjectData[] = []
+  ): void {
     child.forEach((item: ComponentGameObjectData) => {
       if (item.displayType === GameObjectBaseType.COMPONENT && item.component) {
         const { id } = item.component;
-        const compNode = this.opts.getComponentContent(id, undefined, true) || [];
+        const compNode =
+          this.opts.getComponentContent(id, undefined, true) || [];
         const comp = compNode[0];
         if (comp && comp.component) {
-          const currentSymbols = getCurrentSymbols(this.data!.appConfig!, comp).filter(c => !this.currentSymbols.some(d => d.id === c.id));
+          const currentSymbols = getCurrentSymbols(
+            this.data!.appConfig!,
+            comp
+          ).filter(c => !this.currentSymbols.some(d => d.id === c.id));
           // 变量数据更新
           this.currentSymbols = this.currentSymbols.concat(currentSymbols);
           this.addComponentSymbolsMetaToLoader(scene);
@@ -426,7 +617,10 @@ export class CanvasDraw extends DisposableImpl {
 
   symbolsToCurrent(scene: GameSceneIDE, content: Editor2dNode): void {
     // const currentSymbols = getCurrentSymbols(this.data!.appConfig!, content);
-    const currentSymbols = getCurrentSymbols(this.data!.appConfig!, content).filter(c => !this.currentSymbols.some(d => d.id === c.id));
+    const currentSymbols = getCurrentSymbols(
+      this.data!.appConfig!,
+      content
+    ).filter(c => !this.currentSymbols.some(d => d.id === c.id));
     // 变量数据更新
     if (JSON.stringify(currentSymbols) !== JSON.stringify(this.oldSymbols)) {
       this.symbolVersion++;
@@ -448,6 +642,18 @@ export class CanvasDraw extends DisposableImpl {
     const { content, appConfig } = this.data;
     if (!appConfig || !content) return undefined;
     if (content.displayType === 'component') {
+      if (this.data.engineName === 'dom') {
+        const w = content.scene?.scrollXBool
+          ? content.scene?.contentWidth || content.scene?.width
+          : content.scene?.width;
+        const h = content.scene?.scrollYBool
+          ? content.scene?.contentHeight || content.scene?.height
+          : content.scene?.height;
+        return {
+          width: w || 400,
+          height: h || 400,
+        };
+      }
       return { width: 0, height: 0 };
     }
     return GameConfig.getSceneSize(appConfig, content);
@@ -462,9 +668,22 @@ export class CanvasDraw extends DisposableImpl {
     }
     const size = this.getSceneSize();
     if (!content || !appConfig || !this.libLoaded || !size) return;
-    const visibleChanged = this.toggleVisible(appConfig, visible, engineName);
+    this.engineName =
+      (content.displayType === GameObjectBaseType.COMPONENT &&
+        content.scene?.engine) ||
+      engineName;
+    const visibleChanged = this.toggleVisible(appConfig, visible);
     if (!this.renderWidget || !this.booted) return;
-    const scene = this.renderWidget.switchScene(SCENE_KEY, size);
+
+    let backgroundColor;
+    if (engineName === 'dom' && content.displayType === 'component') {
+      backgroundColor = content.scene?.backgroundColor;
+    }
+
+    const scene = this.renderWidget.switchScene(SCENE_KEY, {
+      size,
+      backgroundColor,
+    });
     // 绘制时清除 currentSymbol;
     this.currentSymbols = [];
     /**