squarified 0.3.2 → 0.3.5

package/README.md

@@ -1,6 +1,6 @@
 # Squarified
 
-`squarified` is a mini treemap component.
+`squarified` is a minimal and powerful treemap component.
 
 ![display](./data.gif)
 

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

@@ -758,14 +758,14 @@ class RenderCache extends Canvas {
     if (width * a >= size || height * d >= size) {
       return;
     }
+    if (width * a * height * d >= size * size) {
+      return;
+    }
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     this.setOptions({ width: width * a, height: height * d, devicePixelRatio });
     resetLayout(treemap, width * a, height * d);
     drawGraphIntoCanvas(treemap, { c: this.canvas, ctx: this.ctx, dpr: devicePixelRatio });
     this.$memory = true;
-    if (this.ctx.isContextLost()) {
-      this.$memory = false;
-    }
   }
   destroy() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -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;
@@ -1175,6 +1175,7 @@ class TreemapEvent extends DOMEvent {
   }
   onwheel(ctx, metadata) {
     ctx.treemap.renderCache.destroy();
+    ctx.treemap.event.silent(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
     const { native } = metadata;
     const { treemap } = ctx;
     const wheelDelta = native.wheelDelta;
@@ -1190,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);
@@ -1213,16 +1212,17 @@ 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");
         this.exposedEvent.active("click");
+        treemap.event.active(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
       }
     });
   }
@@ -1254,8 +1254,10 @@ 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");
         treemap.fontCache.flush(treemap, evt.matrix);
         const easedProgress = easing.cubicInOut(progress);
         const scale = (targetScale - evt.matrix.a) * easedProgress;
@@ -1273,6 +1275,8 @@ function createOnZoom(treemap, evt) {
         duration: ANIMATION_DURATION,
         onStop: () => {
           evt.state.isZooming = false;
+          evt.active("mousemove");
+          evt.exposedEvent.active("mousemove");
         }
       });
     }
@@ -1637,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;
@@ -1666,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

@@ -756,14 +756,14 @@ class RenderCache extends Canvas {
     if (width * a >= size || height * d >= size) {
       return;
     }
+    if (width * a * height * d >= size * size) {
+      return;
+    }
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
     this.setOptions({ width: width * a, height: height * d, devicePixelRatio });
     resetLayout(treemap, width * a, height * d);
     drawGraphIntoCanvas(treemap, { c: this.canvas, ctx: this.ctx, dpr: devicePixelRatio });
     this.$memory = true;
-    if (this.ctx.isContextLost()) {
-      this.$memory = false;
-    }
   }
   destroy() {
     this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
@@ -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;
@@ -1173,6 +1173,7 @@ class TreemapEvent extends DOMEvent {
   }
   onwheel(ctx, metadata) {
     ctx.treemap.renderCache.destroy();
+    ctx.treemap.event.silent(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
     const { native } = metadata;
     const { treemap } = ctx;
     const wheelDelta = native.wheelDelta;
@@ -1188,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);
@@ -1211,16 +1210,17 @@ 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");
         this.exposedEvent.active("click");
+        treemap.event.active(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
       }
     });
   }
@@ -1252,8 +1252,10 @@ 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");
         treemap.fontCache.flush(treemap, evt.matrix);
         const easedProgress = easing.cubicInOut(progress);
         const scale = (targetScale - evt.matrix.a) * easedProgress;
@@ -1271,6 +1273,8 @@ function createOnZoom(treemap, evt) {
         duration: ANIMATION_DURATION,
         onStop: () => {
           evt.state.isZooming = false;
+          evt.active("mousemove");
+          evt.exposedEvent.active("mousemove");
         }
       });
     }
@@ -1635,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;
@@ -1664,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.2",
+  "version": "0.3.5",
   "description": "squarified tree map",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",