@retikz/core 0.0.1-rc.0 → 0.0.1-rc.2

package/dist/lib/components/draw/arrow/index.cjs

@@ -1,10 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const circle = require("./circle.cjs");
 const stealth = require("./stealth.cjs");
 const getArrowPath = (type, attributes) => {
   switch (type) {
     case "Stealth":
       return stealth.default(attributes);
+    case "Circle":
+      return circle.default(attributes);
   }
 };
 exports.default = getArrowPath;

package/dist/lib/components/draw/arrow/index.d.ts

@@ -1,6 +1,6 @@
 import { ArrowAttributes, ArrowPathConfig } from './types';
 export type { ArrowAttributes as ArrowPositionAttributes, ArrowPathConfig };
-export type ArrowType = 'Stealth';
+export type ArrowType = 'Stealth' | 'Circle';
 declare const getArrowPath: (type: ArrowType, attributes: ArrowAttributes) => {
     d: string;
     offsetDistance: number;

package/dist/lib/components/draw/common.cjs

@@ -4,7 +4,7 @@ const offsetReg = /\+[[(]?[+-]?\d+(?:\.\d+)?,\s*[+-]?\d+(?:\.\d+)?[)\]]?/;
 const moveReg = /\+\+[[(]?[+-]?\d+(?:\.\d+)?,\s*[+-]?\d+(?:\.\d+)?[)\]]?/;
 const getDrawPointType = (point) => {
   if (typeof point !== "string") return "coordinate";
-  if (["-|", "|-"].includes(point)) return "vertical";
+  if (["-|", "|-", "-|-", "|-|"].includes(point)) return "vertical";
   if (point.match(moveReg)) return "move";
   if (point.match(offsetReg)) return "offset";
   return "node";

package/dist/lib/components/draw/index.cjs

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const Draw = require("./Draw.cjs");
+exports.default = Draw.default;

package/dist/lib/components/draw/segment/Segment.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Path = require("../../../elements/Path.cjs");
 const Group = require("../../../container/Group.cjs");
 const useArrow = require("./useArrow.cjs");
@@ -10,7 +10,7 @@ const InnerDrawSegment = (props) => {
   const { way, startArrow, endArrow, ...strokeProps } = props;
   const pickedArrowStrokeProps = {
     stroke: strokeProps.stroke,
-    strokeWidth: strokeProps.strokeWidth,
+    strokeWidth: Number(strokeProps.strokeWidth),
     strokeOpacity: strokeProps.strokeOpacity
   };
   const startArrowPath = useArrow.default(
@@ -21,7 +21,7 @@ const InnerDrawSegment = (props) => {
     { position: way[way.length - 1], nearPosition: way[way.length - 2], arrowType: "end" },
     endArrow ? { ...pickedArrowStrokeProps, ...endArrow } : void 0
   );
-  const d = require$$0.useMemo(() => {
+  const d = react.useMemo(() => {
     const realWay = [...way];
     if (startArrowPath) {
       realWay[0] = startArrowPath.linkPoint;
@@ -32,10 +32,10 @@ const InnerDrawSegment = (props) => {
     const straightLine = line.default().x((d2) => d2[0]).y((d2) => d2[1]);
     return straightLine(realWay);
   }, [way]);
-  return endArrowPath || startArrowPath ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(Group.default, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Path.default, { d: d ?? "", ...strokeProps }),
+  return endArrowPath || startArrowPath ? /* @__PURE__ */ jsxRuntime.jsxs(Group.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Path.default, { d: d ?? "", ...strokeProps }),
     startArrowPath ? startArrowPath.arrowPath : null,
     endArrowPath ? endArrowPath.arrowPath : null
-  ] }) : /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Path.default, { d: d ?? "", ...strokeProps });
+  ] }) : /* @__PURE__ */ jsxRuntime.jsx(Path.default, { d: d ?? "", ...strokeProps });
 };
 exports.default = InnerDrawSegment;

package/dist/lib/components/draw/segment/index.cjs

@@ -1,18 +1,18 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const node = require("../../../model/component/node.cjs");
 const stroke = require("../../../utils/style/stroke.cjs");
 const Segment = require("./Segment.cjs");
 const useConvertWay = require("./useConvertWay.cjs");
 const usePath = require("../../../hooks/context/usePath.cjs");
 const DrawSegment = (props) => {
-  const { way, index, color, startArrow, endArrow, isLastSegment, ...resProps } = props;
+  const { way, index, startArrow, endArrow, ...resProps } = props;
   const { strokeType = "solid", strokeWidth = 1, ...strokeProps } = resProps;
   const [convertedWay, nodesInit] = useConvertWay.default(way);
   const { model, updateModel } = usePath.default();
-  const pointWay = require$$0.useMemo(() => {
+  const pointWay = react.useMemo(() => {
     const realWay = convertedWay.map((wayPoint, index2) => {
       if (wayPoint instanceof node.default) {
         const neighborPoint = index2 === 0 ? convertedWay[1] : convertedWay[index2 - 1];
@@ -20,13 +20,13 @@ const DrawSegment = (props) => {
       }
       return wayPoint;
     });
-    const newWay = [...model == null ? void 0 : model.ways];
+    const newWay = [...model.ways];
     newWay[index] = realWay;
     updateModel({ ways: newWay, init: nodesInit });
     return realWay;
   }, [convertedWay]);
   if (!nodesInit) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     Segment.default,
     {
       way: pointWay,

package/dist/lib/components/draw/segment/index.d.ts

@@ -1,14 +1,10 @@
 import { FC } from 'react';
 import { StrokeProps } from '../../../types/svg/stroke';
-import { TikZKey } from '../../../types/tikz';
 import { ArrowConfig, DrawWaySegmentType } from '../types';
 export type DrawSegmentProps = {
     /** 路径，首位可以是 Node，其他必须是坐标 */
     way: DrawWaySegmentType;
     index: number;
-    isLastSegment: boolean;
-    /** 线段颜色 */
-    color?: TikZKey;
     /** 线段样式 */
     strokeType?: 'solid' | 'dashed' | 'dotted';
     startArrow?: ArrowConfig;

package/dist/lib/components/draw/segment/useArrow.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const useCalculate = require("../../../hooks/context/useCalculate.cjs");
 const index = require("../arrow/index.cjs");
 const Path = require("../../../elements/Path.cjs");
@@ -9,7 +9,7 @@ const line = require("../../../model/equation/line.cjs");
 const math = require("../../../utils/math.cjs");
 const useArrow = (linkConfig, arrowConfig) => {
   const { precision } = useCalculate.default();
-  return require$$0.useMemo(() => {
+  return react.useMemo(() => {
     if (!arrowConfig) return null;
     const { position, nearPosition } = linkConfig;
     const { type, stroke, linkType = "end", round, strokeLinejoin, strokeWidth, ...strokeProps } = arrowConfig;
@@ -33,7 +33,7 @@ const useArrow = (linkConfig, arrowConfig) => {
     )}) rotate(${math.convertPrecision(degree * (180 / Math.PI), precision)})`;
     return {
       linkPoint,
-      arrowPath: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+      arrowPath: /* @__PURE__ */ jsxRuntime.jsx(
         Path.default,
         {
           d,

package/dist/lib/components/draw/segment/useConvertWay.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("react");
+const react = require("react");
 const useNodes = require("../../../hooks/context/useNodes.cjs");
 const useForceUpdate = require("../../../hooks/useForceUpdate.cjs");
 const DescartesPoint = require("../../../model/geometry/point/DescartesPoint.cjs");
@@ -8,7 +8,7 @@ const PolarPoint = require("../../../model/geometry/point/PolarPoint.cjs");
 const common = require("../common.cjs");
 const formatPointPosition = (point) => {
   if (Array.isArray(point)) return point;
-  if (point.hasOwnProperty("x") && point.hasOwnProperty("y")) {
+  if ("x" in point && "y" in point) {
     const p = point;
     return [p.x, p.y];
   }
@@ -17,16 +17,22 @@ const formatPointPosition = (point) => {
 const getVerticalPoint = (point1, point2, type) => {
   const p1 = formatPointPosition(point1);
   const p2 = formatPointPosition(point2);
-  return type === "-|" ? [p2[0], p1[1]] : [p1[0], p2[1]];
+  if (["-|", "|-"].includes(type)) return type === "-|" ? [p2[0], p1[1]] : [p1[0], p2[1]];
+  if (type === "-|-") {
+    const centerX = (p1[0] + p2[0]) / 2;
+    return [[centerX, p1[1]], [centerX, p2[1]]];
+  }
+  const centerY = (p1[1] + p2[1]) / 2;
+  return [[p1[0], centerY], [p2[0], centerY]];
 };
 const convertOffsetAndMovePoint = (point) => {
-  const filterPoint = point.replace(/[+()\[\]\s]/g, "");
+  const filterPoint = point.replace(/[+()[\]\s]/g, "");
   return filterPoint.split(",").map((item) => parseFloat(item));
 };
 const useConvertWay = (way) => {
   const { getModel, subscribeModel } = useNodes.default();
   const forceUpdate = useForceUpdate.default();
-  const nodeUpdateCount = require$$0.useRef(0);
+  const nodeUpdateCount = react.useRef(0);
   let cursor = [0, 0];
   const tryGetModel = (name) => {
     const model = getModel(name);
@@ -38,15 +44,16 @@ const useConvertWay = (way) => {
   };
   const subscribeCbs = [];
   let allNodeInit = true;
-  const result = require$$0.useMemo(
-    () => way.map((item, index) => {
+  const result = react.useMemo(
+    () => way.reduce((acc, item, index) => {
       const type = common.getDrawPointType(item);
       switch (type) {
-        case "coordinate":
+        case "coordinate": {
           const corPosition = formatPointPosition(item);
           cursor = corPosition;
-          return corPosition;
-        case "node":
+          return acc.concat(corPosition);
+        }
+        case "node": {
           if (![0, way.length - 1].includes(index)) {
             throw new Error(
               "Node can only be the first or last point on DrawSegment component, this may be a retikz bug, please report it."
@@ -60,8 +67,9 @@ const useConvertWay = (way) => {
           });
           if (cb) subscribeCbs.push(cb);
           cursor = nodeModel.center;
-          return nodeModel;
-        case "vertical":
+          return acc.concat(nodeModel);
+        }
+        case "vertical": {
           if ([0, way.length - 1].includes(index)) {
             throw new Error("Vertical point can not be the first point on path.");
           }
@@ -73,19 +81,26 @@ const useConvertWay = (way) => {
           }
           const afterPosition = afterPointType === "node" ? tryGetModel(afterPoint).center : formatPointPosition(afterPoint);
           const verPosition = getVerticalPoint(beforePosition, afterPosition, item);
+          if (Array.isArray(verPosition[0])) {
+            const realVerPosition = verPosition;
+            cursor = realVerPosition[realVerPosition.length - 1];
+            return acc.concat(realVerPosition);
+          }
           cursor = verPosition;
-          return cursor;
-        default:
+          return acc.concat(verPosition);
+        }
+        default: {
           if (index === 0) throw new Error("offset/move point can not be the first point on path.");
           const convertedPos = convertOffsetAndMovePoint(item);
           const curPos = DescartesPoint.default.plus(convertedPos, cursor);
           if (type === "move") cursor = curPos;
-          return curPos;
+          return acc.concat(curPos);
+        }
       }
-    }),
+    }, []),
     [way, nodeUpdateCount.current]
   );
-  require$$0.useLayoutEffect(() => () => {
+  react.useLayoutEffect(() => () => {
     subscribeCbs.forEach((cb) => cb && cb());
   });
   return [result, allNodeInit];

package/dist/lib/components/draw/segment/useConvertWay.d.ts

@@ -5,7 +5,7 @@ import { DrawWaySegmentType } from '../types';
 /** 将坐标格式转换为笛卡尔坐标数组形式 */
 export declare const formatPointPosition: (point: PointPosition) => Position;
 /** 获取两点间的垂直点 */
-export declare const getVerticalPoint: (point1: PointPosition, point2: PointPosition, type: "-|" | "|-") => Position;
+export declare const getVerticalPoint: (point1: PointPosition, point2: PointPosition, type: "-|" | "|-" | "-|-" | "|-|") => Position | Position[];
 /**
  * 将特殊路径点转换为坐标，Node 节点转换为对应的 Model
  * 目前支持的节点类型：node，各种坐标，垂点，位移点

package/dist/lib/components/draw/types.d.ts

@@ -7,7 +7,7 @@ export type ArrowConfig = {
     fill?: string;
 } & ArrowPositionAttributes & StrokeProps;
 /** 垂直路径点，临近的节点不能都是特殊路径点 */
-export type VerticalDrawPosition = '-|' | '|-';
+export type VerticalDrawPosition = '-|' | '|-' | '-|-' | '|-|';
 /** 偏移与移动点 */
 export type OffSetOrMovePosition = string;
 /** 路径点类型：节点，坐标，垂点，偏移点，移动点 */

package/dist/lib/components/node/InnerNode.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Group = require("../../container/Group.cjs");
 const useNodeShape = require("./_hooks/useNodeShape.cjs");
 const useNodeContent = require("./_hooks/useNodeContent.cjs");
@@ -10,11 +10,11 @@ const css = require("../../utils/css.cjs");
 const useNodes = require("../../hooks/context/useNodes.cjs");
 const useCalculate = require("../../hooks/context/useCalculate.cjs");
 const math = require("../../utils/math.cjs");
-const InnerNode = (props) => {
-  const { name, ref, position, width, height, innerSep, outerSep, rotate } = props;
-  const nodeRef = require$$0.useRef(null);
-  const shapeRef = require$$0.useRef(null);
-  const contentRef = require$$0.useRef(null);
+const InnerNode = react.forwardRef((props, ref) => {
+  const { name, position, width, height, innerSep, outerSep, rotate } = props;
+  const nodeRef = react.useRef(null);
+  const shapeRef = react.useRef(null);
+  const contentRef = react.useRef(null);
   const { getModel, updateModel, deleteModel } = useNodes.default();
   const { precision } = useCalculate.default();
   const nodeConfig = useNodeConfig.default();
@@ -23,7 +23,7 @@ const InnerNode = (props) => {
     updateModel(name, nodeConfig.current, false);
   }
   const groupElement = ref && "current" in ref ? ref.current : nodeRef.current;
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     const contentElement = contentRef.current;
     if (!contentElement) return;
     const { width: elementWidth, height: elementHeight } = contentElement.getBoundingClientRect();
@@ -40,13 +40,13 @@ const InnerNode = (props) => {
       bottom: css.convertCssToPx(sep.bottom, { remPx, emPx, parentPx: height2 })
     };
   };
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     nodeConfig.current.innerSep = getSep(innerSep);
   }, [innerSep]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     nodeConfig.current.outerSep = getSep(outerSep);
   }, [outerSep]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     var _a, _b, _c, _d;
     const {
       contentSize: [width2, height2],
@@ -61,10 +61,10 @@ const InnerNode = (props) => {
     const realHeight = height2 + innerSep2.top + innerSep2.bottom;
     (_d = shapeRef.current) == null ? void 0 : _d.setAttribute("height", math.convertPrecision(realHeight, precision).toString());
   }, [nodeConfig.current.position, nodeConfig.current.contentSize, nodeConfig.current.innerSep]);
-  require$$0.useLayoutEffect(() => {
+  react.useLayoutEffect(() => {
     if (name) updateModel(name, nodeConfig.current);
   });
-  require$$0.useLayoutEffect(
+  react.useLayoutEffect(
     () => () => {
       if (name) {
         deleteModel(name);
@@ -72,7 +72,7 @@ const InnerNode = (props) => {
     },
     [name]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Group.default,
     {
       ref: ref || nodeRef,
@@ -84,5 +84,5 @@ const InnerNode = (props) => {
       ]
     }
   );
-};
+});
 exports.default = InnerNode;

package/dist/lib/components/node/InnerNode.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import { ReactNode } from 'react';
 import { Position } from '../../types/coordinate/descartes';
 import { StrokeProps } from '../../types/svg/stroke';
 import { TikZProps } from '../../types/tikz';
@@ -29,5 +29,5 @@ export type InnerNodeProps = {
     outerSep: DirectionDistance<number | string>;
     rotate?: number;
 } & TikZProps & ContentProps & ShapeProps;
-declare const InnerNode: FC<InnerNodeProps>;
+declare const InnerNode: import('react').ForwardRefExoticComponent<Omit<InnerNodeProps, "ref"> & import('react').RefAttributes<SVGGElement>>;
 export default InnerNode;

package/dist/lib/components/node/Node.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const InnerNode = require("./InnerNode.cjs");
 const css = require("../../utils/css.cjs");
 const stroke = require("../../utils/style/stroke.cjs");
@@ -9,7 +9,7 @@ const font = require("../../utils/style/font.cjs");
 const DescartesPoint = require("../../model/geometry/point/DescartesPoint.cjs");
 const useScope = require("../../hooks/context/useScope.cjs");
 const color = require("../../node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/color.cjs");
-const Node = (props) => {
+const Node = react.forwardRef((props, ref) => {
   const { offset: scopeOffset, node } = useScope.default();
   const nodeScopeProps = { offset: scopeOffset, ...node };
   const realProps = {
@@ -19,13 +19,13 @@ const Node = (props) => {
   };
   const { shape = "rectangle", width, height, position, offset, innerSep, outerSep, ...res1Props } = realProps;
   const { r, rx, ry, fill, fillOpacity, stroke: stroke$1 = "transparent", strokeWidth = 1, strokeType, ...res2Props } = res1Props;
-  const { color: color$1 = "currentColor", size, fontSize, fontStyle, fontFamily, style, ...otherProps } = res2Props;
-  const realPosition = require$$0.useMemo(() => {
+  const { color: color$1 = "currentColor", size, fontSize, style, ...otherProps } = res2Props;
+  const realPosition = react.useMemo(() => {
     const formatPosition = position ? DescartesPoint.default.formatPosition(position) : [0, 0];
     const formatOffset = offset ? DescartesPoint.default.formatPosition(offset) : [0, 0];
     return [formatPosition[0] + formatOffset[0], formatPosition[1] + formatOffset[1]];
   }, [position]);
-  const realColor = require$$0.useMemo(() => {
+  const realColor = react.useMemo(() => {
     if (color$1 === "auto" && fill && fill !== "currentColor") {
       const fillColor = color.default(fill);
       if (!fillColor) return color$1 || "currentColor";
@@ -55,15 +55,16 @@ const Node = (props) => {
     };
   };
   const getFontStyle = () => font.convertFontStyle(style);
-  const adjustFontSize = require$$0.useMemo(() => font.convertFontSize(size || fontSize), [size, fontSize]);
-  const adjustedInnerSep = require$$0.useMemo(
+  const adjustFontSize = react.useMemo(() => font.convertFontSize(size || fontSize), [size, fontSize]);
+  const adjustedInnerSep = react.useMemo(
     () => getSep(innerSep, css.convertCssToPx(adjustFontSize) / 3 || "0.3333em"),
     [innerSep]
   );
-  const adjustedOuterSep = require$$0.useMemo(() => getSep(outerSep, 0), [outerSep]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const adjustedOuterSep = react.useMemo(() => getSep(outerSep, 0), [outerSep]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
     InnerNode.default,
     {
+      ref,
       width: css.convertCssToPx(width),
       height: css.convertCssToPx(height),
       shape,
@@ -83,5 +84,5 @@ const Node = (props) => {
       ...otherProps
     }
   );
-};
+});
 exports.default = Node;

package/dist/lib/components/node/Node.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 import { NodeShape } from './InnerNode';
 import { CssDistanceType } from '../../types/distance';
 import { SepProps } from '../../types/distance/sep';
@@ -10,7 +10,6 @@ import { TikZFontSize } from '../../utils/style/font';
 import { FontProps } from '../../types/svg/font';
 export type NodeProps = {
     name?: TikZKey;
-    ref?: Ref<SVGGElement>;
     /** 位置 */
     position?: PointPosition;
     /** 位置偏移 */
@@ -50,5 +49,45 @@ export type NodeProps = {
     /** 样式 */
     style?: 'bold' | 'italic' | 'serif' | 'sans-serif';
 } & Partial<FontProps> & Partial<StrokeProps> & StrokeShortcutProps;
-declare const Node: FC<NodeProps>;
+declare const Node: import('react').ForwardRefExoticComponent<{
+    name?: TikZKey;
+    /** 位置 */
+    position?: PointPosition;
+    /** 位置偏移 */
+    offset?: PointPosition;
+    /** 内容宽度 */
+    width?: CssDistanceType;
+    /** 内容高度 */
+    height?: CssDistanceType;
+    /** 内容(文本)颜色 */
+    color?: "currentColor" | "auto" | string;
+    /** 内容(文本)透明度 */
+    opacity?: number;
+    /** 内容(文本)字体大小 */
+    size?: string | TikZFontSize | number;
+    /** 内容 */
+    children?: ReactNode;
+    /** 边框形状 */
+    shape?: NodeShape;
+    /** 边框圆角 */
+    r?: CssDistanceType;
+    /** 边框圆角-x */
+    rx?: CssDistanceType;
+    /** 边框圆角-y */
+    ry?: CssDistanceType;
+    /** 背景填充色，默认为 auto */
+    fill?: string | "auto";
+    /** 背景填充色透明度 */
+    fillOpacity?: number;
+    /** 边框样式 */
+    strokeType?: StrokeType;
+    /** 内边距 */
+    innerSep?: CssDistanceType | SepProps;
+    /** 外边距 */
+    outerSep?: CssDistanceType | SepProps;
+    /** 旋转 */
+    rotate?: number;
+    /** 样式 */
+    style?: "bold" | "italic" | "serif" | "sans-serif";
+} & Partial<FontProps> & Partial<StrokeProps> & StrokeShortcutProps & import('react').RefAttributes<SVGGElement>>;
 export default Node;

package/dist/lib/components/node/_hooks/useNodeConfig.cjs

@@ -1,8 +1,8 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const require$$0 = require("react");
+const react = require("react");
 const useNodeConfig = () => {
-  const configRef = require$$0.useRef({
+  const configRef = react.useRef({
     position: [0, 0],
     contentSize: [0, 0],
     innerSep: { left: 0, right: 0, top: 0, bottom: 0 },

package/dist/lib/components/node/_hooks/useNodeConfig.d.ts

@@ -1,3 +1,3 @@
 import { NodeConfig } from '../../../model/component/node';
-declare const useNodeConfig: () => import('react').RefObject<NodeConfig>;
+declare const useNodeConfig: () => import('react').MutableRefObject<NodeConfig>;
 export default useNodeConfig;

package/dist/lib/components/node/_hooks/useNodeContent.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Text = require("../../../elements/Text.cjs");
 const useNodeContent = (props, ref) => {
   const { color, size, opacity, fontWeight, fontStyle, fontFamily, fontStretch, children } = props;
-  const isTextNode = children !== null && !require$$0.isValidElement(children);
-  return require$$0.useMemo(
-    () => isTextNode ? /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+  const isTextNode = children !== null && !react.isValidElement(children);
+  return react.useMemo(
+    () => isTextNode ? /* @__PURE__ */ jsxRuntime.jsx(
       Text.default,
       {
         fill: color,
@@ -20,7 +20,10 @@ const useNodeContent = (props, ref) => {
         ref,
         children
       }
-    ) : require$$0.isValidElement(children) ? require$$0.cloneElement(children, { ref }) : children,
+    ) : react.isValidElement(children) ? (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      react.cloneElement(children, { ref })
+    ) : children,
     isTextNode ? [color, size, children] : [children]
   );
 };

package/dist/lib/components/node/_hooks/useNodeShape.cjs

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const jsxRuntime = require("../../../_virtual/jsx-runtime.cjs");
-const require$$0 = require("react");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
 const Rect = require("../../../elements/Rect.cjs");
 const getShapeProps = (nodeProps) => {
   const { rx, ry, fill, fillOpacity, stroke, strokeWidth, strokeOpacity } = nodeProps;
@@ -23,12 +23,12 @@ const getShapeProps = (nodeProps) => {
 };
 const useNodeShape = (props, ref) => {
   const shapeProps = getShapeProps(props);
-  const Shape = require$$0.useMemo(() => {
+  const Shape = react.useMemo(() => {
     switch (props.shape) {
       case "rectangle":
         return Rect.default;
     }
   }, [props.shape, ...Object.values(shapeProps)]);
-  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(Shape, { ref, ...shapeProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(Shape, { ref, ...shapeProps });
 };
 exports.default = useNodeShape;