@gedit/editor-2d 0.2.61 → 0.2.63

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

@@ -11,11 +11,32 @@ import {
   cubicToQuadratic,
   getPathBounds,
   PathSchema,
+  getPathSizeBounds,
 } from '@gedit/canvas-draw';
 import { Bezier } from 'bezier-js';
-import { generateUuid, PositionSchema } from '@gedit/utils';
+import {
+  generateUuid,
+  PositionSchema,
+  ScaleSchema,
+  SizeSchema,
+} from '@gedit/utils';
 import { PointSchema } from './path-edit-layer-move-point';
 import { Editor2dPathNode } from '../../model';
+import { cloneDeep } from 'lodash';
+
+export const transformRotation = (p1: Point, p2: Point, rotation: number) => {
+  if (!rotation) {
+    return p1;
+  }
+  const { x: x1, y: y1 } = p1;
+  const { x: x2, y: y2 } = p2;
+  const rotationX = x1 - x2;
+  const rotationY = y1 - y2;
+  return {
+    x: rotationX * Math.cos(rotation) - rotationY * Math.sin(rotation) + x2,
+    y: rotationY * Math.cos(rotation) + rotationX * Math.sin(rotation) + y2,
+  };
+};
 
 export const pathFuncIcon = [
   {
@@ -102,7 +123,10 @@ export const getBezierHullByPos = (
  * @param s
  * @returns
  */
-export const getExtendPositionByPoint = (c: Point, s: Point): Point => ({ x: c.x * 2 - s.x, y: c.y * 2 - s.y });
+export const getExtendPositionByPoint = (c: Point, s: Point): Point => ({
+  x: c.x * 2 - s.x,
+  y: c.y * 2 - s.y,
+});
 
 export const getExtendPositionByRadius = (
   c: PathChild,
@@ -244,17 +268,62 @@ export const setBezierMovePoint = (
   return path;
 };
 
-export const updatePathNodeData = (node: Editor2dPathNode): { path: PathSchema, position: PositionSchema } => {
-  const { position, origin, path } = node;
+export const transformToData = (
+  point: PointSchema,
+  transform: { scale?: ScaleSchema; rotation?: number }
+) => {
+  const { scale = { x: 1, y: 1}, rotation = 0 } = transform;
+  let { x, y } = point;
+  x *= scale.x;
+  y *= scale.y;
+  const rx = transformRotation({ x, y }, { x: 0, y: 0 }, rotation);
+  x = rx.x;
+  y = rx.y;
+  return {
+    x,
+    y,
+  };
+};
+
+export const inverseTransformToData = (
+  point: PointSchema,
+  transform: { scale: ScaleSchema; rotation: number }
+) => {
+  const { scale, rotation } = transform;
+  let { x, y } = point;
+  const r = transformRotation({ x, y }, { x: 0, y: 0 }, -rotation);
+  x = r.x;
+  y = r.y;
+  x /= scale.x;
+  y /= scale.y;
+  return { x, y };
+};
+
+export const updatePathNodeData = (
+  node: Editor2dPathNode
+): { path: PathSchema; position?: PositionSchema; size: SizeSchema } => {
+  const {
+    position = { x: 0, y: 0 },
+    origin = { x: 0.5, y: 0.5 },
+    path,
+    style,
+    size,
+    rotation = 0,
+    scale = { x: 1, y: 1 },
+  } = node;
   const { paths: p = [], closed } = path;
-  const paths = [...p];
+  const paths = cloneDeep(p);
   if (closed) {
-    paths.push(paths[0]);
+    paths.push(cloneDeep(paths[0]));
   }
   const bounds = getPathBounds(paths);
+  const { contentWidth, contentHeight } = getPathSizeBounds(
+    style!.line,
+    bounds
+  );
+  let x = bounds.minX + bounds.width * origin!.x;
+  let y = bounds.minY + bounds.height * origin!.y;
 
-  const x = bounds.minX + bounds.width * (origin?.x || 0.5);
-  const y = bounds.minY + bounds.height * (origin?.y || 0.5);
   const newPath = p.map(c => {
     const item = {
       ...c,
@@ -275,11 +344,23 @@ export const updatePathNodeData = (node: Editor2dPathNode): { path: PathSchema,
     }
     return item;
   });
+  const t = transformToData({ x, y }, { scale, rotation });
+  x = t.x;
+  y = t.y;
+
+  x += position.x;
+  y += position.y;
+
   return {
-    path: { ...path, paths: newPath },
+    path: { ...path, paths: newPath, origin },
+    size: {
+      ...size,
+      width: contentWidth,
+      height: contentHeight,
+    },
     position: {
-      x: x + (position?.x || 0),
-      y: y + (position?.y || 0),
+      x,
+      y,
     },
   };
 };

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

@@ -5,28 +5,25 @@ import {
   entity,
   Layer,
   PathPointSelection,
+  PathPointSelectionEntity,
   PathSelectMode,
+  PlaygroundLayer,
   SelectorBoxConfigEntity,
 } from '@gedit/playground';
 import { DocumentEntity } from './entities/document-entity';
 import { domUtils } from '@gedit/utils/lib/browser';
 import { GameObjectBaseType } from '@gedit/render-engine';
-import { Editor2dDocument, Editor2dPathNode } from '../model';
+import type { Editor2dDocument, Editor2dPathNode } from '../model';
 import { PlaygroundContext2d } from './playground-context';
 import { SelectableTreeNode, TreeSelection } from '@gedit/tree';
 import {
   PathChild,
+  PathSchema,
   PATH_FUNC_TYPE,
   toFixedValue,
-  PathSchema,
 } from '@gedit/canvas-draw';
 
-import {
-  deepClone,
-  Disposable,
-  generateUuid,
-  PositionSchema,
-} from '@gedit/utils';
+import { deepClone, Disposable, generateUuid } from '@gedit/utils';
 import {
   PointSchema,
   SvgPath,
@@ -34,6 +31,8 @@ import {
   setBezierMovePoint,
   PointSelection,
   updatePathNodeData,
+  inverseTransformToData,
+  transformToData,
 } from './path-edit';
 
 export interface PathEditLayerEventContextProps {
@@ -60,11 +59,14 @@ export const PathEditLayerEventContext = React.createContext<PathEditLayerEventC
  */
 export class PathEditLayer extends Layer<PlaygroundContext2d> {
   node = domUtils.createDivWithClass('gedit-path-edit-layer');
+  id = 'pathEditLayer';
   @entity(EditorStateConfigEntity)
   protected editorState: EditorStateConfigEntity;
   @entity(SelectorBoxConfigEntity)
   protected selectorConfig!: SelectorBoxConfigEntity;
   @entity(DocumentEntity) documentEntity: DocumentEntity;
+  @entity(PathPointSelectionEntity)
+  pathPointSelection: PathPointSelectionEntity;
 
   currentPathNode?: Editor2dPathNode;
   startPos?: PathChild;
@@ -103,6 +105,35 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     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);
+  }
 
   // 选中的是第一个点
   protected isOnePoint(point?: PathChild): boolean {
@@ -143,14 +174,14 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
   }
 
   onReady(): void {
-    this.toDispose.pushAll([
+    this.addDispose([
       this.context.historyService.onHistoryBack(e => {
         this.reNodeData();
         this.pathPointSelection!.selectMode = PathSelectMode.ADD_PATH;
         this.pathPointSelection!.clearSelection();
         this.editorState.toDefaultState();
       }),
-      this.editorState.onStateChange(() => {
+      this.editorState.onStateChange(e => {
         /**
          * 1. 不是路径编辑状态时，清空数据
          * 2. 是路径编辑状态时
@@ -182,6 +213,8 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
             this.currentPathNode.path.closed
               ? this.pathPointSelection.enterSelectBezierMode(selectionNode)
               : this.pathPointSelection.enterPathMode(selectionNode);
+            // 如果中心点不同，更新数据;
+            this.updateNodePathData();
           } else if (!selectNodes.length) {
             // 未选中时，清空数据
             this.pathPointSelection.selectMode = PathSelectMode.ADD_PATH;
@@ -199,10 +232,18 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           );
           const { paths = [], closed } = this.currentPathNode?.path || {};
           const pathSelects: PathPointSelection[] = [];
+          const {
+            position = { x: 0, y: 1 },
+            scale = { x: 1, y: 1 },
+            rotation = 0,
+          } = this.currentPathNode!;
           paths.forEach(p => {
             const { x: $x, y: $y } = p;
-            const x = $x + this.currentPathNode!.position!.x;
-            const y = $y + this.currentPathNode!.position!.y;
+            let x = $x;
+            let y = $y;
+            const r = transformToData({ x, y }, { scale, rotation });
+            x = r.x + position.x;
+            y = r.y + position.y;
             const wh = (4 / this.config.finalScale) * 2;
             if (
               x >= selectBound.x && // 左
@@ -265,20 +306,26 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               ) {
                 return;
               }
-              const { position = { x: 0, y: 0 } } = this.currentPathNode || {};
+              const {
+                position = { x: 0, y: 0 },
+                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 { x: rx, y: ry } = inverseTransformToData(
+                { x, y },
+                { scale, rotation }
+              );
+              x = rx;
+              y = ry;
               this.startPos = {
-                x: toFixedValue(
-                  e.endPos.x / (this.config?.finalScale || 1) - position.x,
-                  4
-                ),
-                y: toFixedValue(
-                  e.endPos.y / (this.config?.finalScale || 1) - position.y,
-                  4
-                ),
-              }; // this.getPosFromMouseEvent(e);
+                x,
+                y,
+              };
               this.startPos.id = generateUuid();
               this.startPos.type = PATH_FUNC_TYPE.STRAIGHT;
-              this.initPath(this.startPos);
+              this.addPath(this.startPos);
               this.pathPointSelection!.enterPathMode([
                 {
                   pointId: this.startPos.id,
@@ -291,10 +338,21 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               return;
             }
             // const pos = this.getPosFromMouseEvent(e);
-            const { position = { x: 0, y: 0 }, path } =
-              this.currentPathNode || {};
-            const x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
-            const y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+            const {
+              path,
+              position = { x: 0, y: 0 },
+              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 { x: rx, y: ry } = inverseTransformToData(
+              { x, y },
+              { scale, rotation }
+            );
+            x = rx;
+            y = ry;
+
             const pathNode = path?.paths.find(
               c => c.id === this.startPos?.id
             );
@@ -323,8 +381,24 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           },
         });
       }),
+      this.listenPlaygroundEvent('dblclick', (e: MouseEvent) => {
+        // 双击画布时，关闭路径
+        // 1. 在路径编辑状态时，不处理；
+        // 2. 选中的是 path 路径时，不处理，新增点；
+        // 3. 选中点时，不处理；
+        // 4. 右键时，不处理；
+        // 5. 不是路径编辑状态时，不处理；
+        const isExit =
+          this.editorState.is(EditorState.EDIT_PATH_STATE.id) &&
+          this.pathPointSelection.selectMode === PathSelectMode.SELECT_BEZIER;
+        if (isExit) {
+          const playgroundLayer = this.pipelineLayers.find(c => c.id === 'playgroundLayer') as PlaygroundLayer;
+          playgroundLayer?.keydownEvent?.({ key: 'Escape' } as KeyboardEvent);
+        }
+      }),
       // 图层发生变化时退出模式
       this.selectionService?.onSelectionChanged(e => {
+        // todo: pahtSelection 跟随 playground
         const { isEnabled, pathPointSelection } = this;
         if (isEnabled) {
           if (!pathPointSelection) {
@@ -354,6 +428,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
               this.currentPathNode.path.closed
                 ? pathPointSelection.enterSelectBezierMode(selectionNode)
                 : pathPointSelection.enterPathMode(selectionNode);
+              this.updateNodePathData();
             }
             return;
           }
@@ -380,7 +455,7 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
    * 创建路径
    * @param pos - 当前鼠标点击的位置
    */
-  initPath(pos: PointSchema): void {
+  addPath(pos: PointSchema): void {
     if (!this.document) {
       return;
     }
@@ -448,14 +523,35 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
     this.startDrag(e.clientX, e.clientY, {
       onDrag: e => {
         if (this.bezierStartPos) {
-          const { position = { x: 0, y: 0 } } = this.currentPathNode || {};
-          const x = e.endPos.x / (this.config?.finalScale || 1) - position.x;
-          const y = e.endPos.y / (this.config?.finalScale || 1) - position.y;
+          const {
+            position = { x: 0, y: 0 },
+            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 { x: currentX, y: currentY } = inverseTransformToData(
+            { x, y },
+            { scale, rotation }
+          );
+          x = currentX;
+          y = currentY;
           this.onBezierPointMove({ x, y });
         }
       },
       onDragEnd: () => {
         this.bezierStartPos = undefined;
+        const { closed } = this.currentPathNode?.path || {};
+        if (!closed) {
+          const isStartOrEnd = this.getPointIsStartOrEnd(p);
+          if (isStartOrEnd) {
+            this.pathPointSelection!.enterPathMode([
+              {
+                pointId: p.id,
+              },
+            ]);
+          }
+        }
       },
     });
     this.draw();
@@ -532,13 +628,14 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
       // 拖动
       onDrag: dragEvent => {
         selection = pathPointSelection?.selection || [];
-        const { position = { x: 0, y: 0 } } = node;
         const selectionNodes = selection
           .map(s => node.path.paths.find(p => p.id === s.pointId))
           .filter(c => c) as PathChild[];
         const delta = selectionNodes.map(c => {
           const point = node.path.paths.find(p => p.id === c.id)!;
-          const current = node.path.paths.find(p => p.id === currentPoint.id)!;
+          const current = node.path.paths.find(
+            p => p.id === currentPoint.id
+          )!;
           if (point.id === currentPoint.id) {
             return { x: 0, y: 0 };
           }
@@ -550,10 +647,21 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         const startNode = selectionNodes.map((s: PathChild) =>
           startNodeClone.find((c: PathChild) => c.id === s.id)
         );
-        const x =
+        const {
+          position = { x: 0, y: 0 },
+          scale = { x: 1, y: 1 },
+          rotation = 0,
+        } = this.currentPathNode || {};
+        let x =
           dragEvent.endPos.x / (this.config?.finalScale || 1) - position.x;
-        const y =
+        let y =
           dragEvent.endPos.y / (this.config?.finalScale || 1) - position.y;
+        const { x: currentX, y: currentY } = inverseTransformToData(
+          { x, y },
+          { scale, rotation }
+        );
+        x = currentX;
+        y = currentY;
         selectionNodes.forEach((p: PathChild, i) => {
           const start = startNode[i];
           const d = delta[i];
@@ -574,22 +682,35 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
           p.x = toFixedValue(x + d.x, 4);
           p.y = toFixedValue(y + d.y, 4);
         });
+
         this.updateNodeData();
       },
     });
-
     this.draw();
   }
   protected onPathAddPoint(i: number, e: React.MouseEvent): void {
     if (!this.currentPathNode || !this.document) {
       return;
     }
-    const { path, position } = this.currentPathNode;
+    const {
+      path,
+      position = { x: 0, y: 0 },
+      scale = { x: 1, y: 1 },
+      rotation = 0,
+    } = this.currentPathNode || {};
     const { paths = [] } = path;
     const p = this.getPosFromMouseEvent(e);
+    let x = p.x - position.x;
+    let y = p.y - position.y;
+    const { x: currentX, y: currentY } = inverseTransformToData(
+      { x, y },
+      { scale, rotation }
+    );
+    x = currentX;
+    y = currentY;
     const pos = {
-      x: p.x - position!.x,
-      y: p.y - position!.y,
+      x,
+      y,
     };
     const point = paths[i];
     const nextPoint = paths[i + 1] ? paths[i + 1] : paths[0];
@@ -625,31 +746,44 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
       // this.editorState.toDefaultState();
       return <></>;
     }
+
     const {
       path = {} as PathSchema,
-      position = { x: 0, y: 0 } as PositionSchema,
+      position = { x: 0, y: 0 },
+      scale = { x: 1, y: 1 },
+      rotation = 0,
     } = this.currentPathNode || ({} as Editor2dPathNode);
-    const { paths: p = [], closed = false } = path;
+    const { paths: p = [] } = path;
     const paths = [...p].map(c => {
       const item = {
         ...c,
-        x: c.x + position.x,
-        y: c.y + position.y,
+        x: c.x,
+        y: c.y,
       };
-      if (typeof c.x1 === 'number') {
-        item.x1 = c.x1 + position.x;
-      }
-      if (typeof c.x2 === 'number') {
-        item.x2 = c.x2 + position.x;
-      }
-      if (typeof c.y1 === 'number') {
-        item.y1 = c.y1 + position.y;
+
+      const { x, y } = transformToData({ x: c.x, y: c.y }, { scale, rotation });
+      item.x = x + position.x;
+      item.y = y + position.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 }
+        );
+        item.x1 = x1 + position.x;
+        item.y1 = y1 + position.y;
       }
-      if (typeof c.y2 === 'number') {
-        item.y2 = c.y2 + position.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 }
+        );
+        item.x2 = x2 + position.x;
+        item.y2 = y2 + position.y;
       }
       return item;
     });
+
     return (
       <PathEditLayerEventContext.Provider
         value={{
@@ -661,11 +795,11 @@ export class PathEditLayer extends Layer<PlaygroundContext2d> {
         }}
       >
         <SvgPath
-          getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
           width={this.config.config.pageBounds?.width || 300}
           height={this.config.config.pageBounds?.height || 300}
+          getPosFromMouseEvent={this.getPosFromMouseEvent.bind(this)}
+          node={this.currentPathNode}
           paths={paths}
-          closed={closed}
           selection={this.pathPointSelection?.selection as PointSelection[]}
           selectMode={this.pathPointSelection?.selectMode}
           getPointIsStartOrEnd={this.getPointIsStartOrEnd.bind(this)}

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

@@ -5,7 +5,7 @@ import { AppConfigService } from '@gedit/app-config';
 import { debounce, Emitter, URI } from '@gedit/utils';
 import { Editor2dEntity } from './entities/editor2d-entity';
 import type { SelectionEntityManager } from './selection-entity-manager';
-import { PathPointSelectionService, PathSelectMode, Playground } from '@gedit/playground';
+import { PathPointSelectionEntity, PathSelectMode, Playground } from '@gedit/playground';
 import { Editor2dDocument } from '../model/editor2d-document';
 import { Editor2dSelection } from '../model/editor2d-selection';
 import { Editor2dModelOptions, Editor2dNode } from '../model/editor2d';
@@ -42,7 +42,6 @@ export class PlaygroundContext2d {
     @inject(OpenerService) readonly openerService: OpenerService,
     @inject(WorkspaceService)
     protected readonly workspaceService: WorkspaceService,
-    @inject(PathPointSelectionService) readonly pathPointSelection: PathPointSelectionService,
     @inject(HistoryService) readonly historyService: HistoryService
   ) {
     this.rootURI = new URI(this.workspaceService.currentRoot!.uri);
@@ -55,7 +54,8 @@ export class PlaygroundContext2d {
    * 刷新 tree selection
    */
   syncToSelectionTree = debounce((entities: SelectionEntityManager) => {
-    if (this.pathPointSelection.selectMode !== PathSelectMode.ADD_PATH) {
+    const pathPointSelection = entities.entityManager.getEntity<PathPointSelectionEntity>(PathPointSelectionEntity);
+    if (pathPointSelection?.selectMode !== PathSelectMode.ADD_PATH) {
       return;
     }
     const selectedEntities: Editor2dEntity[] = entities.getSelectedEntities();

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

@@ -1,7 +1,6 @@
 import { inject, injectable, optional } from 'inversify';
 import {
   EditorStateConfigEntity,
-  PathPointSelectionService,
   Playground,
   PlaygroundConfig,
   PlaygroundContribution,
@@ -31,7 +30,6 @@ export class PlaygroundContribution2d implements PlaygroundContribution {
   @inject(CommandService) readonly commandService: CommandService;
   @inject(ContextMenuRenderer) @optional() 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);

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

@@ -38,7 +38,7 @@ const numberToFixed4 = (data: {[key: string]: any}) => {
 export class SelectionEntityManager {
   nodeEntitiesCache: Map<string, Editor2dEntity> = new Map();
   constructor(
-    protected entityManager: EntityManager,
+    public entityManager: EntityManager,
     protected context: PlaygroundContext2d,
     protected loading: () => boolean,
     protected getDocument: () => Editor2dDocument | undefined,