@retikz/core 0.0.1-rc.0

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const line = require("../../../node_modules/.pnpm/d3-shape@3.2.0/node_modules/d3-shape/src/line.cjs");
+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.default().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
+  };
+};
+exports.default = getStealthPath;

package/dist/lib/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/lib/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/lib/components/draw/common.cjs

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+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";
+};
+exports.getDrawPointType = getDrawPointType;

package/dist/lib/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/lib/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/lib/components/draw/segment/Segment.cjs

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

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

@@ -0,0 +1,41 @@
+"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 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 { strokeType = "solid", strokeWidth = 1, ...strokeProps } = resProps;
+  const [convertedWay, nodesInit] = useConvertWay.default(way);
+  const { model, updateModel } = usePath.default();
+  const pointWay = require$$0.useMemo(() => {
+    const realWay = convertedWay.map((wayPoint, index2) => {
+      if (wayPoint instanceof node.default) {
+        const neighborPoint = index2 === 0 ? convertedWay[1] : convertedWay[index2 - 1];
+        return wayPoint.getCrossPoint(neighborPoint instanceof node.default ? 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__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    Segment.default,
+    {
+      way: pointWay,
+      startArrow,
+      endArrow,
+      strokeWidth,
+      ...stroke.convertStrokeType(strokeType, strokeWidth),
+      ...strokeProps
+    }
+  );
+};
+exports.default = DrawSegment;

package/dist/lib/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/lib/components/draw/segment/useArrow.cjs

@@ -0,0 +1,52 @@
+"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 useCalculate = require("../../../hooks/context/useCalculate.cjs");
+const index = require("../arrow/index.cjs");
+const Path = require("../../../elements/Path.cjs");
+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(() => {
+    if (!arrowConfig) return null;
+    const { position, nearPosition } = linkConfig;
+    const { type, stroke, linkType = "end", round, strokeLinejoin, strokeWidth, ...strokeProps } = arrowConfig;
+    const degree = line.default.getDegree(nearPosition, position);
+    const isRound = round || strokeLinejoin === "round";
+    const realStrokeWidth = strokeWidth ?? 1;
+    const { d, offsetDistance, insertDistance } = index.default(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(
+      ${math.convertPrecision(translatePosition[0], precision)}, ${math.convertPrecision(
+      translatePosition[1],
+      precision
+    )}) rotate(${math.convertPrecision(degree * (180 / Math.PI), precision)})`;
+    return {
+      linkPoint,
+      arrowPath: /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+        Path.default,
+        {
+          d,
+          strokeWidth,
+          strokeLinejoin: round ? "round" : "miter",
+          strokeMiterlimit: 10,
+          fill: stroke || "currentColor",
+          stroke,
+          transform,
+          ...strokeProps
+        }
+      )
+    };
+  }, [arrowConfig, linkConfig]);
+};
+exports.default = useArrow;

package/dist/lib/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/lib/components/draw/segment/useConvertWay.cjs

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const require$$0 = require("react");
+const useNodes = require("../../../hooks/context/useNodes.cjs");
+const useForceUpdate = require("../../../hooks/useForceUpdate.cjs");
+const DescartesPoint = require("../../../model/geometry/point/DescartesPoint.cjs");
+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")) {
+    const p = point;
+    return [p.x, p.y];
+  }
+  return PolarPoint.default.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.default();
+  const forceUpdate = useForceUpdate.default();
+  const nodeUpdateCount = require$$0.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 = require$$0.useMemo(
+    () => way.map((item, index) => {
+      const type = common.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 = common.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.default.plus(convertedPos, cursor);
+          if (type === "move") cursor = curPos;
+          return curPos;
+      }
+    }),
+    [way, nodeUpdateCount.current]
+  );
+  require$$0.useLayoutEffect(() => () => {
+    subscribeCbs.forEach((cb) => cb && cb());
+  });
+  return [result, allNodeInit];
+};
+exports.default = useConvertWay;
+exports.formatPointPosition = formatPointPosition;
+exports.getVerticalPoint = getVerticalPoint;

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

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

@@ -0,0 +1,88 @@
+"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 Group = require("../../container/Group.cjs");
+const useNodeShape = require("./_hooks/useNodeShape.cjs");
+const useNodeContent = require("./_hooks/useNodeContent.cjs");
+const useNodeConfig = require("./_hooks/useNodeConfig.cjs");
+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 { getModel, updateModel, deleteModel } = useNodes.default();
+  const { precision } = useCalculate.default();
+  const nodeConfig = useNodeConfig.default();
+  nodeConfig.current.position = position;
+  if (name && !getModel(name)) {
+    updateModel(name, nodeConfig.current, false);
+  }
+  const groupElement = ref && "current" in ref ? ref.current : nodeRef.current;
+  require$$0.useLayoutEffect(() => {
+    const contentElement = contentRef.current;
+    if (!contentElement) return;
+    const { width: elementWidth, height: elementHeight } = contentElement.getBoundingClientRect();
+    nodeConfig.current.contentSize = [Math.max(elementWidth, width || 0), Math.max(elementHeight, height || 0)];
+  });
+  const getSep = (sep) => {
+    const { width: width2 = 100, height: height2 = 100 } = (groupElement == null ? void 0 : groupElement.getBoundingClientRect()) || {};
+    const remPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
+    const emPx = groupElement ? parseFloat(getComputedStyle(groupElement).fontSize) : remPx;
+    return {
+      left: css.convertCssToPx(sep.left, { remPx, emPx, parentPx: width2 }),
+      right: css.convertCssToPx(sep.right, { remPx, emPx, parentPx: width2 }),
+      top: css.convertCssToPx(sep.top, { remPx, emPx, parentPx: height2 }),
+      bottom: css.convertCssToPx(sep.bottom, { remPx, emPx, parentPx: height2 })
+    };
+  };
+  require$$0.useLayoutEffect(() => {
+    nodeConfig.current.innerSep = getSep(innerSep);
+  }, [innerSep]);
+  require$$0.useLayoutEffect(() => {
+    nodeConfig.current.outerSep = getSep(outerSep);
+  }, [outerSep]);
+  require$$0.useLayoutEffect(() => {
+    var _a, _b, _c, _d;
+    const {
+      contentSize: [width2, height2],
+      innerSep: innerSep2
+    } = nodeConfig.current;
+    const realX = -width2 / 2 - innerSep2.left;
+    (_a = shapeRef.current) == null ? void 0 : _a.setAttribute("x", math.convertPrecision(realX, precision).toString());
+    const realY = -height2 / 2 - innerSep2.top;
+    (_b = shapeRef.current) == null ? void 0 : _b.setAttribute("y", math.convertPrecision(realY, precision).toString());
+    const realWidth = width2 + innerSep2.left + innerSep2.right;
+    (_c = shapeRef.current) == null ? void 0 : _c.setAttribute("width", math.convertPrecision(realWidth, precision).toString());
+    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(() => {
+    if (name) updateModel(name, nodeConfig.current);
+  });
+  require$$0.useLayoutEffect(
+    () => () => {
+      if (name) {
+        deleteModel(name);
+      }
+    },
+    [name]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsxs(
+    Group.default,
+    {
+      ref: ref || nodeRef,
+      id: name,
+      transform: `translate(${position[0]}, ${position[1]}) ${rotate ? `rotate(${rotate})` : ""}`,
+      children: [
+        useNodeShape.default(props, shapeRef),
+        useNodeContent.default(props, contentRef)
+      ]
+    }
+  );
+};
+exports.default = InnerNode;

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

@@ -0,0 +1,33 @@
+import { FC, ReactNode } from 'react';
+import { Position } from '../../types/coordinate/descartes';
+import { StrokeProps } from '../../types/svg/stroke';
+import { TikZProps } from '../../types/tikz';
+import { DirectionDistance } from '../../types/distance';
+import { FontProps } from '../../types/svg/font';
+/** 节点外边框形状 */
+export type NodeShape = 'rectangle';
+/** 外层形状相关属性 */
+export type ShapeProps = {
+    shape: NodeShape;
+    rx?: number | string;
+    ry?: number | string;
+    fill?: string;
+    fillOpacity?: number;
+} & StrokeProps;
+/** 内容相关属性 */
+export type ContentProps = {
+    color: string;
+    opacity?: number;
+    children?: ReactNode;
+    size?: string | number;
+} & FontProps;
+export type InnerNodeProps = {
+    position: Position;
+    width?: number;
+    height?: number;
+    innerSep: DirectionDistance<number | string>;
+    outerSep: DirectionDistance<number | string>;
+    rotate?: number;
+} & TikZProps & ContentProps & ShapeProps;
+declare const InnerNode: FC<InnerNodeProps>;
+export default InnerNode;

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

@@ -0,0 +1,87 @@
+"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 InnerNode = require("./InnerNode.cjs");
+const css = require("../../utils/css.cjs");
+const stroke = require("../../utils/style/stroke.cjs");
+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 { offset: scopeOffset, node } = useScope.default();
+  const nodeScopeProps = { offset: scopeOffset, ...node };
+  const realProps = {
+    ...nodeScopeProps,
+    ...props,
+    offset: DescartesPoint.default.plus(scopeOffset || [0, 0], props.offset || [0, 0])
+  };
+  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 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(() => {
+    if (color$1 === "auto" && fill && fill !== "currentColor") {
+      const fillColor = color.default(fill);
+      if (!fillColor) return color$1 || "currentColor";
+      fillColor.opacity = fillOpacity || 1;
+      const lightness = color.hsl(fillColor).l;
+      return lightness < 0.5 ? "white" : "black";
+    }
+    return color$1 || "currentColor";
+  }, [color$1, fill, fillOpacity]);
+  const realRx = rx || r;
+  const realRy = ry || r;
+  const getStrokeAttributes = () => strokeType ? stroke.convertStrokeType(strokeType, strokeWidth) : stroke.convertStrokeShortcut(otherProps, strokeWidth);
+  const getSep = (sep, defaultVal) => {
+    if (typeof sep !== "object") {
+      return {
+        left: sep ?? defaultVal,
+        right: sep ?? defaultVal,
+        top: sep ?? defaultVal,
+        bottom: sep ?? defaultVal
+      };
+    }
+    return {
+      left: sep.left ?? sep.x ?? defaultVal,
+      right: sep.right ?? sep.x ?? defaultVal,
+      top: sep.top ?? sep.y ?? defaultVal,
+      bottom: sep.bottom ?? sep.y ?? defaultVal
+    };
+  };
+  const getFontStyle = () => font.convertFontStyle(style);
+  const adjustFontSize = require$$0.useMemo(() => font.convertFontSize(size || fontSize), [size, fontSize]);
+  const adjustedInnerSep = require$$0.useMemo(
+    () => getSep(innerSep, css.convertCssToPx(adjustFontSize) / 3 || "0.3333em"),
+    [innerSep]
+  );
+  const adjustedOuterSep = require$$0.useMemo(() => getSep(outerSep, 0), [outerSep]);
+  return /* @__PURE__ */ jsxRuntime.jsxRuntimeExports.jsx(
+    InnerNode.default,
+    {
+      width: css.convertCssToPx(width),
+      height: css.convertCssToPx(height),
+      shape,
+      position: realPosition,
+      color: realColor,
+      fill: fill || "transparent",
+      fillOpacity,
+      rx: realRx,
+      ry: realRy,
+      stroke: stroke$1,
+      strokeWidth,
+      innerSep: adjustedInnerSep,
+      outerSep: adjustedOuterSep,
+      size: adjustFontSize,
+      ...getFontStyle(),
+      ...getStrokeAttributes(),
+      ...otherProps
+    }
+  );
+};
+exports.default = Node;