aldehyde 0.2.473 → 0.2.475

package/src/aldehyde/draw-canvas/edit/components/render/tools/z-index-tool.ts

@@ -0,0 +1,227 @@
+import Konva from 'konva';
+import { Render } from '../index';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw } from '../draws';
+
+// 层接工具
+
+export class ZIndexTool {
+  // @ts-ignore
+  static readonly name = 'ZIndexTool';
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 获取移动节点
+  getNodes(nodes: Konva.Node[]) {
+    const targets: Konva.Node[] = [];
+    for (const node of nodes) {
+      if (node instanceof Konva.Transformer) {
+        // 已选择的节点
+        targets.push(...this.render.selectionTool.selectingNodes);
+      } else {
+        // 未选择的节点
+        targets.push(node);
+      }
+    }
+    return targets;
+  }
+
+  // 最大 zIndex
+  getMaxZIndex() {
+    return Math.max(
+      ...this.render.layer
+        .getChildren((node) => !this.render.ignore(node))
+        .map((o) => o.zIndex())
+    );
+  }
+
+  // 最小 zIndex
+  getMinZIndex() {
+    return Math.min(
+      ...this.render.layer
+        .getChildren((node) => !this.render.ignore(node))
+        .map((o) => o.zIndex())
+    );
+  }
+
+  // 记录选择期间的 zIndex
+  updateSelectingZIndex(nodes: Konva.Node[]) {
+    for (const node of nodes) {
+      node.setAttrs({
+        selectingZIndex: node.zIndex()
+      });
+    }
+  }
+
+  // 恢复选择期间的 zIndex
+  resetSelectingZIndex(nodes: Konva.Node[]) {
+    nodes.sort((a, b) => a.zIndex() - b.zIndex());
+    for (const node of nodes) {
+      node.zIndex(node.attrs.selectingZIndex);
+    }
+  }
+
+  // 更新 zIndex 缓存
+  updateLastZindex(nodes: Konva.Node[]) {
+    for (const node of nodes) {
+      node.setAttrs({ lastZIndex: node.zIndex() });
+    }
+  }
+
+  // 上移
+  up(nodes: Konva.Node[]) {
+    // 最大zIndex
+    const maxZIndex = this.getMaxZIndex();
+    const sorted = this.getNodes(nodes).sort((a, b) => b.zIndex() - a.zIndex());
+    // 上移
+    let lastNode: Konva.Node | null = null;
+    if (this.render.selectionTool.selectingNodes.length > 0) {
+      this.updateSelectingZIndex(sorted);
+      for (const node of sorted) {
+        if (
+          node.attrs.lastZIndex < maxZIndex &&
+          (lastNode === null || node.attrs.lastZIndex < lastNode.attrs.lastZIndex - 1)
+        ) {
+          node.setAttrs({
+            lastZIndex: node.attrs.lastZIndex + 1
+          });
+        }
+        lastNode = node;
+      }
+      this.resetSelectingZIndex(sorted);
+    } else {
+      // 直接调整
+      for (const node of sorted) {
+        if (
+          node.zIndex() < maxZIndex &&
+          (lastNode === null || node.zIndex() < lastNode.zIndex() - 1)
+        ) {
+          node.zIndex(node.zIndex() + 1);
+        }
+        lastNode = node;
+      }
+
+      this.updateLastZindex(sorted);
+      // 更新历史
+      this.render.updateHistory();
+      // 重绘
+      this.render.redraw([
+        GraphDraw.name,
+        LinkDraw.name,
+        RulerDraw.name,
+        PreviewDraw.name
+      ]);
+    }
+  }
+
+  // 下移
+  down(nodes: Konva.Node[]) {
+    // 最小 zIndex
+    const minZIndex = this.getMinZIndex();
+    const sorted = this.getNodes(nodes).sort((a, b) => a.zIndex() - b.zIndex());
+    // 下移
+    let lastNode: Konva.Node | null = null;
+
+    if (this.render.selectionTool.selectingNodes.length > 0) {
+      this.updateSelectingZIndex(sorted);
+
+      for (const node of sorted) {
+        if (
+          node.attrs.lastZIndex > minZIndex &&
+          (lastNode === null || node.attrs.lastZIndex > lastNode.attrs.lastZIndex + 1)
+        ) {
+          node.setAttrs({ lastZIndex: node.attrs.lastZIndex - 1 });
+        }
+        lastNode = node;
+      }
+      this.resetSelectingZIndex(sorted);
+    } else {
+      // 直接调整
+      for (const node of sorted) {
+        if (
+          node.zIndex() > minZIndex &&
+          (lastNode === null || node.zIndex() > lastNode.zIndex() + 1)
+        ) {
+          node.zIndex(node.zIndex() - 1);
+        }
+        lastNode = node;
+      }
+      this.updateLastZindex(sorted);
+      // 更新历史
+      this.render.updateHistory();
+      // 重绘
+      this.render.redraw([
+        GraphDraw.name,
+        LinkDraw.name,
+        RulerDraw.name,
+        PreviewDraw.name
+      ]);
+    }
+  }
+
+  // 置顶
+  top(nodes: Konva.Node[]) {
+    // 最大 zIndex
+    let maxZIndex = this.getMaxZIndex();
+    const sorted = this.getNodes(nodes).sort((a, b) => b.zIndex() - a.zIndex());
+    if (this.render.selectionTool.selectingNodes.length > 0) {
+      // 先选中再调整
+      this.updateSelectingZIndex(sorted);
+      // 置顶
+      for (const node of sorted) {
+        node.setAttrs({ lastZIndex: maxZIndex-- });
+      }
+      this.resetSelectingZIndex(sorted);
+    } else {
+      // 直接调整
+      for (const node of sorted) {
+        node.zIndex(maxZIndex);
+      }
+      this.updateLastZindex(sorted);
+      // 更新历史
+      this.render.updateHistory();
+      // 重绘
+      this.render.redraw([
+        GraphDraw.name,
+        LinkDraw.name,
+        RulerDraw.name,
+        PreviewDraw.name
+      ]);
+    }
+  }
+
+  // 置底
+  bottom(nodes: Konva.Node[]) {
+    // 最小 zIndex
+    let minZIndex = this.getMinZIndex();
+    const sorted = this.getNodes(nodes).sort((a, b) => a.zIndex() - b.zIndex());
+    if (this.render.selectionTool.selectingNodes.length > 0) {
+      // 先选中再调整
+      this.updateSelectingZIndex(sorted);
+      // 置底
+      for (const node of sorted) {
+        node.setAttrs({
+          lastZIndex: minZIndex++
+        });
+      }
+      this.resetSelectingZIndex(sorted);
+    } else {
+      // 直接调整
+      for (const node of sorted) {
+        node.zIndex(minZIndex);
+      }
+      this.updateLastZindex(sorted);
+      // 更新历史
+      this.render.updateHistory();
+      // 重绘
+      this.render.redraw([
+        GraphDraw.name,
+        LinkDraw.name,
+        RulerDraw.name,
+        PreviewDraw.name
+      ]);
+    }
+  }
+}

package/src/aldehyde/draw-canvas/edit/components/render/types.ts

@@ -0,0 +1,291 @@
+import Konva from 'konva';
+import { Render } from './index';
+
+export interface RenderConfig {
+  width: number;
+  height: number;
+  showBg?: boolean;
+  showRuler?: boolean;
+  showRefLine?: boolean;
+  showPreview?: boolean;
+  showContextmenu?: boolean;
+  attractResize?: boolean;
+  attractBg?: boolean;
+  attractNode?: boolean;
+  readonly?: boolean;
+}
+
+export type RenderEvents = {
+  ['history-change']: { records: string[]; index: number };
+  ['selection-change']: Konva.Node[];
+  ['link-type-change']: LinkType;
+  ['scale-change']: number;
+  ['loading']: boolean;
+  ['graph-type-change']: GraphType | undefined;
+  ['texting-change']: boolean;
+  ['page-settings-change']: PageSettings;
+  ['link-selection-change']: Konva.Line | undefined;
+  ['asset-position-change']: Konva.Node[];
+  ['asset-rotation-change']: Konva.Node[];
+}
+
+export interface Handler {
+  handlers?: {
+    stage?: {
+      [index: string]: (e?: any) => void | boolean
+    };
+    dom?: {
+      [index: string]: (e?: any) => void
+    };
+    transformer?: {
+      [index: string]: (e?: any) => void
+    }
+  };
+  transformerConfig?: {
+    anchorDragBoundFunc?: (
+      oldPos: Konva.Vector2d,
+      newPos: Konva.Vector2d,
+      e: MouseEvent
+    ) => Konva.Vector2d;
+    dragBoundFunc?: (newPos: Konva.Vector2d, e: MouseEvent) => Konva.Vector2d
+  }
+}
+
+export enum MouseButton {
+  左键 = 0,
+  右键 = 2
+}
+
+export interface Draw {
+  readonly layer: Konva.Layer;
+  option: {
+    [index: string]: any
+  };
+  init: () => void;
+  draw: () => void;
+  clear: () => void;
+}
+
+export class BaseDraw {
+  protected render: Render;
+  readonly layer: Konva.Layer;
+  protected group: Konva.Group;
+  constructor(render: Render, layer: Konva.Layer) {
+    this.render = render;
+    this.layer = layer;
+    this.group = new Konva.Group();
+  }
+  init() {
+    this.layer.add(this.group);
+    this.draw();
+  }
+  draw() { }
+  clear() {
+    // 重置
+    this.group.destroy();
+    const name = this.group.name();
+    this.group = new Konva.Group({ name });
+    this.layer.add(this.group);
+  }
+}
+
+export { Render }
+
+export interface AssetInfoPoint {
+  x: number;
+  y: number;
+  direction?: 'top' | 'bottom' | 'left' | 'right'; // 人为定义连接点属于元素的什么方向
+  alias?: string;
+}
+
+export interface AssetInfo {
+  url: string;
+  avatar?: string; // 子素材需要额外的封面
+  points?: Array<AssetInfoPoint>;
+}
+
+export enum MoveKey {
+  上 = 'ArrowUp',
+  左 = 'ArrowLeft',
+  右 = 'ArrowRight',
+  下 = 'ArrowDown'
+}
+
+export enum ShutcutKey {
+  删除 = 'Delete',
+  C = 'KeyC',
+  V = 'KeyV',
+  Z = 'KeyZ',
+  A = 'KeyA',
+  R = 'KeyR',
+  Esc = 'Escape',
+  Backspace = 'Backspace',
+  Enter = 'Enter'
+}
+
+// 布局类型
+export type AlignType = "Middle" | "Left" | "Right" | "Center" | "Top" | "Bottom";
+
+// 连接线 类型
+export type LinkType = "auto" | "curve" | "bezier" | "manual" | "straight";
+
+/**
+ * 连接对
+ */
+export interface LinkDrawPair {
+  id: string;
+  from: {
+    groupId: string;
+    pointId: string;
+    rawGroupId?: string; // 预留
+  };
+  to: {
+    groupId: string;
+    pointId: string;
+    rawGroupId?: string; // 预留
+  };
+  disabled?: boolean; // 标记为 true，算法会忽略该 pair 的画线逻辑
+  linkType?: LinkType; // 连接线类型
+  style?: Konva.LineConfig & LinkSettings
+}
+
+/**
+ * 连接点
+ */
+export interface LinkDrawPoint {
+  id: string;
+  groupId: string;
+  rawGroupId?: string; // 预留
+  visible: boolean;
+  pairs: LinkDrawPair[];
+  x: number;
+  y: number;
+  direction?: 'top' | 'bottom' | 'left' | 'right'; // 人为定义连接点属于元素的什么方向
+  alias?: string
+}
+
+/**
+ * 连接线 拐点
+ */
+export interface ManualPoint {
+  x: number;
+  y: number;
+}
+
+/**
+ * 连接线 拐点 表
+ */
+export interface ManualPointsMap {
+  [index: string]: ManualPoint[]
+}
+
+/**
+ * 直线、折线 拐点
+ */
+export interface LineManualPoint {
+  x: number;
+  y: number;
+  index: number;
+}
+
+/**
+ * 图形类型
+ */
+export type GraphType = 'Line' | 'Curve' | 'Rect' | 'Circle' | 'Bezier';
+
+/**
+ * 图形 的 调整点 信息
+ */
+export interface GraphAnchor {
+  type?: GraphType;
+  adjustType: string;
+  name?: string;
+  groupId?: string;
+  adjusted?: boolean;
+}
+
+/**
+ * 图形 的 调整点 图形、锚点关系
+ */
+export interface GraphAnchorShape {
+  shape: Konva.Shape;
+  anchorShadow: Konva.Circle
+}
+
+/**
+ * 素材类型
+ */
+export enum AssetType {
+  'Image' = 'Image',
+  'Json' = 'Json',
+  'Graph' = 'Graph',
+  'Text' = 'Text'
+}
+
+/**
+ * 图片类型
+ */
+export enum ImageType {
+  'svg' = 'svg',
+  'gif' = 'gif',
+  'other' = 'other'
+}
+
+/**
+ * 对齐信息
+ */
+export interface SortItem {
+  id?: number; // 有 id 就是其他节点，否则就是 选择目标
+  value: number // 左、垂直中、右的 x 坐标值; 上、水平中、下的 y 坐标值；
+}
+
+/**
+ * 页面设置
+ */
+export interface PageSettings {
+  // 画布尺寸
+  pageWidth: number;
+  pageHeight: number;
+  // 样式设置
+  background?: string;
+  backgroundImg?: { // 背景图
+    src: string;
+    code: string;
+  };
+  stroke: string;
+  strokeWidth: number;
+  fill: string;
+  linkStroke: string;
+  linkStrokeWidth: number;
+  fontSize: number;
+  textFill: string
+}
+
+/**
+ * 素材设置
+ */
+export interface AssetSettings {
+  stroke: string;
+  strokeWidth: number;
+  fill: string;
+  arrowStart: boolean;
+  arrowEnd: boolean;
+  fontSize: number;
+  textFill: string;
+  text: string;
+  x: number;
+  y: number;
+  rotation: number;
+  tension: number;
+}
+
+/**
+ * 连接线设置
+ */
+export interface LinkSettings {
+  stroke: string;
+  strokeWidth: number;
+  arrowStart: boolean;
+  arrowEnd: boolean;
+  tension: number;
+}

package/src/aldehyde/draw-canvas/edit/components/render/utils/a-star.ts

@@ -0,0 +1,116 @@
+export interface Node {
+  x: number;
+  y: number;
+  cost?: number; // 代价
+  parent?: Node; // 上一步
+}
+
+export default function aStar(config: {
+  from: Node; // 起点
+  to: Node; // 终点
+  matrix: number[][]; // 矩阵
+  maxCost: number // 作为墙的值
+}): Node[] {
+  const { from, to, matrix, maxCost = 1 } = config;
+  const grid: Node[][] = matrixToGrid(matrix);
+  const start = grid[from.y][from.x];
+  const goal = grid[to.y][to.x];
+  // 初始化 open 和 closed 列表
+  const open: Node[] = [start];
+  const closed = new Set<Node>();
+  // 初始化每个节点的 f, g, h 值
+  const f = new Map<Node, number>();
+  const g = new Map<Node, number>();
+  const h = new Map<Node, number>();
+  g.set(start, 0);
+  h.set(start, manhattanDistance(start, goal));
+  f.set(start, g.get(start)! + h.get(start)!);
+  // A* 算法主循环
+  while (open.length > 0) {
+    // 从 open 列表中找到 f 值最小的节点
+    const current = open.reduce((a, b) => (f.get(a)! < f.get(b)! ? a : b));
+    // 如果当前节点是目标节点，返回路径
+    if (current === goal) {
+      return reconstructPath(goal);
+    }
+    // 将当前节点从 open 列表中移除，并加入 closed 列表
+    open.splice(open.indexOf(current), 1);
+    closed.add(current);
+    // 遍历当前节点的邻居
+    for (const neighbor of getNeighbors(current, grid)) {
+      // 如果邻居节点已经在 closed 列表中，跳过
+      if (closed.has(neighbor)) {
+        continue;
+      }
+      // 计算从起点到邻居节点的距离（转弯距离增加）
+      const tentativeG =
+        g.get(current)! + // 累计距离
+        (neighbor.cost ?? 1) + // 下一步距离
+        ((current.x === current.parent?.x && current.x !== neighbor.x) ||
+          (current.y === current.parent?.y && current.y !== neighbor.y)
+          ? grid.length + grid[0].length
+          : 0);
+      // 如果邻居节点不在 open 列表中，或者新的 g 值更小，更新邻居节点的 g, h, f 值，并将其加入 open 列表
+      if (!open.includes(neighbor) || tentativeG < g.get(neighbor)!) {
+        g.set(neighbor, tentativeG);
+        h.set(neighbor, manhattanDistance(neighbor, goal));
+        f.set(neighbor, g.get(neighbor)! + h.get(neighbor)!);
+        neighbor.parent = current;
+        if (!open.includes(neighbor)) {
+          open.push(neighbor);
+        }
+      }
+    }
+  }
+
+  // 如果 open 列表为空，表示无法到达目标节点，返回 null
+  return [];
+
+  // 数据转换
+  function matrixToGrid(matrix: number[][]) {
+    const mt: Node[][] = [];
+    for (let y = 0; y < matrix.length; y++) {
+      if (mt[y] === void 0) {
+        mt[y] = [];
+      }
+      for (let x = 0; x < matrix[y].length; x++) {
+        mt[y].push({ x, y, cost: matrix[y][x] });
+      }
+    }
+    return mt;
+  }
+
+  // 从目标节点开始，沿着 parent 指针重构路径
+  function reconstructPath(node: Node): Node[] {
+    const path = [node];
+    while (node.parent) {
+      path.push(node.parent);
+      node = node.parent;
+    }
+    return path.reverse();
+  }
+
+  // 计算曼哈顿距离
+  function manhattanDistance(a: Node, b: Node): number {
+    return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+  }
+
+  // 获取当前节点的邻居
+  function getNeighbors(node: Node, grid: Node[][]): Node[] {
+    const neighbors = [];
+    const { x, y } = node;
+    if (x > 0 && (grid[y][x - 1].cost ?? 0) < maxCost) {
+      neighbors.push(grid[y][x - 1]);
+    }
+    if (x < grid[0].length - 1 && (grid[y][x + 1].cost ?? 0) < maxCost) {
+      neighbors.push(grid[y][x + 1]);
+    }
+    if (y > 0 && (grid[y - 1][x].cost ?? 0) < maxCost) {
+      neighbors.push(grid[y - 1][x]);
+    }
+    if (y < grid.length - 1 && (grid[y + 1][x].cost ?? 0) < maxCost) {
+      neighbors.push(grid[y + 1][x]);
+    }
+    return neighbors;
+  }
+}

package/src/aldehyde/draw-canvas/edit/components/render/utils/bezier-scene-func.ts

@@ -0,0 +1,73 @@
+import Konva from 'konva';
+
+function rotatePoint(x1: number, y1: number, x2: number, y2: number, angleInDegrees: number) {
+  const radians = angleInDegrees * (Math.PI / 180);
+  const cosTheta = Math.cos(radians);
+  const sinTheta = Math.sin(radians);
+
+  // Translate point (x2, y2) to be relative to (x1, y1)
+  const x = x2 - x1;
+  const y = y2 - y1;
+
+  // Rotate point
+  const xPrime = cosTheta * x - sinTheta * y;
+  const yPrime = sinTheta * x + cosTheta * y;
+
+  // Translate back
+  const xNew = xPrime + x1;
+  const yNew = yPrime + y1;
+
+  return { x: xNew, y: yNew };
+}
+
+function drawPointer(ctx: Konva.Context, shape: Konva.Shape, startX: number, startY: number, ctrlX: number, ctrlY: number) {
+  const x2 = startX + 12;
+  const y2 = startY - 6;
+  const x3 = startX + 12;
+  const y3 = startY + 6;
+  const angle = (Math.atan2(ctrlY - startY, ctrlX - startX) * 180) / Math.PI;
+  const p2 = rotatePoint(startX, startY, x2, y2, angle);
+  const p3 = rotatePoint(startX, startY, x3, y3, angle);
+  ctx.beginPath();
+  ctx.moveTo(startX, startY);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.lineTo(p3.x, p3.y);
+  ctx.lineTo(startX, startY);
+  ctx.lineTo(p2.x, p2.y);
+  ctx.strokeShape(shape);
+  ctx.fillShape(shape);
+}
+
+export function BezierSceneFunc(ctx: Konva.Context, shape: Konva.Shape) {
+  if (shape instanceof Konva.Arrow) {
+    const ps = shape.points();
+    if (ps.length / 2 === 4) {
+      // 三次
+      ctx.beginPath();
+      ctx.moveTo(ps[0], ps[1]);
+      ctx.bezierCurveTo(ps[2], ps[3], ps[4], ps[5], ps[6], ps[7]);
+      ctx.strokeShape(shape);
+      ctx.closePath();
+      shape.pointerAtBeginning() && drawPointer(ctx, shape, ps[0], ps[1], ps[2], ps[3]);
+      shape.pointerAtEnding() && drawPointer(ctx, shape, ps[6], ps[7], ps[4], ps[5]);
+    } else if (ps.length / 2 === 3) {
+      // 二次
+      ctx.beginPath();
+      ctx.moveTo(ps[0], ps[1]);
+      ctx.quadraticCurveTo(ps[2], ps[3], ps[4], ps[5]);
+      ctx.strokeShape(shape);
+      ctx.closePath();
+      shape.pointerAtBeginning() && drawPointer(ctx, shape, ps[0], ps[1], ps[2], ps[3]);
+      shape.pointerAtEnding() && drawPointer(ctx, shape, ps[4], ps[5], ps[2], ps[3]);
+    } else {
+      // 直线
+      ctx.beginPath();
+      ctx.moveTo(ps[0], ps[1]);
+      ctx.lineTo(ps[2], ps[3]);
+      ctx.strokeShape(shape);
+      ctx.closePath();
+      shape.pointerAtBeginning() && drawPointer(ctx, shape, ps[0], ps[1], ps[2], ps[3]);
+      shape.pointerAtEnding() && drawPointer(ctx, shape, ps[2], ps[3], ps[0], ps[1]);
+    }
+  }
+}