@meta2d/core 1.0.56 → 1.0.57

package/src/pen/text.ts

@@ -1,341 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,232 +0,0 @@
-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;
-}