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

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,12 @@
-import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
-import { ScopeContext } from "../hooks/context/useScope.js";
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import useScope, { 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;
+  const baseScopeValue = useScope();
+  return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: { ...baseScopeValue, ...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/arrow/circle.d.ts

@@ -0,0 +1,7 @@
+import { ArrowAttributes } from './types';
+declare const getCirclePath: (attributes: ArrowAttributes) => {
+    d: string;
+    offsetDistance: number;
+    insertDistance: number;
+};
+export default getCirclePath;

package/dist/es/components/draw/arrow/circle.js

@@ -0,0 +1,20 @@
+const getCirclePath = (attributes) => {
+  const {
+    width = 5,
+    left = false,
+    right = false,
+    scale = 1
+  } = attributes;
+  const radius = width / 2 * scale;
+  const diameter = width * scale;
+  const startPoint = [0, 0];
+  const path = `M ${startPoint.join(",")} ` + (left ? `A ${radius},${radius} 0 1,0 ${-diameter},0 Z` : right ? `A ${radius},${radius} 0 1,1 ${-diameter},0 Z` : `A ${radius},${radius} 0 1,0 ${-diameter},0A ${radius},${radius} 0 1,0 ${startPoint.join(",")} Z`);
+  return {
+    d: path,
+    offsetDistance: radius,
+    insertDistance: radius
+  };
+};
+export {
+  getCirclePath as default
+};

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

@@ -1,8 +1,11 @@
+import getCirclePath from "./circle.js";
 import getStealthPath from "./stealth.js";
 const getArrowPath = (type, attributes) => {
   switch (type) {
     case "Stealth":
       return getStealthPath(attributes);
+    case "Circle":
+      return getCirclePath(attributes);
   }
 };
 export {

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

@@ -2,7 +2,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/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.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/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];
   }
@@ -15,10 +15,16 @@ 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) => {
@@ -37,14 +43,15 @@ const useConvertWay = (way) => {
   const subscribeCbs = [];
   let allNodeInit = true;
   const result = useMemo(
-    () => way.map((item, index) => {
+    () => way.reduce((acc, item, index) => {
       const type = 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."
@@ -58,8 +65,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.");
           }
@@ -71,16 +79,23 @@ 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.plus(convertedPos, cursor);
           if (type === "move") cursor = curPos;
-          return curPos;
+          return acc.concat(curPos);
+        }
       }
-    }),
+    }, []),
     [way, nodeUpdateCount.current]
   );
   useLayoutEffect(() => () => {

package/dist/es/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/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
 };