@meta2d/core 1.0.56 → 1.0.57

package/src/options.ts

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

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

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