@retikz/core 0.0.1-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 pionpill
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,2 @@
+# retikz
+使用 react，d3 实现 tikz 绘制流程图

package/dist/es/_virtual/jsx-runtime.js

@@ -0,0 +1,5 @@
+import { __require as requireJsxRuntime } from "../node_modules/.pnpm/react@19.0.0/node_modules/react/jsx-runtime.js";
+var jsxRuntimeExports = requireJsxRuntime();
+export {
+  jsxRuntimeExports as j
+};

package/dist/es/_virtual/jsx-runtime2.js

@@ -0,0 +1,4 @@
+var jsxRuntime = { exports: {} };
+export {
+  jsxRuntime as __module
+};

package/dist/es/_virtual/react-jsx-runtime.development.js

@@ -0,0 +1,4 @@
+var reactJsxRuntime_development = {};
+export {
+  reactJsxRuntime_development as __exports
+};

package/dist/es/_virtual/react-jsx-runtime.production.js

@@ -0,0 +1,4 @@
+var reactJsxRuntime_production = {};
+export {
+  reactJsxRuntime_production as __exports
+};

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

@@ -0,0 +1,6 @@
+import { FC, 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>>;
+export default Scope;

package/dist/es/components/Scope.js

@@ -0,0 +1,10 @@
+import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+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 }) });
+};
+export {
+  Scope as default
+};

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

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+import { SurfaceProps } from '../container/Surface';
+import { CalculateProps } from '../hooks/context/useCalculate';
+import { ScopeProps } from '../hooks/context/useScope';
+export type TikZProps = {
+    children: ReactNode;
+} & Partial<CalculateProps> & ScopeProps & SurfaceProps;
+declare const TikZ: FC<TikZProps>;
+export default TikZ;

package/dist/es/components/TikZ.js

@@ -0,0 +1,12 @@
+import { j as jsxRuntimeExports } from "../_virtual/jsx-runtime.js";
+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 }) }) }) });
+};
+export {
+  TikZ as default
+};

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

@@ -0,0 +1,18 @@
+import { FC, ReactElement, Ref } 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;
+    /** 同 stroke */
+    color?: string;
+    /** 线段样式快捷属性 */
+    strokeType?: StrokeType;
+    children?: ReactElement | ReactElement[] | null;
+} & StrokeProps & StrokeShortcutProps & ArrowProps;
+declare const Draw: FC<DrawProps>;
+export default Draw;

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

@@ -0,0 +1,34 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
+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: scopeProps } = useScope();
+  const realProps = { ...scopeProps, ...props };
+  const { offset, color, stroke, strokeWidth, startArrow, startArrows, endArrow, endArrows, ...drawProps } = 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(
+    InnerDraw,
+    {
+      ...getStrokeTypes(),
+      offset: convertOffset,
+      stroke: realStroke,
+      strokeWidth: strokeWidth || 1,
+      startArrow: realStartArrow,
+      startArrows: realStartArrows,
+      endArrow: realEndArrow,
+      endArrows: realEndArrows,
+      ...drawProps
+    }
+  );
+};
+export {
+  Draw as default
+};

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

@@ -0,0 +1,13 @@
+import { FC, ReactNode, Ref } 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>;
+export default InnerDraw;

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

@@ -0,0 +1,47 @@
+import { j as jsxRuntimeExports } from "../../_virtual/jsx-runtime.js";
+import { 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 waySegments = useMemo(() => {
+    let preNodeType = "coordinate";
+    const waySegments2 = [];
+    let waySegment = [];
+    for (let i = 0; i < way.length; i++) {
+      const point = way[i];
+      const currentNodeType = getDrawPointType(point);
+      waySegment.push(point);
+      if (currentNodeType === "node" && preNodeType === "node" && waySegment.length >= 2) {
+        waySegments2.push(waySegment);
+        waySegment = [waySegment[waySegment.length - 1]];
+      }
+      if (i === way.length - 1 && waySegment.length > 1) {
+        waySegments2.push(waySegment);
+      }
+      preNodeType = currentNodeType;
+    }
+    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
+  ] }) });
+};
+export {
+  InnerDraw as default
+};

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

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

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

@@ -0,0 +1,10 @@
+import getStealthPath from "./stealth.js";
+const getArrowPath = (type, attributes) => {
+  switch (type) {
+    case "Stealth":
+      return getStealthPath(attributes);
+  }
+};
+export {
+  getArrowPath as default
+};

package/dist/es/components/draw/arrow/stealth.d.ts

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

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

@@ -0,0 +1,29 @@
+import line from "../../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/line.js";
+const getStealthPath = (attributes) => {
+  const {
+    width = 4,
+    length = 5,
+    insert = 1.75,
+    left = false,
+    right = false,
+    scale = 1,
+    strokeWidth = 1,
+    round,
+    strokeLinejoin = "miter"
+  } = attributes;
+  const startPoint = [0, 0];
+  const leftPoint = [-length * scale, -width / 2 * scale];
+  const insertPoint = [(-length + insert) * scale, 0];
+  const rightPoint = [-length * scale, width / 2 * scale];
+  const way = left ? [startPoint, leftPoint, insertPoint] : right ? [startPoint, rightPoint, insertPoint] : [startPoint, leftPoint, insertPoint, rightPoint];
+  const straightLine = line().x((d) => d[0]).y((d) => d[1]);
+  const radio = width / 2 / Math.sqrt(length ** 2 + (width / 2) ** 2);
+  return {
+    d: straightLine(way) + "Z",
+    offsetDistance: round || strokeLinejoin === "round" ? strokeWidth / 2 : strokeWidth / (2 * radio),
+    insertDistance: length - insert
+  };
+};
+export {
+  getStealthPath as default
+};

package/dist/es/components/draw/arrow/types.d.ts

@@ -0,0 +1,21 @@
+/** 箭头属性 */
+export type ArrowAttributes = {
+    width?: number;
+    length?: number;
+    insert?: number;
+    left?: boolean;
+    right?: boolean;
+    round?: boolean;
+    strokeWidth?: number;
+    scale?: number;
+    linkType?: 'center' | 'end';
+    strokeLinejoin?: "round" | "inherit" | "bevel" | "miter";
+};
+export type ArrowPathConfig = {
+    /** path d 属性路径 */
+    d: string;
+    /** 箭头顶点与 path 顶点的距离 */
+    offsetDistance: number;
+    /** insert 点与 path 顶点的距离 */
+    insertDistance: number;
+};

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

@@ -0,0 +1,4 @@
+import { PointPosition } from '../../types/coordinate';
+import { DrawPointType } from './types';
+/** 获取点类型 */
+export declare const getDrawPointType: (point: string | PointPosition) => DrawPointType;

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

@@ -0,0 +1,12 @@
+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 (point.match(moveReg)) return "move";
+  if (point.match(offsetReg)) return "offset";
+  return "node";
+};
+export {
+  getDrawPointType
+};

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

@@ -0,0 +1,3 @@
+import { default as Draw } from './Draw';
+export type { DrawProps } from './Draw';
+export default Draw;

package/dist/es/components/draw/segment/Segment.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Position } from '../../../types/coordinate/descartes';
+import { StrokeProps } from '../../../types/svg/stroke';
+import { ArrowConfig } from '../types';
+export type InnerDrawSegmentProps = {
+    /** 路径，始末节点为 undefined 表示临近点在 node 外边界内 */
+    way: Position[];
+    startArrow?: ArrowConfig;
+    endArrow?: ArrowConfig;
+} & StrokeProps;
+declare const InnerDrawSegment: FC<InnerDrawSegmentProps>;
+export default InnerDrawSegment;

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

@@ -0,0 +1,41 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { useMemo } from "react";
+import Path from "../../../elements/Path.js";
+import Group from "../../../container/Group.js";
+import useArrow from "./useArrow.js";
+import line from "../../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/line.js";
+const InnerDrawSegment = (props) => {
+  const { way, startArrow, endArrow, ...strokeProps } = props;
+  const pickedArrowStrokeProps = {
+    stroke: strokeProps.stroke,
+    strokeWidth: strokeProps.strokeWidth,
+    strokeOpacity: strokeProps.strokeOpacity
+  };
+  const startArrowPath = useArrow(
+    { position: way[0], nearPosition: way[1], arrowType: "start" },
+    startArrow ? { ...pickedArrowStrokeProps, ...startArrow } : void 0
+  );
+  const endArrowPath = useArrow(
+    { position: way[way.length - 1], nearPosition: way[way.length - 2], arrowType: "end" },
+    endArrow ? { ...pickedArrowStrokeProps, ...endArrow } : void 0
+  );
+  const d = useMemo(() => {
+    const realWay = [...way];
+    if (startArrowPath) {
+      realWay[0] = startArrowPath.linkPoint;
+    }
+    if (endArrowPath) {
+      realWay[realWay.length - 1] = endArrowPath.linkPoint;
+    }
+    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 }),
+    startArrowPath ? startArrowPath.arrowPath : null,
+    endArrowPath ? endArrowPath.arrowPath : null
+  ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Path, { d: d ?? "", ...strokeProps });
+};
+export {
+  InnerDrawSegment as default
+};

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

@@ -0,0 +1,19 @@
+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;
+    endArrow?: ArrowConfig;
+} & StrokeProps;
+/** 单条连续的路径 */
+declare const DrawSegment: FC<DrawSegmentProps>;
+export default DrawSegment;

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

@@ -0,0 +1,41 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { useMemo } from "react";
+import NodeModel from "../../../model/component/node.js";
+import { convertStrokeType } from "../../../utils/style/stroke.js";
+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 { strokeType = "solid", strokeWidth = 1, ...strokeProps } = resProps;
+  const [convertedWay, nodesInit] = useConvertWay(way);
+  const { model, updateModel } = usePath();
+  const pointWay = useMemo(() => {
+    const realWay = convertedWay.map((wayPoint, index2) => {
+      if (wayPoint instanceof NodeModel) {
+        const neighborPoint = index2 === 0 ? convertedWay[1] : convertedWay[index2 - 1];
+        return wayPoint.getCrossPoint(neighborPoint instanceof NodeModel ? neighborPoint.center : neighborPoint);
+      }
+      return wayPoint;
+    });
+    const newWay = [...model == null ? void 0 : model.ways];
+    newWay[index] = realWay;
+    updateModel({ ways: newWay, init: nodesInit });
+    return realWay;
+  }, [convertedWay]);
+  if (!nodesInit) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    InnerDrawSegment,
+    {
+      way: pointWay,
+      startArrow,
+      endArrow,
+      strokeWidth,
+      ...convertStrokeType(strokeType, strokeWidth),
+      ...strokeProps
+    }
+  );
+};
+export {
+  DrawSegment as default
+};

package/dist/es/components/draw/segment/useArrow.d.ts

@@ -0,0 +1,12 @@
+import { ArrowConfig } from '../types';
+import { Position } from '../../../types/coordinate/descartes';
+export type ArrowLinkConfig = {
+    nearPosition: Position;
+    position: Position;
+    arrowType: 'start' | 'end';
+};
+declare const useArrow: (linkConfig: ArrowLinkConfig, arrowConfig?: ArrowConfig) => {
+    linkPoint: Position;
+    arrowPath: import("react/jsx-runtime").JSX.Element;
+} | null;
+export default useArrow;

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

@@ -0,0 +1,52 @@
+import { j as jsxRuntimeExports } from "../../../_virtual/jsx-runtime.js";
+import { useMemo } from "react";
+import useCalculate from "../../../hooks/context/useCalculate.js";
+import getArrowPath from "../arrow/index.js";
+import Path from "../../../elements/Path.js";
+import Line from "../../../model/equation/line.js";
+import { convertPrecision } from "../../../utils/math.js";
+const useArrow = (linkConfig, arrowConfig) => {
+  const { precision } = useCalculate();
+  return useMemo(() => {
+    if (!arrowConfig) return null;
+    const { position, nearPosition } = linkConfig;
+    const { type, stroke, linkType = "end", round, strokeLinejoin, strokeWidth, ...strokeProps } = arrowConfig;
+    const degree = Line.getDegree(nearPosition, position);
+    const isRound = round || strokeLinejoin === "round";
+    const realStrokeWidth = strokeWidth ?? 1;
+    const { d, offsetDistance, insertDistance } = getArrowPath(type, arrowConfig);
+    const endOffset = [
+      (isRound ? realStrokeWidth : offsetDistance) * Math.cos(degree),
+      (isRound ? realStrokeWidth : offsetDistance) * Math.sin(degree)
+    ];
+    const translatePosition = linkType === "end" ? [position[0] - endOffset[0], position[1] - endOffset[1]] : [position[0] + insertDistance * Math.cos(degree), position[1] + insertDistance * Math.sin(degree)];
+    const linkPoint = linkType === "end" ? [
+      position[0] - insertDistance * Math.cos(degree) - endOffset[0],
+      position[1] - insertDistance * Math.sin(degree) - endOffset[1]
+    ] : position;
+    const transform = `translate(
+      ${convertPrecision(translatePosition[0], precision)}, ${convertPrecision(
+      translatePosition[1],
+      precision
+    )}) rotate(${convertPrecision(degree * (180 / Math.PI), precision)})`;
+    return {
+      linkPoint,
+      arrowPath: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Path,
+        {
+          d,
+          strokeWidth,
+          strokeLinejoin: round ? "round" : "miter",
+          strokeMiterlimit: 10,
+          fill: stroke || "currentColor",
+          stroke,
+          transform,
+          ...strokeProps
+        }
+      )
+    };
+  }, [arrowConfig, linkConfig]);
+};
+export {
+  useArrow as default
+};

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

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

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

@@ -0,0 +1,95 @@
+import { useRef, useMemo, useLayoutEffect } from "react";
+import useNodes from "../../../hooks/context/useNodes.js";
+import useForceUpdate from "../../../hooks/useForceUpdate.js";
+import DescartesPoint from "../../../model/geometry/point/DescartesPoint.js";
+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")) {
+    const p = point;
+    return [p.x, p.y];
+  }
+  return PolarPoint.convertPolarToDescartesPosition(point);
+};
+const getVerticalPoint = (point1, point2, type) => {
+  const p1 = formatPointPosition(point1);
+  const p2 = formatPointPosition(point2);
+  return type === "-|" ? [p2[0], p1[1]] : [p1[0], p2[1]];
+};
+const convertOffsetAndMovePoint = (point) => {
+  const filterPoint = point.replace(/[+()\[\]\s]/g, "");
+  return filterPoint.split(",").map((item) => parseFloat(item));
+};
+const useConvertWay = (way) => {
+  const { getModel, subscribeModel } = useNodes();
+  const forceUpdate = useForceUpdate();
+  const nodeUpdateCount = useRef(0);
+  let cursor = [0, 0];
+  const tryGetModel = (name) => {
+    const model = getModel(name);
+    if (!model) {
+      throw new Error(`Node ${name} is not defined`);
+    }
+    cursor = model.center;
+    return model;
+  };
+  const subscribeCbs = [];
+  let allNodeInit = true;
+  const result = useMemo(
+    () => way.map((item, index) => {
+      const type = getDrawPointType(item);
+      switch (type) {
+        case "coordinate":
+          const corPosition = formatPointPosition(item);
+          cursor = corPosition;
+          return 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."
+            );
+          }
+          const nodeModel = tryGetModel(item);
+          if (!nodeModel.init) allNodeInit = false;
+          const cb = subscribeModel(item, () => {
+            nodeUpdateCount.current += 1;
+            forceUpdate();
+          });
+          if (cb) subscribeCbs.push(cb);
+          cursor = nodeModel.center;
+          return nodeModel;
+        case "vertical":
+          if ([0, way.length - 1].includes(index)) {
+            throw new Error("Vertical point can not be the first point on path.");
+          }
+          const beforePosition = cursor;
+          const afterPoint = way[index + 1];
+          const afterPointType = getDrawPointType(afterPoint);
+          if (["vertical", "offset", "move"].includes(afterPointType)) {
+            throw new Error("Vertical point can not be followed by these point type: vertical offset move.");
+          }
+          const afterPosition = afterPointType === "node" ? tryGetModel(afterPoint).center : formatPointPosition(afterPoint);
+          const verPosition = getVerticalPoint(beforePosition, afterPosition, item);
+          cursor = verPosition;
+          return cursor;
+        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]
+  );
+  useLayoutEffect(() => () => {
+    subscribeCbs.forEach((cb) => cb && cb());
+  });
+  return [result, allNodeInit];
+};
+export {
+  useConvertWay as default,
+  formatPointPosition,
+  getVerticalPoint
+};

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

@@ -0,0 +1,29 @@
+import { PointPosition } from '../../types/coordinate';
+import { StrokeProps } from '../../types/svg/stroke';
+import { TikZKey } from '../../types/tikz';
+import { ArrowPositionAttributes, ArrowType } from './arrow';
+export type ArrowConfig = {
+    type: ArrowType;
+    fill?: string;
+} & ArrowPositionAttributes & StrokeProps;
+/** 垂直路径点，临近的节点不能都是特殊路径点 */
+export type VerticalDrawPosition = '-|' | '|-';
+/** 偏移与移动点 */
+export type OffSetOrMovePosition = string;
+/** 路径点类型：节点，坐标，垂点，偏移点，移动点 */
+export type DrawPointType = 'node' | 'coordinate' | 'vertical' | 'offset' | 'move';
+/** 路径节点类型 */
+export type DrawWayType = TikZKey | PointPosition | VerticalDrawPosition | OffSetOrMovePosition;
+/** 路径片段节点类型 */
+export type DrawWaySegmentType = [
+    TikZKey | PointPosition,
+    ...Array<PointPosition | VerticalDrawPosition | OffSetOrMovePosition>,
+    TikZKey | PointPosition
+];
+/** 箭头属性 */
+export type ArrowProps<T = ArrowType | ArrowConfig> = {
+    startArrow?: T;
+    startArrows?: T;
+    endArrow?: T;
+    endArrows?: T;
+};