squarified 0.5.0 → 0.6.1

package/README.md

@@ -1,25 +1,250 @@
 # Squarified
 
-`squarified` is a minimal and powerful treemap component.
+A minimal and powerful treemap visualization library for creating interactive hierarchical data visualizations.
 
-## Install
+## Features
+
+- 🚀 **Lightweight**: Minimal bundle size with maximum performance
+- 🎨 **Customizable**: Rich theming and styling options
+- 🔌 **Plugin System**: Extensible architecture with built-in plugins
+- 📱 **Responsive**: Automatic resizing
+- ⚡ **Interactive**: Built-in zoom, drag, highlight, and menu interactions
+- 🎯 **TypeScript**: Full type safety and excellent DX
+
+## Installation
 
 ```shell
-$ yarn add squarified
+npm install squarified
+# or
+yarn add squarified
+# or
+pnpm add squarified
 ```
 
-### Document
+## Quick Start
 
-nonzzz.github.io/squarified/
+```typescript
+import { c2m, createTreemap, sortChildrenByKey } from 'squarified'
 
-### Auth
+// Create a treemap instance
+const treemap = createTreemap({
+  plugins: [
+    // Add built-in plugins for interactions
+  ]
+})
 
-Kanno
+// Initialize with a DOM element
+const container = document.querySelector('#treemap-container')
+treemap.init(container)
+
+// Set your data
+treemap.setOptions({
+  data: [
+    {
+      id: 'root',
+      label: 'Root',
+      weight: 100,
+      groups: [
+        { id: 'child1', label: 'Child 1', weight: 60 },
+        { id: 'child2', label: 'Child 2', weight: 40 }
+      ]
+    }
+  ]
+})
+```
+
+## Complete Example
+
+```typescript
+import {
+  c2m,
+  createTreemap,
+  presetColorPlugin,
+  presetDragElementPlugin,
+  presetHighlightPlugin,
+  presetMenuPlugin,
+  presetScalePlugin,
+  presetZoomablePlugin,
+  sortChildrenByKey
+} from 'squarified'
+
+// Create treemap with plugins
+const treemap = createTreemap({
+  plugins: [
+    presetColorPlugin,
+    presetZoomablePlugin,
+    presetHighlightPlugin,
+    presetDragElementPlugin,
+    presetScalePlugin(),
+    presetMenuPlugin({
+      style: {
+        borderRadius: '5px',
+        padding: '6px 12px',
+        backgroundColor: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        cursor: 'pointer',
+        userSelect: 'none'
+      },
+      render: () => [
+        { html: '<span>🔍 Zoom In</span>', action: 'zoom' },
+        { html: '<span>🔄 Reset</span>', action: 'reset' }
+      ],
+      onClick(action, module) {
+        switch (action) {
+          case 'zoom':
+            if (module?.node.id) {
+              treemap.zoom(module.node.id)
+            }
+            break
+          case 'reset':
+            treemap.resize()
+            break
+        }
+      }
+    })
+  ]
+})
+
+// Convert and prepare data
+async function loadData() {
+  const response = await fetch('/api/data')
+  const rawData = await response.json()
+
+  // Transform data structure
+  const convertedData = rawData.map((item) => ({
+    ...item,
+    groups: item.children?.map((child) => convertChildrenToGroups(child))
+  }))
+
+  // Convert to treemap format and sort
+  const treemapData = sortChildrenByKey(
+    convertedData.map((item) =>
+      c2m(item, 'value', (d) => ({
+        ...d,
+        id: d.path,
+        label: d.name
+      }))
+    ),
+    'weight'
+  )
+
+  return treemapData
+}
+
+// Initialize
+const container = document.querySelector('#app')
+treemap.init(container)
+
+// Load and set data
+loadData().then((data) => {
+  treemap.setOptions({ data })
+})
+
+// Handle events
+treemap.on('click', (event, module) => {
+  console.log('Clicked:', module?.node)
+})
+
+// Auto-resize on container changes
+new ResizeObserver(() => {
+  treemap.resize()
+}).observe(container)
+```
+
+## API Reference
+
+### Creating a Treemap
+
+#### `createTreemap(options?)`
+
+Creates a new treemap instance.
+
+```typescript
+interface CreateTreemapOptions {
+  plugins?: Plugin[]
+}
+```
+
+### Instance Methods
+
+#### `init(element: HTMLElement)`
+
+Initialize the treemap with a DOM container.
+
+#### `setOptions(options: TreemapOptions)`
 
-### Credits
+Update treemap configuration and data.
 
-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.
+#### `resize()`
 
-### LICENSE
+Manually trigger a resize recalculation.
+
+#### `on(event: string, handler: Function)`
+
+Subscribe to treemap events.
+
+#### `dispose()`
+
+Clean up the treemap instance.
+
+### Data Format
+
+```typescript
+interface TreemapNode {
+  id: string
+  label: string
+  weight: number
+  groups?: TreemapNode[]
+  // Custom properties...
+}
+```
+
+### Utility Functions
+
+#### `c2m(data, weightKey, transform?)`
+
+Convert hierarchical data to treemap format.
+
+#### `sortChildrenByKey(data, key)`
+
+Sort treemap nodes by a specific key.
+
+## Built-in Plugins
+
+- **presetColorPlugin**: Automatic color assignment
+- **presetZoomablePlugin**: Zoom interactions
+- **presetHighlightPlugin**: Hover highlighting
+- **presetDragElementPlugin**: Drag interactions
+- **presetScalePlugin**: Scaling controls
+- **presetMenuPlugin**: Context menus
+
+## Browser Support
+
+- Chrome/Edge 80+
+- Firefox 75+
+- Safari 13+
+
+## Performance
+
+Squarified is optimized for performance with:
+
+- Canvas-based rendering
+- Efficient layout algorithms
+- Smart redraw optimizations
+- Memory-conscious design
+
+## Contributing
+
+Contributions are welcome! Please read our [contributing guide](CONTRIBUTING.md) for details.
+
+## License
 
 [MIT](./LICENSE)
+
+## Auth
+
+Kanno
+
+## Credits
+
+Algorithm ported from [esbuild Bundle Size Analyzer](https://esbuild.github.io/analyze/) by [Evan Wallace](https://github.com/evanw), refactored and optimized for general-purpose treemap visualization.

package/dist/{dom-event-Bkw3ecGf.mjs → dom-event-CKb3Ko4-.mjs}

@@ -88,7 +88,6 @@ var DisplayType = /*#__PURE__*/ function(DisplayType) {
     DisplayType["Box"] = "Box";
     DisplayType["Text"] = "Text";
     DisplayType["RoundRect"] = "RoundRect";
-    DisplayType["Bitmap"] = "Bitmap";
     return DisplayType;
 }({});
 class Display {
@@ -291,12 +290,10 @@ class S extends Display {
 class Graph extends S {
     instruction;
     __options__;
-    __widget__;
     constructor(options = {}){
         super(options);
         this.instruction = createInstruction();
         this.__options__ = options;
-        this.__widget__ = null;
     }
     render(ctx) {
         this.create();
@@ -333,15 +330,11 @@ function isRoundRect(display) {
 function isText(display) {
     return isGraph(display) && display.__shape__ === DisplayType.Text;
 }
-function isBitmap(display) {
-    return isGraph(display) && display.__shape__ === DisplayType.Bitmap;
-}
 const asserts = {
     isGraph,
     isBox,
     isText,
-    isRoundRect,
-    isBitmap
+    isRoundRect
 };
 
 class C extends Display {
@@ -741,16 +734,6 @@ function applyCanvasTransform(ctx, matrix, dpr) {
     ctx.setTransform(matrix.a * dpr, matrix.b * dpr, matrix.c * dpr, matrix.d * dpr, matrix.e * dpr, matrix.f * dpr);
 }
 function mixin(app, methods) {
-    methods.forEach(({ name, fn })=>{
-        Object.defineProperty(app, name, {
-            value: fn(app),
-            writable: false
-        });
-    });
-    // @ts-expect-error not
-    return app;
-}
-function mixinWithParams(app, methods) {
     methods.forEach(({ name, fn })=>{
         Object.defineProperty(app, name, {
             value: fn(app),
@@ -760,12 +743,6 @@ function mixinWithParams(app, methods) {
     });
     return app;
 }
-function prettyStrJoin(...s) {
-    return s.join('');
-}
-function isMacOS() {
-    return /Mac OS X/.test(navigator.userAgent);
-}
 function typedForIn(obj, callback) {
     for(const key in obj){
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
@@ -1125,12 +1102,15 @@ function squarify(data, rect, config, scale = 1) {
     if (!processedData.length) {
         return result;
     }
-    rect = {
-        x: rect.x + scaledGap / 2,
-        y: rect.y + scaledGap / 2,
-        w: rect.w - scaledGap,
-        h: rect.h - scaledGap
-    };
+    let workingRect = rect;
+    if (scaledGap > 0) {
+        workingRect = {
+            x: rect.x + scaledGap / 2,
+            y: rect.y + scaledGap / 2,
+            w: Math.max(0, rect.w - scaledGap),
+            h: Math.max(0, rect.h - scaledGap)
+        };
+    }
     const worst = (start, end, shortestSide, totalWeight, aspectRatio)=>{
         const max = processedData[start].weight * aspectRatio;
         const min = processedData[end].weight * aspectRatio;
@@ -1182,39 +1162,43 @@ function squarify(data, rect, config, scale = 1) {
                     w = upper - lower;
                     h = splited;
                 }
-                const edgeGap = currentGap / 2;
-                if (!isFirst) {
-                    if (isHorizontalLayout) {
-                        y += edgeGap;
-                        h -= edgeGap;
-                    } else {
-                        x += edgeGap;
-                        w -= edgeGap;
+                if (currentGap > 0) {
+                    const edgeGap = currentGap / 2;
+                    if (!isFirst) {
+                        if (isHorizontalLayout) {
+                            y += edgeGap;
+                            h = Math.max(0, h - edgeGap);
+                        } else {
+                            x += edgeGap;
+                            w = Math.max(0, w - edgeGap);
+                        }
                     }
-                }
-                if (!isLast) {
-                    if (isHorizontalLayout) {
-                        h -= edgeGap;
-                    } else {
-                        w -= edgeGap;
+                    if (!isLast) {
+                        if (isHorizontalLayout) {
+                            h = Math.max(0, h - edgeGap);
+                        } else {
+                            w = Math.max(0, w - edgeGap);
+                        }
                     }
                 }
                 const nodeDepth = getNodeDepth(children) || 1;
                 const { titleAreaHeight } = config;
                 const diff = titleAreaHeight.max / nodeDepth;
                 const titleHeight = diff < titleAreaHeight.min ? titleAreaHeight.min : diff;
-                w = Math.max(2, w);
-                h = Math.max(2, h);
+                w = Math.max(1, w);
+                h = Math.max(1, h);
                 let childrenLayout = [];
                 const hasValidChildren = children.groups && children.groups.length > 0;
                 if (hasValidChildren) {
+                    const childGapOffset = currentGap > 0 ? currentGap : 0;
                     const childRect = {
-                        x: x + currentGap,
+                        x: x + childGapOffset,
                         y: y + titleHeight,
-                        w: Math.max(0, w - currentGap * 2),
-                        h: Math.max(0, h - titleHeight - currentGap)
+                        w: Math.max(0, w - childGapOffset * 2),
+                        h: Math.max(0, h - titleHeight - childGapOffset)
                     };
-                    if (childRect.w > currentRadius * 2 && childRect.h > currentRadius * 2) {
+                    const minChildSize = currentRadius > 0 ? currentRadius * 2 : 1;
+                    if (childRect.w >= minChildSize && childRect.h >= minChildSize) {
                         childrenLayout = squarify(children.groups || [], childRect, {
                             ...config,
                             rectGap: currentGap,
@@ -1240,16 +1224,17 @@ function squarify(data, rect, config, scale = 1) {
                 areaInLayout += area;
             }
             start = end;
+            const rectGapOffset = currentGap > 0 ? currentGap : 0;
             if (isHorizontalLayout) {
-                rect.x += splited + currentGap;
-                rect.w -= splited + currentGap;
+                rect.x += splited + rectGapOffset;
+                rect.w = Math.max(0, rect.w - splited - rectGapOffset);
             } else {
-                rect.y += splited + currentGap;
-                rect.h -= splited + currentGap;
+                rect.y += splited + rectGapOffset;
+                rect.h = Math.max(0, rect.h - splited - rectGapOffset);
             }
         }
     };
-    recursion(0, rect);
+    recursion(0, workingRect);
     return result;
 }
 
@@ -1296,6 +1281,7 @@ class PluginDriver {
         this.plugins.forEach((plugin)=>{
             const hook = plugin[hookName];
             if (hook) {
+                // @ts-expect-error fixme
                 const hookResult = hook.call(this.pluginContext, ...args);
                 if (hookResult) {
                     Object.assign(finalResult, hookResult);
@@ -1351,6 +1337,65 @@ class Component extends Schedule {
         this.caches = new DefaultMap(()=>14);
         this.layoutNodes = [];
     }
+    clearFontCacheInAABB(aabb) {
+        const affectedModules = this.getModulesInAABB(this.layoutNodes, aabb);
+        for (const module of affectedModules){
+            this.caches.delete(module.node.id);
+        }
+    }
+    getModulesInAABB(modules, aabb) {
+        const result = [];
+        for (const module of modules){
+            const [x, y, w, h] = module.layout;
+            const moduleAABB = {
+                x,
+                y,
+                width: w,
+                height: h
+            };
+            if (this.isAABBIntersecting(moduleAABB, aabb)) {
+                result.push(module);
+                if (module.children && module.children.length > 0) {
+                    result.push(...this.getModulesInAABB(module.children, aabb));
+                }
+            }
+        }
+        return result;
+    }
+    getViewportAABB(matrixE, matrixF, scale) {
+        const { width, height } = this.render.options;
+        const worldX = -matrixE / scale;
+        const worldY = -matrixF / scale;
+        const worldWidth = width / scale;
+        const worldHeight = height / scale;
+        return {
+            x: worldX,
+            y: worldY,
+            width: worldWidth,
+            height: worldHeight
+        };
+    }
+    getAABBUnion(a, b) {
+        const minX = Math.min(a.x, b.x);
+        const minY = Math.min(a.y, b.y);
+        const maxX = Math.max(a.x + a.width, b.x + b.width);
+        const maxY = Math.max(a.y + a.height, b.y + b.height);
+        return {
+            x: minX,
+            y: minY,
+            width: maxX - minX,
+            height: maxY - minY
+        };
+    }
+    handleTransformCacheInvalidation(oldMatrix, newMatrix) {
+        const oldViewportAABB = this.getViewportAABB(oldMatrix.e, oldMatrix.f, oldMatrix.a);
+        const newViewportAABB = this.getViewportAABB(newMatrix.e, newMatrix.f, newMatrix.a);
+        const affectedAABB = this.getAABBUnion(oldViewportAABB, newViewportAABB);
+        this.clearFontCacheInAABB(affectedAABB);
+    }
+    isAABBIntersecting(a, b) {
+        return !(a.x + a.width < b.x || b.x + b.width < a.x || a.y + a.height < b.y || b.y + b.height < a.y);
+    }
     drawBroundRect(node) {
         const [x, y, w, h] = node.layout;
         const { rectRadius } = node.config;
@@ -1361,7 +1406,6 @@ class Component extends Schedule {
             padding: 0,
             radius: effectiveRadius
         });
-        rect.__widget__ = node;
         this.rectLayer.add(rect);
         for (const child of node.children){
             this.drawBroundRect(child);
@@ -1435,11 +1479,16 @@ class Component extends Schedule {
     }
     calculateLayoutNodes(data, rect, scale = 1) {
         const config = {
-            titleAreaHeight: this.config.layout?.titleAreaHeight || DEFAULT_TITLE_AREA_HEIGHT,
-            rectRadius: this.config.layout?.rectRadius || DEFAULT_RECT_BORDER_RADIUS,
-            rectGap: this.config.layout?.rectGap || DEFAULT_RECT_GAP
+            titleAreaHeight: this.config.layout?.titleAreaHeight ?? DEFAULT_TITLE_AREA_HEIGHT,
+            rectRadius: this.config.layout?.rectRadius ?? DEFAULT_RECT_BORDER_RADIUS,
+            rectGap: this.config.layout?.rectGap ?? DEFAULT_RECT_GAP
         };
-        return squarify(data, rect, config, scale);
+        const layoutNodes = squarify(data, rect, config, scale);
+        const result = this.pluginDriver.cascadeHook('onLayoutCalculated', layoutNodes, rect, config);
+        if (result && result.layoutNodes?.length) {
+            return result.layoutNodes;
+        }
+        return layoutNodes;
     }
 }
 function evaluateOptimalFontSize(c, text, config, desiredW, desiredH) {
@@ -1448,39 +1497,25 @@ function evaluateOptimalFontSize(c, text, config, desiredW, desiredH) {
     const { fontSize, family } = config;
     let min = fontSize.min;
     let max = fontSize.max;
-    const cache = new Map();
     while(max - min >= 1){
         const current = min + (max - min) / 2;
-        if (!cache.has(current)) {
-            c.font = `${current}px ${family}`;
-            const metrics = c.measureText(text);
-            const width = metrics.width;
-            const height = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
-            cache.set(current, {
-                width,
-                height
-            });
-        }
-        const { width, height } = cache.get(current);
-        if (width > desiredW || height > desiredH) {
-            max = current;
-        } else {
+        c.font = `${current}px ${family}`;
+        const textWidth = c.measureText(text).width;
+        const metrics = c.measureText(text);
+        const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+        if (textWidth <= desiredW && textHeight <= desiredH) {
             min = current;
+        } else {
+            max = current;
         }
     }
     return Math.floor(min);
 }
 function getTextLayout(c, text, width, height) {
-    const ellipsisWidth = measureTextWidth(c, '...');
-    if (width < ellipsisWidth) {
-        if (height > ellipsisWidth) {
-            return {
-                valid: true,
-                text: '...',
-                direction: 'vertical',
-                width: ellipsisWidth / 3
-            };
-        }
+    const textWidth = c.measureText(text).width;
+    const metrics = c.measureText(text);
+    const textHeight = metrics.actualBoundingBoxAscent + metrics.actualBoundingBoxDescent;
+    if (textHeight > height) {
         return {
             valid: false,
             text: '',
@@ -1488,8 +1523,7 @@ function getTextLayout(c, text, width, height) {
             width: 0
         };
     }
-    const textWidth = measureTextWidth(c, text);
-    if (textWidth < width) {
+    if (textWidth <= width) {
         return {
             valid: true,
             text,
@@ -1497,16 +1531,41 @@ function getTextLayout(c, text, width, height) {
             width: textWidth
         };
     }
-    return {
+    const ellipsisWidth = c.measureText('...').width;
+    if (width <= ellipsisWidth) {
+        return {
+            valid: false,
+            text: '',
+            direction: 'horizontal',
+            width: 0
+        };
+    }
+    let left = 0;
+    let right = text.length;
+    let bestFit = '';
+    while(left <= right){
+        const mid = Math.floor((left + right) / 2);
+        const substring = text.substring(0, mid);
+        const subWidth = c.measureText(substring).width;
+        if (subWidth + ellipsisWidth <= width) {
+            bestFit = substring;
+            left = mid + 1;
+        } else {
+            right = mid - 1;
+        }
+    }
+    return bestFit.length > 0 ? {
+        valid: true,
+        text: bestFit + '...',
+        direction: 'horizontal',
+        width
+    } : {
         valid: true,
         text: '...',
         direction: 'horizontal',
         width: ellipsisWidth
     };
 }
-function measureTextWidth(c, text) {
-    return c.measureText(text).width;
-}
 
 // I think those event is enough for user.
 const DOM_EVENTS = [
@@ -1645,4 +1704,4 @@ class DOMEvent extends Event {
     }
 }
 
-export { isMacOS as A, typedForIn as B, Component as C, DOMEvent as D, Event as E, stackMatrixTransform as F, stackMatrixTransformWithGraphAndLayer as G, smoothFrame as H, isScrollWheelOrRightButtonOnMouseupAndDown as I, DefaultMap as J, DEFAULT_MATRIX_LOC as K, PI_2 as P, Schedule as S, assertExists as a, bindParentForModule as b, c2m as c, findRelativeNodeById as d, flatten as e, findRelativeNode as f, getNodeDepth as g, definePlugin as h, isClickEvent as i, isContextMenuEvent as j, isMouseEvent as k, logger as l, mixin as m, noop as n, isWheelEvent as o, hashCode as p, perferNumeric as q, createRoundBlock as r, sortChildrenByKey as s, createTitleText as t, raf as u, visit as v, createCanvasElement as w, applyCanvasTransform as x, mixinWithParams as y, prettyStrJoin as z };
+export { stackMatrixTransformWithGraphAndLayer as A, smoothFrame as B, Component as C, DOMEvent as D, Event as E, isScrollWheelOrRightButtonOnMouseupAndDown as F, DefaultMap as G, DEFAULT_MATRIX_LOC as H, PI_2 as P, Schedule as S, assertExists as a, bindParentForModule as b, c2m as c, findRelativeNodeById as d, flatten as e, findRelativeNode as f, getNodeDepth as g, definePlugin as h, isClickEvent as i, isContextMenuEvent as j, isMouseEvent as k, logger as l, mixin as m, isWheelEvent as n, hashCode as o, perferNumeric as p, noop as q, createRoundBlock as r, sortChildrenByKey as s, createTitleText as t, raf as u, visit as v, createCanvasElement as w, applyCanvasTransform as x, typedForIn as y, stackMatrixTransform as z };