@gedit/editor-2d 0.3.0 → 0.3.1

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

@@ -5,9 +5,18 @@ import { PlaygroundContext2d } from './playground-context';
 import { Editor2dDocument, Editor2dNode } from '../model';
 import { Rectangle } from '@gedit/math';
 import { SelectionEntityManager } from './selection-entity-manager';
-import { CanvasDraw, CanvasDrawLoadingState, GameObjectChangeEvent, GameObjectEventType } from './canvas-draw';
+import {
+  CanvasDraw,
+  CanvasDrawLoadingState,
+  GameObjectChangeEvent,
+  GameObjectEventType,
+} from './canvas-draw';
 import { debounce, OriginSchema } from '@gedit/utils';
-import { GameObject, GameObjectBaseType, GameWidgetIDE } from '@gedit/render-engine-ide';
+import {
+  GameObject,
+  GameObjectBaseType,
+  GameWidgetIDE,
+} from '@gedit/render-engine-ide';
 import { toFixedValue } from '@gedit/canvas-draw';
 
 const childrenMap = (list: GameObject[], c: GameObject) => {
@@ -31,7 +40,7 @@ const parentMap = (list: GameObject[], p: GameObject) => {
     list.push(p);
   }
   if (p.parent) {
-    parentMap(list , p.parent);
+    parentMap(list, p.parent);
   }
 };
 
@@ -57,11 +66,13 @@ const getListData = (list: GameObject[]) => {
       childrenMap(updateList, item.parent);
     }
   });
-  updateList = updateList.filter(c => !c.disposed).sort((a, b) => {
-    const aa = a.getDepth?.() || 0;
-    const bb = b.getDepth?.() || 0;
-    return aa - bb;
-  });
+  updateList = updateList
+    .filter(c => !c.disposed)
+    .sort((a, b) => {
+      const aa = a.getDepth?.() || 0;
+      const bb = b.getDepth?.() || 0;
+      return aa - bb;
+    });
   return updateList;
 };
 export class CanvasLayer extends Layer<PlaygroundContext2d> {
@@ -86,7 +97,8 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       host: this.node,
       renderEngine: this.context.renderEngine,
       assetsURI: this.getAssetsURI(),
-      getComponentContent: (compId, parentNode, getParent) => this.document?.getComponentContent(compId, parentNode, getParent),
+      getComponentContent: (compId, parentNode, getParent) =>
+        this.document?.getComponentContent(compId, parentNode, getParent),
       isTemplate: this.context.options.isTemplate,
     });
     this.toDispose.pushAll([
@@ -94,25 +106,28 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       this.canvasDrawer.onRenderWidgetCreate(this.onWidgetUpdate.bind(this)),
       this.canvasDrawer.onGameObjectChange(this.onGameObjectChange.bind(this)),
       this.canvasDrawer.onLoading(this.updateLoading.bind(this)),
-      this.listenPlaygroundEvent('mousedown', () => {
-        this.context.syncToSelectionTree(this.selectionEntityManager);
-      }, -2),
+      this.listenPlaygroundEvent(
+        'mousedown',
+        () => {
+          this.context.syncToSelectionTree(this.selectionEntityManager);
+        },
+        -2
+      ),
     ]);
     // this.entityManager.getEntity<RulerConfigEntity>(RulerConfigEntity)?.customizeOriginClick(this.config.scrollPageBoundsToCenter.bind(this));
     this.config.loading = true;
     if (this.stateService) {
-      this.toDispose.push(this.stateService?.onStateChanged(state => {
-        // 布局完成后再归位画布；
-        if (state === 'ready') {
-          this.tryToResizeToCenter();
-        }
-      }));
+      this.toDispose.push(
+        this.stateService?.onStateChanged(state => {
+          // 布局完成后再归位画布；
+          if (state === 'ready') {
+            this.tryToResizeToCenter();
+          }
+        })
+      );
     }
   }
-  onContainerInitOrigin(
-    entity?: Editor2dEntity,
-    update?: boolean
-  ): void {
+  onContainerInitOrigin(entity?: Editor2dEntity, update?: boolean): void {
     const config = this.documentEntity.config;
     if (config.appConfig?.engine !== 'pixi' || !entity) {
       return;
@@ -120,16 +135,14 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     const node = this.nodeCache.get(entity.id);
     const type = node?.displayType;
     // 分组与组件创建完后初始化中心点;
-    if (
-      node && (type === GameObjectBaseType.COMPONENT)
-    ) {
+    if (node && type === GameObjectBaseType.COMPONENT) {
       const { transform } = entity;
       const { origin: org, localBounds } = transform;
       // console.log(localBounds, entity.gameObject.rendererObject._localBoundsRect);
       const { x: minX, y: minY, width, height } = localBounds; // entity.gameObject.rendererObject._localBoundsRect;
       // 算出组件与组的 0 点位置；
-      const x = toFixedValue((-minX / width) || 0, 6);
-      const y = toFixedValue((-minY / height) || 0, 6);
+      const x = toFixedValue(-minX / width || 0, 6);
+      const y = toFixedValue(-minY / height || 0, 6);
       const initOrigin = { x, y };
       const o: OriginSchema = update ? org : initOrigin;
       if (update || typeof o.initX === 'undefined') {
@@ -138,7 +151,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
           x: o.x || 0,
           y: o.y || 0,
           initX: initOrigin.x || 0,
-          initY: initOrigin.y || 0
+          initY: initOrigin.y || 0,
         };
         // group origin 始终为 0;
         // transform.update({ origin });
@@ -150,7 +163,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         // this.selectionEntityManager.updateEntity(obj.id, obj);
       }
     }
-  };
+  }
   onUpdateEntity = debounce((update: boolean) => {
     const updateList = getListData(this.updateList);
     updateList.forEach(item => {
@@ -158,7 +171,11 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         return;
       }
       // console.log('------------------updateddddddddddddddd-----------', item);
-      this.selectionEntityManager.updateEntity(item.id, item, this.config.config.zoom);
+      this.selectionEntityManager.updateEntity(
+        item.id,
+        item,
+        this.config.config.zoom
+      );
       const entity = this.selectionEntityManager.nodeEntitiesCache.get(item.id);
       this.onContainerInitOrigin(entity, update);
     });
@@ -170,7 +187,13 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     switch (e.type) {
       case GameObjectEventType.CREATE:
         this.document?.updateNode(node, { error: undefined });
-        this.selectionEntityManager.createEntity(gameObject.id, node, gameObject!, !!state?.selectable, !!state?.adsorbable);
+        this.selectionEntityManager.createEntity(
+          gameObject.id,
+          node,
+          gameObject!,
+          !!state?.selectable,
+          !!state?.adsorbable
+        );
         break;
       case GameObjectEventType.DESTROY:
         this.selectionEntityManager.removeEntity(gameObject.id);
@@ -185,7 +208,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         this.onUpdateEntity(true);
         break;
       case GameObjectEventType.ERROR:
-        this.document?.updateNode(node, {error: e.error});
+        this.document?.updateNode(node, { error: e.error });
         break;
     }
     this.context.onCanvasDataChangedEmitter.fire(this.canvasDrawer!);
@@ -215,13 +238,18 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       this.config.loading = true;
       this.node.classList.remove('ready');
       this.config.updateConfig({
-        loadingHTML: `${Math.round(currentCount / allCount * 100)}%`
+        loadingHTML: `${Math.round((currentCount / allCount) * 100)}%`,
       });
     }
   }
   protected loaded(): void {
     // TODO 目前只有模板编辑器需要触发
-    if (!this.canvasDrawer || this.config.loading || !this.context.options.isTemplate) return;
+    if (
+      !this.canvasDrawer ||
+      this.config.loading ||
+      !this.context.options.isTemplate
+    )
+      return;
     for (const item of this.canvasDrawer.gameObjectCache.values()) {
       if (item.onSceneCreated) {
         item.onSceneCreated();
@@ -240,9 +268,13 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     const selectedEntities = this.selectionEntityManager.getSelectedEntities();
     if (this.document?.engineName === 'dom' && selectedEntities?.length) {
       selectedEntities.forEach(c => {
-        const {gameObject} = c;
+        const { gameObject } = c;
         if (gameObject) {
-          this.selectionEntityManager.updateEntity(gameObject.id, gameObject, this.config.config.zoom);
+          this.selectionEntityManager.updateEntity(
+            gameObject.id,
+            gameObject,
+            this.config.config.zoom
+          );
         }
       });
     }
@@ -265,17 +297,24 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
   // private currentResolution = 1;
 
   tryToResizeToCenter = debounce(() => {
-    const {visible } = this.documentEntity.config;
+    const { visible } = this.documentEntity.config;
     // const resolution = appConfig?.resolution || 1;
     const size = this.canvasDrawer?.getSceneSize();
-    if (!visible || !size || this.config.config.width === 0 || this.config.config.height === 0) return;
+    if (
+      !visible ||
+      !size ||
+      this.config.config.width === 0 ||
+      this.config.config.height === 0
+    )
+      return;
     const newRect = new Rectangle(0, 0, size.width, size.height);
     if (!this.currentRectangle || !this.currentRectangle.isEqual(newRect)) {
       this.currentRectangle = newRect;
       // this.currentResolution = resolution;
       // this.config.updateConfig({resolution});
       this.config.setPageBounds(newRect);
-      this.config.scrollPageBoundsToCenter(true, 16, !this.context.options.isTemplate)
+      this.config
+        .scrollPageBoundsToCenter(true, 16, !this.context.options.isTemplate)
         .then(() => this.onZoom());
     }
   }, 100); // 打开时会有一次 tag 大小的视图，宽是 98px,,dom 下没有引擎加载，会响应 98 宽，加 100 ms 延时
@@ -288,7 +327,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       engineName: config.appConfig?.engine || '',
       appConfig: config.appConfig,
       configVersion: config.configVersion,
-      uri: document?.uri
+      uri: document?.uri,
     });
     /**
      * 尝试触发居中

package/src/browser/utils/bounds.ts

@@ -0,0 +1,136 @@
+import { toFixedValue } from '@gedit/canvas-draw';
+import { Matrix } from '@gedit/math';
+import { Bounds } from '@gedit/playground/lib/common/utils/bounds';
+import {
+  GameObjectBaseType,
+  GameObjectData,
+} from '@gedit/render-engine/lib/common';
+
+interface ChildBounds {
+  x: number;
+  y: number;
+  maxX: number;
+  maxY: number;
+  isGroup?: boolean;
+  isMask?: boolean;
+  mask?: string;
+  id?: string;
+}
+
+const ignoreBounds: string[] = [
+  GameObjectBaseType.ANIMATION,
+  GameObjectBaseType.AUDIO,
+  GameObjectBaseType.CAMERA,
+];
+
+const boundsMask = (
+  bounds: ChildBounds,
+  maskBounds?: ChildBounds
+): ChildBounds => {
+  if (!maskBounds) {
+    return bounds;
+  }
+  const minX = bounds.x > maskBounds.x ? bounds.x : maskBounds.x;
+  const minY = bounds.y > maskBounds.y ? bounds.y : maskBounds.y;
+  const maxX = bounds.maxX < maskBounds.maxX ? bounds.maxX : maskBounds.maxX;
+  const maxY = bounds.maxY < maskBounds.maxY ? bounds.maxY : maskBounds.maxY;
+  if (minX <= maxX && minY <= maxY) {
+    return { x: minX, y: minY, maxX, maxY };
+  }
+  return { x: 0, y: 0, maxX: 0, maxY: 0 };
+};
+
+export const getPIXILocalBoundsByNode = (obj: GameObjectData): ChildBounds => {
+  const children: GameObjectData[] = obj.children || [];
+  const bounds: ChildBounds[] = children
+    .map(c => {
+      const {
+        position = { x: 0, y: 0 },
+        scale = { x: 1, y: 1 },
+        rotation = 0,
+        origin = { x: 1, y: 1 },
+      } = c;
+      let width;
+      let height;
+      if (c.canvasHide) {
+        return { x: 0, y: 0, maxX: 0, maxY: 0 };
+      }
+      if (
+        c.displayType === GameObjectBaseType.COMPONENT ||
+        c.displayType === GameObjectBaseType.GROUP
+      ) {
+        if (c.children?.length) {
+          const childSize = getPIXILocalBoundsByNode(c);
+          console.log(childSize, c);
+          width = childSize.maxX - childSize.x;
+          height = childSize.maxY - childSize.y;
+        } else {
+          width = c.size?.width || 0;
+          height = c.size?.height || 0;
+        }
+        return {
+          x: position.x - origin.x * width * scale.x,
+          y: position.y - origin.y * height * scale?.y,
+          maxX: position.x + (width - origin.x * width) * scale.x,
+          maxY: position.y + (height - origin.y * height) * scale.y,
+          isGroup: true,
+          isMask: c.isMask,
+          mask: c.mask,
+          id: c.id,
+        };
+      }
+
+      const transformData = new Matrix();
+      // data 里的 size 已经是缩放后的值了，不需要再乘 scale
+      // transformData.scale(scale.x, scale.y);
+      transformData.rotate(rotation);
+      transformData.translate(position.x, position.y);
+      // 文字有误差，，粒子乱飘；
+      width = c.size?.width;
+      height = c.size?.height;
+      const data = {
+        ...c,
+        size: {
+          ...c.size,
+          width,
+          height,
+        },
+      };
+      const bounds =
+        ignoreBounds.includes(c.displayType) || c.displayType.match('Filter')
+          ? { x: 0, y: 0, height: 0, width: 0 }
+          : Bounds.getBounds(data as any, transformData);
+      return {
+        x: toFixedValue(bounds.x, 6),
+        y: toFixedValue(bounds.y, 6),
+        maxX: toFixedValue(bounds.x + bounds.width, 6),
+        maxY: toFixedValue(bounds.y + bounds.height, 6),
+        isMask: c.isMask,
+        mask: c.mask,
+        id: c.id,
+      };
+    })
+    .filter(c => c && c.maxX - c.x > 0 && c.maxY - c.y > 0);
+  const maskClearBounds: ChildBounds[] = bounds.map(c => {
+    if (c.isMask) {
+      return { x: 0, y: 0, maxX: 0, maxY: 0 };
+    }
+    if (c.mask) {
+      const maskBounds = bounds.find(d => d.id === c.mask);
+      if (maskBounds) {
+        return boundsMask(c, maskBounds);
+      }
+    }
+    return c;
+  });
+  const x = Math.min(...maskClearBounds.map(c => c.x));
+  const y = Math.min(...maskClearBounds.map(c => c.y));
+  const maxX = Math.max(...maskClearBounds.map(c => c.maxX));
+  const maxY = Math.max(...maskClearBounds.map(c => c.maxY));
+  return {
+    x,
+    y,
+    maxX,
+    maxY,
+  };
+};