@gedit/editor-2d 0.2.46 → 0.2.48

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