@gedit/editor-2d 0.2.46 → 0.2.48

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

@@ -2,19 +2,83 @@ import { entity, Layer, PipelineDimension } from '@gedit/playground';
 import { DocumentEntity, Editor2dEntity } from './entities';
 import { domUtils } from '@gedit/utils/lib/browser';
 import { PlaygroundContext2d } from './playground-context';
-import { Editor2dDocument } from '../model';
+import { Editor2dDocument, Editor2dNode } from '../model';
 import { Rectangle } from '@gedit/math';
 import { SelectionEntityManager } from './selection-entity-manager';
 import { CanvasDraw, CanvasDrawLoadingState, GameObjectChangeEvent, GameObjectEventType } from './canvas-draw';
 import { debounce, OriginSchema } from '@gedit/utils';
-import { GameObjectBaseType, GameWidgetIDE } from '@gedit/render-engine-ide';
+import { GameObject, GameObjectBaseType, GameWidgetIDE } from '@gedit/render-engine-ide';
+import { toFixedValue as toFixedValueFunc } from '@gedit/canvas-draw';
+/**
+ * 四舍五入并保留小数点
+ * @param value
+ * @param fixed  需要保留的小数位，默认两位
+ */
+export const toFixedValue = toFixedValueFunc;
 
+const childrenMap = (list: GameObject[], c: GameObject) => {
+  if (c.disposed) {
+    return;
+  }
+  if (!list.includes(c)) {
+    list.push(c);
+  }
+  if (c.children) {
+    c.children.forEach(d => {
+      childrenMap(list, d);
+    });
+  }
+};
+const parentMap = (list: GameObject[], p: GameObject) => {
+  if (p.disposed) {
+    return;
+  }
+  if (!list.includes(p)) {
+    list.push(p);
+  }
+  if (p.parent) {
+    parentMap(list , p.parent);
+  }
+};
+
+const getListData = (list: GameObject[]) => {
+  let updateList: GameObject[] = [];
+
+  // 遍历更新节点；
+  list.forEach(item => {
+    if (item.disposed) {
+      return;
+    }
+    if (!updateList.includes(item)) {
+      updateList.push(item);
+    }
+    // 子级遍历
+    if (item.children) {
+      item.children.forEach(c => {
+        childrenMap(updateList, c);
+      });
+    }
+    // 父级遍历
+    if (item.parent) {
+      childrenMap(updateList, item.parent);
+    }
+  });
+  updateList = updateList.filter(c => !c.disposed).sort((a, b) => {
+    const aa = a.getDepth?.() || 0;
+    const bb = b.getDepth?.() || 0;
+    return aa - bb;
+  });
+  return updateList;
+};
 export class CanvasLayer extends Layer<PlaygroundContext2d> {
   @entity(DocumentEntity) documentEntity: DocumentEntity;
   node = domUtils.createDivWithClass('gedit-canvas-layer');
   protected scene?: HTMLElement;
   protected selectionEntityManager: SelectionEntityManager;
   protected canvasDrawer?: CanvasDraw;
+  protected updateList: GameObject[] = [];
+  protected nodeCache: Map<string, Editor2dNode> = new Map();
+  protected updateTimeout: NodeJS.Timeout;
   onReady(): void {
     this.selectionEntityManager = new SelectionEntityManager(
       this.entityManager,
@@ -24,6 +88,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       () => !!this.documentEntity.config?.visible
     );
     this.canvasDrawer = new CanvasDraw({
+      entityManager: this.entityManager,
       host: this.node,
       renderEngine: this.context.renderEngine,
       assetsURI: this.getAssetsURI(),
@@ -41,6 +106,14 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     ]);
     // this.entityManager.getEntity<RulerConfigEntity>(RulerConfigEntity)?.customizeOriginClick(this.config.scrollPageBoundsToCenter.bind(this));
     this.config.loading = true;
+    if (this.stateService) {
+      this.toDispose.push(this.stateService?.onStateChanged(state => {
+        // 布局完成后再归位画布；
+        if (state === 'ready') {
+          this.tryToResizeToCenter();
+        }
+      }));
+    }
   }
   onContainerInitOrigin(
     entity?: Editor2dEntity,
@@ -50,19 +123,19 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     if (config.appConfig?.engine !== 'pixi' || !entity) {
       return;
     }
-    const { node } = entity;
+    const node = this.nodeCache.get(entity.id);
     const type = node?.displayType;
     // 分组与组件创建完后初始化中心点;
     if (
-      node && (type === GameObjectBaseType.GROUP ||
-      type === GameObjectBaseType.COMPONENT)
+      node && (type === GameObjectBaseType.COMPONENT)
     ) {
       const { transform } = entity;
       const { origin: org, localBounds } = transform;
-      const { x: minX, y: minY, width, height } = localBounds;
+      // console.log(localBounds, entity.gameObject.rendererObject._localBoundsRect);
+      const { x: minX, y: minY, width, height } = localBounds; // entity.gameObject.rendererObject._localBoundsRect;
       // 算出组件与组的 0 点位置；
-      const x = (-minX / width) || 0;
-      const y = (-minY / height) || 0;
+      const x = toFixedValue((-minX / width) || 0, 6);
+      const y = toFixedValue((-minY / height) || 0, 6);
       const initOrigin = { x, y };
       const o: OriginSchema = update ? org : initOrigin;
       if (update || typeof o.initX === 'undefined') {
@@ -74,72 +147,51 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
           initY: initOrigin.y || 0
         };
         // group origin 始终为 0;
-        if (type === GameObjectBaseType.GROUP) {
-          origin.x = initOrigin.x || 0;
-          origin.y = initOrigin.y || 0;
-        }
         // transform.update({ origin });
         this.document?.updateNode(node, {
           origin,
         });
+        // console.log('--------------origin--------------', origin);
+        // obj.data.origin = origin;
         // this.selectionEntityManager.updateEntity(obj.id, obj);
       }
     }
   };
+  onUpdateEntity = debounce((update: boolean) => {
+    const updateList = getListData(this.updateList);
+    updateList.forEach(item => {
+      if (item.disposed) {
+        return;
+      }
+      // console.log('------------------updateddddddddddddddd-----------', item);
+      this.selectionEntityManager.updateEntity(item.id, item, this.config.config.zoom);
+      const entity = this.selectionEntityManager.nodeEntitiesCache.get(item.id);
+      this.onContainerInitOrigin(entity, update);
+    });
+    this.updateList = [];
+  });
+
   onGameObjectChange(e: GameObjectChangeEvent): void {
-    const { gameObject, parentObject, parentNode, state } = e;
+    const { gameObject, state, node } = e;
     switch (e.type) {
       case GameObjectEventType.CREATE:
-        this.document?.updateNode(e.node, { error: undefined });
-        this.selectionEntityManager.createEntity(gameObject.id, e.node, gameObject!, !!state?.selectable, !!state?.adsorbable);
-        break;
-      case GameObjectEventType.CREATE_READY:
-        // 避免元素创后的回调；必须在元素创建完实例后执行；
-        setTimeout(() => {
-          const entity = this.selectionEntityManager.nodeEntitiesCache.get(gameObject.id);
-          // 旧的没有中心点
-          if (typeof entity?.transform.origin.initX === 'undefined') {
-            this.selectionEntityManager.updateEntity(gameObject.id, gameObject!);
-            this.onContainerInitOrigin(entity);
-          }
-          if (
-            parentObject &&
-            parentNode &&
-            (parentObject.type === GameObjectBaseType.GROUP ||
-              parentObject.type === GameObjectBaseType.COMPONENT)
-          ) {
-            this.document?.updateNode(parentNode, undefined, true);
-          }
-        });
+        this.document?.updateNode(node, { error: undefined });
+        this.selectionEntityManager.createEntity(gameObject.id, node, gameObject!, !!state?.selectable, !!state?.adsorbable);
         break;
       case GameObjectEventType.DESTROY:
         this.selectionEntityManager.removeEntity(gameObject.id);
-        // destroy 后 gameObject 没有 parent;
-        if (parentNode) {
-          this.document?.updateNode(parentNode, undefined, true);
-        }
+        this.nodeCache.delete(gameObject.id);
         break;
       case GameObjectEventType.UPDATE:
-        this.selectionEntityManager.updateEntity(gameObject.id, gameObject!);
-        // TODO 父节点更新则通知子节点更新, 用于刷新transform
-        gameObject!.children.forEach(c => {
-          this.selectionEntityManager.updateEntity(c.id as string, c);
-        });
-        if (
-          parentObject &&
-          parentObject.parent &&
-          (parentObject.type === GameObjectBaseType.GROUP ||
-            parentObject.type === GameObjectBaseType.COMPONENT)
-        ) {
-          // 需要等 parent 数据没有更后再执行；
-          setTimeout(() => {
-            const entity = this.selectionEntityManager.nodeEntitiesCache.get(parentObject.id);
-            this.onContainerInitOrigin(entity, true);
-          });
+        // console.log('------------------update-----------', gameObject.name);
+        if (!this.updateList.includes(gameObject)) {
+          this.updateList.push(gameObject);
+          this.nodeCache.set(gameObject.id, node);
         }
+        this.onUpdateEntity(true);
         break;
       case GameObjectEventType.ERROR:
-        this.document?.updateNode(e.node, {error: e.error});
+        this.document?.updateNode(node, {error: e.error});
         break;
     }
     this.context.onCanvasDataChangedEmitter.fire(this.canvasDrawer!);
@@ -162,7 +214,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
     if (!this.config.loading && !reload) return;
     if (loaded || allCount <= currentCount || allCount === 0) {
       this.config.loading = false;
-      this.tryToResizeToCenter();
+      // this.tryToResizeToCenter();
       this.node.classList.add('ready');
       this.loaded();
     } else {
@@ -191,6 +243,15 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
   onZoom = debounce(() => {
     const config = this.config.config;
     this.canvasDrawer?.refreshScale(true, config.zoom);
+    const selectedEntities = this.selectionEntityManager.getSelectedEntities();
+    if (this.document?.engineName === 'dom' && selectedEntities?.length) {
+      selectedEntities.forEach(c => {
+        const {gameObject} = c;
+        if (gameObject) {
+          this.selectionEntityManager.updateEntity(gameObject.id, gameObject, this.config.config.zoom);
+        }
+      });
+    }
   });
   onResize = debounce((size: PipelineDimension) => {
     const renderWidget = this.canvasDrawer?.renderWidget;
@@ -209,11 +270,11 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
   private currentRectangle: Rectangle | undefined;
   // private currentResolution = 1;
 
-  tryToResizeToCenter(): void {
+  tryToResizeToCenter = debounce(() => {
     const {visible } = this.documentEntity.config;
     // const resolution = appConfig?.resolution || 1;
     const size = this.canvasDrawer?.getSceneSize();
-    if (!visible || !size || this.config.loading || this.config.config.width === 0 || this.config.config.height === 0) return;
+    if (!visible || !size || this.config.config.width === 0 || this.config.config.height === 0) return;
     const newRect = new Rectangle(0, 0, size.width, size.height);
     if (!this.currentRectangle || !this.currentRectangle.isEqual(newRect)) {
       this.currentRectangle = newRect;
@@ -223,7 +284,7 @@ export class CanvasLayer extends Layer<PlaygroundContext2d> {
       this.config.scrollPageBoundsToCenter(true, 16, !this.context.options.isTemplate)
         .then(() => this.onZoom());
     }
-  }
+  }, 100); // 打开时会有一次 tag 大小的视图，宽是 98px,,dom 下没有引擎加载，会响应 98 宽，加 100 ms 延时
   draw(): void {
     const config = this.documentEntity.config;
     const document = config.document;

package/src/browser/playground/index.ts

@@ -7,3 +7,5 @@ export * from './canvas-draw';
 export { SelectorExtendType } from './selector-extend-icons';
 export * from './selector-extend-renderer';
 export * from './extend-edit-layer';
+export * from './path-edit';
+export * from './path-edit-layer';

package/src/browser/playground/path-edit/index.ts

@@ -0,0 +1,3 @@
+export * from './path-edit-layer-move-point';
+export * from './path-edit-layer-svg-path';
+export * from './utils';

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

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { PathChild, PATH_FUNC_TYPE, getPointsToPath } from '@gedit/canvas-draw';
+import { PositionSchema } from '@gedit/playground';
+import { PathEditLayerEventContext } from '../path-edit-layer';
+import clsx from 'clsx';
+
+export interface PointSchema extends PositionSchema {
+  id?: string;
+}
+
+export interface PointDefaultProps {
+  getPosFromMouseEvent: (
+    event: {
+      clientX: number;
+      clientY: number;
+    },
+    addScale?: boolean
+  ) => PositionSchema;
+  paths: PathChild[];
+  scale: number;
+  closePath: boolean; // 显示闭合路径图标
+  currentPointId?: string;
+}
+
+export const PointMoveDefault = ({
+  getPosFromMouseEvent,
+  paths,
+  scale,
+  closePath,
+  currentPointId,
+}: PointDefaultProps) => {
+  const [movePoint, setMovePoint] = React.useState<PathChild>();
+  const { onSceneAddEvent } = React.useContext(PathEditLayerEventContext);
+  const endPoint = paths[paths.length - 1];
+  const startPoint = paths[0];
+  /**
+   * 选中起始点的情况，显示移动点，绘制起点到移动点的路径，反转点的 x1=x2, y1=y2；
+   * @param lineStartPoint 选中的起始点
+   * @param lineEndPoint 选中的结束点
+   * @param reverse 是否反转
+   */
+  let lineStartPoint = paths.find(c => c.id === currentPointId);
+  let lineEndPoint = lineStartPoint === startPoint ? endPoint : startPoint;
+  const reverse = lineStartPoint === startPoint && lineStartPoint !== endPoint;
+  if (reverse && lineStartPoint) {
+    const { x1, x2, y1, y2 } = lineStartPoint;
+    lineStartPoint = {
+      ...lineStartPoint,
+      x1: x2,
+      x2: x1,
+      y1: y2,
+      y2: y1,
+    };
+    const { x1: e1, x2: e2, y1: r1, y2: r2 } = lineEndPoint;
+    lineEndPoint = {
+      ...lineEndPoint,
+      x1: e2,
+      x2: e1,
+      y1: r2,
+      y2: r1,
+    };
+  }
+  const onMove = (e: MouseEvent) => {
+    const pos = getPosFromMouseEvent(e);
+    setMovePoint({
+      ...pos,
+      type: PATH_FUNC_TYPE.STRAIGHT,
+    });
+  };
+  React.useEffect(() => {
+    const event = onSceneAddEvent('mousemove', onMove);
+    const event2 = onSceneAddEvent('mouseleave', () => {
+      setMovePoint(undefined);
+    });
+    return () => {
+      event.dispose();
+      event2.dispose();
+    };
+  }, []);
+  if (!movePoint) {
+    return null;
+  }
+  const line =
+    lineStartPoint &&
+    getPointsToPath([lineStartPoint, closePath ? lineEndPoint : movePoint]);
+  return (
+    <>
+      {line && (
+        <path
+          className="gedit-path-edit-layer-line"
+          d={line}
+          strokeLinecap="round"
+          strokeWidth={1.5 / scale}
+        />
+      )}
+      <circle
+        className={clsx(
+          'gedit-path-edit-layer-point',
+          'gedit-path-edit-layer-point-move',
+          'gedit-path-edit-layer-pen'
+        )}
+        cx={closePath ? startPoint.x : movePoint.x}
+        cy={closePath ? startPoint.y : movePoint.y}
+        r={4 / scale}
+      />
+    </>
+  );
+};

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

@@ -0,0 +1,283 @@
+import * as React from 'react';
+import {
+  PathChild,
+  PATH_FUNC_TYPE,
+  getPointsToPaths /* getPathToBezier */,
+} from '@gedit/canvas-draw';
+import {
+  PointMoveDefault,
+  PointDefaultProps,
+} from './path-edit-layer-move-point';
+import { PathEditLayerEventContext } from '../path-edit-layer';
+import clsx from 'clsx';
+import { generateUuid } from '@gedit/utils';
+import { PathSelectMode } from '@gedit/playground';
+
+export interface PointSelection {
+  pointId?: string;
+  bezierKey?: string;
+}
+export interface PathSVGProps {
+  width: number;
+  height: number;
+  scale: number;
+  paths: PathChild[];
+  closed: boolean; // 是否闭合路径
+  selection?: PointSelection[];
+  selectMode?: PathSelectMode;
+  getPosFromMouseEvent: PointDefaultProps['getPosFromMouseEvent'];
+  getPointIsStartOrEnd: () => boolean;
+}
+
+export const SvgPath = ({
+  width,
+  height,
+  paths = [],
+  closed,
+  scale,
+  selection = [],
+  selectMode,
+  getPosFromMouseEvent,
+  getPointIsStartOrEnd,
+}: PathSVGProps) => {
+  const isMultiple = selection.length > 1; // 多选模式;
+  const isSelect = selectMode !== PathSelectMode.ADD_PATH; // 选择点模式
+  const [hideMovePoint, setHideMovePoint] = React.useState(false);
+  const [closePath, setClosePath] = React.useState(false);
+  const onHideMovePoint = () => {
+    setHideMovePoint(true);
+  };
+  const onShowMovePoint = () => {
+    setHideMovePoint(false);
+  };
+  const onClosePath = () => {
+    setClosePath(true);
+  };
+  const onReClosePath = () => {
+    setClosePath(false);
+  };
+  const {
+    onPointMouseDown,
+    onClosePath: onClosedPath,
+    onPathAddPoint,
+    onBezierPointMouseDown,
+  } = React.useContext(PathEditLayerEventContext);
+  const p = [...paths];
+  if (closed) {
+    p.push({
+      ...paths[0],
+      id: generateUuid(),
+    });
+  }
+  const pathsStringArray = getPointsToPaths(p);
+  /**
+   * 路径点
+   * 1. 没有任何点的情况，显示默认移动点，不绘制路径；
+   * 2. 有点的情况，显示所有点，绘制最后点到移动点的路径；
+   * 3. 选中中间点的情况，不显示移动点与路径；
+   * 4. 选中起始点的情况，显示移动点，绘制起点到移动点的路径，反转点的 x1=x2, y1=y2；
+   * 5. 选中贝赛尔点时，不显示移动点与路径；
+   * @param bezierSelect 是否选中贝赛尔点
+   * @param pointIsStartOrEnd 是否选中起始点或结束点
+   * @param currentPointIndex 当前选中点的索引
+   * @param closePointIndex 当前选中点的闭合点索引
+   */
+  const bezierSelect =
+    !isMultiple &&
+    selection[0] &&
+    typeof selection[0].bezierKey !== 'undefined';
+  const pointIsStartOrEnd = getPointIsStartOrEnd();
+  const currentPointIndex =
+    !isSelect && selection.length
+      ? paths.findIndex(c => c.id === selection[0].pointId)
+      : undefined;
+  const closePointIndex =
+    currentPointIndex === paths.length - 1 ? 0 : paths.length - 1;
+  const allPoints = paths.map((item, i) => {
+    /**
+     * 经过点时，是否关闭路径；
+     * 条件：
+     * 1. 点的数量大于2; 或者点的数量等于2，但是有一点不是直线时;
+     * 2. 不是闭合路径时; 闭合路径了选择器是 select_bezier;
+     * 3. 不是多选模式;
+     * 4. 第一帧或最后一帧时;
+     * 5. 选中的点是起始点时，最后一点是闭合点；选中的点是结束点时，第一点是闭合点；
+     */
+    const closePoint =
+      (paths.length > 2 ||
+        (paths.length === 2 &&
+          paths.some(c => c.type !== PATH_FUNC_TYPE.STRAIGHT))) &&
+      !closed &&
+      !isMultiple &&
+      pointIsStartOrEnd &&
+      closePointIndex === i;
+    return (
+      <circle
+        className={clsx('gedit-path-edit-layer-point', {
+          'gedit-path-edit-layer-point-closed': closePoint,
+          'gedit-path-edit-layer-point-active':
+            selection.some(c => c.pointId === item.id) && !bezierSelect,
+        })}
+        cx={item.x}
+        cy={item.y}
+        r={4 / scale}
+        key={item.id}
+        strokeWidth="1"
+        onMouseDown={e => {
+          e.preventDefault();
+          e.stopPropagation();
+          if (closePoint) {
+            onClosedPath();
+            return;
+          }
+          onPointMouseDown?.(e, item);
+        }}
+        onMouseEnter={closePoint ? onClosePath : onHideMovePoint}
+        onMouseLeave={closePoint ? onReClosePath : onShowMovePoint}
+      />
+    );
+  });
+  // 贝塞尔点
+  const bezierPointNodes: JSX.Element[] = [];
+  const bezierPathNodes: JSX.Element[] = [];
+  const bezierPoints: PathChild[] = [];
+  // 插入贝塞尔点
+  selection.forEach(item => {
+    const { pointId: currentPointId } = item;
+    const index = paths.findIndex(c => c.id === currentPointId);
+    // 关闭路径把第一个贝赛尔点加入
+    if (closed) {
+      if (index === paths.length - 1) {
+        bezierPoints.push(paths[0]);
+      }
+      if (index === 0) {
+        bezierPoints.push(paths[paths.length - 1]);
+      }
+    }
+    // 前后两点加当前开启贝赛尔点
+    paths.filter((_, i) => i >= index - 1 && i <= index + 1).forEach(c => {
+      if (bezierPoints.some(d => d.id === c.id)) {
+        return;
+      }
+      bezierPoints.push(c);
+    });
+  });
+  bezierPoints.forEach((p, i) => {
+    const selectionNode = selection.find(c => c.pointId === p.id);
+    const { bezierKey, pointId: currentPointId } = selectionNode || {};
+    if (p.type === PATH_FUNC_TYPE.STRAIGHT) {
+      return;
+    }
+    if ('x1' in p && 'y1' in p) {
+      bezierPathNodes.push(
+        <path
+          key={`${p.id}_${i}_x1-line`}
+          className="gedit-path-edit-layer-point-bezier-line"
+          strokeWidth={1 / scale}
+          d={`M${p.x},${p.y} L${p.x1},${p.y1}`}
+        />
+      );
+      bezierPointNodes.push(
+        <circle
+          key={`${p.id}_${i}_x1_point`}
+          className={clsx('gedit-path-edit-layer-point-bezier', {
+            'gedit-path-edit-layer-point-active':
+              bezierKey === 'left' && currentPointId === p.id,
+          })}
+          cx={p.x1}
+          cy={p.y1}
+          r={3 / scale}
+          onMouseDown={e => {
+            onBezierPointMouseDown(e, p, 'left');
+          }}
+          onMouseEnter={onHideMovePoint}
+          onMouseLeave={onShowMovePoint}
+        />
+      );
+    }
+    if ('x2' in p && 'y2' in p) {
+      bezierPathNodes.push(
+        <path
+          key={`${p.id}_${i}_x2-line`}
+          className="gedit-path-edit-layer-point-bezier-line"
+          strokeWidth={1 / scale}
+          d={`M${p.x},${p.y} L${p.x2},${p.y2}`}
+        />
+      );
+      bezierPointNodes.push(
+        <circle
+          key={`${p.id}_${i}x2_point`}
+          className={clsx('gedit-path-edit-layer-point-bezier', {
+            'gedit-path-edit-layer-point-active':
+              bezierKey === 'right' && currentPointId === p.id,
+          })}
+          cx={p.x2}
+          cy={p.y2}
+          r={3 / scale}
+          onMouseDown={e => {
+            onBezierPointMouseDown(e, p, 'right');
+          }}
+          onMouseEnter={onHideMovePoint}
+          onMouseLeave={onShowMovePoint}
+        />
+      );
+    }
+  });
+
+  const showDefaultMovePoint =
+    !isMultiple && // 不是多选模式
+    !isSelect && // 不是选择模式
+    !hideMovePoint && // 没经过点时
+    !closed && // 不是关闭路径时
+    (!paths.length || // 没有点时
+      pointIsStartOrEnd); // 选中起始点或结束点时
+  // const ppp = [...paths, paths[0]];
+  // const bezierBox = getPathToBezier(ppp).map(c => c.bbox());
+
+  return (
+    <svg
+      width={width || 300}
+      height={height || 300}
+      className={clsx('gedit-path-edit-layer-svg', {
+        // 'gedit-path-edit-layer-pen': !closed,
+      })}
+    >
+      {showDefaultMovePoint && (
+        <PointMoveDefault
+          getPosFromMouseEvent={getPosFromMouseEvent}
+          paths={paths}
+          scale={scale}
+          closePath={closePath}
+          currentPointId={selection[0]?.pointId}
+        />
+      )}
+      {pathsStringArray.map((p, i) => (
+        <path
+          className={clsx(
+            'gedit-path-edit-layer-path',
+            'gedit-path-edit-layer-pen'
+          )}
+          key={i.toString()}
+          strokeLinecap="round"
+          strokeWidth={1.5 / scale}
+          d={p}
+          onMouseEnter={onHideMovePoint}
+          onMouseLeave={onShowMovePoint}
+          onMouseDown={e => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+          onClick={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onPathAddPoint(i, e);
+          }}
+        />
+      ))}
+      {/* bezierBox.map(c => <rect stroke='#000' strokeWidth={2} fill="none" x={c.x.min} y={c.y.min} width={c.x.size} height={c.y.size} />) */}
+      {bezierPathNodes}
+      {allPoints}
+      {bezierPointNodes}
+    </svg>
+  );
+};