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

package/dist/es/components/Scope.d.ts

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
+import { PropsWithChildren } from 'react';
 import { ScopeProps as ScopeContextProps } from '../hooks/context/useScope';
 import { GroupProps } from '../container/Group';
 export type ScopeProps = ScopeContextProps & Omit<GroupProps, 'offset'>;
-declare const Scope: FC<PropsWithChildren<ScopeProps>>;
+declare const Scope: import('react').ForwardRefExoticComponent<Omit<PropsWithChildren<ScopeProps>, "ref"> & import('react').RefAttributes<SVGGElement>>;
 export default Scope;

package/dist/es/components/Scope.js

@@ -1,10 +1,11 @@
-import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import { ScopeContext } from "../hooks/context/useScope.js";
 import Group from "../container/Group.js";
-const Scope = (props) => {
-  const { children, ref, ...resProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeContext, { value: resProps, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Group, { ref, children }) });
-};
+const Scope = forwardRef((props, ref) => {
+  const { children, ...resProps } = props;
+  return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: resProps, children: /* @__PURE__ */ jsx(Group, { ref, children }) });
+});
 export {
   Scope as default
 };

package/dist/es/components/TikZ.js

@@ -1,11 +1,11 @@
-import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
 import Surface from "../container/Surface.js";
 import { CalculateContext } from "../hooks/context/useCalculate.js";
 import { NodesContext } from "../hooks/context/useNodes.js";
 import { ScopeContext } from "../hooks/context/useScope.js";
 const TikZ = (props) => {
   const { precision = 2, offset, node, draw, ...resProps } = props;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(NodesContext, { value: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ jsxRuntimeExports.jsx(CalculateContext, { value: { precision }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeContext, { value: { offset, node, draw }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Surface, { ...resProps }) }) }) });
+  return /* @__PURE__ */ jsx(NodesContext.Provider, { value: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ jsx(CalculateContext.Provider, { value: { precision }, children: /* @__PURE__ */ jsx(ScopeContext.Provider, { value: { offset, node, draw }, children: /* @__PURE__ */ jsx(Surface, { ...resProps }) }) }) });
 };
 export {
   TikZ as default

package/dist/es/components/draw/Draw.d.ts

@@ -1,10 +1,9 @@
-import { FC, ReactElement, Ref } from 'react';
+import { ReactElement } from 'react';
 import { PointPosition } from '../../types/coordinate';
 import { StrokeProps } from '../../types/svg/stroke';
 import { StrokeShortcutProps, StrokeType } from '../../utils/style/stroke';
 import { ArrowProps, DrawWayType } from './types';
 export type DrawProps = {
-    ref?: Ref<SVGPathElement>;
     way: DrawWayType[];
     /** 位置偏移 */
     offset?: PointPosition;
@@ -14,5 +13,14 @@ export type DrawProps = {
     strokeType?: StrokeType;
     children?: ReactElement | ReactElement[] | null;
 } & StrokeProps & StrokeShortcutProps & ArrowProps;
-declare const Draw: FC<DrawProps>;
+declare const Draw: import('react').ForwardRefExoticComponent<{
+    way: DrawWayType[];
+    /** 位置偏移 */
+    offset?: PointPosition;
+    /** 同 stroke */
+    color?: string;
+    /** 线段样式快捷属性 */
+    strokeType?: StrokeType;
+    children?: ReactElement | ReactElement[] | null;
+} & StrokeProps & StrokeShortcutProps & ArrowProps & import('react').RefAttributes<SVGPathElement>>;
 export default Draw;

package/dist/es/components/draw/Draw.js

@@ -1,22 +1,47 @@
-import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
 import useScope from "../../hooks/context/useScope.js";
 import DescartesPoint from "../../model/geometry/point/DescartesPoint.js";
 import { convertStrokeType, convertStrokeShortcut } from "../../utils/style/stroke.js";
 import InnerDraw from "./InnerDraw.js";
-const Draw = (props) => {
+const Draw = forwardRef((props, ref) => {
   const { draw: scopeProps } = useScope();
   const realProps = { ...scopeProps, ...props };
-  const { offset, color, stroke, strokeWidth, startArrow, startArrows, endArrow, endArrows, ...drawProps } = realProps;
+  const { offset, color, stroke, strokeWidth, startArrow, startArrows, endArrow, endArrows, ...resProps } = realProps;
   const realStroke = stroke || color;
   const realStartArrow = typeof startArrow === "string" ? { type: startArrow } : startArrow;
   const realStartArrows = typeof startArrows === "string" ? { type: startArrows } : startArrows;
   const realEndArrow = typeof endArrow === "string" ? { type: endArrow } : endArrow;
   const realEndArrows = typeof endArrows === "string" ? { type: endArrows } : endArrows;
   const convertOffset = offset ? DescartesPoint.formatPosition(offset) : [0, 0];
-  const getStrokeTypes = () => drawProps.strokeType ? convertStrokeType(drawProps.strokeType, strokeWidth || 1) : convertStrokeShortcut(drawProps, strokeWidth || 1);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  const getStrokeTypes = () => resProps.strokeType ? convertStrokeType(resProps.strokeType, strokeWidth ?? 1) : convertStrokeShortcut(resProps, strokeWidth ?? 1);
+  const drawProps = useMemo(() => {
+    const props2 = { ...resProps };
+    [
+      "solid",
+      "dashed",
+      "denselyDashed",
+      "looselyDashed",
+      "dotted",
+      "denselyDotted",
+      "looselyDotted",
+      "dashDot",
+      "denselyDashDot",
+      "looselyDashDot",
+      "dashDashDot",
+      "denselyDashDashDot",
+      "looselyDashDashDot"
+    ].forEach((key) => {
+      if (key in props2) {
+        delete props2[key];
+      }
+    });
+    return props2;
+  }, [props]);
+  return /* @__PURE__ */ jsx(
     InnerDraw,
     {
+      ref,
       ...getStrokeTypes(),
       offset: convertOffset,
       stroke: realStroke,
@@ -28,7 +53,7 @@ const Draw = (props) => {
       ...drawProps
     }
   );
-};
+});
 export {
   Draw as default
 };

package/dist/es/components/draw/InnerDraw.d.ts

@@ -1,13 +1,17 @@
-import { FC, ReactNode, Ref } from 'react';
+import { ReactNode } from 'react';
 import { Position } from '../../types/coordinate/descartes';
 import { StrokeProps } from '../../types/svg/stroke';
 import { ArrowConfig, ArrowProps, DrawWayType } from './types';
 export type InnerDrawProps = {
-    ref?: Ref<SVGPathElement>;
     /** 位置偏移 */
     offset: Position;
     way: DrawWayType[];
     children?: ReactNode;
 } & StrokeProps & ArrowProps<ArrowConfig>;
-declare const InnerDraw: FC<InnerDrawProps>;
+declare const InnerDraw: import('react').ForwardRefExoticComponent<{
+    /** 位置偏移 */
+    offset: Position;
+    way: DrawWayType[];
+    children?: ReactNode;
+} & StrokeProps & ArrowProps<ArrowConfig> & import('react').RefAttributes<SVGPathElement>>;
 export default InnerDraw;

package/dist/es/components/draw/InnerDraw.js

@@ -1,12 +1,12 @@
-import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
-import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
 import Group from "../../container/Group.js";
 import { PathContext } from "../../hooks/context/usePath.js";
 import PathModel from "../../model/component/path.js";
 import { getDrawPointType } from "./common.js";
 import DrawSegment from "./segment/index.js";
-const InnerDraw = (props) => {
-  const { way, ref, offset, startArrow, startArrows, endArrow, endArrows, children, ...strokeProps } = props;
+const InnerDraw = forwardRef((props, ref) => {
+  const { way, offset, startArrow, startArrows, endArrow, endArrows, children, ...strokeProps } = props;
   const waySegments = useMemo(() => {
     let preNodeType = "coordinate";
     const waySegments2 = [];
@@ -26,22 +26,27 @@ const InnerDraw = (props) => {
     }
     return waySegments2;
   }, [way]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(PathContext, { value: new PathModel(new Array(waySegments.length).fill([]), strokeProps.strokeWidth || 1, false), children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { ref, transform: `translate(${offset[0]}, ${offset[1]})`, children: [
-    waySegments.map((segment, index) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      DrawSegment,
-      {
-        index,
-        isLastSegment: index === waySegments.length - 1,
-        way: segment,
-        ...strokeProps,
-        endArrow: index === waySegments.length - 1 ? endArrow || endArrows : endArrows,
-        startArrow: index === waySegments.length - 1 ? startArrow || startArrows : startArrows
-      },
-      JSON.stringify(segment)
-    )),
-    children
-  ] }) });
-};
+  return /* @__PURE__ */ jsx(
+    PathContext.Provider,
+    {
+      value: new PathModel(new Array(waySegments.length).fill([]), Number(strokeProps.strokeWidth) || 1, false),
+      children: /* @__PURE__ */ jsxs(Group, { ref, transform: `translate(${offset[0]}, ${offset[1]})`, children: [
+        waySegments.map((segment, index) => /* @__PURE__ */ jsx(
+          DrawSegment,
+          {
+            index,
+            way: segment,
+            ...strokeProps,
+            endArrow: index === waySegments.length - 1 ? endArrow || endArrows : endArrows,
+            startArrow: index === waySegments.length - 1 ? startArrow || startArrows : startArrows
+          },
+          JSON.stringify(segment)
+        )),
+        children
+      ] })
+    }
+  );
+});
 export {
   InnerDraw as default
 };

package/dist/es/components/draw/index.js

@@ -0,0 +1,4 @@
+import Draw from "./Draw.js";
+export {
+  Draw as default
+};

package/dist/es/components/draw/segment/Segment.js

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import Path from "../../../elements/Path.js";
 import Group from "../../../container/Group.js";
@@ -8,7 +8,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(
@@ -30,11 +30,11 @@ const InnerDrawSegment = (props) => {
     const straightLine = line().x((d2) => d2[0]).y((d2) => d2[1]);
     return straightLine(realWay);
   }, [way]);
-  return endArrowPath || startArrowPath ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Group, { children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { d: d ?? "", ...strokeProps }),
+  return endArrowPath || startArrowPath ? /* @__PURE__ */ jsxs(Group, { children: [
+    /* @__PURE__ */ jsx(Path, { d: d ?? "", ...strokeProps }),
     startArrowPath ? startArrowPath.arrowPath : null,
     endArrowPath ? endArrowPath.arrowPath : null
-  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { d: d ?? "", ...strokeProps });
+  ] }) : /* @__PURE__ */ jsx(Path, { d: d ?? "", ...strokeProps });
 };
 export {
   InnerDrawSegment as default

package/dist/es/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/es/components/draw/segment/index.js

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import NodeModel from "../../../model/component/node.js";
 import { convertStrokeType } from "../../../utils/style/stroke.js";
@@ -6,7 +6,7 @@ import InnerDrawSegment from "./Segment.js";
 import useConvertWay from "./useConvertWay.js";
 import usePath from "../../../hooks/context/usePath.js";
 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(way);
   const { model, updateModel } = usePath();
@@ -18,13 +18,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__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     InnerDrawSegment,
     {
       way: pointWay,

package/dist/es/components/draw/segment/useArrow.js

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import useCalculate from "../../../hooks/context/useCalculate.js";
 import getArrowPath from "../arrow/index.js";
@@ -31,7 +31,7 @@ const useArrow = (linkConfig, arrowConfig) => {
     )}) rotate(${convertPrecision(degree * (180 / Math.PI), precision)})`;
     return {
       linkPoint,
-      arrowPath: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      arrowPath: /* @__PURE__ */ jsx(
         Path,
         {
           d,

package/dist/es/components/draw/segment/useConvertWay.js

@@ -6,7 +6,7 @@ import PolarPoint from "../../../model/geometry/point/PolarPoint.js";
 import { getDrawPointType } from "../common.js";
 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];
   }
@@ -18,7 +18,7 @@ const getVerticalPoint = (point1, point2, type) => {
   return type === "-|" ? [p2[0], p1[1]] : [p1[0], p2[1]];
 };
 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) => {
@@ -40,11 +40,12 @@ const useConvertWay = (way) => {
     () => way.map((item, index) => {
       const type = getDrawPointType(item);
       switch (type) {
-        case "coordinate":
+        case "coordinate": {
           const corPosition = formatPointPosition(item);
           cursor = corPosition;
           return corPosition;
-        case "node":
+        }
+        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."
@@ -59,7 +60,8 @@ const useConvertWay = (way) => {
           if (cb) subscribeCbs.push(cb);
           cursor = nodeModel.center;
           return nodeModel;
-        case "vertical":
+        }
+        case "vertical": {
           if ([0, way.length - 1].includes(index)) {
             throw new Error("Vertical point can not be the first point on path.");
           }
@@ -73,12 +75,14 @@ const useConvertWay = (way) => {
           const verPosition = getVerticalPoint(beforePosition, afterPosition, item);
           cursor = verPosition;
           return cursor;
-        default:
+        }
+        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.plus(convertedPos, cursor);
           if (type === "move") cursor = curPos;
           return curPos;
+        }
       }
     }),
     [way, nodeUpdateCount.current]

package/dist/es/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/es/components/node/InnerNode.js

@@ -1,5 +1,5 @@
-import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
-import { useRef, useLayoutEffect } from "react";
+import { jsxs } from "react/jsx-runtime";
+import { forwardRef, useRef, useLayoutEffect } from "react";
 import Group from "../../container/Group.js";
 import useNodeShape from "./_hooks/useNodeShape.js";
 import useNodeContent from "./_hooks/useNodeContent.js";
@@ -8,8 +8,8 @@ import { convertCssToPx } from "../../utils/css.js";
 import useNodes from "../../hooks/context/useNodes.js";
 import useCalculate from "../../hooks/context/useCalculate.js";
 import { convertPrecision } from "../../utils/math.js";
-const InnerNode = (props) => {
-  const { name, ref, position, width, height, innerSep, outerSep, rotate } = props;
+const InnerNode = forwardRef((props, ref) => {
+  const { name, position, width, height, innerSep, outerSep, rotate } = props;
   const nodeRef = useRef(null);
   const shapeRef = useRef(null);
   const contentRef = useRef(null);
@@ -70,7 +70,7 @@ const InnerNode = (props) => {
     },
     [name]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxs(
     Group,
     {
       ref: ref || nodeRef,
@@ -82,7 +82,7 @@ const InnerNode = (props) => {
       ]
     }
   );
-};
+});
 export {
   InnerNode as default
 };

package/dist/es/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/es/components/node/Node.js

@@ -1,5 +1,5 @@
-import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
-import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
 import InnerNode from "./InnerNode.js";
 import { convertCssToPx } from "../../utils/css.js";
 import { convertStrokeType, convertStrokeShortcut } from "../../utils/style/stroke.js";
@@ -7,7 +7,7 @@ import { convertFontSize, convertFontStyle } from "../../utils/style/font.js";
 import DescartesPoint from "../../model/geometry/point/DescartesPoint.js";
 import useScope from "../../hooks/context/useScope.js";
 import color, { hsl } from "../../node_modules/.pnpm/d3-color@3.1.0/node_modules/d3-color/src/color.js";
-const Node = (props) => {
+const Node = forwardRef((props, ref) => {
   const { offset: scopeOffset, node } = useScope();
   const nodeScopeProps = { offset: scopeOffset, ...node };
   const realProps = {
@@ -17,7 +17,7 @@ const Node = (props) => {
   };
   const { shape = "rectangle", width, height, position, offset, innerSep, outerSep, ...res1Props } = realProps;
   const { r, rx, ry, fill, fillOpacity, stroke = "transparent", strokeWidth = 1, strokeType, ...res2Props } = res1Props;
-  const { color: color$1 = "currentColor", size, fontSize, fontStyle, fontFamily, style, ...otherProps } = res2Props;
+  const { color: color$1 = "currentColor", size, fontSize, style, ...otherProps } = res2Props;
   const realPosition = useMemo(() => {
     const formatPosition = position ? DescartesPoint.formatPosition(position) : [0, 0];
     const formatOffset = offset ? DescartesPoint.formatPosition(offset) : [0, 0];
@@ -59,9 +59,10 @@ const Node = (props) => {
     [innerSep]
   );
   const adjustedOuterSep = useMemo(() => getSep(outerSep, 0), [outerSep]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(
     InnerNode,
     {
+      ref,
       width: convertCssToPx(width),
       height: convertCssToPx(height),
       shape,
@@ -81,7 +82,7 @@ const Node = (props) => {
       ...otherProps
     }
   );
-};
+});
 export {
   Node as default
 };

package/dist/es/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/es/components/node/_hooks/useNodeContent.js

@@ -1,11 +1,11 @@
-import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
 import { isValidElement, useMemo, cloneElement } from "react";
 import Text from "../../../elements/Text.js";
 const useNodeContent = (props, ref) => {
   const { color, size, opacity, fontWeight, fontStyle, fontFamily, fontStretch, children } = props;
   const isTextNode = children !== null && !isValidElement(children);
   return useMemo(
-    () => isTextNode ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+    () => isTextNode ? /* @__PURE__ */ jsx(
       Text,
       {
         fill: color,
@@ -18,7 +18,10 @@ const useNodeContent = (props, ref) => {
         ref,
         children
       }
-    ) : isValidElement(children) ? cloneElement(children, { ref }) : children,
+    ) : isValidElement(children) ? (
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      cloneElement(children, { ref })
+    ) : children,
     isTextNode ? [color, size, children] : [children]
   );
 };

package/dist/es/components/node/_hooks/useNodeShape.js

@@ -1,4 +1,4 @@
-import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import Rect from "../../../elements/Rect.js";
 const getShapeProps = (nodeProps) => {
@@ -27,7 +27,7 @@ const useNodeShape = (props, ref) => {
         return Rect;
     }
   }, [props.shape, ...Object.values(shapeProps)]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Shape, { ref, ...shapeProps });
+  return /* @__PURE__ */ jsx(Shape, { ref, ...shapeProps });
 };
 export {
   useNodeShape as default

package/dist/es/components/{pathNode → path-node}/PathNode.d.ts

@@ -1,4 +1,3 @@
-import { FC } from 'react';
 import { Direction } from '../../types/coordinate';
 import { Position } from '../../types/coordinate/descartes';
 import { NodeProps } from '../node/Node';
@@ -35,5 +34,15 @@ export type PathNodeProps = {
     /** 跟随箭头位置 */
     sloped?: boolean;
 } & PathNodePositionProps & PosShortcutProps & Omit<NodeProps, 'position'>;
-declare const PathNode: FC<PathNodeProps>;
+declare const PathNode: import('react').ForwardRefExoticComponent<{
+    segmentIndex?: number;
+    /** path 片段的下标 */
+    pos?: number;
+    /** 相对于路径的位置 */
+    anchor?: Direction | "center";
+    /** 偏移位置 */
+    offset?: Position;
+    /** 跟随箭头位置 */
+    sloped?: boolean;
+} & PathNodePositionProps & PosShortcutProps & Omit<NodeProps, "position"> & import('react').RefAttributes<SVGGElement>>;
 export default PathNode;

package/dist/es/components/{pathNode → path-node}/PathNode.js

@@ -1,5 +1,5 @@
-import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
-import { useId, useMemo, useState, useLayoutEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useId, useMemo, useState, useLayoutEffect } from "react";
 import useCalculate from "../../hooks/context/useCalculate.js";
 import useNodes from "../../hooks/context/useNodes.js";
 import useScope, { ScopeContext } from "../../hooks/context/useScope.js";
@@ -8,8 +8,8 @@ import { convertCssToPx } from "../../utils/css.js";
 import { convertPrecision } from "../../utils/math.js";
 import Node from "../node/Node.js";
 import useAnchor from "./useAnchor.js";
-const PathNode = (props) => {
-  const { segmentIndex = -1, offset = [0, 0], anchor, ref, left, right, above, below, name, ...resProps } = props;
+const PathNode = forwardRef((props, ref) => {
+  const { segmentIndex = -1, offset = [0, 0], anchor, left, right, above, below, name, ...resProps } = props;
   const { pos, veryNearStart, veryNearEnd, start, nearStart, midway, nearEnd, end, sloped, ...nodeProps } = resProps;
   const id = useId();
   const realName = name ?? id;
@@ -60,7 +60,7 @@ const PathNode = (props) => {
     setAdjustOffset(DescartesPoint.plus(anchorPosition, directionPosition, offset));
   }, [anchorPosition, directionPos]);
   const scope = useScope();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ScopeContext, { value: { ...scope, offset: [0, 0] }, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: { ...scope, offset: [0, 0] }, children: /* @__PURE__ */ jsx(
     Node,
     {
       name: realName,
@@ -70,7 +70,7 @@ const PathNode = (props) => {
       ...nodeProps
     }
   ) });
-};
+});
 export {
   PathNode as default
 };