@gedit/editor-2d 0.1.97 → 0.1.100

package/src/browser/editor2d-service.ts

@@ -5,7 +5,7 @@ import {
   SelectionService,
 } from '@gedit/application-common';
 import { Editor2dModel } from './model/editor2d-model';
-import { EditorAccess, EditorManager, EditorWidget } from '@gedit/editor';
+import { EditorAccess, EditorDocumentChangeEvent, EditorManager, EditorWidget } from '@gedit/editor';
 import { Editor2dNode } from './model/editor2d';
 import { Editor2dDocument } from './model/editor2d-document';
 import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
@@ -17,6 +17,10 @@ export interface Editor2dSelectedNodesChangedEvent {
   document: Editor2dDocument | undefined; // 如果为空，代表当前没有在编辑文档
 }
 
+export interface Editor2dModelContentChangedEvent extends Editor2dSelectedNodesChangedEvent {
+  event: EditorDocumentChangeEvent<Editor2dDocument>
+}
+
 @injectable()
 export class Editor2dService {
   @inject(SelectionService) protected readonly selectionService: SelectionService;
@@ -59,7 +63,21 @@ export class Editor2dService {
       fn(this.getCurrentModel());
     });
   }
-  onDeleteNode(fn: (e: Editor2dSelectedNodesChangedEvent & { deleteNodes: Editor2dNode[] }) => void): Disposable {
+  onDeleteNode(fn: (e: Editor2dModelContentChangedEvent & { deleteNodes: Editor2dNode[] }) => void): Disposable {
+    return this.onCurrentModelContentChanged(e => {
+      if (e.event.type === 'delete') {
+        return fn({
+          ...e,
+          deleteNodes: (e.event.nodes as Editor2dNode[]) || [],
+        });
+      }
+    });
+  }
+  /**
+   * 内容修改触发
+   * @param fn
+   */
+  onCurrentModelContentChanged(fn: (e: Editor2dModelContentChangedEvent) => void): Disposable {
     const self = this;
     let model: Editor2dModel | undefined;
     const toDispose = new DisposableCollection();
@@ -71,15 +89,13 @@ export class Editor2dService {
       preDispose.dispose();
       preDispose = new DisposableCollection();
       if (model) {
-        preDispose.push(model.onDocumentContentChanged(e => {
-          if (e.type === 'delete') {
-            fn({
-              selectedNodes: model?.selection.selectedNodes || [],
-              deleteNodes: (e.nodes as Editor2dNode[]) || [],
-              document: model?.document,
-              model,
-            });
-          }
+        preDispose.push(model.onDocumentContentChanged(event => {
+          fn({
+            selectedNodes: model?.selection.selectedNodes || [],
+            document: model?.document,
+            model,
+            event
+          });
         }));
       }
       toDispose.push(preDispose);
@@ -153,3 +169,9 @@ export class Editor2dService {
     return toDispose;
   }
 }
+
+export namespace Editor2dService {
+  // 动态获取, 用于循环依赖情况, 可以在AppShell加载之后使用
+  export type Provider = () => Editor2dService;
+  export const Provider = Symbol('Editor2dService.Provider');
+}

package/src/browser/model/editor2d-document.ts

@@ -12,7 +12,13 @@ import {
   PromiseDeferred,
   URI,
 } from '@gedit/utils';
-import { Editor2dContainerNode, Editor2dContent, Editor2dModelOptions, Editor2dNode, } from './editor2d';
+import {
+  checkDuplicateNodes,
+  Editor2dContainerNode,
+  Editor2dContent,
+  Editor2dModelOptions,
+  Editor2dNode,
+} from './editor2d';
 import { GameObject, GameObjectBaseType, GameObjectType } from '@gedit/render-engine';
 import { GameObjectDecoration, RenderEngineIDEService } from '@gedit/render-engine-ide';
 import { CompositeTreeNode, ExpandableTreeNode, Tree, TreeImpl, TreeNode } from '@gedit/tree';
@@ -36,7 +42,8 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
   readonly onSaved = this.onSavedEmitter.event;
   public animationStarted: boolean = false;
   protected animationIds: string[] = []; // 当前正在录制的动画节点
-  private _localVersion: number = versionId++;
+  private _localVersion: number = 0;
+  private _saveVersion: number = 0;
   protected errors: ResourceRefError[] = [];
   protected componentContents: { [key: string]: Editor2dNode } = {};
   protected _snaplines: any[] = [];
@@ -61,6 +68,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     super();
     this.toDispose.push(this.onContentChangedEmitter);
     this.toDispose.push(this.onSavedEmitter);
+    // this.toDispose.
     // this.toDispose.push(this.resourceAutoSaveService);
     this.toDispose.push(this.resourceAutoSaveService.onSyncContent(content => this.reloadContent(content || '')));
     this.toDispose.push(this.onSaved(event => this.resourceAutoSaveService.fireDidChangeContent(event)));
@@ -217,6 +225,11 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     //   }
     // }
     // 这里采用深度比较, 因为数据层次定义不会太多
+    if (data && data.id && data.id !== treeNode.id) {
+      alert('节点更新出错，不同节点无法互相覆盖');
+      console.error('无法覆盖同步节点数据: ', treeNode, data);
+      return;
+    }
     const changed = forceUpdate ? true : Compare.isDeepChanged(treeNode, data);
     if (changed) {
       Object.assign(treeNode, data);
@@ -264,7 +277,9 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     }
     if (data.content) {
       this._localVersion = data.content.version;
-      this.root = data.content;
+      (data.content as any).visible = false;
+      this._saveVersion = data.version || 0;
+      this.root = checkDuplicateNodes(data.content);
     } else {
       this.root = this.createRootNode();
     }
@@ -296,6 +311,10 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       this.onContentChangedEmitter.fire({ document: this, contentChanges: contents, nodes, type });
     }
     if (!this.loading && !noSave) {
+      this._saveVersion++;
+      if (this._saveVersion === Number.MAX_VALUE) {
+        this._saveVersion = 0;
+      }
       this.onSavedEmitter.fire({ document: this, contentChanges: contents, nodes, type });
     }
   };
@@ -576,7 +595,6 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
         });
         if (nodes.length) {
           // TODO: 音乐素材变更
-          console.log('document update to timeline', nodes, e.type);
           onNodeChange(nodes, e.type);
         }
       }
@@ -756,4 +774,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       this.fireContentChanged([], 'update');
     }
   }
+  get saveVersion(): number {
+    return this._saveVersion;
+  }
 }

package/src/browser/model/editor2d-selection.ts

@@ -2,10 +2,20 @@ import { injectable } from 'inversify';
 import { EditorDocumentSelection } from '@gedit/editor';
 import { TreeSelectionServiceImpl } from '@gedit/tree/lib/browser/tree-selection-impl';
 import { Editor2dNode } from './editor2d';
+import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
+import SelectionType = TreeSelection.SelectionType;
 
 @injectable()
 export class Editor2dSelection extends TreeSelectionServiceImpl implements EditorDocumentSelection {
   get selectedNodes(): Editor2dNode[] {
     return this.state.selection() as Editor2dNode[];
   }
+  clearSelection(): void {
+    this.selectedNodes.forEach(node =>
+      this.addSelection({
+        node: node as Readonly<SelectableTreeNode>,
+        type: SelectionType.TOGGLE
+      })
+    );
+  }
 }

package/src/browser/model/editor2d.ts

@@ -113,6 +113,14 @@ export namespace Editor2dNode {
     }
     return path.join('/');
   }
+  export function getDepth(node: Editor2dNode | Editor2dContainerNode | TreeNode): number {
+    let depth = 0;
+    while (node && !Editor2dNode.isRootNode(node)) {
+      depth ++;
+      node = node.parent as Editor2dContainerNode;
+    }
+    return depth;
+  }
   export function toLeafNode(node: Editor2dNode | Editor2dContainerNode): Editor2dNode {
     if (node.children) {
       delete node.children;
@@ -189,7 +197,7 @@ export namespace Editor2dNode {
       parent: undefined,
       name: uri.displayName,
       children: [],
-      visible: true,
+      visible: false,
       expanded: true,
       selected: false,
       locked: false,
@@ -248,7 +256,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 {
@@ -256,3 +264,23 @@ export async function getEditor2dModelOpts(resource: Resource, resourceService:
     autoSaveService,
   };
 }
+
+/**
+ * 检测重复节点数据, 可能为误操作造成，避免对编辑态造成影响
+ * @param node
+ */
+export function checkDuplicateNodes(node: Editor2dNode, map: { [key: string]: Editor2dNode } = {}): Editor2dNode {
+  if (node.children) {
+    node.children.slice().forEach((c: Editor2dNode) => {
+      if (map[c.id]) {
+        const index = node.children!.indexOf(c);
+        node.children!.splice(index, 1);
+        console.log('>>> 清除重复数据: ', c.name);
+      } else {
+        map[c.id] = c;
+        checkDuplicateNodes(c, map);
+      }
+    });
+  }
+  return node;
+}

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 {
+  debounce,
+  Disposable,
+  DisposableCollection,
+  DisposableImpl,
+  Emitter,
+  PromiseDeferred,
+  SizeSchema,
+  URI
+} 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,45 @@ 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;
+        if (widget) {
+          widget.createSnapShot(this.opts.imageType, quility).then((base64: string) => {
+            if (base64) {
+              fn(base64);
+            }
+          });
+        }
+      }
+    }, delay));
+  }
 }