aldehyde 0.2.474 → 0.2.475

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, ImageType, AssetType, LinkDrawPoint } from '../types';
+import { Handler, AssetInfoPoint, AssetType, LinkDrawPoint } from '../types';
 import { RefLineDraw, PreviewDraw } from '../draws';
 
 export class DragOutsideHandlers implements Handler {
@@ -25,6 +25,7 @@ export class DragOutsideHandlers implements Handler {
       },
       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') ?? '[]';
@@ -36,37 +37,34 @@ export class DragOutsideHandlers implements Handler {
         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 === ImageType.svg
-                ? `loadSvg`
-                : type === ImageType.gif
-                  ? 'loadGif'
-                  : type === 'json'
-                    ? 'loadJson'
-                    : 'loadImg'
-            ](src).then((target: Konva.Image | Konva.Group) => {
+            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) {
+              if (target instanceof Konva.Image) { // 图片素材
                 group = new Konva.Group({
                   id: nanoid(),
-                  width: target.width(),
-                  height: target.height(),
+                  width,
+                  height,
                   name: 'asset',
                   assetType: AssetType.Image,
                   draggable: true,
+                  componentType,
                   imageType:
                     type !== 'json'
-                      ? type === ImageType.svg
-                        ? ImageType.svg
-                        : type === ImageType.gif
-                          ? ImageType.gif
-                          : ImageType.other
+                      ? (["svg", "gif", "other"].includes(type) ? type : "other")
                       : undefined
                 });
                 this.render.setAssetSettings(group, this.render.getAssetSettings(), false);
@@ -77,8 +75,7 @@ export class DragOutsideHandlers implements Handler {
                   { x: group.width() / 2, y: 0, direction: 'top' }, // 上
                   { x: group.width() / 2, y: group.height(), direction: 'bottom' } // 下
                 ];
-              } else {
-                // json 素材
+              } else {// json 素材
                 target.id(nanoid());
                 target.setAttrs({
                   name: 'asset',
@@ -89,7 +86,7 @@ export class DragOutsideHandlers implements Handler {
                 this.render.linkTool.groupIdCover(group);
               }
               target.setAttrs({ x: 0, y: 0 } as any);
-              this.render.layer.add(group);
+              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 });

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

@@ -82,6 +82,30 @@ export class SelectionHandlers implements Handler {
    * @param angle 旋转角度
    * @returns
    */
+
+  // 拖动时更新位置
+  private updateManualPointsByDrag(rect: { x: number; y: number }, transformerPos?: Konva.Vector2d, isAttract = false) {
+    const groups = this.render.transformer.nodes();
+    const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
+    const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
+    for (const pair of pairs) {
+      const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
+      const toGroup = groups.find((o) => o.id() === pair.to.groupId);
+      if (fromGroup && toGroup) {
+        if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
+          let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
+          const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
+          if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
+            const offsetX = this.render.toStageValue((isAttract ? transformerPos.x : rect.x) - this.transformerMousedownPos.x);
+            const offsetY = this.render.toStageValue((isAttract ? transformerPos.y : rect.y) - this.transformerMousedownPos.y);
+            manualPoints = manualPointsBefore.map((o: ManualPoint) => ({ x: o.x + offsetX, y: o.y + offsetY }));
+            fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
+          }
+        }
+      }
+    }
+  }
+
   rotatePoint(x: number, y: number, centerX: number, centerY: number, angle: number) {
     const radians = (angle * Math.PI) / 180; // 将角度转换为弧度
     // 计算旋转后的坐标
@@ -274,38 +298,22 @@ export class SelectionHandlers implements Handler {
       },
       dragmove: () => { // 拖动
         const rect = this.render.transformer.findOne('.back')!.getClientRect();
-        const { pos: transformerPos, isAttract } = this.render.attractTool.attractTransformer(rect);
-        if (isAttract) {  // 磁吸偏移
-          this.selectingNodesPositionByOffset({
-            x: this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
-            y: this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
-          });
-        }
-        const groups = this.render.transformer.nodes();  // 拐点也需要移动
-        const points = groups.reduce((ps, group) => ps.concat(Array.isArray(group.getAttr('points')) ? group.getAttr('points') : []), [] as LinkDrawPoint[]);
-        const pairs = points.reduce((ps, point) => ps.concat(point.pairs ? point.pairs.filter((o) => !o.disabled) : []), [] as LinkDrawPair[]);
-        for (const pair of pairs) {
-          const fromGroup = groups.find((o) => o.id() === pair.from.groupId);
-          const toGroup = groups.find((o) => o.id() === pair.to.groupId);
-          if (fromGroup && toGroup) {  // 必须成对移动才记录
-            if (fromGroup.attrs.manualPointsMap && fromGroup.attrs.manualPointsMapBefore) {
-              let manualPoints = fromGroup.attrs.manualPointsMap[pair.id];
-              const manualPointsBefore = fromGroup.attrs.manualPointsMapBefore[pair.id];
-              if (Array.isArray(manualPoints) && Array.isArray(manualPointsBefore)) {
-                manualPoints = isAttract
-                  ? manualPointsBefore.map((o: ManualPoint) => ({
-                    x: o.x + this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
-                    y: o.y + this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
-                  }))
-                  : manualPointsBefore.map((o: ManualPoint) => ({
-                    x: o.x + this.render.toStageValue(rect.x - this.transformerMousedownPos.x),
-                    y: o.y + this.render.toStageValue(rect.y - this.transformerMousedownPos.y)
-                  }));
-                fromGroup.setAttr('manualPointsMap', { ...fromGroup.attrs.manualPointsMap, [pair.id]: manualPoints });
-              }
-            }
+        // 磁吸控制：关闭时跳过磁吸逻辑，让 transformer 自由拖动
+        if (this.render.showAttract) {
+          const { pos: transformerPos, isAttract } = this.render.attractTool.attractTransformer(rect);
+          if (isAttract) {  // 磁吸偏移
+            this.selectingNodesPositionByOffset({
+              x: this.render.toStageValue(transformerPos.x - this.transformerMousedownPos.x),
+              y: this.render.toStageValue(transformerPos.y - this.transformerMousedownPos.y)
+            });
           }
+          // 拐点磁吸偏移
+          this.updateManualPointsByDrag(rect, transformerPos, isAttract);
+        } else {
+          // 拐点跟随拖动偏移
+          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);
         }

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

@@ -73,6 +73,8 @@ export class Render {
   historyIndex = -1;
   graphType: GraphType | undefined = undefined;  // 画图类型
   texting = false; // 添加文字中
+  showGrid = true; // 显示网格
+  showAttract = true; // 显示磁吸
 
   // 事件发射器（替代 mitt）
   private emitter = new SimpleEventEmitter();
@@ -100,11 +102,9 @@ export class Render {
     this.groupTransformer.add(this.transformer);
     this.groupTransformer.add(this.selectRect);
     this.layerCover.add(this.groupTransformer);
-    // 附加工具
-    if (!this.config.readonly && this.config.showBg) {
-      this.draws[BgDraw.name] = new BgDraw(this, this.layerFloor, {
-        size: this.bgSize
-      });
+
+    if (this.config.showBg) { // 背景
+      this.draws[BgDraw.name] = new BgDraw(this, this.layerFloor, { size: this.bgSize, showGrid: this.showGrid, readonly: this.config.readonly });
     }
 
     this.draws[LinkDraw.name] = new LinkDraw(this, this.layerCover, {
@@ -465,6 +465,17 @@ export class Render {
     document.body.style.cursor = this.texting ? 'text' : 'default';
   }
 
+  // 更改网格显示
+  changeShowGrid(show: boolean) {
+    this.showGrid = show;
+    (this.draws[BgDraw.name] as BgDraw)?.updateOption({ showGrid: show });
+  }
+
+  // 更改磁吸显示
+  changeShowAttract(show: boolean) {
+    this.showAttract = show;
+  }
+
   // 页面设置 默认值
   static PageSettingsDefault: PageSettings = {
     // 画布默认尺寸
@@ -489,6 +500,7 @@ export class Render {
   // 更新页面设置
   setPageSettings(settings: PageSettings, update = false) {
     this.stage.setAttr('pageSettings', settings);
+    this.emit('page-settings-change', settings);
     // 更新背景
     this.updateBackground();
     if (update) {
@@ -504,10 +516,6 @@ export class Render {
 
   // 更新背景
   updateBackground() {
-    const background = this.getBackground();
-    if (background) {
-      background.fill(this.getPageSettings().background ?? 'transparent');
-    }
     this.draws[BgDraw.name]?.draw();
     this.draws[GraphDraw.name]?.draw();
     this.draws[LinkDraw.name]?.draw();

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

@@ -13,6 +13,7 @@ export class PositionTool {
 
   // 自适应大小
   positionFit() {
+    const { pageWidth, pageHeight } = this.render.getPageSettings();
     const children = [
       ...this.render.layer.getChildren(),
       ...this.render.layerCover.find('.link-line')
@@ -21,9 +22,7 @@ export class PositionTool {
     let minX = Infinity,
       maxX = -Infinity,
       minY = Infinity,
-      maxY = -Infinity,
-      minStartX = Infinity,
-      minStartY = Infinity;
+      maxY = -Infinity;
 
     const stageState = this.render.getStageState();
     for (const node of children) {
@@ -34,64 +33,40 @@ export class PositionTool {
           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;
-        }
-
-        if (x < minStartX) {
-          minStartX = x;
-        }
-        if (y < minStartY) {
-          minStartY = y;
-        }
+        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 [x, y] = [points[i], points[i + 1]];
-          if (x < minX) {
-            minX = x - 1;
-          }
-          if (x > maxX) {
-            maxX = x + 1;
-          }
-          if (y < minY) {
-            minY = y - 1;
-          }
-          if (y > maxY) {
-            maxY = y + 1;
-          }
-          if (x < minStartX) {
-            minStartX = x - 1;
-          }
-          if (y < minStartY) {
-            minStartY = y - 1;
-          }
+          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;
         }
       }
     }
 
-    minX === Infinity && (minX = (this.render.stage.width() - this.render.rulerSize) / 2);
-    maxX === -Infinity && (maxX = minX);
-    minY === Infinity && (minY = (this.render.stage.height() - this.render.rulerSize) / 2);
-    maxY === -Infinity && (maxY = minY);
-    minStartX === Infinity && minX;
-    minStartY === Infinity && minY;
+    // 把画布区域也纳入计算范围（画布从 (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 assetSize = {
+    const contentSize = {
       width: maxX - minX,
       height: maxY - minY
     };
-    const assetRate = assetSize.width / assetSize.height;
+    const contentRate = contentSize.width / contentSize.height;
 
     const viewSize = {
       width: this.render.stage.width() - (this.render.config.readonly ? 0 : this.render.rulerSize),
@@ -100,29 +75,36 @@ export class PositionTool {
     const viewRate = viewSize.width / viewSize.height;
     let scale = 1;
 
-    if (viewRate > assetRate) {
-      scale = viewSize.height / assetSize.height;
-    } else if (viewRate < assetRate) {
-      scale = viewSize.width / assetSize.width;
+    // 设置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;
 
-    if (assetSize.width <= viewSize.width && assetSize.height <= viewSize.height) {
-      scale = 1;
-    }
+    // 设置缩放比例最大为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 - assetSize.width * scale) / 2,
+          (viewSize.width - contentSize.width * scale) / 2,
         y:
           (this.render.config.readonly ? 0 : this.render.rulerSize) -
           minY * scale +
-          (viewSize.height - assetSize.height * scale) / 2
+          (viewSize.height - contentSize.height * scale) / 2
       }
     });
 

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

@@ -247,7 +247,11 @@ export interface PageSettings {
   pageWidth: number;
   pageHeight: number;
   // 样式设置
-  background: string;
+  background?: string;
+  backgroundImg?: { // 背景图
+    src: string;
+    code: string;
+  };
   stroke: string;
   strokeWidth: number;
   fill: string;

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

@@ -0,0 +1,118 @@
+import React, { useEffect, useState } from "react";
+import { Upload as AntdUpLoad, UploadFile, message } from "antd";
+import { RcFile } from "antd/es/upload";
+import { PlusOutlined } from "@ant-design/icons";
+import { HydrocarbonService, Superagent, ProgramConfig } from "../../../../index";
+import { fileUpload } from "../../constant";
+import { useLocale } from "../../../../locale/useLocale";
+
+const { sourceId, serverKey } = fileUpload;
+
+// 本地文件上传，处理url
+const handleImgUrl = (basePath: string) => {
+    if (basePath.startsWith("http")) {
+        return basePath;
+    }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        basePath
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode(serverKey)}`;
+    return url;
+}
+
+const fileInfo = {
+    uid: '-1',
+    name: 'image.png',
+    status: 'done',
+};
+
+export interface CommonFilePath {
+    fileName?: string;
+    contentType?: string;//文件类型
+    path?: string;
+    iconPath?: string;
+    valid?: string;
+    baseType?: string;
+    basePath?: string;
+};
+
+
+export interface UploadProps {
+    accept?: string;
+    size?: number;
+    onChange?: (data: { src: string, code: string }) => void;
+    value?: { src: string, code: string };
+    recordCode?: string; // 当前画面关联数据code,用于图片命名区分
+}
+
+const ImageUpload: React.FC<UploadProps> = (props) => {
+    const { onChange, accept, size, recordCode, value } = props;
+    const [fileList, setFileList] = useState([]);
+    const [imgCode, setImgCode] = useState<string>(); // 本地图片code
+    const { translate } = useLocale();
+
+    useEffect(() => {
+        setFileList(value?.src ? [{ ...fileInfo, url: handleImgUrl(value?.src) }] : []);
+        setImgCode(value?.code);
+    }, [value]);
+
+    const beforeUpload = async (file: RcFile) => {
+        if (size && file.size > size * 1024 * 1024) {
+            message.warning(translate("${文件大小不能超过}") + `${size}M`);
+            return false;
+        }
+        return true;
+    }
+
+    const handleChange = async (info) => {
+        if (info.file.status == "done") {
+            const fileKey = info.file.response.fileKey;
+            const fileName = info.file.name;
+            const data = { valid: "new", fileKey, fileName };
+            const result = { 描述: `${recordCode || ""}-${fileName}`, 文件: JSON.stringify(data) };
+            const { code } = await HydrocarbonService.postMstrucDtmplData(serverKey, sourceId, result, message);
+            setImgCode(code);
+            const imgData = await HydrocarbonService.requestMstrucDtmplData(serverKey, sourceId, code, null);
+            const basePath = JSON.parse(imgData.fieldMap["文件"] || "{}").base?.path;
+            if (basePath) {
+                const url = handleImgUrl(basePath);
+                setFileList([{ ...info.file, url }]);
+                // onChange?.(url);
+                onChange?.({ src: url, code });
+            } else {
+                setFileList([...info.fileList]);
+            }
+        } else {
+            setFileList([...info.fileList]);
+        }
+    };
+
+    const handleDelete = async () => {
+        await HydrocarbonService.deleteByCode(serverKey, sourceId, [imgCode]);
+        setFileList([]);
+        onChange?.(null);
+    };
+
+    return (
+        <AntdUpLoad
+            action={(file) => HydrocarbonService.postFileAction(serverKey, file)}
+            headers={Superagent.getHeaderObj(serverKey)}
+            name={'file'}
+            beforeUpload={beforeUpload}
+            listType={'picture-card'}
+            fileList={fileList?.length ? fileList as Array<UploadFile> : undefined}
+            accept={accept}
+            onChange={handleChange}
+            onRemove={handleDelete}
+            onPreview={() => window.open(fileList[0].url)}
+        >
+            {fileList.length > 0 ? null : <div className={'upload-btn'}>
+                <PlusOutlined />
+                <div style={{ marginTop: 8 }}>{translate("${上传图片}")}</div>
+            </div>}
+        </AntdUpLoad>
+    )
+};
+
+export default ImageUpload;