@meta2d/core 1.0.55 → 1.0.56

package/src/pen/text.ts

@@ -0,0 +1,341 @@
+import { Pen } from '.';
+import { Canvas } from '../canvas';
+import { calcRightBottom, Rect } from '../rect';
+import { getFont } from './render';
+
+export function calcTextRect(pen: Pen) {
+  const {
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    worldRect,
+    canvas,
+  } = pen.calculative;
+  let { textLeft, textTop, textWidth, textHeight } = pen.calculative;
+  let x = paddingLeft;
+  let y = paddingTop;
+  // if (textLeft && Math.abs(textLeft) < 1) {
+  //   textLeft *= worldRect.width;
+  // }
+  // if (textTop && Math.abs(textTop) < 1) {
+  //   textTop *= worldRect.height;
+  // }
+
+  const width =
+    worldRect.width -
+    paddingLeft -
+    paddingRight -
+    ((pen.textAlign === 'right' ? -textLeft : textLeft) || 0);
+  const height =
+    worldRect.height -
+    paddingTop -
+    paddingBottom -
+    ((pen.textBaseline === 'bottom' ? -textTop : textTop) || 0);
+  if (textWidth && textWidth < 1) {
+    textWidth *= worldRect.width;
+  }
+  if (textHeight && textHeight < 1) {
+    textHeight *= worldRect.height;
+  }
+  if (textWidth < pen.calculative.fontSize) {
+    textWidth = pen.calculative.fontSize;
+  }
+  // 默认居左，居上
+  x += (textLeft || 0) + worldRect.x;
+  y += (textTop || 0) + worldRect.y;
+  const textAlign = pen.textAlign || canvas.store.options.textAlign;
+  const textBaseline = pen.textBaseline || canvas.store.options.textBaseline;
+
+  switch (textAlign) {
+    case 'center':
+      x += (width - (textWidth || width)) / 2;
+      break;
+    case 'right':
+      x += width - (textWidth || width);
+      break;
+  }
+
+  switch (textBaseline) {
+    case 'middle':
+      y += (height - (textHeight || height)) / 2;
+      break;
+    case 'bottom':
+      y += height - (textHeight || height);
+      break;
+  }
+
+  const rect: Rect = {
+    x,
+    y,
+    width: textWidth || width,
+    height: textHeight || height,
+  };
+  calcRightBottom(rect);
+  pen.calculative.worldTextRect = rect;
+
+  calcTextLines(pen);
+  pen.calculative.textDrawRect = undefined;
+}
+
+export function calcTextDrawRect(ctx: CanvasRenderingContext2D, pen: Pen) {
+  // By default, the text is center aligned.
+  const lineHeight = pen.calculative.fontSize * pen.calculative.lineHeight;
+  const h = pen.calculative.textLines.length * lineHeight;
+  const textWidth = calcTextAdaptionWidth(ctx, pen); // 多行文本最大宽度
+  const rect = pen.calculative.worldTextRect;
+  let x = rect.x + (rect.width - textWidth) / 2;
+  let y = rect.y + (rect.height - h) / 2;
+  const options = pen.calculative.canvas.store.options;
+  const textAlign = pen.textAlign || options.textAlign;
+  switch (textAlign) {
+    case 'left':
+      x = rect.x;
+      break;
+    case 'right':
+      x = rect.x + rect.width - textWidth;
+      break;
+  }
+  const textBaseline = pen.textBaseline || options.textBaseline;
+  switch (textBaseline) {
+    case 'top':
+      y = rect.y;
+      break;
+    case 'bottom':
+      y = rect.ey - h;
+      break;
+  }
+
+  pen.calculative.textDrawRect = {
+    x,
+    y,
+    width: textWidth,
+    height: h,
+  };
+  calcRightBottom(pen.calculative.textDrawRect);
+}
+
+export function calcTextLines(pen: Pen, text = pen.calculative.text) {
+  if (text == undefined) {
+    pen.calculative.textLines = [];
+    return;
+  }
+  text = text.toString();
+  let lines: string[] = [];
+  const oneRowHeight = pen.calculative.fontSize * pen.calculative.lineHeight;
+  const textHeight = pen.calculative.worldTextRect.height;
+  const calcRows = Math.floor(textHeight / oneRowHeight);
+  // 最小值为 1
+  const maxRows = calcRows > 1 ? calcRows : 1;
+  switch (pen.whiteSpace) {
+    case 'nowrap':
+      if (pen.ellipsis !== false) {
+        const allLines = wrapLines(text.split(''), pen);
+        if (allLines[0]) {
+          lines.push(allLines[0]);
+          if (allLines.length > 1) {
+            // 存在第二行，说明宽度超出
+            setEllipsisOnLastLine(lines);
+          }
+        }
+      } else {
+        lines.push(text);
+      }
+      break;
+    case 'pre-line':
+      lines = text.split(/[\n]/g);
+      if (pen.ellipsis !== false && lines.length > maxRows) {
+        lines = lines.slice(0, maxRows);
+        setEllipsisOnLastLine(lines);
+      }
+      break;
+    case 'break-all':
+    default:
+      const paragraphs = text.split(/[\n]/g);
+      let currentRow = 0;
+      outer: for (const paragraph of paragraphs) {
+        const words =
+          pen.whiteSpace === 'break-all'
+            ? paragraph.split('')
+            : getWords(paragraph);
+        let items = wrapLines(words, pen);
+        // 空行换行的情况
+        if (items.length === 0) items = [''];
+        if (pen.ellipsis != false) {
+          for (const l of items) {
+            currentRow++;
+            if (currentRow > maxRows) {
+              setEllipsisOnLastLine(lines);
+              break outer;
+            } else {
+              lines.push(l);
+            }
+          }
+        } else {
+          lines.push(...items);
+        }
+      }
+      break;
+  }
+
+  const keepDecimal = pen.calculative.keepDecimal;
+  if (keepDecimal != undefined) {
+    lines.forEach((text, i) => {
+      const textNum = Number(text);
+      if (!isNaN(textNum)) {
+        lines[i] = textNum.toFixed(keepDecimal);
+      }
+    });
+  }
+
+  pen.calculative.textLines = lines;
+
+  return lines;
+}
+
+export function getWords(txt: string = '') {
+  const words: string[] = [];
+  let word = '';
+  for (let i = 0; i < txt.length; ++i) {
+    const ch = txt.charCodeAt(i);
+    if (ch < 33 || ch > 126) {
+      if (word) {
+        words.push(word);
+        word = '';
+      }
+      words.push(txt[i]);
+    } else {
+      word += txt[i];
+    }
+  }
+
+  if (word) {
+    words.push(word);
+  }
+
+  return words;
+}
+
+export function wrapLines(words: string[], pen: Pen) {
+  const canvas: Canvas = pen.calculative.canvas;
+  const ctx = canvas.offscreen.getContext('2d') as CanvasRenderingContext2D;
+  const { fontStyle, fontWeight, fontSize, fontFamily, lineHeight } =
+    pen.calculative;
+  ctx.save();
+  const lines: string[] = [];
+  let currentLine = words[0] || '';
+  for (let i = 1; i < words.length; ++i) {
+    const word = words[i] || '';
+    const text = currentLine + word;
+    let currentWidth = 0;
+    if (canvas.store.options.measureTextWidth) {
+      ctx.font = getFont({
+        fontStyle,
+        fontWeight,
+        fontFamily: fontFamily || canvas.store.options.fontFamily,
+        fontSize,
+        lineHeight,
+      });
+      currentWidth = ctx.measureText(text).width;
+    } else {
+      // 近似计算
+      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; // 其他字符占用的宽度
+      currentWidth = chineseWidth + spaceWidth + otherWidth;
+    }
+    const textWidth = pen.calculative.worldTextRect.width;
+    if (currentWidth <= textWidth + 0.1) {
+      currentLine += word;
+    } else {
+      currentLine.length && lines.push(currentLine);
+      currentLine = word;
+    }
+  }
+  currentLine.length && lines.push(currentLine);
+  ctx.restore();
+  return lines;
+}
+
+export function calcTextAdaptionWidth(
+  ctx: CanvasRenderingContext2D,
+  pen: Pen
+): number {
+  let maxWidth = 0;
+  pen.calculative.textLineWidths = [];
+  pen.calculative.textLines.forEach((text: string) => {
+    const width = ctx.measureText(text).width;
+    pen.calculative.textLineWidths.push(width);
+    maxWidth < width && (maxWidth = width);
+  });
+  return maxWidth;
+}
+/**
+ * 副作用函数，会修改传入的参数
+ * 把最后一行的最后变成 ...
+ * TODO: 中文的三个字符宽度比 . 大，显示起来像是删多了
+ * @param lines
+ */
+function setEllipsisOnLastLine(lines: string[]) {
+  lines[lines.length - 1] = lines[lines.length - 1].slice(0, -3) + '...';
+}
+
+export function calcTextAutoWidth(pen: Pen) {
+  let arr = pen.text.split('\n');
+  const canvas: Canvas = pen.calculative.canvas;
+  const ctx = canvas.offscreen.getContext('2d') as CanvasRenderingContext2D;
+  const { fontStyle, fontWeight, fontSize, fontFamily, lineHeight } =
+    pen.calculative;
+  let textWidth = 0; // pen.calculative.worldTextRect.width;
+  let currentWidth = 0; // textWidth;
+  ctx.save();
+  for (let i = 0; i < arr.length; i++) {
+    if (canvas.store.options.measureTextWidth) {
+      ctx.font = getFont({
+        fontStyle,
+        fontWeight,
+        fontFamily: fontFamily || canvas.store.options.fontFamily,
+        fontSize,
+        lineHeight,
+      });
+      currentWidth = ctx.measureText(arr[i]).width; //* scale;
+    } else {
+      // 近似计算
+      const chinese = arr[i].match(/[^\x00-\xff]/g) || '';
+      const chineseWidth = chinese.length * fontSize; // 中文占用的宽度
+      const spaces = arr[i].match(/\s/g) || '';
+      const spaceWidth = spaces.length * fontSize * 0.3; // 空格占用的宽度
+      const otherWidth =
+        (arr[i].length - chinese.length - spaces.length) * fontSize * 0.6; // 其他字符占用的宽度
+      currentWidth = chineseWidth + spaceWidth + otherWidth;
+    }
+    if (currentWidth > textWidth) {
+      textWidth = currentWidth; //* scale;
+    }
+  }
+  ctx.restore();
+  let textHeight = arr.length * fontSize * lineHeight;
+  if (pen.textAlign === 'left') {
+    // pen.x = pen.x;
+  } else if (pen.textAlign === 'right') {
+    pen.x = pen.x - (textWidth - pen.width);
+  } else {
+    pen.x = pen.x - (textWidth - pen.width) / 2;
+  }
+
+  if (pen.textBaseline === 'top') {
+  } else if (pen.textBaseline === 'bottom') {
+    pen.y = pen.y - (textHeight - pen.height);
+  } else {
+    pen.y = pen.y - (textHeight - pen.height) / 2;
+  }
+  // if (textHeight > pen.height) {
+  pen.height = textHeight + 2;
+  // }
+  pen.width = textWidth + 2; //误差
+  pen.calculative.canvas.updatePenRect(pen);
+  pen.calculative.canvas.calcActiveRect();
+}

package/src/pen/utils.ts

@@ -0,0 +1,21 @@
+import { s8 } from '../utils';
+import { Pen } from './model';
+
+export function randomId(pen: Pen) {
+  pen.id = s8();
+  if (Array.isArray(pen.anchors)) {
+    for (const pt of pen.anchors) {
+      pen.type && (pt.id = s8());
+      pt.penId = pen.id;
+      if (pt.prev) {
+        pen.type && (pt.prev.id = s8());
+        pt.prev.penId = pen.id;
+      }
+
+      if (pt.next) {
+        pen.type && (pt.next.id = s8());
+        pt.next.penId = pen.id;
+      }
+    }
+  }
+}

package/src/point/point.ts

@@ -0,0 +1,232 @@
+import { Direction } from '../data';
+import { Pen } from '../pen';
+import { pointInRect } from '../rect';
+import { Meta2dStore } from '../store';
+
+export enum PrevNextType {
+  Mirror,
+  Bilateral,
+  Free,
+}
+
+export enum TwoWay {
+  Default,
+  In,
+  Out,
+  DisableConnected, // 禁止被连接
+  DisableConnectTo, // 禁止连线锚点连接其他锚点
+  Disable = 10,
+}
+
+export enum PointType {
+  Default,
+  Line,
+}
+
+export interface Point {
+  x: number;
+  y: number;
+  radius?: number;
+  color?: string;
+  background?: string;
+  id?: string;
+  penId?: string;
+  // line连接的pen.id
+  connectTo?: string;
+  // line连接的pen的anchor.id
+  anchorId?: string;
+  twoWay?: TwoWay;
+  prev?: Point;
+  next?: Point;
+  prevNextType?: PrevNextType;
+  start?: boolean;
+  lineLength?: number;
+  step?: number;
+  curvePoints?: Point[];
+  rotate?: number; //线锚点 [0,180)
+  hidden?: boolean;
+  locked?: number;
+  flag?: number;
+  // 临时绘制的点
+  isTemp?: boolean;
+  // 拖拽停靠的锚点
+  dockAnchorId?: string;
+  direction?: Direction; //锚点出线方向
+  title?: string; //锚点hover提示文字
+  type?: PointType;
+  length?: number;
+  distance?: number;
+}
+
+export function rotatePoint(pt: Point, angle: number, center: Point) {
+  if (!angle || angle % 360 === 0) {
+    return;
+  }
+  const a = (angle * Math.PI) / 180;
+  const x =
+    (pt.x - center.x) * Math.cos(a) -
+    (pt.y - center.y) * Math.sin(a) +
+    center.x;
+  const y =
+    (pt.x - center.x) * Math.sin(a) +
+    (pt.y - center.y) * Math.cos(a) +
+    center.y;
+  pt.x = x;
+  pt.y = y;
+
+  pt.prev && rotatePoint(pt.prev, angle, center);
+  pt.next && rotatePoint(pt.next, angle, center);
+}
+
+export function hitPoint(pt: Point, target: Point, radius = 5, pen?: Pen) {
+  if (target.type === PointType.Line) {
+    let _rotate = pen.rotate;
+    if (pen.flipX) {
+      _rotate *= -1;
+    }
+    if (pen.flipY) {
+      _rotate *= -1;
+    }
+    let rotate = target.rotate + _rotate;
+    if (pen.flipX) {
+      rotate *= -1;
+    }
+    if (pen.flipY) {
+      rotate *= -1;
+    }
+    return pointInRect(pt, {
+      x:
+        target.x -
+        (target.length * pen.calculative.canvas.store.data.scale) / 2,
+      y: target.y - radius,
+      width: target.length * pen.calculative.canvas.store.data.scale,
+      height: radius * 2,
+      rotate: rotate,
+    });
+  } else {
+    return (
+      pt.x > target.x - radius &&
+      pt.x < target.x + radius &&
+      pt.y > target.y - radius &&
+      pt.y < target.y + radius
+    );
+  }
+}
+
+export function scalePoint(pt: Point, scale: number, center: Point) {
+  pt.x = center.x - (center.x - pt.x) * scale;
+  pt.y = center.y - (center.y - pt.y) * scale;
+}
+
+export function calcRotate(pt: Point, center: Point) {
+  if (pt.x === center.x) {
+    return pt.y <= center.y ? 0 : 180;
+  }
+
+  if (pt.y === center.y) {
+    return pt.x < center.x ? 270 : 90;
+  }
+
+  const x = pt.x - center.x;
+  const y = pt.y - center.y;
+  let angle = (Math.atan(Math.abs(x / y)) / (2 * Math.PI)) * 360;
+  if (x > 0 && y > 0) {
+    angle = 180 - angle;
+  } else if (x < 0 && y > 0) {
+    angle += 180;
+  } else if (x < 0 && y < 0) {
+    angle = 360 - angle;
+  }
+
+  return angle;
+}
+
+export function distance(pt1: Point, pt2: Point): number {
+  const x = pt1.x - pt2.x;
+  const y = pt1.y - pt2.y;
+  return Math.sqrt(x * x + y * y);
+}
+
+export function facePoint(pt: Point, targetPt?: Point) {
+  let d = Direction.None;
+  if (!targetPt) {
+    return d;
+  }
+
+  const disX = pt.x - targetPt.x;
+  const disY = pt.y - targetPt.y;
+
+  if (Math.abs(disX) > Math.abs(disY)) {
+    if (disX > 0) {
+      d = Direction.Right;
+    } else {
+      d = Direction.Left;
+    }
+  } else {
+    if (disY > 0) {
+      d = Direction.Bottom;
+    } else {
+      d = Direction.Up;
+    }
+  }
+
+  return d;
+}
+
+export function translatePoint(pt: Point, x: number, y: number) {
+  if (!pt) {
+    return;
+  }
+
+  pt.x += x;
+  pt.y += y;
+
+  if (pt.next) {
+    pt.next.x += x;
+    pt.next.y += y;
+  }
+  if (pt.prev) {
+    pt.prev.x += x;
+    pt.prev.y += y;
+  }
+}
+
+/**
+ * 是否是同一个点
+ * @param pt1 点1
+ * @param pt2 点2
+ * @returns true 相同
+ */
+export function samePoint(pt1: Point, pt2: Point): boolean {
+  return pt1.anchorId === pt2.anchorId && pt1.connectTo === pt2.connectTo;
+}
+
+export function getDistance(form: Point, to: Point, store: Meta2dStore) {
+  let dis =
+    Math.sqrt(
+      (form.x - to.x) * (form.x - to.x) + (form.y - to.y) * (form.y - to.y)
+    ) / store.data.scale;
+
+  if (to.rotate === 0) {
+    if (form.x < to.x) {
+      if (!store.pens[to.penId].flipX) {
+        dis *= -1;
+      }
+    } else {
+      if (store.pens[to.penId].flipX) {
+        dis *= -1;
+      }
+    }
+  } else {
+    if (form.y < to.y) {
+      if (!store.pens[to.penId].flipY) {
+        dis *= -1;
+      }
+    } else {
+      if (store.pens[to.penId].flipY) {
+        dis *= -1;
+      }
+    }
+  }
+  form.distance = dis;
+}