jch-config-editor 0.1.0

package/dist/components/NodeRenderer/index.js

@@ -0,0 +1,375 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo, useState, useCallback, useRef, useEffect } from "react";
+import { Typography } from "antd";
+const { Text } = Typography;
+// 执行状态表达式
+const evaluateStatusExpression = (status, data) => {
+    try {
+        //生成函数所需要的参数列表
+        const params = data && Array.isArray(data)
+            ? data.map((d, index) => d.paramsName)
+            : ["A"]; //大写英文字符
+        const fn = new Function(...params, status.expression);
+        const result = fn(...data.map((d) => d.value));
+        console.log(`Evaluating status [${status.name}] with data:`, data, "Result:", result);
+        return result === true;
+    }
+    catch (error) {
+        console.warn(`状态表达式执行失败 [${status.name}]:`, error);
+        return false;
+    }
+};
+// 找到第一个满足条件的状态
+const findActiveStatus = (statusList, data) => {
+    for (const status of statusList) {
+        console.log(status, "status");
+        let bindData = [];
+        if (Array.isArray(data)) {
+            console.log(status.bindCodes, "bindCodes");
+            bindData = data.filter((d) => status.bindCodes?.includes(d.paramsCode));
+        }
+        else {
+            bindData = data;
+        }
+        if (evaluateStatusExpression(status, bindData)) {
+            return status;
+        }
+    }
+    return undefined;
+};
+// 从数据中获取字段值
+const getDataValue = (data, valueSourceCode) => {
+    if (!valueSourceCode || !data) {
+        return { value: undefined };
+    }
+    // 数据是数组格式：查找 paramsCode 匹配的项
+    if (Array.isArray(data)) {
+        const dataItem = data.find((d) => d.paramsCode === valueSourceCode);
+        if (dataItem) {
+            return {
+                value: dataItem.value,
+                unit: dataItem.unit,
+            };
+        }
+    }
+    // 数据是对象格式：直接取字段
+    else if (typeof data === "object" && valueSourceCode in data) {
+        return {
+            value: data[valueSourceCode],
+            unit: data.unit,
+        };
+    }
+    return { value: undefined };
+};
+// 格式化数值，根据小数位配置
+const formatValue = (value, decimals) => {
+    if (value === undefined || value === null)
+        return "";
+    // -1 表示不格式化
+    if (decimals === -1)
+        return String(value);
+    // 检查是否为有效数值
+    const num = Number(value);
+    if (isNaN(num))
+        return String(value);
+    // 格式化小数位
+    return num.toFixed(decimals ?? 2);
+};
+// 渲染物料
+const renderMaterial = (material, data, isSelected, node) => {
+    switch (material.type) {
+        case "IMAGE":
+            const imageMaterial = material;
+            return (_jsx("div", { className: "w-full h-full flex items-center justify-center overflow-hidden", children: imageMaterial.src ? (_jsx("img", { src: imageMaterial.src, alt: material.name, style: {
+                        width: "100%",
+                        height: "100%",
+                        objectFit: "contain",
+                    } })) : (_jsx("div", { className: "w-full h-full bg-gray-200 flex items-center justify-center", children: _jsx("span", { className: "text-gray-400 text-xs", children: "\u65E0\u56FE\u7247" }) })) }));
+        case "TEXT":
+            const textMaterial = material;
+            const { label, value: configValue, valueSourceCode, unit: configUnit, decimals, labelStyle, valueStyle, customStyle, } = textMaterial.content || {};
+            // 如果有 valueSourceCode，从数据中获取值
+            const { value: dataValue, unit: dataUnit } = valueSourceCode
+                ? getDataValue(data, valueSourceCode)
+                : { value: undefined, unit: undefined };
+            // 优先使用数据中的值，否则使用配置的默认值
+            const rawValue = dataValue !== undefined ? dataValue : configValue;
+            // 格式化数值
+            const displayValue = formatValue(rawValue, decimals);
+            // 优先使用配置的单位，否则使用数据中的单位
+            const displayUnit = configUnit || dataUnit || "";
+            return (_jsxs("div", { className: "w-full h-full flex flex-col justify-center gap-1", style: { ...customStyle }, children: [label && (_jsx(Text, { style: {
+                            fontSize: 14,
+                            fontWeight: "bold",
+                            color: "#262626",
+                            textAlign: "left",
+                            ...labelStyle,
+                        }, children: label })), displayValue !== undefined && displayValue !== null && (_jsxs(Text, { style: {
+                            fontSize: 14,
+                            color: "#1890ff",
+                            textAlign: "left",
+                            ...valueStyle,
+                        }, children: [displayValue, displayUnit ? ` ${displayUnit}` : ""] }))] }));
+        case "LINE":
+            const lineMaterial = material;
+            const { thickness = 2, color = "#d9d9d9", dashed = false, lineType = dashed ? "dashed" : "solid", lineWeight = thickness, 
+            // 起点和终点的相对坐标
+            startX = 0, startY = 0, endX = 100, endY = 0, } = lineMaterial.config || {};
+            // 根据线型计算 dash array
+            const getDashArray = (type) => {
+                const baseWeight = Math.max(lineWeight, 1);
+                switch (type) {
+                    case "solid":
+                        return "";
+                    case "dashed":
+                        return `${baseWeight * 8},${baseWeight * 4}`;
+                    case "center":
+                        return `${baseWeight * 12},${baseWeight * 3},${baseWeight * 2},${baseWeight * 3}`;
+                    case "phantom":
+                        return `${baseWeight * 12},${baseWeight * 3},${baseWeight * 2},${baseWeight * 3},${baseWeight * 2},${baseWeight * 3}`;
+                    case "dot":
+                        return `${baseWeight},${baseWeight * 3}`;
+                    case "dash-dot":
+                        return `${baseWeight * 8},${baseWeight * 3},${baseWeight},${baseWeight * 3}`;
+                    default:
+                        return "";
+                }
+            };
+            const dashArray = getDashArray(lineType);
+            // 选中时高亮颜色
+            const strokeColor = isSelected ? "#1890ff" : color;
+            // 直接使用保存的相对坐标画线
+            // 这和预览线的逻辑一模一样：从起点画到终点
+            return (_jsx("div", { className: "w-full h-full relative", style: { overflow: "visible" }, children: _jsxs("svg", { className: "absolute top-0 left-0", width: "100%", height: "100%", style: { overflow: "visible", pointerEvents: "none" }, children: [_jsx("line", { x1: startX, y1: startY, x2: endX, y2: endY, stroke: "transparent", strokeWidth: Math.max(lineWeight, 10), strokeLinecap: "round", style: { pointerEvents: "stroke", cursor: "pointer" }, onClick: (e) => {
+                                e.stopPropagation();
+                                // 触发父容器的点击
+                                const parent = e.target.closest('[data-node-id]');
+                                if (parent) {
+                                    parent.click();
+                                }
+                            } }), _jsx("line", { x1: startX, y1: startY, x2: endX, y2: endY, stroke: strokeColor, strokeWidth: lineWeight, strokeDasharray: dashArray, strokeLinecap: "butt", style: { pointerEvents: "none" } })] }) }));
+        case "CUSTOM":
+            const customMaterial = material;
+            if (customMaterial.render) {
+                return customMaterial.render({});
+            }
+            return (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: _jsx("span", { className: "text-gray-400 text-xs", children: "\u81EA\u5B9A\u4E49\u7EC4\u4EF6" }) }));
+        default:
+            return (_jsx("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: _jsx("span", { className: "text-gray-400 text-xs", children: "\u672A\u77E5\u7C7B\u578B" }) }));
+    }
+};
+const NodeRendererComponent = ({ node, isSelected = false, onClick, onMouseDown, data, onUpdateNode, scale: canvasScale = 1, }) => {
+    const { normalStyle, contentInfo, controlInfo } = node;
+    const { statusList } = contentInfo;
+    const { isClickable, isDraggable } = controlInfo;
+    // 线条端点拖拽状态
+    const [draggingPoint, setDraggingPoint] = useState(null);
+    const [dragStartPos, setDragStartPos] = useState({ x: 0, y: 0 });
+    const nodeRef = useRef(null);
+    // 计算当前应该显示的状态（完全由表达式决定）
+    const currentStatus = useMemo(() => {
+        if (statusList.length === 0)
+            return undefined;
+        // 执行状态表达式，找到第一个返回 true 的状态
+        const activeStatus = findActiveStatus(statusList, data);
+        if (activeStatus)
+            return activeStatus;
+        // 如果没有状态满足条件，返回第一个状态作为默认
+        return statusList[0];
+    }, [statusList, data]);
+    // 获取当前状态绑定的物料
+    const currentMaterial = currentStatus?.material;
+    // 判断当前物料是否是线条
+    const isLine = currentMaterial?.type === 'LINE';
+    // 获取线条配置
+    const lineConfig = isLine ? currentMaterial.config : null;
+    // 计算缩放比例
+    const nodeScale = normalStyle.scale ?? 1;
+    const scaledWidth = (normalStyle.width || 100) * nodeScale;
+    const scaledHeight = (normalStyle.height || 100) * nodeScale;
+    // 处理端点拖拽开始
+    const handlePointMouseDown = useCallback((e, point) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setDraggingPoint(point);
+        setDragStartPos({ x: e.clientX, y: e.clientY });
+    }, []);
+    // 处理端点拖拽
+    useEffect(() => {
+        if (!draggingPoint || !isLine || !lineConfig || !onUpdateNode)
+            return;
+        const handleMouseMove = (e) => {
+            // 计算鼠标移动的偏移量（考虑画布缩放）
+            const dx = (e.clientX - dragStartPos.x) / canvasScale;
+            const dy = (e.clientY - dragStartPos.y) / canvasScale;
+            // 获取当前的起止坐标
+            const currentStartX = lineConfig.startX || 0;
+            const currentStartY = lineConfig.startY || 0;
+            const currentEndX = lineConfig.endX || 0;
+            const currentEndY = lineConfig.endY || 0;
+            let newStartX = currentStartX;
+            let newStartY = currentStartY;
+            let newEndX = currentEndX;
+            let newEndY = currentEndY;
+            let newNodeX = normalStyle.x || 0;
+            let newNodeY = normalStyle.y || 0;
+            if (draggingPoint === 'start') {
+                // 拖拽起点
+                newStartX = currentStartX + dx;
+                newStartY = currentStartY + dy;
+                // 如果起点移出了节点左上边界，调整节点位置和坐标
+                if (newStartX < 0) {
+                    newNodeX += newStartX;
+                    newEndX -= newStartX;
+                    newStartX = 0;
+                }
+                if (newStartY < 0) {
+                    newNodeY += newStartY;
+                    newEndY -= newStartY;
+                    newStartY = 0;
+                }
+            }
+            else {
+                // 拖拽终点
+                newEndX = currentEndX + dx;
+                newEndY = currentEndY + dy;
+                // 如果终点移出了节点左上边界，调整节点位置和坐标
+                if (newEndX < 0) {
+                    newNodeX += newEndX;
+                    newStartX -= newEndX;
+                    newEndX = 0;
+                }
+                if (newEndY < 0) {
+                    newNodeY += newEndY;
+                    newStartY -= newEndY;
+                    newEndY = 0;
+                }
+            }
+            // 重新计算节点大小
+            const minNodeSize = Math.max((lineConfig.lineWeight || 2) * 2, 4);
+            const maxX = Math.max(newStartX, newEndX);
+            const maxY = Math.max(newStartY, newEndY);
+            const newWidth = Math.max(maxX, minNodeSize);
+            const newHeight = Math.max(maxY, minNodeSize);
+            // 更新节点
+            onUpdateNode(node.id, {
+                normalStyle: {
+                    ...normalStyle,
+                    x: newNodeX,
+                    y: newNodeY,
+                    width: newWidth,
+                    height: newHeight,
+                },
+                contentInfo: {
+                    ...contentInfo,
+                    statusList: statusList.map(s => ({
+                        ...s,
+                        material: s.material.type === 'LINE' ? {
+                            ...s.material,
+                            config: {
+                                ...lineConfig,
+                                startX: newStartX,
+                                startY: newStartY,
+                                endX: newEndX,
+                                endY: newEndY,
+                            },
+                        } : s.material,
+                    })),
+                },
+            });
+            // 更新拖拽起始位置
+            setDragStartPos({ x: e.clientX, y: e.clientY });
+        };
+        const handleMouseUp = () => {
+            setDraggingPoint(null);
+        };
+        window.addEventListener('mousemove', handleMouseMove);
+        window.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            window.removeEventListener('mousemove', handleMouseMove);
+            window.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [draggingPoint, dragStartPos, isLine, lineConfig, node.id, normalStyle, contentInfo, statusList, onUpdateNode, canvasScale]);
+    // 判断是否为群组节点
+    const isGroup = node.type === 'group';
+    // 样式计算
+    const containerStyle = {
+        position: "absolute",
+        left: normalStyle.x || 0,
+        top: normalStyle.y || 0,
+        width: scaledWidth,
+        height: scaledHeight,
+        // 群组节点不显示背景和边框，只作为容器
+        background: isGroup ? 'transparent' : (normalStyle.background || "transparent"),
+        backgroundImage: isGroup ? undefined : (normalStyle.backgroundImage
+            ? `url(${normalStyle.backgroundImage})`
+            : undefined),
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+        padding: Array.isArray(normalStyle.padding)
+            ? normalStyle.padding.join("px ") + "px"
+            : normalStyle.padding,
+        margin: Array.isArray(normalStyle.margin)
+            ? normalStyle.margin.join("px ") + "px"
+            : normalStyle.margin,
+        borderRadius: isGroup ? undefined : normalStyle.borderRadius,
+        // 线条物料选中时不显示边框，而是通过高亮线条颜色来表示
+        // 群组节点选中时显示边框，平时不显示
+        border: isSelected && !isLine
+            ? "2px solid #1890ff"
+            : isLine
+                ? "none"
+                : isGroup
+                    ? "none"
+                    : normalStyle.border || "1px dashed transparent",
+        // 线条节点本身不捕获点击，让内部 SVG 处理
+        pointerEvents: isLine ? "none" : "auto",
+        opacity: normalStyle.opacity ?? 1,
+        transform: normalStyle.transform,
+        zIndex: isSelected ? 1000 : (normalStyle.zIndex ?? 1),
+        cursor: isDraggable && !draggingPoint ? "move" : isClickable ? "pointer" : "default",
+        boxSizing: "border-box",
+        // 线条和群组节点使用 visible overflow，避免裁剪子节点
+        overflow: isLine || isGroup ? "visible" : "hidden",
+    };
+    // 获取线条端点位置用于显示拖拽手柄
+    const startPointPos = lineConfig ? { x: lineConfig.startX || 0, y: lineConfig.startY || 0 } : { x: 0, y: 0 };
+    const endPointPos = lineConfig ? { x: lineConfig.endX || 0, y: lineConfig.endY || 0 } : { x: 0, y: 0 };
+    return (_jsxs("div", { ref: nodeRef, "data-node-id": node.id, style: containerStyle, onClick: (e) => {
+            e.stopPropagation();
+            if (isClickable && onClick && !draggingPoint) {
+                onClick(e);
+            }
+        }, onMouseDown: (e) => {
+            if (isDraggable && onMouseDown && !draggingPoint) {
+                onMouseDown(e);
+            }
+        }, children: [isSelected && !isLine && (_jsxs(_Fragment, { children: [!isGroup && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute -top-1 -left-1 w-2 h-2 bg-white border border-blue-500 rounded-full" }), _jsx("div", { className: "absolute -top-1 -right-1 w-2 h-2 bg-white border border-blue-500 rounded-full" }), _jsx("div", { className: "absolute -bottom-1 -left-1 w-2 h-2 bg-white border border-blue-500 rounded-full" }), _jsx("div", { className: "absolute -bottom-1 -right-1 w-2 h-2 bg-white border border-blue-500 rounded-full" })] })), _jsxs("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: [node.name, " ", currentStatus ? `(${currentStatus.name})` : ""] })] })), isSelected && isLine && lineConfig && onUpdateNode && (_jsxs(_Fragment, { children: [_jsx("div", { className: "absolute w-3 h-3 bg-blue-500 border-2 border-white rounded-full cursor-move z-50", style: {
+                            left: startPointPos.x - 6,
+                            top: startPointPos.y - 6,
+                            boxShadow: '0 0 4px rgba(0,0,0,0.3)',
+                        }, onMouseDown: (e) => handlePointMouseDown(e, 'start'), title: "\u62D6\u62FD\u8C03\u6574\u8D77\u70B9" }), _jsx("div", { className: "absolute w-3 h-3 bg-blue-500 border-2 border-white rounded-full cursor-move z-50", style: {
+                            left: endPointPos.x - 6,
+                            top: endPointPos.y - 6,
+                            boxShadow: '0 0 4px rgba(0,0,0,0.3)',
+                        }, onMouseDown: (e) => handlePointMouseDown(e, 'end'), title: "\u62D6\u62FD\u8C03\u6574\u7EC8\u70B9" }), _jsx("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: node.name })] })), _jsx("div", { className: "w-full h-full relative", children: currentMaterial ? (_jsx("div", { className: "w-full h-full", children: renderMaterial(currentMaterial, data, isSelected, node) })) : !isGroup ? (
+                // 只有非群组节点才显示"无状态"
+                _jsx("div", { className: "w-full h-full flex items-center justify-center text-gray-300 text-xs", children: "\u65E0\u72B6\u6001" })) : null }), node.type === 'group' && node.children && (_jsx("div", { className: "absolute inset-0 pointer-events-none", children: node.children.map(childNode => (_jsx("div", { className: "pointer-events-auto", children: _jsx(NodeRenderer, { node: childNode, isSelected: false, data: data, onUpdateNode: onUpdateNode, scale: canvasScale }) }, childNode.id))) }))] }));
+};
+// 使用 React.memo 避免不必要的重渲染，提高拖拽性能
+// 注意：只在节点位置、选中状态、缩放比例变化时才重渲染
+// 忽略 data、onClick、onMouseDown、onUpdateNode 等频繁变化的 props
+export const NodeRenderer = React.memo(NodeRendererComponent, (prevProps, nextProps) => {
+    const nodeA = prevProps.node;
+    const nodeB = nextProps.node;
+    // 比较节点位置和尺寸
+    const nodeStyleEqual = nodeA.id === nodeB.id &&
+        nodeA.normalStyle.x === nodeB.normalStyle.x &&
+        nodeA.normalStyle.y === nodeB.normalStyle.y &&
+        nodeA.normalStyle.width === nodeB.normalStyle.width &&
+        nodeA.normalStyle.height === nodeB.normalStyle.height;
+    // 比较其他关键 props
+    const otherPropsEqual = prevProps.isSelected === nextProps.isSelected &&
+        prevProps.scale === nextProps.scale;
+    return nodeStyleEqual && otherPropsEqual;
+});

package/dist/components/PropertyPanel/index.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const PropertyPanel: React.FC<{
+    defaultTestData?: any;
+}>;