@meta2d/core 1.0.54 → 1.0.56

package/src/diagrams/line/smooth.ts

@@ -0,0 +1,133 @@
+import { Point, PrevNextType } from '../../point';
+
+export function simplify(points: Point[], length: number, start: number, end: number) {
+  const newPoints: Point[] = [];
+  let maxDist, index, xx, yy, dx, dy, ddx, ddy, p1, p2, p, t, dist, dist1;
+  p1 = points[start];
+  p2 = points[end];
+  xx = p1.x;
+  yy = p1.y;
+  ddx = p2.x - xx;
+  ddy = p2.y - yy;
+  dist1 = ddx * ddx + ddy * ddy;
+  maxDist = length;
+  for (let i = start + 1; i < end; i++) {
+    p = points[i];
+    if (ddx !== 0 || ddy !== 0) {
+      t = ((p.x - xx) * ddx + (p.y - yy) * ddy) / dist1;
+      if (t > 1) {
+        dx = p.x - p2.x;
+        dy = p.y - p2.y;
+      } else if (t > 0) {
+        dx = p.x - (xx + ddx * t);
+        dy = p.y - (yy + ddy * t);
+      } else {
+        dx = p.x - xx;
+        dy = p.y - yy;
+      }
+    } else {
+      dx = p.x - xx;
+      dy = p.y - yy;
+    }
+    dist = dx * dx + dy * dy;
+    if (dist > maxDist) {
+      index = i;
+      maxDist = dist;
+    }
+  }
+
+  if (maxDist > length) {
+    // continue simplification while maxDist > length
+    if (index - start > 1) {
+      newPoints.push(...simplify(points, length, start, index));
+    }
+    newPoints.push({
+      id: points[index].id,
+      penId: points[index].penId,
+      x: points[index].x,
+      y: points[index].y,
+    });
+    if (end - index > 1) {
+      newPoints.push(...simplify(points, length, index, end));
+    }
+  }
+
+  return newPoints;
+}
+
+export function smoothLine(points: Point[], cornerThres = 0.8, match = false) {
+  if (points.length < 3) {
+    return points;
+  }
+
+  // adds bezier control points at points if lines have angle less than thres
+  let p1, p2, p3, dist1, dist2, x, y, endP, len, angle, newPoints, aLen, nx1, nx2, ny1, ny2;
+  const dot = (x, y, xx, yy) => {
+    dist1 = Math.sqrt(x * x + y * y);
+    if (dist1 > 0) {
+      // normalise
+      nx1 = x / dist1;
+      ny1 = y / dist1;
+    } else {
+      nx1 = 1; // need to have something so this will do as good as anything
+      ny1 = 0;
+    }
+    dist2 = Math.sqrt(xx * xx + yy * yy);
+    if (dist2 > 0) {
+      nx2 = xx / dist2;
+      ny2 = yy / dist2;
+    } else {
+      nx2 = 1;
+      ny2 = 0;
+    }
+    return Math.acos(nx1 * nx2 + ny1 * ny2);
+  };
+  newPoints = [];
+  aLen = points.length;
+  p1 = points[0];
+  endP = points[aLen - 1];
+  newPoints.push({ ...points[0] });
+  for (let i = 0; i < aLen - 1; i++) {
+    p2 = points[i];
+    p3 = points[i + 1];
+    angle = Math.abs(dot(p2.x - p1.x, p2.y - p1.y, p3.x - p2.x, p3.y - p2.y));
+    if (dist1) {
+      // dist1 and dist2 come from dot function
+      if (angle < cornerThres * 3.14) {
+        // bend it if angle between lines is small
+        if (match) {
+          dist1 = Math.min(dist1, dist2);
+          dist2 = dist1;
+        }
+        // use the two normalized vectors along the lines to create the tangent vector
+        x = (nx1 + nx2) / 2;
+        y = (ny1 + ny2) / 2;
+        len = Math.sqrt(x * x + y * y); // normalise the tangent
+        if (len === 0) {
+          newPoints.push({ ...p2 });
+        } else {
+          x /= len;
+          y /= len;
+          const pt: Point = { ...p2 };
+          pt.prevNextType = PrevNextType.Bilateral;
+          pt.prev = {
+            penId: pt.penId,
+            x: p2.x - x * dist1 * 0.25,
+            y: p2.y - y * dist1 * 0.25,
+          };
+          pt.next = {
+            penId: pt.penId,
+            x: p2.x + x * dist2 * 0.25,
+            y: p2.y + y * dist2 * 0.25,
+          };
+          newPoints.push(pt);
+        }
+      } else {
+        newPoints.push({ ...p2 });
+      }
+    }
+    p1 = p2;
+  }
+  newPoints.push({ ...points[points.length - 1] });
+  return newPoints;
+}

package/src/diagrams/message.ts

@@ -0,0 +1,17 @@
+import { Pen } from '../pen';
+
+export function message(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height, ey } = pen.calculative.worldRect;
+
+  path.moveTo(x, y);
+  path.lineTo(x + width, y);
+  path.lineTo(x + width, y + (height * 3) / 4);
+  path.lineTo(x + (width * 8) / 16, y + (height * 3) / 4);
+  path.lineTo(x + width / 4, ey);
+  path.lineTo(x + (width * 5) / 16, y + (height * 3) / 4);
+  path.lineTo(x, y + (height * 3) / 4);
+
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}

package/src/diagrams/mindLine.ts

@@ -0,0 +1,31 @@
+import { Pen } from '../pen';
+
+export function mindLine(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+  path.moveTo(x, y + height);
+  path.lineTo(x + width, y + height);
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}
+
+export function mindLineAnchors(pen: Pen) {
+  const points = [
+    {
+      x: 0,
+      y: 1,
+    },
+    {
+      x: 1,
+      y: 1,
+    },
+  ] as const;
+  pen.anchors = points.map(({ x, y }, index) => {
+    return {
+      id: index + '',
+      x,
+      y,
+      penId: pen.id,
+    };
+  });
+}

package/src/diagrams/mindNode.ts

@@ -0,0 +1,177 @@
+import { calcWorldAnchors, Pen } from '../pen';
+import { Point } from '../point';
+import { rectangle } from '.';
+
+export function mindNode(pen: Pen, ctx?: CanvasRenderingContext2D) {
+  if (!pen.onResize) {
+    pen.onResize = resize;
+    pen.onValue = value;
+  }
+
+  return rectangle(pen, ctx);
+}
+
+function resize(pen: Pen) {
+  // 过滤出非默认锚点，即自定义锚点
+  const manualPoints = pen.anchors.filter((point: Point) => point.flag !== 1);
+  mindNodeAnchors(pen);
+  pen.anchors = pen.anchors.concat(...manualPoints);
+}
+
+function value(pen: Pen) {
+  resize(pen);
+  calcWorldAnchors(pen);
+}
+
+export function mindNodeAnchors(pen: Pen) {
+  // TODO: 组合状态下的 width height 成了固定的百分比
+  const anchors: Point[] = [];
+  const { x: rectX, y: rectY, width, height } = pen;
+  const r = borderRadius(pen);
+  // 上四
+  const topN = 5; // 上方节点个数，控制位置，实际节点数依然是 4 个
+  for (let i = 0; i < topN; i++) {
+    if (i === 2) {
+      continue;
+    }
+    let x = rectX + (width * (i + 1)) / (topN + 1);
+    let y = rectY;
+    if (x < rectX + r) {
+      // 在左侧圆角
+      y = getYByCircle(rectX + r, y + r, x, r, -1);
+    } else if (x > rectX + width - r) {
+      // 在右侧圆角
+      y = getYByCircle(rectX + width - r, y + r, x, r, -1);
+    }
+    anchors.push({
+      id: String(anchors.length),
+      flag: 1,
+      penId: pen.id,
+      x: (x - rectX) / width,
+      y: (y - rectY) / height,
+    });
+  }
+  // 右三
+  const rightN = 3; // 右侧节点数
+  for (let i = 0; i < rightN; i++) {
+    let y = rectY + (height * (i + 1)) / (rightN + 1);
+    let x = rectX + width;
+    if (y < rectY + r) {
+      // 在上侧圆角以内
+      x = getXByCircle(x - r, rectY + r, y, r);
+    } else if (y > rectY + height - r) {
+      // 下侧圆角
+      x = getXByCircle(x - r, rectY + height - r, y, r);
+    }
+    anchors.push({
+      id: String(anchors.length),
+      flag: 1,
+      penId: pen.id,
+      x: (x - rectX) / width,
+      y: (y - rectY) / height,
+    });
+  }
+  // 下四
+  const bottomN = 5; // 下侧节点数
+  for (let i = 0; i < bottomN; i++) {
+    if (i === 2) {
+      continue;
+    }
+    let x = rectX + (width * (i + 1)) / (bottomN + 1);
+    let y = rectY + height;
+    if (x < rectX + r) {
+      // 在左侧圆角
+      y = getYByCircle(rectX + r, y - r, x, r);
+    } else if (x > rectX + width - r) {
+      // 在右侧圆角
+      y = getYByCircle(rectX + width - r, y - r, x, r);
+    }
+    anchors.push({
+      id: String(anchors.length),
+      flag: 1,
+      penId: pen.id,
+      x: (x - rectX) / width,
+      y: (y - rectY) / height,
+    });
+  }
+  // 左三
+  const leftN = 3; // 左侧节点数
+  for (let i = 0; i < leftN; i++) {
+    let y = rectY + (height * (i + 1)) / (leftN + 1);
+    let x = rectX;
+    if (y < rectY + r) {
+      // 在上侧圆角以内
+      x = getXByCircle(x + r, rectY + r, y, r, -1);
+    } else if (y > rectY + height - r) {
+      // 下侧圆角
+      x = getXByCircle(x + r, rectY + height - r, y, r, -1);
+    }
+    anchors.push({
+      id: String(anchors.length),
+      flag: 1,
+      penId: pen.id,
+      x: (x - rectX) / width,
+      y: (y - rectY) / height,
+    });
+  }
+  pen.anchors = anchors;
+}
+
+/**
+ * 得到元素实际计算半径
+ * @param node 元素
+ * @returns 元素实际半径
+ */
+function borderRadius(pen: Pen): number {
+  let wr = pen.calculative.borderRadius || 0;
+  let hr = pen.calculative.borderRadius || 0;
+  const { width, height } = pen;
+  if (pen.calculative.borderRadius < 1) {
+    wr = width * pen.calculative.borderRadius;
+    hr = height * pen.calculative.borderRadius;
+  }
+  let r = wr < hr ? wr : hr;
+  if (width < 2 * r) {
+    r = width / 2;
+  }
+  if (height < 2 * r) {
+    r = height / 2;
+  }
+  return r;
+}
+
+/**
+ * 获取圆的 x 坐标
+ * @param ox 圆心x
+ * @param oy 圆心y
+ * @param y y
+ * @param r 半径
+ * @param sqrt 点可能在左侧，左侧填-1，右侧1（默认值）
+ */
+function getXByCircle(
+  ox: number,
+  oy: number,
+  y: number,
+  r: number,
+  sqrt: number = 1
+): number {
+  return sqrt * Math.sqrt(r ** 2 - (y - oy) ** 2) + ox;
+}
+
+/**
+ * 获取圆的 y 坐标
+ * @param ox 圆心x
+ * @param oy 圆心y
+ * @param y y
+ * @param r 半径
+ * @param sqrt 点可以在上侧，也可能在下侧，上侧-1，下侧1（默认）
+ */
+function getYByCircle(
+  ox: number,
+  oy: number,
+  x: number,
+  r: number,
+  sqrt: number = 1
+): number {
+  return sqrt * Math.sqrt(r ** 2 - (x - ox) ** 2) + oy;
+}

package/src/diagrams/panel.ts

@@ -0,0 +1,149 @@
+import { movingSuffix } from '../canvas';
+import { Pen } from '../pen';
+import { Point } from '../point';
+import { rectInRect } from '../rect';
+import { deepClone } from '../utils';
+
+export function panel(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  if (!pen.onDestroy) {
+    pen.onDestroy = destory;
+    pen.onMove = move;
+    pen.onRotate = move;
+    pen.onMouseEnter = mouseEnter;
+    pen.onMouseLeave = mouseLeave;
+    pen.onMouseMove = mouseMove;
+    pen.onMouseUp = mouseUp;
+    pen.onInput = input;
+  }
+  let wr = pen.calculative.borderRadius || 0,
+    hr = wr;
+  const { x, y, width, height, ex, ey } = pen.calculative.worldRect;
+  const { x: textX } = pen.calculative.worldTextRect;
+  if (wr < 1) {
+    wr = width * wr;
+    hr = height * hr;
+  }
+  let r = wr < hr ? wr : hr;
+  if (width < 2 * r) {
+    r = width / 2;
+  }
+  if (height < 2 * r) {
+    r = height / 2;
+  }
+  const textWidth = getTextWidth(pen.text, pen.calculative.fontSize);
+  path.moveTo(x + r, y);
+  path.lineTo(textX - 5, y);
+  path.moveTo(textX + textWidth + 5, y);
+  path.lineTo(textX + textWidth + 5, y);
+  path.arcTo(ex, y, ex, ey, r);
+  path.arcTo(ex, ey, x, ey, r);
+  path.arcTo(x, ey, x, y, r);
+  path.arcTo(x, y, ex, y, r);
+  if (path instanceof Path2D) {
+    return path;
+  }
+}
+
+function getTextWidth(text: string, fontSize: number) {
+  // 近似计算
+  const chinese = text.match(/[^\x00-\xff]/g) || '';
+  const chineseWidth = chinese.length * fontSize; // 中文占用的宽度
+  const spaces = text.match(/\s/g) || '';
+  const spaceWidth = spaces.length * fontSize * 0.3; // 空格占用的宽度
+  const otherWidth =
+    (text.length - chinese.length - spaces.length) * fontSize * 0.6; // 其他字符占用的宽度
+  const currentWidth = chineseWidth + spaceWidth + otherWidth;
+  return currentWidth;
+}
+
+function input(pen: Pen, text: string) {
+  pen.text = text;
+  pen.calculative.text = pen.text;
+  // this.inputDiv.dataset.penId = undefined;
+  pen.calculative.canvas.updatePenRect(pen);
+  // this.patchFlags = true;
+  // this.store.emitter.emit('valueUpdate', pen);
+}
+
+function destory(pen: Pen) {}
+
+function move(pen: Pen) {}
+
+function mouseEnter(pen: Pen) {
+  // const activePens = pen.calculative.canvas.store.active;
+  // if(activePens&&activePens.length){
+  //   activePens.forEach((activePen:Pen)=>{
+  //     if(rectInRect(activePen.calculative.worldRect,pen.calculative.worldRect,true)){
+  //       if(!pen.followers){
+  //         pen.followers =[];
+  //       }
+  //       if(!pen.followers.includes(activePen.id)){
+  //         pen.followers.push(activePen.id);
+  //       }
+  //     }
+  //   })
+  // }
+}
+
+function mouseLeave(pen: Pen) {
+  const activePens = pen.calculative.canvas.store.active;
+  if (activePens && activePens.length) {
+    activePens.forEach((activePen: Pen) => {
+      // if(!rectInRect(activePen.calculative.worldRect,pen.calculative.worldRect,true)){
+      //   if(!pen.followers){
+      //     pen.followers =[];
+      //   }
+      //   if(!pen.followers.includes(activePen.id)){
+      //     pen.followers.push(activePen.id);
+      //   }
+      // }
+      if (pen.followers) {
+        let idx = pen.followers.findIndex((id: string) => id === activePen.id);
+        if (idx !== -1) {
+          const movingPen =
+            pen.calculative.canvas.store.pens[activePen.id + movingSuffix];
+          if (movingPen && movingPen.calculative) {
+            let isIn = rectInRect(
+              movingPen.calculative.worldRect,
+              pen.calculative.worldRect,
+              true
+            );
+            if (!isIn) {
+              pen.followers.splice(idx, 1);
+            }
+          }
+        }
+      }
+    });
+  }
+}
+
+function mouseUp(pen: Pen) {
+  const activePens = pen.calculative.canvas.store.active;
+  if (activePens && activePens.length) {
+    activePens.forEach((activePen: Pen) => {
+      const movingPen =
+        pen.calculative.canvas.store.pens[activePen.id + movingSuffix];
+      if (movingPen && movingPen.calculative) {
+        let inRect = deepClone(pen.calculative.worldRect);
+        inRect.x -= 1;
+        inRect.y -= 1;
+        inRect.width += 2;
+        inRect.height += 2;
+        if (rectInRect(movingPen.calculative.worldRect, inRect, true)) {
+          if (!pen.followers) {
+            pen.followers = [];
+          }
+          if (!pen.followers.includes(activePen.id)) {
+            pen.followers.push(activePen.id);
+          }
+        }
+      }
+    });
+  }
+}
+
+function mouseMove(pen: Pen, e: Point) {
+  //  console.log(e,pen.calculative.canvas.store.active);
+}

package/src/diagrams/pentagon.ts

@@ -0,0 +1,48 @@
+import { Pen } from '../pen';
+import { Point } from '../point';
+export function pentagon(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, height } = pen.calculative.worldRect;
+
+  path.moveTo(x + width / 2, y);
+  path.lineTo(x + width, y + (height * 2) / 5);
+  path.lineTo(x + (width * 4) / 5, y + height);
+  path.lineTo(x + width / 5, y + height);
+  path.lineTo(x, y + (height * 2) / 5);
+
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}
+
+export function pentagonAnchors(pen: Pen) {
+  const points = [
+    {
+      x: 0.5,
+      y: 0,
+    },
+    {
+      x: 1,
+      y: 0.4,
+    },
+    {
+      x: 0.8,
+      y: 1,
+    },
+    {
+      x: 0.2,
+      y: 1,
+    },
+    {
+      x: 0,
+      y: 0.4,
+    },
+  ] as const;
+  pen.anchors = points.map(({ x, y }, index) => {
+    return {
+      id: `${index}`,
+      penId: pen.id,
+      x,
+      y,
+    };
+  });
+}

package/src/diagrams/pentagram.ts

@@ -0,0 +1,63 @@
+import { Pen } from '../pen';
+import { Point } from '../point';
+
+export function pentagram(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  if (!pen.onResize) {
+    pen.onResize = resize;
+  }
+  const path = !ctx ? new Path2D() : ctx;
+  const { width, height, center } = pen.calculative.worldRect;
+
+  const r = width > height ? height : width;
+  //旋转中心点
+  const centerx = center.x;
+  const centery = center.y;
+  const basey = centery - r / 2;
+  const baseyi = centery - r / 4;
+
+  const lx = -(baseyi - centery) * Math.sin((Math.PI / 180) * 324) + centerx;
+  const ly = (baseyi - centery) * Math.cos((Math.PI / 180) * 324) + centery;
+  path.moveTo(lx, ly);
+  for (let i = 0; i < 5; ++i) {
+    // TODO: Math.sin Math.cos 考虑优化下
+    path.lineTo(
+      -(basey - centery) * Math.sin((Math.PI / 180) * 72 * i) + centerx,
+      (basey - centery) * Math.cos((Math.PI / 180) * 72 * i) + centery
+    );
+    path.lineTo(
+      (lx - centerx) * Math.cos((Math.PI / 180) * 72 * (i + 1)) -
+        (ly - centery) * Math.sin((Math.PI / 180) * 72 * (i + 1)) +
+        centerx,
+      (lx - centerx) * Math.sin((Math.PI / 180) * 72 * (i + 1)) +
+        (ly - centery) * Math.cos((Math.PI / 180) * 72 * (i + 1)) +
+        centery
+    );
+  }
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}
+
+export function pentagramAnchors(pen: Pen) {
+  // TODO: 组合状态下的 width height 成了固定的百分比
+  const { width, height } = pen;
+  const r = width > height ? height : width;
+  const anchors: Point[] = [];
+
+  for (let i = 0; i < 5; ++i) {
+    anchors.push({
+      flag: 1, // 默认锚点
+      id: String(i),
+      penId: pen.id,
+      x: 0.5 + ((r / 2) * Math.sin((Math.PI / 180) * 72 * i)) / width,
+      y: ((-r / 2) * Math.cos((Math.PI / 180) * 72 * i)) / height + 0.5,
+    });
+  }
+  pen.anchors = anchors;
+}
+
+function resize(pen: Pen) {
+  // 过滤出非默认锚点，即自定义锚点
+  const manualPoints = pen.anchors.filter((point: Point) => point.flag !== 1);
+  pentagramAnchors(pen);
+  pen.anchors = pen.anchors.concat(...manualPoints);
+}

package/src/diagrams/people.ts

@@ -0,0 +1,23 @@
+import { Pen } from '../pen';
+
+export function people(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  const { x, y, width, ex, ey } = pen.calculative.worldRect;
+  const r = width / 4;
+  const middle = x + width / 2;
+  path.arc(middle, y + r, r, 0, Math.PI * 2);
+
+  path.moveTo(x, y + r * 3);
+  path.lineTo(ex, y + r * 3);
+
+  path.moveTo(middle, y + r * 2);
+  path.lineTo(middle, y + r * 4);
+
+  path.moveTo(middle, y + r * 4);
+  path.lineTo(x, ey);
+
+  path.moveTo(middle, y + r * 4);
+  path.lineTo(ex, ey);
+  path.closePath();
+  if (path instanceof Path2D) return path;
+}

package/src/diagrams/rectangle.ts

@@ -0,0 +1,29 @@
+import { Pen } from '../pen';
+
+export function rectangle(pen: Pen, ctx?: CanvasRenderingContext2D): Path2D {
+  const path = !ctx ? new Path2D() : ctx;
+  let wr = pen.calculative.borderRadius || 0,
+    hr = wr;
+  const { x, y, width, height, ex, ey } = pen.calculative.worldRect;
+  if (wr < 1) {
+    wr = width * wr;
+    hr = height * hr;
+  }
+  let r = wr < hr ? wr : hr;
+  if (width < 2 * r) {
+    r = width / 2;
+  }
+  if (height < 2 * r) {
+    r = height / 2;
+  }
+
+  path.moveTo(x + r, y);
+  path.arcTo(ex, y, ex, ey, r);
+  path.arcTo(ex, ey, x, ey, r);
+  path.arcTo(x, ey, x, y, r);
+  path.arcTo(x, y, ex, y, r);
+  if (path instanceof Path2D) {
+    return path;
+  }
+}
+export const square = rectangle;