squarified 0.4.2 → 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/plugin.d.mts

@@ -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

@@ -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.2",
+  "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": {