@gedit/editor-2d 0.2.46 → 0.2.47

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>
+  );
+};

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

@@ -0,0 +1,285 @@
+/* eslint-disable max-len*/
+import * as React from 'react';
+import {
+  PathChild,
+  Point,
+  toFixedValue,
+  PATH_FUNC_TYPE,
+  getLineWidth,
+  BezierArray,
+  quadraticToCubic,
+  cubicToQuadratic,
+  getPathBounds,
+  PathSchema,
+} from '@gedit/canvas-draw';
+import { Bezier } from 'bezier-js';
+import { generateUuid, PositionSchema } from '@gedit/utils';
+import { PointSchema } from './path-edit-layer-move-point';
+import { Editor2dPathNode } from '../../model';
+
+export const pathFuncIcon = [
+  {
+    icon: (
+      <svg width="1em" height="1em" viewBox="0 0 16 16">
+        <g stroke="none" fill="currentColor" fillRule="nonzero">
+          <path d="M10.4684227,7.89241331 L13.8353656,11.2580367 C14.2258898,11.648561 14.2258898,12.281726 13.8353656,12.6722503 C13.6478292,12.8597867 13.3934753,12.9651435 13.1282588,12.9651435 L2.87174123,12.9651435 C2.31945648,12.9651435 1.87174123,12.5174282 1.87174123,11.9651435 C1.87174123,11.699927 1.97709807,11.4455731 2.16463445,11.2580367 L5.5315773,7.89241331 C6.17107192,8.50939201 7.04121784,8.88888889 8,8.88888889 C8.95878216,8.88888889 9.82892808,8.50939201 10.4684227,7.89241331 Z" />
+          <path d="M8,3.11111111 C6.77270056,3.11111111 5.77777778,4.10603389 5.77777778,5.33333333 C5.77777778,6.56063278 6.77270056,7.55555556 8,7.55555556 C9.22729944,7.55555556 10.2222222,6.56063278 10.2222222,5.33333333 C10.2222222,4.10603389 9.22729944,3.11111111 8,3.11111111 Z M8,4 C8.73637967,4 9.33333333,4.59695367 9.33333333,5.33333333 C9.33333333,6.069713 8.73637967,6.66666667 8,6.66666667 C7.26362033,6.66666667 6.66666667,6.069713 6.66666667,5.33333333 C6.66666667,4.59695367 7.26362033,4 8,4 Z" />
+        </g>
+      </svg>
+    ),
+    type: PATH_FUNC_TYPE.STRAIGHT,
+    name: '笔直',
+  },
+  {
+    icon: (
+      <svg width="1em" height="1em" viewBox="0 0 16 16">
+        <g stroke="none" fill="currentColor" fillRule="nonzero">
+          <path d="M11.0960993,7.08278272 C12.90892,7.79368793 13.8669699,9.26586873 13.9715946,11.4991392 C13.9974693,12.0508335 13.5711839,12.5190234 13.0194883,12.5448693 L12.9960956,12.545691 L12.9960956,12.545691 L3.02729199,12.5459649 C2.47501636,12.5459484 2.0273085,12.0982406 2.0273085,11.5459649 C2.0273085,11.5303611 2.02767372,11.5147595 2.02840387,11.4991728 C2.13302028,9.26588707 3.09106789,7.7936962 4.9025467,7.08260023 C5.51453959,8.16114343 6.67228276,8.88888889 8,8.88888889 C9.32771724,8.88888889 10.4854604,8.16114343 11.0960993,7.08278272 Z M8,3.11111111 C9.07494019,3.11111111 9.97161786,3.87434369 10.1776822,4.88845806 L12.3150306,4.88807899 C12.4866723,4.49608833 12.8780204,4.22222222 13.3333333,4.22222222 C13.9469831,4.22222222 14.4444444,4.71968361 14.4444444,5.33333333 C14.4444444,5.94698306 13.9469831,6.44444444 13.3333333,6.44444444 C12.8776416,6.44444444 12.4860212,6.17012247 12.3146027,5.77760908 L10.1776822,5.7782086 C9.97161786,6.79232298 9.07494019,7.55555556 8,7.55555556 C6.92505981,7.55555556 6.02838214,6.79232298 5.82231777,5.7782086 L3.68539731,5.77760908 C3.51397881,6.17012247 3.1223584,6.44444444 2.66666667,6.44444444 C2.05301694,6.44444444 1.55555556,5.94698306 1.55555556,5.33333333 C1.55555556,4.71968361 2.05301694,4.22222222 2.66666667,4.22222222 C3.12197961,4.22222222 3.51332769,4.49608833 3.68496938,4.88807899 L5.82231777,4.88845806 C6.02838214,3.87434369 6.92505981,3.11111111 8,3.11111111 Z M8,4 C7.26362033,4 6.66666667,4.59695367 6.66666667,5.33333333 C6.66666667,6.069713 7.26362033,6.66666667 8,6.66666667 C8.73637967,6.66666667 9.33333333,6.069713 9.33333333,5.33333333 C9.33333333,4.59695367 8.73637967,4 8,4 Z M2.66666667,4.66666667 C2.29847683,4.66666667 2,4.9651435 2,5.33333333 C2,5.70152317 2.29847683,6 2.66666667,6 C3.0348565,6 3.33333333,5.70152317 3.33333333,5.33333333 C3.33333333,4.9651435 3.0348565,4.66666667 2.66666667,4.66666667 Z M13.3333333,4.66666667 C12.9651435,4.66666667 12.6666667,4.9651435 12.6666667,5.33333333 C12.6666667,5.70152317 12.9651435,6 13.3333333,6 C13.7015232,6 14,5.70152317 14,5.33333333 C14,4.9651435 13.7015232,4.66666667 13.3333333,4.66666667 Z" />
+        </g>
+      </svg>
+    ),
+    type: PATH_FUNC_TYPE.EQUAL,
+    name: '平衡对称',
+  },
+  {
+    icon: (
+      <svg width="1em" height="1em" viewBox="0 0 16 16">
+        <g stroke="none" fill="currentColor" fillRule="nonzero">
+          <path d="M4.9025467,7.08260023 C5.51453959,8.16114343 6.67228277,8.88888889 8,8.88888889 C8.74203543,8.88888889 9.43097987,8.66157939 10.0009996,8.27279411 L10.1137604,8.37175614 L10.1137604,8.37175614 L10.2225556,8.46711111 L10.2278018,8.60314648 C10.3091765,9.75637815 11.2705058,10.6666667 12.4444444,10.6666667 L12.5461712,10.6633099 C12.6121342,10.7325386 12.6759208,10.800472 12.7375309,10.8671103 C13.1124477,11.272636 13.087643,11.9053101 12.6821225,12.2802325 C12.4973359,12.4510762 12.2549271,12.5459649 12.0032653,12.5459649 L3.027292,12.5459649 C2.47501636,12.5459484 2.0273085,12.0982406 2.0273085,11.5459649 C2.0273085,11.5303612 2.02767373,11.5147595 2.02840387,11.4991728 C2.13302028,9.26588707 3.09106789,7.7936962 4.9025467,7.08260023 Z M8,3.11111111 C9.22729944,3.11111111 10.2222222,4.10603389 10.2222222,5.33333333 C10.2222222,5.49236269 10.2055174,5.64749043 10.1737666,5.79705753 L11.8370907,7.45894334 C12.2356667,7.30306411 12.7061115,7.38611945 13.0281014,7.70810937 C13.4620173,8.14202525 13.4620173,8.84554189 13.0281014,9.27945777 C12.5941856,9.71337365 11.8906689,9.71337365 11.456753,9.27945777 C11.1345303,8.95723505 11.0515878,8.48634268 11.2079255,8.08758262 L9.78192352,6.66134751 C9.37675045,7.20412589 8.72941562,7.55555556 8,7.55555556 C6.92505981,7.55555556 6.02838214,6.79232298 5.82231777,5.7782086 L3.68539731,5.77760908 C3.51397881,6.17012247 3.1223584,6.44444444 2.66666667,6.44444444 C2.05301694,6.44444444 1.55555556,5.94698306 1.55555556,5.33333333 C1.55555556,4.71968361 2.05301694,4.22222222 2.66666667,4.22222222 C3.07649292,4.22222222 3.43449636,4.44410206 3.62710432,4.77428908 L3.68502542,4.888207 L5.82231777,4.88845806 C6.02838214,3.87434369 6.92505981,3.11111111 8,3.11111111 Z M11.7710227,8.02237905 C11.5106732,8.28272858 11.5106732,8.70483856 11.7710227,8.96518809 C12.0313722,9.22553762 12.4534822,9.22553762 12.7138318,8.96518809 C12.9741813,8.70483856 12.9741813,8.28272858 12.7138318,8.02237905 C12.4534822,7.76202952 12.0313722,7.76202952 11.7710227,8.02237905 Z M8,4 C7.26362033,4 6.66666667,4.59695367 6.66666667,5.33333333 C6.66666667,6.069713 7.26362033,6.66666667 8,6.66666667 C8.73637967,6.66666667 9.33333333,6.069713 9.33333333,5.33333333 C9.33333333,4.59695367 8.73637967,4 8,4 Z M2.66666667,4.66666667 C2.29847683,4.66666667 2,4.9651435 2,5.33333333 C2,5.70152317 2.29847683,6 2.66666667,6 C3.0348565,6 3.33333333,5.70152317 3.33333333,5.33333333 C3.33333333,4.9651435 3.0348565,4.66666667 2.66666667,4.66666667 Z" />
+        </g>
+      </svg>
+    ),
+    type: PATH_FUNC_TYPE.BREAK,
+    name: '断开链接',
+  },
+  {
+    icon: (
+      <svg width="1em" height="1em" viewBox="0 0 16 16">
+        <g stroke="none" fill="currentColor" fillRule="nonzero">
+          <path d="M9.48113654,6.75735761 C11.4348163,7.48824028 12.802824,8.97509642 13.5854936,11.2162897 C13.7675572,11.7376913 13.4924892,12.307972 12.9710939,12.4900537 C12.8651151,12.5270636 12.7536611,12.5459649 12.6414058,12.5459649 L2.93734326,12.5459649 C2.41280388,12.5459761 1.97740772,12.1406813 1.93989294,11.6174852 C1.79069809,9.53675393 2.20550284,8.05786209 3.18430719,7.18080967 C3.80834692,8.20534701 4.93545969,8.88888889 6.22222222,8.88888889 C7.67952934,8.88888889 8.93206301,8.01214956 9.48113654,6.75735761 Z M8.39990445,5.7782086 C8.19384008,6.79232298 7.29716241,7.55555556 6.22222222,7.55555556 C5.14728203,7.55555556 4.25060437,6.79232298 4.04453999,5.7782086 L3.68539731,5.77760908 C3.51397881,6.17012247 3.1223584,6.44444444 2.66666667,6.44444444 C2.05301694,6.44444444 1.55555556,5.94698306 1.55555556,5.33333333 C1.55555556,4.71968361 2.05301694,4.22222222 2.66666667,4.22222222 C3.07649292,4.22222222 3.43449636,4.44410206 3.62710432,4.77428908 L3.68502542,4.888207 L4.04453999,4.88845806 C4.25060437,3.87434369 5.14728203,3.11111111 6.22222222,3.11111111 C7.29716241,3.11111111 8.19384008,3.87434369 8.39990445,4.88845806 L10.5371968,4.888207 C10.7088093,4.49614795 11.1001931,4.22222222 11.5555556,4.22222222 C12.1692053,4.22222222 12.6666667,4.71968361 12.6666667,5.33333333 C12.6666667,5.94698306 12.1692053,6.44444444 11.5555556,6.44444444 C11.0998638,6.44444444 10.7082434,6.17012247 10.5368249,5.77760908 Z M6.22222222,4 C5.48584256,4 4.88888889,4.59695367 4.88888889,5.33333333 C4.88888889,6.069713 5.48584256,6.66666667 6.22222222,6.66666667 C6.95860189,6.66666667 7.55555556,6.069713 7.55555556,5.33333333 C7.55555556,4.59695367 6.95860189,4 6.22222222,4 Z M11.5555556,4.66666667 C11.1873657,4.66666667 10.8888889,4.9651435 10.8888889,5.33333333 C10.8888889,5.70152317 11.1873657,6 11.5555556,6 C11.9237454,6 12.2222222,5.70152317 12.2222222,5.33333333 C12.2222222,4.9651435 11.9237454,4.66666667 11.5555556,4.66666667 Z M2.66666667,4.66666667 C2.29847683,4.66666667 2,4.9651435 2,5.33333333 C2,5.70152317 2.29847683,6 2.66666667,6 C3.0348565,6 3.33333333,5.70152317 3.33333333,5.33333333 C3.33333333,4.9651435 3.0348565,4.66666667 2.66666667,4.66666667 Z" />
+        </g>
+      </svg>
+    ),
+    type: PATH_FUNC_TYPE.UNEQUAL,
+    name: '平衡不对称',
+  },
+];
+
+export const getLeftRightCenterPoint = (item: PathChild) => {
+  const l: PathChild = { x: item.x1 ?? item.x, y: item.y1 ?? item.y };
+  const r: PathChild = { x: item.x2 ?? item.x, y: item.y2 ?? item.y };
+  const c: PathChild = { x: item.x, y: item.y };
+
+  return {
+    left: l,
+    right: r,
+    center: c,
+  };
+};
+
+export const getBezierHullByPos = (
+  points: BezierArray,
+  pos: Point
+): { x: number; y: number }[] => {
+  // 判断是二次还是三次贝塞尔曲线
+  /* const [x1, y1, x2, y2, x3, y3, x4, y4] = points;
+  let p: BezierArray | BezierArray<number, 6> = points;
+  const isQuadratic = x1 === x2 && y1 === y2 || x3 === x4 && y3 === y4;
+  if (isQuadratic) {
+    const xB = x1 === x2 && y1 === y2 ? x3 : x1;
+    const yB = x1 === x2 && y1 === y2 ? y3 : y1;
+    p = [x1, y1, xB, yB, x4, y4];
+  } */
+  const bezier = new Bezier(...points);
+  const { t = 0 } = bezier.project(pos);
+  const h = bezier.hull(t);
+  const hull = h.slice(-6);
+  return hull;
+};
+/**
+ * 按点获取扩展点
+ * @param c
+ * @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 getExtendPositionByRadius = (
+  c: PathChild,
+  p: PathChild,
+  r: number
+): PathChild => {
+  const ang = (Math.atan2(p.y - c.y, p.x - c.x) / Math.PI) * 180;
+  const angle = 180 + ang;
+  const x = c.x + r * Math.cos((angle * Math.PI) / 180);
+  const y = c.y + r * Math.sin((angle * Math.PI) / 180);
+  // console.log(ang, angle);
+  return { x, y };
+};
+
+/**
+ * 获取点击线上的新增点
+ */
+export const getNewPoint = (
+  point: PathChild,
+  nextPoint: PathChild,
+  pos: PointSchema
+): PathChild => {
+  const afterQuadratic =
+    point.type === PATH_FUNC_TYPE.STRAIGHT &&
+    nextPoint.type !== PATH_FUNC_TYPE.STRAIGHT &&
+    typeof nextPoint.x1 === 'number' &&
+    typeof nextPoint.y1 === 'number';
+  const beforeQuadratic =
+    point.type !== PATH_FUNC_TYPE.STRAIGHT &&
+    nextPoint.type === PATH_FUNC_TYPE.STRAIGHT &&
+    typeof point.x2 === 'number' &&
+    typeof point.y2 === 'number';
+  const isQuadratic = beforeQuadratic || afterQuadratic;
+  const bezier: BezierArray = [
+    point.x,
+    point.y,
+    point.x2 ?? point.x,
+    point.y2 ?? point.y,
+    nextPoint.x1 ?? nextPoint.x,
+    nextPoint.y1 ?? nextPoint.y,
+    nextPoint.x,
+    nextPoint.y,
+  ];
+  if (isQuadratic) {
+    // 转换三次贝赛尔
+    const cubic = quadraticToCubic(
+      {
+        x: point.x,
+        y: point.y,
+      },
+      {
+        x: beforeQuadratic ? point.x2! : nextPoint.x1!,
+        y: beforeQuadratic ? point.y2! : nextPoint.y1!,
+      },
+      {
+        x: nextPoint.x,
+        y: nextPoint.y,
+      }
+    );
+    bezier[2] = cubic[0];
+    bezier[3] = cubic[1];
+    bezier[4] = cubic[2];
+    bezier[5] = cubic[3];
+  }
+  const hull = getBezierHullByPos(bezier, pos);
+  /**
+   * 0, 1, 2: 二次贝赛尔点，1为中心点，没用
+   * 3, 4: 三次点，
+   * 5: 新增点
+   */
+  const newPoint: PathChild = {
+    x: hull[5].x,
+    y: hull[5].y,
+    x1: hull[3].x,
+    y1: hull[3].y,
+    x2: hull[4].x,
+    y2: hull[4].y,
+    id: generateUuid(),
+    type: PATH_FUNC_TYPE.UNEQUAL,
+  };
+  let pCenter;
+  if (point.type !== PATH_FUNC_TYPE.STRAIGHT) {
+    point.type = PATH_FUNC_TYPE.UNEQUAL;
+    point.x2 = toFixedValue(hull[0].x, 4);
+    point.y2 = toFixedValue(hull[0].y, 4);
+  } else {
+    // 不是贝赛尔时，转换回二次贝赛尔点;
+    pCenter = cubicToQuadratic(hull[5], hull[3]);
+    newPoint.x1 = toFixedValue(pCenter.x, 4);
+    newPoint.y1 = toFixedValue(pCenter.y, 4);
+  }
+  if (nextPoint.type !== PATH_FUNC_TYPE.STRAIGHT) {
+    nextPoint.type = PATH_FUNC_TYPE.UNEQUAL;
+    nextPoint.x1 = toFixedValue(hull[2].x, 4);
+    nextPoint.y1 = toFixedValue(hull[2].y, 4);
+  } else {
+    pCenter = cubicToQuadratic(hull[5], hull[4]);
+    newPoint.x2 = toFixedValue(pCenter.x, 4);
+    newPoint.y2 = toFixedValue(pCenter.y, 4);
+  }
+  return newPoint;
+};
+
+export const setBezierMovePoint = (
+  path: PathChild,
+  key: 'left' | 'right',
+  pos: PointSchema
+): PathChild => {
+  const { type } = path;
+  const x = key === 'left' ? 'x1' : 'x2';
+  const x1 = key === 'left' ? 'x2' : 'x1';
+  const y = key === 'left' ? 'y1' : 'y2';
+  const y1 = key === 'left' ? 'y2' : 'y1';
+  const center = { x: path.x, y: path.y };
+  const currentPoint = { x: pos.x, y: pos.y };
+  path[x] = toFixedValue(pos.x, 4);
+  path[y] = toFixedValue(pos.y, 4);
+  let p2: PointSchema | false = false;
+  const isOnly =
+    typeof path[x1] === 'undefined' && typeof path[y1] === 'undefined';
+  if (!isOnly) {
+    switch (type) {
+      case PATH_FUNC_TYPE.EQUAL:
+        p2 = getExtendPositionByPoint(center, currentPoint);
+        break;
+      case PATH_FUNC_TYPE.UNEQUAL:
+        // 取半径，走圆周；
+        const radius = getLineWidth(center, { x: path[x1]!, y: path[y1]! });
+        p2 = getExtendPositionByRadius(center, currentPoint, radius);
+        break;
+      default:
+        break;
+    }
+    if (p2) {
+      path[x1] = toFixedValue(p2.x, 4);
+      path[y1] = toFixedValue(p2.y, 4);
+    }
+  }
+  return path;
+};
+
+export const updatePathNodeData = (node: Editor2dPathNode): { path: PathSchema, position: PositionSchema } => {
+  const { position, origin, path } = node;
+  const { paths: p = [], closed } = path;
+  const paths = [...p];
+  if (closed) {
+    paths.push(paths[0]);
+  }
+  const bounds = getPathBounds(paths);
+
+  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,
+      x: toFixedValue(c.x - x, 4),
+      y: toFixedValue(c.y - y, 4),
+    };
+    if (typeof c.x1 === 'number') {
+      item.x1 = toFixedValue(c.x1 - x, 4);
+    }
+    if (typeof c.x2 === 'number') {
+      item.x2 = toFixedValue(c.x2 - x, 4);
+    }
+    if (typeof c.y1 === 'number') {
+      item.y1 = toFixedValue(c.y1 - y, 4);
+    }
+    if (typeof c.y2 === 'number') {
+      item.y2 = toFixedValue(c.y2 - y, 4);
+    }
+    return item;
+  });
+  return {
+    path: { ...path, paths: newPath },
+    position: {
+      x: x + (position?.x || 0),
+      y: y + (position?.y || 0),
+    },
+  };
+};