squarified 0.3.1 → 0.3.3

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.js

@@ -758,6 +758,9 @@ 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);
@@ -1172,9 +1175,7 @@ class TreemapEvent extends DOMEvent {
   }
   onwheel(ctx, metadata) {
     ctx.treemap.renderCache.destroy();
-    this.silent("mousedown");
-    this.exposedEvent.silent("mousemove");
-    this.silent("mousemove");
+    ctx.treemap.event.silent(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
     const { native } = metadata;
     const { treemap } = ctx;
     const wheelDelta = native.wheelDelta;
@@ -1191,6 +1192,11 @@ class TreemapEvent extends DOMEvent {
     const translateX = offsetX - (offsetX - this.matrix.e) * delta;
     const translateY = offsetY - (offsetY - this.matrix.f) * delta;
     runEffect((progress, cleanup) => {
+      this.silent("mousedown");
+      this.exposedEvent.silent("mousemove");
+      this.silent("mousemove");
+      this.silent("click");
+      this.exposedEvent.silent("click");
       cleanup();
       treemap.highlight.reset();
       treemap.highlight.setZIndexForHighlight();
@@ -1216,6 +1222,9 @@ class TreemapEvent extends DOMEvent {
         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);
       }
     });
   }
@@ -1249,6 +1258,8 @@ function createOnZoom(treemap, evt) {
       const translateY = boundingClientRect.height / 2 - (my + mh / 2) * factor;
       runEffect((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;
@@ -1266,6 +1277,8 @@ function createOnZoom(treemap, evt) {
         duration: ANIMATION_DURATION,
         onStop: () => {
           evt.state.isZooming = false;
+          evt.active("mousemove");
+          evt.exposedEvent.active("mousemove");
         }
       });
     }

package/dist/index.mjs

@@ -756,6 +756,9 @@ 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);
@@ -1170,9 +1173,7 @@ class TreemapEvent extends DOMEvent {
   }
   onwheel(ctx, metadata) {
     ctx.treemap.renderCache.destroy();
-    this.silent("mousedown");
-    this.exposedEvent.silent("mousemove");
-    this.silent("mousemove");
+    ctx.treemap.event.silent(INTERNAL_EVENT_MAPPINGS.ON_ZOOM);
     const { native } = metadata;
     const { treemap } = ctx;
     const wheelDelta = native.wheelDelta;
@@ -1189,6 +1190,11 @@ class TreemapEvent extends DOMEvent {
     const translateX = offsetX - (offsetX - this.matrix.e) * delta;
     const translateY = offsetY - (offsetY - this.matrix.f) * delta;
     runEffect((progress, cleanup) => {
+      this.silent("mousedown");
+      this.exposedEvent.silent("mousemove");
+      this.silent("mousemove");
+      this.silent("click");
+      this.exposedEvent.silent("click");
       cleanup();
       treemap.highlight.reset();
       treemap.highlight.setZIndexForHighlight();
@@ -1214,6 +1220,9 @@ class TreemapEvent extends DOMEvent {
         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);
       }
     });
   }
@@ -1247,6 +1256,8 @@ function createOnZoom(treemap, evt) {
       const translateY = boundingClientRect.height / 2 - (my + mh / 2) * factor;
       runEffect((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;
@@ -1264,6 +1275,8 @@ function createOnZoom(treemap, evt) {
         duration: ANIMATION_DURATION,
         onStop: () => {
           evt.state.isZooming = false;
+          evt.active("mousemove");
+          evt.exposedEvent.active("mousemove");
         }
       });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squarified",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "squarified tree map",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",