aldehyde 0.2.479 → 0.2.481

package/src/aldehyde/controls/2dEditor/components/component.less

@@ -1,84 +1,84 @@
-.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,
-    .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;
-        flex: 1;
-        min-height: 0;
-        overflow-y: auto;
-
-        .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;
-            }
-        }
-
-        .refPage {
-            white-space: nowrap;
-            width: 40%;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            cursor: pointer;
-        }
-    }
-}
-
-.card-component>.ant-spin-nested-loading>.ant-spin-container,
-.card-component>.ant-spin>.ant-spin-container {
-    display: flex;
-    flex-direction: column;
+.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,
+    .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;
+        flex: 1;
+        min-height: 0;
+        overflow-y: auto;
+
+        .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;
+            }
+        }
+
+        .refPage {
+            white-space: nowrap;
+            width: 40%;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            cursor: pointer;
+        }
+    }
+}
+
+.card-component>.ant-spin-nested-loading>.ant-spin-container,
+.card-component>.ant-spin>.ant-spin-container {
+    display: flex;
+    flex-direction: column;
 }

package/src/aldehyde/controls/2dEditor/components/data.d.ts

@@ -1,33 +1,33 @@
-export interface BaseNode { // 组件基本属性
-    id: string;
-    type: string; // 类型
-    position: { x: number, y: number }; // 位置
-    size?: { width: number, height: number }; // 尺寸
-    draggable?: boolean; // 是否可移动
-    selected?: boolean; // 是否可选中
-    rotation?: number; // 旋转角度
-    zIndex: number; // 层级
-    dataSourceId?: string; // 数据源Id
-    params?: { [key: string]: any }; // 数据源查询过滤条件
-    onClick?: (val: BaseNode) => void; // 组件渲染页点击事件
-    title?: string; // 编辑页显示标题
-    refPageParams?: { [key: string]: any }; // 数据源事实关联页面查询条件
-}
-
-export interface LineProps { // 连线组件
-    id: string;
-    type: string;
-    sourceId: string; // 连线源头组件Id
-    targetId: string; // 连线目标组件Id
-    zIndex: number;
-}
-
-export interface CommonNode extends BaseNode { // 公共组件属性
-    position?: { x: number, y: number };
-    sourceId?: string;
-    targetId?: string;
-}
-
-export interface ImageNode extends BaseNode { // 图片组件
-    url?: string;
+export interface BaseNode { // 组件基本属性
+    id: string;
+    type: string; // 类型
+    position: { x: number, y: number }; // 位置
+    size?: { width: number, height: number }; // 尺寸
+    draggable?: boolean; // 是否可移动
+    selected?: boolean; // 是否可选中
+    rotation?: number; // 旋转角度
+    zIndex: number; // 层级
+    dataSourceId?: string; // 数据源Id
+    params?: { [key: string]: any }; // 数据源查询过滤条件
+    onClick?: (val: BaseNode) => void; // 组件渲染页点击事件
+    title?: string; // 编辑页显示标题
+    refPageParams?: { [key: string]: any }; // 数据源事实关联页面查询条件
+}
+
+export interface LineProps { // 连线组件
+    id: string;
+    type: string;
+    sourceId: string; // 连线源头组件Id
+    targetId: string; // 连线目标组件Id
+    zIndex: number;
+}
+
+export interface CommonNode extends BaseNode { // 公共组件属性
+    position?: { x: number, y: number };
+    sourceId?: string;
+    targetId?: string;
+}
+
+export interface ImageNode extends BaseNode { // 图片组件
+    url?: string;
 }

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

@@ -1,81 +1,81 @@
-import React, { Fragment, useRef, useEffect } from 'react';
-import { Circle, Transformer } from 'react-konva';
-import { theme } from "antd";
-import { BaseNode } from "./data";
-
-const { useToken } = theme;
-
-interface Props {
-    node: BaseNode;
-    onDragMove?: (e, id: string) => void;
-    isSelected?: boolean; // 是否选中
-    onSelect?: () => void; // 设置选中
-    onChange?: (node: BaseNode) => void; // 更新组件配置
-    style?: { fill: string, stroke: string };
-    isDesignMode?: boolean; // 是否编辑模式
-}
-
-// 热点组件
-const Index = (props: 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({
-            ...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>
-            <Circle
-                id={node.id}
-                ref={nodeRef}
-                x={position.x}
-                y={position.y}
-                radius={size?.width || 8}
-                fill={style?.fill || token.colorPrimary}
-                stroke={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}
-            />
-            <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, { Fragment, useRef, useEffect } from 'react';
+import { Circle, Transformer } from 'react-konva';
+import { theme } from "antd";
+import { BaseNode } from "./data";
+
+const { useToken } = theme;
+
+interface Props {
+    node: BaseNode;
+    onDragMove?: (e, id: string) => void;
+    isSelected?: boolean; // 是否选中
+    onSelect?: () => void; // 设置选中
+    onChange?: (node: BaseNode) => void; // 更新组件配置
+    style?: { fill: string, stroke: string };
+    isDesignMode?: boolean; // 是否编辑模式
+}
+
+// 热点组件
+const Index = (props: 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({
+            ...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>
+            <Circle
+                id={node.id}
+                ref={nodeRef}
+                x={position.x}
+                y={position.y}
+                radius={size?.width || 8}
+                fill={style?.fill || token.colorPrimary}
+                stroke={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}
+            />
+            <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/html-box.tsx

@@ -1,102 +1,102 @@
-import React, { useRef, useEffect, Fragment, ReactNode } from 'react';
-import { Rect, Transformer } from 'react-konva';
-import { Html } from 'react-konva-utils';
-import { BaseNode } from "./data";
-
-/**
- * Html盒子组件
- * 包装Html组件，以设置组件宽高和旋转
- */
-
-interface Props {
-    node: BaseNode,
-    onDragMove?: (id: string, position: { x: number, y: number }) => void;
-    onChange?: (node: BaseNode) => void; // 更新组件配置
-    isSelected?: boolean; // 是否选中
-    onSelect?: () => void; // 设置选中
-    isDesignMode?: boolean; // 是否编辑模式
-    children: ReactNode;
-}
-
-const Index = (props: Props) => {
-    const { node, onChange, isSelected, onSelect, children, onDragMove, isDesignMode = true } = props;
-    const { position, size, draggable = true, selected = true, rotation } = node;
-    const rectRef = useRef(null);
-    const trRef = useRef(null);
-
-    useEffect(() => {
-        trRef.current.nodes(isDesignMode && selected && isSelected ? [rectRef.current] : []); // 选中设置可拖拽size 
-    }, [isSelected]);
-
-    // 尺寸拖拽、旋转后执行
-    const onTransformEnd = () => {
-        const nodeCur = rectRef.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
-        });
-    }
-
-    const handleOnDragMove = (e) => {
-        if (onDragMove) {
-            const nodeCur = e.target;
-            onDragMove(node.id, { x: nodeCur.x(), y: nodeCur.y() });
-        }
-    }
-
-    return (
-        <Fragment key={node.id}>
-            <Rect   // Html拖拽背景卡片
-                id={node.id}
-                ref={rectRef}
-                x={position.x}
-                y={position.y}
-                width={size?.width}
-                height={size?.height}
-                offsetX={size?.width / 2}
-                offsetY={size?.height / 2}
-                rotation={rotation}
-                draggable={isDesignMode && draggable} // 允许拖拽移动
-                onDragMove={handleOnDragMove}
-                onClick={onSelect}
-                onTransformEnd={onTransformEnd}
-                stroke="transparent"
-                fill={isSelected ? "rgba(0,0,0,0.1)" : "transparent"}
-            />
-            <Html
-                groupProps={node.position}
-                divProps={{
-                    style: {
-                        width: `${size?.width || 200}px`,
-                        height: `${size?.height || 200}px`,
-                        pointerEvents: 'none', // HTML 容器不拦截事件
-                    },
-                    onClick: (e) => {
-                        e.stopPropagation();
-                        onSelect();
-                    }
-                }}
-            >{children}</Html>
-            <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, { useRef, useEffect, Fragment, ReactNode } from 'react';
+import { Rect, Transformer } from 'react-konva';
+import { Html } from 'react-konva-utils';
+import { BaseNode } from "./data";
+
+/**
+ * Html盒子组件
+ * 包装Html组件，以设置组件宽高和旋转
+ */
+
+interface Props {
+    node: BaseNode,
+    onDragMove?: (id: string, position: { x: number, y: number }) => void;
+    onChange?: (node: BaseNode) => void; // 更新组件配置
+    isSelected?: boolean; // 是否选中
+    onSelect?: () => void; // 设置选中
+    isDesignMode?: boolean; // 是否编辑模式
+    children: ReactNode;
+}
+
+const Index = (props: Props) => {
+    const { node, onChange, isSelected, onSelect, children, onDragMove, isDesignMode = true } = props;
+    const { position, size, draggable = true, selected = true, rotation } = node;
+    const rectRef = useRef(null);
+    const trRef = useRef(null);
+
+    useEffect(() => {
+        trRef.current.nodes(isDesignMode && selected && isSelected ? [rectRef.current] : []); // 选中设置可拖拽size 
+    }, [isSelected]);
+
+    // 尺寸拖拽、旋转后执行
+    const onTransformEnd = () => {
+        const nodeCur = rectRef.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
+        });
+    }
+
+    const handleOnDragMove = (e) => {
+        if (onDragMove) {
+            const nodeCur = e.target;
+            onDragMove(node.id, { x: nodeCur.x(), y: nodeCur.y() });
+        }
+    }
+
+    return (
+        <Fragment key={node.id}>
+            <Rect   // Html拖拽背景卡片
+                id={node.id}
+                ref={rectRef}
+                x={position.x}
+                y={position.y}
+                width={size?.width}
+                height={size?.height}
+                offsetX={size?.width / 2}
+                offsetY={size?.height / 2}
+                rotation={rotation}
+                draggable={isDesignMode && draggable} // 允许拖拽移动
+                onDragMove={handleOnDragMove}
+                onClick={onSelect}
+                onTransformEnd={onTransformEnd}
+                stroke="transparent"
+                fill={isSelected ? "rgba(0,0,0,0.1)" : "transparent"}
+            />
+            <Html
+                groupProps={node.position}
+                divProps={{
+                    style: {
+                        width: `${size?.width || 200}px`,
+                        height: `${size?.height || 200}px`,
+                        pointerEvents: 'none', // HTML 容器不拦截事件
+                    },
+                    onClick: (e) => {
+                        e.stopPropagation();
+                        onSelect();
+                    }
+                }}
+            >{children}</Html>
+            <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;