react-tree-svg - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

lib-esm/components/Arrow.d.ts

@@ -9,2 +9,3 @@ import { Point } from '../types/Point';
 export declare function Arrow(props: {
+    id: string;
     from: Point;
@@ -11,0 +12,0 @@ to: Point;

lib-esm/components/Arrow.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { CenteredText } from './CenteredText';
-import { MarkerDef } from './MarkerDef';
+import { refX } from './MarkerDef.utils';
 import { RightText } from './RightText';
@@ -12,5 +12,4 @@ /**
 export function Arrow(props) {
-    const { from, to, label, labelPosition = 'center' } = props;
+    const { id, from, to, label, labelPosition = 'center' } = props;
     const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-    const refX = MarkerDef(props).props.children.props.refX;
     const headInflectionPoint = {
@@ -21,4 +20,3 @@ x: to.x - refX * 2, // refX attribute of the marker element in the Arrow component shifts the arrow head to the left, and that the vertices of the arrow head are set to refX, which means that the beginning of the arrow head is refX * 2 to the left.
     const d = `M ${from.x} ${from.y} C ${middle.x} ${from.y}  ${middle.x} ${to.y}  ${headInflectionPoint.x} ${to.y} Q ${headInflectionPoint.x} ${to.y}  ${to.x} ${to.y} `;
-    //const d = `M ${from.x} ${from.y} C ${middle.x} ${from.y}  ${middle.x} ${from.y}  ${middle.x} ${middle.y} ${middle.x} ${to.y} ${middle.x} ${to.y}  ${to.x} ${to.y}`;
-    return (_jsxs("g", { children: [_jsx("path", { d: d, style: {
+    return (_jsxs("g", { id: id, children: [_jsx("path", { d: d, style: {
                     fill: 'none',
@@ -25,0 +23,0 @@ strokeWidth: '2',

lib-esm/components/CenteredText.js

 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function CenteredText(props) {
     const { x, y, label } = props;
-    const labelPosition = 'translate(' + x + ',' + y + ')';
+    const labelPosition = `translate(${x},${y})`;
     return (_jsxs(_Fragment, { children: [_jsx("text", { textAnchor: "middle", transform: labelPosition, stroke: "rgba(255,255,255,0.5)", strokeWidth: "0.5em", alignmentBaseline: "middle", fill: "none", fontSize: "14", children: label }), _jsx("text", { textAnchor: "middle", transform: labelPosition, stroke: "none", alignmentBaseline: "middle", fontSize: "14", fill: "black", children: label })] }));
 }
 //# sourceMappingURL=CenteredText.js.map

lib-esm/components/MarkerDef.d.ts

@@ -1,2 +0,2 @@
-export declare function MarkerDef(props: any): import("react/jsx-runtime").JSX.Element;
+export declare function MarkerDef(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MarkerDef.d.ts.map

lib-esm/components/MarkerDef.js

 import { jsx as _jsx } from "react/jsx-runtime";
-export function MarkerDef(props) {
-    return (_jsx("defs", { children: _jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: _jsx("polygon", { points: "0 0, 10 3.5, 0 7" }) }) }));
+import { refX } from './MarkerDef.utils';
+export function MarkerDef() {
+    return (_jsx("defs", { children: _jsx("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: refX, refY: "3.5", orient: "auto", children: _jsx("polygon", { points: "0 0, 10 3.5, 0 7" }) }) }));
 }
 //# sourceMappingURL=MarkerDef.js.map

lib-esm/components/RightText.js

 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 export function RightText(props) {
     const { x, y, label } = props;
-    const labelPosition = 'translate(' + x + ',' + y + ')';
+    const labelPosition = `translate(${x},${y})`;
     return (_jsxs(_Fragment, { children: [_jsx("text", { textAnchor: "end", transform: labelPosition, stroke: "rgba(255,255,255,0.5)", strokeWidth: "0.5em", fill: "none", fontSize: "14", children: label }), _jsx("text", { textAnchor: "end", transform: labelPosition, stroke: "none", fontSize: "14", fill: "black", children: label })] }));
 }
 //# sourceMappingURL=RightText.js.map

lib-esm/components/SVGBoxesTree.js

@@ -9,6 +9,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     const { tree, ...options } = props;
+    const { arrowRendererOptions, nodeRendererOptions, positionOptions } = options;
     const data = prepareTree(tree, options);
-    calculatePosition(data, options);
-    const boxes = getBoxes(data);
-    const arrows = getArrows(data, options.arrowRendererOptions);
+    calculatePosition(data, positionOptions);
+    const boxes = getBoxes(data, nodeRendererOptions);
+    const arrows = getArrows(data, arrowRendererOptions);
     const svgSize = {
@@ -24,5 +25,4 @@ width: 0,
     svgSize.width = Math.max(...width);
-    const svg = (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${svgSize.width} ${svgSize.height}`, children: [_jsx(MarkerDef, {}), boxes, arrows] }));
-    return svg;
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${svgSize.width} ${svgSize.height}`, children: [_jsx(MarkerDef, {}), boxes, arrows] }));
 }
 //# sourceMappingURL=SVGBoxesTree.js.map

lib-esm/data/calculatePosition.d.ts

@@ -1,2 +0,9 @@
-export declare function calculatePosition(data: any, options: any): void;
+interface CalculatePositionOptions {
+    x?: number;
+    y?: number;
+    spacingVertical?: number;
+    spacingHorizontal?: number;
+}
+export declare function calculatePosition(data: any, options?: CalculatePositionOptions): void;
+export {};
 //# sourceMappingURL=calculatePosition.d.ts.map

lib-esm/data/calculatePosition.js

@@ -1,3 +0,3 @@
-export function calculatePosition(data, options) {
-    const { x = 0, y = 22, spacingVertical = 30, spacingHorizontal = 140, } = options?.positionOptions || {};
+export function calculatePosition(data, options = {}) {
+    const { x = 0, y = 22, spacingVertical = 30, spacingHorizontal = 140, } = options;
     calculateInnerBoxSize(data, {
@@ -16,11 +16,11 @@ x,
 }
-function calculateInnerBoxSize(data, status) {
+function calculateInnerBoxSize(data, options) {
     for (const datum of data) {
         if (datum.children) {
-            calculateInnerBoxSize(datum.children, status);
+            calculateInnerBoxSize(datum.children, options);
             datum.childrenBoxSize = {
                 width: datum.position.width +
-                    status.spacingHorizontal +
+                    options.spacingHorizontal +
                     Math.max(...datum.children.map((d) => d.childrenBoxSize.width)),
-                height: Math.max(datum.position.height, status.spacingVertical * (datum.children.length - 1) +
+                height: Math.max(datum.position.height, options.spacingVertical * (datum.children.length - 1) +
                     datum.children
@@ -39,16 +39,16 @@ .map((d) => d.childrenBoxSize.height)
 }
-function calculatePositionSS(data, status) {
-    let y = status.y;
+function calculatePositionSS(data, options) {
+    let y = options.y;
     for (const datum of data) {
         if (datum.children) {
             calculatePositionSS(datum.children, {
-                ...status,
-                x: status.x + datum.position.width + status.spacingHorizontal,
+                ...options,
+                x: options.x + datum.position.width + options.spacingHorizontal,
                 y,
             });
         }
-        datum.position.x = status.x;
+        datum.position.x = options.x;
         datum.position.y =
             datum.childrenBoxSize.height / 2 - datum.position.height / 2 + y;
-        y += datum.childrenBoxSize.height + status.spacingVertical;
+        y += datum.childrenBoxSize.height + options.spacingVertical;
         datum.anchor = {
@@ -65,5 +65,5 @@ left: {
         datum.childrenBoxSize.height =
-            datum.childrenBoxSize.height + status.spacingVertical;
+            datum.childrenBoxSize.height + options.spacingVertical;
     }
 }
 //# sourceMappingURL=calculatePosition.js.map

lib-esm/data/getArrows.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function getArrowsSS(nodes, arrows, status, options = {}) {
-    const { getLabel, labelPosition } = options;
+    const { getLabel, labelPosition, getID } = options;
     for (const node of nodes) {
         if (node.children) {
             for (const child of node.children) {
-                arrows.push(_jsx(Arrow, { from: node.anchor.right, to: child.anchor.left, label: getLabel?.(child), labelPosition: labelPosition }, arrows.length));
+                arrows.push(_jsx(Arrow, { id: getID ? getID(node) : undefined, from: node.anchor.right, to: child.anchor.left, label: getLabel?.(child), labelPosition: labelPosition }, arrows.length));
             }
@@ -17,0 +17,0 @@ getArrowsSS(node.children, arrows, {

lib-esm/data/getBoxes.d.ts

@@ -1,2 +0,2 @@
-export declare function getBoxes(nodes: any): any[];
+export declare function getBoxes(nodes: any, options: any): any[];
 //# sourceMappingURL=getBoxes.d.ts.map

lib-esm/data/getBoxes.js

 import { jsx as _jsx } from "react/jsx-runtime";
-export function getBoxes(nodes) {
+export function getBoxes(nodes, options) {
     const boxes = [];
-    appendBoxes(nodes, boxes);
+    appendBoxes(nodes, boxes, options);
     return boxes;
 }
-function appendBoxes(nodes, boxes) {
-    for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        boxes.push(_jsx("g", { transform: `translate(${node.position.x} ${node.position.y})`, children: node.element }, i));
+function appendBoxes(nodes, boxes, options = {}) {
+    const { getID } = options;
+    for (const node of nodes) {
+        boxes.push(_jsx("g", { id: getID ? getID(node) : undefined, transform: `translate(${node.position.x} ${node.position.y})`, children: node.element }, boxes.length));
         if (node.children) {
-            appendBoxes(node.children, boxes);
+            appendBoxes(node.children, boxes, options);
         }
@@ -14,0 +14,0 @@ }

lib-esm/nodeRenderer/taxonomyRenderer.d.ts

 import { ReactElement } from 'react';
-export declare function taxonomyRenderer(node: any, nodeRendererOptions?: {}): {
+export declare function taxonomyRenderer(node: any): {
     width: number;
@@ -4,0 +4,0 @@ height: number;

lib-esm/nodeRenderer/taxonomyRenderer.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Rectangle } from '../components/Rectangle';
-export function taxonomyRenderer(node, nodeRendererOptions = {}) {
+export function taxonomyRenderer(node) {
     const minSize = { width: 120, height: 20 };
@@ -5,0 +5,0 @@ const taxonomy = getTaxonomy(node, minSize);

lib-esm/render.js

 import { jsx as _jsx } from "react/jsx-runtime";
-import { renderToStaticMarkup } from 'react-dom/server';
+import { flushSync } from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { SVGBoxesTree } from './components/SVGBoxesTree';
 export function render(tree, options) {
-    const result = renderToStaticMarkup(_jsx(SVGBoxesTree, { tree: tree, ...options }));
-    return result;
+    const element = _jsx(SVGBoxesTree, { tree: tree, ...options });
+    const div = document.createElement('div');
+    const root = createRoot(div);
+    flushSync(() => {
+        root.render(element);
+    });
+    return div.innerHTML;
 }
 //# sourceMappingURL=render.js.map

lib-esm/types/Point.d.ts

@@ -1,5 +0,5 @@
-export type Point = {
+export interface Point {
     x: number;
     y: number;
-};
+}
 //# sourceMappingURL=Point.d.ts.map

lib/components/Arrow.d.ts

@@ -9,2 +9,3 @@ import { Point } from '../types/Point';
 export declare function Arrow(props: {
+    id: string;
     from: Point;
@@ -11,0 +12,0 @@ to: Point;

lib/components/Arrow.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Arrow = void 0;
+exports.Arrow = Arrow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const CenteredText_1 = require("./CenteredText");
-const MarkerDef_1 = require("./MarkerDef");
+const MarkerDef_utils_1 = require("./MarkerDef.utils");
 const RightText_1 = require("./RightText");
@@ -15,12 +15,10 @@ /**
 function Arrow(props) {
-    const { from, to, label, labelPosition = 'center' } = props;
+    const { id, from, to, label, labelPosition = 'center' } = props;
     const middle = { x: (from.x + to.x) / 2, y: (from.y + to.y) / 2 };
-    const refX = (0, MarkerDef_1.MarkerDef)(props).props.children.props.refX;
     const headInflectionPoint = {
-        x: to.x - refX * 2, // refX attribute of the marker element in the Arrow component shifts the arrow head to the left, and that the vertices of the arrow head are set to refX, which means that the beginning of the arrow head is refX * 2 to the left.
+        x: to.x - MarkerDef_utils_1.refX * 2, // refX attribute of the marker element in the Arrow component shifts the arrow head to the left, and that the vertices of the arrow head are set to refX, which means that the beginning of the arrow head is refX * 2 to the left.
         y: to.y,
     };
     const d = `M ${from.x} ${from.y} C ${middle.x} ${from.y}  ${middle.x} ${to.y}  ${headInflectionPoint.x} ${to.y} Q ${headInflectionPoint.x} ${to.y}  ${to.x} ${to.y} `;
-    //const d = `M ${from.x} ${from.y} C ${middle.x} ${from.y}  ${middle.x} ${from.y}  ${middle.x} ${middle.y} ${middle.x} ${to.y} ${middle.x} ${to.y}  ${to.x} ${to.y}`;
-    return ((0, jsx_runtime_1.jsxs)("g", { children: [(0, jsx_runtime_1.jsx)("path", { d: d, style: {
+    return ((0, jsx_runtime_1.jsxs)("g", { id: id, children: [(0, jsx_runtime_1.jsx)("path", { d: d, style: {
                     fill: 'none',
@@ -32,3 +30,2 @@ strokeWidth: '2',
 }
-exports.Arrow = Arrow;
 //# sourceMappingURL=Arrow.js.map

lib/components/CenteredText.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CenteredText = void 0;
+exports.CenteredText = CenteredText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function CenteredText(props) {
     const { x, y, label } = props;
-    const labelPosition = 'translate(' + x + ',' + y + ')';
+    const labelPosition = `translate(${x},${y})`;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("text", { textAnchor: "middle", transform: labelPosition, stroke: "rgba(255,255,255,0.5)", strokeWidth: "0.5em", alignmentBaseline: "middle", fill: "none", fontSize: "14", children: label }), (0, jsx_runtime_1.jsx)("text", { textAnchor: "middle", transform: labelPosition, stroke: "none", alignmentBaseline: "middle", fontSize: "14", fill: "black", children: label })] }));
 }
-exports.CenteredText = CenteredText;
 //# sourceMappingURL=CenteredText.js.map

lib/components/MarkerDef.d.ts

@@ -1,2 +0,2 @@
-export declare function MarkerDef(props: any): import("react/jsx-runtime").JSX.Element;
+export declare function MarkerDef(): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MarkerDef.d.ts.map

lib/components/MarkerDef.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MarkerDef = void 0;
+exports.MarkerDef = MarkerDef;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function MarkerDef(props) {
-    return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: "10", refY: "3.5", orient: "auto", children: (0, jsx_runtime_1.jsx)("polygon", { points: "0 0, 10 3.5, 0 7" }) }) }));
+const MarkerDef_utils_1 = require("./MarkerDef.utils");
+function MarkerDef() {
+    return ((0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsx)("marker", { id: "arrowhead", markerWidth: "10", markerHeight: "7", refX: MarkerDef_utils_1.refX, refY: "3.5", orient: "auto", children: (0, jsx_runtime_1.jsx)("polygon", { points: "0 0, 10 3.5, 0 7" }) }) }));
 }
-exports.MarkerDef = MarkerDef;
 //# sourceMappingURL=MarkerDef.js.map

lib/components/MoleculeLabel.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoleculeLabel = void 0;
+exports.MoleculeLabel = MoleculeLabel;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -10,3 +10,2 @@ const SVGMolecule_1 = require("./SVGMolecule");
 }
-exports.MoleculeLabel = MoleculeLabel;
 //# sourceMappingURL=MoleculeLabel.js.map

lib/components/Rectangle.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Rectangle = void 0;
+exports.Rectangle = Rectangle;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,3 +8,2 @@ function Rectangle(props) {
 }
-exports.Rectangle = Rectangle;
 //# sourceMappingURL=Rectangle.js.map

lib/components/RightText.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RightText = void 0;
+exports.RightText = RightText;
 const jsx_runtime_1 = require("react/jsx-runtime");
 function RightText(props) {
     const { x, y, label } = props;
-    const labelPosition = 'translate(' + x + ',' + y + ')';
+    const labelPosition = `translate(${x},${y})`;
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("text", { textAnchor: "end", transform: labelPosition, stroke: "rgba(255,255,255,0.5)", strokeWidth: "0.5em", fill: "none", fontSize: "14", children: label }), (0, jsx_runtime_1.jsx)("text", { textAnchor: "end", transform: labelPosition, stroke: "none", fontSize: "14", fill: "black", children: label })] }));
 }
-exports.RightText = RightText;
 //# sourceMappingURL=RightText.js.map

lib/components/Structure.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoleculeLabel = void 0;
+exports.MoleculeLabel = MoleculeLabel;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -10,3 +10,2 @@ const SVGMolecule_1 = require("./SVGMolecule");
 }
-exports.MoleculeLabel = MoleculeLabel;
 //# sourceMappingURL=Structure.js.map

lib/components/SVG.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVG = void 0;
+exports.SVG = SVG;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -12,3 +12,2 @@ function SVG(props) {
 }
-exports.SVG = SVG;
 //# sourceMappingURL=SVG.js.map

lib/components/SVGBoxesTree.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVGBoxesTree = void 0;
+exports.SVGBoxesTree = SVGBoxesTree;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -12,6 +12,7 @@ const calculatePosition_1 = require("../data/calculatePosition");
     const { tree, ...options } = props;
+    const { arrowRendererOptions, nodeRendererOptions, positionOptions } = options;
     const data = (0, prepareTree_1.prepareTree)(tree, options);
-    (0, calculatePosition_1.calculatePosition)(data, options);
-    const boxes = (0, getBoxes_1.getBoxes)(data);
-    const arrows = (0, getArrows_1.getArrows)(data, options.arrowRendererOptions);
+    (0, calculatePosition_1.calculatePosition)(data, positionOptions);
+    const boxes = (0, getBoxes_1.getBoxes)(data, nodeRendererOptions);
+    const arrows = (0, getArrows_1.getArrows)(data, arrowRendererOptions);
     const svgSize = {
@@ -27,6 +28,4 @@ width: 0,
     svgSize.width = Math.max(...width);
-    const svg = ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${svgSize.width} ${svgSize.height}`, children: [(0, jsx_runtime_1.jsx)(MarkerDef_1.MarkerDef, {}), boxes, arrows] }));
-    return svg;
+    return ((0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: `0 0 ${svgSize.width} ${svgSize.height}`, children: [(0, jsx_runtime_1.jsx)(MarkerDef_1.MarkerDef, {}), boxes, arrows] }));
 }
-exports.SVGBoxesTree = SVGBoxesTree;
 //# sourceMappingURL=SVGBoxesTree.js.map

lib/components/SVGMolecule.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SVGMolecule = void 0;
+exports.SVGMolecule = SVGMolecule;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -20,3 +20,2 @@ const core_1 = require("openchemlib/core");
 }
-exports.SVGMolecule = SVGMolecule;
 //# sourceMappingURL=SVGMolecule.js.map

lib/data/calculatePosition.d.ts

@@ -1,2 +0,9 @@
-export declare function calculatePosition(data: any, options: any): void;
+interface CalculatePositionOptions {
+    x?: number;
+    y?: number;
+    spacingVertical?: number;
+    spacingHorizontal?: number;
+}
+export declare function calculatePosition(data: any, options?: CalculatePositionOptions): void;
+export {};
 //# sourceMappingURL=calculatePosition.d.ts.map

lib/data/calculatePosition.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calculatePosition = void 0;
-function calculatePosition(data, options) {
-    const { x = 0, y = 22, spacingVertical = 30, spacingHorizontal = 140, } = options?.positionOptions || {};
+exports.calculatePosition = calculatePosition;
+function calculatePosition(data, options = {}) {
+    const { x = 0, y = 22, spacingVertical = 30, spacingHorizontal = 140, } = options;
     calculateInnerBoxSize(data, {
@@ -19,12 +19,11 @@ x,
 }
-exports.calculatePosition = calculatePosition;
-function calculateInnerBoxSize(data, status) {
+function calculateInnerBoxSize(data, options) {
     for (const datum of data) {
         if (datum.children) {
-            calculateInnerBoxSize(datum.children, status);
+            calculateInnerBoxSize(datum.children, options);
             datum.childrenBoxSize = {
                 width: datum.position.width +
-                    status.spacingHorizontal +
+                    options.spacingHorizontal +
                     Math.max(...datum.children.map((d) => d.childrenBoxSize.width)),
-                height: Math.max(datum.position.height, status.spacingVertical * (datum.children.length - 1) +
+                height: Math.max(datum.position.height, options.spacingVertical * (datum.children.length - 1) +
                     datum.children
@@ -43,16 +42,16 @@ .map((d) => d.childrenBoxSize.height)
 }
-function calculatePositionSS(data, status) {
-    let y = status.y;
+function calculatePositionSS(data, options) {
+    let y = options.y;
     for (const datum of data) {
         if (datum.children) {
             calculatePositionSS(datum.children, {
-                ...status,
-                x: status.x + datum.position.width + status.spacingHorizontal,
+                ...options,
+                x: options.x + datum.position.width + options.spacingHorizontal,
                 y,
             });
         }
-        datum.position.x = status.x;
+        datum.position.x = options.x;
         datum.position.y =
             datum.childrenBoxSize.height / 2 - datum.position.height / 2 + y;
-        y += datum.childrenBoxSize.height + status.spacingVertical;
+        y += datum.childrenBoxSize.height + options.spacingVertical;
         datum.anchor = {
@@ -69,5 +68,5 @@ left: {
         datum.childrenBoxSize.height =
-            datum.childrenBoxSize.height + status.spacingVertical;
+            datum.childrenBoxSize.height + options.spacingVertical;
     }
 }
 //# sourceMappingURL=calculatePosition.js.map

lib/data/getArrows.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getArrows = void 0;
+exports.getArrows = getArrows;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -12,9 +12,8 @@ const Arrow_1 = require("../components/Arrow");
 }
-exports.getArrows = getArrows;
 function getArrowsSS(nodes, arrows, status, options = {}) {
-    const { getLabel, labelPosition } = options;
+    const { getLabel, labelPosition, getID } = options;
     for (const node of nodes) {
         if (node.children) {
             for (const child of node.children) {
-                arrows.push((0, jsx_runtime_1.jsx)(Arrow_1.Arrow, { from: node.anchor.right, to: child.anchor.left, label: getLabel?.(child), labelPosition: labelPosition }, arrows.length));
+                arrows.push((0, jsx_runtime_1.jsx)(Arrow_1.Arrow, { id: getID ? getID(node) : undefined, from: node.anchor.right, to: child.anchor.left, label: getLabel?.(child), labelPosition: labelPosition }, arrows.length));
             }
@@ -21,0 +20,0 @@ getArrowsSS(node.children, arrows, {

lib/data/getBoxes.d.ts

@@ -1,2 +0,2 @@
-export declare function getBoxes(nodes: any): any[];
+export declare function getBoxes(nodes: any, options: any): any[];
 //# sourceMappingURL=getBoxes.d.ts.map

lib/data/getBoxes.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getBoxes = void 0;
+exports.getBoxes = getBoxes;
 const jsx_runtime_1 = require("react/jsx-runtime");
-function getBoxes(nodes) {
+function getBoxes(nodes, options) {
     const boxes = [];
-    appendBoxes(nodes, boxes);
+    appendBoxes(nodes, boxes, options);
     return boxes;
 }
-exports.getBoxes = getBoxes;
-function appendBoxes(nodes, boxes) {
-    for (let i = 0; i < nodes.length; i++) {
-        const node = nodes[i];
-        boxes.push((0, jsx_runtime_1.jsx)("g", { transform: `translate(${node.position.x} ${node.position.y})`, children: node.element }, i));
+function appendBoxes(nodes, boxes, options = {}) {
+    const { getID } = options;
+    for (const node of nodes) {
+        boxes.push((0, jsx_runtime_1.jsx)("g", { id: getID ? getID(node) : undefined, transform: `translate(${node.position.x} ${node.position.y})`, children: node.element }, boxes.length));
         if (node.children) {
-            appendBoxes(node.children, boxes);
+            appendBoxes(node.children, boxes, options);
         }
@@ -18,0 +17,0 @@ }

lib/data/prepareTree.js

@@ -7,3 +7,3 @@ "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.prepareTree = void 0;
+exports.prepareTree = prepareTree;
 function prepareTree(data, options) {
@@ -14,3 +14,2 @@ data = JSON.parse(JSON.stringify(data));
 }
-exports.prepareTree = prepareTree;
 function prepareTreeSS(data, options) {
@@ -17,0 +16,0 @@ const { nodeRenderer, nodeRendererOptions = {} } = options;

lib/nodeRenderer/moleculeRenderer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.moleculeRenderer = void 0;
+exports.moleculeRenderer = moleculeRenderer;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -22,3 +22,2 @@ const Rectangle_1 = require("../components/Rectangle");
 }
-exports.moleculeRenderer = moleculeRenderer;
 function getTopLabel(node, options = {}) {
@@ -25,0 +24,0 @@ const label = options.getTopLabel?.(node) || node.label;

lib/nodeRenderer/taxonomyRenderer.d.ts

 import { ReactElement } from 'react';
-export declare function taxonomyRenderer(node: any, nodeRendererOptions?: {}): {
+export declare function taxonomyRenderer(node: any): {
     width: number;
@@ -4,0 +4,0 @@ height: number;

lib/nodeRenderer/taxonomyRenderer.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.taxonomyRenderer = void 0;
+exports.taxonomyRenderer = taxonomyRenderer;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Rectangle_1 = require("../components/Rectangle");
-function taxonomyRenderer(node, nodeRendererOptions = {}) {
+function taxonomyRenderer(node) {
     const minSize = { width: 120, height: 20 };
@@ -22,3 +22,2 @@ const taxonomy = getTaxonomy(node, minSize);
 }
-exports.taxonomyRenderer = taxonomyRenderer;
 function getNbTaxonomies(node, width, minSize) {
@@ -25,0 +24,0 @@ return {

lib/render.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.render = void 0;
+exports.render = render;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const server_1 = require("react-dom/server");
+const react_dom_1 = require("react-dom");
+const client_1 = require("react-dom/client");
 const SVGBoxesTree_1 = require("./components/SVGBoxesTree");
 function render(tree, options) {
-    const result = (0, server_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(SVGBoxesTree_1.SVGBoxesTree, { tree: tree, ...options }));
-    return result;
+    const element = (0, jsx_runtime_1.jsx)(SVGBoxesTree_1.SVGBoxesTree, { tree: tree, ...options });
+    const div = document.createElement('div');
+    const root = (0, client_1.createRoot)(div);
+    (0, react_dom_1.flushSync)(() => {
+        root.render(element);
+    });
+    return div.innerHTML;
 }
-exports.render = render;
 //# sourceMappingURL=render.js.map

lib/types/Point.d.ts

@@ -1,5 +0,5 @@
-export type Point = {
+export interface Point {
     x: number;
     y: number;
-};
+}
 //# sourceMappingURL=Point.d.ts.map

package.json

 {
   "name": "react-tree-svg",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "main": "lib/index.js",
@@ -17,6 +17,6 @@ "module": "lib-esm/index.js",
     "clean": "rimraf lib lib-esm",
-    "prettier": "prettier --check src",
-    "prettier-write": "prettier --write src",
+    "prettier": "prettier --check src demo",
+    "prettier-write": "prettier --write src demo",
     "preview": "vite preview",
-    "eslint": "eslint",
+    "eslint": "eslint src demo",
     "eslint-fix": "npm run eslint -- --fix",
@@ -27,26 +27,28 @@ "prepack": "npm run tsc",
     "tsc-esm": "tsc --project tsconfig.esm.json",
-    "test": "vitest run --globals --config ./vite.config.ts && npm run eslint && npm run prettier",
-    "test-only": "vitest run --globals "
+    "test": "vitest && npm run eslint && npm run prettier && npm run check-types",
+    "test-only": "vitest "
   },
+  "peerDependencies": {
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0"
+  },
   "dependencies": {
-    "numeral": "^2.0.6",
-    "openchemlib": "^8.5.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "openchemlib": "^8.15.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.5",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.1.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "cheminfo-build": "^1.2.0",
-    "eslint": "^8.50.0",
-    "eslint-config-cheminfo-react": "^10.0.0",
-    "eslint-config-cheminfo-typescript": "^12.0.4",
-    "openchemlib-utils": "^5.2.0",
-    "prettier": "^3.0.3",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9",
-    "vitest": "^0.34.5"
+    "eslint": "^8.57.0",
+    "eslint-config-cheminfo-react": "^11.0.1",
+    "eslint-config-cheminfo-typescript": "^12.4.0",
+    "jsdom": "^24.1.1",
+    "prettier": "^3.3.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.5.4",
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
   }
 }

README.md

@@ -93,3 +93,3 @@ # react-tree-svg
 
-````js
+```js
 const {render} = require('react-tree-svg');
@@ -136,3 +136,4 @@ const dataTrees= [
         });
-        ```
+```
+
 ## License
@@ -150,2 +151,2 @@
 [download-url]: https://www.npmjs.com/package/react-tree-svg
-````
+

src/data/calculatePosition.ts

@@ -1,2 +0,12 @@
-export function calculatePosition(data, options) {
+interface CalculatePositionOptions {
+  x?: number;
+  y?: number;
+  spacingVertical?: number;
+  spacingHorizontal?: number;
+}
+
+export function calculatePosition(
+  data,
+  options: CalculatePositionOptions = {},
+) {
   const {
@@ -7,3 +17,3 @@ x = 0,
     spacingHorizontal = 140,
-  } = options?.positionOptions || {};
+  } = options;
   calculateInnerBoxSize(data, {
@@ -23,6 +33,16 @@ x,
 
-function calculateInnerBoxSize(data, status) {
+interface CalculatePositionMandatoryOptions {
+  x: number;
+  y: number;
+  spacingVertical: number;
+  spacingHorizontal: number;
+}
+
+function calculateInnerBoxSize(
+  data,
+  options: CalculatePositionMandatoryOptions,
+) {
   for (const datum of data) {
     if (datum.children) {
-      calculateInnerBoxSize(datum.children, status);
+      calculateInnerBoxSize(datum.children, options);
 
@@ -32,7 +52,7 @@ datum.childrenBoxSize = {
           datum.position.width +
-          status.spacingHorizontal +
+          options.spacingHorizontal +
           Math.max(...datum.children.map((d) => d.childrenBoxSize.width)),
         height: Math.max(
           datum.position.height,
-          status.spacingVertical * (datum.children.length - 1) +
+          options.spacingVertical * (datum.children.length - 1) +
             datum.children
@@ -52,9 +72,9 @@ .map((d) => d.childrenBoxSize.height)
 
-function calculatePositionSS(data, status) {
-  let y = status.y;
+function calculatePositionSS(data, options: CalculatePositionMandatoryOptions) {
+  let y = options.y;
   for (const datum of data) {
     if (datum.children) {
       calculatePositionSS(datum.children, {
-        ...status,
-        x: status.x + datum.position.width + status.spacingHorizontal,
+        ...options,
+        x: options.x + datum.position.width + options.spacingHorizontal,
         y,
@@ -64,7 +84,7 @@ });
 
-    datum.position.x = status.x;
+    datum.position.x = options.x;
     datum.position.y =
       datum.childrenBoxSize.height / 2 - datum.position.height / 2 + y;
 
-    y += datum.childrenBoxSize.height + status.spacingVertical;
+    y += datum.childrenBoxSize.height + options.spacingVertical;
 
@@ -82,4 +102,4 @@ datum.anchor = {
     datum.childrenBoxSize.height =
-      datum.childrenBoxSize.height + status.spacingVertical;
+      datum.childrenBoxSize.height + options.spacingVertical;
   }
 }

src/types/Point.ts

@@ -1,1 +0,4 @@
-export type Point = { x: number; y: number };
+export interface Point {
+  x: number;
+  y: number;
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Dependency count

3

decreased by-25%

Number of lines in readme file

150

increased by0.67%

Worsened metrics

Total package byte prevSize

122484

decreased by-86.22%

Dev dependency count

14

increased by7.69%

Number of package files

184

decreased by-17.86%

Lines of code

1862

decreased by-81.69%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removednumeral@^2.0.6

• - Removedreact@^18.2.0

• - Removedreact-dom@^18.2.0

• - Removednumeral@2.0.6(transitive)

• Updatedopenchemlib@^8.15.0