aldehyde 0.2.478 → 0.2.480

package/src/aldehyde/draw-canvas-edit/components/render/handlers/drag-outside-handlers.ts

@@ -1,7 +1,7 @@
 import Konva from 'konva';
 import { nanoid } from 'nanoid';
 import { Render } from '../index';
-import { Handler, AssetInfoPoint, AssetType, LinkDrawPoint } from '../types';
+import { Handler, AssetInfoPoint, LinkDrawPoint } from '../types';
 import { RefLineDraw, PreviewDraw } from '../draws';
 
 export class DragOutsideHandlers implements Handler {
@@ -13,143 +13,58 @@ export class DragOutsideHandlers implements Handler {
     dom: {
       dragenter: (e: GlobalEventHandlersEventMap['dragenter']) => {
         this.render.stage.setPointersPositions(e);
-        // 更新参考线
-        this.render.redraw([RefLineDraw.name]);
+        this.render.redraw([RefLineDraw.name]);  // 更新参考线
       },
       dragover: (e: GlobalEventHandlersEventMap['dragover']) => {
         this.render.stage.setPointersPositions(e);
-        // 更新参考线
-        this.render.redraw([RefLineDraw.name]);
+        this.render.redraw([RefLineDraw.name]);  // 更新参考线
       },
-      drop: (e: GlobalEventHandlersEventMap['drop']) => {
+      drop: async (e: GlobalEventHandlersEventMap['drop']) => {
+        const componentItem = JSON.parse(e.dataTransfer?.getData('componentItem') || '{}');
         const src = e.dataTransfer?.getData('src');
         const componentType = e.dataTransfer?.getData('componentType'); // 组件类型
-        // 接收连接点信息
-        let morePoints: AssetInfoPoint[] = [];
-        const morePointsTxt = e.dataTransfer?.getData('points') ?? '[]';
-        try {
-          morePoints = JSON.parse(morePointsTxt);
-        } catch (e) {
-          console.error(e);
+        const showPoints = e.dataTransfer?.getData('showPoints'); // 是否显示连接点
+        const type = e.dataTransfer?.getData('type') || "other";
+        const stageState = this.render.getStageState();
+        this.render.stage.setPointersPositions(e);
+        const pos = this.render.stage.getPointerPosition();
+        if (!pos) return;
+        const factory = this.render.componentFactory;
+        let group: Konva.Group | null = null;
+        let points: AssetInfoPoint[] = [];
+        if (componentType) { // 指定组件类型
+          const comGroup = await factory.createTypedComponent({ src, type, componentType });
+          group = comGroup.group;
+          points = comGroup.points;
+        } else if (src && type) { // 图片或组合组件
+          if (type === 'json') { // 组合组件
+            const jsonGroup = await factory.createJsonComponent({ src });
+            group = jsonGroup.group;
+          } else { // 图片组件
+            const imgGroup = await factory.createImageComponent({ src, type });
+            group = imgGroup.group;
+            points = imgGroup.points;
+          }
         }
-        const type = e.dataTransfer?.getData('type');
-        if (src && type) {
-          const stageState = this.render.getStageState();
-          const { pageHeight, pageWidth } = this.render.getPageSettings()
-          this.render.stage.setPointersPositions(e);
-          const pos = this.render.stage.getPointerPosition();
-          if (pos) {
-            this.render.assetTool[type === 'json' ? 'loadJson' : ({ svg: "loadSvg", gif: "loadGif" }[type] || "loadImg")](src).then((target: Konva.Image | Konva.Group) => {
-              let group = null;
-              let width = target.width();
-              let height = target.height();
-              if (width > pageWidth || height > pageHeight) {
-                const sizeScale = Math.min(pageWidth / width, pageHeight / height);
-                width *= sizeScale;
-                height *= sizeScale;
-                target.setSize({ width, height });
-              }
-              // 默认连接点
-              let points: AssetInfoPoint[] = [];
-              if (target instanceof Konva.Image) { // 图片素材
-                group = new Konva.Group({
-                  id: nanoid(),
-                  width,
-                  height,
-                  name: 'asset',
-                  assetType: AssetType.Image,
-                  draggable: true,
-                  componentType,
-                  imageType:
-                    type !== 'json'
-                      ? (["svg", "gif", "other"].includes(type) ? type : "other")
-                      : undefined
-                });
-                this.render.setAssetSettings(group, this.render.getAssetSettings(), false);
-                group.add(target);
-                points = [
-                  { x: 0, y: group.height() / 2, direction: 'left' },  // 左
-                  { x: group.width(), y: group.height() / 2, direction: 'right' }, // 右
-                  { x: group.width() / 2, y: 0, direction: 'top' }, // 上
-                  { x: group.width() / 2, y: group.height(), direction: 'bottom' } // 下
-                ];
-              } else {// json 素材
-                target.id(nanoid());
-                target.setAttrs({
-                  name: 'asset',
-                  assetType: AssetType.Json,
-                  draggable: true
-                });
-                group = target;
-                this.render.linkTool.groupIdCover(group);
-              }
-              target.setAttrs({ x: 0, y: 0 } as any);
-              this.render.layer.add(group); // 组件添加到画布
-              const x = this.render.toStageValue(pos.x - stageState.x) - group.width() / 2;
-              const y = this.render.toStageValue(pos.y - stageState.y) - group.height() / 2;
-              group.setAttrs({ x, y });
-              // 更新坐标记录
-              this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
-              // 自定义连接点 覆盖 默认连接点
-              if (Array.isArray(morePoints) && morePoints.length > 0) {
-                points = morePoints;
-              }
-              // 连接点信息
-              group.setAttrs({
-                points: points.map(
-                  (o) =>
-                    ({
-                      ...o,
-                      id: nanoid(),
-                      groupId: group.id(),
-                      visible: false,
-                      pairs: [],
-                      direction: o.direction
-                    }) as LinkDrawPoint
-                )
-              });
-              // 连接点（锚点）
-              for (const point of group.getAttr('points') ?? []) {
-                group.add(
-                  new Konva.Circle({
-                    name: 'link-anchor',
-                    id: point.id,
-                    x: point.x,
-                    y: point.y,
-                    radius: this.render.toStageValue(1),
-                    stroke: 'rgba(0,0,255,1)',
-                    strokeWidth: this.render.toStageValue(2),
-                    visible: false,
-                    direction: point.direction
-                  })
-                );
-              }
-              group.on('mouseenter', () => { // 显示 连接点
-                this.render.linkTool.pointsVisible(true, group);
-              });
-              // hover 框（多选时才显示）
-              group.add(
-                new Konva.Rect({
-                  id: 'hoverRect',
-                  width: target.width(),
-                  height: target.height(),
-                  fill: 'rgba(0,255,0,0.3)',
-                  visible: false
-                })
-              );
-
-              group.on('mouseleave', () => {
-                // 隐藏 连接点
-                this.render.linkTool.pointsVisible(false, group);
-                // 隐藏 hover 框
-                group.findOne('#hoverRect')?.visible(false);
-              });
-              // 更新历史
-              this.render.updateHistory();
-              // 重绘
-              this.render.redraw([PreviewDraw.name]);
-            })
+        if (group) { // 存在组件，设置连接点等功能
+          this.render.layer.add(group); // 组件添加到画布
+          if (componentItem?.dataSource) { // 组件存在默认数据源，拖拽插入组件时默认设置数据源配置
+            this.render.setAssetSettings(group, { ...this.render.getAssetSettings(group), dataSource: componentItem.dataSource.split('@R@')[0] }, false);
           }
+          const x = this.render.toStageValue(pos.x - stageState.x) - group.width() / 2;
+          const y = this.render.toStageValue(pos.y - stageState.y) - group.height() / 2;
+          group.setAttrs({ x, y });
+          // 更新坐标记录
+          this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+          // 设置连接点
+          this.render.componentFactory.createComponentLinkPoints({ group, points, showPoints });
+          // 组件鼠标移入移出事件
+          this.render.componentFactory.groupMouseenter({ group });
+          this.render.componentFactory.groupMouseleave({ group });
+          // 更新历史
+          this.render.updateHistory();
+          // 重绘
+          this.render.redraw([PreviewDraw.name]);
         }
       }
     }

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

@@ -70,9 +70,15 @@ export class GraphHandlers implements Handler {
 
               // 初始化设置信息
               if (this.currentGraph) {
+                const temSetting = this.render.getAssetSettings(this.currentGraph.group);
                 this.render.setAssetSettings(
                   this.currentGraph.group,
-                  this.render.getAssetSettings(this.currentGraph.group),
+                  {
+                    ...temSetting,
+                    stroke: temSetting.stroke || "#000000",
+                    strokeWidth: temSetting.strokeWidth || 1,
+                    fill: temSetting.fill || (["Circle", "Rect"].includes(this.render.graphType) ? "transparent" : "#000000"),
+                  },
                   false
                 );
               }

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

@@ -144,6 +144,10 @@ export class SelectionHandlers implements Handler {
             // （判断 ctrlKey 为了排查 mac 拖动快捷键）
             if (e.evt.button === MouseButton["左键"] && !e.evt.ctrlKey) {
               if (!this.render.ignore(parent) && !this.render.ignoreDraw(e.target)) {
+                // 锁定节点：在 select 之前先禁用 Konva 内置拖拽，防止 race condition
+                if (parent.attrs.locked) {
+                  parent.draggable(false);
+                }
                 if (e.evt.ctrlKey || e.evt.metaKey) { // 新增多选
                   this.render.selectionTool.select([...this.render.selectionTool.selectingNodes, parent]);
                 } else {  // 单选
@@ -278,9 +282,11 @@ export class SelectionHandlers implements Handler {
               }
             }
           }
-          // 更新坐标记录
-          for (const group of groups) {
-            this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+          // 更新坐标记录（仅记录属性，不干预Konva位置，避免toFixed截断与Konva精确值冲突累积）
+          for (const group of groups as Konva.Group[]) {
+            group.setAttr('assetSettings', this.render.getAssetSettings(group));
+            // 存在tooltip，则tooltip始终箭头朝下，不受group旋转影响
+            group.findOne('.tooltip')?.rotation(-group.rotation());
           }
           this.render.emit('asset-position-change', groups);
           this.render.emit('asset-rotation-change', groups);
@@ -312,8 +318,8 @@ export class SelectionHandlers implements Handler {
           this.updateManualPointsByDrag(rect, undefined, false);
         }
         const groups = this.render.transformer.nodes();
-        for (const group of groups) { // 更新坐标记录
-          this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+        for (const group of groups) { // 更新坐标记录（仅记录属性，不干预Konva位置）
+          group.setAttr('assetSettings', this.render.getAssetSettings(group));
         }
         this.render.emit('asset-position-change', groups);
         this.render.redraw([GraphDraw.name, LinkDraw.name, RulerDraw.name, PreviewDraw.name]);

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

@@ -3,7 +3,7 @@ import Konva from 'konva';
 import { GraphDraw, LinkDraw, RulerDraw, PreviewDraw, RefLineDraw, BgDraw, ContextmenuDraw } from './draws';
 import { LinkDrawPoint, GraphType, AssetType, RenderConfig, Draw, Handler, RenderEvents, LinkDrawPair, PageSettings, AssetSettings, ImageType, LinkSettings } from './types';
 import { DragHandlers, ZoomHandlers, DragOutsideHandlers, SelectionHandlers, KeyMoveHandlers, ShutcutHandlers, LinkHandlers, GraphHandlers, TextHandlers } from './handlers';
-import { AssetTool, SelectionTool, CopyTool, PositionTool, ZIndexTool, ImportExportTool, AlignTool, LinkTool, AttractTool } from './tools';
+import { AssetTool, SelectionTool, CopyTool, PositionTool, ZIndexTool, ImportExportTool, AlignTool, LinkTool, AttractTool, ComponentFactory } from './tools';
 
 // 简单的事件系统替代 mitt
 class SimpleEventEmitter {
@@ -43,6 +43,7 @@ export class Render {
   alignTool: AlignTool; // 对齐工具
   linkTool: LinkTool; // 连线工具
   attractTool: AttractTool; // 磁贴工具
+  componentFactory: ComponentFactory; // 统一组件渲染
   groupTransformer: Konva.Group = new Konva.Group(); // 多选器层
 
   // 多选器
@@ -73,7 +74,7 @@ export class Render {
   historyIndex = -1;
   graphType: GraphType | undefined = undefined;  // 画图类型
   texting = false; // 添加文字中
-  showGrid = true; // 显示网格
+  showGrid = false; // 显示网格
   showAttract = true; // 显示磁吸
 
   // 事件发射器（替代 mitt）
@@ -144,6 +145,7 @@ export class Render {
     this.alignTool = new AlignTool(this); // 对齐工具
     this.linkTool = new LinkTool(this); // 对齐工具
     this.attractTool = new AttractTool(this); // 磁贴工具
+    this.componentFactory = new ComponentFactory(this); // 统一组件渲染
 
     // 事件处理
     this.handlers[DragHandlers.name] = new DragHandlers(this);
@@ -438,7 +440,8 @@ export class Render {
 
   changeDraggable(disabled: boolean) {
     this.layer.children.forEach((asset) => {
-      asset.draggable(disabled);
+      // 锁定节点始终保持不可拖拽
+      asset.draggable(disabled && !asset.attrs.locked);
     });
   }
 
@@ -483,9 +486,6 @@ export class Render {
     pageHeight: 720,
     // 样式默认值
     background: undefined,
-    stroke: 'rgb(0,0,0)',
-    strokeWidth: 1,
-    fill: 'rgb(0,0,0)',
     linkStroke: 'rgb(0,0,0)',
     linkStrokeWidth: 1,
     fontSize: 24,
@@ -524,9 +524,9 @@ export class Render {
 
   // 素材设置 默认值
   static AssetSettingsDefault: AssetSettings = {
-    stroke: '',
-    strokeWidth: 0,
-    fill: '',
+    // stroke: '',
+    // strokeWidth: 0,
+    // fill: '',
     arrowStart: false,
     arrowEnd: false,
     fontSize: 0,
@@ -545,16 +545,12 @@ export class Render {
       // 特定
       ...base,
       // 继承全局
-      stroke: base.stroke || this.getPageSettings().stroke,
-      strokeWidth: base.strokeWidth || this.getPageSettings().strokeWidth,
+      stroke: base.stroke,
+      strokeWidth: base.strokeWidth,
       fontSize: base.fontSize || this.getPageSettings().fontSize,
       textFill: base.textFill || this.getPageSettings().textFill,
       // 绘制图形，默认不填充
-      fill:
-        base.fill ||
-        (asset?.attrs.assetType === AssetType.Graph
-          ? 'transparent'
-          : this.getPageSettings().fill),
+      fill: base.fill || "transparent",
       x: parseFloat((asset?.position().x ?? 0).toFixed(1)),
       y: parseFloat((asset?.position().y ?? 0).toFixed(1)),
       rotation: parseFloat((asset?.rotation() ?? 0).toFixed(1)),
@@ -616,19 +612,31 @@ export class Render {
 
   // 更新素材设置
   async setAssetSettings(asset: Konva.Node, settings: AssetSettings, update = false) {
-    asset.setAttr('assetSettings', settings);
     if (asset instanceof Konva.Group) {
+      this.componentFactory.updateComponentSetting({ node: asset, settings }); // 更新组件配置
       if (asset.attrs.imageType === ImageType.svg) {
         const node = asset.children[0] as Konva.Shape;
         if (node instanceof Konva.Image) {
           if (node.attrs.svgXML) {
-            const n = await this.assetTool.loadSvgXML(
-              this.setSvgXMLSettings(node.attrs.svgXML, settings)
-            );
-            node.parent?.add(n);
-            node.remove();
-            node.destroy();
-            n.zIndex(0);
+            // 仅在 stroke/fill 变化时才重建 SVG 节点
+            const currentSettings = asset.attrs.assetSettings;
+            const strokeChanged = settings.stroke !== currentSettings?.stroke;
+            const fillChanged = settings.fill !== currentSettings?.fill;
+            if (strokeChanged || fillChanged) {
+              const n = await this.assetTool.loadSvgXML(
+                this.setSvgXMLSettings(node.attrs.svgXML, settings)
+              );
+              // 保留旧节点的变换状态
+              n.x(node.x());
+              n.y(node.y());
+              n.scaleX(node.scaleX());
+              n.scaleY(node.scaleY());
+              n.rotation(node.rotation());
+              node.parent?.add(n);
+              node.remove();
+              node.destroy();
+              n.zIndex(0);
+            }
           }
         }
       } else if (asset.attrs.assetType === AssetType.Graph) {
@@ -676,10 +684,11 @@ export class Render {
       }
 
       // rotate 会影响 position，不能同时改变
-      // 区分属性面板正在调整
       if (Math.abs(settings.rotation - asset.rotation()) >= 0.1) {
         this.rotateAroundCenter(asset, settings.rotation);
-        // 同步 position 的变化
+        // tooltip 始终箭头朝下，不受 group 旋转影响
+        asset.findOne('.tooltip')?.rotation(-asset.rotation());
+        // 同步 position 的变化     
         this.emit('asset-position-change', [asset]);
       } else {
         const prevSettings = this.getAssetSettings(asset);
@@ -693,12 +702,11 @@ export class Render {
         }
       }
     }
-
+    asset.setAttr('assetSettings', settings);
     if (update) {
       // 更新历史
       this.updateHistory();
     }
-
     this.draws[BgDraw.name]?.draw();
     this.draws[GraphDraw.name]?.draw();
     this.draws[LinkDraw.name]?.draw();
@@ -706,18 +714,19 @@ export class Render {
   }
 
   // 获取画布上所有素材节点及其配置
-  getAllAssets(): Array<{ id: string; assetType: AssetType; settings: AssetSettings }> {
+  getAllAssets(): Array<{ id: string; assetType: AssetType; settings: AssetSettings, componentType?: string }> {
     const nodes = this.layer.getChildren((node) => !this.ignore(node));
     return nodes.map((node) => ({
       id: node.id(),
       assetType: node.attrs.assetType as AssetType,
+      componentType: node.attrs.componentType,
       settings: this.getAssetSettings(node)
     }));
   }
 
   // 根据节点 id 动态更新组件属性
   updateAssetById(id: string, settings: Partial<AssetSettings>) {
-    const node = this.layer.findOne(`#${id}`);
+    const node: Konva.Group = this.layer.findOne(`#${id}`);
     if (!node) {
       console.warn(`[Render.updateAssetById] 未找到节点 id=${id}`);
       return;

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

@@ -28,23 +28,38 @@ export class AttractTool {
     this.alignLines = [];
   }
 
-  getSortItems(rect: AlignRect) {
+  // 从选中节点 getClientRect 计算真实边界框，绕过 back rect 的 padding
+  private getSelectingNodesRect(nodes: Konva.Node[]): AlignRect | null {
+    if (nodes.length === 0) return null;
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    for (const node of nodes) {
+      const r = node.getClientRect();
+      if (r.x < minX) minX = r.x;
+      if (r.y < minY) minY = r.y;
+      if (r.x + r.width > maxX) maxX = r.x + r.width;
+      if (r.y + r.height > maxY) maxY = r.y + r.height;
+    }
+    return { x: minX, y: minY, width: maxX - minX, height: maxY - minY };
+  }
+
+  getSortItems(rect: AlignRect, targetPadding?: number) {
     const stageState = this.render.getStageState();
+    const padding = targetPadding ?? this.render.transformer.padding();
     // 横向所有需要判断对齐的 x 坐标
     const sortX: Array<SortItem> = [];
     // 纵向向所有需要判断对齐的 y 坐标
     const sortY: Array<SortItem> = [];
-    // 选择目标所有的对齐 x
+    // 选择目标所有的对齐 x（使用实际节点边缘而非 back rect，补偿 padding）
     sortX.push(
-      { value: this.render.toStageValue(rect.x - stageState.x) },
+      { value: this.render.toStageValue(rect.x - stageState.x + padding) },
       { value: this.render.toStageValue(rect.x - stageState.x + rect.width / 2) },
-      { value: this.render.toStageValue(rect.x - stageState.x + rect.width) }
+      { value: this.render.toStageValue(rect.x - stageState.x + rect.width - padding) }
     );
-    // 选择目标所有的对齐 y
+    // 选择目标所有的对齐 y（使用实际节点边缘而非 back rect，补偿 padding）
     sortY.push(
-      { value: this.render.toStageValue(rect.y - stageState.y) },
+      { value: this.render.toStageValue(rect.y - stageState.y + padding) },
       { value: this.render.toStageValue(rect.y - stageState.y + rect.height / 2) },
-      { value: this.render.toStageValue(rect.y - stageState.y + rect.height) }
+      { value: this.render.toStageValue(rect.y - stageState.y + rect.height - padding) }
     );
     // 拖动目标
     const targetIds = this.render.selectionTool.selectingNodes.map((o) => o._id);
@@ -72,6 +87,7 @@ export class AttractTool {
   attractPoint = (pos: Konva.Vector2d) => {
     this.alignLinesClear(); // 对齐线清除
     const stageState = this.render.getStageState();
+    const showGrid = this.render.showGrid; // 是否显示网格，不显示网格则不网格吸附
     let newPosX = pos.x;
     let newPosY = pos.y;
     let isAttract = false;
@@ -190,7 +206,7 @@ export class AttractTool {
         }
       }
     }
-    if (!this.render.config.readonly && this.render.config.attractBg) {
+    if (!this.render.config.readonly && this.render.config.attractBg && showGrid) {
       // 没有 x 对齐节点
       if (pairX === null) {
         const logicLeftX = this.render.toStageValue(newPosX - stageState.x); // x坐标
@@ -257,6 +273,7 @@ export class AttractTool {
     const stageState = this.render.getStageState();
     const width = this.render.transformer.width();
     const height = this.render.transformer.height();
+    const showGrid = this.render.showGrid; // 是否显示网格，不显示网格则不网格吸附
     let newPosX = rect.x;
     let newPosY = rect.y;
     let isAttract = false;
@@ -264,7 +281,10 @@ export class AttractTool {
     let pairY: SortItemPair | null = null;
     // 对齐线 磁吸逻辑
     if (!this.render.config.readonly && this.render.config.attractNode) {
-      const { sortX, sortY } = this.getSortItems(rect);
+      // 从选中节点的真实 getClientRect 计算边界框，避免 back rect 的 padding 补偿引入亚像素偏差
+      const selectingNodes = this.render.selectionTool.selectingNodes;
+      const nodeRect = this.getSelectingNodesRect(selectingNodes) ?? rect;
+      const { sortX, sortY } = this.getSortItems(nodeRect, 0);
       // x 最短距离
       let XMin = Infinity;
       // x 最短距离的【对】（多个）
@@ -375,7 +395,7 @@ export class AttractTool {
         }
       }
     }
-    if (!this.render.config.readonly && this.render.config.attractBg) {
+    if (!this.render.config.readonly && this.render.config.attractBg && showGrid) { // 显示网格则执行网格磁吸
       // 没有 x 对齐节点
       if (pairX === null) {
         const logicLeftX = this.render.toStageValue(newPosX - stageState.x); // x坐标