@gedit/editor-2d 0.1.115 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gedit/editor-2d",
-  "version": "0.1.115",
+  "version": "0.2.0",
   "license": "MIT",
   "main": "lib/browser/index",
   "typings": "lib/browser/index.d.ts",
@@ -9,11 +9,13 @@
     "src"
   ],
   "dependencies": {
-    "@gedit/app-config": "^0.1.110",
-    "@gedit/editor": "^0.1.83",
-    "@gedit/playground": "^0.1.92",
-    "@gedit/render-engine-ide": "^0.1.114",
-    "@gedit/workspace-2d": "^0.1.89",
+    "@gedit/app-config": "^0.2.0",
+    "@gedit/editor": "^0.2.0",
+    "@gedit/playground": "^0.2.0",
+    "@gedit/render-engine-ide": "^0.2.0",
+    "@gedit/workspace-2d": "^0.2.0",
+    "bezier-js": "^4.0.3",
+    "clsx": "^1.1.1",
     "json-stringify-pretty-compact": "^2.0.0",
     "nanoid": "^3.3.2"
   },
@@ -35,5 +37,5 @@
   "nyc": {
     "extends": "../../configs/nyc.json"
   },
-  "gitHead": "8bdf36b3a3898da871ec15be92760865fc6a182a"
+  "gitHead": "cc40d9ce45193e6f024f79a94b5d0518325bf3ff"
 }

package/src/browser/editor2d-ref-provider-contribution.ts

@@ -3,6 +3,7 @@ import { ResourceRefError, ResourceRefInfo, ResourceRefProviderContribution } fr
 import { Editor2dDocument, Editor2dIterator, Editor2dNode } from './model';
 import { RenderEngineIDEService } from '@gedit/render-engine-ide';
 import { URI, arrayUnion } from '@gedit/utils';
+import { GameResource } from '@gedit/render-engine/lib/common/game-resource';
 
 /**
  * 分析资源依赖
@@ -27,19 +28,18 @@ export class Editor2dRefProviderContribution implements ResourceRefProviderContr
     return errors;
   }
 
-  getTextureIdRef(node: Editor2dNode): string | undefined {
-    if (node.textureId && !node.textureId.match(/^http/)) {
-      return `gedit/assets/${node.textureId}`;
-    }
+  getTextureIdRefs(node: Editor2dNode): string[] {
+    const textureIds = GameResource.toTextureIdList(node.textureId);
+    return textureIds.map(s => s.match(/^http/) ? '' : `gedit/assets/${s}`).filter(s => s);
   }
   async getRefInfo(uri: string, document: Editor2dDocument): Promise<ResourceRefInfo> {
     const dependencies: string[] = [];
     for (const node of new Editor2dIterator(document.root!)) {
       const register = this.renderEngineService.getGameObjectIDERegister(document.engineName, node.displayType);
-      const textureRef = this.getTextureIdRef(node);
-      if (textureRef) {
-        dependencies.push(textureRef);
-      }
+      const textureRefs = this.getTextureIdRefs(node);
+      textureRefs.forEach(r => {
+        dependencies.push(r);
+      });
       if (register.getReferenceUris) {
         const newUris = register.getReferenceUris(node);
         newUris.forEach((u: string) => {

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

@@ -1,4 +1,4 @@
-import { inject, injectable } from 'inversify';
+import { inject, injectable, optional } from 'inversify';
 import { EditorDocument, EditorDocumentChangeEvent } from '@gedit/editor';
 import {
   Compare,
@@ -6,9 +6,9 @@ import {
   Disposable,
   Emitter,
   Event,
-  mapValues,
   MaybePromise,
   omit,
+  debounce,
   PromiseDeferred,
   URI,
 } from '@gedit/utils';
@@ -18,6 +18,7 @@ import {
   Editor2dContent,
   Editor2dModelOptions,
   Editor2dNode,
+  // Editor2dNodeCache,
 } from './editor2d';
 import { GameObject, GameObjectBaseType, GameObjectType } from '@gedit/render-engine';
 import { GameObjectDecoration, RenderEngineIDEService } from '@gedit/render-engine-ide';
@@ -29,10 +30,35 @@ import { WorkspaceResourceService } from '@gedit/workspace-2d';
 import { ResourceProvider, ResourceRefError } from '@gedit/resource';
 import { AppConfigService } from '@gedit/app-config';
 import { Editor2dIterator } from './editor2d-iterator';
-import { getAnimationKeys, getChangeAnimationData } from './utils';
+// import { getAnimationKeys, getChangeAnimationData } from './utils';
+
+export const maskShowArray: GameObjectType[] = [
+  GameObjectBaseType.IMAGE,
+  GameObjectBaseType.RECTANGLE,
+  GameObjectBaseType.PATH,
+  GameObjectBaseType.CIRCLE,
+  GameObjectBaseType.POLYGON,
+  GameObjectBaseType.TEXT,
+  GameObjectBaseType.TRIANGLE,
+];
+export const maskEnabledArray: GameObjectType[] = [
+  GameObjectBaseType.GROUP,
+  GameObjectBaseType.PARTICLES,
+];
 
 let versionId = 0;
 
+export const Editor2dComponentProvider = Symbol('Editor2dComponentProvider');
+
+/**
+ * 组件内容修改后触发
+ */
+export interface Editor2dComponentProvider {
+  getComponentContent(compPath: string, parentNode: Editor2dNode): Editor2dNode[] | undefined;
+  onComponentChanged: Event<URI>;
+  onLoad: Event<void>;
+}
+
 @injectable()
 export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNode> implements Tree<Editor2dNode, Editor2dContainerNode>, EditorDocument {
   readonly type: 'Editor2dTree';
@@ -45,7 +71,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
   private _localVersion: number = 0;
   private _saveVersion: number = 0;
   protected errors: ResourceRefError[] = [];
-  protected componentContents: { [key: string]: Editor2dNode } = {};
+  // protected componentContents: { [key: string]: Editor2dNode } = {};
   protected _snaplines: any[] = [];
   public loading = true;
 
@@ -59,11 +85,12 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
   constructor(
     @inject(MessageService) protected readonly message: MessageService,
     @inject(Editor2dModelOptions) protected readonly options: Editor2dModelOptions,
-    @inject(ResourceProvider) protected readonly resourceProivder: ResourceProvider,
+    @inject(ResourceProvider) protected readonly resourceProvider: ResourceProvider,
     @inject(ResourceAutoSaveService) protected readonly resourceAutoSaveService: ResourceAutoSaveService,
     @inject(WorkspaceResourceService) protected readonly resourceService: WorkspaceResourceService,
     @inject(RenderEngineIDEService) readonly engineService: RenderEngineIDEService,
     @inject(AppConfigService) readonly appConfig: AppConfigService,
+    @inject(Editor2dComponentProvider) @optional() readonly componentProvider?: Editor2dComponentProvider,
   ) {
     super();
     this.toDispose.push(this.onContentChangedEmitter);
@@ -72,6 +99,21 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     // 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)));
+    // 组件数据加载
+    if (this.componentProvider) {
+      this.toDispose.push(this.componentProvider.onLoad(() => {
+        this.fireContentChanged([], 'update', true);
+      }));
+      // 组件数据更新
+      this.toDispose.push(this.componentProvider.onComponentChanged(debounce((compUri: URI) => {
+        if (this.uri === compUri.toString()) {
+          return;
+        }
+        if (this.hasIncludesComponent(compUri)) {
+          this.fireContentChanged([], 'update', true);
+        }
+      }, 1000)));
+    }
     // TODO
     // this.toDispose.push(this.resourceService.onRefsChange(async () => {
     // await this.loadRefInfos();
@@ -79,25 +121,37 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     // 同步数据
     this.resourceAutoSaveService.sync();
   }
+  protected hasIncludesComponent(compUri: URI): boolean {
+    if (!this.root) return false;
+    for (const node of new Editor2dIterator(this.root)) {
+      if (node !== this.root
+        && node.displayType === GameObjectBaseType.COMPONENT
+        && new URI((node as any).component?.id).displayName === compUri.displayName
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
 
   /**
    * 切换资源, 只有模板编辑器需要用到
    */
   async changeResource(uri: string): Promise<void> {
     const uriObj = new URI(uri);
-    const resource = await this.resourceProivder(uriObj);
+    const resource = await this.resourceProvider(uriObj);
     this.resourceAutoSaveService.changeResource(resource);
     this.resourceAutoSaveService.sync();
   }
 
-  /**
-   * 获取依赖的组件的内容
-   * @param compPath
-   * @param parentNode
-   */
+  // /**
+  //  * 获取依赖的组件的内容
+  //  * @param compPath
+  //  * @param parentNode
+  //  */
   getComponentContent(compPath: string, parentNode: Editor2dNode): Editor2dNode[] | undefined {
-    const comp = this.componentContents[compPath];
-    if (comp && comp.children) return comp.children.map(c => ({...c, parent: parentNode})) as Editor2dNode[];
+    if (!this.componentProvider) return undefined;
+    return this.componentProvider.getComponentContent(compPath, parentNode);
   }
 
   createDisplayNode<E extends Editor2dNode = Editor2dNode>(
@@ -203,6 +257,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     this.updateNode(targetNode, { name });
   }
   addChildren(node: Editor2dNode, parentNode: Editor2dContainerNode, index: number = 0): void {
+    this.clearMask(node);
     if (node.parent) {
       this.delNode(node, true);
     };
@@ -210,6 +265,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     parentNode.children.splice(index, 0, node);
     CompositeTreeNode.setParent(node, index, parentNode);
     (parentNode as ExpandableTreeNode).expanded = true;
+    this.nextMaskToNode(node);
     this.refresh(parentNode);
     this.fireContentChanged([node], node.parent ? 'update' : 'add');
   }
@@ -302,7 +358,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       this._snaplines = data.snaplines;
     }
     this.refresh();
-    this.loadRefInfos();
+    // this.loadRefInfos();
     this.fireContentChanged([], 'add', true);
   }
   reloadEnd(): void {
@@ -345,6 +401,173 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
   get onDirtyChanged(): Event<void> {
     return this.resourceAutoSaveService.onDirtyChanged;
   }
+  /**
+   * @mask 操作说明
+   * 1. 当前 isMask 为 true, 移除 prevNode 上的 mask, 移到相应的图层后再设。
+   * 2. 当前 isMask 为 true 且 mask 有值，只清除 mask;
+   * 3. 当前是 mask child，先移除 mask, 拖到指定后再判断下一个是否 mask, 再附值；
+   * 4. 当前不是 mask， 移到 mask 树下，，设定下一个 node 上的 mask， 如果下一个 node 是 mask, 直接附值 id;
+   */
+  protected clearMask(node: Editor2dNode): void {
+    // 只 mask 状态时, 移除 prevNode 上的 mask;
+    if (node.isMask && !node.mask) {
+      this.setPrevNodeMask(node.previousSibling);
+    }
+    // 当前忽略底层 mask 的，恢复上面的 mask；
+    if (node.mask && node.ignoreMask) {
+      this.setPrevNodeMask(node.previousSibling, node.mask);
+    }
+    if (node.mask) {
+      // 移除 mask;
+      node.mask = undefined;
+    }
+  }
+  protected nextMaskToNode(node: Editor2dNode): void {
+    // 判断父级是否 mask 或 maskChild, 如果是则不用设
+    const nextNode = node.nextSibling as Editor2dNode;
+    const nextIsMask = nextNode && (nextNode.isMask || nextNode.mask);
+    // 如果底下有 mask；
+    if (nextIsMask) {
+      node.mask = nextNode.mask || nextNode.id;
+      // 底层忽略 mask 又是 mask 的情况，用底层的 id；
+      if (nextNode.ignoreMask && nextNode.isMask) {
+        node.mask = nextNode.id;
+      }
+      // 忽略 mask， 清除上一层的 mask；
+      if (node.ignoreMask) {
+        this.setPrevNodeMask(node.previousSibling);
+      }
+      //
+      // this.fireContentChanged([node], 'update', false, true);
+    } else if (node.isMask) {
+      // 不是 mask，且当前是 mask， 设定上一层为 mask child;
+      this.setPrevNodeMask(node.previousSibling, node.id);
+    }
+  }
+
+  protected setPrevNodeMask(node?: TreeNode, id?: string): void {
+    if (!node) {
+      return;
+    }
+    const n = node as Editor2dNode;
+    // 跳出不是 mask 实列
+    if (!maskShowArray.concat(maskEnabledArray).includes(n.displayType)) {
+      return;
+    }
+    // this.updateNode(n, { mask: id });
+    if (id !== n.mask) {
+      // n.version = (n.version || 0) + 1;
+      n.mask = id;
+      // this.updateNode(n, { mask: id }, true);
+      // this.fireContentChanged([n], 'update');
+    }
+    /**
+     * 断掉蒙板条件
+     * 1. 上一个忽略蒙板
+     * 2. 上一个类型不是图形或图片
+     * 3. 当前是蒙板，且 id 为 undefined
+     */
+    const prevNode = node.previousSibling as Editor2dNode;
+    if (
+      prevNode &&
+      !n.ignoreMask &&
+      maskShowArray.concat(maskEnabledArray).includes(prevNode.displayType)
+      && !(n.isMask && typeof id === 'undefined')
+    ) {
+      this.setPrevNodeMask(node.previousSibling, id);
+    }
+  }
+  /**
+   * 切换 mask 图层;
+   * 多选：取最后一个当 mask， 并创建编组；
+   * 单选：设定同级的 previousSibling 的 isMaskChild = true;
+   * @param nodes
+   * @param mask
+   */
+  toggleMask(nodes: Editor2dNode[], mask?: boolean): void {
+    if (nodes.length === 1) {
+      const node = nodes[0];
+      // this.updateNode(node, { isMask: !!mask });
+      /**
+       * @设定mask
+       * 1. 无特殊情况直接设
+       * 2. 在 mask 中且没有忽略底层，只改 isMask 值;
+       * 3. 在 mask 中且忽略了底层，改 isMask 和上一层的值；
+       */
+      node.isMask = mask;
+      // 1 和 3 处理
+      if (node.mask && node.ignoreMask || !node.mask) {
+        this.setPrevNodeMask(node.previousSibling, mask ? node.id : undefined);
+      }
+      this.fireContentChanged([node], 'update');
+      return;
+    }
+    /**
+     * @多个处理
+     * 多个用 getSelectedNodes, 保持图层顺序
+     * 检查最底下一个是否是可当 mask 的元素
+     * 1. 是：建个分组将最后个设 mask
+     * 2. 不是：Enabled 设定 mask, hierarchy-contribution 里判断
+     */
+    nodes = this.getSelectedNodes();
+    const group = this.combineNodes(nodes);
+    if (!group) {
+      return;
+    }
+    const lastNode = nodes[nodes.length - 1];
+    const childNodes = nodes.splice(0, nodes.length - 1);
+    lastNode.isMask = true;
+    childNodes.forEach(c => {
+      if (c.mask !== lastNode.id) {
+        c.mask = lastNode.id;
+      }
+    });
+    const groupNextNode = group.nextSibling as Editor2dNode;
+    let id;
+    // 如果底层是 maskChild 且没忽略，group 同步底层的 mask
+    if (groupNextNode.mask && !groupNextNode.ignoreMask) {
+      id = groupNextNode.mask;
+    }
+    // 如果底层是 mask，且忽略了底层，group mask 设为底层 id
+    if (groupNextNode.isMask && groupNextNode.ignoreMask) {
+      id = groupNextNode.id;
+    }
+    if (id) {
+      group.mask = id;
+    }
+    this.fireContentChanged(childNodes.concat([lastNode, group]), 'update');
+  }
+  /**
+   * 忽略底层 mask
+   * 忽略层 mask 不删除，留着恢复用,
+   * 设定忽略层 ignoreMask 和 清除 prev 上的 mask;
+   * @param nodes length === 1, 多个忽略
+   * @param ignore
+   */
+  ignoreMask(nodes: Editor2dNode[], ignore?: boolean): void {
+    const node = nodes[0];
+    /**
+     * @忽略处理
+     * 1. 无特殊直接处理
+     * 2. 当前是 mask, 设定上一层的 mask 为当前 id；
+     */
+    if (ignore !== node.ignoreMask) {
+      node.ignoreMask = ignore;
+    }
+    const nextNode = node.nextSibling as Editor2dNode;
+    if (!ignore && nextNode && !(nextNode.mask || nextNode.isMask)) {
+      // 如果底层不是 mask, 清掉mask
+      node.mask = undefined;
+    }
+    // this.updateNode(node, { ignoreMask: ignore });
+    let id =  ignore ? undefined : node.mask;
+    id = node.isMask && ignore ? node.id : id;
+    // id = node.isMask && !ignore ? node.mask : id;
+    // console.log(id, ignore);
+    this.setPrevNodeMask(node.previousSibling, id);
+
+    this.fireContentChanged([node], 'update');
+  }
   toggleVisible(nodes: Editor2dNode[], visible?: boolean): void {
     nodes.forEach(node => {
       if (this.checkDecoration(node, 'hidable')) {
@@ -400,6 +623,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
    */
   moveToNode(node: Editor2dNode, targetNode: Editor2dNode, toAfter?: boolean): void {
     if (Editor2dNode.isRootNode(targetNode) || TreeNode.equals(node, targetNode)) return;
+    this.clearMask(node);
     const parent = targetNode.parent! as Editor2dContainerNode;
     const children = parent.children! as Editor2dNode[];
     this.delNode(node, true);
@@ -438,6 +662,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
         });
       }
     }
+    this.nextMaskToNode(node);
     this.refresh(parent);
     this.fireContentChanged([node], 'update');
   }
@@ -513,13 +738,16 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
    * 合并分组
    * @param nodes
    */
-  combineNodes(nodes: Editor2dNode[]): void {
+  combineNodes(n?: Editor2dNode[]): Editor2dNode | undefined {
+    // 合成分组保持图层顺序
+    const nodes = n || this.getSelectedNodes();
     if (nodes.length > 0) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const parent = nodes[0].parent as any;
       const index = CompositeTreeNode.indexOf(parent, nodes[0]);
       const group = this.createDisplayNode(GameObjectBaseType.GROUP, parent as Editor2dNode, undefined, index);
       this.moveToNodesAsChildren(nodes, group);
+      return group;
     }
   }
   /**
@@ -587,16 +815,17 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       n.children && n.children.some((c: Editor2dContainerNode) => c.id === id || getNodesToChildrenById(c, id));
 
     this.animationIds = animationIds();
-    const cache: Editor2dNode[] = this.animationIds
+    // 缓存移到 timeline 里处理
+    /* const cache: Editor2dNode[] = this.animationIds
       .map(id => this.getNodeById(id)).filter(n => !!n)
-      .map(node => this.cloneNodeData(node as Editor2dNode));
+      .map(node => this.cloneNodeData(node as Editor2dNode)); */
     const toDispose = this.onContentChanged(e => {
       this.animationIds = animationIds();
       // TODO 删除动画元件后，动画面板清空数据
       if (e.nodes) {
-        const nodes = e.nodes.filter((n: any) => {
-          // 新建面板时，加入的元素先插入 cache 记录初始值
-          if (n && n.animation && n.displayType === GameObjectBaseType.ANIMATION) {
+        const nodes = e.nodes.filter((n: any) =>
+        // 新建面板时，加入的元素先插入 cache 记录初始值
+          /* if (n && n.animation && n.displayType === GameObjectBaseType.ANIMATION) {
             const { animation = {} } = n;
             const { frames = {} } = animation || {};
             frames.forEach((c: any) => {
@@ -605,9 +834,9 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
                 cache.push(node);
               }
             });
-          }
-          return this.animationIds.some(id => (id === n.id) || getNodesToChildrenById(n, id));
-        });
+          } */
+          this.animationIds.some(id => (id === n.id) || getNodesToChildrenById(n, id))
+        );
         if (nodes.length) {
           // TODO: 音乐素材变更
           onNodeChange(nodes, e.type);
@@ -618,7 +847,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
       dispose: () => {
         toDispose.dispose();
         // reset node data
-        cache.forEach(nodeData => {
+        /* cache.forEach(nodeData => {
           const { displayType } = nodeData;
           const currentNode = this.getNodeById(nodeData.id);
           if (!currentNode) {
@@ -635,7 +864,7 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
           const changeData: {[key: string]: any} = getChangeAnimationData(keysList, currentNode, nodeData);
           changeData.name = currentNode?.name;
           this.updateNode(nodeData.id, changeData, true);
-        });
+        }); */
         // this.animationStarted = false;
         this.animationIds = [];
       }
@@ -678,30 +907,30 @@ export class Editor2dDocument extends TreeImpl<Editor2dNode, Editor2dContainerNo
     return Object.keys(this.nodes).length;
   }
 
-  /**
-   * 检测错误
-   * @protected
-   */
-  protected async loadRefInfos(): Promise<void> {
-    const componentContents = await this.resourceService.getDependenciesContent<Editor2dContent>(this.uri, u => !!u.match(/\.comp/));
-    // TODO 模板模式暂时不做资源依赖检测
-    if (!this.options.isTemplate) {
-      this.errors = await this.resourceService.checkRefsErrors(this.uri);
-    }
-    const normalize = (node: Editor2dNode, version?: number, parent?: Editor2dNode) => {
-      if (parent) {
-        node.parent = parent as Editor2dContainerNode;
-      }
-      if (version !== undefined) {
-        node.version = version;
-      }
-      node.children = node.children ? node.children.map(c => normalize(c as Editor2dNode, version, node)) : undefined;
-      return node;
-    };
-    this.componentContents = mapValues<Editor2dNode>(componentContents, (value: Editor2dContent) => value.content ? normalize(value.content!, value.version) : undefined);
-    await this.refresh();
-    this.fireContentChanged([], 'add', true);
-  }
+  // /**
+  //  * 检测错误
+  //  * @protected
+  //  */
+  // protected async loadRefInfos(): Promise<void> {
+  //   const componentContents = await this.resourceService.getDependenciesContent<Editor2dContent>(this.uri, u => !!u.match(/\.comp/));
+  //   // 模板模式暂时不做资源依赖检测
+  //   if (!this.options.isTemplate) {
+  //     this.errors = await this.resourceService.checkRefsErrors(this.uri);
+  //   }
+  //   const normalize = (node: Editor2dNode, version?: number, parent?: Editor2dNode) => {
+  //     if (parent) {
+  //       node.parent = parent as Editor2dContainerNode;
+  //     }
+  //     if (version !== undefined) {
+  //       node.version = version;
+  //     }
+  //     node.children = node.children ? node.children.map(c => normalize(c as Editor2dNode, version, node)) : undefined;
+  //     return node;
+  //   };
+  //   this.componentContents = mapValues<Editor2dNode>(componentContents, (value: Editor2dContent) => value.content ? normalize(value.content!, value.version) : undefined);
+  //   await this.refresh();
+  //   this.fireContentChanged([], 'add', true);
+  // }
   getWarningDesc(node: Editor2dNode): string | undefined {
     if (node.error && node.error.message) return node.error.message;
     let uris: string[] = [];

package/src/browser/model/editor2d.ts

@@ -11,6 +11,7 @@ import { PlaygroundConfig, SelectorEntityRendererProps } from '@gedit/playground
 import type { CanvasDraw } from '../playground/canvas-draw';
 import type { PlaygroundContext2d } from '../playground/playground-context';
 import { nanoid } from 'nanoid';
+import { PathChild } from '@gedit/canvas-draw';
 
 const stringify = require('json-stringify-pretty-compact');
 
@@ -50,12 +51,20 @@ function omitNode(node?: Editor2dNode | Editor2dContainerNode, omitKeys: string[
 
 export namespace Editor2dContent {
   export function parseToJSON(contentData: Editor2dContent): Editor2dContent {
+    const content = omitNode(contentData.content, [], node => {
+      node.selected = false;
+      // console.log('>>>>>>>>>>>>>>cache', node.cache);
+      // 不保存动画数据，，如果有 cache 直接用 cache 的，cache 为 timeline 专属
+      const { cache, ...n } = node;
+      if (cache) {
+        return { ...n, ...cache };
+      }
+      return n;
+    });
+    // console.log(content);
     return {
       version: contentData.version,
-      content: omitNode(contentData.content, [], node => {
-        node.selected = false;
-        return node;
-      }),
+      content,
       snaplines: contentData.snaplines,
     };
   }
@@ -64,10 +73,17 @@ export namespace Editor2dContent {
   }
 }
 
+export interface Editor2dNodeCache extends Omit<Editor2dNode, 'parent' | 'previousSibling' | 'nextSibling' | 'selected' | 'canvasHide' | 'version'> {
+}
+
 export interface Editor2dNode extends TreeNode, EditorDocumentNode, Lockable, SelectableTreeNode, GameObjectData {
   canvasHide: boolean // 画布上是否展示
   version: number // 节点修改的版本，用于快速diff用, 刷新后丢失，不会存储到服务器
   parent: Editor2dContainerNode | undefined
+  cache?: Editor2dNodeCache;
+  isMask?: boolean; // 是否 mask
+  mask?: string; // mask 的 id
+  ignoreMask?: boolean; // 是否忽略底层 mask;
 }
 
 /**
@@ -75,7 +91,7 @@ export interface Editor2dNode extends TreeNode, EditorDocumentNode, Lockable, Se
  */
 export interface Editor2dPathNode extends Editor2dNode {
   [GameObjectBaseType.PATH]: {
-    paths: { x: number, y: number }[]
+    paths: PathChild[]
   }
 }
 

package/src/browser/model/utils/anim.utils.ts

@@ -11,9 +11,15 @@ interface KeysValue {
 }
 // 添加进时间轴动画的条件；
 const supportKeys: SchemaType[] = ['integer', 'float', 'color'];
+// 三个数组 key 写死
+export const animArrayKeys: {[key: string]: string} = {
+  'style.color': 'FillArray',
+  'style.line': 'LineArray',
+  'style.lineDash': 'LineDashArray',
+};
 function readAnimationKeys(
   deco: SchemaDecoration,
-  keyList: { key: string; name: string }[],
+  keyList: { key: string; name: string; }[],
   currentKey?: string,
   parentName?: string,
   parentKey?: string
@@ -36,8 +42,9 @@ function readAnimationKeys(
   } else if (
     currentLabel &&
     currentKey &&
-    supportKeys.includes(deco.type) &&
+    (supportKeys.includes(deco.type) &&
     !currentKey.match(/^(origin)/) // 干掉原点
+    || animArrayKeys[currentKey])
   ) {
     keyList.push({
       key: currentKey,