squarified 0.3.3 → 0.3.6

package/README.md

@@ -2,7 +2,11 @@
 
 `squarified` is a minimal and powerful treemap component.
 
-![display](./data.gif)
+
+
+https://github.com/user-attachments/assets/caf30d9d-0a5a-446a-b767-7927bf4387c9
+
+
 
 ## Install
 

package/dist/helper.d.mts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Any = any
+
+type AnyObject = Record<keyof Any, Any>

package/dist/helper.d.ts

@@ -0,0 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Any = any
+
+type AnyObject = Record<keyof Any, Any>

package/dist/index.d.mts

@@ -219,7 +219,6 @@ declare const defaultFontOptions: {
 };
 declare function presetDecorator(app: TreemapLayout): void;
 
-type AnyObject = Record<keyof Any, Any>;
 declare function sortChildrenByKey<T extends AnyObject, K extends keyof T = 'weight'>(data: T[], ...keys: K[]): T[];
 declare function c2m<T extends AnyObject & {
     groups: Any[];

package/dist/index.d.ts

@@ -219,7 +219,6 @@ declare const defaultFontOptions: {
 };
 declare function presetDecorator(app: TreemapLayout): void;
 
-type AnyObject = Record<keyof Any, Any>;
 declare function sortChildrenByKey<T extends AnyObject, K extends keyof T = 'weight'>(data: T[], ...keys: K[]): T[];
 declare function c2m<T extends AnyObject & {
     groups: Any[];

package/dist/index.js

@@ -874,7 +874,7 @@ function createEffectStop(c) {
     }
   };
 }
-function createEffectScope() {
+function createSmoothFrame() {
   const c = {
     animationFrameID: null
   };
@@ -1024,8 +1024,8 @@ const INTERNAL_EVENT_MAPPINGS = {
 };
 const ANIMATION_DURATION = 300;
 const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
-function runEffect(callback, opts) {
-  const effect = createEffectScope();
+function smoothFrame(callback, opts) {
+  const frame = createSmoothFrame();
   const startTime = Date.now();
   const condtion = (process) => {
     if (Array.isArray(opts.deps)) {
@@ -1033,17 +1033,17 @@ function runEffect(callback, opts) {
     }
     return process >= 1;
   };
-  effect.run(() => {
+  frame.run(() => {
     const elapsed = Date.now() - startTime;
     const progress = Math.min(elapsed / opts.duration, 1);
     if (condtion(progress)) {
-      effect.stop();
+      frame.stop();
       if (opts.onStop) {
         opts.onStop();
       }
       return true;
     }
-    return callback(progress, effect.stop);
+    return callback(progress, frame.stop);
   });
 }
 const HIGH_LIGHT_OPACITY = 0.3;
@@ -1052,7 +1052,7 @@ function drawHighlight(treemap, evt) {
   const { currentNode } = evt.state;
   if (currentNode) {
     const [x, y, w, h] = currentNode.layout;
-    runEffect((_, cleanup) => {
+    smoothFrame((_, cleanup) => {
       cleanup();
       highlight.reset();
       const mask = createRoundBlock(x, y, w, h, { fill, opacity: HIGH_LIGHT_OPACITY, radius: 4, padding: 2 });
@@ -1120,7 +1120,7 @@ class TreemapEvent extends DOMEvent {
       drawHighlight(ctx.treemap, this);
     } else {
       const { treemap } = ctx;
-      runEffect((_, cleanup) => {
+      smoothFrame((_, cleanup) => {
         cleanup();
         const { offsetX: x, offsetY: y } = metadata.native;
         const { dragX: lastX, dragY: lastY } = this.state;
@@ -1191,13 +1191,11 @@ class TreemapEvent extends DOMEvent {
     const targetScaleRatio = this.matrix.a * delta;
     const translateX = offsetX - (offsetX - this.matrix.e) * delta;
     const translateY = offsetY - (offsetY - this.matrix.f) * delta;
-    runEffect((progress, cleanup) => {
-      this.silent("mousedown");
+    smoothFrame((progress, cleanup) => {
       this.exposedEvent.silent("mousemove");
       this.silent("mousemove");
       this.silent("click");
       this.exposedEvent.silent("click");
-      cleanup();
       treemap.highlight.reset();
       treemap.highlight.setZIndexForHighlight();
       treemap.fontCache.flush(treemap, this.matrix);
@@ -1214,12 +1212,12 @@ class TreemapEvent extends DOMEvent {
       );
       stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
       treemap.update();
+      cleanup();
     }, {
       duration: ANIMATION_DURATION,
       onStop: () => {
         this.state.forceDestroy = false;
         this.state.isWheeling = false;
-        this.active("mousedown");
         this.active("mousemove");
         this.exposedEvent.active("mousemove");
         this.active("click");
@@ -1256,7 +1254,7 @@ function createOnZoom(treemap, evt) {
       const targetScale = factor * evt.matrix.a;
       const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * factor;
       const translateY = boundingClientRect.height / 2 - (my + mh / 2) * factor;
-      runEffect((progress, cleanup) => {
+      smoothFrame((progress, cleanup) => {
         cleanup();
         evt.silent("mousemove");
         evt.exposedEvent.silent("mousemove");
@@ -1643,8 +1641,8 @@ function evaluateColorMappings(data) {
     const hash = Math.abs(hashCode(id));
     return hash % 360;
   };
-  const lightScale = (depth) => 60 - depth * 5;
-  const baseSaturation = 70;
+  const lightScale = (depth) => 50 - depth * 5;
+  const baseSaturation = 80;
   const siblingHueShift = 30;
   const rc = 0.2126;
   const gc = 0.7152;
@@ -1672,8 +1670,8 @@ function evaluateColorMappings(data) {
     const { r, g, b } = hslToRgb(hslColor.h, hslColor.s / 100, hslColor.l);
     const luminance = calculateLuminance(r, g, b);
     if (luminance < 0.6) {
-      hslColor.l += 0.15;
-    } else if (luminance > 0.65) {
+      hslColor.l += 0.2;
+    } else if (luminance > 0.8) {
       hslColor.l -= 0.1;
     }
     hslColor.l *= 100;

package/dist/index.mjs

@@ -872,7 +872,7 @@ function createEffectStop(c) {
     }
   };
 }
-function createEffectScope() {
+function createSmoothFrame() {
   const c = {
     animationFrameID: null
   };
@@ -1022,8 +1022,8 @@ const INTERNAL_EVENT_MAPPINGS = {
 };
 const ANIMATION_DURATION = 300;
 const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
-function runEffect(callback, opts) {
-  const effect = createEffectScope();
+function smoothFrame(callback, opts) {
+  const frame = createSmoothFrame();
   const startTime = Date.now();
   const condtion = (process) => {
     if (Array.isArray(opts.deps)) {
@@ -1031,17 +1031,17 @@ function runEffect(callback, opts) {
     }
     return process >= 1;
   };
-  effect.run(() => {
+  frame.run(() => {
     const elapsed = Date.now() - startTime;
     const progress = Math.min(elapsed / opts.duration, 1);
     if (condtion(progress)) {
-      effect.stop();
+      frame.stop();
       if (opts.onStop) {
         opts.onStop();
       }
       return true;
     }
-    return callback(progress, effect.stop);
+    return callback(progress, frame.stop);
   });
 }
 const HIGH_LIGHT_OPACITY = 0.3;
@@ -1050,7 +1050,7 @@ function drawHighlight(treemap, evt) {
   const { currentNode } = evt.state;
   if (currentNode) {
     const [x, y, w, h] = currentNode.layout;
-    runEffect((_, cleanup) => {
+    smoothFrame((_, cleanup) => {
       cleanup();
       highlight.reset();
       const mask = createRoundBlock(x, y, w, h, { fill, opacity: HIGH_LIGHT_OPACITY, radius: 4, padding: 2 });
@@ -1118,7 +1118,7 @@ class TreemapEvent extends DOMEvent {
       drawHighlight(ctx.treemap, this);
     } else {
       const { treemap } = ctx;
-      runEffect((_, cleanup) => {
+      smoothFrame((_, cleanup) => {
         cleanup();
         const { offsetX: x, offsetY: y } = metadata.native;
         const { dragX: lastX, dragY: lastY } = this.state;
@@ -1189,13 +1189,11 @@ class TreemapEvent extends DOMEvent {
     const targetScaleRatio = this.matrix.a * delta;
     const translateX = offsetX - (offsetX - this.matrix.e) * delta;
     const translateY = offsetY - (offsetY - this.matrix.f) * delta;
-    runEffect((progress, cleanup) => {
-      this.silent("mousedown");
+    smoothFrame((progress, cleanup) => {
       this.exposedEvent.silent("mousemove");
       this.silent("mousemove");
       this.silent("click");
       this.exposedEvent.silent("click");
-      cleanup();
       treemap.highlight.reset();
       treemap.highlight.setZIndexForHighlight();
       treemap.fontCache.flush(treemap, this.matrix);
@@ -1212,12 +1210,12 @@ class TreemapEvent extends DOMEvent {
       );
       stackMatrixTransformWithGraphAndLayer(treemap.elements, this.matrix.e, this.matrix.f, 1);
       treemap.update();
+      cleanup();
     }, {
       duration: ANIMATION_DURATION,
       onStop: () => {
         this.state.forceDestroy = false;
         this.state.isWheeling = false;
-        this.active("mousedown");
         this.active("mousemove");
         this.exposedEvent.active("mousemove");
         this.active("click");
@@ -1254,7 +1252,7 @@ function createOnZoom(treemap, evt) {
       const targetScale = factor * evt.matrix.a;
       const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * factor;
       const translateY = boundingClientRect.height / 2 - (my + mh / 2) * factor;
-      runEffect((progress, cleanup) => {
+      smoothFrame((progress, cleanup) => {
         cleanup();
         evt.silent("mousemove");
         evt.exposedEvent.silent("mousemove");
@@ -1641,8 +1639,8 @@ function evaluateColorMappings(data) {
     const hash = Math.abs(hashCode(id));
     return hash % 360;
   };
-  const lightScale = (depth) => 60 - depth * 5;
-  const baseSaturation = 70;
+  const lightScale = (depth) => 50 - depth * 5;
+  const baseSaturation = 80;
   const siblingHueShift = 30;
   const rc = 0.2126;
   const gc = 0.7152;
@@ -1670,8 +1668,8 @@ function evaluateColorMappings(data) {
     const { r, g, b } = hslToRgb(hslColor.h, hslColor.s / 100, hslColor.l);
     const luminance = calculateLuminance(r, g, b);
     if (luminance < 0.6) {
-      hslColor.l += 0.15;
-    } else if (luminance > 0.65) {
+      hslColor.l += 0.2;
+    } else if (luminance > 0.8) {
       hslColor.l -= 0.1;
     }
     hslColor.l *= 100;

package/package.json

@@ -1,36 +1,42 @@
 {
   "name": "squarified",
-  "version": "0.3.3",
+  "version": "0.3.6",
   "description": "squarified tree map",
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "squarified/__source__": "./src/index.ts",
-      "import": "./dist/index.mjs",
-      "default": "./dist/index.js"
-    }
-  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": "./src/index.ts",
   "keywords": [
     "squarified",
     "tree-map"
   ],
+  "files": [
+    "dist",
+    "LICENSE",
+    "README.md"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nonzzz/squarified.git"
   },
   "author": "Kanno",
   "license": "MIT",
-  "typesVersions": {
-    "<5.0": {
-      "*": [
-        "*",
-        "./*",
-        "./*/index.d.ts",
-        "./*/index.d.mts",
-        "./*/index.d.cts"
-      ]
-    }
+  "devDependencies": {
+    "@types/js-yaml": "^4.0.9",
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^22.7.4",
+    "chokidar": "^4.0.3",
+    "dprint": "^0.47.2",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.16.0",
+    "eslint-config-kagura": "^3.0.1",
+    "highlight.js": "^11.11.1",
+    "jiek": "^2.3.3",
+    "js-yaml": "^4.1.0",
+    "markdown-it": "^14.1.0",
+    "tinyexec": "^0.3.2",
+    "tsx": "^4.19.2",
+    "typescript": "^5.7.3",
+    "vite-bundle-analyzer": "^0.16.2"
   }
 }