@bencamus/tree-chart-core 0.1.0

package/dist/base/uuid.d.ts

@@ -0,0 +1 @@
+export declare function uuid(): string;

package/dist/base/uuid.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.uuid = uuid;
+/*this is used for assign an id to the nodes of the tree */
+function uuid() {
+    const s = [];
+    const hexDigits = '0123456789abcdef';
+    for (let i = 0; i < 36; i++) {
+        s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+    }
+    s[14] = '4';
+    s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+    s[8] = s[13] = s[18] = s[23] = '-';
+    return s.join('');
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+import TreeChartCore from "./tree-chart/index";
+export default TreeChartCore;
+export * from './tree-chart/constant';
+export * from './tree-chart/tree-chart';

package/dist/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const index_1 = __importDefault(require("./tree-chart/index"));
+exports.default = index_1.default;
+__exportStar(require("./tree-chart/constant"), exports);
+__exportStar(require("./tree-chart/tree-chart"), exports);

package/dist/tree-chart/constant.d.ts

@@ -0,0 +1,12 @@
+export declare const DEFAULT_NODE_WIDTH = 100;
+export declare const DEFAULT_NODE_HEIGHT = 100;
+export declare const DEFAULT_LEVEL_HEIGHT = 200;
+/**
+ * Used to decrement the height of the 'initTransformY' to center diagrams.
+ * This is only a hotfix caused by the addition of '__invisible_root' node
+ * for multi root purposes.
+ */
+export declare const DEFAULT_HEIGHT_DECREMENT = 200;
+export declare const ANIMATION_DURATION = 10;
+export declare const MATCH_TRANSLATE_REGEX: RegExp;
+export declare const MATCH_SCALE_REGEX: RegExp;

package/dist/tree-chart/constant.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MATCH_SCALE_REGEX = exports.MATCH_TRANSLATE_REGEX = exports.ANIMATION_DURATION = exports.DEFAULT_HEIGHT_DECREMENT = exports.DEFAULT_LEVEL_HEIGHT = exports.DEFAULT_NODE_HEIGHT = exports.DEFAULT_NODE_WIDTH = void 0;
+exports.DEFAULT_NODE_WIDTH = 100;
+exports.DEFAULT_NODE_HEIGHT = 100;
+exports.DEFAULT_LEVEL_HEIGHT = 200;
+/**
+ * Used to decrement the height of the 'initTransformY' to center diagrams.
+ * This is only a hotfix caused by the addition of '__invisible_root' node
+ * for multi root purposes.
+ */
+exports.DEFAULT_HEIGHT_DECREMENT = 200;
+//animation of the branches of the tree
+exports.ANIMATION_DURATION = 10; //orginal 800,  10~>instant 
+exports.MATCH_TRANSLATE_REGEX = /translate\((-?\d+)px, ?(-?\d+)px\)/i;
+exports.MATCH_SCALE_REGEX = /scale\((\S*)\)/i;

package/dist/tree-chart/index.d.ts

@@ -0,0 +1,105 @@
+import * as d3 from "d3";
+import { TreeDataset, Direction, TreeLinkStyle } from "./tree-chart";
+interface TreeConfig {
+    nodeWidth: number;
+    nodeHeight: number;
+    levelHeight: number;
+    focusToNode: boolean;
+    initiallyCollapsed: boolean;
+    useMobileZoom?: boolean;
+    useMouseZoom?: boolean;
+    collapseDepth?: number;
+}
+interface TreeChartCoreParams {
+    treeConfig?: TreeConfig;
+    linkStyle?: TreeLinkStyle;
+    direction?: Direction;
+    collapseEnabled: boolean;
+    dataset: TreeDataset;
+    svgElement: SVGElement;
+    domElement: HTMLDivElement;
+    treeContainer: HTMLDivElement;
+}
+interface D3Link {
+    source: {
+        x: number;
+        y: number;
+        data: any;
+    };
+    target: {
+        x: number;
+        y: number;
+        data: any;
+    };
+}
+export default class TreeChartCore {
+    interactionMode: "drag" | "zoom" | null;
+    treeConfig: TreeConfig;
+    linkStyle: TreeLinkStyle;
+    direction: Direction;
+    collapseEnabled: boolean;
+    dataset: TreeDataset;
+    svgElement: SVGElement;
+    svgSelection: any;
+    domElement: HTMLDivElement;
+    treeContainer: HTMLDivElement;
+    nodeDataList: d3.HierarchyPointNode<any>[];
+    linkDataList: D3Link[];
+    initTransformX: number;
+    initTransformY: number;
+    currentScale: number;
+    constructor(params: TreeChartCoreParams);
+    init(): Promise<void>;
+    getNodeDataList(): d3.HierarchyPointNode<any>[];
+    private enableMouseZoom;
+    getInitialTransformStyle(): Record<string, string>;
+    private adjustZoom;
+    zoomIn(): void;
+    zoomOut(): void;
+    private enablePinchZoom;
+    restoreScale(): void;
+    restorePosition(): void;
+    setScale(scaleNum: number): void;
+    getTranslate(): number[];
+    isVertical(): boolean;
+    /**
+     * 根据link数据,生成svg path data
+     */
+    private generateLinkPath;
+    private generateCurceLinkPath;
+    private generateStraightLinkPath;
+    updateDataList(): void;
+    private draw;
+    private assignDepth;
+    /**
+     * Returns updated dataset by deep copying every nodes from the externalData and adding unique '_key' attributes.
+     **/
+    private updatedInternalData;
+    private collapseAllNodes;
+    private expandNodesByDepth;
+    private buildTree;
+    private enableDrag;
+    private cancelTransition;
+    reinitTransform(): void;
+    private initTransform;
+    private collapseNodesAtSameLevel;
+    onClickNode(index: number): void;
+    expandNodeByLevelAndPosition(level: number, nodeIndex: number): void;
+    private collapseSiblingNodes;
+    /**
+     * Focus on a specific node in the tree
+     * @param index Index of the node to focus on
+     */
+    focusToNode(index: number): void;
+    /**
+     * call this function to update dataset
+     * notice : you need to update the view rendered by `nodeDataList` too
+     * @param dataset the new dataset to show in chart
+     */
+    updateDataset(dataset: TreeDataset): void;
+    /**
+     * release all dom reference
+     */
+    destroy(): void;
+}
+export {};

package/dist/tree-chart/index.js

@@ -0,0 +1,600 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const d3 = __importStar(require("d3"));
+const constant_1 = require("./constant");
+const tree_chart_1 = require("./tree-chart");
+const util_1 = require("./util");
+class TreeChartCore {
+    constructor(params) {
+        this.interactionMode = null;
+        this.treeConfig = {
+            nodeWidth: constant_1.DEFAULT_NODE_WIDTH,
+            nodeHeight: constant_1.DEFAULT_NODE_HEIGHT,
+            levelHeight: constant_1.DEFAULT_LEVEL_HEIGHT,
+            focusToNode: false,
+            initiallyCollapsed: false,
+            useMobileZoom: false,
+            collapseDepth: 0, // default value
+            useMouseZoom: false,
+        };
+        this.linkStyle = tree_chart_1.TreeLinkStyle.CURVE;
+        this.direction = tree_chart_1.Direction.VERTICAL;
+        this.collapseEnabled = true;
+        this.nodeDataList = [];
+        this.linkDataList = [];
+        this.currentScale = 1;
+        if (params.treeConfig) {
+            this.treeConfig = params.treeConfig;
+        }
+        this.collapseEnabled = params.collapseEnabled;
+        this.svgElement = params.svgElement;
+        this.domElement = params.domElement;
+        this.treeContainer = params.treeContainer;
+        this.dataset = this.updatedInternalData(params.dataset);
+        if (params.direction)
+            this.direction = params.direction;
+        if (params.linkStyle)
+            this.linkStyle = params.linkStyle;
+    }
+    async init() {
+        this.draw();
+        this.enableDrag();
+        this.enablePinchZoom();
+        this.enableMouseZoom();
+        this.initTransform();
+        //To Do: dont work at reload
+        //this.expandNodeByLevelAndPosition(2, 1);
+    }
+    getNodeDataList() {
+        return this.nodeDataList;
+    }
+    enableMouseZoom() {
+        if (!this.treeConfig.useMouseZoom)
+            return;
+        const handleWheel = (event) => {
+            event.preventDefault();
+            // zoom direction
+            const zoomFactor = event.deltaY > 0 ? 0.9 : 1.1;
+            //adjust zoom
+            const originTransformStr = this.domElement.style.transform;
+            const scaleMatchResult = originTransformStr.match(constant_1.MATCH_SCALE_REGEX);
+            const originScale = scaleMatchResult
+                ? parseFloat(scaleMatchResult[1])
+                : 1;
+            // Calculate new scale
+            const newScale = originScale * zoomFactor;
+            this.setScale(newScale);
+        };
+        this.treeContainer.addEventListener("wheel", handleWheel, {
+            passive: false,
+        });
+    }
+    getInitialTransformStyle() {
+        return {
+            transform: `scale(1) translate(${this.initTransformX}px, ${this.initTransformY}px)`,
+            transformOrigin: "center",
+        };
+    }
+    adjustZoom(factor) {
+        const originTransformStr = this.domElement.style.transform;
+        const scaleMatchResult = originTransformStr.match(constant_1.MATCH_SCALE_REGEX);
+        const originScale = scaleMatchResult ? parseFloat(scaleMatchResult[1]) : 1;
+        this.setScale(originScale * factor);
+    }
+    zoomIn() {
+        this.adjustZoom(1.2);
+    }
+    zoomOut() {
+        this.adjustZoom(1 / 1.2);
+    }
+    enablePinchZoom() {
+        if (!this.treeConfig.useMobileZoom)
+            return;
+        let initialDistance = null;
+        let initialScale = this.currentScale;
+        const handleTouchStart = (event) => {
+            if (event.touches.length === 2) {
+                this.interactionMode = "zoom"; // change interaction mode to zoom
+                event.preventDefault();
+                initialDistance = Math.hypot(event.touches[0].clientX - event.touches[1].clientX, event.touches[0].clientY - event.touches[1].clientY);
+                initialScale = this.currentScale;
+            }
+        };
+        const handleTouchMove = (event) => {
+            if (this.interactionMode === "zoom" &&
+                event.touches.length === 2 &&
+                initialDistance !== null) {
+                event.preventDefault();
+                const currentDistance = Math.hypot(event.touches[0].clientX - event.touches[1].clientX, event.touches[0].clientY - event.touches[1].clientY);
+                const scale = (currentDistance / initialDistance) * initialScale;
+                this.setScale(scale);
+            }
+        };
+        const handleTouchEnd = (event) => {
+            if (event.touches.length < 2) {
+                this.interactionMode = null;
+                initialDistance = null;
+            }
+        };
+        this.treeContainer.addEventListener("touchstart", handleTouchStart, {
+            passive: false,
+        });
+        this.treeContainer.addEventListener("touchmove", handleTouchMove, {
+            passive: false,
+        });
+        this.treeContainer.addEventListener("touchend", handleTouchEnd, {
+            passive: false,
+        });
+    }
+    restoreScale() {
+        this.setScale(1);
+    }
+    restorePosition() {
+        // Enable transition for smooth animation
+        this.svgElement.style.transition = "transform 0.4s ease";
+        this.domElement.style.transition = "transform 0.4s ease";
+        // Reset scale to 1 and translate to initial position
+        const transformString = `scale(1) translate(${this.initTransformX}px, ${this.initTransformY}px)`;
+        this.svgElement.style.transform = transformString;
+        this.domElement.style.transform = transformString;
+        // Reset current scale
+        this.currentScale = 1;
+        // Clear transition after animation
+        setTimeout(() => {
+            this.svgElement.style.transition = "";
+            this.domElement.style.transition = "";
+        }, 400); // Match the transition duration
+    }
+    setScale(scaleNum) {
+        if (typeof scaleNum !== "number")
+            return;
+        const pos = this.getTranslate();
+        const translateString = `translate(${pos[0]}px, ${pos[1]}px)`;
+        this.svgElement.style.transform = `scale(${scaleNum}) ` + translateString;
+        this.domElement.style.transform = `scale(${scaleNum}) ` + translateString;
+        this.currentScale = scaleNum;
+    }
+    getTranslate() {
+        const string = this.svgElement.style.transform;
+        const match = string.match(constant_1.MATCH_TRANSLATE_REGEX);
+        if (match === null) {
+            return [null, null];
+        }
+        const x = parseInt(match[1]);
+        const y = parseInt(match[2]);
+        return [x, y];
+    }
+    isVertical() {
+        return this.direction === tree_chart_1.Direction.VERTICAL;
+    }
+    /**
+     * 根据link数据,生成svg path data
+     */
+    generateLinkPath(d) {
+        const self = this;
+        if (this.linkStyle === tree_chart_1.TreeLinkStyle.CURVE) {
+            return this.generateCurceLinkPath(self, d);
+        }
+        if (this.linkStyle === tree_chart_1.TreeLinkStyle.STRAIGHT) {
+            // the link path is: source -> secondPoint -> thirdPoint -> target
+            return this.generateStraightLinkPath(d);
+        }
+        return "";
+    }
+    generateCurceLinkPath(self, d) {
+        // Fix for D3 linkHorizontal/linkVertical which expect [number, number] format
+        // but we're using {x, y} format
+        const linkPath = this.isVertical()
+            ? d3.linkVertical()
+            : d3.linkHorizontal();
+        // Set accessor functions to return coordinates in the format D3 expects
+        linkPath
+            .x(function (point) {
+            return point.x;
+        })
+            .y(function (point) {
+            return point.y;
+        })
+            .source(function (d) {
+            const sourcePoint = {
+                x: d.source.x,
+                y: d.source.y,
+            };
+            return self.direction === tree_chart_1.Direction.VERTICAL
+                ? sourcePoint
+                : (0, util_1.rotatePoint)(sourcePoint);
+        })
+            .target(function (d) {
+            const targetPoint = {
+                x: d.target.x,
+                y: d.target.y,
+            };
+            return self.direction === tree_chart_1.Direction.VERTICAL
+                ? targetPoint
+                : (0, util_1.rotatePoint)(targetPoint);
+        });
+        return linkPath(d);
+    }
+    generateStraightLinkPath(d) {
+        const linkPath = d3.path();
+        let sourcePoint = { x: d.source.x, y: d.source.y };
+        let targetPoint = { x: d.target.x, y: d.target.y };
+        if (!this.isVertical()) {
+            sourcePoint = (0, util_1.rotatePoint)(sourcePoint);
+            targetPoint = (0, util_1.rotatePoint)(targetPoint);
+        }
+        const xOffset = targetPoint.x - sourcePoint.x;
+        const yOffset = targetPoint.y - sourcePoint.y;
+        const secondPoint = this.isVertical()
+            ? { x: sourcePoint.x, y: sourcePoint.y + yOffset / 2 }
+            : { x: sourcePoint.x + xOffset / 2, y: sourcePoint.y };
+        const thirdPoint = this.isVertical()
+            ? { x: targetPoint.x, y: sourcePoint.y + yOffset / 2 }
+            : { x: sourcePoint.x + xOffset / 2, y: targetPoint.y };
+        linkPath.moveTo(sourcePoint.x, sourcePoint.y);
+        linkPath.lineTo(secondPoint.x, secondPoint.y);
+        linkPath.lineTo(thirdPoint.x, thirdPoint.y);
+        linkPath.lineTo(targetPoint.x, targetPoint.y);
+        return linkPath.toString();
+    }
+    updateDataList() {
+        const [nodeDataList, linkDataList] = this.buildTree();
+        nodeDataList.splice(0, 1);
+        // Fix the type issue by casting to the proper D3Link type
+        this.linkDataList = linkDataList
+            .filter((x) => x.source.data.name !== "__invisible_root");
+        this.nodeDataList = nodeDataList;
+    }
+    draw() {
+        this.updateDataList();
+        const identifier = this.dataset["identifier"];
+        const specialLinks = this.dataset["links"];
+        if (specialLinks && identifier) {
+            for (const link of specialLinks) {
+                let parent, children = undefined;
+                if (identifier === "value") {
+                    parent = this.nodeDataList.find((d) => {
+                        return d[identifier] == link.parent;
+                    });
+                    children = this.nodeDataList.filter((d) => {
+                        return d[identifier] == link.child;
+                    });
+                }
+                else {
+                    parent = this.nodeDataList.find((d) => {
+                        return d["data"][identifier] == link.parent;
+                    });
+                    children = this.nodeDataList.filter((d) => {
+                        return d["data"][identifier] == link.child;
+                    });
+                }
+                if (parent && children) {
+                    for (const child of children) {
+                        const new_link = {
+                            source: parent,
+                            target: child,
+                        };
+                        this.linkDataList.push(new_link);
+                    }
+                }
+            }
+        }
+        this.svgSelection = d3.select(this.svgElement);
+        const self = this;
+        const links = this.svgSelection
+            .selectAll(".link")
+            .data(this.linkDataList, (d) => {
+            return `${d.source.data._key}-${d.target.data._key}`;
+        });
+        links
+            .enter()
+            .append("path")
+            .style("opacity", 0)
+            .transition()
+            .duration(constant_1.ANIMATION_DURATION)
+            .ease(d3.easeCubicInOut)
+            .style("opacity", 1)
+            //.attr("class", "link")
+            .attr("class", (d) => (d.source.depth === 1 ? "link-hidden" : "link")) // 1 are the branches of the root node
+            .attr("d", function (d) {
+            return self.generateLinkPath(d);
+        });
+        links
+            .transition()
+            .duration(constant_1.ANIMATION_DURATION)
+            .ease(d3.easeCubicInOut)
+            .attr("d", function (d) {
+            return self.generateLinkPath(d);
+        });
+        links
+            .exit()
+            .transition()
+            .duration(constant_1.ANIMATION_DURATION / 2)
+            .ease(d3.easeCubicInOut)
+            .style("opacity", 0)
+            .remove();
+    }
+    assignDepth(node, currentDepth) {
+        node.depth = currentDepth;
+        if (node.children) {
+            node.children.forEach((child) => this.assignDepth(child, currentDepth + 1));
+        }
+    }
+    /**
+     * Returns updated dataset by deep copying every nodes from the externalData and adding unique '_key' attributes.
+     **/
+    updatedInternalData(externalData) {
+        const data = {
+            name: "__invisible_root",
+            children: [],
+        };
+        if (!externalData)
+            return data;
+        const minExpandedDepth = this.treeConfig.collapseDepth; // min level to expand nodes (-1 is the root)
+        if (Array.isArray(externalData)) {
+            for (let i = externalData.length - 1; i >= 0; i--) {
+                const rootNode = (0, util_1.deepCopy)(externalData[i]);
+                this.assignDepth(rootNode, 0);
+                if (this.treeConfig.initiallyCollapsed) {
+                    this.collapseAllNodes(rootNode);
+                }
+                this.expandNodesByDepth(rootNode, minExpandedDepth || 0);
+                data.children.push(rootNode);
+            }
+        }
+        else {
+            const rootNode = (0, util_1.deepCopy)(externalData);
+            this.assignDepth(rootNode, 0);
+            if (this.treeConfig.initiallyCollapsed) {
+                this.collapseAllNodes(rootNode);
+            }
+            this.expandNodesByDepth(rootNode, minExpandedDepth || 0);
+            data.children.push(rootNode);
+        }
+        return data;
+    }
+    collapseAllNodes(node) {
+        if (node.children) {
+            node._children = node.children;
+            node.children = null;
+            node._collapsed = true;
+            node._children.forEach((child) => this.collapseAllNodes(child));
+        }
+    }
+    expandNodesByDepth(node, minDepth) {
+        if (node.depth > minDepth) {
+            return;
+        }
+        if (node.depth <= minDepth && node._children) {
+            node.children = node._children;
+            node._children = null;
+            node._collapsed = false;
+        }
+        node.children?.forEach((child) => this.expandNodesByDepth(child, minDepth));
+    }
+    buildTree() {
+        const treeBuilder = d3
+            .tree()
+            .nodeSize([this.treeConfig.nodeWidth, this.treeConfig.levelHeight]);
+        const tree = treeBuilder(d3.hierarchy(this.dataset));
+        return [tree.descendants(), tree.links()];
+    }
+    enableDrag() {
+        let startX = 0;
+        let startY = 0;
+        let isDrag = false;
+        let mouseDownTransform = "";
+        this.treeContainer.onpointerdown = (event) => {
+            if (this.interactionMode !== null)
+                return;
+            this.cancelTransition(); // cancel transition to avoid conflict with drag
+            this.interactionMode = "drag";
+            mouseDownTransform = this.svgElement.style.transform;
+            startX = event.clientX;
+            startY = event.clientY;
+            isDrag = true;
+        };
+        this.treeContainer.onpointermove = (event) => {
+            if (!isDrag || this.interactionMode !== "drag")
+                return;
+            const originTransform = mouseDownTransform;
+            let originOffsetX = 0;
+            let originOffsetY = 0;
+            if (originTransform) {
+                const result = originTransform.match(constant_1.MATCH_TRANSLATE_REGEX);
+                if (result !== null && result.length !== 0) {
+                    const [offsetX, offsetY] = result.slice(1);
+                    originOffsetX = parseInt(offsetX);
+                    originOffsetY = parseInt(offsetY);
+                }
+            }
+            const newX = Math.floor((event.clientX - startX) / this.currentScale) +
+                originOffsetX;
+            const newY = Math.floor((event.clientY - startY) / this.currentScale) +
+                originOffsetY;
+            let transformStr = `translate(${newX}px, ${newY}px)`;
+            if (originTransform) {
+                transformStr = originTransform.replace(constant_1.MATCH_TRANSLATE_REGEX, transformStr);
+            }
+            this.svgElement.style.transform = transformStr;
+            this.domElement.style.transform = transformStr;
+        };
+        this.treeContainer.onpointerup = () => {
+            startX = 0;
+            startY = 0;
+            isDrag = false;
+            this.interactionMode = null;
+        };
+    }
+    cancelTransition() {
+        this.svgElement.style.transition = "none";
+        this.domElement.style.transition = "none";
+        const currentTransform = this.svgElement.style.transform;
+        this.svgElement.style.transform = currentTransform;
+        this.domElement.style.transform = currentTransform;
+    }
+    reinitTransform() {
+        this.initTransform();
+    }
+    initTransform() {
+        requestAnimationFrame(() => {
+            const containerWidth = this.domElement.offsetWidth;
+            const containerHeight = this.domElement.offsetHeight;
+            if (this.isVertical()) {
+                this.initTransformX = Math.floor(containerWidth / 2);
+                this.initTransformY = Math.floor(this.treeConfig.nodeHeight - constant_1.DEFAULT_HEIGHT_DECREMENT);
+            }
+            else {
+                this.initTransformX = Math.floor(this.treeConfig.nodeWidth - constant_1.DEFAULT_HEIGHT_DECREMENT);
+                this.initTransformY = Math.floor(containerHeight / 2);
+            }
+            // Apply initial transform
+            const transformStyle = this.getInitialTransformStyle();
+            this.svgElement.style.transform = transformStyle.transform;
+            this.domElement.style.transform = transformStyle.transform;
+        });
+    }
+    collapseNodesAtSameLevel(clickedNode) {
+        // Find the parent node to get siblings
+        const parent = this.nodeDataList.find((node) => node.data.children?.some((child) => child._key === clickedNode.data._key) ||
+            node.data._children?.some((child) => child._key === clickedNode.data._key));
+        if (!parent)
+            return;
+        // Get all siblings (including the clicked node)
+        const siblings = parent.data.children || [];
+        // Collapse all siblings except the clicked node
+        siblings.forEach((sibling) => {
+            if (sibling._key !== clickedNode.data._key) {
+                if (sibling.children) {
+                    sibling._children = sibling.children;
+                    sibling.children = null;
+                    sibling._collapsed = true;
+                }
+            }
+        });
+    }
+    onClickNode(index) {
+        //dont collapse the root node
+        if (index === 0)
+            return;
+        if (this.collapseEnabled) {
+            const curNode = this.nodeDataList[index];
+            if (curNode.data.children) {
+                curNode.data._children = curNode.data.children;
+                curNode.data.children = null;
+                curNode.data._collapsed = true;
+            }
+            else {
+                curNode.data.children = curNode.data._children;
+                curNode.data._children = null;
+                curNode.data._collapsed = false;
+                // When expanding a node, collapse its siblings
+                this.collapseNodesAtSameLevel(curNode);
+            }
+            this.draw();
+        }
+    }
+    expandNodeByLevelAndPosition(level, nodeIndex) {
+        const nodesAtLevel = this.nodeDataList.filter((node) => node.depth === level);
+        if (nodeIndex < 0 || nodeIndex >= nodesAtLevel.length) {
+            console.error("Node not found at level", level, "position", nodeIndex);
+            return;
+        }
+        const targetNode = nodesAtLevel[nodeIndex];
+        const nodeData = targetNode.data;
+        if (nodeData._children) {
+            nodeData.children = nodeData._children;
+            nodeData._children = null;
+            nodeData._collapsed = false;
+            this.draw();
+        }
+    }
+    collapseSiblingNodes(node) {
+        const parent = this.nodeDataList.find((n) => n.data.children?.some((child) => child._key === node.data._key) ||
+            n.data._children?.some((child) => child._key === node.data._key));
+        if (parent) {
+            parent.data.children?.forEach((child) => {
+                if (child._key !== node.data._key && child.children) {
+                    child._children = child.children;
+                    child.children = null;
+                    child._collapsed = true;
+                }
+            });
+        }
+    }
+    /**
+     * Focus on a specific node in the tree
+     * @param index Index of the node to focus on
+     */
+    focusToNode(index) {
+        //this.restoreScale();
+        if (!this.treeConfig.focusToNode)
+            return;
+        if (!this.nodeDataList || index < 0 || index >= this.nodeDataList.length) {
+            return;
+        }
+        const node = this.nodeDataList[index];
+        const containerWidth = this.domElement.offsetWidth;
+        const containerHeight = this.domElement.offsetHeight;
+        const nodeX = this.isVertical() ? node.x : node.y;
+        const nodeY = this.isVertical() ? node.y : node.x;
+        const translateX = Math.floor(containerWidth / 2 - nodeX);
+        const translateY = Math.floor(containerHeight / 2 - nodeY - constant_1.DEFAULT_NODE_HEIGHT * 2 - 10); // -2 nodes to center the diagram +10 of root node
+        const transformString = `scale(${this.currentScale}) translate(${translateX}px, ${translateY}px)`;
+        this.svgElement.style.transition = "transform 0.3s ease";
+        this.domElement.style.transition = "transform 0.3s ease";
+        this.svgElement.style.transform = transformString;
+        this.domElement.style.transform = transformString;
+    }
+    /**
+     * call this function to update dataset
+     * notice : you need to update the view rendered by `nodeDataList` too
+     * @param dataset the new dataset to show in chart
+     */
+    updateDataset(dataset) {
+        this.dataset = this.updatedInternalData(dataset);
+        this.draw();
+    }
+    /**
+     * release all dom reference
+     */
+    destroy() {
+        this.svgElement = null;
+        this.domElement = null;
+        this.treeContainer = null;
+    }
+}
+exports.default = TreeChartCore;

package/dist/tree-chart/tree-chart.d.ts

@@ -0,0 +1,9 @@
+export declare enum Direction {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export declare enum TreeLinkStyle {
+    CURVE = "curve",
+    STRAIGHT = "straight"
+}
+export type TreeDataset = Object | Object[];

package/dist/tree-chart/tree-chart.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeLinkStyle = exports.Direction = void 0;
+var Direction;
+(function (Direction) {
+    Direction["VERTICAL"] = "vertical";
+    Direction["HORIZONTAL"] = "horizontal";
+})(Direction || (exports.Direction = Direction = {}));
+var TreeLinkStyle;
+(function (TreeLinkStyle) {
+    TreeLinkStyle["CURVE"] = "curve";
+    TreeLinkStyle["STRAIGHT"] = "straight";
+})(TreeLinkStyle || (exports.TreeLinkStyle = TreeLinkStyle = {}));

package/dist/tree-chart/util.d.ts

@@ -0,0 +1,14 @@
+export declare function rotatePoint({ x, y }: {
+    x: number;
+    y: number;
+}): {
+    x: number;
+    y: number;
+};
+/**
+* Returns a deep copy of selected node (copy of itself and it's children).
+* If selected node or it's children have no '_key' attribute it will assign a new one.
+**/
+export declare function deepCopy(node: any): {
+    _key: string;
+};

package/dist/tree-chart/util.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rotatePoint = rotatePoint;
+exports.deepCopy = deepCopy;
+const uuid_1 = require("../base/uuid");
+function rotatePoint({ x, y }) {
+    return {
+        x: y,
+        y: x,
+    };
+}
+/**
+* Returns a deep copy of selected node (copy of itself and it's children).
+* If selected node or it's children have no '_key' attribute it will assign a new one.
+**/
+function deepCopy(node) {
+    let obj = { _key: (0, uuid_1.uuid)() };
+    for (var key in node) {
+        if (node[key] === null) {
+            obj[key] = null;
+        }
+        else if (Array.isArray(node[key])) {
+            obj[key] = node[key].map((x) => deepCopy(x));
+        }
+        else if (typeof node[key] === "object") {
+            obj[key] = deepCopy(node[key]);
+        }
+        else {
+            obj[key] = node[key];
+        }
+    }
+    return obj;
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@bencamus/tree-chart-core",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "d3": "^7.9.0"
+  },
+  "devDependencies": {
+    "@types/d3": "^7.4.3",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.8.2"
+  },
+  "license": "MIT",
+  "description": "Core library for tree chart visualization."
+}