@gedit/editor-2d 0.1.115 → 0.2.0

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

@@ -17,6 +17,7 @@ export interface CanvasDrawOpts {
   renderEngine: RenderEngineIDEService,
   assetsURI: string, // 资源地址
   getComponentContent: (compId: string, parentNode: Editor2dNode) => Editor2dNode[] | undefined
+  isSnapshot?: boolean
   isTemplate?: boolean
 }
 export interface CanvasDrawData {
@@ -86,6 +87,7 @@ export class CanvasDraw extends DisposableImpl {
   protected onDrawEmitter = new Emitter<GameConfig.SceneSizeConfig>();
   protected onLoadingEmitter = new Emitter<CanvasDrawLoadingState>();
   protected onGameObjectChangeEmitter = new Emitter<GameObjectChangeEvent>();
+  protected onRenderWidgetCreateEmitter = new Emitter<GameWidgetIDE>();
   protected data?: CanvasDrawData;
   private booted: boolean = false;
   private libLoaded = false;
@@ -95,6 +97,7 @@ 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 lastRenderKeys: string[] = [];
   protected renderWidgetDispose: Disposable | undefined;
   protected pixelArt: boolean;
@@ -103,6 +106,7 @@ export class CanvasDraw extends DisposableImpl {
   readonly onDraw = this.onDrawEmitter.event;
   readonly onLoading = this.onLoadingEmitter.event;
   readonly onGameObjectChange = this.onGameObjectChangeEmitter.event;
+  readonly onRenderWidgetCreate = this.onRenderWidgetCreateEmitter.event;
   loading = true;
   constructor(
     protected opts: CanvasDrawOpts,
@@ -112,6 +116,7 @@ export class CanvasDraw extends DisposableImpl {
       this.onDrawEmitter,
       this.onLoadingEmitter,
       this.onGameObjectChangeEmitter,
+      this.onRenderWidgetCreateEmitter,
     ]);
   }
   protected async startLoadLibs(): Promise<void> {
@@ -154,6 +159,7 @@ export class CanvasDraw extends DisposableImpl {
         canvas: element,
         backgroundColor,
         assetsURI: this.opts.assetsURI, // 资源路径
+        isSnapshot: this.opts.isSnapshot,
         isIDE: true,
       });
       this.renderWidget.toDispose.push(Disposable.create(() => {
@@ -161,7 +167,8 @@ export class CanvasDraw extends DisposableImpl {
           this.renderWidgetDispose.dispose();
           this.renderWidgetDispose = undefined;
         }
-        this.opts.host.removeChild(element);
+        element.remove();
+        // this.opts.host.removeChild(element);
         this.renderWidget = undefined;
         this.booted = false;
         this.loading = true;
@@ -173,7 +180,8 @@ export class CanvasDraw extends DisposableImpl {
         });
       }));
       this.renderWidgetDispose = this.toDispose.push(this.renderWidget);
-      this.renderWidget.start().then(() => {
+      Promise.resolve(this.renderWidget.start()).then(() => {
+        this.onRenderWidgetCreateEmitter.fire(this.renderWidget!);
         this.booted = true;
         this.draw();
       });
@@ -250,9 +258,11 @@ export class CanvasDraw extends DisposableImpl {
     if (!gameObject) {
       const gameObjectChildren = children ? children.map(c => gameObjectCache.get(Editor2dNode.getNodePath(c))!) : [];
       try {
-        gameObject = scene.createAuto({...nodeData, id: nodePath, depth: currentDepth, parentId},
-          gameObjectChildren,
-        );
+        const d = { ...nodeData, id: nodePath, depth: currentDepth, parentId };
+        if (d.mask) {
+          d.mask = `${parentId}/${d.mask}`;
+        }
+        gameObject = scene.createAuto(d, gameObjectChildren);
       } catch (e) {
         console.error(e);
         return depth;
@@ -262,6 +272,7 @@ export class CanvasDraw extends DisposableImpl {
         this.gameObjectCache.delete(nodePath);
         this.nodeVersionCache.delete(nodePath);
         this.nodeCache.delete(nodePath);
+        this.maskCache.delete(nodePath);
         this.onGameObjectChangeEmitter.fire({ type: GameObjectEventType.DESTROY, gameObject: gameObject!, node: this.nodeCache.get(nodePath)! });
       });
       scene.onGameObjectUpdate(gameObject, () => {
@@ -273,6 +284,7 @@ export class CanvasDraw extends DisposableImpl {
       });
       scene.onGameObjectCreate(gameObject, () => {
         this.nodeVersionCache.set(nodePath, newVersion);
+        this.maskCache.set(nodePath, { mask: node.mask, isMask: node.isMask, ignoreMask: node.ignoreMask });
         // 根节点创建完成则代表加载完成
         this.fireLoading(Editor2dNode.isRootNode(this.nodeCache.get(nodePath)!));
       });
@@ -292,11 +304,11 @@ export class CanvasDraw extends DisposableImpl {
       });
       firstCreate = true;
     }
-    if (gameObject && gameObject.getTextureId) {
-      const oldTexture = gameObject.getTextureId();
-      const newTexture = nodeData.textureId;
+    if (gameObject && gameObject.needResource) {
+      const oldTexture = gameObject.data.textureId! || '';
+      const newTexture = nodeData.textureId || '';
       // 素材更新则销毁重新创建
-      if (oldTexture !== newTexture) {
+      if (oldTexture.toString() !== newTexture.toString()) {
         gameObject.dispose();
         this.nodeCache.set(nodePath, node);
         return this.updateGameObject(scene, node, currentDepth, renderKeys, isInside, parentId);
@@ -304,15 +316,22 @@ export class CanvasDraw extends DisposableImpl {
     }
     const update = () => {
       const oldVersion = this.nodeVersionCache.get(nodePath);
-      if (nodeChanged || oldVersion !== newVersion) {
-        gameObject!.update({
+      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 d = {
           ...nodeData,
           parentId,
           id: nodePath,
           textureId: nodeData.textureId,
           depth: currentDepth,
-        });
+        };
+        if (d.mask) {
+          d.mask = `${parentId}/${d.mask}`;
+        }
+        gameObject!.update(d);
         this.nodeVersionCache.set(nodePath, newVersion);
+        this.maskCache.set(nodePath, { mask: node.mask, isMask: node.isMask, ignoreMask: node.ignoreMask });
       }
     };
     if (!firstCreate && gameObject.created) {
@@ -388,11 +407,6 @@ export class CanvasDraw extends DisposableImpl {
      * 加载scene的资源文件并渲染
      */
     this.renderWidget.loadCurrentScene();
-    /**
-     * 动态计算画布宽高
-     */
-    // const enlargeBounds = this.selectionEntityManager.getEntityEnlargeBounds(CANVAS_MIN_WIDTH, CANVAS_MIN_HEIGHT);
-    // this.renderWidget.updateCanvasBounds(enlargeBounds);
     this.onDrawEmitter.fire(size);
   }
 }

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

@@ -1,4 +1,4 @@
-import { entity, Layer } from '@gedit/playground';
+import { entity, Layer, PipelineDimension } from '@gedit/playground';
 import { DocumentEntity } from './entities';
 import { domUtils } from '@gedit/utils/lib/browser';
 import { PlaygroundContext2d } from './playground-context';
@@ -6,6 +6,8 @@ import { Editor2dDocument } from '../model';
 import { Rectangle } from '@gedit/math';
 import { SelectionEntityManager } from './selection-entity-manager';
 import { CanvasDraw, CanvasDrawLoadingState, GameObjectChangeEvent, GameObjectEventType } from './canvas-draw';
+import { debounce } from '@gedit/utils';
+import { GameWidgetIDE } from '@gedit/render-engine-ide';
 
 export class CanvasLayer extends Layer<PlaygroundContext2d> {
   @entity(DocumentEntity) documentEntity: DocumentEntity;
@@ -30,6 +32,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     });
     this.toDispose.pushAll([
       this.canvasDrawer,
+      this.canvasDrawer.onRenderWidgetCreate(this.onWidgetUpdate.bind(this)),
       this.canvasDrawer.onGameObjectChange(this.onGameObjectChange.bind(this)),
       this.canvasDrawer.onLoading(this.updateLoading.bind(this)),
       this.listenPlaygroundEvent('mousedown', () => {
@@ -101,11 +104,30 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       }
     }
   }
-
-  onZoom(): void {
+  protected onWidgetUpdate(renderWidget: GameWidgetIDE): void {
     const config = this.config.config;
     this.canvasDrawer?.refreshScale(true, config.zoom);
+    renderWidget.onPlaygroundResize?.(config, config.scrollX, config.scrollY);
   }
+
+  onZoom = debounce(() => {
+    const config = this.config.config;
+    this.canvasDrawer?.refreshScale(true, config.zoom);
+  });
+  onResize = debounce((size: PipelineDimension) => {
+    const renderWidget = this.canvasDrawer?.renderWidget;
+    if (renderWidget) {
+      const config = this.config.config;
+      renderWidget.onPlaygroundResize?.(size, config.scrollX, config.scrollY);
+    }
+  });
+  onScroll = debounce((scroll: { scrollX: number; scrollY: number }) => {
+    const renderWidget = this.canvasDrawer?.renderWidget;
+    if (renderWidget) {
+      renderWidget.onPlaygroundScroll?.(scroll.scrollX, scroll.scrollY);
+    }
+  });
+
   private currentRectangle: Rectangle | undefined;
   // private currentResolution = 1;
 

package/src/browser/playground/entities/extend-entity.ts

@@ -0,0 +1,37 @@
+import { ConfigEntity, EntityJSON } from '@gedit/playground';
+
+export interface ExtendData {
+  selectColorUUid?: string
+}
+
+export class ExtendEntity extends ConfigEntity<ExtendData> {
+  static type = 'ExtendConfigEntity';
+  getDefaultConfig(): ExtendData {
+    return {
+
+    };
+  }
+  /*
+  /!**
+   * 会触发CanvasLayer刷新
+   * @param oldData
+   * @param newData
+   *!/
+  checkChanged(oldData: DocumentData, newData: Partial<DocumentData>): boolean {
+    // 只判断version变化
+    if (newData.document) {
+      return oldData.document !== newData.document || oldData.version !== newData.version;
+    }
+    return false;
+  }
+*/
+
+  toJSON(): EntityJSON {
+    return {
+      type: this.type,
+      id: this.id,
+      ableList: this.ables.toJSON(),
+      dataList: []
+    };
+  }
+}

package/src/browser/playground/entities/index.ts

@@ -1,3 +1,4 @@
 export * from './document-entity';
 export * from './editor2d-entity';
+export * from './extend-entity';
 

package/src/browser/playground/extend-edit-layer-point-event.tsx

@@ -0,0 +1,71 @@
+import * as React from 'react';
+
+export interface DifferProps {
+  x: number;
+  y: number;
+  current: { x: number; y: number };
+  start: { x: number; y: number };
+  prev?: { x: number; y: number };
+}
+
+interface Props {
+  className?: string;
+  active?: boolean;
+  pointClassName?: string;
+  style?: React.CSSProperties;
+  pointStyle?: React.CSSProperties;
+  onChange?: (differ: DifferProps) => void;
+  onMouseDown?: (e: React.MouseEvent) => void;
+  onMouseUp?: (e: MouseEvent) => void;
+}
+
+export default (props: Props) => {
+  const startPoint = React.useRef<{ x: number; y: number }>();
+  const prevPoint = React.useRef<{ x: number; y: number }>();
+  const onMouseUp = (e: MouseEvent) => {
+    startPoint.current = undefined;
+    prevPoint.current = undefined;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    props.onMouseUp?.(e);
+  };
+  const onMouseMove = (e: MouseEvent) => {
+    if (startPoint.current) {
+      const x = e.clientX;
+      const y = e.clientY;
+      props.onChange?.({
+        x: x - startPoint.current.x,
+        y: y - startPoint.current.y,
+        current: { x, y },
+        prev: prevPoint.current,
+        start: startPoint.current,
+      });
+      prevPoint.current = {
+        x: e.clientX,
+        y: e.clientY,
+      };
+    }
+  };
+  const onMouseDown = (e: React.MouseEvent) => {
+    startPoint.current = {
+      x: e.clientX,
+      y: e.clientY,
+    };
+    prevPoint.current = {
+      x: e.clientX,
+      y: e.clientY,
+    };
+    props.onMouseDown?.(e);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+  };
+  return (
+    <div className={props.className} style={props.style}>
+      <div
+        className={props.pointClassName}
+        style={props.pointStyle}
+        onMouseDown={onMouseDown}
+      />
+    </div>
+  );
+};