aldehyde 0.2.485 → 0.2.487

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

@@ -1,70 +1,70 @@
-import Konva from 'konva';
-import { BaseDraw, Draw, Handler, Render } from '../types';
-
-// 参考线
-
-export interface RefLineDrawOption {
-  padding: number
-}
-
-export class RefLineDraw extends BaseDraw implements Draw, Handler {
-  option: RefLineDrawOption;
-
-  constructor(render: Render, layer: Konva.Layer, option: RefLineDrawOption) {
-    super(render, layer);
-    this.option = option;
-    this.group.listening(false);
-  }
-
-  override draw() {
-    this.clear();
-    const stageState = this.render.getStageState();
-    const group = new Konva.Group();
-    const pos = this.render.stage.getPointerPosition();
-    if (pos) {
-      if (pos.y >= this.option.padding) {
-        // 横
-        group.add(
-          new Konva.Line({
-            name: this.constructor.name,
-            points: [
-              [this.render.toStageValue(-stageState.x), this.render.toStageValue(pos.y - stageState.y)],
-              [this.render.toStageValue(stageState.width - stageState.x + this.render.rulerSize), this.render.toStageValue(pos.y - stageState.y)]
-            ].flat(),
-            stroke: 'rgba(255,0,0,0.2)',
-            strokeWidth: this.render.toStageValue(1),
-            listening: false
-          })
-        );
-      }
-      if (pos.x >= this.option.padding) {
-        // 竖
-        group.add(
-          new Konva.Line({
-            name: this.constructor.name,
-            points: [
-              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(-stageState.y)],
-              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(stageState.height - stageState.y + this.render.rulerSize)]
-            ].flat(),
-            stroke: 'rgba(255,0,0,0.2)',
-            strokeWidth: this.render.toStageValue(1),
-            listening: false
-          })
-        );
-      }
-    }
-    this.group.add(group);
-  }
-  handlers = {
-    dom: {
-      mousemove: () => {
-        // 更新参考线
-        this.draw();
-      },
-      mouseout: () => {
-        // 清除参考线
-        this.clear();
-      }
-    }
-  }
-}
+import Konva from 'konva';
+import { BaseDraw, Draw, Handler, Render } from '../types';
+
+// 参考线
+
+export interface RefLineDrawOption {
+  padding: number
+}
+
+export class RefLineDraw extends BaseDraw implements Draw, Handler {
+  option: RefLineDrawOption;
+
+  constructor(render: Render, layer: Konva.Layer, option: RefLineDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+  }
+
+  override draw() {
+    this.clear();
+    const stageState = this.render.getStageState();
+    const group = new Konva.Group();
+    const pos = this.render.stage.getPointerPosition();
+    if (pos) {
+      if (pos.y >= this.option.padding) {
+        // 横
+        group.add(
+          new Konva.Line({
+            name: this.constructor.name,
+            points: [
+              [this.render.toStageValue(-stageState.x), this.render.toStageValue(pos.y - stageState.y)],
+              [this.render.toStageValue(stageState.width - stageState.x + this.render.rulerSize), this.render.toStageValue(pos.y - stageState.y)]
+            ].flat(),
+            stroke: 'rgba(255,0,0,0.2)',
+            strokeWidth: this.render.toStageValue(1),
+            listening: false
+          })
+        );
+      }
+      if (pos.x >= this.option.padding) {
+        // 竖
+        group.add(
+          new Konva.Line({
+            name: this.constructor.name,
+            points: [
+              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(-stageState.y)],
+              [this.render.toStageValue(pos.x - stageState.x), this.render.toStageValue(stageState.height - stageState.y + this.render.rulerSize)]
+            ].flat(),
+            stroke: 'rgba(255,0,0,0.2)',
+            strokeWidth: this.render.toStageValue(1),
+            listening: false
+          })
+        );
+      }
+    }
+    this.group.add(group);
+  }
+  handlers = {
+    dom: {
+      mousemove: () => {
+        // 更新参考线
+        this.draw();
+      },
+      mouseout: () => {
+        // 清除参考线
+        this.clear();
+      }
+    }
+  }
+}

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

@@ -1,165 +1,165 @@
-import Konva from 'konva';
-import { BaseDraw, Render, Draw } from '../types';
-
-// 画布比例尺
-
-export interface RulerDrawOption {
-  size: number
-}
-
-export class RulerDraw extends BaseDraw implements Draw {
-  option: RulerDrawOption;
-
-  constructor(render: Render, layer: Konva.Layer, option: RulerDrawOption) {
-    super(render, layer);
-    this.option = option;
-    this.group.listening(false);
-  }
-
-  override draw() {
-    this.clear();
-    const stageState = this.render.getStageState();
-    // 格子大小
-    const cellSize = 20;
-    const fontSizeMax = 12;
-    const lenX = Math.ceil(this.render.toStageValue(stageState.width) / cellSize); // 列数
-    const lenY = Math.ceil(this.render.toStageValue(stageState.height) / cellSize); // 行数
-    const startX = -Math.ceil(this.render.toStageValue(stageState.x - this.option.size) / cellSize);
-    const startY = -Math.ceil(this.render.toStageValue(stageState.y - this.option.size) / cellSize);
-    const group = new Konva.Group();
-    // 比例尺 - 上
-    const groupTop = new Konva.Group({
-      x: this.render.toStageValue(-stageState.x + this.option.size),
-      y: this.render.toStageValue(-stageState.y),
-      width: this.render.toStageValue(stageState.width - this.option.size + this.render.rulerSize),
-      height: this.render.toStageValue(this.option.size)
-    });
-    // 比例尺 - 左
-    const groupLeft = new Konva.Group({
-      x: this.render.toStageValue(-stageState.x),
-      y: this.render.toStageValue(-stageState.y + this.option.size),
-      width: this.render.toStageValue(this.option.size),
-      height: this.render.toStageValue(stageState.height - this.option.size + this.render.rulerSize)
-    });
-    {
-      groupTop.add(
-        // 上
-        new Konva.Rect({
-          name: this.constructor.name,
-          x: 0,
-          y: 0,
-          width: groupTop.width(),
-          height: groupTop.height(),
-          fill: '#ddd'
-        })
-      );
-      for (let x = lenX + startX - 1; x >= startX; x--) {
-        const nx = -groupTop.x() + cellSize * x;
-        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
-        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
-        if (nx >= 0) {
-          groupTop.add(
-            new Konva.Line({
-              name: this.constructor.name,
-              points: [
-                [nx, x % 5 ? long : short],
-                [nx, this.render.toStageValue(this.option.size)]
-              ].flat(),
-              stroke: '#999',
-              strokeWidth: this.render.toStageValue(1),
-              listening: false
-            })
-          );
-          if (x % 5 === 0) {
-            let fontSize = fontSizeMax;
-            const text = new Konva.Text({
-              name: this.constructor.name,
-              y: this.render.toStageValue(this.option.size / 2 - fontSize),
-              text: (x * cellSize).toString(),
-              fontSize: this.render.toStageValue(fontSize),
-              fill: '#999',
-              align: 'center',
-              verticalAlign: 'middle',
-              lineHeight: 1.6
-            });
-            while (this.render.toStageValue(text.width()) > this.render.toStageValue(cellSize) * 4.6) {
-              fontSize -= 1;
-              text.fontSize(this.render.toStageValue(fontSize));
-              text.y(this.render.toStageValue(this.option.size / 2 - fontSize));
-            }
-            text.x(nx - text.width() / 2);
-            groupTop.add(text);
-          }
-        }
-      }
-    }
-    {
-      groupLeft.add(
-        // 左
-        new Konva.Rect({
-          name: this.constructor.name,
-          x: 0,
-          y: 0,
-          width: groupLeft.width(),
-          height: groupLeft.height(),
-          fill: '#ddd'
-        })
-      );
-      for (let y = lenY + startY - 1; y >= startY; y--) {
-        const ny = -groupLeft.y() + cellSize * y;
-        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
-        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
-        if (ny >= 0) {
-          groupLeft.add(
-            new Konva.Line({
-              name: this.constructor.name,
-              points: [
-                [y % 5 ? long : short, ny],
-                [this.render.toStageValue(this.option.size), ny]
-              ].flat(),
-              stroke: '#999',
-              strokeWidth: this.render.toStageValue(1),
-              listening: false
-            })
-          );
-          if (y % 5 === 0) {
-            let fontSize = fontSizeMax;
-            const text = new Konva.Text({
-              name: this.constructor.name,
-              x: 0,
-              y: ny,
-              text: (y * cellSize).toString(),
-              fontSize: this.render.toStageValue(fontSize),
-              fill: '#999',
-              align: 'right',
-              verticalAlign: 'bottom',
-              lineHeight: 1.6,
-              wrap: 'none'
-            });
-            while (text.width() > short * 0.8) {
-              fontSize -= 1;
-              text.fontSize(this.render.toStageValue(fontSize));
-            }
-            text.y(ny - text.height() / 2);
-            text.width(short - this.render.toStageValue(1));
-            groupLeft.add(text);
-          }
-        }
-      }
-    }
-    group.add(
-      // 角
-      new Konva.Rect({
-        name: this.constructor.name,
-        x: this.render.toStageValue(-stageState.x),
-        y: this.render.toStageValue(-stageState.y),
-        width: this.render.toStageValue(this.option.size),
-        height: this.render.toStageValue(this.option.size),
-        fill: '#ddd'
-      })
-    );
-    group.add(groupTop);
-    group.add(groupLeft);
-    this.group.add(group);
-  }
-}
+import Konva from 'konva';
+import { BaseDraw, Render, Draw } from '../types';
+
+// 画布比例尺
+
+export interface RulerDrawOption {
+  size: number
+}
+
+export class RulerDraw extends BaseDraw implements Draw {
+  option: RulerDrawOption;
+
+  constructor(render: Render, layer: Konva.Layer, option: RulerDrawOption) {
+    super(render, layer);
+    this.option = option;
+    this.group.listening(false);
+  }
+
+  override draw() {
+    this.clear();
+    const stageState = this.render.getStageState();
+    // 格子大小
+    const cellSize = 20;
+    const fontSizeMax = 12;
+    const lenX = Math.ceil(this.render.toStageValue(stageState.width) / cellSize); // 列数
+    const lenY = Math.ceil(this.render.toStageValue(stageState.height) / cellSize); // 行数
+    const startX = -Math.ceil(this.render.toStageValue(stageState.x - this.option.size) / cellSize);
+    const startY = -Math.ceil(this.render.toStageValue(stageState.y - this.option.size) / cellSize);
+    const group = new Konva.Group();
+    // 比例尺 - 上
+    const groupTop = new Konva.Group({
+      x: this.render.toStageValue(-stageState.x + this.option.size),
+      y: this.render.toStageValue(-stageState.y),
+      width: this.render.toStageValue(stageState.width - this.option.size + this.render.rulerSize),
+      height: this.render.toStageValue(this.option.size)
+    });
+    // 比例尺 - 左
+    const groupLeft = new Konva.Group({
+      x: this.render.toStageValue(-stageState.x),
+      y: this.render.toStageValue(-stageState.y + this.option.size),
+      width: this.render.toStageValue(this.option.size),
+      height: this.render.toStageValue(stageState.height - this.option.size + this.render.rulerSize)
+    });
+    {
+      groupTop.add(
+        // 上
+        new Konva.Rect({
+          name: this.constructor.name,
+          x: 0,
+          y: 0,
+          width: groupTop.width(),
+          height: groupTop.height(),
+          fill: '#ddd'
+        })
+      );
+      for (let x = lenX + startX - 1; x >= startX; x--) {
+        const nx = -groupTop.x() + cellSize * x;
+        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
+        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
+        if (nx >= 0) {
+          groupTop.add(
+            new Konva.Line({
+              name: this.constructor.name,
+              points: [
+                [nx, x % 5 ? long : short],
+                [nx, this.render.toStageValue(this.option.size)]
+              ].flat(),
+              stroke: '#999',
+              strokeWidth: this.render.toStageValue(1),
+              listening: false
+            })
+          );
+          if (x % 5 === 0) {
+            let fontSize = fontSizeMax;
+            const text = new Konva.Text({
+              name: this.constructor.name,
+              y: this.render.toStageValue(this.option.size / 2 - fontSize),
+              text: (x * cellSize).toString(),
+              fontSize: this.render.toStageValue(fontSize),
+              fill: '#999',
+              align: 'center',
+              verticalAlign: 'middle',
+              lineHeight: 1.6
+            });
+            while (this.render.toStageValue(text.width()) > this.render.toStageValue(cellSize) * 4.6) {
+              fontSize -= 1;
+              text.fontSize(this.render.toStageValue(fontSize));
+              text.y(this.render.toStageValue(this.option.size / 2 - fontSize));
+            }
+            text.x(nx - text.width() / 2);
+            groupTop.add(text);
+          }
+        }
+      }
+    }
+    {
+      groupLeft.add(
+        // 左
+        new Konva.Rect({
+          name: this.constructor.name,
+          x: 0,
+          y: 0,
+          width: groupLeft.width(),
+          height: groupLeft.height(),
+          fill: '#ddd'
+        })
+      );
+      for (let y = lenY + startY - 1; y >= startY; y--) {
+        const ny = -groupLeft.y() + cellSize * y;
+        const long = (this.render.toStageValue(this.option.size) / 5) * 4;
+        const short = (this.render.toStageValue(this.option.size) / 5) * 3;
+        if (ny >= 0) {
+          groupLeft.add(
+            new Konva.Line({
+              name: this.constructor.name,
+              points: [
+                [y % 5 ? long : short, ny],
+                [this.render.toStageValue(this.option.size), ny]
+              ].flat(),
+              stroke: '#999',
+              strokeWidth: this.render.toStageValue(1),
+              listening: false
+            })
+          );
+          if (y % 5 === 0) {
+            let fontSize = fontSizeMax;
+            const text = new Konva.Text({
+              name: this.constructor.name,
+              x: 0,
+              y: ny,
+              text: (y * cellSize).toString(),
+              fontSize: this.render.toStageValue(fontSize),
+              fill: '#999',
+              align: 'right',
+              verticalAlign: 'bottom',
+              lineHeight: 1.6,
+              wrap: 'none'
+            });
+            while (text.width() > short * 0.8) {
+              fontSize -= 1;
+              text.fontSize(this.render.toStageValue(fontSize));
+            }
+            text.y(ny - text.height() / 2);
+            text.width(short - this.render.toStageValue(1));
+            groupLeft.add(text);
+          }
+        }
+      }
+    }
+    group.add(
+      // 角
+      new Konva.Rect({
+        name: this.constructor.name,
+        x: this.render.toStageValue(-stageState.x),
+        y: this.render.toStageValue(-stageState.y),
+        width: this.render.toStageValue(this.option.size),
+        height: this.render.toStageValue(this.option.size),
+        fill: '#ddd'
+      })
+    );
+    group.add(groupTop);
+    group.add(groupLeft);
+    this.group.add(group);
+  }
+}

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

@@ -21,6 +21,7 @@ export class DragOutsideHandlers implements Handler {
       },
       drop: async (e: GlobalEventHandlersEventMap['drop']) => {
         const componentItem = JSON.parse(e.dataTransfer?.getData('componentItem') || '{}');
+        const defaultValues = JSON.parse(e.dataTransfer?.getData('defaultValues') || '{}');
         const src = e.dataTransfer?.getData('src');
         const componentType = e.dataTransfer?.getData('componentType'); // 组件类型
         const showPoints = e.dataTransfer?.getData('showPoints'); // 是否显示连接点
@@ -56,6 +57,9 @@ export class DragOutsideHandlers implements Handler {
           group.setAttrs({ x, y });
           // 更新坐标记录
           this.render.setAssetSettings(group, this.render.getAssetSettings(group), false);
+          if (Object.keys(defaultValues).length > 0) { // 设置默认值
+            this.render.setAssetSettings(group, { ...this.render.getAssetSettings(group), ...defaultValues }, false);
+          }
           // 设置连接点
           this.render.componentFactory.createComponentLinkPoints({ group, points, showPoints });
           // 组件鼠标移入移出事件

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

@@ -302,6 +302,7 @@ export class SelectionHandlers implements Handler {
           }
           this.render.emit('asset-position-change', groups);
           this.render.emit('asset-rotation-change', groups);
+          this.render.emit('asset-size-change', groups);
         }
         this.render.redraw([GraphDraw.name, LinkDraw.name, PreviewDraw.name]);
       },

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

@@ -540,11 +540,8 @@ export class Render {
 
   // 获取素材设置
   getAssetSettings(asset?: Konva.Node): AssetSettings {
-    if (!asset) {
-      return { ...Render.AssetSettingsDefault };
-    }
-    const attrs = asset.attrs;
-    const base = attrs.assetSettings ?? { ...Render.AssetSettingsDefault };
+    const attrs = asset?.attrs || {};
+    const base = attrs?.assetSettings ?? { ...Render.AssetSettingsDefault };
     return {
       // 特定
       ...base,
@@ -554,7 +551,6 @@ export class Render {
       fontSize: base.fontSize || this.getPageSettings().fontSize,
       textFill: base.textFill || this.getPageSettings().textFill,
       // 绘制图形，默认不填充
-      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)),

package/src/aldehyde/draw-canvas-edit/components/render/tools/component-factory.ts

@@ -133,17 +133,16 @@ export class ComponentFactory {
   async createTypedComponent(options: CreateImageComponentOptions) {
     const { src, type, componentType } = options;
     let comGroup: { group: Konva.Group; points: AssetInfoPoint[] };
-    let group: Konva.Group;
-    let points: AssetInfoPoint[];
     switch (componentType) {
       case "workstation": // 工位
-        return this.workstationComponent.create(src, type);
+        comGroup = await this.workstationComponent.create(src, type);
+        break;
       default:
         comGroup = await this.createImageComponent({ src, type, componentType });
-        group = comGroup.group;
-        points = comGroup.points;
         break;
     }
+    const group: Konva.Group = comGroup.group;
+    const points: AssetInfoPoint[] = comGroup.points;
     return { group, points };
   }
 

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

@@ -30,6 +30,7 @@ export type RenderEvents = {
   ['link-selection-change']: Konva.Line | undefined;
   ['asset-position-change']: Konva.Node[];
   ['asset-rotation-change']: Konva.Node[];
+  ['asset-size-change']: Konva.Node[];
 }
 
 export interface Handler {

package/src/aldehyde/draw-canvas-edit/components/setting-form/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { Form as AntdForm, Collapse, Row, Col } from "antd";
 import _ from "lodash";
 import FormItemGroup from "../../../form/form-Item-group";
@@ -124,6 +124,7 @@ const Index = (props: Props) => {
     const [form] = AntdForm.useForm();
     const [formConfigs, setFormConfigs] = useState<{ [key: string]: any }>([]);
     const { translate } = useLocale();
+    const isValChangeRef = useRef<boolean>(false);
 
     // 自定义表单项
     const customFormItem = (items: { [key: string]: any }[], layout?: "vertical" | "horizontal") => {
@@ -234,6 +235,7 @@ const Index = (props: Props) => {
 
     // 更新数据
     const onValuesChange = (val: { [key: string]: any }) => {
+        isValChangeRef.current = true;
         const temVal = val;
         Object.keys(val).forEach((key) => {  // 使用公共表单组件，转换指定类型值
             const extControlType = formConfigs.find((item: any) => item.id === key)?.extControlType;
@@ -261,7 +263,6 @@ const Index = (props: Props) => {
             background = null;
             backgroundImg = null;
         }
-        form.setFieldsValue({ background, backgroundImg, ...temVal });
         // 默认画布配置
         onPageSettingsChange({ ...pageSettings, background, backgroundImg, ...temVal });
     }
@@ -284,9 +285,10 @@ const Index = (props: Props) => {
 
     // 表单数据实时回显更新
     useEffect(() => {
-        if (formConfigs?.length && formData) {
+        if (formConfigs?.length && formData && !isValChangeRef.current) {
             formSetFieldsValue();
         }
+        isValChangeRef.current = false;
     }, [formData, formConfigs]);
 
     return <AntdForm

package/src/aldehyde/draw-canvas-edit/index.tsx

@@ -81,7 +81,7 @@ const Index = (props: Props) => {
         render.on('selection-change', (nodes: Konva.Node[]) => { // 监听选中组件
             assetCurrentRef.current = nodes.length === 1 ? nodes[0] : undefined;
             setAssetCurrent(assetCurrentRef.current);
-            setAssetSettings(nodes.length === 1 ? render.getAssetSettings(nodes[0]) : undefined);
+            setAssetSettings(assetCurrentRef.current ? render.getAssetSettings(assetCurrentRef.current) : undefined);
         });
         render.on('link-selection-change', (link?: Konva.Line) => { // 监听选中连线
             setLinkCurrent(link);
@@ -101,6 +101,13 @@ const Index = (props: Props) => {
                 setAssetSettings(s => s ? { ...s, rotation: +rotation.toFixed(1) } : undefined);
             }
         });
+        render.on('asset-size-change', (nodes: Konva.Node[]) => { // 监听组件宽高变化
+            const node = nodes.find(n => n.id() === assetCurrentRef.current?.id());
+            if (node) {
+                const settings = render.getAssetSettings(node);
+                setAssetSettings(s => s ? { ...s, width: settings.width, height: settings.height } : undefined);
+            }
+        });
         render.on('texting-change', setTexting); // 监听插入文本状态
         render.on('graph-type-change', setGraphType); // 监听插入基础图形类型
     }, []);
@@ -135,8 +142,10 @@ const Index = (props: Props) => {
         if (!(assetCurrent && renderRef.current)) {
             return;
         }
-        setAssetSettings({ ...assetSettings, ...val });
-        renderRef.current.setAssetSettings(assetCurrent, { ...assetSettings, ...val }, true);
+        setAssetSettings(oldVal => {
+            renderRef.current.setAssetSettings(assetCurrent, { ...oldVal, ...val }, true);
+            return { ...oldVal, ...val };
+        });
     }
 
     // 更新连线配置