squarified 0.3.3 → 0.3.5

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,6 +1,6 @@
 {
   "name": "squarified",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "squarified tree map",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",