@meta2d/core 1.0.54 → 1.0.56

package/src/options.ts

@@ -0,0 +1,205 @@
+import { TextAlign, TextBaseline, Pen } from './pen';
+import { Point } from './point';
+import { Padding } from './utils';
+
+export enum KeydownType {
+  None = -1,
+  Document,
+  Canvas,
+}
+
+export interface Options {
+  color?: string;
+  activeColor?: string;
+  activeBackground?: string;
+  hoverColor?: string;
+  hoverBackground?: string;
+  anchorColor?: string;
+  hoverAnchorColor?: string;
+  anchorRadius?: number;
+  anchorBackground?: string;
+  dockColor?: string;
+  dockPenColor?: string;
+  dragColor?: string;
+  animateColor?: string;
+  textColor?: string;
+  fontFamily?: string;
+  fontSize?: number;
+  lineHeight?: number;
+  textAlign?: TextAlign;
+  textBaseline?: TextBaseline;
+  rotateCursor?: string;
+  rightCursor?: string; // table 右箭 选中行
+  downCursor?: string; // table 下箭 选中列
+  hoverCursor?: string;
+  disableInput?: boolean;
+  disableRotate?: boolean;
+  disableSize?: boolean;
+  disableAnchor?: boolean;
+  autoAnchor?: boolean;
+  autoAlignGrid?: boolean; // 自动对齐网格
+  disableEmptyLine?: boolean;
+  disableRepeatLine?: boolean;
+  disableScale?: boolean;
+  disableTranslate?: boolean;
+  disableDock?: boolean; // 禁止所有停靠辅助线
+  disableLineDock?: boolean; // 禁止移动连线时出现辅助线
+  moveConnectedLine?: boolean; // 是否能移动被连接的连线
+  minScale?: number;
+  maxScale?: number;
+  keydown?: KeydownType;
+  background?: string;
+  shadowOffsetX?: number;
+  shadowOffsetY?: number;
+  shadowBlur?: number;
+  shadowColor?: string;
+  globalAlpha?: number;
+  grid?: boolean;
+  gridColor?: string;
+  gridSize?: number;
+  rule?: boolean;
+  ruleColor?: string;
+  ruleOptions?:{
+    height?:number;
+    background?:string; //背景颜色
+    underline?:boolean; 
+    textColor?:string; //文字颜色
+    textLeft?:number;
+    textTop?:number;
+    baseline?:string;
+  },
+  drawingLineName?: string;
+  fromArrow?: string;
+  toArrow?: string;
+  autoPolyline?: boolean;
+  interval?: number;
+  animateInterval?: number;
+  dragAllIn?: boolean;
+  scroll?: boolean;
+  uploadFn?: (file: File) => Promise<string>; // uploadFn 优先级最高
+  uploadUrl?: string;
+  uploadParams?: Record<string, any>;
+  uploadHeaders?: Record<string, string>;
+  disableRuleLine?: boolean;
+  ruleLineColor?: string;
+  defaultAnchors?: Point[]; // 图形的默认瞄点
+  measureTextWidth?: boolean; // 测量文字宽度
+  mouseRightActive?: boolean; //是否允许右键选中节点
+  disableClipboard?: boolean; //是否禁止系统剪切板
+  drawingLineLength?: number; //绘制过程中允许的最大长度，0表示不限
+  disableTouchPadScale?: boolean; //是否禁止触控板缩放
+  cdn?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  polylineSpace?: number;
+  defaultFormat?: Pen; //默认格式刷
+  domShapes?: string[]; //扩展的dom节点
+  containerShapes?: string[]; //容器节点
+  textFlip?: boolean; //文字镜像
+  textRotate?: boolean; //文字旋转
+  cacheLength?: number; //缓存数据长度
+  unavailableKeys?: string[]; //屏蔽的快捷键
+  activeLineDash?: number[];
+  activeLineWidth?: number;
+  activeGlobalAlpha?: number;
+  diagramOptions?: { [key: string]: any };
+  strictScope?: boolean; //大屏严格范围
+  padding?: Padding; //大屏padding区域
+  resizeMode?: boolean;
+  svgPathStroke?:boolean; //svg path是否显示边框
+  disabledColor?: string;
+  disabledBackground?: string;
+  scaleOff?: number; //缩放偏移量
+  scrollButScale?: boolean; //滚动条滚动，鼠标缩放
+  reconnetTimes?: number; //通信重连次数
+}
+
+export const defaultOptions: Options = {
+  fontFamily:
+    '"Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial',
+  fontSize: 12,
+  lineHeight: 1.5,
+  textAlign: 'center',
+  textBaseline: 'middle',
+  color: '#222222',
+  activeColor: '#278df8',
+  hoverColor: 'rgba(39,141,248,0.50)',
+  anchorColor: '#278DF8',
+  hoverAnchorColor: '#FF4101',
+  anchorRadius: 4,
+  anchorBackground: '#fff',
+  dockColor: 'rgba(39,141,248,0.50)',
+  dockPenColor: '#1890FF',
+  dragColor: '#1890ff',
+  rotateCursor: 'rotate.cur',
+  rightCursor: 'right.cur',
+  downCursor: 'down.cur',
+  hoverCursor: 'pointer',
+  minScale: 0.1,
+  maxScale: 10,
+  keydown: KeydownType.Document,
+  gridSize: 20,
+  gridColor: '#e2e2e2',
+  ruleColor: '#888888',
+  drawingLineName: 'curve',
+  interval: 30,
+  animateInterval: 30,
+  autoPolyline: true,
+  autoAnchor: true,
+  autoAlignGrid: false,
+  animateColor: '#30EEDC',
+  ruleLineColor: '#FF4101',
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  shadowBlur: 64,
+  shadowColor: "#00000014",
+  globalAlpha: 1,
+  defaultAnchors: [
+    {
+      x: 0.5,
+      y: 0,
+    },
+    {
+      x: 1,
+      y: 0.5,
+    },
+    {
+      x: 0.5,
+      y: 1,
+    },
+    {
+      x: 0,
+      y: 0.5,
+    },
+  ],
+  measureTextWidth: true,
+  moveConnectedLine: true,
+  mouseRightActive: true,
+  disableClipboard: false,
+  drawingLineLength: 0,
+  disableTouchPadScale: false,
+  cdn: '',
+  polylineSpace: 10,
+  domShapes: [],
+  containerShapes:['tablePlus'],
+  textFlip: true,
+  textRotate: true,
+  unavailableKeys: [],
+  diagramOptions: {},
+  svgPathStroke:true
+};
+
+export interface PenPlugin {
+  install: (pen:Pen|string,options)=>void;
+  uninstall: (pen:Pen|string,options)=>void;
+  name:string;
+  [key:string]:any;
+}
+export interface PluginOptions {
+  plugin:PenPlugin;
+  options?:object;
+  enable?:boolean;
+  [key:string]:any;
+}

package/src/pen/arrow.ts

@@ -0,0 +1,259 @@
+import { calcRotate, Point } from '../point';
+import { Meta2dStore } from '../store';
+import { Pen } from './model';
+import { getFromAnchor, getToAnchor } from './render';
+
+const arrows: Record<
+  string,
+  (
+    ctx: CanvasRenderingContext2D,
+    pen: Pen,
+    store: Meta2dStore,
+    point: Point
+  ) => void
+> = {};
+
+export function renderFromArrow(
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore
+) {
+  if (!arrows[pen.fromArrow]) {
+    return;
+  }
+  const from = getFromAnchor(pen);
+  const { x, y } = from;
+  const pt: Point = { x, y };
+  pt.step = (pen.fromArrowSize || 10) * store.data.scale;
+  if (from.next) {
+    pt.rotate = calcRotate(from.next, from) + 90;
+  } else {
+    const p = pen.calculative.worldAnchors[1];
+    if (!p) {
+      return;
+    }
+    if (p.prev) {
+      pt.rotate = calcRotate(p.prev, from) + 90;
+    } else {
+      pt.rotate = calcRotate(p, from) + 90;
+    }
+  }
+  ctx.save();
+  ctx.beginPath();
+  ctx.setLineDash([]);
+  const fromArrowColor = pen.fromArrowColor || pen.calculative.color;
+  fromArrowColor && (ctx.strokeStyle = fromArrowColor);
+  arrows[pen.fromArrow](ctx, pen, store, pt);
+  ctx.restore();
+}
+
+export function renderToArrow(
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore
+) {
+  if (!arrows[pen.toArrow] || pen.calculative.worldAnchors.length < 2) {
+    return;
+  }
+  ctx.save();
+  const to = getToAnchor(pen);
+  const { x, y } = to;
+  const pt: Point = { x, y };
+  pt.step = (pen.toArrowSize || 10) * store.data.scale;
+  if (to.prev) {
+    pt.rotate = calcRotate(to.prev, to) + 90;
+  } else {
+    const p =
+      pen.calculative.worldAnchors[pen.calculative.worldAnchors.length - 2];
+    if (p.next) {
+      pt.rotate = calcRotate(p.next, to) + 90;
+    } else {
+      pt.rotate = calcRotate(p, to) + 90;
+    }
+  }
+  ctx.beginPath();
+  ctx.setLineDash([]);
+  const toArrowColor = pen.toArrowColor || pen.calculative.color;
+  toArrowColor && (ctx.strokeStyle = toArrowColor);
+  arrows[pen.toArrow](ctx, pen, store, pt);
+  ctx.restore();
+}
+
+arrows.triangleSolid = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  ctx.moveTo(fromX, point.y - point.step / 4);
+  ctx.lineTo(point.x, point.y);
+  ctx.lineTo(fromX, point.y + point.step / 4);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.fillStyle = ctx.strokeStyle;
+  ctx.fill();
+  ctx.restore();
+};
+
+arrows.triangle = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  if (ctx.lineWidth < 2) {
+    ctx.lineWidth = 2;
+  }
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  ctx.moveTo(fromX, point.y - point.step / 4);
+  ctx.lineTo(point.x, point.y);
+  ctx.lineTo(fromX, point.y + point.step / 4);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.fillStyle = store.data.background || '#ffffff';
+  ctx.fill();
+  ctx.restore();
+};
+
+arrows.circleSolid = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const r = point.step / 2;
+  ctx.arc(point.x - r, point.y, r, 0, 2 * Math.PI);
+  ctx.stroke();
+  ctx.fillStyle = ctx.strokeStyle;
+  ctx.fill();
+  ctx.restore();
+};
+
+arrows.circle = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const r = point.step / 2;
+  ctx.arc(point.x - r, point.y, r, 0, 2 * Math.PI);
+  ctx.stroke();
+  ctx.fillStyle = store.data.background || '#ffffff';
+  ctx.fill();
+  ctx.restore();
+};
+
+arrows.diamondSolid = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  const r = point.step / 2;
+  ctx.moveTo(fromX, point.y);
+  ctx.lineTo(fromX + r, point.y - r / 2);
+  ctx.lineTo(point.x, point.y);
+  ctx.lineTo(fromX + r, point.y + r / 2);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.fillStyle = ctx.strokeStyle;
+  ctx.fill();
+  ctx.restore();
+};
+
+arrows.diamond = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  const r = point.step / 2;
+  ctx.moveTo(fromX, point.y);
+  ctx.lineTo(fromX + r, point.y - r / 2);
+  ctx.lineTo(point.x, point.y);
+  ctx.lineTo(fromX + r, point.y + r / 2);
+  ctx.closePath();
+  ctx.stroke();
+  ctx.fillStyle = store.data.background || '#ffffff';
+  ctx.fill();
+  ctx.restore();
+};
+
+arrows.line = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  ctx.moveTo(fromX, point.y - point.step / 3);
+  ctx.lineTo(point.x, point.y);
+  ctx.lineTo(fromX, point.y + point.step / 3);
+  ctx.stroke();
+  ctx.restore();
+};
+
+arrows.lineUp = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  ctx.moveTo(fromX, point.y - point.step / 3);
+  ctx.lineTo(point.x, point.y);
+  ctx.stroke();
+  ctx.restore();
+};
+
+arrows.lineDown = (
+  ctx: CanvasRenderingContext2D,
+  pen: Pen,
+  store: Meta2dStore,
+  point: Point
+) => {
+  ctx.save();
+  ctx.translate(point.x, point.y);
+  ctx.rotate((point.rotate * Math.PI) / 180);
+  ctx.translate(-point.x, -point.y);
+  const fromX = point.x - point.step;
+  ctx.moveTo(fromX, point.y + point.step / 3);
+  ctx.lineTo(point.x, point.y);
+  ctx.stroke();
+  ctx.restore();
+};

package/src/pen/math.ts

@@ -0,0 +1,253 @@
+import { PenType } from '.';
+import { Point } from '../point';
+import {
+  calcCenter,
+  expandRect,
+  Rect,
+  rectInFourAngRect,
+  rectToPoints,
+} from '../rect';
+import { Meta2dStore } from '../store';
+import { deepClone } from '../utils';
+import { Pen } from './model';
+
+export function calcAnchorDock(
+  store: Meta2dStore,
+  e: Point,
+  curAnchor?: Point
+) {
+  let xDock: Point;
+  let yDock: Point;
+  let x = Infinity;
+  let y = Infinity;
+  const size = 8;
+  for (const pen of store.data.pens) {
+    if (pen.calculative.inView === false) {
+      continue;
+    }
+
+    // 得到图形的全部点
+    const points = getPointsByPen(pen);
+    points.forEach((pt) => {
+      if (pt === e || pt === curAnchor) {
+        return;
+      }
+      let distance =
+        (pen.calculative.worldRect.center.x - e.x) *
+          (pen.calculative.worldRect.center.x - e.x) +
+        (pen.calculative.worldRect.center.y - e.y) *
+          (pen.calculative.worldRect.center.y - e.y);
+      const disX = Math.abs(pt.x - e.x);
+      if (disX > 0 && disX < size && distance < x) {
+        xDock = {
+          x: Math.round(pt.x) + 0.5,
+          y: Math.round(pt.y) + 0.5,
+          prev: {
+            x: Math.round(e.x) + 0.5,
+            y: Math.round(e.y) + 0.5,
+          },
+          step: pt.x - e.x,
+        };
+        x = distance;
+      }
+      const disY = Math.abs(pt.y - e.y);
+      if (disY > 0 && disY < size && distance < y) {
+        yDock = {
+          x: Math.round(pt.x) + 0.5,
+          y: Math.round(pt.y) + 0.5,
+          prev: {
+            x: Math.round(e.x) + 0.5,
+            y: Math.round(e.y) + 0.5,
+          },
+          step: pt.y - e.y,
+        };
+        y = distance;
+      }
+    });
+  }
+
+  return {
+    xDock,
+    yDock,
+  };
+}
+
+export function calcMoveDock(
+  store: Meta2dStore,
+  rect: Rect,
+  pens: Pen[],
+  offset: Point
+) {
+  // 找到 points ，深拷贝一下，不影响原值
+  let activePoints: Point[] = [];
+  if (pens.length === 1) {
+    activePoints = deepClone(getPointsByPen(pens[0]));
+    activePoints.forEach((point) => {
+      point.x += offset.x;
+      point.y += offset.y;
+    });
+  } else {
+    calcCenter(rect);
+    activePoints = [rect.center, ...rectToPoints(rect)];
+  }
+  return calcDockByPoints(store, activePoints, rect, true);
+}
+
+/**
+ * 得到画笔的全部点
+ * 线 即全部的 worldAnchors
+ * 图形 即全部的 worldAnchors ，加上边缘四个点以及中心点
+ * @param pen 画笔
+ */
+export function getPointsByPen(pen: Pen): Point[] {
+  if (!pen.type) {
+    const outerPoints = rectToPoints(pen.calculative.worldRect);
+    calcCenter(pen.calculative.worldRect);
+    return [
+      ...pen.calculative.worldAnchors,
+      ...outerPoints,
+      pen.calculative.worldRect.center,
+    ];
+  } else if (pen.type === PenType.Line) {
+    return pen.calculative.worldAnchors;
+  }
+}
+
+export function calcResizeDock(
+  store: Meta2dStore,
+  rect: Rect,
+  pens: Pen[],
+  resizeIndex: number
+): { xDock: Point; yDock: Point } {
+  const activePoints = rectToPoints(rect);
+  return calcDockByPoints(store, activePoints, rect);
+}
+
+/**
+ * 通过当前 活动层 的所有点 计算 dock
+ * @param activePoints 活动层 的所有点
+ * @param rect 当前区域
+ * @param calcActive 是否与 活动层画笔 的点进行计算
+ */
+function calcDockByPoints(
+  store: Meta2dStore,
+  activePoints: Point[],
+  rect: Rect,
+  calcActive = false
+): { xDock: Point; yDock: Point } {
+  let xDock: Point;
+  let yDock: Point;
+  let minCloseX = Infinity;
+  let minCloseY = Infinity;
+
+  // 临近范围
+  const closeSize = 10;
+  const paddingRect = expandRect(rect, closeSize);
+  store.data.pens.forEach((pen) => {
+    const { inView, worldRect, active } = pen.calculative;
+    if (
+      inView === false ||
+      (!calcActive && active) || // 如果不计算活动层，则过滤掉活动层
+      rectInFourAngRect(paddingRect, worldRect) || // 水平和垂直方向 无重合
+      (pen.type &&
+        store.active.some((active) => isConnectLine(store, active, pen)))
+    ) {
+      return;
+    }
+
+    // 得到图形的全部点
+    const points = getPointsByPen(pen);
+    if (!points) {
+      return;
+    }
+    // 比对 points 中的点，必须找出最近的点，不可提前跳出
+    for (const point of points) {
+      for (const activePoint of activePoints) {
+        const stepX = point.x - activePoint.x;
+        const stepY = point.y - activePoint.y;
+        const absStepX = Math.abs(stepX);
+        const absStepY = Math.abs(stepY);
+        if (!rect.center) {
+          rect.center = {
+            x: rect.x + rect.width / 2,
+            y: rect.y + rect.height / 2,
+          };
+        }
+        if (absStepX < closeSize && absStepX < minCloseX) {
+          xDock = {
+            x: Math.round(point.x) + 0.5,
+            y: Math.round(point.y) + 0.5,
+            step: stepX,
+            prev: {
+              x: Math.round(activePoint.x) + 0.5,
+              y: Math.round(activePoint.y) + 0.5,
+            },
+            penId: pen.id,
+            anchorId: activePoint.id,
+            dockAnchorId: point.id,
+          };
+          minCloseX = absStepX;
+        }
+        if (absStepY < closeSize && absStepY < minCloseY) {
+          yDock = {
+            x: Math.round(point.x) + 0.5,
+            y: Math.round(point.y) + 0.5,
+            step: stepY,
+            prev: {
+              x: Math.round(activePoint.x) + 0.5,
+              y: Math.round(activePoint.y) + 0.5,
+            },
+            penId: pen.id,
+            anchorId: activePoint.id,
+            dockAnchorId: point.id,
+          };
+          minCloseY = absStepY;
+        }
+      }
+    }
+  });
+
+  return {
+    xDock,
+    yDock,
+  };
+}
+
+/**
+ * 判断 line 是否是 active 的连接线（并且计算子节点）
+ * @param store
+ * @param active 本次计算的画笔
+ * @param line 连线
+ * @returns
+ */
+function isConnectLine(store: Meta2dStore, active: Pen, line: Pen) {
+  if (!line.type) {
+    return false;
+  }
+  if (Array.isArray(active?.connectedLines)) {
+    for (const cline of active?.connectedLines) {
+      if (cline.lineId === line.id) {
+        return true;
+      }
+    }
+  }
+  // 考虑子节点
+  if (Array.isArray(active?.children)) {
+    for (const id of active.children) {
+      const child = store.pens[id];
+      if (isConnectLine(store, child, line)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+
+/**
+ * 是否近似于 num
+ * @param num
+ */
+export function isEqual(source: number, target: number): boolean {
+  // @ts-ignore
+  return source.toFixed(12) == target;
+}