aldehyde 0.2.479 → 0.2.481

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

@@ -647,8 +647,8 @@ export class Circle extends BaseGraph {
       y: 0,
       radiusX: 0,
       radiusY: 0,
-      stroke: this.render.getPageSettings().stroke,
-      strokeWidth: this.render.getPageSettings().strokeWidth
+      stroke: "#000000",
+      strokeWidth: 1,
     });
     this.group.add(this.circle);
     this.group.position(this.dropPoint); // 鼠标按下位置 作为起点

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

@@ -333,9 +333,9 @@ export class Curve extends BaseGraph {
       name: 'graph',
       x: 0,
       y: 0,
-      stroke: this.render.getPageSettings().stroke,
-      strokeWidth: this.render.getPageSettings().strokeWidth,
-      fill: this.render.getPageSettings().stroke,
+      stroke: "#000000",
+      strokeWidth: 1,
+      fill: "#000000",
       points: [],
       pointerAtBeginning: false,
       pointerAtEnding: false,

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

@@ -328,9 +328,9 @@ export class Line extends BaseGraph {
       name: 'graph',
       x: 0,
       y: 0,
-      stroke: this.render.getPageSettings().stroke,
-      strokeWidth: this.render.getPageSettings().strokeWidth,
-      fill: this.render.getPageSettings().stroke,
+      stroke: "#000000",
+      strokeWidth: 1,
+      fill: "#000000",
       points: [],
       pointerAtBeginning: false,
       pointerAtEnding: false

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

@@ -641,8 +641,8 @@ export class Rect extends BaseGraph {
       y: 0,
       width: 0,
       height: 0,
-      stroke: this.render.getPageSettings().stroke,
-      strokeWidth: this.render.getPageSettings().strokeWidth
+      stroke: "#000000",
+      strokeWidth: 1,
     });
     this.group.add(this.rect);
     this.group.position(this.dropPoint);

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

@@ -1,157 +1,72 @@
-import Konva from 'konva';
-import { nanoid } from 'nanoid';
-import { Render } from '../index';
-import { Handler, AssetInfoPoint, AssetType, LinkDrawPoint } from '../types';
-import { RefLineDraw, PreviewDraw } from '../draws';
-
-export class DragOutsideHandlers implements Handler {
-  private render: Render;
-  constructor(render: Render) {
-    this.render = render;
-  }
-  handlers = {
-    dom: {
-      dragenter: (e: GlobalEventHandlersEventMap['dragenter']) => {
-        this.render.stage.setPointersPositions(e);
-        // 更新参考线
-        this.render.redraw([RefLineDraw.name]);
-      },
-      dragover: (e: GlobalEventHandlersEventMap['dragover']) => {
-        this.render.stage.setPointersPositions(e);
-        // 更新参考线
-        this.render.redraw([RefLineDraw.name]);
-      },
-      drop: (e: GlobalEventHandlersEventMap['drop']) => {
-        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 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]);
-            })
-          }
-        }
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { nanoid } from 'nanoid';
+import { Render } from '../index';
+import { Handler, AssetInfoPoint, LinkDrawPoint } from '../types';
+import { RefLineDraw, PreviewDraw } from '../draws';
+
+export class DragOutsideHandlers implements Handler {
+  private render: Render;
+  constructor(render: Render) {
+    this.render = render;
+  }
+  handlers = {
+    dom: {
+      dragenter: (e: GlobalEventHandlersEventMap['dragenter']) => {
+        this.render.stage.setPointersPositions(e);
+        this.render.redraw([RefLineDraw.name]);  // 更新参考线
+      },
+      dragover: (e: GlobalEventHandlersEventMap['dragover']) => {
+        this.render.stage.setPointersPositions(e);
+        this.render.redraw([RefLineDraw.name]);  // 更新参考线
+      },
+      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'); // 组件类型
+        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;
+          }
+        }
+        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
                 );
               }