@gedit/editor-2d 0.2.47 → 0.2.49

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

@@ -88,6 +88,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       () => !!this.documentEntity.config?.visible
     );
     this.canvasDrawer = new CanvasDraw({
+      entityManager: this.entityManager,
       host: this.node,
       renderEngine: this.context.renderEngine,
       assetsURI: this.getAssetsURI(),
@@ -105,6 +106,14 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     ]);
     // 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();
+        }
+      }));
+    }
   }
   onContainerInitOrigin(
     entity?: Editor2dEntity,
@@ -148,28 +157,26 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       }
     }
   };
-  onUpdateEntity(update: boolean): void {
-    clearTimeout(this.updateTimeout);
-    this.updateTimeout = setTimeout(() => {
-      const updateList = getListData(this.updateList);
-      updateList.forEach(item => {
-        if (item.disposed) {
-          return;
-        }
-        // console.log('------------------updateddddddddddddddd-----------', item.name);
-        this.selectionEntityManager.updateEntity(item.id, item);
-        const entity = this.selectionEntityManager.nodeEntitiesCache.get(item.id);
-        this.onContainerInitOrigin(entity, update);
-      });
-      this.updateList = [];
-    }, 150);
-  }
+  onUpdateEntity = debounce((update: boolean) => {
+    const updateList = getListData(this.updateList);
+    updateList.forEach(item => {
+      if (item.disposed) {
+        return;
+      }
+      // console.log('------------------updateddddddddddddddd-----------', item);
+      this.selectionEntityManager.updateEntity(item.id, item, this.config.config.zoom);
+      const entity = this.selectionEntityManager.nodeEntitiesCache.get(item.id);
+      this.onContainerInitOrigin(entity, update);
+    });
+    this.updateList = [];
+  });
+
   onGameObjectChange(e: GameObjectChangeEvent): void {
-    const { gameObject, state } = e;
+    const { gameObject, state, node } = e;
     switch (e.type) {
       case GameObjectEventType.CREATE:
-        this.document?.updateNode(e.node, { error: undefined });
-        this.selectionEntityManager.createEntity(gameObject.id, e.node, gameObject!, !!state?.selectable, !!state?.adsorbable);
+        this.document?.updateNode(node, { error: undefined });
+        this.selectionEntityManager.createEntity(gameObject.id, node, gameObject!, !!state?.selectable, !!state?.adsorbable);
         break;
       case GameObjectEventType.DESTROY:
         this.selectionEntityManager.removeEntity(gameObject.id);
@@ -179,12 +186,12 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         // console.log('------------------update-----------', gameObject.name);
         if (!this.updateList.includes(gameObject)) {
           this.updateList.push(gameObject);
-          this.nodeCache.set(gameObject.id, e.node);
+          this.nodeCache.set(gameObject.id, node);
         }
         this.onUpdateEntity(true);
         break;
       case GameObjectEventType.ERROR:
-        this.document?.updateNode(e.node, {error: e.error});
+        this.document?.updateNode(node, {error: e.error});
         break;
     }
     this.context.onCanvasDataChangedEmitter.fire(this.canvasDrawer!);
@@ -207,7 +214,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     if (!this.config.loading && !reload) return;
     if (loaded || allCount <= currentCount || allCount === 0) {
       this.config.loading = false;
-      this.tryToResizeToCenter();
+      // this.tryToResizeToCenter();
       this.node.classList.add('ready');
       this.loaded();
     } else {
@@ -236,6 +243,15 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
   onZoom = debounce(() => {
     const config = this.config.config;
     this.canvasDrawer?.refreshScale(true, config.zoom);
+    const selectedEntities = this.selectionEntityManager.getSelectedEntities();
+    if (this.document?.engineName === 'dom' && selectedEntities?.length) {
+      selectedEntities.forEach(c => {
+        const {gameObject} = c;
+        if (gameObject) {
+          this.selectionEntityManager.updateEntity(gameObject.id, gameObject, this.config.config.zoom);
+        }
+      });
+    }
   });
   onResize = debounce((size: PipelineDimension) => {
     const renderWidget = this.canvasDrawer?.renderWidget;
@@ -254,11 +270,11 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
   private currentRectangle: Rectangle | undefined;
   // private currentResolution = 1;
 
-  tryToResizeToCenter(): void {
+  tryToResizeToCenter = debounce(() => {
     const {visible } = this.documentEntity.config;
     // const resolution = appConfig?.resolution || 1;
     const size = this.canvasDrawer?.getSceneSize();
-    if (!visible || !size || this.config.loading || 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;
@@ -268,7 +284,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       this.config.scrollPageBoundsToCenter(true, 16, !this.context.options.isTemplate)
         .then(() => this.onZoom());
     }
-  }
+  }, 100); // 打开时会有一次 tag 大小的视图，宽是 98px,,dom 下没有引擎加载，会响应 98 宽，加 100 ms 延时
   draw(): void {
     const config = this.documentEntity.config;
     const document = config.document;

package/src/browser/playground/playground-contribution.ts

@@ -18,7 +18,7 @@ import { HistoryService } from '@gedit/history';
 import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
 import { ContextMenuRenderer } from '@gedit/layout';
 import { CommandService } from '@gedit/command';
-import { CommonCommands } from '@gedit/application-common/lib/browser';
+import { CommonCommands, FrontendApplicationStateService } from '@gedit/application-common/lib/browser';
 import { ExtendEditLayer, EXTEND_EDIT_STATE } from './extend-edit-layer';
 import { Editor2dSelection } from '../model/editor2d-selection';
 
@@ -32,6 +32,7 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(ContextMenuRenderer) readonly menuRender: ContextMenuRenderer;
   @inject(Editor2dSelection) readonly editor2dSelection: Editor2dSelection;
   @inject(PathPointSelectionService) readonly pathPointSelectionService: PathPointSelectionService;
+  @inject(FrontendApplicationStateService) readonly stateService: FrontendApplicationStateService;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
     registry.registerLayer(PathEditLayer);
@@ -110,8 +111,19 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
         percentageInfoVisible: false,
       });
     }
-    playground.getConfigEntity<SnaplineConfigEntity>(SnaplineConfigEntity).updateConfig({
-      originlineVisible: isComponent, // 是否隐藏原点线条，如果是组件模式则显示
+    const snaplineEntity = playground.getConfigEntity<SnaplineConfigEntity>(SnaplineConfigEntity);
+    snaplineEntity.updateConfig({
+      lines: [],
+      originlineVisible: this.appConfig.configData?.engine === 'dom' ? false : isComponent, // 是否隐藏原点线条，如果是组件模式则显示
+    });
+    this.stateService.onStateChanged(state => {
+      if (state === 'initialized_layout') {
+        // 部局完成后再是否显示中心线，pixi 组件用
+        snaplineEntity.updateConfig({
+          lines: [],
+          originlineVisible: this.appConfig.configData?.engine === 'dom' ? false : isComponent,
+        });
+      }
     });
     playground.toDispose.push(
       // TODO 放在这里处理会增加复杂度

package/src/browser/playground/selection-entity-manager.tsx

@@ -120,6 +120,12 @@ export class SelectionEntityManager {
     entity.nodeId = node.id;
     entity.context = this.context;
     entity.transform.sizeToScale = !!deco.sizeToScale;
+    if (deco.useComponentSceneSize) {
+      entity.transform.componentSceneSize = {
+        width: gameObject.data.scene?.width || 400,
+        height: gameObject.data.scene?.height || 400,
+      };
+    }
 
     this.setTransformMask(entity, nodePath, node);
     // 切换选择框的类型，如圆形、矩形, 默认矩形
@@ -209,7 +215,7 @@ export class SelectionEntityManager {
       entity.dispose();
     }
   }
-  updateEntity(nodePath: string, gameObject: GameObject): void {
+  updateEntity(nodePath: string, gameObject: GameObject, scale?: number): void {
     const register = this.context.renderEngine.getGameObjectIDERegister(gameObject.scene.config.engine, gameObject.type);
     const deco = register.decoration;
     const entity = this.nodeEntitiesCache.get(nodePath);
@@ -225,7 +231,13 @@ export class SelectionEntityManager {
       }
     }
     entity.transform.isContainer = !!deco.isContainer;
-    entity.update(register.getSelectionData(gameObject));
+    if (deco.useComponentSceneSize) {
+      entity.transform.componentSceneSize = {
+        width: gameObject.data.scene?.width || 400,
+        height: gameObject.data.scene?.height || 400,
+      };
+    }
+    entity.update(register.getSelectionData(gameObject, scale));
     entity.ignoreTransformChanged = false;
     const sizeVisible = !this.isHidden(entity.node); // && (entity.transform.size.width > 0 && entity.transform.size.height > 0 || !!deco.isContainer);
     const opacityZero = this.isOpacityZero(node);
@@ -239,7 +251,9 @@ export class SelectionEntityManager {
     entity.selected = !!node?.selected;
     // 更新zIndex, 每次都要更新，因为节点拖拽会导致所有的zIndex顺序错乱
     entity.zIndex = gameObject.data.depth || 0;
-    this.setTransformMask(entity, nodePath, node);
+    // 更新是否隐藏
+    entity.transform.visible = !this.isHidden(gameObject.data as Editor2dNode);
+    this.setTransformMask(entity, nodePath, gameObject.data as Editor2dNode);
   }
   getSelectedEntities(): Editor2dEntity[] {
     const selectedEntities: Editor2dEntity[] = [];

package/src/browser/style/index.less

@@ -55,3 +55,9 @@
     background-color: var(--g-icon-foreground);
 }
 
+
+.gedit-editor-snapshots {
+    position: absolute;
+    z-index: -9999;
+    opacity: 0;
+}

package/src/browser/utils/snapshot.ts

@@ -76,7 +76,7 @@ export class SnapshotCreator extends DisposableImpl {
     if (!host) {
       host = document.createElement('div');
       host.className = 'gedit-editor-snapshots';
-      host.style.display = 'none';
+      // host.style.display = 'none';
       document.body.appendChild(host);
     }
     this.drawer = new CanvasDraw({