squarified 0.4.1 → 0.4.3

package/README.md

@@ -2,8 +2,6 @@
 
 `squarified` is a minimal and powerful treemap component.
 
-https://github.com/user-attachments/assets/caf30d9d-0a5a-446a-b767-7927bf4387c9
-
 ## Install
 
 ```shell
@@ -18,6 +16,10 @@ nonzzz.github.io/squarified/
 
 Kanno
 
+### Credits
+
+Algorithm is ported from [esbuild Bundle Size Analyzer](https://esbuild.github.io/analyze/) by [Evan Wallace](https://github.com/evanw). Refactor algorithm to adjusted the layout.
+
 ### LICENSE
 
 [MIT](./LICENSE)

package/dist/{index-DcZTC3Az.d.ts → index-BoUEaWVv.d.ts}

@@ -1,3 +1,10 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Any = any
+
+type AnyObject = Record<keyof Any, Any>
+
+type NonNull = NonNullable<unknown>
+
 interface MatrixLoc {
     a: number;
     b: number;
@@ -507,6 +514,7 @@ declare function createTreemap<const P extends readonly Plugin[]>(options?: Crea
 } & {
     off: () => (evt: string, handler?: ((this: unknown, ...args: any[]) => any) | undefined) => void;
 } & Record<string, never>) & BasicTreemapInstance & ExposedEventMethods & PluginMixins<P>;
+type TreemapInstance<P extends readonly Plugin[]> = BasicTreemapInstance & ExposedEventMethods & PluginMixins<P>;
 
-export { isScrollWheelOrRightButtonOnMouseupAndDown as $, noop as A, createRoundBlock as F, createTitleText as H, raf as I, createCanvasElement as J, applyCanvasTransform as K, mixin as Q, mixinWithParams as U, prettyStrJoin as V, isMacOS as W, typedForIn as X, stackMatrixTransform as Y, stackMatrixTransformWithGraphAndLayer as Z, smoothFrame as _, DefaultMap as a0, DOMEvent as b, createTreemap as d, c2m as e, findRelativeNode as f, findRelativeNodeById as g, flatten as h, getNodeDepth as i, definePlugin as l, isClickEvent as p, isContextMenuEvent as q, isMouseEvent as r, sortChildrenByKey as s, isWheelEvent as t, visit as v, hashCode as y, perferNumeric as z };
-export type { BasicTreemapInstance as B, ColorMappings as C, DOMEventType as D, ExposedEventCallback as E, GraphicLayout as G, LayoutModule as L, Module as M, NativeModule as N, InheritedCollections as O, PluginContext as P, InheritedCollectionsWithParamter as R, Series as S, TreemapOptions as T, DOMEventMetadata as a, CreateTreemapOptions as c, Plugin as j, PluginHooks as k, ExposedEventDefinition as m, ExposedEventMethods as n, PrimitiveEventMetadata as o, GraphicFont as u, GraphicConfig as w, TreemapInstanceAPI as x };
+export { smoothFrame as $, perferNumeric as A, noop as F, createRoundBlock as H, createTitleText as I, raf as J, createCanvasElement as K, applyCanvasTransform as O, mixin as R, mixinWithParams as V, prettyStrJoin as W, isMacOS as X, typedForIn as Y, stackMatrixTransform as Z, stackMatrixTransformWithGraphAndLayer as _, isScrollWheelOrRightButtonOnMouseupAndDown as a0, DefaultMap as a1, DOMEvent as b, createTreemap as d, c2m as f, findRelativeNode as g, findRelativeNodeById as h, flatten as i, getNodeDepth as j, definePlugin as m, isClickEvent as q, isContextMenuEvent as r, sortChildrenByKey as s, isMouseEvent as t, isWheelEvent as u, visit as v, hashCode as z };
+export type { BasicTreemapInstance as B, ColorMappings as C, DOMEventType as D, ExposedEventCallback as E, GraphicLayout as G, LayoutModule as L, Module as M, NativeModule as N, PluginContext as P, InheritedCollections as Q, Series as S, TreemapOptions as T, InheritedCollectionsWithParamter as U, DOMEventMetadata as a, CreateTreemapOptions as c, TreemapInstance as e, Plugin as k, PluginHooks as l, ExposedEventDefinition as n, ExposedEventMethods as o, PrimitiveEventMetadata as p, GraphicFont as w, GraphicConfig as x, TreemapInstanceAPI as y };

package/dist/index.d.mts

@@ -1 +1 @@
-export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a0 as DefaultMap, E as ExposedEventCallback, m as ExposedEventDefinition, n as ExposedEventMethods, w as GraphicConfig, u as GraphicFont, G as GraphicLayout, O as InheritedCollections, R as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, j as Plugin, P as PluginContext, k as PluginHooks, o as PrimitiveEventMetadata, S as Series, x as TreemapInstanceAPI, T as TreemapOptions, K as applyCanvasTransform, e as c2m, J as createCanvasElement, F as createRoundBlock, H as createTitleText, d as createTreemap, l as definePlugin, f as findRelativeNode, g as findRelativeNodeById, h as flattenModule, i as getNodeDepth, y as hashCode, p as isClickEvent, q as isContextMenuEvent, W as isMacOS, r as isMouseEvent, $ as isScrollWheelOrRightButtonOnMouseupAndDown, t as isWheelEvent, Q as mixin, U as mixinWithParams, A as noop, z as perferNumeric, V as prettyStrJoin, I as raf, _ as smoothFrame, s as sortChildrenByKey, Y as stackMatrixTransform, Z as stackMatrixTransformWithGraphAndLayer, X as typedForIn, v as visit } from './index-DcZTC3Az.js';
+export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a1 as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, Q as InheritedCollections, U as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, k as Plugin, P as PluginContext, l as PluginHooks, p as PrimitiveEventMetadata, S as Series, e as TreemapInstance, y as TreemapInstanceAPI, T as TreemapOptions, O as applyCanvasTransform, f as c2m, K as createCanvasElement, H as createRoundBlock, I as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, z as hashCode, q as isClickEvent, r as isContextMenuEvent, X as isMacOS, t as isMouseEvent, a0 as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, R as mixin, V as mixinWithParams, F as noop, A as perferNumeric, W as prettyStrJoin, J as raf, $ as smoothFrame, s as sortChildrenByKey, Z as stackMatrixTransform, _ as stackMatrixTransformWithGraphAndLayer, Y as typedForIn, v as visit } from './index-BoUEaWVv.js';

package/dist/index.d.ts

@@ -1 +1 @@
-export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a0 as DefaultMap, E as ExposedEventCallback, m as ExposedEventDefinition, n as ExposedEventMethods, w as GraphicConfig, u as GraphicFont, G as GraphicLayout, O as InheritedCollections, R as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, j as Plugin, P as PluginContext, k as PluginHooks, o as PrimitiveEventMetadata, S as Series, x as TreemapInstanceAPI, T as TreemapOptions, K as applyCanvasTransform, e as c2m, J as createCanvasElement, F as createRoundBlock, H as createTitleText, d as createTreemap, l as definePlugin, f as findRelativeNode, g as findRelativeNodeById, h as flattenModule, i as getNodeDepth, y as hashCode, p as isClickEvent, q as isContextMenuEvent, W as isMacOS, r as isMouseEvent, $ as isScrollWheelOrRightButtonOnMouseupAndDown, t as isWheelEvent, Q as mixin, U as mixinWithParams, A as noop, z as perferNumeric, V as prettyStrJoin, I as raf, _ as smoothFrame, s as sortChildrenByKey, Y as stackMatrixTransform, Z as stackMatrixTransformWithGraphAndLayer, X as typedForIn, v as visit } from './index-DcZTC3Az.js';
+export { B as BasicTreemapInstance, c as CreateTreemapOptions, D as DOMEventType, a1 as DefaultMap, E as ExposedEventCallback, n as ExposedEventDefinition, o as ExposedEventMethods, x as GraphicConfig, w as GraphicFont, G as GraphicLayout, Q as InheritedCollections, U as InheritedCollectionsWithParamter, L as LayoutModule, M as Module, N as NativeModule, k as Plugin, P as PluginContext, l as PluginHooks, p as PrimitiveEventMetadata, S as Series, e as TreemapInstance, y as TreemapInstanceAPI, T as TreemapOptions, O as applyCanvasTransform, f as c2m, K as createCanvasElement, H as createRoundBlock, I as createTitleText, d as createTreemap, m as definePlugin, g as findRelativeNode, h as findRelativeNodeById, i as flattenModule, j as getNodeDepth, z as hashCode, q as isClickEvent, r as isContextMenuEvent, X as isMacOS, t as isMouseEvent, a0 as isScrollWheelOrRightButtonOnMouseupAndDown, u as isWheelEvent, R as mixin, V as mixinWithParams, F as noop, A as perferNumeric, W as prettyStrJoin, J as raf, $ as smoothFrame, s as sortChildrenByKey, Z as stackMatrixTransform, _ as stackMatrixTransformWithGraphAndLayer, Y as typedForIn, v as visit } from './index-BoUEaWVv.js';

package/dist/plugin.d.mts

@@ -1,4 +1,4 @@
-import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-DcZTC3Az.js';
+import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-BoUEaWVv.js';
 
 declare const presetHighlightPlugin: {
     name: "treemap:preset-highlight";
@@ -25,6 +25,21 @@ declare const presetDragElementPlugin: {
     onResize(this: PluginContext, { matrix, stateManager: state }: DOMEvent): void;
 };
 
+interface MenuRenderConfig {
+    html: string;
+    action: string;
+}
+interface MenuPluginOptions {
+    style?: Partial<CSSStyleDeclaration>;
+    render?: (menu: HTMLDivElement) => MenuRenderConfig[];
+    onClick?: (action: string, module: LayoutModule | null) => void;
+}
+declare function presetMenuPlugin(options?: MenuPluginOptions): {
+    name: "treemap:preset-menu";
+    onDOMEventTriggered<N extends DOMEventType>(this: PluginContext, _: N, event: DOMEventMetadata<N>, __: LayoutModule | null, DOMEvent: DOMEvent): void;
+    onDispose(this: PluginContext): void;
+};
+
 declare const presetColorPlugin: {
     name: "treemap:preset-color";
     onModuleInit(this: PluginContext, modules: LayoutModule[]): {
@@ -75,4 +90,4 @@ declare const presetZoomablePlugin: {
     meta: ZoomableMetadata;
 };
 
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetMenuPlugin, presetScalePlugin, presetZoomablePlugin };

package/dist/plugin.d.ts

@@ -1,4 +1,4 @@
-import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-DcZTC3Az.js';
+import { P as PluginContext, D as DOMEventType, a as DOMEventMetadata, L as LayoutModule, b as DOMEvent, C as ColorMappings, B as BasicTreemapInstance } from './index-BoUEaWVv.js';
 
 declare const presetHighlightPlugin: {
     name: "treemap:preset-highlight";
@@ -25,6 +25,21 @@ declare const presetDragElementPlugin: {
     onResize(this: PluginContext, { matrix, stateManager: state }: DOMEvent): void;
 };
 
+interface MenuRenderConfig {
+    html: string;
+    action: string;
+}
+interface MenuPluginOptions {
+    style?: Partial<CSSStyleDeclaration>;
+    render?: (menu: HTMLDivElement) => MenuRenderConfig[];
+    onClick?: (action: string, module: LayoutModule | null) => void;
+}
+declare function presetMenuPlugin(options?: MenuPluginOptions): {
+    name: "treemap:preset-menu";
+    onDOMEventTriggered<N extends DOMEventType>(this: PluginContext, _: N, event: DOMEventMetadata<N>, __: LayoutModule | null, DOMEvent: DOMEvent): void;
+    onDispose(this: PluginContext): void;
+};
+
 declare const presetColorPlugin: {
     name: "treemap:preset-color";
     onModuleInit(this: PluginContext, modules: LayoutModule[]): {
@@ -75,4 +90,4 @@ declare const presetZoomablePlugin: {
     meta: ZoomableMetadata;
 };
 
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetMenuPlugin, presetScalePlugin, presetZoomablePlugin };

package/dist/plugin.js

@@ -241,6 +241,72 @@ function getDragOptions() {
     return meta;
 }
 
+function presetMenuPlugin(options) {
+    let menu = null;
+    let domEvent$1 = null;
+    const handleMenuClick = (e)=>{
+        if (!domEvent$1) {
+            return;
+        }
+        if (!menu) {
+            return;
+        }
+        const target = e.target;
+        if (target.parentNode) {
+            const parent = target.parentNode;
+            const action = parent.getAttribute('data-action');
+            if (!action) {
+                return;
+            }
+            if (options?.onClick) {
+                options.onClick(action, domEvent$1.findRelativeNode({
+                    native: e,
+                    kind: undefined
+                }));
+            }
+        }
+        menu.style.display = 'none';
+    };
+    return domEvent.definePlugin({
+        name: 'treemap:preset-menu',
+        onDOMEventTriggered (_, event, __, DOMEvent) {
+            if (domEvent.isContextMenuEvent(event)) {
+                event.native.stopPropagation();
+                event.native.preventDefault();
+                if (!menu) {
+                    menu = document.createElement('div');
+                    domEvent$1 = DOMEvent;
+                    Object.assign(menu.style, {
+                        backgroundColor: '#fff',
+                        ...options?.style,
+                        position: 'absolute',
+                        zIndex: '9999'
+                    });
+                    menu.addEventListener('click', handleMenuClick);
+                    if (menu && options?.render) {
+                        const result = options.render(menu);
+                        menu.innerHTML = result.map((item)=>{
+                            return `<div data-action='${item.action}'>${item.html}</div>`;
+                        }).join('');
+                    }
+                    document.body.append(menu);
+                }
+                menu.style.left = event.native.clientX + 'px';
+                menu.style.top = event.native.clientY + 'px';
+                menu.style.display = 'initial';
+            }
+        },
+        onDispose () {
+            if (!menu) {
+                return;
+            }
+            menu.removeEventListener('click', handleMenuClick);
+            menu = null;
+            domEvent$1 = null;
+        }
+    });
+}
+
 const presetColorPlugin = domEvent.definePlugin({
     name: 'treemap:preset-color',
     onModuleInit (modules) {
@@ -334,7 +400,8 @@ function onWheel(pluginContext, event, { stateManager: state, component, matrix
         return;
     }
     const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
-    const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
+    const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
+    const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
     const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
     if (newScale === scale) {
         return;
@@ -474,5 +541,6 @@ const presetZoomablePlugin = domEvent.definePlugin({
 exports.presetColorPlugin = presetColorPlugin;
 exports.presetDragElementPlugin = presetDragElementPlugin;
 exports.presetHighlightPlugin = presetHighlightPlugin;
+exports.presetMenuPlugin = presetMenuPlugin;
 exports.presetScalePlugin = presetScalePlugin;
 exports.presetZoomablePlugin = presetZoomablePlugin;

package/dist/plugin.mjs

@@ -1,4 +1,4 @@
-import { h as definePlugin, H as smoothFrame, r as createRoundBlock, F as stackMatrixTransform, S as Schedule, K as DEFAULT_MATRIX_LOC, I as isScrollWheelOrRightButtonOnMouseupAndDown, G as stackMatrixTransformWithGraphAndLayer, p as hashCode, P as PI_2, o as isWheelEvent, y as mixinWithParams } from './dom-event-BLJt9knO.mjs';
+import { h as definePlugin, H as smoothFrame, r as createRoundBlock, F as stackMatrixTransform, S as Schedule, K as DEFAULT_MATRIX_LOC, I as isScrollWheelOrRightButtonOnMouseupAndDown, G as stackMatrixTransformWithGraphAndLayer, j as isContextMenuEvent, p as hashCode, P as PI_2, o as isWheelEvent, y as mixinWithParams } from './dom-event-BLJt9knO.mjs';
 
 // Currently, etoile is an internal module, so we won't need too much easing functions.
 // And the animation logic is implemented by user code.
@@ -239,6 +239,72 @@ function getDragOptions() {
     return meta;
 }
 
+function presetMenuPlugin(options) {
+    let menu = null;
+    let domEvent = null;
+    const handleMenuClick = (e)=>{
+        if (!domEvent) {
+            return;
+        }
+        if (!menu) {
+            return;
+        }
+        const target = e.target;
+        if (target.parentNode) {
+            const parent = target.parentNode;
+            const action = parent.getAttribute('data-action');
+            if (!action) {
+                return;
+            }
+            if (options?.onClick) {
+                options.onClick(action, domEvent.findRelativeNode({
+                    native: e,
+                    kind: undefined
+                }));
+            }
+        }
+        menu.style.display = 'none';
+    };
+    return definePlugin({
+        name: 'treemap:preset-menu',
+        onDOMEventTriggered (_, event, __, DOMEvent) {
+            if (isContextMenuEvent(event)) {
+                event.native.stopPropagation();
+                event.native.preventDefault();
+                if (!menu) {
+                    menu = document.createElement('div');
+                    domEvent = DOMEvent;
+                    Object.assign(menu.style, {
+                        backgroundColor: '#fff',
+                        ...options?.style,
+                        position: 'absolute',
+                        zIndex: '9999'
+                    });
+                    menu.addEventListener('click', handleMenuClick);
+                    if (menu && options?.render) {
+                        const result = options.render(menu);
+                        menu.innerHTML = result.map((item)=>{
+                            return `<div data-action='${item.action}'>${item.html}</div>`;
+                        }).join('');
+                    }
+                    document.body.append(menu);
+                }
+                menu.style.left = event.native.clientX + 'px';
+                menu.style.top = event.native.clientY + 'px';
+                menu.style.display = 'initial';
+            }
+        },
+        onDispose () {
+            if (!menu) {
+                return;
+            }
+            menu.removeEventListener('click', handleMenuClick);
+            menu = null;
+            domEvent = null;
+        }
+    });
+}
+
 const presetColorPlugin = definePlugin({
     name: 'treemap:preset-color',
     onModuleInit (modules) {
@@ -332,7 +398,8 @@ function onWheel(pluginContext, event, { stateManager: state, component, matrix
         return;
     }
     const { scale, minScale, maxScale, scaleFactor } = meta.scaleOptions;
-    const delta = event.native.deltaY < 0 ? scaleFactor : -scaleFactor;
+    const dynamicScaleFactor = Math.max(scaleFactor, scale * 0.1);
+    const delta = event.native.deltaY < 0 ? dynamicScaleFactor : -dynamicScaleFactor;
     const newScale = Math.max(minScale, Math.min(maxScale, scale + delta));
     if (newScale === scale) {
         return;
@@ -469,4 +536,4 @@ const presetZoomablePlugin = definePlugin({
     }
 });
 
-export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetScalePlugin, presetZoomablePlugin };
+export { presetColorPlugin, presetDragElementPlugin, presetHighlightPlugin, presetMenuPlugin, presetScalePlugin, presetZoomablePlugin };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "squarified",
-  "version": "0.4.1",
+  "version": "0.4.3",
   "description": "squarified tree map",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,7 +34,6 @@
   "author": "Kanno",
   "license": "MIT",
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.52.3",
     "@swc/core": "^1.11.29",
     "@types/markdown-it": "^14.1.2",
     "@types/node": "^22.7.4",
@@ -57,7 +56,7 @@
     "tinyglobby": "^0.2.13",
     "tsx": "^4.19.2",
     "typescript": "^5.7.3",
-    "vite-bundle-analyzer": "^0.21.0"
+    "vite-bundle-analyzer": "^0.22.0"
   },
   "pnpm": {
     "overrides": {