@gedit/editor-2d 0.3.14 → 0.3.16

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

@@ -3,16 +3,21 @@ import {
   PathChild,
   PATH_FUNC_TYPE,
   getPointsToPaths /* getPathToBezier */,
+  cubicToQuadratic,
 } from '@gedit/canvas-draw';
 import {
   PointMoveDefault,
   PointDefaultProps,
+  PointSchema,
 } from './path-edit-layer-move-point';
 import { PathEditLayerEventContext } from '../path-edit-layer';
 import clsx from 'clsx';
 import { generateUuid } from '@gedit/utils';
 import { PathSelectMode, PathPointSelection } from '@gedit/playground';
 import { Editor2dPathNode } from '../../model';
+import { getParallelPositionByPoint } from '../../utils/bezier.path.utils';
+import { getBezierPointArray, createBezier, getPathCenter } from './utils';
+import { Bezier, Projection } from 'bezier-js';
 
 export interface PathSVGProps {
   width: number;
@@ -24,6 +29,10 @@ export interface PathSVGProps {
   selectMode?: PathSelectMode;
   getPosFromMouseEvent: PointDefaultProps['getPosFromMouseEvent'];
   getPointIsStartOrEnd: () => boolean;
+  showAllBezier?: boolean;
+  getPathMousePos: (e: { clientX: number; clientY: number }) => PointSchema;
+  onUpdateNodeData: (b?: boolean) => void;
+  pathPosToCanvasPos: (c: PathChild) => PathChild;
 }
 
 export const SvgPath = ({
@@ -36,15 +45,39 @@ export const SvgPath = ({
   selectMode,
   getPosFromMouseEvent,
   getPointIsStartOrEnd,
+  getPathMousePos,
+  showAllBezier,
+  onUpdateNodeData,
+  pathPosToCanvasPos,
 }: PathSVGProps) => {
-  const {
-    path,
-  } = node || {};
+  const { path } = node || {};
   const { closed } = path || {};
+  const {
+    onPointMouseDown,
+    onClosePath: onClosedPath,
+    onPathAddPoint,
+    onBezierPointMouseDown,
+    isCtrlKey,
+    isShiftKey,
+  } = React.useContext(PathEditLayerEventContext);
   const isMultiple = selection.length > 1; // 多选模式;
   const isSelect = selectMode !== PathSelectMode.ADD_PATH; // 选择点模式
   const [hideMovePoint, setHideMovePoint] = React.useState(false);
   const [closePath, setClosePath] = React.useState(false);
+  const [showPathAddPoint, setShowPathAddPoint] = React.useState<
+  false | { x: number; y: number; bezier: Bezier }
+  >(false);
+  const [lineHover, setLineHover] = React.useState(-1);
+  const noPathClickRef = React.useRef(false);
+
+  const pathDragStartRef = React.useRef<{
+    bezier: Bezier;
+    startPos: PointSchema;
+    point: Projection;
+    index: number;
+    nextIndex: number;
+    offset: PointSchema;
+  }>();
   const onHideMovePoint = () => {
     setHideMovePoint(true);
   };
@@ -61,12 +94,206 @@ export const SvgPath = ({
     e.preventDefault();
     e.stopPropagation();
   };
-  const {
-    onPointMouseDown,
-    onClosePath: onClosedPath,
-    onPathAddPoint,
-    onBezierPointMouseDown,
-  } = React.useContext(PathEditLayerEventContext);
+
+  const onPathMove = (i: number, e: React.MouseEvent) => {
+    if (isCtrlKey) {
+      setShowPathAddPoint(false);
+      return;
+    }
+    const { path = { paths: [] } } = node || {};
+    const { paths: p = [] } = path;
+    const point = p[i];
+    const nextPoint = p[i + 1] || p[0];
+    const pos = getPathMousePos(e);
+    const bezierPoint = getBezierPointArray(point, nextPoint);
+    const bezier =
+      showPathAddPoint !== false
+        ? showPathAddPoint.bezier
+        : createBezier(bezierPoint);
+    // if (isShiftKey) {
+    //   const centerT = getPathCenter(bezier);
+    //   const centerPoint = bezier.get(centerT);
+    //   const center = bezier.project(centerPoint);
+    //   setShowPathAddPoint({ ...center, bezier });
+    //   return;
+    // }
+    // const projectPos = bezier.project(pos);
+    setShowPathAddPoint({ ...pos, bezier });
+  };
+  const onPathMouseDown = (i: number, e: React.MouseEvent) => {
+    if (isCtrlKey) {
+      const { path = { paths: [] } } = node || {};
+      const { paths: p = [] } = path;
+      const point = p[i];
+      const nextIndex = p[i + 1] ? i + 1 : 0;
+      const nextPoint = p[nextIndex];
+      const pos = getPathMousePos(e);
+      const bezierPoint = getBezierPointArray(point, nextPoint);
+      const bezier = createBezier(bezierPoint);
+      const projectPos = bezier.project(pos);
+      const offset = {
+        x: pos.x - projectPos.x,
+        y: pos.y - projectPos.y,
+      };
+      noPathClickRef.current = false;
+      pathDragStartRef.current = {
+        bezier,
+        startPos: pos,
+        point: projectPos,
+        index: i,
+        nextIndex,
+        offset,
+      };
+      setLineHover(i);
+    }
+  };
+  const onPointDoubleClick = (point: PathChild) => (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    // 双击切换点的 type
+    if (!path) {
+      return;
+    }
+    const index = path?.paths.findIndex(c => c.id === point.id);
+    if (typeof index === 'undefined') {
+      return;
+    }
+    const currentPoint = path?.paths[index];
+    if (!currentPoint) {
+      return;
+    }
+
+    const v = currentPoint.type;
+    switch (v) {
+      case PATH_FUNC_TYPE.EQUAL:
+      case PATH_FUNC_TYPE.UNEQUAL:
+      case PATH_FUNC_TYPE.BREAK:
+        delete currentPoint.x1;
+        delete currentPoint.y1;
+        delete currentPoint.x2;
+        delete currentPoint.y2;
+        currentPoint.type = PATH_FUNC_TYPE.STRAIGHT;
+        break;
+      case PATH_FUNC_TYPE.STRAIGHT: {
+        const prevPoint = paths[index - 1] || paths[paths.length - 1];
+        const nextPoint = paths[index + 1] || paths[0];
+
+        const { p1, p2 } = getParallelPositionByPoint(
+          prevPoint,
+          nextPoint,
+          point
+        );
+        currentPoint.x1 = p1.x;
+        currentPoint.y1 = p1.y;
+        currentPoint.x2 = p2.x;
+        currentPoint.y2 = p2.y;
+        currentPoint.type = PATH_FUNC_TYPE.EQUAL;
+
+        break;
+      }
+      default:
+        break;
+    }
+    onUpdateNodeData();
+  };
+  // const t = getBezierPointArray(paths[0], paths[1]);
+  // console.log(paths[0], paths[1], t, cubicToQuadratic(paths[0], {x: t[2], y: t[3]}));
+  React.useEffect(() => {
+    const onMouseMove = (e: MouseEvent) => {
+      if (pathDragStartRef.current) {
+        noPathClickRef.current = true;
+        const pos = getPathMousePos(e);
+        const {
+          bezier,
+          nextIndex,
+          index,
+          point,
+          offset,
+        } = pathDragStartRef.current;
+        const currentPoint = bezier.get(point.t || 0);
+        const dx = pos.x - offset.x - currentPoint.x;
+        const dy = pos.y - offset.y - currentPoint.y;
+
+        bezier.points[1].x += dx;
+        bezier.points[1].y += dy;
+        bezier.points[2].x += dx;
+        bezier.points[2].y += dy;
+        bezier.update();
+
+        const start = path?.paths[index];
+        const end = path?.paths[nextIndex];
+        if (!start || !end) {
+          return;
+        }
+        let pCenter;
+        const p1 = bezier.points[1];
+        const p2 = bezier.points[2];
+
+        // 全是 straight 时，转换为 unequal
+        if (
+          start.type === PATH_FUNC_TYPE.STRAIGHT &&
+          end.type === PATH_FUNC_TYPE.STRAIGHT
+        ) {
+          start.type = PATH_FUNC_TYPE.BREAK;
+          start.x1 = p1.x;
+          start.y1 = p1.y;
+          start.x2 = start.x;
+          start.y2 = start.x;
+          end.type = PATH_FUNC_TYPE.BREAK;
+          end.x1 = p2.x;
+          end.y1 = p2.x;
+          end.x2 = end.x;
+          end.y2 = end.y;
+        }
+        if (
+          start.type === PATH_FUNC_TYPE.STRAIGHT &&
+          end.type !== PATH_FUNC_TYPE.STRAIGHT
+        ) {
+          end.type = PATH_FUNC_TYPE.BREAK;
+          pCenter = cubicToQuadratic(start, p1);
+          end.x1 = pCenter.x;
+          end.y1 = pCenter.y;
+        }
+        if (
+          start.type !== PATH_FUNC_TYPE.STRAIGHT &&
+          end.type === PATH_FUNC_TYPE.STRAIGHT
+        ) {
+          start.type = PATH_FUNC_TYPE.BREAK;
+          pCenter = cubicToQuadratic(end, p2);
+          start.x2 = pCenter.x;
+          start.y2 = pCenter.y;
+        }
+
+        if (
+          start.type !== PATH_FUNC_TYPE.STRAIGHT &&
+          end.type !== PATH_FUNC_TYPE.STRAIGHT
+        ) {
+          start.x2 = p1.x;
+          start.y2 = p1.y;
+          start.type = PATH_FUNC_TYPE.BREAK;
+          end.x1 = p2.x;
+          end.y1 = p2.y;
+          end.type = PATH_FUNC_TYPE.BREAK;
+        }
+
+        onUpdateNodeData(true);
+      }
+    };
+    const onMouseUp = (e: MouseEvent) => {
+      if (pathDragStartRef.current) {
+        pathDragStartRef.current = undefined;
+        setLineHover(-1);
+        onUpdateNodeData();
+      }
+    };
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [path?.paths]);
+
   const p = [...paths];
   if (closed) {
     p.push({
@@ -128,7 +355,7 @@ export const SvgPath = ({
         r={4 / scale}
         key={item.id}
         strokeWidth="1"
-        onDoubleClick={onClickStopPropagation}
+        onDoubleClick={onPointDoubleClick(item)}
         onMouseDown={e => {
           e.preventDefault();
           e.stopPropagation();
@@ -147,8 +374,11 @@ export const SvgPath = ({
   const bezierPointNodes: JSX.Element[] = [];
   const bezierPathNodes: JSX.Element[] = [];
   const bezierPoints: PathChild[] = [];
+  const selectionBezier: PathPointSelection[] = showAllBezier
+    ? paths.map(c => ({ pointId: c.id }))
+    : selection;
   // 插入贝塞尔点
-  selection.forEach(item => {
+  selectionBezier.forEach(item => {
     const { pointId: currentPointId } = item;
     const index = paths.findIndex(c => c.id === currentPointId);
     // 关闭路径把第一个贝赛尔点加入
@@ -171,7 +401,7 @@ export const SvgPath = ({
       });
   });
   bezierPoints.forEach((p, i) => {
-    const selectionNode = selection.find(c => c.pointId === p.id);
+    const selectionNode = selectionBezier.find(c => c.pointId === p.id);
     const { bezierKey, pointId: currentPointId } = selectionNode || {};
     if (p.type === PATH_FUNC_TYPE.STRAIGHT) {
       return;
@@ -195,7 +425,7 @@ export const SvgPath = ({
           cx={p.x1}
           cy={p.y1}
           r={3 / scale}
-          onDoubleClick={onClickStopPropagation}
+          onDoubleClick={onPointDoubleClick(p)}
           onMouseDown={e => {
             onBezierPointMouseDown(e, p, 'left');
           }}
@@ -223,7 +453,7 @@ export const SvgPath = ({
           cx={p.x2}
           cy={p.y2}
           r={3 / scale}
-          onDoubleClick={onClickStopPropagation}
+          onDoubleClick={onPointDoubleClick(p)}
           onMouseDown={e => {
             onBezierPointMouseDown(e, p, 'right');
           }}
@@ -243,6 +473,23 @@ export const SvgPath = ({
       pointIsStartOrEnd); // 选中起始点或结束点时
   // const ppp = [...paths, paths[0]];
   // const bezierBox = getPathToBezier(ppp).map(c => c.bbox());
+
+  const hoverPointPos = {
+    x: 0,
+    y: 0,
+  };
+  if (showPathAddPoint) {
+    const { bezier } = showPathAddPoint;
+    let pathPoint: { x: number; y: number } = showPathAddPoint;
+    if (isShiftKey) {
+      const centerT = getPathCenter(bezier);
+      pathPoint = bezier.get(centerT);
+    }
+    const pos = bezier.project(pathPoint);
+    const transitionPos = pathPosToCanvasPos(pos);
+    hoverPointPos.x = transitionPos.x;
+    hoverPointPos.y = transitionPos.y;
+  }
   return (
     <svg
       width={width}
@@ -255,9 +502,10 @@ export const SvgPath = ({
       }} */
       className={clsx('gedit-path-edit-layer-svg', {
         // 'gedit-path-edit-layer-pen': !closed,
+        'gedit-path-edit-layer-drag': lineHover !== -1,
       })}
     >
-      {showDefaultMovePoint && (
+      {showDefaultMovePoint && lineHover === -1 && (
         <PointMoveDefault
           getPosFromMouseEvent={getPosFromMouseEvent}
           paths={paths}
@@ -266,27 +514,56 @@ export const SvgPath = ({
           currentPointId={selection[0]?.pointId as string}
         />
       )}
-      {pathsStringArray.map((p, i) => (
+      {pathsStringArray.map((pStr, i) => (
         <path
-          className={clsx(
-            'gedit-path-edit-layer-path',
-            'gedit-path-edit-layer-pen'
-          )}
+          className={clsx('gedit-path-edit-layer-path', {
+            'gedit-path-edit-layer-pen': !isCtrlKey,
+            'gedit-path-edit-layer-drag': isCtrlKey,
+            'gedit-path-edit-layer-path-active': lineHover === i,
+          })}
           key={i.toString()}
           strokeLinecap="round"
-          strokeWidth={1.5 / scale}
-          d={p}
-          onMouseEnter={onHideMovePoint}
-          onMouseLeave={onShowMovePoint}
-          onMouseDown={onClickStopPropagation}
+          strokeWidth={2 / scale}
+          d={pStr}
+          onMouseEnter={e => {
+            onHideMovePoint();
+          }}
+          onMouseLeave={() => {
+            onShowMovePoint();
+            setShowPathAddPoint(false);
+          }}
+          onMouseMove={e => {
+            onPathMove(i, e);
+          }}
+          onMouseDown={e => {
+            onClickStopPropagation(e);
+            onPathMouseDown(i, e);
+          }}
           onDoubleClick={onClickStopPropagation}
           onClick={e => {
             e.preventDefault();
             e.stopPropagation();
-            onPathAddPoint(i, e);
+            if (!noPathClickRef.current && !isCtrlKey) {
+              onPathAddPoint(i, e);
+            }
+            noPathClickRef.current = false;
           }}
         />
       ))}
+      {showPathAddPoint && !isCtrlKey && (
+        <circle
+          className="gedit-path-edit-layer-hover-point"
+          cx={hoverPointPos.x}
+          cy={hoverPointPos.y}
+          r={4 / scale}
+          strokeWidth="1"
+          onMouseDown={e => {
+            e.preventDefault();
+            e.stopPropagation();
+            onPathAddPoint(paths.length - 1, 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}

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

@@ -12,6 +12,7 @@ import {
   getPathBounds,
   PathSchema,
   getPathSizeBounds,
+  pedalPoint,
 } from '@gedit/canvas-draw';
 import { Bezier } from 'bezier-js';
 import {
@@ -98,9 +99,42 @@ export const getLeftRightCenterPoint = (item: PathChild) => {
   };
 };
 
-export const getBezierHullByPos = (
+export const createBezier = (points: BezierArray) => new Bezier(...points);
+
+export const getPathCenter = (curve: Bezier) => {
+  const totalLength = curve.length();
+  const targetLength = totalLength / 2; // 中间点的长度
+
+  // 使用二分法找到对应的参数 t
+  let low = 0;
+  let high = 1;
+  let t = 0.5;
+  const epsilon = 0.001; // 精度
+
+  while (high - low > epsilon) {
+    t = (low + high) / 2;
+    const currentLength = curve.split(0, t).length();
+    if (currentLength < targetLength) {
+      low = t;
+    } else {
+      high = t;
+    }
+  }
+
+  return t;
+};
+export const getBezierProjectByPos = (
   points: BezierArray,
   pos: Point
+): { x: number; y: number; t?: number } => {
+  const bezier = createBezier(points);
+  return bezier.project(pos);
+};
+
+export const getBezierHullByPos = (
+  points: BezierArray,
+  pos: Point,
+  isShiftKey: boolean = false
 ): { x: number; y: number }[] => {
   // 判断是二次还是三次贝塞尔曲线
   /* const [x1, y1, x2, y2, x3, y3, x4, y4] = points;
@@ -111,8 +145,11 @@ export const getBezierHullByPos = (
     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 bezier = createBezier(points);
+  let { t = 0 } = bezier.project(pos);
+  if (isShiftKey) {
+    t = getPathCenter(bezier);
+  }
   const h = bezier.hull(t);
   const hull = h.slice(-6);
   return hull;
@@ -141,14 +178,7 @@ export const getExtendPositionByRadius = (
   return { x, y };
 };
 
-/**
- * 获取点击线上的新增点
- */
-export const getNewPoint = (
-  point: PathChild,
-  nextPoint: PathChild,
-  pos: PointSchema
-): PathChild => {
+export const getBezierPointArray = (point: PathChild, nextPoint: PathChild) => {
   const afterQuadratic =
     point.type === PATH_FUNC_TYPE.STRAIGHT &&
     nextPoint.type !== PATH_FUNC_TYPE.STRAIGHT &&
@@ -191,7 +221,20 @@ export const getNewPoint = (
     bezier[4] = cubic[2];
     bezier[5] = cubic[3];
   }
-  const hull = getBezierHullByPos(bezier, pos);
+  return bezier;
+};
+
+/**
+ * 获取点击线上的新增点
+ */
+export const getNewPoint = (
+  point: PathChild,
+  nextPoint: PathChild,
+  pos: PointSchema,
+  isShiftKey: boolean = false,
+): PathChild => {
+  const bezier = getBezierPointArray(point, nextPoint);
+  const hull = getBezierHullByPos(bezier, pos, isShiftKey);
   /**
    * 0, 1, 2: 二次贝赛尔点，1为中心点，没用
    * 3, 4: 三次点，
@@ -233,17 +276,37 @@ export const getNewPoint = (
 export const setBezierMovePoint = (
   path: PathChild,
   key: 'left' | 'right',
-  pos: PointSchema
+  pos: PointSchema,
+  keybinding: { shiftKey: boolean; ctrlKey: boolean } = {
+    shiftKey: false,
+    ctrlKey: false,
+  }
 ): PathChild => {
+  const { shiftKey, ctrlKey } = keybinding;
   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, 2);
-  path[y] = toFixedValue(pos.y, 2);
+  let currentPoint = { x: toFixedValue(pos.x, 2), y: toFixedValue(pos.y, 2) };
+  const start = { x: path[x] || 0, y: path[y] || 0 };
+  path[x] = currentPoint.x;
+  path[y] = currentPoint.y;
+  // 按信 shift 键，锁定水平移动
+  if (shiftKey) {
+    // 垂直点
+    const end = pedalPoint(center, start, currentPoint);
+    path[x] = end.x;
+    path[y] = end.y;
+    currentPoint = { x: end.x, y: end.y };
+  }
+
+  // 按住 ctrl 键，转换成 BREAK 模式
+  if (ctrlKey) {
+    path.type = PATH_FUNC_TYPE.BREAK;
+    return path;
+  }
   let p2: PointSchema | false = false;
   const isOnly =
     typeof path[x1] === 'undefined' && typeof path[y1] === 'undefined';
@@ -309,7 +372,7 @@ export const updatePathNodeData = (
     // origin = { x: 0.5, y: 0.5 },
     path,
     style,
-    size = { width: 0, height: 0},
+    size = { width: 0, height: 0 },
     // rotation = 0,
     // scale = { x: 1, y: 1 },
   } = node;