@bencamus/vue3-tree-chart 0.1.0 → 0.1.1

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@bencamus/vue3-tree-chart",
-  "version": "0.1.0",
-  "main": "dist/vue3-tree-chart.umd.js",
-  "module": "dist/vue3-tree-chart.esm.js",
-  "types": "dist/vue3-tree-chart.d.ts",
-  "files": ["dist"],
+  "version": "0.1.1",
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "style": "src/styles/vue3-tree-chart.css",
+  "files": ["src"],
   "scripts": {
     "build": "vite build",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "echo 'No build required for source-only package'",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
@@ -16,12 +17,13 @@
     "typescript": "~5.7.2",
     "vite": "^6.2.0",
     "less": "^4.2.2",
-    "@types/node": "^20.0.0"
+    "@types/node": "^20.0.0",
+    "vite-plugin-less": "^2.0.0"
   },
   "peerDependencies": {
     "vue": "^3.0.0",
     "@bencamus/tree-chart-core": "^0.1.0"
   },
   "license": "MIT",
-  "description": "Vue 3 component for tree chart visualization."
+  "description": "Vue 3 component for tree chart visualization (source code)."
 }

package/src/components/VueTree.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="tree-container" ref="container">
+    <svg class="svg vue-tree" ref="svg" :style="initialTransformStyle"></svg>
+    <div class="dom-container" ref="domContainer" :style="initialTransformStyle">
+      <transition-group name="tree-node-item" tag="div">
+        <div class="node-slot" v-for="(node, index) of nodeDataList" @click="onClickNode(index)" :key="node.data._key"
+          :style="{
+            left: formatDimension(
+              direction === Direction.VERTICAL ? node.x : node.y
+            ),
+            top: formatDimension(
+              direction === Direction.VERTICAL ? node.y : node.x
+            ),
+            width: formatDimension(config.nodeWidth),
+            height: formatDimension(config.nodeHeight),
+          }">
+          <slot name="node" v-bind:node="node.data" v-bind:collapsed="node.data._collapsed">
+            <span>{{ node.data.value }}</span>
+          </slot>
+        </div>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch } from 'vue';
+import TreeChartCore, {
+  DEFAULT_NODE_WIDTH,
+  DEFAULT_NODE_HEIGHT,
+  DEFAULT_LEVEL_HEIGHT,
+  TreeLinkStyle,
+  Direction,
+} from "../../../tree-chart-core/index.ts";
+
+interface TreeConfig {
+  nodeWidth?: number;
+  nodeHeight?: number;
+  levelHeight?: number;
+  focusToNode?: boolean;
+  initiallyCollapsed?: boolean;
+  useMobileZoom?: boolean;
+  useMouseZoom?: boolean;
+  collapseDepth?: number;
+}
+
+interface NodeData {
+  x: number;
+  y: number;
+  data: {
+    _key: string;
+    _collapsed: boolean;
+    value: string;
+    [key: string]: any;
+  };
+}
+
+const formatDimension = (dimension: number | string): string => {
+  if (typeof dimension === "number") return `${dimension}px`;
+  if (typeof dimension === "string" && dimension.indexOf("px") !== -1) {
+    return dimension;
+  }
+  return `${dimension}px`;
+};
+
+export default defineComponent({
+  name: "VueTree",
+  props: {
+    config: {
+      type: Object as () => TreeConfig,
+      default: () => ({
+        nodeWidth: DEFAULT_NODE_WIDTH,
+        nodeHeight: DEFAULT_NODE_HEIGHT,
+        levelHeight: DEFAULT_LEVEL_HEIGHT,
+        focusToNode: false,
+        initiallyCollapsed: false,
+        useMobileZoom: false,
+        useMouseZoom: false,
+        collapseDepth: 0,
+      }),
+    },
+    linkStyle: {
+      type: String as () => TreeLinkStyle,
+      default: TreeLinkStyle.CURVE,
+    },
+    direction: {
+      type: String as () => Direction,
+      default: Direction.VERTICAL,
+    },
+    collapseEnabled: {
+      type: Boolean,
+      default: true,
+    },
+    dataset: {
+      type: [Object, Array] as () => any,
+      required: true,
+    },
+  },
+  setup(props) {
+    const container = ref<HTMLElement | null>(null);
+    const svg = ref<SVGSVGElement | null>(null);
+    const domContainer = ref<HTMLElement | null>(null);
+    const treeChartCore = ref<TreeChartCore | null>(null);
+    const nodeDataList = ref<NodeData[]>([]);
+    const initialTransformStyle = ref<Record<string, string>>({});
+
+    const init = () => {
+      if (!svg.value || !domContainer.value || !container.value) return;
+
+      treeChartCore.value = new TreeChartCore({
+        svgElement: svg.value,
+        domElement: domContainer.value,
+        treeContainer: container.value,
+        dataset: props.dataset,
+        direction: props.direction,
+        treeConfig: props.config,
+        collapseEnabled: props.collapseEnabled,
+        linkStyle: props.linkStyle,
+      });
+
+      treeChartCore.value.init();
+      nodeDataList.value = treeChartCore.value.getNodeDataList();
+      initialTransformStyle.value = treeChartCore.value.getInitialTransformStyle();
+    };
+
+    const zoomIn = () => treeChartCore.value?.zoomIn();
+    const zoomOut = () => treeChartCore.value?.zoomOut();
+    const restoreScale = () => treeChartCore.value?.setScale(1);
+    const expandNodeByLevelAndPosition = (level: number, position: number) => {
+      treeChartCore.value?.expandNodeByLevelAndPosition(level, position);
+      nodeDataList.value = treeChartCore.value?.getNodeDataList() || [];
+    };
+    const restorePosition = () => treeChartCore.value?.restorePosition();
+    const onClickNode = (index: number) => {
+      treeChartCore.value?.onClickNode(index);
+      nodeDataList.value = treeChartCore.value?.getNodeDataList() || [];
+      if (props.config.focusToNode) {
+        focusToNode(index);
+      }
+    };
+    const focusToNode = (index: number) => treeChartCore.value?.focusToNode(index);
+
+    onMounted(() => {
+      init();
+    });
+
+    onBeforeUnmount(() => {
+      treeChartCore.value?.destroy();
+    });
+
+    watch(
+      () => props.dataset,
+      (newDataset) => {
+        treeChartCore.value?.updateDataset(newDataset);
+        nodeDataList.value = treeChartCore.value?.getNodeDataList() || [];
+      },
+      { deep: true }
+    );
+
+    return {
+      container,
+      svg,
+      domContainer,
+      nodeDataList,
+      initialTransformStyle,
+      formatDimension,
+      Direction,
+      zoomIn,
+      zoomOut,
+      restoreScale,
+      expandNodeByLevelAndPosition,
+      restorePosition,
+      onClickNode,
+      focusToNode,
+    };
+  },
+});
+</script>
+
+<style>
+.tree-container .node {
+  fill: grey !important;
+}
+
+.tree-container .link {
+  stroke-width: 2px !important;
+  fill: transparent !important;
+  stroke: #cecece !important;
+}
+
+.tree-container .link-hidden {
+  display: none;
+  stroke-width: 2px !important;
+  fill: transparent !important;
+  stroke: #FC2020FF !important;
+}
+
+.tree-node-item-enter,
+.tree-node-item-leave-to {
+  opacity: 0;
+}
+
+.tree-node-item-enter-active,
+.tree-node-item-leave-active {
+
+}
+
+.tree-container {
+  touch-action: none;
+  position: relative;
+  overflow: hidden;
+}
+
+.tree-container .vue-tree {
+  position: relative;
+}
+
+.tree-container > svg,
+.tree-container .dom-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: visible;
+  transform-origin: 0 50%;
+}
+
+.tree-container .dom-container {
+  z-index: 1;
+  pointer-events: none;
+}
+
+.node-slot {
+  cursor: pointer;
+  pointer-events: all;
+  position: absolute;
+  background-color: transparent;
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  transition-timing-function: ease-in-out;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,2 @@
+import VueTree from '@/components/VueTree.vue';
+export default VueTree;

package/dist/vue3-tree-chart.css

@@ -1 +0,0 @@
-.tree-container .node{fill:gray!important}.tree-container .link{stroke-width:2px!important;fill:transparent!important;stroke:#cecece!important}.tree-container .link-hidden{display:none;stroke-width:2px!important;fill:transparent!important;stroke:#fc2020!important}.tree-node-item-enter[data-v-c304c1c5],.tree-node-item-leave-to[data-v-c304c1c5]{opacity:0}.tree-container[data-v-c304c1c5]{touch-action:none;position:relative;overflow:hidden}.tree-container .vue-tree[data-v-c304c1c5]{position:relative}.tree-container>svg[data-v-c304c1c5],.tree-container .dom-container[data-v-c304c1c5]{width:100%;height:100%;position:absolute;left:0;top:0;overflow:visible;transform-origin:0 50%}.tree-container .dom-container[data-v-c304c1c5]{z-index:1;pointer-events:none}.node-slot[data-v-c304c1c5]{cursor:pointer;pointer-events:all;position:absolute;background-color:transparent;box-sizing:border-box;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;box-sizing:content-box;transition-timing-function:ease-in-out}

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

@@ -1,156 +0,0 @@
-import { defineComponent as S, ref as d, onMounted as k, onBeforeUnmount as I, watch as _, createElementBlock as c, openBlock as f, createElementVNode as D, normalizeStyle as m, createVNode as A, TransitionGroup as V, withCtx as H, Fragment as O, renderList as $, renderSlot as b, toDisplayString as B } from "vue";
-import z, { Direction as T, TreeLinkStyle as U, DEFAULT_LEVEL_HEIGHT as w, DEFAULT_NODE_HEIGHT as F, DEFAULT_NODE_WIDTH as P } from "@bencamus/tree-chart-core";
-const R = (e) => typeof e == "number" ? `${e}px` : typeof e == "string" && e.indexOf("px") !== -1 ? e : `${e}px`, G = S({
-  name: "VueTree",
-  props: {
-    config: {
-      type: Object,
-      default: () => ({
-        nodeWidth: P,
-        nodeHeight: F,
-        levelHeight: w,
-        focusToNode: !1,
-        initiallyCollapsed: !1,
-        useMobileZoom: !1,
-        useMouseZoom: !1,
-        collapseDepth: 0
-      })
-    },
-    linkStyle: {
-      type: String,
-      default: U.CURVE
-    },
-    direction: {
-      type: String,
-      default: T.VERTICAL
-    },
-    collapseEnabled: {
-      type: Boolean,
-      default: !0
-    },
-    dataset: {
-      type: [Object, Array],
-      required: !0
-    }
-  },
-  setup(e) {
-    const r = d(null), i = d(null), s = d(null), o = d(null), u = d([]), n = d({}), v = () => {
-      !i.value || !s.value || !r.value || (o.value = new z({
-        svgElement: i.value,
-        domElement: s.value,
-        treeContainer: r.value,
-        dataset: e.dataset,
-        direction: e.direction,
-        treeConfig: e.config,
-        collapseEnabled: e.collapseEnabled,
-        linkStyle: e.linkStyle
-      }), o.value.init(), u.value = o.value.getNodeDataList(), n.value = o.value.getInitialTransformStyle());
-    }, y = () => {
-      var t;
-      return (t = o.value) == null ? void 0 : t.zoomIn();
-    }, C = () => {
-      var t;
-      return (t = o.value) == null ? void 0 : t.zoomOut();
-    }, E = () => {
-      var t;
-      return (t = o.value) == null ? void 0 : t.setScale(1);
-    }, L = (t, a) => {
-      var l, g;
-      (l = o.value) == null || l.expandNodeByLevelAndPosition(t, a), u.value = ((g = o.value) == null ? void 0 : g.getNodeDataList()) || [];
-    }, N = () => {
-      var t;
-      return (t = o.value) == null ? void 0 : t.restorePosition();
-    }, h = (t) => {
-      var a, l;
-      (a = o.value) == null || a.onClickNode(t), u.value = ((l = o.value) == null ? void 0 : l.getNodeDataList()) || [], e.config.focusToNode && p(t);
-    }, p = (t) => {
-      var a;
-      return (a = o.value) == null ? void 0 : a.focusToNode(t);
-    };
-    return k(() => {
-      v();
-    }), I(() => {
-      var t;
-      (t = o.value) == null || t.destroy();
-    }), _(
-      () => e.dataset,
-      (t) => {
-        var a, l;
-        (a = o.value) == null || a.updateDataset(t), u.value = ((l = o.value) == null ? void 0 : l.getNodeDataList()) || [];
-      },
-      { deep: !0 }
-    ), {
-      container: r,
-      svg: i,
-      domContainer: s,
-      nodeDataList: u,
-      initialTransformStyle: n,
-      formatDimension: R,
-      Direction: T,
-      zoomIn: y,
-      zoomOut: C,
-      restoreScale: E,
-      expandNodeByLevelAndPosition: L,
-      restorePosition: N,
-      onClickNode: h,
-      focusToNode: p
-    };
-  }
-}), M = (e, r) => {
-  const i = e.__vccOpts || e;
-  for (const [s, o] of r)
-    i[s] = o;
-  return i;
-}, W = {
-  class: "tree-container",
-  ref: "container"
-}, j = ["onClick"];
-function Z(e, r, i, s, o, u) {
-  return f(), c("div", W, [
-    (f(), c("svg", {
-      class: "svg vue-tree",
-      ref: "svg",
-      style: m(e.initialTransformStyle)
-    }, null, 4)),
-    D("div", {
-      class: "dom-container",
-      ref: "domContainer",
-      style: m(e.initialTransformStyle)
-    }, [
-      A(V, {
-        name: "tree-node-item",
-        tag: "div"
-      }, {
-        default: H(() => [
-          (f(!0), c(O, null, $(e.nodeDataList, (n, v) => (f(), c("div", {
-            class: "node-slot",
-            onClick: (y) => e.onClickNode(v),
-            key: n.data._key,
-            style: m({
-              left: e.formatDimension(
-                e.direction === e.Direction.VERTICAL ? n.x : n.y
-              ),
-              top: e.formatDimension(
-                e.direction === e.Direction.VERTICAL ? n.y : n.x
-              ),
-              width: e.formatDimension(e.config.nodeWidth),
-              height: e.formatDimension(e.config.nodeHeight)
-            })
-          }, [
-            b(e.$slots, "node", {
-              node: n.data,
-              collapsed: n.data._collapsed
-            }, () => [
-              D("span", null, B(n.data.value), 1)
-            ], !0)
-          ], 12, j))), 128))
-        ]),
-        _: 3
-      })
-    ], 4)
-  ], 512);
-}
-const K = /* @__PURE__ */ M(G, [["render", Z], ["__scopeId", "data-v-c304c1c5"]]);
-export {
-  K as default
-};

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

@@ -1 +0,0 @@
-(function(e,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue"),require("@bencamus/tree-chart-core")):typeof define=="function"&&define.amd?define(["vue","@bencamus/tree-chart-core"],a):(e=typeof globalThis<"u"?globalThis:e||self,e.Vue3TreeChart=a(e.Vue,e.TreeChartCore))})(this,function(e,a){"use strict";const g=t=>typeof t=="number"?`${t}px`:typeof t=="string"&&t.indexOf("px")!==-1?t:`${t}px`,D=e.defineComponent({name:"VueTree",props:{config:{type:Object,default:()=>({nodeWidth:a.DEFAULT_NODE_WIDTH,nodeHeight:a.DEFAULT_NODE_HEIGHT,levelHeight:a.DEFAULT_LEVEL_HEIGHT,focusToNode:!1,initiallyCollapsed:!1,useMobileZoom:!1,useMouseZoom:!1,collapseDepth:0})},linkStyle:{type:String,default:a.TreeLinkStyle.CURVE},direction:{type:String,default:a.Direction.VERTICAL},collapseEnabled:{type:Boolean,default:!0},dataset:{type:[Object,Array],required:!0}},setup(t){const c=e.ref(null),s=e.ref(null),d=e.ref(null),n=e.ref(null),f=e.ref([]),l=e.ref({}),u=()=>{!s.value||!d.value||!c.value||(n.value=new a({svgElement:s.value,domElement:d.value,treeContainer:c.value,dataset:t.dataset,direction:t.direction,treeConfig:t.config,collapseEnabled:t.collapseEnabled,linkStyle:t.linkStyle}),n.value.init(),f.value=n.value.getNodeDataList(),l.value=n.value.getInitialTransformStyle())},m=()=>{var o;return(o=n.value)==null?void 0:o.zoomIn()},L=()=>{var o;return(o=n.value)==null?void 0:o.zoomOut()},N=()=>{var o;return(o=n.value)==null?void 0:o.setScale(1)},S=(o,i)=>{var r,y;(r=n.value)==null||r.expandNodeByLevelAndPosition(o,i),f.value=((y=n.value)==null?void 0:y.getNodeDataList())||[]},h=()=>{var o;return(o=n.value)==null?void 0:o.restorePosition()},V=o=>{var i,r;(i=n.value)==null||i.onClickNode(o),f.value=((r=n.value)==null?void 0:r.getNodeDataList())||[],t.config.focusToNode&&p(o)},p=o=>{var i;return(i=n.value)==null?void 0:i.focusToNode(o)};return e.onMounted(()=>{u()}),e.onBeforeUnmount(()=>{var o;(o=n.value)==null||o.destroy()}),e.watch(()=>t.dataset,o=>{var i,r;(i=n.value)==null||i.updateDataset(o),f.value=((r=n.value)==null?void 0:r.getNodeDataList())||[]},{deep:!0}),{container:c,svg:s,domContainer:d,nodeDataList:f,initialTransformStyle:l,formatDimension:g,Direction:a.Direction,zoomIn:m,zoomOut:L,restoreScale:N,expandNodeByLevelAndPosition:S,restorePosition:h,onClickNode:V,focusToNode:p}}}),E=(t,c)=>{const s=t.__vccOpts||t;for(const[d,n]of c)s[d]=n;return s},k={class:"tree-container",ref:"container"},T=["onClick"];function v(t,c,s,d,n,f){return e.openBlock(),e.createElementBlock("div",k,[(e.openBlock(),e.createElementBlock("svg",{class:"svg vue-tree",ref:"svg",style:e.normalizeStyle(t.initialTransformStyle)},null,4)),e.createElementVNode("div",{class:"dom-container",ref:"domContainer",style:e.normalizeStyle(t.initialTransformStyle)},[e.createVNode(e.TransitionGroup,{name:"tree-node-item",tag:"div"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.nodeDataList,(l,u)=>(e.openBlock(),e.createElementBlock("div",{class:"node-slot",onClick:m=>t.onClickNode(u),key:l.data._key,style:e.normalizeStyle({left:t.formatDimension(t.direction===t.Direction.VERTICAL?l.x:l.y),top:t.formatDimension(t.direction===t.Direction.VERTICAL?l.y:l.x),width:t.formatDimension(t.config.nodeWidth),height:t.formatDimension(t.config.nodeHeight)})},[e.renderSlot(t.$slots,"node",{node:l.data,collapsed:l.data._collapsed},()=>[e.createElementVNode("span",null,e.toDisplayString(l.data.value),1)],!0)],12,T))),128))]),_:3})],4)],512)}return E(D,[["render",v],["__scopeId","data-v-c304c1c5"]])});