aldehyde 0.2.480 → 0.2.481

package/src/aldehyde/controls/2dEditor/components/image.tsx

@@ -1,100 +1,100 @@
-import React, { useMemo, Fragment, useRef, useEffect } from 'react';
-import { Image as KonvaImage, Transformer } from 'react-konva';
-import useImage from 'use-image';
-import ProgramConfig from "../../../units";
-import { ImageNode } from "./data";
-
-const handleImgUrl = (val: string) => {
-    let src = val;
-    if (src.startsWith("http")) {
-        return src;
-    }
-    if (src.includes("@R@")) {
-        const text = src.split("@R@")[1];
-        if (text.startsWith("http")) {
-            return text;
-        }
-        src = text;
-    }
-    try {
-        src = JSON.parse(src || "{}").base?.path;
-    } catch { }
-    const url = encodeURI(ProgramConfig.joinPath(
-        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
-        src
-    )) +
-        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
-    return url;
-}
-
-interface Props {
-    node: ImageNode; // 当前组件信息
-    onDragMove?: (e, id: string) => void;
-    isSelected?: boolean; // 是否选中
-    onSelect?: () => void; // 设置选中
-    onChange?: (node: ImageNode) => void; // 更新组件配置
-    isDesignMode?: boolean; // 是否编辑模式
-}
-
-const Index = (props: Props) => {
-    const { node, onDragMove, isSelected, onSelect, onChange, isDesignMode = true } = props;
-    const { position, size, draggable = true, selected = true, rotation } = node;
-    const nodeRef = useRef(null);
-    const trRef = useRef(null);
-
-    const imgUrl = useMemo(() => {
-        if (!node?.url) return "";
-        return handleImgUrl(node.url);
-    }, [node])
-    const [image] = useImage(imgUrl); // image渲染在画布上需要使用
-
-    useEffect(() => {
-        trRef.current.nodes(isDesignMode && selected && isSelected ? [nodeRef.current] : []); // 选中设置可拖拽size 
-    }, [isSelected]);
-
-    // 尺寸拖拽、旋转后执行
-    const onTransformEnd = () => {
-        const nodeCur = nodeRef.current;
-        const scaleX = nodeCur.scaleX();
-        const scaleY = nodeCur.scaleY();
-        const rotation = nodeCur.rotation();
-        nodeCur.scaleX(1);
-        nodeCur.scaleY(1);
-        onChange({
-            ...node,
-            position: { x: nodeCur.x(), y: nodeCur.y() },
-            size: { width: Math.max(5, nodeCur.width() * scaleX), height: Math.max(nodeCur.height() * scaleY) },
-            rotation
-        });
-    }
-
-    return <Fragment>
-        <KonvaImage
-            id={node.id}
-            ref={nodeRef}
-            x={position.x}
-            y={position.y}
-            width={size?.width || 100}
-            height={size?.height || 100}
-            image={image}
-            draggable={isDesignMode && draggable}
-            onDragMove={(e) => onDragMove?.(e, node.id)}
-            onClick={onSelect}
-            onTransformEnd={onTransformEnd}
-            rotation={rotation || 0}
-        />
-        <Transformer
-            ref={trRef}
-            flipEnabled={false}
-            boundBoxFunc={(oldBox, newBox) => {
-                // limit resize
-                if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
-                    return oldBox;
-                }
-                return newBox;
-            }}
-        />
-    </Fragment>;
-};
-
+import React, { useMemo, Fragment, useRef, useEffect } from 'react';
+import { Image as KonvaImage, Transformer } from 'react-konva';
+import useImage from 'use-image';
+import ProgramConfig from "../../../units";
+import { ImageNode } from "./data";
+
+const handleImgUrl = (val: string) => {
+    let src = val;
+    if (src.startsWith("http")) {
+        return src;
+    }
+    if (src.includes("@R@")) {
+        const text = src.split("@R@")[1];
+        if (text.startsWith("http")) {
+            return text;
+        }
+        src = text;
+    }
+    try {
+        src = JSON.parse(src || "{}").base?.path;
+    } catch { }
+    const url = encodeURI(ProgramConfig.joinPath(
+        ProgramConfig.joinPath(ProgramConfig.api(), "/v3/files"),
+        src
+    )) +
+        `?@token=${ProgramConfig.hydrocarbonToken()}&@programToken=${ProgramConfig.programCode()}&@applicationToken=${ProgramConfig.applicationCode()}`;
+    return url;
+}
+
+interface Props {
+    node: ImageNode; // 当前组件信息
+    onDragMove?: (e, id: string) => void;
+    isSelected?: boolean; // 是否选中
+    onSelect?: () => void; // 设置选中
+    onChange?: (node: ImageNode) => void; // 更新组件配置
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+const Index = (props: Props) => {
+    const { node, onDragMove, isSelected, onSelect, onChange, isDesignMode = true } = props;
+    const { position, size, draggable = true, selected = true, rotation } = node;
+    const nodeRef = useRef(null);
+    const trRef = useRef(null);
+
+    const imgUrl = useMemo(() => {
+        if (!node?.url) return "";
+        return handleImgUrl(node.url);
+    }, [node])
+    const [image] = useImage(imgUrl); // image渲染在画布上需要使用
+
+    useEffect(() => {
+        trRef.current.nodes(isDesignMode && selected && isSelected ? [nodeRef.current] : []); // 选中设置可拖拽size 
+    }, [isSelected]);
+
+    // 尺寸拖拽、旋转后执行
+    const onTransformEnd = () => {
+        const nodeCur = nodeRef.current;
+        const scaleX = nodeCur.scaleX();
+        const scaleY = nodeCur.scaleY();
+        const rotation = nodeCur.rotation();
+        nodeCur.scaleX(1);
+        nodeCur.scaleY(1);
+        onChange({
+            ...node,
+            position: { x: nodeCur.x(), y: nodeCur.y() },
+            size: { width: Math.max(5, nodeCur.width() * scaleX), height: Math.max(nodeCur.height() * scaleY) },
+            rotation
+        });
+    }
+
+    return <Fragment>
+        <KonvaImage
+            id={node.id}
+            ref={nodeRef}
+            x={position.x}
+            y={position.y}
+            width={size?.width || 100}
+            height={size?.height || 100}
+            image={image}
+            draggable={isDesignMode && draggable}
+            onDragMove={(e) => onDragMove?.(e, node.id)}
+            onClick={onSelect}
+            onTransformEnd={onTransformEnd}
+            rotation={rotation || 0}
+        />
+        <Transformer
+            ref={trRef}
+            flipEnabled={false}
+            boundBoxFunc={(oldBox, newBox) => {
+                // limit resize
+                if (Math.abs(newBox.width) < 5 || Math.abs(newBox.height) < 5) {
+                    return oldBox;
+                }
+                return newBox;
+            }}
+        />
+    </Fragment>;
+};
+
 export default Index;

package/src/aldehyde/controls/2dEditor/components/line.tsx

@@ -1,74 +1,74 @@
-import React, { useCallback } from 'react';
-import { Line, Path } from 'react-konva';
-import { theme } from "antd";
-import { LineProps } from "./data";
-
-const { useToken } = theme;
-
-interface Props {
-    node: LineProps; // 当前组件信息
-    getNodePosition: (val: string) => { x: number, y: number }; // 获取关联组件坐标
-    lineType: "line" | "smooth"; // 连线类型 折线/曲线,默认折线
-    style?: { color?: string; }
-}
-
-const Index = (props: Props) => {
-    const { node, getNodePosition, lineType = "line", style } = props;
-    const { sourceId, targetId } = node || {};
-    const { token } = useToken();
-
-    if (!sourceId || !targetId) return null;
-    const sourcePos = getNodePosition(sourceId);
-    const targetPos = getNodePosition(targetId);
-    if (!sourcePos || !targetPos) return null;
-
-    // 计算折线
-    const getPolylinePoints = useCallback(() => {
-        const x = sourcePos.x;
-        const y = sourcePos.y;
-        const endX = targetPos.x;
-        const endY = targetPos.y;
-        const distX = endX - x;
-        const midX = Math.abs(distX) < 80 ? x + distX / 2 : x + (distX > 0 ? 80 : -80);
-        return [x, y, midX, y, midX, endY, endX, endY];
-    }, [sourcePos, targetPos]);
-
-    // 计算曲线
-    const getSmoothPathData = useCallback(() => {
-        const x1 = sourcePos.x;
-        const y1 = sourcePos.y
-        const x2 = targetPos.x;
-        const y2 = targetPos.y;
-        const deltaX = Math.abs(x2 - x1);
-        const cp1x = x1 + Math.max(50, deltaX * 0.5);
-        const cp1y = y1;
-        const cp2x = x2 - 20;
-        const cp2y = y2;
-        return `M ${x1} ${y1} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${x2} ${y2}`;
-    }, [sourcePos, targetPos]);
-
-    return (
-        lineType === "line" ?
-            <Line
-                key={node.id}
-                points={getPolylinePoints()}
-                stroke={style?.color || token.colorPrimary}
-                strokeWidth={2}
-                lineCap="round"
-                lineJoin="round"
-                listening={false}
-            // dash={[5, 5]}
-            /> : <Path
-                key={node.id}
-                data={getSmoothPathData()}
-                stroke={style?.color || token.colorPrimary}
-                strokeWidth={2}
-                lineCap="round"
-                lineJoin="round"
-                listening={false}
-            // dash={[5, 5]}
-            />
-    );
-};
-
+import React, { useCallback } from 'react';
+import { Line, Path } from 'react-konva';
+import { theme } from "antd";
+import { LineProps } from "./data";
+
+const { useToken } = theme;
+
+interface Props {
+    node: LineProps; // 当前组件信息
+    getNodePosition: (val: string) => { x: number, y: number }; // 获取关联组件坐标
+    lineType: "line" | "smooth"; // 连线类型 折线/曲线,默认折线
+    style?: { color?: string; }
+}
+
+const Index = (props: Props) => {
+    const { node, getNodePosition, lineType = "line", style } = props;
+    const { sourceId, targetId } = node || {};
+    const { token } = useToken();
+
+    if (!sourceId || !targetId) return null;
+    const sourcePos = getNodePosition(sourceId);
+    const targetPos = getNodePosition(targetId);
+    if (!sourcePos || !targetPos) return null;
+
+    // 计算折线
+    const getPolylinePoints = useCallback(() => {
+        const x = sourcePos.x;
+        const y = sourcePos.y;
+        const endX = targetPos.x;
+        const endY = targetPos.y;
+        const distX = endX - x;
+        const midX = Math.abs(distX) < 80 ? x + distX / 2 : x + (distX > 0 ? 80 : -80);
+        return [x, y, midX, y, midX, endY, endX, endY];
+    }, [sourcePos, targetPos]);
+
+    // 计算曲线
+    const getSmoothPathData = useCallback(() => {
+        const x1 = sourcePos.x;
+        const y1 = sourcePos.y
+        const x2 = targetPos.x;
+        const y2 = targetPos.y;
+        const deltaX = Math.abs(x2 - x1);
+        const cp1x = x1 + Math.max(50, deltaX * 0.5);
+        const cp1y = y1;
+        const cp2x = x2 - 20;
+        const cp2y = y2;
+        return `M ${x1} ${y1} C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${x2} ${y2}`;
+    }, [sourcePos, targetPos]);
+
+    return (
+        lineType === "line" ?
+            <Line
+                key={node.id}
+                points={getPolylinePoints()}
+                stroke={style?.color || token.colorPrimary}
+                strokeWidth={2}
+                lineCap="round"
+                lineJoin="round"
+                listening={false}
+            // dash={[5, 5]}
+            /> : <Path
+                key={node.id}
+                data={getSmoothPathData()}
+                stroke={style?.color || token.colorPrimary}
+                strokeWidth={2}
+                lineCap="round"
+                lineJoin="round"
+                listening={false}
+            // dash={[5, 5]}
+            />
+    );
+};
+
 export default Index;

package/src/aldehyde/controls/action/index.css

@@ -1,9 +1,9 @@
-
-.collapse .ant-card-body {
-    padding:0px
-}
-
-.ant-card-head-title button{
-    font-size: 16px;
-    padding:0px;
+
+.collapse .ant-card-body {
+    padding:0px
+}
+
+.ant-card-head-title button{
+    font-size: 16px;
+    padding:0px;
 }