@meta2d/core 1.0.54 → 1.0.56

package/src/diagrams/line/curve.ts

@@ -0,0 +1,260 @@
+import { Direction } from '../../data';
+import { facePen, getToAnchor, Pen } from '../../pen';
+import { distance, Point, PrevNextType, rotatePoint } from '../../point';
+import { Meta2dStore } from '../../store';
+import { s8 } from '../../utils';
+
+export function curve(store: Meta2dStore, pen: Pen, mousedwon?: Point) {
+  if (!pen.calculative.worldAnchors) {
+    pen.calculative.worldAnchors = [];
+  }
+
+  if (mousedwon) {
+    if (pen.calculative.activeAnchor) {
+      pen.calculative.activeAnchor.next = {
+        penId: pen.id,
+        x: mousedwon.x,
+        y: mousedwon.y,
+      };
+      if (
+        distance(
+          pen.calculative.activeAnchor.next,
+          pen.calculative.activeAnchor
+        ) < 5
+      ) {
+        pen.calculative.activeAnchor.next = undefined;
+      } else {
+        pen.calculative.activeAnchor.prev = {
+          ...pen.calculative.activeAnchor.next,
+        };
+        rotatePoint(
+          pen.calculative.activeAnchor.prev,
+          180,
+          pen.calculative.activeAnchor
+        );
+      }
+    }
+  } else {
+    const from = pen.calculative.worldAnchors[0];
+    if (!from.next) {
+      const fromFace = facePen(from, store.pens[from.connectTo]);
+      calcCurveCP(from, fromFace, 50);
+      from.prev = undefined;
+    }
+
+    const to =
+      pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 1];
+    if (to && to !== from && !to.prev) {
+      const toFace = facePen(to, store.pens[to.connectTo]);
+      calcCurveCP(to, toFace, -50);
+      to.next = undefined;
+    }
+  }
+}
+
+function calcCurveCP(pt: Point, d: Direction, dis: number) {
+  switch (d) {
+    case Direction.Up:
+      pt.prev = {
+        penId: pt.penId,
+        x: pt.x,
+        y: pt.y + dis,
+      };
+      pt.next = {
+        penId: pt.penId,
+        x: pt.x,
+        y: pt.y - dis,
+      };
+      break;
+    case Direction.Right:
+      pt.prev = {
+        penId: pt.penId,
+        x: pt.x - dis,
+        y: pt.y,
+      };
+      pt.next = {
+        penId: pt.penId,
+        x: pt.x + dis,
+        y: pt.y,
+      };
+      break;
+    case Direction.Bottom:
+      pt.prev = {
+        penId: pt.penId,
+        x: pt.x,
+        y: pt.y - dis,
+      };
+      pt.next = {
+        penId: pt.penId,
+        x: pt.x,
+        y: pt.y + dis,
+      };
+      break;
+    case Direction.Left:
+      pt.prev = {
+        penId: pt.penId,
+        x: pt.x + dis,
+        y: pt.y,
+      };
+      pt.next = {
+        penId: pt.penId,
+        x: pt.x - dis,
+        y: pt.y,
+      };
+      break;
+  }
+}
+
+// Get a point in quadratic.
+// pos - The position of point in quadratic. It is expressed as a percentage(0 - 1).
+export function getQuadraticPoint(
+  step: number,
+  from: Point,
+  cp: Point,
+  to: Point
+) {
+  const pos = 1 - step;
+  const x = pos * pos * from.x + 2 * pos * step * cp.x + step * step * to.x;
+  const y = pos * pos * from.y + 2 * pos * step * cp.y + step * step * to.y;
+  return { x, y, step };
+}
+
+// Get a point in bezier.
+// pos - The position of point in bezier. It is expressed as a percentage(0 - 1).
+export function getBezierPoint(
+  step: number,
+  from: Point,
+  cp1: Point,
+  cp2: Point,
+  to: Point
+) {
+  const { x: x1, y: y1 } = from;
+  const { x: x2, y: y2 } = to;
+  const { x: cx1, y: cy1 } = cp1;
+  const { x: cx2, y: cy2 } = cp2;
+
+  const pos = 1 - step;
+  const x =
+    x1 * pos * pos * pos +
+    3 * cx1 * step * pos * pos +
+    3 * cx2 * step * step * pos +
+    x2 * step * step * step;
+  const y =
+    y1 * pos * pos * pos +
+    3 * cy1 * step * pos * pos +
+    3 * cy2 * step * step * pos +
+    y2 * step * step * step;
+  return { x, y, step };
+}
+
+function lerp(pt1: Point, pt2: Point, t: number) {
+  return {
+    x: pt1.x + t * (pt2.x - pt1.x),
+    y: pt1.y + t * (pt2.y - pt1.y),
+  };
+}
+
+export function getSplitAnchor(pen: Pen, pt: Point, index: number) {
+  let from = pen.calculative.worldAnchors[index];
+  let to = pen.calculative.worldAnchors[index + 1];
+  if(!to && pen.close){
+    to = pen.calculative.worldAnchors[0];
+  }
+  const t = pt.step;
+  let anchor: Point;
+  if (from.next && to.prev) {
+    const p0 = from;
+    const p1 = from.next;
+    const p2 = to.prev;
+    const p3 = to;
+    const p4 = lerp(p0, p1, t);
+    const p5 = lerp(p1, p2, t);
+    const p6 = lerp(p2, p3, t);
+    const p7: Point = lerp(p4, p5, t);
+    const p8: Point = lerp(p5, p6, t);
+    anchor = lerp(p7, p8, t);
+    p7.penId = pen.id;
+    anchor.prev = p7;
+    p8.penId = pen.id;
+    anchor.next = p8;
+    from.next.x = p4.x;
+    from.next.y = p4.y;
+    to.prev.x = p6.x;
+    to.prev.y = p6.y;
+  } else if (from.next || to.prev) {
+    const p0 = from;
+    const p1 = from.next || to.prev;
+    const p2 = to;
+    const p3: Point = lerp(p0, p1, t);
+    const p4: Point = lerp(p1, p2, t);
+    anchor = pt;
+    p3.penId = pen.id;
+    p4.penId = pen.id;
+    anchor.prev = p3;
+    anchor.next = p4;
+    from.next = undefined;
+    to.prev = undefined;
+  } else {
+    // 并非贝塞尔点，即 from 和 to 之间是一条直线
+    anchor = pt;
+  }
+
+  anchor.penId = pen.id;
+  anchor.id = s8();
+  anchor.prevNextType = PrevNextType.Bilateral;
+  return anchor;
+}
+
+export function mind(store: Meta2dStore, pen: Pen, mousedwon?: Point) {
+  if (!pen.calculative.worldAnchors) {
+    pen.calculative.worldAnchors = [];
+  }
+
+  if (pen.calculative.worldAnchors.length < 2) {
+    return;
+  }
+
+  let from = pen.calculative.activeAnchor;
+  let to = mousedwon || getToAnchor(pen);
+  if (!from || !to) {
+    return;
+  }
+
+  const dis = 20;
+
+  const fromPen = store.pens[from.connectTo];
+  let fromFace = facePen(from, fromPen);
+  if (fromFace === Direction.None) {
+    if (to.x > from.x) {
+      fromFace = Direction.Right;
+    } else {
+      fromFace = Direction.Left;
+    }
+  }
+  from.next = {
+    id: s8(),
+    penId: pen.id,
+    x: from.x,
+    y: from.y,
+    prevNextType: 2,
+  };
+  to.prev = { id: s8(), penId: pen.id, x: to.x, y: to.y, prevNextType: 2 };
+  switch (fromFace) {
+    case Direction.Up:
+      from.next.y -= dis;
+      to.prev.y = from.y;
+      break;
+    case Direction.Bottom:
+      from.next.y += dis;
+      to.prev.y = from.y;
+      break;
+    case Direction.Left:
+      from.next.x -= dis;
+      to.prev.x = from.x;
+      break;
+    default:
+      from.next.x += dis;
+      to.prev.x = from.x;
+      break;
+  }
+}

package/src/diagrams/line/line.ts

@@ -0,0 +1,409 @@
+import { deleteTempAnchor, getFromAnchor, getGradientAnimatePath, getToAnchor, Pen } from '../../pen';
+import { hitPoint, Point } from '../../point';
+import { getRectOfPoints, pointInSimpleRect, Rect } from '../../rect';
+import { Meta2dStore } from '../../store';
+import { getBezierPoint, getQuadraticPoint } from './curve';
+
+export function line(
+  pen: Pen,
+  ctx?: CanvasRenderingContext2D | Path2D
+): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  if (pen.lineName === 'line' || pen.lineName === 'polyline') {
+    if (pen.calculative.lineSmooth) {
+      let _path = getGradientAnimatePath(pen);
+      (path as Path2D).addPath(_path);
+      if (path instanceof Path2D) return path;
+    }
+  }
+  const worldAnchors = pen.calculative.worldAnchors;
+  if (worldAnchors.length > 1) {
+    let from: Point; // 上一个点
+    worldAnchors.forEach((pt: Point) => {
+      if (from) {
+        draw(path, from, pt);
+      } else {
+        pt.start = true;
+      }
+      from = pt;
+    });
+    if (pen.close) {
+      draw(path, from, worldAnchors[0]);
+    }
+  }
+  if (path instanceof Path2D) return path;
+}
+
+export function lineSegment(store: Meta2dStore, pen: Pen, mousedwon?: Point) {
+  if (!pen.calculative.worldAnchors) {
+    pen.calculative.worldAnchors = [];
+  }
+
+  if (pen.calculative.worldAnchors.length < 2 || pen.anchors?.length > 1) {
+    return;
+  }
+
+  const from = getFromAnchor(pen);
+  const to = getToAnchor(pen);
+  if (!from || !to || !to.id || from === to) {
+    return;
+  }
+  from.next = undefined;
+  deleteTempAnchor(pen);
+  to.prev = undefined;
+  pen.calculative.worldAnchors.push(to);
+}
+
+function draw(path: CanvasRenderingContext2D | Path2D, from: Point, to: Point) {
+  if (!to || to.isTemp) {
+    return;
+  }
+  from.start && path.moveTo(from.x, from.y);
+  if (from.next) {
+    if (to.prev) {
+      path.bezierCurveTo(
+        from.next.x,
+        from.next.y,
+        to.prev.x,
+        to.prev.y,
+        to.x,
+        to.y
+      );
+    } else {
+      path.quadraticCurveTo(from.next.x, from.next.y, to.x, to.y);
+    }
+  } else {
+    if (to.prev) {
+      path.quadraticCurveTo(to.prev.x, to.prev.y, to.x, to.y);
+    } else {
+      path.lineTo(to.x, to.y);
+    }
+  }
+}
+
+export function getLineRect(pen: Pen) {
+  getLineLength(pen);
+  return getRectOfPoints(getLinePoints(pen));
+}
+
+/**
+ * 获取连线的 points ，并非 worldAnchors ，worldAnchors 之前的路径点也会记录
+ */
+export function getLinePoints(pen: Pen) {
+  const pts: Point[] = [];
+  let from: Point; // 上一个点
+  pen.calculative.worldAnchors.forEach((pt: Point) => {
+    pts.push(pt);
+    from && pts.push(...getPoints(from, pt, pen));
+    from = pt;
+  });
+  if (pen.close && pen.calculative.worldAnchors.length > 1) {
+    pts.push(...getPoints(from, pen.calculative.worldAnchors[0], pen));
+  }
+  return pts;
+}
+
+export function getLineR(pen: Pen) {
+  return pen?.lineWidth ? pen.lineWidth / 2 + 4 : 4;
+}
+
+export function getPoints(from: Point, to: Point, pen?: Pen) {
+  const pts: Point[] = [];
+  if (!to) {
+    return pts;
+  }
+
+  let step = 0.02;
+  if (from.lineLength) {
+    const r = getLineR(pen);
+    step = r / from.lineLength;
+  }
+  if (from.next) {
+    if (to.prev) {
+      for (let i = step; i < 1; i += step) {
+        pts.push(getBezierPoint(i, from, from.next, to.prev, to));
+      }
+    } else {
+      for (let i = step; i < 1; i += step) {
+        pts.push(getQuadraticPoint(i, from, from.next, to));
+      }
+    }
+  } else {
+    if (to.prev) {
+      for (let i = step; i < 1; i += step) {
+        pts.push(getQuadraticPoint(i, from, to.prev, to));
+      }
+    } else {
+      pts.push({ x: to.x, y: to.y });
+    }
+  }
+  if (pts.length > 1) {
+    from.curvePoints = pts;
+  }
+
+  return pts;
+}
+
+export function pointInLine(pt: Point, pen: Pen) {
+  const r = getLineR(pen);
+
+  let i = 0;
+  let from: Point; // 上一个点
+  let point: Point;
+  for (const anchor of pen.calculative.worldAnchors) {
+    if (from) {
+      point = pointInLineSegment(pt, from, anchor, r);
+      if (point) {
+        return {
+          i,
+          point,
+        };
+      }
+      ++i;
+    }
+    from = anchor;
+  }
+  if (
+    pen.close &&
+    pen.calculative.worldAnchors.length > 1 &&
+    (point = pointInLineSegment(pt, from, pen.calculative.worldAnchors[0], r))
+  ) {
+    return {
+      i,
+      point,
+    };
+  }
+}
+export function pointInLineSegment(pt: Point, pt1: Point, pt2: Point, r = 4) {
+  if (!pt1.next && !pt2.prev) {
+    const { x: x1, y: y1 } = pt1;
+    const { x: x2, y: y2 } = pt2;
+    const minX = Math.min(x1, x2);
+    const maxX = Math.max(x1, x2);
+    const minY = Math.min(y1, y2);
+    const maxY = Math.max(y1, y2);
+    if (
+      !(
+        pt.x >= minX - r &&
+        pt.x <= maxX + r &&
+        pt.y >= minY - r &&
+        pt.y <= maxY + r
+      )
+    ) {
+      return;
+    }
+    return pointToLine(pt, pt1, pt2, r);
+  } else if (pt1.curvePoints) {
+    for (const point of pt1.curvePoints) {
+      if (hitPoint(pt, point, r)) {
+        return point;
+      }
+    }
+  }
+}
+
+export function pointToLine(pt: Point, pt1: Point, pt2: Point, r = 4) {
+  // 竖线
+  if (pt1.x === pt2.x) {
+    const len = Math.abs(pt.x - pt1.x);
+    if (len <= r) {
+      return {
+        x: pt1.x,
+        y: pt.y,
+      };
+    }
+  } else {
+    const A = (pt1.y - pt2.y) / (pt1.x - pt2.x);
+    const B = pt1.y - A * pt1.x;
+    const len = Math.abs((A * pt.x + B - pt.y) / Math.sqrt(A * A + 1));
+    if (len <= r) {
+      const m = pt.x + A * pt.y;
+      const x = (m - A * B) / (A * A + 1);
+      return {
+        x,
+        y: A * x + B,
+      };
+    }
+  }
+}
+
+function lineLen(from: Point, cp1?: Point, cp2?: Point, to?: Point): number {
+  if (!cp1 && !cp2) {
+    return (
+      Math.sqrt(
+        Math.pow(Math.abs(from.x - to.x), 2) +
+          Math.pow(Math.abs(from.y - to.y), 2)
+      ) || 0
+    );
+  }
+
+  const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+  if (cp1 && cp2) {
+    path.setAttribute(
+      'd',
+      `M${from.x} ${from.y} C${cp1.x} ${cp1.y} ${cp2.x} ${cp2.y} ${to.x} ${to.y}`
+    );
+  } else if (cp1) {
+    path.setAttribute(
+      'd',
+      `M${from.x} ${from.y} Q${cp1.x} ${cp1.y} ${to.x} ${to.y}`
+    );
+  } else {
+    path.setAttribute(
+      'd',
+      `M${from.x} ${from.y} Q${cp2.x} ${cp2.y} ${to.x} ${to.y}`
+    );
+  }
+  return path.getTotalLength() || 0;
+}
+
+export function getLineLength(pen: Pen): number {
+  if (pen.calculative.worldAnchors.length < 2) {
+    return 0;
+  }
+
+  let len = 0;
+  let from: Point; // 上一个点
+  pen.calculative.worldAnchors.forEach((pt: Point) => {
+    if (from) {
+      from.lineLength = lineLen(from, from.next, pt.prev, pt);
+      len += from.lineLength;
+    }
+    from = pt;
+  });
+  if (pen.close) {
+    // pen.close ，下一个点即第一个点
+    const to = getFromAnchor(pen);
+    from.lineLength = lineLen(from, from.next, to.prev, to);
+    len += from.lineLength;
+  }
+  if (pen.calculative.animatePos) {
+    pen.calculative.animatePos =
+      (len / pen.length) * pen.calculative.animatePos;
+  }
+  pen.length = len;
+  return len;
+}
+
+/**
+ * 连线在 rect 内， 连线与 rect 相交
+ */
+export function lineInRect(line: Pen, rect: Rect) {
+  // 判断是直线还是贝塞尔
+  const worldAnchors = line.calculative.worldAnchors;
+  for (let index = 0; index < worldAnchors.length - 1; index++) {
+    const current = worldAnchors[index];
+    const next = worldAnchors[index + 1];
+    if (!current.next && !next.prev) {
+      // 线段
+      if (isLineIntersectRectangle(current, next, rect)) {
+        return true;
+      }
+    } else {
+      // 贝塞尔
+      if (isBezierIntersectRectangle(current, next, rect)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * 线段与矩形是否相交
+ * @param rect 矩形
+ */
+export function isLineIntersectRectangle(pt1: Point, pt2: Point, rect: Rect) {
+  if (pointInSimpleRect(pt1, rect) || pointInSimpleRect(pt2, rect)) {
+    // 存在一个点在矩形内部
+    return true;
+  }
+  const linePointX1 = pt1.x;
+  const linePointY1 = pt1.y;
+  const linePointX2 = pt2.x;
+  const linePointY2 = pt2.y;
+
+  let rectangleLeftTopX = rect.x;
+  let rectangleLeftTopY = rect.y;
+  let rectangleRightBottomX = rect.ex;
+  let rectangleRightBottomY = rect.ey;
+
+  const lineHeight = linePointY1 - linePointY2;
+  const lineWidth = linePointX2 - linePointX1; // 计算叉乘
+  const c = linePointX1 * linePointY2 - linePointX2 * linePointY1;
+  if (
+    (lineHeight * rectangleLeftTopX + lineWidth * rectangleLeftTopY + c >= 0 &&
+      lineHeight * rectangleRightBottomX +
+        lineWidth * rectangleRightBottomY +
+        c <=
+        0) ||
+    (lineHeight * rectangleLeftTopX + lineWidth * rectangleLeftTopY + c <= 0 &&
+      lineHeight * rectangleRightBottomX +
+        lineWidth * rectangleRightBottomY +
+        c >=
+        0) ||
+    (lineHeight * rectangleLeftTopX + lineWidth * rectangleRightBottomY + c >=
+      0 &&
+      lineHeight * rectangleRightBottomX + lineWidth * rectangleLeftTopY + c <=
+        0) ||
+    (lineHeight * rectangleLeftTopX + lineWidth * rectangleRightBottomY + c <=
+      0 &&
+      lineHeight * rectangleRightBottomX + lineWidth * rectangleLeftTopY + c >=
+        0)
+  ) {
+    if (rectangleLeftTopX > rectangleRightBottomX) {
+      const temp = rectangleLeftTopX;
+      rectangleLeftTopX = rectangleRightBottomX;
+      rectangleRightBottomX = temp;
+    }
+    if (rectangleLeftTopY < rectangleRightBottomY) {
+      const temp1 = rectangleLeftTopY;
+      rectangleLeftTopY = rectangleRightBottomY;
+      rectangleRightBottomY = temp1;
+    }
+    if (
+      (linePointX1 < rectangleLeftTopX && linePointX2 < rectangleLeftTopX) ||
+      (linePointX1 > rectangleRightBottomX &&
+        linePointX2 > rectangleRightBottomX) ||
+      (linePointY1 > rectangleLeftTopY && linePointY2 > rectangleLeftTopY) ||
+      (linePointY1 < rectangleRightBottomY &&
+        linePointY2 < rectangleRightBottomY)
+    ) {
+      return false;
+    } else {
+      return true;
+    }
+  } else {
+    return false;
+  }
+}
+
+/**
+ * 贝塞尔曲线与矩形是否相交
+ * @param from 前点
+ * @param to 后点
+ * @param rect 矩形
+ */
+export function isBezierIntersectRectangle(from: Point, to: Point, rect: Rect) {
+  const step = 0.02;
+  if (!from.next && !to.prev) {
+    // 直线
+    return isLineIntersectRectangle(from, to, rect);
+  } else if (from.next && to.prev) {
+    for (let i = step; i < 1; i += step) {
+      const point = getBezierPoint(i, from, from.next, to.prev, to);
+      if (pointInSimpleRect(point, rect)) {
+        return true;
+      }
+    }
+  } else if (from.next || to.prev) {
+    for (let i = step; i < 1; i += step) {
+      const point = getQuadraticPoint(i, from, from.next || to.prev, to);
+      if (pointInSimpleRect(point, rect)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}