aldehyde 0.2.427 → 0.2.429

package/lib/controls/2dEditor/2dEditor/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { CommonNode } from "../components/data";
+import "./index.less";
+/**
+ * 主组件
+ */
+interface Props {
+    defNodes?: CommonNode[];
+    dbClickAddNode?: boolean;
+    onAddNode?: (nodes: CommonNode[]) => void;
+}
+declare const Index: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
+export default Index;
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/2dEditor/2dEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/2dEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAOlH,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,cAAc,CAAC;AAItB;;GAEG;AAEH,UAAU,KAAK;IACX,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;CAC7C;AAED,QAAA,MAAM,KAAK,uEAqPT,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/lib/controls/2dEditor/2dEditor/index.js

@@ -0,0 +1,201 @@
+import React, { useState, useCallback, useMemo, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
+import { Stage, Layer } from 'react-konva';
+import { theme } from "antd";
+import CardComponent from "../components/card";
+import LineComponent from "../components/line";
+import HotspotComponent from "../components/hotspot";
+import ImageComponent from "../components/image";
+import "./index.less";
+const { useToken } = theme;
+const Index = forwardRef((props, ref) => {
+    const { defNodes, dbClickAddNode = false, onAddNode } = props;
+    const [nodesMap, setNodesMap] = useState(); // 组件Map
+    const [selectedId, setSelectedId] = useState(); // 选中组件
+    const [scale, setScale] = useState(1); // 画布缩放比例
+    const [stagePos, setStagePos] = useState({ x: 0, y: 0 }); // 画布移动
+    const [stageSize, setStageSize] = useState({ width: 0, height: 0 }); // 画布尺寸
+    const stageRef = useRef(null);
+    const containerRef = useRef(null);
+    const { token } = useToken();
+    // 获取所有组件
+    const getAllNodes = () => {
+        if (!nodesMap) {
+            return [];
+        }
+        const nodesArr = Array.from(nodesMap.values()).sort((a, b) => a.zIndex - b.zIndex);
+        return nodesArr;
+    };
+    // 删除组件
+    const deleteNode = (node) => {
+        if (!nodesMap) {
+            return;
+        }
+        const temMap = new Map(nodesMap);
+        if (node.type === "hotspot") {
+            const nodesArr = Array.from(nodesMap.values());
+            const lineNode = nodesArr.find(r => r.sourceId === node.id);
+            if (lineNode) {
+                temMap.delete(lineNode.id);
+                temMap.delete(lineNode.targetId);
+            }
+        }
+        temMap.delete(node.id);
+        setNodesMap(temMap);
+        const temArr = Array.from(temMap.values()).sort((a, b) => a.zIndex - b.zIndex);
+        return temArr;
+    };
+    // 暴露给父组件的方法
+    useImperativeHandle(ref, () => ({ getAllNodes, deleteNode, stageSize }));
+    const handleStageSize = () => {
+        if (containerRef.current) {
+            const { clientWidth, clientHeight } = containerRef.current;
+            setStageSize({ width: clientWidth, height: clientHeight });
+        }
+    };
+    useEffect(() => {
+        handleStageSize();
+        window.addEventListener('resize', handleStageSize);
+        return () => window.removeEventListener('resize', handleStageSize);
+    }, []);
+    useEffect(() => {
+        if (defNodes === null || defNodes === void 0 ? void 0 : defNodes.length) {
+            const defNodesMap = new Map(defNodes.map(item => [item.id, item]));
+            setNodesMap(defNodesMap);
+        }
+    }, [defNodes]);
+    // 获取节点位置
+    const getNodePosition = useCallback((nodeId) => {
+        const node = nodesMap === null || nodesMap === void 0 ? void 0 : nodesMap.get(nodeId);
+        return node ? node.position : { x: 0, y: 0 };
+    }, [nodesMap]);
+    // 更新节点位置
+    const updateNodePosition = useCallback((id, newPosition) => {
+        setNodesMap(prev => {
+            const node = prev.get(id);
+            if (!node)
+                return prev;
+            const newMap = new Map(prev);
+            newMap.set(id, Object.assign(Object.assign({}, node), { position: newPosition }));
+            return newMap;
+        });
+    }, []);
+    // 组件拖拽处理
+    const handleNodeDragMove = useCallback((e, id) => {
+        const node = e.target;
+        updateNodePosition(id, { x: node.x(), y: node.y() });
+    }, [updateNodePosition]);
+    // 添加新节点
+    const handleStageDblClick = useCallback((e) => {
+        if (!dbClickAddNode || !e.currentTarget)
+            return;
+        const attrs = e.target.getAttrs();
+        const targetNode = attrs.id ? nodesMap.get(attrs.id) : undefined;
+        if (targetNode && !["image"].includes(targetNode.type)) { // 双击添加新节点，画布和图片上可添加
+            return;
+        }
+        const pointer = e.currentTarget.getPointerPosition();
+        if (!pointer)
+            return;
+        const nodeNumber = new Map(nodesMap).size;
+        const newId = Date.now().toString();
+        const newHotspotId = `hotspot-${newId}`;
+        const newCardId = `card-${newId}`;
+        const newLineId = `line-${newId}`;
+        const newLine = {
+            id: newLineId,
+            type: "line",
+            sourceId: newHotspotId,
+            targetId: newCardId,
+            zIndex: nodeNumber + 1
+        };
+        const newCardNode = {
+            id: newCardId,
+            type: "card",
+            position: { x: pointer.x + 200, y: pointer.y },
+            size: { width: 280, height: 190 },
+            zIndex: nodeNumber + 2
+        };
+        const newHotspot = {
+            id: newHotspotId,
+            type: "hotspot",
+            position: { x: pointer.x, y: pointer.y },
+            zIndex: nodeNumber + 3,
+        };
+        setNodesMap(prev => {
+            const newMap = new Map(prev);
+            newMap.set(newCardId, newCardNode);
+            newMap.set(newLineId, newLine);
+            newMap.set(newHotspotId, newHotspot);
+            return newMap;
+        });
+        if (onAddNode) {
+            onAddNode([newCardNode, newLine, newHotspot]);
+        }
+    }, [nodesMap]);
+    // 处理缩放
+    const handleWheel = useCallback((e) => {
+        e.evt.preventDefault();
+        const scaleBy = 1.1;
+        const stage = e.target.getStage();
+        const oldScale = stage.scaleX();
+        const pointer = stage.getPointerPosition();
+        const mousePointTo = {
+            x: (pointer.x - stage.x()) / oldScale,
+            y: (pointer.y - stage.y()) / oldScale,
+        };
+        const newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy;
+        const clampedScale = Math.max(0.1, Math.min(newScale, 5));
+        stage.scale({ x: clampedScale, y: clampedScale });
+        stage.position({
+            x: pointer.x - mousePointTo.x * clampedScale,
+            y: pointer.y - mousePointTo.y * clampedScale,
+        });
+        setScale(clampedScale);
+        setStagePos({ x: stage.x(), y: stage.y() });
+    }, []);
+    // 处理画布拖拽
+    const handleStageDragEnd = useCallback((e) => {
+        const stage = e.target;
+        setStagePos({ x: stage.x(), y: stage.y() });
+    }, []);
+    // 更新组件配置
+    const handleChangeNode = (id, val) => {
+        setNodesMap(prev => {
+            const nodeCur = prev.get(id);
+            if (!nodeCur)
+                return prev;
+            const newMap = new Map(prev);
+            newMap.set(id, val);
+            return newMap;
+        });
+    };
+    // 组件渲染
+    const renderNode = (node) => {
+        switch (node.type) {
+            case "line": // 连线
+                return React.createElement(LineComponent, { key: node.id, node: node, getNodePosition: getNodePosition, lineType: "line" });
+            case "hotspot": // 热点
+                return React.createElement(HotspotComponent, { key: node.id, node: node, onDragMove: handleNodeDragMove, isSelected: node.id === selectedId, onSelect: () => setSelectedId(node.id), onChange: (val) => handleChangeNode(node.id, val) });
+            case "card": // 卡片
+                return React.createElement(CardComponent, { node: node, onDragMove: updateNodePosition, isSelected: node.id === selectedId, onSelect: () => setSelectedId(node.id), onChange: (val) => handleChangeNode(node.id, val) });
+            case "image":
+                return React.createElement(ImageComponent, { key: node.id, node: node, onDragMove: handleNodeDragMove, isSelected: node.id === selectedId, onSelect: () => setSelectedId(node.id), onChange: (val) => handleChangeNode(node.id, val) });
+            default:
+                break;
+        }
+    };
+    // 置空选中的组件
+    const checkDeselect = (e) => {
+        const clickedOnEmpty = e.target === e.target.getStage();
+        if (clickedOnEmpty) {
+            setSelectedId(null);
+        }
+    };
+    // 节点Map转数组并排序
+    const nodesArr = useMemo(() => nodesMap ? Array.from(nodesMap.values()).sort((a, b) => a.zIndex - b.zIndex) : [], [nodesMap]);
+    return (React.createElement("div", { ref: containerRef, className: 'editor-2d', style: { border: `1px solid ${token.colorBorderSecondary}` } },
+        React.createElement(Stage, { ref: stageRef, width: stageSize.width, height: stageSize.height, onDblClick: handleStageDblClick, onClick: checkDeselect },
+            React.createElement(Layer, null, nodesArr.map(node => renderNode(node))))));
+});
+export default Index;
+//# sourceMappingURL=index.js.map

package/lib/controls/2dEditor/2dEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/2dEditor/index.tsx"],"names":[],"mappings":"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"}

package/lib/controls/2dEditor/2dEditor/index.less

@@ -0,0 +1,6 @@
+.editor-2d {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}

package/lib/controls/2dEditor/2dView/index.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CommonNode } from "../components/data";
+import "./index.less";
+/**
+ * 渲染组件
+ */
+interface Props {
+    config?: {
+        nodes: CommonNode[];
+        canvasSize: {
+            width: number;
+            height: number;
+        };
+    };
+}
+declare const Index: (props: Props) => React.JSX.Element;
+export default Index;
+//# sourceMappingURL=index.d.ts.map

package/lib/controls/2dEditor/2dView/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/2dView/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAMjF,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,cAAc,CAAC;AAEtB;;GAEG;AAEH,UAAU,KAAK;IACX,MAAM,CAAC,EAAE;QACL,KAAK,EAAE,UAAU,EAAE,CAAC;QACpB,UAAU,EAAE;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,MAAM,EAAE,MAAM,CAAA;SAAE,CAAC;KACjD,CAAA;CACJ;AAED,QAAA,MAAM,KAAK,GAAI,OAAO,KAAK,sBAuF1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/controls/2dEditor/2dView/index.js

@@ -0,0 +1,76 @@
+import React, { useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { Stage, Layer } from 'react-konva';
+import CardComponent from "../components/card";
+import LineComponent from "../components/line";
+import HotspotComponent from "../components/hotspot";
+import ImageComponent from "../components/image";
+import "./index.less";
+const Index = (props) => {
+    const { config } = props;
+    const [nodesMap, setNodesMap] = useState(); // 组件Map
+    const [canvasSize, setCanvasSize] = useState();
+    const [stageScale, setStageScale] = useState();
+    const stageRef = useRef(null);
+    const viewRef = useRef(null);
+    // 获取缩放比例
+    const getScale = () => {
+        // 创建 ResizeObserver 实例
+        const observer = new ResizeObserver((entries) => {
+            const entry = entries[0];
+            const { width, height } = entry.contentRect;
+            const canvasSize = config.canvasSize;
+            const widthScale = width / canvasSize.width;
+            const heightScale = height / canvasSize.height;
+            setStageScale(widthScale > heightScale ? heightScale : widthScale);
+        });
+        observer.observe(viewRef.current);
+        return observer;
+    };
+    useEffect(() => {
+        var _a;
+        let observer;
+        if (config) {
+            const defNodesMap = new Map(((_a = config.nodes) === null || _a === void 0 ? void 0 : _a.map(item => [item.id, item])) || []);
+            setNodesMap(defNodesMap);
+            setCanvasSize(config.canvasSize);
+            observer = getScale();
+        }
+        return () => {
+            // 取消监听
+            observer && observer.disconnect();
+        };
+    }, [config]);
+    // 获取节点位置
+    const getNodePosition = useCallback((nodeId) => {
+        const node = nodesMap === null || nodesMap === void 0 ? void 0 : nodesMap.get(nodeId);
+        return node ? node.position : { x: 0, y: 0 };
+    }, [nodesMap]);
+    // 组件渲染
+    const renderNode = (node) => {
+        const commonProps = {
+            key: node.id,
+            node,
+            isDesignMode: false
+        };
+        switch (node.type) {
+            case "line": // 连线
+                return React.createElement(LineComponent, Object.assign({}, commonProps, { getNodePosition: getNodePosition, lineType: "line" }));
+            case "hotspot": // 热点
+                return React.createElement(HotspotComponent, Object.assign({}, commonProps));
+            case "card": // 卡片
+                return React.createElement(CardComponent, Object.assign({}, commonProps));
+            case "image":
+                return React.createElement(ImageComponent, Object.assign({}, commonProps));
+            default:
+                break;
+        }
+    };
+    // 节点Map转数组并排序
+    const nodesArr = useMemo(() => nodesMap ? Array.from(nodesMap.values()).sort((a, b) => a.zIndex - b.zIndex) : [], [nodesMap]);
+    return (React.createElement("div", { className: 'view-2d', ref: viewRef }, stageScale ?
+        React.createElement("div", { style: { transform: `scale(${stageScale})` } },
+            React.createElement(Stage, { ref: stageRef, width: (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.width) || 100, height: (canvasSize === null || canvasSize === void 0 ? void 0 : canvasSize.height) || 100 },
+                React.createElement(Layer, null, nodesArr.map(node => renderNode(node))))) : ""));
+};
+export default Index;
+//# sourceMappingURL=index.js.map

package/lib/controls/2dEditor/2dView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/2dView/index.tsx"],"names":[],"mappings":"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"}

package/lib/controls/2dEditor/2dView/index.less

@@ -0,0 +1,9 @@
+.view-2d {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

package/lib/controls/2dEditor/components/card.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { BaseNode } from "./data";
+import "./component.less";
+/**
+ * 卡片组件
+ * 数据源参数配置：
+ * v1:标题；v2:标签；v3、v4、v5...卡片描述列表
+ */
+interface Props {
+    node: BaseNode;
+    onDragMove?: (id: string, position: {
+        x: number;
+        y: number;
+    }) => void;
+    isSelected?: boolean;
+    onSelect?: () => void;
+    onChange?: (node: BaseNode) => void;
+    isDesignMode?: boolean;
+}
+declare const Index: (props: Props) => React.JSX.Element;
+export default Index;
+//# sourceMappingURL=card.d.ts.map

package/lib/controls/2dEditor/components/card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/components/card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAIxE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAgB1B;;;;GAIG;AAEH,UAAU,KAAK;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE;QAAE,CAAC,EAAE,MAAM,CAAC;QAAC,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACtE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,KAAK,GAAI,OAAO,KAAK,sBAuG1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/controls/2dEditor/components/card.js

@@ -0,0 +1,118 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import { theme, Row, Col, Tag, Spin } from "antd";
+import { HydrocarbonService } from "../../../index";
+import HtmlBox from "./html-box";
+import "./component.less";
+const { useToken } = theme;
+// 处理数据关系字段
+const handleData = (val) => {
+    if (!val || !val.includes("@R@")) {
+        return val || "";
+    }
+    const temArr = val.split("@R@");
+    return temArr[1];
+};
+// 状态Tag颜色
+const stateColors = { "在线": "success", "离线": "error" };
+const Index = (props) => {
+    const { node, onDragMove, isSelected, onSelect, onChange, isDesignMode = true } = props;
+    const { id, position, draggable = true, rotation } = node;
+    const [isDragging, setIsDragging] = useState(false);
+    const [loading, setLaoding] = useState(false);
+    const [title, setTitle] = useState("");
+    const [state, setState] = useState("");
+    const [listData, setListData] = useState([]);
+    const isDraggingRef = useRef(false);
+    const { token } = useToken();
+    // 请求数据
+    const getData = (sourceId, params) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        setLaoding(true);
+        const { data } = (yield HydrocarbonService.requestChartData(null, sourceId, params)) || {};
+        const { config, value } = ((_a = data === null || data === void 0 ? void 0 : data.value) === null || _a === void 0 ? void 0 : _a[0]) || {};
+        const _b = (value === null || value === void 0 ? void 0 : value[0]) || {}, { v1, v2 } = _b, otherVal = __rest(_b, ["v1", "v2"]);
+        setLaoding(false);
+        setTitle(handleData(v1));
+        setState(handleData(v2));
+        setListData(Object.keys(otherVal).sort((a, b) => Number(a.replace(/\D/g, '')) - Number(b.replace(/\D/g, ''))).map(r => ({ title: config[r], unit: config[`${r}-suffix`], value: handleData(otherVal[r]) })));
+    });
+    useEffect(() => {
+        var _a;
+        if (!isDesignMode && ((_a = node.dataSourceId) === null || _a === void 0 ? void 0 : _a.length)) {
+            getData(node.dataSourceId[0], node.params);
+        }
+    }, [node]);
+    const handleMouseDown = useCallback((e) => {
+        if (!draggable) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+        isDraggingRef.current = true;
+    }, [id, position]);
+    const handleMouseMove = (e) => {
+        if (!isDraggingRef.current || !onDragMove)
+            return;
+        const newX = e.clientX;
+        const newY = e.clientY;
+        onDragMove(id, { x: newX, y: newY });
+    };
+    const handleMouseUp = () => {
+        if (isDraggingRef.current) {
+            setIsDragging(false);
+            isDraggingRef.current = false;
+        }
+    };
+    // Html监听组件位置变化
+    useEffect(() => {
+        if (id) {
+            window.addEventListener('mousemove', handleMouseMove);
+            window.addEventListener('mouseup', handleMouseUp);
+        }
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [id]);
+    return (React.createElement(HtmlBox, { node: node, onChange: onChange, isSelected: isSelected, onSelect: onSelect, onDragMove: onDragMove, isDesignMode: isDesignMode },
+        React.createElement("div", { className: 'card-component', style: {
+                transform: `translate(-50%, -50%) rotate(${rotation || 0}deg)`,
+                cursor: isDesignMode && isDragging ? 'grab' : 'default',
+                background: token.colorBgContainer,
+                border: `1px solid ${token.colorBorderSecondary}`
+            }, onMouseDown: handleMouseDown, onClick: onSelect },
+            React.createElement(Spin, { spinning: loading },
+                React.createElement("div", { className: 'card-title' }, title || "-"),
+                React.createElement("div", { className: 'card-detail' },
+                    React.createElement(Row, { gutter: [16, 16] }, listData === null || listData === void 0 ? void 0 : listData.map((item, index) => React.createElement(Col, { className: "card-detail-item", span: 24, key: index },
+                        React.createElement("div", { className: "card-detail-item-title" },
+                            item.title,
+                            "\uFF1A"),
+                        React.createElement("div", { className: "card-detail-item-value" }, item.value || item.value === 0 ? item.value : "-"),
+                        item.unit ? React.createElement("div", { className: 'card-detail-item-unit' }, item.unit) : "",
+                        (index === 0 && state) ? React.createElement("span", { style: { marginLeft: '8px' } },
+                            React.createElement(Tag, { color: stateColors[state] || "success" }, state)) : ""))))))));
+};
+export default Index;
+//# sourceMappingURL=card.js.map

package/lib/controls/2dEditor/components/card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/components/card.tsx"],"names":[],"mappings":"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"}

package/lib/controls/2dEditor/components/component.less

@@ -0,0 +1,66 @@
+.card-component {
+    width: 100%;
+    height: 100%;
+    user-select: none;
+    pointer-events: auto;
+    border-radius: 12px;
+    overflow: hidden;
+    line-height: 18px;
+
+    .ant-spin-nested-loading,
+    .ant-spin-container {
+        width: 100%;
+        height: 100%;
+    }
+
+    .card-title {
+        font-size: 18px;
+        padding: 12px;
+        position: relative;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+
+    .card-title::after {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        width: 100%;
+        height: 1px;
+        background: linear-gradient(54deg,
+                rgba(12, 80, 88, 0) 1.43%,
+                #0C5058 7.04%,
+                rgba(12, 80, 88, 0) 100%);
+    }
+
+    .card-detail {
+        padding: 12px 16px;
+
+        .card-detail-item {
+            display: flex;
+            align-items: center;
+
+            .card-detail-item-title {
+                white-space: nowrap;
+                max-width: 50%;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+            }
+
+            .card-detail-item-value {
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
+                max-height: 22px;
+                color: #F7B500;
+            }
+
+            .card-detail-item-unit {
+                margin-left: 4px;
+            }
+        }
+    }
+}

package/lib/controls/2dEditor/components/hotspot.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { BaseNode } from "./data";
+interface Props {
+    node: BaseNode;
+    onDragMove?: (e: any, id: string) => void;
+    isSelected?: boolean;
+    onSelect?: () => void;
+    onChange?: (node: BaseNode) => void;
+    style?: {
+        fill: string;
+        stroke: string;
+    };
+    isDesignMode?: boolean;
+}
+declare const Index: (props: Props) => React.JSX.Element;
+export default Index;
+//# sourceMappingURL=hotspot.d.ts.map

package/lib/controls/2dEditor/components/hotspot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hotspot.d.ts","sourceRoot":"","sources":["../../../../../../src/aldehyde/controls/2dEditor/components/hotspot.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAIlC,UAAU,KAAK;IACX,IAAI,EAAE,QAAQ,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,CAAC,KAAA,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACpC,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACzC,YAAY,CAAC,EAAE,OAAO,CAAC;CAC1B;AAGD,QAAA,MAAM,KAAK,GAAI,OAAO,KAAK,sBA4D1B,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/lib/controls/2dEditor/components/hotspot.js

@@ -0,0 +1,36 @@
+import React, { Fragment, useRef, useEffect } from 'react';
+import { Circle, Transformer } from 'react-konva';
+import { theme } from "antd";
+const { useToken } = theme;
+// 热点组件
+const Index = (props) => {
+    const { node, onDragMove, style, isSelected, onSelect, onChange, isDesignMode = true } = props;
+    const { position, size, draggable = true, selected = true, rotation } = node;
+    const nodeRef = useRef(null);
+    const trRef = useRef(null);
+    const { token } = useToken();
+    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(Object.assign(Object.assign({}, node), { position: { x: nodeCur.x(), y: nodeCur.y() }, size: { width: Math.max(5, nodeCur.width() * scaleX), height: Math.max(nodeCur.height() * scaleY) }, rotation }));
+    };
+    return (React.createElement(Fragment, null,
+        React.createElement(Circle, { id: node.id, ref: nodeRef, x: position.x, y: position.y, radius: (size === null || size === void 0 ? void 0 : size.width) || 8, fill: (style === null || style === void 0 ? void 0 : style.fill) || token.colorPrimary, stroke: (style === null || style === void 0 ? void 0 : style.stroke) || "#ffffff", strokeWidth: 0, draggable: isDesignMode && draggable, shadowColor: "black", shadowBlur: 4, shadowOpacity: 0.3, onDragMove: (e) => onDragMove && onDragMove(e, node.id), onClick: onSelect, onTransformEnd: onTransformEnd, rotation: rotation }),
+        React.createElement(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;
+            } })));
+};
+export default Index;
+//# sourceMappingURL=hotspot.js.map