15 lines
1.0 KiB
TypeScript
15 lines
1.0 KiB
TypeScript
/**
|
|
* 图标节点的轻量显示装配。图标名称与颜色来自节点data，交互与几何变换委托公共节点容器。
|
|
*/
|
|
"use client";
|
|
import type { NodeProps } from "@xyflow/react";
|
|
import type { CanvasNode } from "@/lib/canvas";
|
|
import { TransformableNode } from "./transformable-node";
|
|
import { CanvasIcon } from "./canvas-icon";
|
|
import styles from "./canvas.module.css";
|
|
/** 前景色默认棕色、背景默认透明；SVG填满容器并用节点title命名，实际路径由CanvasIcon异步加载。
|
|
* 此处的100%宽高跟随外层尺寸；固定strokeWidth传给图标层，不在本组件修改节点几何。 */
|
|
export function IconNode(props: NodeProps<CanvasNode>) {
|
|
return <TransformableNode {...props}><div className={styles.iconContent} style={{ color: props.data.textStyle?.color || "#78523f", background: props.data.textStyle?.background || "transparent" }}><CanvasIcon name={props.data.icon} aria-label={props.data.title} width="100%" height="100%" strokeWidth={1.5} /></div></TransformableNode>;
|
|
}
|