@gedit/editor-2d 0.3.10 → 0.3.11

package/src/browser/playground/path-edit-layer.tsx

@@ -23,7 +23,12 @@ import {
   toFixedValue,
 } from '@gedit/canvas-draw';
 
-import { deepClone, Disposable, generateUuid } from '@gedit/utils';
+import {
+  deepClone,
+  Disposable,
+  DisposableCollection,
+  generateUuid,
+} from '@gedit/utils';
 import {
   PointSchema,
   SvgPath,
@@ -69,6 +74,9 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
 
   currentPathNode?: Editor2dPathNode;
   startPos?: PathChild;
+
+  // 访录当前图层在 timeline 里的监听事件
+  layerDisposeMap = new Map<string, Disposable>();
   protected bezierStartPos?: {
     x: number;
     y: number;
@@ -76,6 +84,8 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     path: PathChild;
   };
 
+  protected docDispose?: Disposable;
+
   get document(): Editor2dDocument | undefined {
     return this.documentEntity.config.document;
   }
@@ -99,40 +109,49 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     this.startPos = undefined;
     this.pathPointSelection!.clearSelection();
     this.pathPointSelection!.selectMode = PathSelectMode.ADD_PATH;
+    this.docDispose?.dispose();
   }
   updateNodeData(): void {
-    const nodeData = updatePathNodeData(this.currentPathNode!);
-    this.document?.updateNode(this.currentPathNode!, nodeData, true);
-  }
-  updateNodePathData(): void {
     if (!this.currentPathNode) {
       return;
     }
-    const { origin = { x: 0.5, y: 0.5 }, size, path } = this.currentPathNode;
-    const { origin: oldOrigin = { x: 0.5, y: 0.5 }, paths } = path;
-    const diff = {
-      x: toFixedValue((oldOrigin.x - origin.x) * (size?.width || 0), 4),
-      y: toFixedValue((oldOrigin.y - origin.y) * (size?.height || 0), 4),
-    };
-    paths.forEach(item => {
-      item.x += diff.x;
-      item.y += diff.y;
-      if (typeof item.x1 === 'number') {
-        item.x1 += diff.x;
-      }
-      if (typeof item.x2 === 'number') {
-        item.x2 += diff.x;
-      }
-      if (typeof item.y1 === 'number') {
-        item.y1 += diff.y;
-      }
-      if (typeof item.y2 === 'number') {
-        item.y2 += diff.y;
-      }
-    });
-    path.origin = origin;
-    this.document?.updateNode(this.currentPathNode, { path }, true);
+    const nodeData = updatePathNodeData(this.currentPathNode);
+    // console.log('updateNodeData', nodeData);
+    // 直接更新数据，，动画 updateAnimationNode 里会把数据删了；
+    this.currentPathNode.path = nodeData.path;
+    this.document?.updateNode(this.currentPathNode, nodeData, true);
   }
+  // updateNodePathData(): void {
+  // if (!this.currentPathNode) {
+  //   return;
+  // }
+  // const { origin = { x: 0.5, y: 0.5 }, size, path } = this.currentPathNode;
+  // const { origin: oldOrigin = { x: 0.5, y: 0.5 }, paths } = path;
+  // const diff = {
+  //   x: toFixedValue((oldOrigin.x - origin.x) * (size?.width || 0), 4),
+  //   y: toFixedValue((oldOrigin.y - origin.y) * (size?.height || 0), 4),
+  // };
+  // paths.forEach(item => {
+  //   item.x += diff.x;
+  //   item.y += diff.y;
+  //   if (typeof item.x1 === 'number') {
+  //     item.x1 += diff.x;
+  //   }
+  //   if (typeof item.x2 === 'number') {
+  //     item.x2 += diff.x;
+  //   }
+  //   if (typeof item.y1 === 'number') {
+  //     item.y1 += diff.y;
+  //   }
+  //   if (typeof item.y2 === 'number') {
+  //     item.y2 += diff.y;
+  //   }
+  // });
+
+  // path.origin = origin;
+  // console.log(path);
+  // this.document?.updateNode(this.currentPathNode, { path }, true);
+  // }
 
   // 选中的是第一个点
   protected isOnePoint(point?: PathChild): boolean {
@@ -172,6 +191,52 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     );
   }
 
+  protected updateTimelineCurrentFrameDataToCurrentNode(): void {
+    if (!this.currentPathNode) {
+      return;
+    }
+    const timelineData = this.document?.timelineService?.currentTimelineData;
+    if (!timelineData) {
+      return;
+    }
+    const { frames = [] } = timelineData;
+    const currentFrame = frames.find(c => c.id === this.currentPathNode?.id);
+    if (currentFrame) {
+      const currentValues = this.document?.timelineService?.getNodeCurrentFrame(
+        currentFrame
+      );
+      if (currentValues && currentValues['path.paths']) {
+        this.currentPathNode.path.paths = (deepClone(
+          currentValues['path.paths']
+        ) as unknown) as PathChild[];
+      }
+    }
+  }
+
+  // 注册监听时间轴事件
+  protected onRegisterTimelineEvent(): void {
+    if (!this.currentPathNode || !this.document?.timelineService) {
+      return;
+    }
+    const currentDisposeCache = this.layerDisposeMap.get(
+      this.currentPathNode.id
+    );
+    if (!currentDisposeCache) {
+      const currentDispose = new DisposableCollection();
+      currentDispose.pushAll([
+        this.document.timelineService.onTimelineCurrentTimeChange(() => {
+          this.updateTimelineCurrentFrameDataToCurrentNode();
+          this.draw();
+        }),
+        this.document.timelineService.onTimelineChangeData(() => {
+          this.updateTimelineCurrentFrameDataToCurrentNode();
+          this.draw();
+        }),
+      ]);
+      this.layerDisposeMap.set(this.currentPathNode.id, currentDispose);
+    }
+  }
+
   onReady(): void {
     this.addDispose([
       this.context.historyService.onHistoryBack(e => {
@@ -189,6 +254,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
          * -- 2. 非闭合路径时，切换编辑模式；
          * - 2. 未选中时节点时, 设置编辑模式;
          */
+        // console.log('path edit state change', e);
         if (!this.isEnabled) {
           this.reNodeData();
         } else {
@@ -196,12 +262,26 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             return;
           }
           const selectNodes = this.document?.getSelectedNodes() || [];
-          if (
-            selectNodes.length &&
-            selectNodes[0].displayType === GameObjectBaseType.PATH
-          ) {
+
+          const pathSelectsNodes = selectNodes.filter(
+            c => c.displayType === GameObjectBaseType.PATH
+          );
+
+          if (selectNodes.length && pathSelectsNodes.length) {
             // 选中一个 path 路径时;
-            this.currentPathNode = selectNodes[0] as Editor2dPathNode;
+            this.currentPathNode = deepClone(
+              pathSelectsNodes[0]
+            ) as Editor2dPathNode;
+            if (
+              this.currentPathNode.useAnimationId &&
+              this.document?.timelineService?.currentTimelineData &&
+              this.document.timelineService.currentTimelineData.id ===
+                this.currentPathNode.useAnimationId
+            ) {
+              this.updateTimelineCurrentFrameDataToCurrentNode();
+              this.onRegisterTimelineEvent();
+            }
+
             const selectionNode = [
               {
                 pointId: this.currentPathNode.path.paths[
@@ -213,7 +293,56 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               ? this.pathPointSelection.enterSelectBezierMode(selectionNode)
               : this.pathPointSelection.enterPathMode(selectionNode);
             // 如果中心点不同，更新数据;
-            this.updateNodePathData();
+            if (
+              (this.currentPathNode.origin?.x ||
+                this.currentPathNode.origin?.y) &&
+              !this.currentPathNode.path.originChangeBeforeSize
+            ) {
+              // 初始 origin 是照这个宽度算的；计算偏差使用；
+              this.currentPathNode.path.originChangeBeforeSize = {
+                width: this.currentPathNode.size?.width || 0,
+                height: this.currentPathNode.size?.height || 0,
+              };
+
+              this.document?.updateNode(
+                this.currentPathNode,
+                this.currentPathNode,
+                true
+              );
+            } else if (
+              !this.currentPathNode.origin?.x &&
+              !this.currentPathNode.origin?.y &&
+              this.currentPathNode.path.originChangeBeforeSize
+            ) {
+              delete this.currentPathNode.path.originChangeBeforeSize;
+              this.document?.updateNode(
+                this.currentPathNode,
+                this.currentPathNode,
+                true
+              );
+            }
+            this.docDispose = this.document?.onContentChanged(c => {
+              const newNode = c.nodes?.find(
+                c => c.id === this.currentPathNode?.id
+              ) as Editor2dPathNode;
+              if (
+                newNode &&
+                JSON.stringify(newNode.path.paths) !==
+                  JSON.stringify(this.currentPathNode?.path.paths)
+              ) {
+                // 属性栏修改数据时，数据源不是同一个，需要手动更新数据
+                this.currentPathNode = newNode;
+                if (
+                  this.currentPathNode.useAnimationId &&
+                  this.document?.timelineService?.currentTimelineData &&
+                  this.document.timelineService.currentTimelineData.id ===
+                    this.currentPathNode.useAnimationId
+                ) {
+                  this.updateTimelineCurrentFrameDataToCurrentNode();
+                  this.draw();
+                }
+              }
+            });
           } else if (!selectNodes.length) {
             // 未选中时，清空数据
             this.pathPointSelection.selectMode = PathSelectMode.ADD_PATH;
@@ -236,11 +365,16 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             scale = { x: 1, y: 1 },
             rotation = 0,
           } = this.currentPathNode!;
+          const offset = this.getBoundsOffset();
+          const center = {
+            x: -offset.x,
+            y: -offset.y,
+          };
           paths.forEach(p => {
             const { x: $x, y: $y } = p;
             let x = $x;
             let y = $y;
-            const r = transformToData({ x, y }, { scale, rotation });
+            const r = transformToData({ x, y }, { scale, rotation }, center);
             x = r.x + position.x;
             y = r.y + position.y;
             const wh = (4 / this.config.finalScale) * 2;
@@ -310,11 +444,23 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
                 scale = { x: 1, y: 1 },
                 rotation = 0,
               } = this.currentPathNode || {};
-              let x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
-              let y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+              const offset = this.getBoundsOffset();
+              let x =
+                e.endPos.x / (this.config?.finalScale || 1) -
+                position.x -
+                offset.x;
+              let y =
+                e.endPos.y / (this.config?.finalScale || 1) -
+                position.y -
+                offset.y;
+              const center = {
+                x: -offset.x,
+                y: -offset.y,
+              };
               const { x: rx, y: ry } = inverseTransformToData(
                 { x, y },
-                { scale, rotation }
+                { scale, rotation },
+                center
               );
               x = rx;
               y = ry;
@@ -343,11 +489,23 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               scale = { x: 1, y: 1 },
               rotation = 0,
             } = this.currentPathNode || {};
-            let x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
-            let y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+            const offset = this.getBoundsOffset();
+            let x =
+              e.endPos.x / (this.config?.finalScale || 1) -
+              position.x -
+              offset.x;
+            let y =
+              e.endPos.y / (this.config?.finalScale || 1) -
+              position.y -
+              offset.y;
+            const center = {
+              x: -offset.x,
+              y: -offset.y,
+            };
             const { x: rx, y: ry } = inverseTransformToData(
               { x, y },
-              { scale, rotation }
+              { scale, rotation },
+              center
             );
             x = rx;
             y = ry;
@@ -366,10 +524,10 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               const x1 = pathNode.x * 2 - x;
               const y1 = pathNode.y * 2 - y;
               const reverse = this.isOnePoint();
-              pathNode.x2 = toFixedValue(reverse ? x1 : x, 4);
-              pathNode.y2 = toFixedValue(reverse ? y1 : y, 4);
-              pathNode.x1 = toFixedValue(reverse ? x : x1, 4);
-              pathNode.y1 = toFixedValue(reverse ? y : y1, 4);
+              pathNode.x2 = toFixedValue(reverse ? x1 : x, 2);
+              pathNode.y2 = toFixedValue(reverse ? y1 : y, 2);
+              pathNode.x1 = toFixedValue(reverse ? x : x1, 2);
+              pathNode.y1 = toFixedValue(reverse ? y : y1, 2);
               pathNode.type = PATH_FUNC_TYPE.EQUAL;
               // console.log(this.startPos, path?.paths);
               this.updateNodeData();
@@ -418,6 +576,15 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             ) {
               // 选中的不是当前的 path 路径， 切换 currentPathNode;
               this.currentPathNode = selectNodes[0] as Editor2dPathNode;
+              if (
+                this.currentPathNode.useAnimationId &&
+                this.document?.timelineService?.currentTimelineData &&
+                this.document.timelineService.currentTimelineData.id ===
+                  this.currentPathNode.useAnimationId
+              ) {
+                this.updateTimelineCurrentFrameDataToCurrentNode();
+                this.onRegisterTimelineEvent();
+              }
               const selectionNode = [
                 {
                   pointId: this.currentPathNode.path.paths[
@@ -429,7 +596,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               this.currentPathNode.path.closed
                 ? pathPointSelection.enterSelectBezierMode(selectionNode)
                 : pathPointSelection.enterPathMode(selectionNode);
-              this.updateNodePathData();
+              // this.updateNodePathData();
             }
             return;
           }
@@ -452,6 +619,34 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     ]);
   }
 
+  /**
+   * 获取偏差
+   */
+
+  getBoundsOffset(): { x: number; y: number } {
+    const { size = { width: 0, height: 0 }, origin = { x: 0, y: 0 }, path } =
+      this.currentPathNode || {};
+
+    const { originChangeBeforeSize } = path || {};
+
+    const offset = {
+      x: 0,
+      y: 0,
+    };
+
+    if (originChangeBeforeSize) {
+      offset.x = -origin.x * size.width;
+      offset.y = -origin.y * size.height;
+      if (originChangeBeforeSize.width !== size.width) {
+        offset.x += (size.width - originChangeBeforeSize.width) * origin.x;
+      }
+      if (originChangeBeforeSize.height !== size.height) {
+        offset.y += (size.height - originChangeBeforeSize.height) * origin.y;
+      }
+    }
+    return offset;
+  }
+
   /**
    * 创建路径
    * @param pos - 当前鼠标点击的位置
@@ -483,9 +678,9 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     }
 
     // 创建时坐标是 0, 需要换线更新坐标；
-    setTimeout(() => {
-      this.updateNodeData();
-    });
+    // setTimeout(() => {
+    //   this.updateNodeData();
+    // });
   }
 
   protected onBezierPointMove(pos: PointSchema): void {
@@ -529,11 +724,19 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             scale = { x: 1, y: 1 },
             rotation = 0,
           } = this.currentPathNode || {};
-          let x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
-          let y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+          const offset = this.getBoundsOffset();
+          let x =
+            e.endPos.x / (this.config?.finalScale || 1) - position.x - offset.x;
+          let y =
+            e.endPos.y / (this.config?.finalScale || 1) - position.y - offset.y;
+          const center = {
+            x: -offset.x,
+            y: -offset.y,
+          };
           const { x: currentX, y: currentY } = inverseTransformToData(
             { x, y },
-            { scale, rotation }
+            { scale, rotation },
+            center
           );
           x = currentX;
           y = currentY;
@@ -652,13 +855,23 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           scale = { x: 1, y: 1 },
           rotation = 0,
         } = this.currentPathNode || {};
+        const offset = this.getBoundsOffset();
         let x =
-          dragEvent.endPos.x / (this.config?.finalScale || 1) - position.x;
+          dragEvent.endPos.x / (this.config?.finalScale || 1) -
+          position.x -
+          offset.x;
         let y =
-          dragEvent.endPos.y / (this.config?.finalScale || 1) - position.y;
+          dragEvent.endPos.y / (this.config?.finalScale || 1) -
+          position.y -
+          offset.y;
+        const center = {
+          x: -offset.x,
+          y: -offset.y,
+        };
         const { x: currentX, y: currentY } = inverseTransformToData(
           { x, y },
-          { scale, rotation }
+          { scale, rotation },
+          center
         );
         x = currentX;
         y = currentY;
@@ -668,19 +881,19 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           const deltaX = x - start.x + d.x;
           const deltaY = y - start.y + d.y;
           if (typeof p.x1 === 'number') {
-            p.x1 = toFixedValue(start.x1 + deltaX, 4);
+            p.x1 = toFixedValue(start.x1 + deltaX, 2);
           }
           if (typeof p.x2 === 'number') {
-            p.x2 = toFixedValue(start.x2 + deltaX, 4);
+            p.x2 = toFixedValue(start.x2 + deltaX, 2);
           }
           if (typeof p.y1 === 'number') {
-            p.y1 = toFixedValue(start.y1 + deltaY, 4);
+            p.y1 = toFixedValue(start.y1 + deltaY, 2);
           }
           if (typeof p.y2 === 'number') {
-            p.y2 = toFixedValue(start.y2 + deltaY, 4);
+            p.y2 = toFixedValue(start.y2 + deltaY, 2);
           }
-          p.x = toFixedValue(x + d.x, 4);
-          p.y = toFixedValue(y + d.y, 4);
+          p.x = toFixedValue(x + d.x, 2);
+          p.y = toFixedValue(y + d.y, 2);
         });
 
         this.updateNodeData();
@@ -700,11 +913,18 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     } = this.currentPathNode || {};
     const { paths = [] } = path;
     const p = this.getPosFromMouseEvent(e);
-    let x = p.x - position.x;
-    let y = p.y - position.y;
+    const offset = this.getBoundsOffset();
+    let x = p.x - position.x - offset.x;
+    let y = p.y - position.y - offset.y;
+
+    const center = {
+      x: -offset.x,
+      y: -offset.y,
+    };
     const { x: currentX, y: currentY } = inverseTransformToData(
       { x, y },
-      { scale, rotation }
+      { scale, rotation },
+      center
     );
     x = currentX;
     y = currentY;
@@ -728,6 +948,9 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
       return;
     }
     this.currentPathNode.path.closed = true;
+    this.currentPathNode.path.paths[
+      this.currentPathNode.path.paths.length - 1
+    ].closed = true;
     this.pathPointSelection!.enterSelectBezierMode([
       {
         pointId: this.currentPathNode.path.paths[0].id,
@@ -754,6 +977,13 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
       rotation = 0,
     } = this.currentPathNode || ({} as Editor2dPathNode);
     const { paths: p = [] } = path;
+
+    const offset = this.getBoundsOffset();
+    const center = {
+      x: -offset.x,
+      y: -offset.y,
+    };
+
     const paths = [...p].map(c => {
       const item = {
         ...c,
@@ -761,25 +991,31 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         y: c.y,
       };
 
-      const { x, y } = transformToData({ x: c.x, y: c.y }, { scale, rotation });
-      item.x = x + position.x;
-      item.y = y + position.y;
+      const { x, y } = transformToData(
+        { x: c.x, y: c.y },
+        { scale, rotation },
+        center
+      );
+      item.x = x + position.x + offset.x;
+      item.y = y + position.y + offset.y;
 
       if (typeof c.x1 === 'number' || typeof c.y1 === 'number') {
         const { x: x1, y: y1 } = transformToData(
           { x: c.x1 || c.x, y: c.y1 || c.y },
-          { scale, rotation }
+          { scale, rotation },
+          center
         );
-        item.x1 = x1 + position.x;
-        item.y1 = y1 + position.y;
+        item.x1 = x1 + position.x + offset.x;
+        item.y1 = y1 + position.y + offset.y;
       }
       if (typeof c.x2 === 'number' || typeof c.y2 === 'number') {
         const { x: x2, y: y2 } = transformToData(
           { x: c.x2 || c.x, y: c.y2 || c.y },
-          { scale, rotation }
+          { scale, rotation },
+          center
         );
-        item.x2 = x2 + position.x;
-        item.y2 = y2 + position.y;
+        item.x2 = x2 + position.x + offset.x;
+        item.y2 = y2 + position.y + offset.y;
       }
       return item;
     });