aldehyde 0.2.490 → 0.2.491

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

@@ -1,192 +1,192 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
-
-export class PositionTool {
-
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-
-  // 自适应大小
-  positionFit() {
-    const { pageWidth, pageHeight } = this.render.getPageSettings();
-    const children = [
-      ...this.render.layer.getChildren(),
-      ...this.render.layerCover.find('.link-line')
-    ];
-
-    let minX = Infinity,
-      maxX = -Infinity,
-      minY = Infinity,
-      maxY = -Infinity;
-
-    const stageState = this.render.getStageState();
-    for (const node of children) {
-      if (node instanceof Konva.Group) {
-        const { x, y, width, height } = ((rect) => ({
-          x: this.render.toStageValue(rect.x - stageState.x),
-          y: this.render.toStageValue(rect.y - stageState.y),
-          width: this.render.toStageValue(rect.width),
-          height: this.render.toStageValue(rect.height)
-        }))(node.getClientRect());
-        if (x < minX) minX = x;
-        if (x + width > maxX) maxX = x + width;
-        if (y < minY) minY = y;
-        if (y + height > maxY) maxY = y + height;
-      } else if (node instanceof Konva.Line && node.name() === 'link-line') {
-        // 连线占用空间
-        const points = node.points();
-        for (let i = 0; i < points.length; i += 2) {
-          const [px, py] = [points[i], points[i + 1]];
-          if (px < minX) minX = px - 1;
-          if (px > maxX) maxX = px + 1;
-          if (py < minY) minY = py - 1;
-          if (py > maxY) maxY = py + 1;
-        }
-      }
-    }
-
-    // 把画布区域也纳入计算范围（画布从 (0,0) 到 (pageWidth, pageHeight)）
-    if (0 < minX) minX = 0;
-    if (pageWidth > maxX) maxX = pageWidth;
-    if (0 < minY) minY = 0;
-    if (pageHeight > maxY) maxY = pageHeight;
-
-    // 没有素材时，以画布自身为准
-    if (minX === Infinity) minX = 0;
-    if (maxX === -Infinity) maxX = pageWidth;
-    if (minY === Infinity) minY = 0;
-    if (maxY === -Infinity) maxY = pageHeight;
-
-    const contentSize = {
-      width: maxX - minX,
-      height: maxY - minY
-    };
-    const contentRate = contentSize.width / contentSize.height;
-
-    const viewSize = {
-      width: this.render.stage.width() - (this.render.config.readonly ? 0 : this.render.rulerSize),
-      height: this.render.stage.height() - (this.render.config.readonly ? 0 : this.render.rulerSize)
-    };
-    const viewRate = viewSize.width / viewSize.height;
-    let scale = 1;
-
-    // 设置padding，避免边缘紧贴
-    const padding = 20;
-    const effectiveWidth = viewSize.width - padding * 2;
-    const effectiveHeight = viewSize.height - padding * 2;
-
-    if (viewRate > contentRate) {  // 视口比内容更"扁"，以高度为基准
-      scale = effectiveHeight / contentSize.height;
-    } else {  // 视口比内容更"长"，以宽度为基准
-      scale = effectiveWidth / contentSize.width;
-    }
-
-    scale = Math.max(0.2, scale);
-    scale = Math.floor(scale * 100) / 100;
-
-    // 设置缩放比例最大为1（暂时隐藏）
-    // if (contentSize.width * scale <= viewSize.width && contentSize.height * scale <= viewSize.height) {
-    //   scale = Math.min(1, scale);
-    // }
-
-    this.render.stage.setAttrs({
-      scale: { x: scale, y: scale },
-      position: {
-        x:
-          (this.render.config.readonly ? 0 : this.render.rulerSize) -
-          minX * scale +
-          (viewSize.width - contentSize.width * scale) / 2,
-        y:
-          (this.render.config.readonly ? 0 : this.render.rulerSize) -
-          minY * scale +
-          (viewSize.height - contentSize.height * scale) / 2
-      }
-    });
-
-    this.render.emit('scale-change', scale);
-
-    // 重绘
-    this.render.redraw([
-      BgDraw.NAME,
-      GraphDraw.NAME,
-      LinkDraw.NAME,
-      RulerDraw.NAME,
-      RefLineDraw.NAME,
-      PreviewDraw.NAME
-    ]);
-  }
-
-  // 恢复位置大小
-  positionZoomReset() {
-    this.render.stage.setAttrs({
-      scale: { x: 1, y: 1 }
-    });
-    this.render.emit('scale-change', 1);
-    this.positionReset();
-  }
-
-  // 恢复位置
-  positionReset() {
-    this.render.stage.setAttrs({
-      x: this.render.rulerSize,
-      y: this.render.rulerSize
-    });
-    // 重绘
-    this.render.redraw([
-      BgDraw.NAME,
-      GraphDraw.NAME,
-      LinkDraw.NAME,
-      RulerDraw.NAME,
-      RefLineDraw.NAME,
-      PreviewDraw.NAME
-    ]);
-  }
-
-  // 更新中心位置
-  updateCenter(x = 0, y = 0) {
-    // stage 状态
-    const stageState = this.render.getStageState();
-    // 提取节点
-    const nodes = this.render.layer.getChildren((node) => !this.render.ignore(node));
-
-    // 计算节点占用的区域（计算起点即可）
-    let minX = 0;
-    let minY = 0;
-    for (const node of nodes) {
-      const x = node.x();
-      const y = node.y();
-      if (x < minX) {
-        minX = x;
-      }
-      if (y < minY) {
-        minY = y;
-      }
-    }
-
-    // 居中画布
-    this.render.stage.setAttrs({
-      x:
-        stageState.width / 2 -
-        this.render.toBoardValue(minX) -
-        this.render.toBoardValue(x) +
-        this.render.rulerSize,
-      y:
-        stageState.height / 2 -
-        this.render.toBoardValue(minY) -
-        this.render.toBoardValue(y) +
-        this.render.rulerSize
-    });
-    // 重绘
-    this.render.redraw([
-      BgDraw.NAME,
-      GraphDraw.NAME,
-      LinkDraw.NAME,
-      RulerDraw.NAME,
-      RefLineDraw.NAME,
-      PreviewDraw.NAME
-    ]);
-  }
+import Konva from 'konva';
+import { Render } from '../index';
+import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw } from '../draws';
+
+export class PositionTool {
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+
+  // 自适应大小
+  positionFit() {
+    const { pageWidth, pageHeight } = this.render.getPageSettings();
+    const children = [
+      ...this.render.layer.getChildren(),
+      ...this.render.layerCover.find('.link-line')
+    ];
+
+    let minX = Infinity,
+      maxX = -Infinity,
+      minY = Infinity,
+      maxY = -Infinity;
+
+    const stageState = this.render.getStageState();
+    for (const node of children) {
+      if (node instanceof Konva.Group) {
+        const { x, y, width, height } = ((rect) => ({
+          x: this.render.toStageValue(rect.x - stageState.x),
+          y: this.render.toStageValue(rect.y - stageState.y),
+          width: this.render.toStageValue(rect.width),
+          height: this.render.toStageValue(rect.height)
+        }))(node.getClientRect());
+        if (x < minX) minX = x;
+        if (x + width > maxX) maxX = x + width;
+        if (y < minY) minY = y;
+        if (y + height > maxY) maxY = y + height;
+      } else if (node instanceof Konva.Line && node.name() === 'link-line') {
+        // 连线占用空间
+        const points = node.points();
+        for (let i = 0; i < points.length; i += 2) {
+          const [px, py] = [points[i], points[i + 1]];
+          if (px < minX) minX = px - 1;
+          if (px > maxX) maxX = px + 1;
+          if (py < minY) minY = py - 1;
+          if (py > maxY) maxY = py + 1;
+        }
+      }
+    }
+
+    // 把画布区域也纳入计算范围（画布从 (0,0) 到 (pageWidth, pageHeight)）
+    if (0 < minX) minX = 0;
+    if (pageWidth > maxX) maxX = pageWidth;
+    if (0 < minY) minY = 0;
+    if (pageHeight > maxY) maxY = pageHeight;
+
+    // 没有素材时，以画布自身为准
+    if (minX === Infinity) minX = 0;
+    if (maxX === -Infinity) maxX = pageWidth;
+    if (minY === Infinity) minY = 0;
+    if (maxY === -Infinity) maxY = pageHeight;
+
+    const contentSize = {
+      width: maxX - minX,
+      height: maxY - minY
+    };
+    const contentRate = contentSize.width / contentSize.height;
+
+    const viewSize = {
+      width: this.render.stage.width() - (this.render.config.readonly ? 0 : this.render.rulerSize),
+      height: this.render.stage.height() - (this.render.config.readonly ? 0 : this.render.rulerSize)
+    };
+    const viewRate = viewSize.width / viewSize.height;
+    let scale = 1;
+
+    // 设置padding，避免边缘紧贴
+    const padding = 20;
+    const effectiveWidth = viewSize.width - padding * 2;
+    const effectiveHeight = viewSize.height - padding * 2;
+
+    if (viewRate > contentRate) {  // 视口比内容更"扁"，以高度为基准
+      scale = effectiveHeight / contentSize.height;
+    } else {  // 视口比内容更"长"，以宽度为基准
+      scale = effectiveWidth / contentSize.width;
+    }
+
+    scale = Math.max(0.2, scale);
+    scale = Math.floor(scale * 100) / 100;
+
+    // 设置缩放比例最大为1（暂时隐藏）
+    // if (contentSize.width * scale <= viewSize.width && contentSize.height * scale <= viewSize.height) {
+    //   scale = Math.min(1, scale);
+    // }
+
+    this.render.stage.setAttrs({
+      scale: { x: scale, y: scale },
+      position: {
+        x:
+          (this.render.config.readonly ? 0 : this.render.rulerSize) -
+          minX * scale +
+          (viewSize.width - contentSize.width * scale) / 2,
+        y:
+          (this.render.config.readonly ? 0 : this.render.rulerSize) -
+          minY * scale +
+          (viewSize.height - contentSize.height * scale) / 2
+      }
+    });
+
+    this.render.emit('scale-change', scale);
+
+    // 重绘
+    this.render.redraw([
+      BgDraw.NAME,
+      GraphDraw.NAME,
+      LinkDraw.NAME,
+      RulerDraw.NAME,
+      RefLineDraw.NAME,
+      PreviewDraw.NAME
+    ]);
+  }
+
+  // 恢复位置大小
+  positionZoomReset() {
+    this.render.stage.setAttrs({
+      scale: { x: 1, y: 1 }
+    });
+    this.render.emit('scale-change', 1);
+    this.positionReset();
+  }
+
+  // 恢复位置
+  positionReset() {
+    this.render.stage.setAttrs({
+      x: this.render.rulerSize,
+      y: this.render.rulerSize
+    });
+    // 重绘
+    this.render.redraw([
+      BgDraw.NAME,
+      GraphDraw.NAME,
+      LinkDraw.NAME,
+      RulerDraw.NAME,
+      RefLineDraw.NAME,
+      PreviewDraw.NAME
+    ]);
+  }
+
+  // 更新中心位置
+  updateCenter(x = 0, y = 0) {
+    // stage 状态
+    const stageState = this.render.getStageState();
+    // 提取节点
+    const nodes = this.render.layer.getChildren((node) => !this.render.ignore(node));
+
+    // 计算节点占用的区域（计算起点即可）
+    let minX = 0;
+    let minY = 0;
+    for (const node of nodes) {
+      const x = node.x();
+      const y = node.y();
+      if (x < minX) {
+        minX = x;
+      }
+      if (y < minY) {
+        minY = y;
+      }
+    }
+
+    // 居中画布
+    this.render.stage.setAttrs({
+      x:
+        stageState.width / 2 -
+        this.render.toBoardValue(minX) -
+        this.render.toBoardValue(x) +
+        this.render.rulerSize,
+      y:
+        stageState.height / 2 -
+        this.render.toBoardValue(minY) -
+        this.render.toBoardValue(y) +
+        this.render.rulerSize
+    });
+    // 重绘
+    this.render.redraw([
+      BgDraw.NAME,
+      GraphDraw.NAME,
+      LinkDraw.NAME,
+      RulerDraw.NAME,
+      RefLineDraw.NAME,
+      PreviewDraw.NAME
+    ]);
+  }
 }

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

@@ -1,141 +1,141 @@
-import Konva from 'konva';
-import { Render } from '../index';
-import { GraphDraw, LinkDraw } from '../draws';
-import { AssetType } from '../types';
-
-export class SelectionTool {
-
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  // 【被选中的】
-  selectingNodes: Konva.Node[] = [];
-  // 清空已选
-  selectingClear(slient = false) {
-    // 选择变化了
-    if (this.selectingNodes.length > 0) {
-      !slient && this.render.emit('selection-change', []);
-    }
-    // 清空选择
-    this.render.transformer.nodes([]);
-    // 恢复透明度、层次、可交互
-    for (const node of [...this.selectingNodes].sort(
-      (a, b) => a.attrs.lastZIndex - b.attrs.lastZIndex
-    )) {
-      node.setAttrs({
-        listening: true,
-        opacity: node.attrs.lastOpacity ?? 1,
-        zIndex: node.attrs.lastZIndex
-      });
-    }
-    // 清空状态
-    for (const node of this.selectingNodes) {
-      node.setAttrs({
-        nodeMousedownPos: undefined,
-        lastOpacity: undefined,
-        lastZIndex: undefined,
-        selectingZIndex: undefined,
-        selected: false
-      });
-    }
-    // 清空选择节点
-    this.selectingNodes = [];
-    // 隐藏 连接点
-    this.render.linkTool.pointsVisible(false);
-    // 重绘
-    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME]);
-  }
-
-  // 选择节点
-  select(nodes: Konva.Node[]) {
-    // 清除连接线选中
-    this.render.linkTool.selectingClear();
-    // 选择变化了
-    this.render.emit('selection-change', nodes);
-    this.selectingClear(true);
-
-    if (nodes.length > 0) {
-      // 最大zIndex
-      const maxZIndex = Math.max(
-        ...this.render.layer
-          .getChildren((node) => !this.render.ignore(node))
-          .map((o) => o.zIndex())
-      );
-
-      // 记录状态
-      for (const node of nodes) {
-        node.setAttrs({
-          nodeMousedownPos: node.position(), // 后面用于移动所选
-          lastOpacity: node.opacity(), // 选中时，下面会使其变透明，记录原有的透明度
-          lastZIndex: node.zIndex(), // 记录原有的层次，后面暂时提升所选节点的层次
-          selectingZIndex: undefined,
-          selected: true, // 选择中
-          listening: false, // 不可交互
-          opacity: node.opacity() * 0.8 // 设置透明度
-        });
-        if (node instanceof Konva.Group) {
-          node.findOne(".tooltip")?.visible(false); // 存在tooltip,选中组件时隐藏
-        }
-      }
-
-      // 提升层次
-      for (const node of nodes.sort((a, b) => a.zIndex() - b.zIndex())) {
-        node.setAttrs({
-          zIndex: maxZIndex // 提升层次
-        });
-      }
-      // 选中的节点
-      this.selectingNodes = nodes;
-      // 选中的节点，放进 transformer
-      this.render.transformer.nodes(this.selectingNodes);
-    }
-
-    // 设置 transformer 的 resize/rotate/draggable（必须在 selectingClear 和 transformer.nodes 之后）
-    const allLocked = nodes.length > 0 && nodes.every((n) => !!n.attrs.locked);
-    if (allLocked) {
-      this.render.transformer.resizeEnabled(false);
-      this.render.transformer.rotateEnabled(false);
-      this.render.transformer.draggable(false);
-    } else {
-      this.render.transformer.draggable(true);
-      if (nodes.length > 1) {
-        // 多选：允许改变大小和旋转
-        this.render.transformer.resizeEnabled(true);
-        this.render.transformer.rotateEnabled(true);
-      } else if (nodes.length === 1) {
-        const target = nodes[0];
-        // 图形 不能改变大小
-        this.render.transformer.resizeEnabled(
-          target.attrs.assetType === AssetType.Graph ? false : true
-        );
-        this.render.transformer.rotateEnabled(
-          target.attrs.assetType === AssetType.Graph &&
-            ["Line", "Curve", "Bezier"].includes(target.attrs.graphType)
-            ? false
-            : true
-        );
-      } else {
-        this.render.transformer.resizeEnabled(true);
-      }
-    }
-
-    // 重绘
-    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME]);
-  }
-
-  // 更新节点位置
-  selectingNodesMove(offset: Konva.Vector2d) {
-    for (const node of this.render.selectionTool.selectingNodes) {
-      node.x(node.x() + offset.x);
-      node.y(node.y() + offset.y);
-    }
-    this.render.emit('asset-position-change', this.render.selectionTool.selectingNodes);
-  }
-
-  // 选择所有节点
-  selectAll() {
-    const nodes = this.render.layer.find('.asset') as Konva.Group[];
-    this.select(nodes);
-  }
+import Konva from 'konva';
+import { Render } from '../index';
+import { GraphDraw, LinkDraw } from '../draws';
+import { AssetType } from '../types';
+
+export class SelectionTool {
+
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  // 【被选中的】
+  selectingNodes: Konva.Node[] = [];
+  // 清空已选
+  selectingClear(slient = false) {
+    // 选择变化了
+    if (this.selectingNodes.length > 0) {
+      !slient && this.render.emit('selection-change', []);
+    }
+    // 清空选择
+    this.render.transformer.nodes([]);
+    // 恢复透明度、层次、可交互
+    for (const node of [...this.selectingNodes].sort(
+      (a, b) => a.attrs.lastZIndex - b.attrs.lastZIndex
+    )) {
+      node.setAttrs({
+        listening: true,
+        opacity: node.attrs.lastOpacity ?? 1,
+        zIndex: node.attrs.lastZIndex
+      });
+    }
+    // 清空状态
+    for (const node of this.selectingNodes) {
+      node.setAttrs({
+        nodeMousedownPos: undefined,
+        lastOpacity: undefined,
+        lastZIndex: undefined,
+        selectingZIndex: undefined,
+        selected: false
+      });
+    }
+    // 清空选择节点
+    this.selectingNodes = [];
+    // 隐藏 连接点
+    this.render.linkTool.pointsVisible(false);
+    // 重绘
+    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME]);
+  }
+
+  // 选择节点
+  select(nodes: Konva.Node[]) {
+    // 清除连接线选中
+    this.render.linkTool.selectingClear();
+    // 选择变化了
+    this.render.emit('selection-change', nodes);
+    this.selectingClear(true);
+
+    if (nodes.length > 0) {
+      // 最大zIndex
+      const maxZIndex = Math.max(
+        ...this.render.layer
+          .getChildren((node) => !this.render.ignore(node))
+          .map((o) => o.zIndex())
+      );
+
+      // 记录状态
+      for (const node of nodes) {
+        node.setAttrs({
+          nodeMousedownPos: node.position(), // 后面用于移动所选
+          lastOpacity: node.opacity(), // 选中时，下面会使其变透明，记录原有的透明度
+          lastZIndex: node.zIndex(), // 记录原有的层次，后面暂时提升所选节点的层次
+          selectingZIndex: undefined,
+          selected: true, // 选择中
+          listening: false, // 不可交互
+          opacity: node.opacity() * 0.8 // 设置透明度
+        });
+        if (node instanceof Konva.Group) {
+          node.findOne(".tooltip")?.visible(false); // 存在tooltip,选中组件时隐藏
+        }
+      }
+
+      // 提升层次
+      for (const node of nodes.sort((a, b) => a.zIndex() - b.zIndex())) {
+        node.setAttrs({
+          zIndex: maxZIndex // 提升层次
+        });
+      }
+      // 选中的节点
+      this.selectingNodes = nodes;
+      // 选中的节点，放进 transformer
+      this.render.transformer.nodes(this.selectingNodes);
+    }
+
+    // 设置 transformer 的 resize/rotate/draggable（必须在 selectingClear 和 transformer.nodes 之后）
+    const allLocked = nodes.length > 0 && nodes.every((n) => !!n.attrs.locked);
+    if (allLocked) {
+      this.render.transformer.resizeEnabled(false);
+      this.render.transformer.rotateEnabled(false);
+      this.render.transformer.draggable(false);
+    } else {
+      this.render.transformer.draggable(true);
+      if (nodes.length > 1) {
+        // 多选：允许改变大小和旋转
+        this.render.transformer.resizeEnabled(true);
+        this.render.transformer.rotateEnabled(true);
+      } else if (nodes.length === 1) {
+        const target = nodes[0];
+        // 图形 不能改变大小
+        this.render.transformer.resizeEnabled(
+          target.attrs.assetType === AssetType.Graph ? false : true
+        );
+        this.render.transformer.rotateEnabled(
+          target.attrs.assetType === AssetType.Graph &&
+            ["Line", "Curve", "Bezier"].includes(target.attrs.graphType)
+            ? false
+            : true
+        );
+      } else {
+        this.render.transformer.resizeEnabled(true);
+      }
+    }
+
+    // 重绘
+    this.render.redraw([GraphDraw.NAME, LinkDraw.NAME]);
+  }
+
+  // 更新节点位置
+  selectingNodesMove(offset: Konva.Vector2d) {
+    for (const node of this.render.selectionTool.selectingNodes) {
+      node.x(node.x() + offset.x);
+      node.y(node.y() + offset.y);
+    }
+    this.render.emit('asset-position-change', this.render.selectionTool.selectingNodes);
+  }
+
+  // 选择所有节点
+  selectAll() {
+    const nodes = this.render.layer.find('.asset') as Konva.Group[];
+    this.select(nodes);
+  }
 }