squarified 0.2.0 → 0.2.2

package/README.md

@@ -14,6 +14,45 @@ $ yarn add squarified
 
 See the dev directory for a minimal example.
 
+### API
+
+```ts
+// convert data into expected data
+declare function c2m<
+  T extends AnyObject & {
+    groups: any[]
+  },
+  K extends keyof T
+>(data: T, key: K, modifier?: (data: T) => T): T & {
+  weight: number
+}
+
+// preset theme layout (unstable)
+declare function presetDecorator(app: TreemapLayout): void
+
+declare function getNodeDepth(node: NativeModule): number
+
+declare function visit<T extends AnyObject>(data: T[], fn: (data: T) => boolean | void): T | null
+
+declare function findRelativeNode(p: {
+  x: number
+  y: number
+}, layoutNodes: LayoutModule[]): LayoutModule | null
+
+declare function findRelativeNodeById(id: string, layoutNodes: LayoutModule[]): LayoutModule | null
+
+interface App {
+  init: (el: HTMLElement) => void
+  dispose: () => void
+  setOptions: (options: TreemapOptions) => void
+  resize: () => void
+  use: (using: Using, register: (app: TreemapLayout) => void) => void
+  zoom: (id: string) => void
+}
+
+declare function createTreemap(): App
+```
+
 ### Auth
 
 Kanno

package/dist/index.d.mts

@@ -93,7 +93,6 @@ declare class Render {
     get canvas(): HTMLCanvasElement;
     get ctx(): CanvasRenderingContext2D;
     initOptions(userOptions?: Partial<RenderViewportOptions>): void;
-    update(schedule: Schedule): void;
     destory(): void;
 }
 
@@ -113,6 +112,10 @@ declare class Layer extends C implements S {
     constructor(options?: Partial<LocOptions>);
     get __instanceOf__(): DisplayType.Layer;
     setCanvasOptions(options?: Partial<RenderViewportOptions>): void;
+    cleanCacheSnapshot(): {
+        dpr: number;
+        matrix: Matrix2D;
+    };
     setCacheSnapshot(c: HTMLCanvasElement): void;
     initLoc(options?: Partial<LocOptions>): void;
     draw(ctx: CanvasRenderingContext2D): void;
@@ -161,10 +164,10 @@ declare class Event<EvtDefinition extends DefaultEventDefinition = DefaultEventD
 }
 
 type ApplyTo = string | Element;
-declare class Schedule extends Box {
+declare class Schedule<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
     render: Render;
     to: Element;
-    event: Event;
+    event: Event<D>;
     constructor(to: ApplyTo, renderOptions?: Partial<RenderViewportOptions>);
     update(): void;
     execute(render: Render, graph?: Display): void;
@@ -244,7 +247,7 @@ type NativeModule = ReturnType<typeof bindParentForModule>[number] & {
 };
 declare function getNodeDepth(node: NativeModule): number;
 declare function visit<T extends AnyObject>(data: T[], fn: (data: T) => boolean | void): T | null;
-declare function findRelativeNode(c: HTMLCanvasElement, p: {
+declare function findRelativeNode(p: {
     x: number;
     y: number;
 }, layoutNodes: LayoutModule[]): LayoutModule | null;
@@ -276,20 +279,39 @@ interface EventMethods<C = TreemapInstanceAPI, D = PrimitiveEventDefinition> {
     on<Evt extends keyof D>(evt: Evt, handler: BindThisParameter<D[Evt], unknown extends C ? this : C>): void;
     off<Evt extends keyof D>(evt: keyof D, handler?: BindThisParameter<D[Evt], unknown extends C ? this : C>): void;
 }
+declare const internalEventMappings: {
+    readonly CLEAN_UP: "self:cleanup";
+    readonly ON_LOAD: "self:onload";
+    readonly ON_ZOOM: "zoom";
+};
+type InternalEventType = typeof internalEventMappings[keyof typeof internalEventMappings];
+interface InternalEventMappings {
+    [internalEventMappings.CLEAN_UP]: () => void;
+    [internalEventMappings.ON_LOAD]: (width: number, height: number, root: HTMLElement) => void;
+    [internalEventMappings.ON_ZOOM]: (node: LayoutModule) => void;
+}
+type InternalEventDefinition = {
+    [key in InternalEventType]: InternalEventMappings[key];
+};
 
 interface TreemapOptions {
     data: Module[];
 }
 type Using = 'decorator';
 interface App {
-    init: (el: Element) => void;
+    init: (el: HTMLElement) => void;
     dispose: () => void;
     setOptions: (options: TreemapOptions) => void;
     resize: () => void;
     use: (using: Using, register: (app: TreemapLayout) => void) => void;
     zoom: (id: string) => void;
 }
-declare class TreemapLayout extends etoile.Schedule {
+/**
+ * This interface isn't stable it might be remove at next few versions.
+ * If you want set custom decorator pls see 'presetDecorator' for details.
+ */
+type unstable_use = (app: TreemapLayout) => void;
+declare class TreemapLayout extends etoile.Schedule<InternalEventDefinition> {
     data: NativeModule[];
     layoutNodes: LayoutModule[];
     decorator: RenderDecorator;
@@ -309,4 +331,4 @@ declare class TreemapLayout extends etoile.Schedule {
 declare function createTreemap(): App & EventMethods;
 type TreemapInstanceAPI = TreemapLayout['api'];
 
-export { type App, type ColorMappings, type EventMethods, type LayoutModule, type Module, type NativeModule, type PrimitiveEvent, type PrimitiveEventCallback, type PrimitiveEventDefinition, type PrimitiveEventMetadata, type Rect, type RenderColor, type RenderDecorator, type RenderFont, type RenderLayout, type Series, type TreemapInstanceAPI, TreemapLayout, type TreemapOptions, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, visit };
+export { type App, type ColorMappings, type EventMethods, type LayoutModule, type Module, type NativeModule, type PrimitiveEvent, type PrimitiveEventCallback, type PrimitiveEventDefinition, type PrimitiveEventMetadata, type Rect, type RenderColor, type RenderDecorator, type RenderFont, type RenderLayout, type Series, type TreemapInstanceAPI, TreemapLayout, type TreemapOptions, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, type unstable_use, visit };

package/dist/index.d.ts

@@ -93,7 +93,6 @@ declare class Render {
     get canvas(): HTMLCanvasElement;
     get ctx(): CanvasRenderingContext2D;
     initOptions(userOptions?: Partial<RenderViewportOptions>): void;
-    update(schedule: Schedule): void;
     destory(): void;
 }
 
@@ -113,6 +112,10 @@ declare class Layer extends C implements S {
     constructor(options?: Partial<LocOptions>);
     get __instanceOf__(): DisplayType.Layer;
     setCanvasOptions(options?: Partial<RenderViewportOptions>): void;
+    cleanCacheSnapshot(): {
+        dpr: number;
+        matrix: Matrix2D;
+    };
     setCacheSnapshot(c: HTMLCanvasElement): void;
     initLoc(options?: Partial<LocOptions>): void;
     draw(ctx: CanvasRenderingContext2D): void;
@@ -161,10 +164,10 @@ declare class Event<EvtDefinition extends DefaultEventDefinition = DefaultEventD
 }
 
 type ApplyTo = string | Element;
-declare class Schedule extends Box {
+declare class Schedule<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
     render: Render;
     to: Element;
-    event: Event;
+    event: Event<D>;
     constructor(to: ApplyTo, renderOptions?: Partial<RenderViewportOptions>);
     update(): void;
     execute(render: Render, graph?: Display): void;
@@ -244,7 +247,7 @@ type NativeModule = ReturnType<typeof bindParentForModule>[number] & {
 };
 declare function getNodeDepth(node: NativeModule): number;
 declare function visit<T extends AnyObject>(data: T[], fn: (data: T) => boolean | void): T | null;
-declare function findRelativeNode(c: HTMLCanvasElement, p: {
+declare function findRelativeNode(p: {
     x: number;
     y: number;
 }, layoutNodes: LayoutModule[]): LayoutModule | null;
@@ -276,20 +279,39 @@ interface EventMethods<C = TreemapInstanceAPI, D = PrimitiveEventDefinition> {
     on<Evt extends keyof D>(evt: Evt, handler: BindThisParameter<D[Evt], unknown extends C ? this : C>): void;
     off<Evt extends keyof D>(evt: keyof D, handler?: BindThisParameter<D[Evt], unknown extends C ? this : C>): void;
 }
+declare const internalEventMappings: {
+    readonly CLEAN_UP: "self:cleanup";
+    readonly ON_LOAD: "self:onload";
+    readonly ON_ZOOM: "zoom";
+};
+type InternalEventType = typeof internalEventMappings[keyof typeof internalEventMappings];
+interface InternalEventMappings {
+    [internalEventMappings.CLEAN_UP]: () => void;
+    [internalEventMappings.ON_LOAD]: (width: number, height: number, root: HTMLElement) => void;
+    [internalEventMappings.ON_ZOOM]: (node: LayoutModule) => void;
+}
+type InternalEventDefinition = {
+    [key in InternalEventType]: InternalEventMappings[key];
+};
 
 interface TreemapOptions {
     data: Module[];
 }
 type Using = 'decorator';
 interface App {
-    init: (el: Element) => void;
+    init: (el: HTMLElement) => void;
     dispose: () => void;
     setOptions: (options: TreemapOptions) => void;
     resize: () => void;
     use: (using: Using, register: (app: TreemapLayout) => void) => void;
     zoom: (id: string) => void;
 }
-declare class TreemapLayout extends etoile.Schedule {
+/**
+ * This interface isn't stable it might be remove at next few versions.
+ * If you want set custom decorator pls see 'presetDecorator' for details.
+ */
+type unstable_use = (app: TreemapLayout) => void;
+declare class TreemapLayout extends etoile.Schedule<InternalEventDefinition> {
     data: NativeModule[];
     layoutNodes: LayoutModule[];
     decorator: RenderDecorator;
@@ -309,4 +331,4 @@ declare class TreemapLayout extends etoile.Schedule {
 declare function createTreemap(): App & EventMethods;
 type TreemapInstanceAPI = TreemapLayout['api'];
 
-export { type App, type ColorMappings, type EventMethods, type LayoutModule, type Module, type NativeModule, type PrimitiveEvent, type PrimitiveEventCallback, type PrimitiveEventDefinition, type PrimitiveEventMetadata, type Rect, type RenderColor, type RenderDecorator, type RenderFont, type RenderLayout, type Series, type TreemapInstanceAPI, TreemapLayout, type TreemapOptions, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, visit };
+export { type App, type ColorMappings, type EventMethods, type LayoutModule, type Module, type NativeModule, type PrimitiveEvent, type PrimitiveEventCallback, type PrimitiveEventDefinition, type PrimitiveEventMetadata, type Rect, type RenderColor, type RenderDecorator, type RenderFont, type RenderLayout, type Series, type TreemapInstanceAPI, TreemapLayout, type TreemapOptions, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, type unstable_use, visit };

package/dist/index.js

@@ -103,42 +103,44 @@ class Display {
   }
 }
 const ASSIGN_MAPPINGS = {
-  fillStyle: true,
-  strokeStyle: true,
-  font: true,
-  lineWidth: true,
-  textAlign: true,
-  textBaseline: true
+  fillStyle: 1,
+  strokeStyle: 2,
+  font: 4,
+  lineWidth: 8,
+  textAlign: 16,
+  textBaseline: 32
 };
+const ASSIGN_MAPPINGS_MODE = ASSIGN_MAPPINGS.fillStyle | ASSIGN_MAPPINGS.strokeStyle | ASSIGN_MAPPINGS.font | ASSIGN_MAPPINGS.lineWidth | ASSIGN_MAPPINGS.textAlign | ASSIGN_MAPPINGS.textBaseline;
+const CALL_MAPPINGS_MODE = 0;
 function createInstruction() {
   return {
     mods: [],
     fillStyle(...args) {
-      this.mods.push(["fillStyle", args]);
+      this.mods.push({ mod: ["fillStyle", args], type: ASSIGN_MAPPINGS.fillStyle });
     },
     fillRect(...args) {
-      this.mods.push(["fillRect", args]);
+      this.mods.push({ mod: ["fillRect", args], type: CALL_MAPPINGS_MODE });
     },
     strokeStyle(...args) {
-      this.mods.push(["strokeStyle", args]);
+      this.mods.push({ mod: ["strokeStyle", args], type: ASSIGN_MAPPINGS.strokeStyle });
     },
     lineWidth(...args) {
-      this.mods.push(["lineWidth", args]);
+      this.mods.push({ mod: ["lineWidth", args], type: ASSIGN_MAPPINGS.lineWidth });
     },
     strokeRect(...args) {
-      this.mods.push(["strokeRect", args]);
+      this.mods.push({ mod: ["strokeRect", args], type: CALL_MAPPINGS_MODE });
     },
     fillText(...args) {
-      this.mods.push(["fillText", args]);
+      this.mods.push({ mod: ["fillText", args], type: CALL_MAPPINGS_MODE });
     },
     font(...args) {
-      this.mods.push(["font", args]);
+      this.mods.push({ mod: ["font", args], type: ASSIGN_MAPPINGS.font });
     },
     textBaseline(...args) {
-      this.mods.push(["textBaseline", args]);
+      this.mods.push({ mod: ["textBaseline", args], type: ASSIGN_MAPPINGS.textBaseline });
     },
     textAlign(...args) {
-      this.mods.push(["textAlign", args]);
+      this.mods.push({ mod: ["textAlign", args], type: ASSIGN_MAPPINGS.textAlign });
     }
   };
 }
@@ -177,9 +179,9 @@ class Graph extends S {
     this.create();
     const cap = this.instruction.mods.length;
     for (let i = 0; i < cap; i++) {
-      const mod = this.instruction.mods[i];
+      const { mod, type } = this.instruction.mods[i];
       const [direct, ...args] = mod;
-      if (direct in ASSIGN_MAPPINGS) {
+      if (type & ASSIGN_MAPPINGS_MODE) {
         ctx[direct] = args[0];
         continue;
       }
@@ -216,7 +218,7 @@ const asserts = {
 
 var __defProp$8 = Object.defineProperty;
 var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
+var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
 class C extends Display {
   constructor() {
     super();
@@ -286,25 +288,24 @@ class Box extends C {
   clone() {
     const box = new Box();
     if (this.elements.length) {
-      const traverse = (elements, parent) => {
-        const els = [];
+      const stack = [{ elements: this.elements, parent: box }];
+      while (stack.length > 0) {
+        const { elements, parent } = stack.pop();
         const cap = elements.length;
         for (let i = 0; i < cap; i++) {
           const element = elements[i];
           if (asserts.isBox(element)) {
-            const box2 = new Box();
-            box2.parent = parent;
-            box2.add(...traverse(element.elements, box2));
-            els.push(box2);
+            const newBox = new Box();
+            newBox.parent = parent;
+            parent.add(newBox);
+            stack.push({ elements: element.elements, parent: newBox });
           } else if (asserts.isGraph(element)) {
             const el = element.clone();
             el.parent = parent;
-            els.push(el);
+            parent.add(el);
           }
         }
-        return els;
-      };
-      box.add(...traverse(this.elements, box));
+      }
     }
     return box;
   }
@@ -352,10 +353,6 @@ class Render {
     Object.assign(this.options, userOptions);
     writeBoundingRectForCanvas(this.canvas, this.options.width, this.options.height, this.options.devicePixelRatio);
   }
-  update(schedule) {
-    this.clear(this.options.width, this.options.height);
-    schedule.execute(this);
-  }
   destory() {
   }
 }
@@ -398,10 +395,14 @@ class Layer extends C {
     Object.assign(this.options, options);
     writeBoundingRectForCanvas(this.c.c.canvas, options.width || 0, options.height || 0, options.devicePixelRatio || 1);
   }
-  setCacheSnapshot(c) {
+  cleanCacheSnapshot() {
     const dpr = this.options.devicePixelRatio || 1;
     const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
     this.ctx.clearRect(0, 0, this.options.width, this.options.height);
+    return { dpr, matrix };
+  }
+  setCacheSnapshot(c) {
+    const { matrix, dpr } = this.cleanCacheSnapshot();
     matrix.transform(this.x, this.y, this.scaleX, this.scaleY, this.rotation, this.skewX, this.skewY);
     applyCanvasTransform(this.ctx, matrix, dpr);
     this.ctx.drawImage(c, 0, 0, this.options.width / dpr, this.options.height / dpr);
@@ -457,7 +458,7 @@ const runtime = {
 
 var __defProp$5 = Object.defineProperty;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
+var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Rect extends Graph {
   constructor(options = {}) {
     super(options);
@@ -515,7 +516,7 @@ class Text extends Graph {
 
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Event {
   constructor() {
     __publicField$3(this, "eventCollections");
@@ -605,7 +606,8 @@ class Schedule extends Box {
     this.render = new Render(this.to, renderOptions);
   }
   update() {
-    this.render.update(this);
+    this.render.clear(this.render.options.width, this.render.options.height);
+    this.execute(this.render, this);
     const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
     applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio);
   }
@@ -773,7 +775,7 @@ function visit(data, fn) {
   }
   return null;
 }
-function findRelativeNode(c, p, layoutNodes) {
+function findRelativeNode(p, layoutNodes) {
   return visit(layoutNodes, (node) => {
     const [x, y, w, h] = node.layout;
     if (p.x >= x && p.y >= y && p.x < x + w && p.y < y + h) {
@@ -910,6 +912,11 @@ var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
 const primitiveEvents = ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout"];
+const internalEventMappings = {
+  CLEAN_UP: "self:cleanup",
+  ON_LOAD: "self:onload",
+  ON_ZOOM: "zoom"
+};
 const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
 function smoothDrawing(c) {
   const { self } = c;
@@ -943,7 +950,7 @@ function smoothDrawing(c) {
   }
 }
 function applyZoomEvent(ctx) {
-  ctx.treemap.event.on("zoom", (node) => {
+  ctx.treemap.event.on(internalEventMappings.ON_ZOOM, (node) => {
     const root = null;
     if (ctx.self.isDragging) return;
     onZoom(ctx, node, root);
@@ -991,7 +998,7 @@ function bindPrimitiveEvent(c, ctx, evt, bus) {
     );
     const event = {
       native: e,
-      module: findRelativeNode(c, { x, y }, treemap.layoutNodes)
+      module: findRelativeNode({ x, y }, treemap.layoutNodes)
     };
     bus.emit(evt, event);
   };
@@ -1050,7 +1057,7 @@ class SelfEvent extends RegisterModule {
     this.self.highlight.reset();
     this.self.highlight.setDisplayLayerForHighlight();
     this.self.event.off("mousemove", this.self.onmousemove);
-    this.treemap.event.off("zoom");
+    this.treemap.event.off(internalEventMappings.ON_ZOOM);
     this.self.forceDestroy = true;
     const { native } = metadata;
     const x = native.offsetX;
@@ -1065,7 +1072,6 @@ class SelfEvent extends RegisterModule {
       refreshBackgroundLayer(this);
     }
     this.treemap.reset();
-    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
     stackMatrixTransformWithGraphAndLayer(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
     this.treemap.update();
   }
@@ -1110,7 +1116,6 @@ class SelfEvent extends RegisterModule {
     treemap.reset();
     this.self.highlight.reset();
     this.self.highlight.setDisplayLayerForHighlight();
-    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
     const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
     const delta = wheelDelta > 0 ? factor : 1 / factor;
     self.scaleRatio *= delta;
@@ -1151,7 +1156,7 @@ class SelfEvent extends RegisterModule {
     selfEvt("wheel", this.onwheel);
     applyZoomEvent({ treemap, self: this });
     let installHightlightEvent = false;
-    treemap.event.on("onload:selfevent", ({ width, height, root }) => {
+    treemap.event.on(internalEventMappings.ON_LOAD, (width, height, root) => {
       this.highlight.init(width, height, root);
       if (!installHightlightEvent) {
         bindPrimitiveEvent(this.highlight.highlight.render.canvas, { treemap, self: this }, "mousemove", event);
@@ -1163,7 +1168,7 @@ class SelfEvent extends RegisterModule {
       }
       this.highlight.reset();
     });
-    treemap.event.on("cleanup:selfevent", () => {
+    treemap.event.on(internalEventMappings.CLEAN_UP, () => {
       this.currentNode = null;
       this.scaleRatio = 1;
       this.translateX = 0;
@@ -1216,6 +1221,10 @@ function onZoom(ctx, node, root) {
   const c = treemap.render.canvas;
   const boundingClientRect = c.getBoundingClientRect();
   const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
+  if (self.layoutHeight !== w || self.layoutHeight !== h) {
+    delete treemap.fontsCaches[node.node.id];
+    delete treemap.ellispsisWidthCache[node.node.id];
+  }
   resetLayout(treemap, w, h);
   const module = findRelativeNodeById(node.node.id, treemap.layoutNodes);
   if (module) {
@@ -1228,10 +1237,6 @@ function onZoom(ctx, node, root) {
     const initialTranslateY = self.translateY;
     const startTime = Date.now();
     const animationDuration = 300;
-    if (self.layoutHeight !== w || self.layoutHeight !== h) {
-      delete treemap.fontsCaches[module.node.id];
-      delete treemap.ellispsisWidthCache[module.node.id];
-    }
     const { run, stop } = createEffectScope();
     run(() => {
       const elapsed = Date.now() - startTime;
@@ -1290,9 +1295,24 @@ function createHighlight() {
   };
 }
 function refreshBackgroundLayer(c) {
-  const { treemap } = c;
-  const { backgroundLayer } = treemap;
+  const { treemap, self } = c;
+  const { backgroundLayer, render } = treemap;
+  const { canvas, ctx, options: { width: ow, height: oh } } = render;
+  const { layoutWidth: sw, layoutHeight: sh, scaleRatio: ss } = self;
+  const capture = sw * ss >= ow && sh * ss >= oh;
   backgroundLayer.__refresh__ = false;
+  if (!capture && !self.forceDestroy) {
+    resetLayout(treemap, sw * ss, sh * ss);
+    render.clear(ow, oh);
+    const { dpr } = backgroundLayer.cleanCacheSnapshot();
+    drawGraphIntoCanvas(backgroundLayer, { c: canvas, ctx, dpr }, (opts, graph) => {
+      if (asserts.isLayer(graph) && !graph.__refresh__) {
+        graph.setCacheSnapshot(opts.c);
+      }
+    });
+    self.triggerZoom = false;
+    return true;
+  }
 }
 
 var __defProp = Object.defineProperty;
@@ -1419,6 +1439,8 @@ class TreemapLayout extends etoile.Schedule {
       for (const node of this.layoutNodes) {
         this.drawBackgroundNode(node);
       }
+    } else {
+      this.bgLayer.initLoc();
     }
     if (!this.fgBox.elements.length || refresh) {
       this.render.ctx.textBaseline = "middle";
@@ -1434,7 +1456,7 @@ class TreemapLayout extends etoile.Schedule {
   get api() {
     return {
       zoom: (node) => {
-        this.event.emit("zoom", node);
+        this.event.emit(internalEventMappings.ON_ZOOM, node);
       }
     };
   }
@@ -1484,8 +1506,8 @@ function createTreemap() {
     treemap.backgroundLayer.initLoc();
     treemap.backgroundLayer.matrix = treemap.backgroundLayer.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
     treemap.fontsCaches = /* @__PURE__ */ Object.create(null);
-    treemap.event.emit("cleanup:selfevent");
-    treemap.event.emit("onload:selfevent", { width, height, root });
+    treemap.event.emit(internalEventMappings.CLEAN_UP);
+    treemap.event.emit(internalEventMappings.ON_LOAD, width, height, root);
     resetLayout(treemap, width, height);
     treemap.update();
   }

package/dist/index.mjs

@@ -101,42 +101,44 @@ class Display {
   }
 }
 const ASSIGN_MAPPINGS = {
-  fillStyle: true,
-  strokeStyle: true,
-  font: true,
-  lineWidth: true,
-  textAlign: true,
-  textBaseline: true
+  fillStyle: 1,
+  strokeStyle: 2,
+  font: 4,
+  lineWidth: 8,
+  textAlign: 16,
+  textBaseline: 32
 };
+const ASSIGN_MAPPINGS_MODE = ASSIGN_MAPPINGS.fillStyle | ASSIGN_MAPPINGS.strokeStyle | ASSIGN_MAPPINGS.font | ASSIGN_MAPPINGS.lineWidth | ASSIGN_MAPPINGS.textAlign | ASSIGN_MAPPINGS.textBaseline;
+const CALL_MAPPINGS_MODE = 0;
 function createInstruction() {
   return {
     mods: [],
     fillStyle(...args) {
-      this.mods.push(["fillStyle", args]);
+      this.mods.push({ mod: ["fillStyle", args], type: ASSIGN_MAPPINGS.fillStyle });
     },
     fillRect(...args) {
-      this.mods.push(["fillRect", args]);
+      this.mods.push({ mod: ["fillRect", args], type: CALL_MAPPINGS_MODE });
     },
     strokeStyle(...args) {
-      this.mods.push(["strokeStyle", args]);
+      this.mods.push({ mod: ["strokeStyle", args], type: ASSIGN_MAPPINGS.strokeStyle });
     },
     lineWidth(...args) {
-      this.mods.push(["lineWidth", args]);
+      this.mods.push({ mod: ["lineWidth", args], type: ASSIGN_MAPPINGS.lineWidth });
     },
     strokeRect(...args) {
-      this.mods.push(["strokeRect", args]);
+      this.mods.push({ mod: ["strokeRect", args], type: CALL_MAPPINGS_MODE });
     },
     fillText(...args) {
-      this.mods.push(["fillText", args]);
+      this.mods.push({ mod: ["fillText", args], type: CALL_MAPPINGS_MODE });
     },
     font(...args) {
-      this.mods.push(["font", args]);
+      this.mods.push({ mod: ["font", args], type: ASSIGN_MAPPINGS.font });
     },
     textBaseline(...args) {
-      this.mods.push(["textBaseline", args]);
+      this.mods.push({ mod: ["textBaseline", args], type: ASSIGN_MAPPINGS.textBaseline });
     },
     textAlign(...args) {
-      this.mods.push(["textAlign", args]);
+      this.mods.push({ mod: ["textAlign", args], type: ASSIGN_MAPPINGS.textAlign });
     }
   };
 }
@@ -175,9 +177,9 @@ class Graph extends S {
     this.create();
     const cap = this.instruction.mods.length;
     for (let i = 0; i < cap; i++) {
-      const mod = this.instruction.mods[i];
+      const { mod, type } = this.instruction.mods[i];
       const [direct, ...args] = mod;
-      if (direct in ASSIGN_MAPPINGS) {
+      if (type & ASSIGN_MAPPINGS_MODE) {
         ctx[direct] = args[0];
         continue;
       }
@@ -214,7 +216,7 @@ const asserts = {
 
 var __defProp$8 = Object.defineProperty;
 var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, key + "" , value);
+var __publicField$8 = (obj, key, value) => __defNormalProp$8(obj, typeof key !== "symbol" ? key + "" : key, value);
 class C extends Display {
   constructor() {
     super();
@@ -284,25 +286,24 @@ class Box extends C {
   clone() {
     const box = new Box();
     if (this.elements.length) {
-      const traverse = (elements, parent) => {
-        const els = [];
+      const stack = [{ elements: this.elements, parent: box }];
+      while (stack.length > 0) {
+        const { elements, parent } = stack.pop();
         const cap = elements.length;
         for (let i = 0; i < cap; i++) {
           const element = elements[i];
           if (asserts.isBox(element)) {
-            const box2 = new Box();
-            box2.parent = parent;
-            box2.add(...traverse(element.elements, box2));
-            els.push(box2);
+            const newBox = new Box();
+            newBox.parent = parent;
+            parent.add(newBox);
+            stack.push({ elements: element.elements, parent: newBox });
           } else if (asserts.isGraph(element)) {
             const el = element.clone();
             el.parent = parent;
-            els.push(el);
+            parent.add(el);
           }
         }
-        return els;
-      };
-      box.add(...traverse(this.elements, box));
+      }
     }
     return box;
   }
@@ -350,10 +351,6 @@ class Render {
     Object.assign(this.options, userOptions);
     writeBoundingRectForCanvas(this.canvas, this.options.width, this.options.height, this.options.devicePixelRatio);
   }
-  update(schedule) {
-    this.clear(this.options.width, this.options.height);
-    schedule.execute(this);
-  }
   destory() {
   }
 }
@@ -396,10 +393,14 @@ class Layer extends C {
     Object.assign(this.options, options);
     writeBoundingRectForCanvas(this.c.c.canvas, options.width || 0, options.height || 0, options.devicePixelRatio || 1);
   }
-  setCacheSnapshot(c) {
+  cleanCacheSnapshot() {
     const dpr = this.options.devicePixelRatio || 1;
     const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
     this.ctx.clearRect(0, 0, this.options.width, this.options.height);
+    return { dpr, matrix };
+  }
+  setCacheSnapshot(c) {
+    const { matrix, dpr } = this.cleanCacheSnapshot();
     matrix.transform(this.x, this.y, this.scaleX, this.scaleY, this.rotation, this.skewX, this.skewY);
     applyCanvasTransform(this.ctx, matrix, dpr);
     this.ctx.drawImage(c, 0, 0, this.options.width / dpr, this.options.height / dpr);
@@ -455,7 +456,7 @@ const runtime = {
 
 var __defProp$5 = Object.defineProperty;
 var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, key + "" , value);
+var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Rect extends Graph {
   constructor(options = {}) {
     super(options);
@@ -513,7 +514,7 @@ class Text extends Graph {
 
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, key + "" , value);
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 class Event {
   constructor() {
     __publicField$3(this, "eventCollections");
@@ -603,7 +604,8 @@ class Schedule extends Box {
     this.render = new Render(this.to, renderOptions);
   }
   update() {
-    this.render.update(this);
+    this.render.clear(this.render.options.width, this.render.options.height);
+    this.execute(this.render, this);
     const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
     applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio);
   }
@@ -771,7 +773,7 @@ function visit(data, fn) {
   }
   return null;
 }
-function findRelativeNode(c, p, layoutNodes) {
+function findRelativeNode(p, layoutNodes) {
   return visit(layoutNodes, (node) => {
     const [x, y, w, h] = node.layout;
     if (p.x >= x && p.y >= y && p.x < x + w && p.y < y + h) {
@@ -908,6 +910,11 @@ var __defProp$1 = Object.defineProperty;
 var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
 const primitiveEvents = ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout"];
+const internalEventMappings = {
+  CLEAN_UP: "self:cleanup",
+  ON_LOAD: "self:onload",
+  ON_ZOOM: "zoom"
+};
 const fill = { desc: { r: 255, g: 255, b: 255 }, mode: "rgb" };
 function smoothDrawing(c) {
   const { self } = c;
@@ -941,7 +948,7 @@ function smoothDrawing(c) {
   }
 }
 function applyZoomEvent(ctx) {
-  ctx.treemap.event.on("zoom", (node) => {
+  ctx.treemap.event.on(internalEventMappings.ON_ZOOM, (node) => {
     const root = null;
     if (ctx.self.isDragging) return;
     onZoom(ctx, node, root);
@@ -989,7 +996,7 @@ function bindPrimitiveEvent(c, ctx, evt, bus) {
     );
     const event = {
       native: e,
-      module: findRelativeNode(c, { x, y }, treemap.layoutNodes)
+      module: findRelativeNode({ x, y }, treemap.layoutNodes)
     };
     bus.emit(evt, event);
   };
@@ -1048,7 +1055,7 @@ class SelfEvent extends RegisterModule {
     this.self.highlight.reset();
     this.self.highlight.setDisplayLayerForHighlight();
     this.self.event.off("mousemove", this.self.onmousemove);
-    this.treemap.event.off("zoom");
+    this.treemap.event.off(internalEventMappings.ON_ZOOM);
     this.self.forceDestroy = true;
     const { native } = metadata;
     const x = native.offsetX;
@@ -1063,7 +1070,6 @@ class SelfEvent extends RegisterModule {
       refreshBackgroundLayer(this);
     }
     this.treemap.reset();
-    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
     stackMatrixTransformWithGraphAndLayer(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
     this.treemap.update();
   }
@@ -1108,7 +1114,6 @@ class SelfEvent extends RegisterModule {
     treemap.reset();
     this.self.highlight.reset();
     this.self.highlight.setDisplayLayerForHighlight();
-    stackMatrixTransform(this.treemap.backgroundLayer, 0, 0, 0);
     const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
     const delta = wheelDelta > 0 ? factor : 1 / factor;
     self.scaleRatio *= delta;
@@ -1149,7 +1154,7 @@ class SelfEvent extends RegisterModule {
     selfEvt("wheel", this.onwheel);
     applyZoomEvent({ treemap, self: this });
     let installHightlightEvent = false;
-    treemap.event.on("onload:selfevent", ({ width, height, root }) => {
+    treemap.event.on(internalEventMappings.ON_LOAD, (width, height, root) => {
       this.highlight.init(width, height, root);
       if (!installHightlightEvent) {
         bindPrimitiveEvent(this.highlight.highlight.render.canvas, { treemap, self: this }, "mousemove", event);
@@ -1161,7 +1166,7 @@ class SelfEvent extends RegisterModule {
       }
       this.highlight.reset();
     });
-    treemap.event.on("cleanup:selfevent", () => {
+    treemap.event.on(internalEventMappings.CLEAN_UP, () => {
       this.currentNode = null;
       this.scaleRatio = 1;
       this.translateX = 0;
@@ -1214,6 +1219,10 @@ function onZoom(ctx, node, root) {
   const c = treemap.render.canvas;
   const boundingClientRect = c.getBoundingClientRect();
   const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
+  if (self.layoutHeight !== w || self.layoutHeight !== h) {
+    delete treemap.fontsCaches[node.node.id];
+    delete treemap.ellispsisWidthCache[node.node.id];
+  }
   resetLayout(treemap, w, h);
   const module = findRelativeNodeById(node.node.id, treemap.layoutNodes);
   if (module) {
@@ -1226,10 +1235,6 @@ function onZoom(ctx, node, root) {
     const initialTranslateY = self.translateY;
     const startTime = Date.now();
     const animationDuration = 300;
-    if (self.layoutHeight !== w || self.layoutHeight !== h) {
-      delete treemap.fontsCaches[module.node.id];
-      delete treemap.ellispsisWidthCache[module.node.id];
-    }
     const { run, stop } = createEffectScope();
     run(() => {
       const elapsed = Date.now() - startTime;
@@ -1288,9 +1293,24 @@ function createHighlight() {
   };
 }
 function refreshBackgroundLayer(c) {
-  const { treemap } = c;
-  const { backgroundLayer } = treemap;
+  const { treemap, self } = c;
+  const { backgroundLayer, render } = treemap;
+  const { canvas, ctx, options: { width: ow, height: oh } } = render;
+  const { layoutWidth: sw, layoutHeight: sh, scaleRatio: ss } = self;
+  const capture = sw * ss >= ow && sh * ss >= oh;
   backgroundLayer.__refresh__ = false;
+  if (!capture && !self.forceDestroy) {
+    resetLayout(treemap, sw * ss, sh * ss);
+    render.clear(ow, oh);
+    const { dpr } = backgroundLayer.cleanCacheSnapshot();
+    drawGraphIntoCanvas(backgroundLayer, { c: canvas, ctx, dpr }, (opts, graph) => {
+      if (asserts.isLayer(graph) && !graph.__refresh__) {
+        graph.setCacheSnapshot(opts.c);
+      }
+    });
+    self.triggerZoom = false;
+    return true;
+  }
 }
 
 var __defProp = Object.defineProperty;
@@ -1417,6 +1437,8 @@ class TreemapLayout extends etoile.Schedule {
       for (const node of this.layoutNodes) {
         this.drawBackgroundNode(node);
       }
+    } else {
+      this.bgLayer.initLoc();
     }
     if (!this.fgBox.elements.length || refresh) {
       this.render.ctx.textBaseline = "middle";
@@ -1432,7 +1454,7 @@ class TreemapLayout extends etoile.Schedule {
   get api() {
     return {
       zoom: (node) => {
-        this.event.emit("zoom", node);
+        this.event.emit(internalEventMappings.ON_ZOOM, node);
       }
     };
   }
@@ -1482,8 +1504,8 @@ function createTreemap() {
     treemap.backgroundLayer.initLoc();
     treemap.backgroundLayer.matrix = treemap.backgroundLayer.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 });
     treemap.fontsCaches = /* @__PURE__ */ Object.create(null);
-    treemap.event.emit("cleanup:selfevent");
-    treemap.event.emit("onload:selfevent", { width, height, root });
+    treemap.event.emit(internalEventMappings.CLEAN_UP);
+    treemap.event.emit(internalEventMappings.ON_LOAD, width, height, root);
     resetLayout(treemap, width, height);
     treemap.update();
   }

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "squarified",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "squarified tree map",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "source": "./src/index.ts",
+      "squarified/__source__": "./src/index.ts",
       "import": "./dist/index.mjs",
       "default": "./dist/index.js"
     }
@@ -16,11 +16,6 @@
     "squarified",
     "tree-map"
   ],
-  "files": [
-    "dist",
-    "LICENSE",
-    "README.md"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nonzzz/squarified.git"
@@ -33,7 +28,18 @@
     "esbuild": "^0.24.0",
     "eslint": "8",
     "eslint-config-kagura": "^2.2.1",
-    "jiek": "^1.1.3",
+    "jiek": "^2.1.11",
     "typescript": "^5.6.2"
+  },
+  "typesVersions": {
+    "<5.0": {
+      "*": [
+        "*",
+        "./*",
+        "./*/index.d.ts",
+        "./*/index.d.mts",
+        "./*/index.d.cts"
+      ]
+    }
   }
 }