@gedit/editor-2d 0.1.97 → 0.1.98

package/src/browser/model/editor2d.ts

@@ -189,7 +189,7 @@ export namespace Editor2dNode {
       parent: undefined,
       name: uri.displayName,
       children: [],
-      visible: true,
+      visible: false,
       expanded: true,
       selected: false,
       locked: false,
@@ -248,7 +248,7 @@ export async function getEditor2dModelOpts(resource: Resource, resourceService:
   const options: ResourceAutoSaveOptions = {
     encoding,
     resource,
-    saveAsString: e => Editor2dContent.parseToString({version: e.document.version, content: e.document.root, snaplines: e.document.snaplines})
+    saveAsString: e => Editor2dContent.parseToString({version: e.document.saveVersion, content: e.document.root, snaplines: e.document.snaplines})
   };
   const autoSaveService = await resourceService.createAutoSaveResource(options);
   return {

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

@@ -61,7 +61,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
         this.document?.updateNode(e.node, {error: e.error});
         break;
     }
-    this.context.onCanvasDataChanged(this.canvasDrawer!);
+    this.context.onCanvasDataChangedEmitter.fire(this.canvasDrawer!);
   }
 
   getAssetsURI(): string {

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

@@ -2,7 +2,7 @@ import { inject, injectable } from 'inversify';
 import { RenderEngineIDEService } from '@gedit/render-engine-ide';
 import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
 import { AppConfigService } from '@gedit/app-config';
-import { debounce, URI } from '@gedit/utils';
+import { debounce, Emitter, URI } from '@gedit/utils';
 import { Editor2dEntity } from './entities/editor2d-entity';
 import type { SelectionEntityManager } from './selection-entity-manager';
 import { Playground, Selectable } from '@gedit/playground';
@@ -16,10 +16,15 @@ import type { CanvasDraw } from './canvas-draw';
 
 export const Editor2dPlayGround = Symbol('Editor2dPlayGround');
 
-export type Editor2dPlayGround = Playground;
+export type Editor2dPlayGround = Playground<PlaygroundContext2d>;
 
 @injectable()
 export class PlaygroundContext2d {
+  readonly onCanvasDataChangedEmitter = new Emitter<CanvasDraw>();
+  /**
+   * 监听画布变化，可用于生成缩略图
+   */
+  readonly onCanvasDataChanged = this.onCanvasDataChangedEmitter.event;
   constructor(
     @inject(RenderEngineIDEService) readonly renderEngine: RenderEngineIDEService,
     @inject(Editor2dDocument) readonly document: Editor2dDocument,
@@ -29,12 +34,9 @@ export class PlaygroundContext2d {
     @inject(Editor2dModelOptions) readonly options: Editor2dModelOptions,
     @inject(Editor2dContextKeyService) readonly contextKeyService: Editor2dContextKeyService
   ) {
-  }
-
-  // 画布数据更新
-  onCanvasDataChanged(drawer: CanvasDraw): void {
-    if (this.options.onCanvasDataChanged) {
-      this.options.onCanvasDataChanged(drawer);
+    this.document.toDispose.push(this.onCanvasDataChangedEmitter);
+    if (options.onCanvasDataChanged) {
+      this.onCanvasDataChanged(drawer => options.onCanvasDataChanged!(drawer));
     }
   }
   /**

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

@@ -15,15 +15,17 @@ import { CanvasDrawLayer } from './canvas-draw-layer';
 import { AppConfigData, AppConfigService } from '@gedit/app-config';
 import { HistoryService } from '@gedit/history';
 import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
-import { ApplicationShell, ContextMenuRenderer } from '@gedit/layout';
+import { ContextMenuRenderer } from '@gedit/layout';
+import { CommandService } from '@gedit/command';
+import { CommonCommands } from '@gedit/application-common/lib/browser';
 
 @injectable()
 export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(AppConfigService) readonly appConfig: AppConfigService;
   @inject(Editor2dModelOptions) readonly modelOpts: Editor2dModelOptions;
   @inject(HistoryService) readonly historyService: HistoryService;
-  @inject(ApplicationShell) readonly appShell: ApplicationShell;
   @inject(PlaygroundConfig) readonly config: PlaygroundConfig;
+  @inject(CommandService) readonly commandService: CommandService;
   @inject(ContextMenuRenderer) readonly menuRender: ContextMenuRenderer;
   registerPlayground(registry: PlaygroundRegistry): void {
     registry.registerLayer(CanvasLayer);
@@ -56,7 +58,10 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
         priority: 6,
         cancelMode: 'once',
         handle: () => {
-          this.appShell.toggleMaximized();
+          this.commandService.executeCommand(CommonCommands.TOGGLE_MAXIMIZED.id);
+          setTimeout(() => {
+            playground.config.scrollPageBoundsToCenter();
+          }, 10);
         }
       });
       stateEntity.registerState({

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

@@ -12,6 +12,22 @@ import type { PlaygroundContext2d } from './playground-context';
 import { Rectangle } from '@gedit/math';
 import { GameObject } from '@gedit/render-engine';
 
+const numberToFixed4 = (data: {[key: string]: any}) => {
+  const d: any = {};
+  Object.keys(data).forEach(key => {
+    const value = data[key];
+    // 旋转不能四舍五入，不然属性面板旋转角度误差很大
+    if (typeof value === 'number' && key !== 'rotation') {
+      d[key] = parseFloat(value.toFixed(6));
+    } else if (typeof value === 'object') {
+      d[key] = numberToFixed4(value);
+    } else {
+      d[key] = value;
+    }
+  });
+  return d;
+};
+
 /**
  * 选择器实体相关逻辑
  */
@@ -95,23 +111,9 @@ export class SelectionEntityManager {
         lastTransform = newTransform;
         return;
       }; */
+      newTransform = numberToFixed4(newTransform);
       // const delta = TransformSchema.getDelta(lastTransform, newTransform);
-      const numberToFixed4 = (data: {[key: string]: any}) => {
-        const d: any = {};
-        Object.keys(data).forEach(key => {
-          const value = data[key];
-          if (typeof value === 'number') {
-            d[key] = parseFloat(value.toFixed(6));
-          } else if (typeof value === 'object') {
-            d[key] = numberToFixed4(value);
-          } else {
-            d[key] = key;
-          }
-        });
-        return d;
-      };
-
-      document.updateNode(entity.nodeId, numberToFixed4(newTransform), true);
+      document.updateNode(entity.nodeId, newTransform, true);
       // lastTransform = newTransform;
     });
     // 设置控制key

package/src/browser/style/canvas-draw-layer.less

@@ -8,7 +8,7 @@
     position: absolute;
     width: 8px;
     height: 8px;
-    border-radius: 4px;
+    border-radius: var(--g-small-radius);
     margin-top: -4px;
     margin-left: -4px;
     background-color: var(--g-playground-select);

package/src/browser/style/index.less

@@ -17,7 +17,6 @@
     height: 16px;
     color: var(--g-foreground);
     background-color: var(--g-foreground);
-    margin-right: 4px;
     vertical-align: center;
     opacity: 0.7;
     background-repeat: no-repeat;

package/src/browser/utils/snapshot.ts

@@ -1,5 +1,15 @@
 import { CanvasDraw, CanvasDrawOpts } from '../playground/canvas-draw';
-import { Disposable, DisposableCollection, DisposableImpl, Emitter, PromiseDeferred, SizeSchema } from '@gedit/utils';
+import {
+  Disposable,
+  DisposableCollection,
+  DisposableImpl,
+  URI,
+  Emitter,
+  PromiseDeferred,
+  SizeSchema,
+  debounce
+} from '@gedit/utils';
+import type { Editor2dModel } from '../model/editor2d-model';
 import { Editor2dNode } from '../model';
 import { GameConfig } from '@gedit/render-engine/lib/common';
 
@@ -77,7 +87,22 @@ export class SnapshotCreator extends DisposableImpl {
       this.onUpdateEmitter,
     ]);
   }
-
+  /**
+   * 清楚缓存数据
+   */
+  clearResultCache(includeUris: string[]): void {
+    Object.keys(this.result).forEach(key => {
+      if (!includeUris.includes(key)) {
+        delete this.result[key];
+      }
+    });
+  }
+  getResultFromCache(): Snapshot[] {
+    return Object.keys(this.result).map(k => this.result[k]);
+  }
+  updateResultCache(data: Snapshot): void {
+    this.result[data.uri] = data;
+  }
   getSnapshot(uri: string): Snapshot | undefined {
     return this.result[uri];
   }
@@ -91,10 +116,7 @@ export class SnapshotCreator extends DisposableImpl {
     await this.process();
     return scenes.map(s => this.result[s.uri]!);
   }
-  getResult(): Snapshot[] {
-    return Object.keys(this.result).map(k => this.result[k]);
-  }
-  protected async process(): Promise<void> {
+  protected process(): Promise<void> {
     if (this.processing) {
       return this.processing.promise;
     }
@@ -143,15 +165,39 @@ export class SnapshotCreator extends DisposableImpl {
       this.current = next;
       this.drawer.renderWidget?.currentScene?.dispose();
       const appConfig = typeof  this.opts.appConfig === 'function' ? this.opts.appConfig() : this.opts.appConfig;
+      let content: Editor2dNode = next.content;
+      // Empty
+      if (!content || !content.children || Object.keys(content).length === 0) {
+        content = Editor2dNode.createRootNode(new URI(next.uri));
+        const attrs = this.opts.renderEngine.getDisplayDefaultData(this.opts.engineName, content.displayType);
+        Object.assign(content, { ...attrs });
+      }
       this.drawer.update({
         visible: true,
         uri: next.uri,
         engineName: this.opts.engineName,
         appConfig,
-        content: next.content,
+        content,
       });
     } else {
       end();
     }
   }
+  /**
+   * 监听变化，并自动刷新缩略图缓存
+   * @param model
+   * @param fn
+   * @param quility 缩略图质量
+   * @param delay 延迟生成
+   */
+  listenModelChanged(model: Editor2dModel, fn: (imageData: string) => void, quility = 0.1, delay = 1000): Disposable {
+    return model.playground.context.onCanvasDataChanged(debounce(drawer => {
+      const {content, visible} = drawer.getData() || {};
+      if (!content || drawer.loading) return;
+      if (visible) {
+        const widget = drawer.renderWidget!;
+        widget.createSnapShot(this.opts.imageType, quility).then((base64: string) => fn(base64));
+      }
+    }, delay));
+  }
 }