squarified 0.1.0

package/dist/index.js

@@ -0,0 +1,1438 @@
+'use strict';
+
+var _computedKey;
+_computedKey = Symbol.iterator;
+class Iter {
+    keys;
+    data;
+    constructor(data){
+        this.data = data;
+        this.keys = Object.keys(data);
+    }
+    // dprint-ignore
+    *[_computedKey]() {
+        for(let i = 0; i < this.keys.length; i++){
+            yield {
+                key: this.keys[i],
+                value: this.data[this.keys[i]],
+                index: i,
+                peek: ()=>this.keys[i + 1]
+            };
+        }
+    }
+}
+// For strings we only check the first character to determine if it's a number (I think it's enough)
+function perferNumeric(s) {
+    if (typeof s === 'number') return true;
+    return s.charCodeAt(0) >= 48 && s.charCodeAt(0) <= 57;
+}
+
+const DEG_TO_RAD = Math.PI / 180;
+class Matrix2D {
+    a;
+    b;
+    c;
+    d;
+    e;
+    f;
+    constructor(loc = {}){
+        this.a = loc.a || 1;
+        this.b = loc.b || 0;
+        this.c = loc.c || 0;
+        this.d = loc.d || 1;
+        this.e = loc.e || 0;
+        this.f = loc.f || 0;
+    }
+    create(loc) {
+        for (const { key, value } of new Iter(loc)){
+            if (Object.hasOwnProperty.call(this, key)) {
+                this[key] = value;
+            }
+        }
+        return this;
+    }
+    transform(x, y, scaleX, scaleY, rotation, skewX, skewY) {
+        this.scale(scaleX, scaleY).translation(x, y);
+        if (skewX || skewY) {
+            this.skew(skewX, skewY);
+        } else {
+            this.roate(rotation);
+        }
+        return this;
+    }
+    translation(x, y) {
+        this.e += x;
+        this.f += y;
+        return this;
+    }
+    scale(a, d) {
+        this.a *= a;
+        this.d *= d;
+        return this;
+    }
+    skew(x, y) {
+        const tanX = Math.tan(x * DEG_TO_RAD);
+        const tanY = Math.tan(y * DEG_TO_RAD);
+        const a = this.a + this.b * tanX;
+        const b = this.b + this.a * tanY;
+        const c = this.c + this.d * tanX;
+        const d = this.d + this.c * tanY;
+        this.a = a;
+        this.b = b;
+        this.c = c;
+        this.d = d;
+        return this;
+    }
+    roate(rotation) {
+        if (rotation > 0) {
+            const rad = rotation * DEG_TO_RAD;
+            const cosTheta = Math.cos(rad);
+            const sinTheta = Math.sin(rad);
+            const a = this.a * cosTheta - this.b * sinTheta;
+            const b = this.a * sinTheta + this.b * cosTheta;
+            const c = this.c * cosTheta - this.d * sinTheta;
+            const d = this.c * sinTheta + this.d * cosTheta;
+            this.a = a;
+            this.b = b;
+            this.c = c;
+            this.d = d;
+        }
+        return this;
+    }
+}
+
+const SELF_ID = {
+    id: 0,
+    get () {
+        return this.id++;
+    }
+};
+class Display {
+    parent;
+    id;
+    matrix;
+    constructor(){
+        this.parent = null;
+        this.id = SELF_ID.get();
+        this.matrix = new Matrix2D();
+    }
+    destory() {
+    //
+    }
+}
+const ASSIGN_MAPPINGS = {
+    fillStyle: !0,
+    strokeStyle: !0,
+    font: !0,
+    lineWidth: !0,
+    textAlign: !0,
+    textBaseline: !0
+};
+function createInstruction() {
+    return {
+        mods: [],
+        fillStyle (...args) {
+            this.mods.push([
+                'fillStyle',
+                args
+            ]);
+        },
+        fillRect (...args) {
+            this.mods.push([
+                'fillRect',
+                args
+            ]);
+        },
+        strokeStyle (...args) {
+            this.mods.push([
+                'strokeStyle',
+                args
+            ]);
+        },
+        lineWidth (...args) {
+            this.mods.push([
+                'lineWidth',
+                args
+            ]);
+        },
+        strokeRect (...args) {
+            this.mods.push([
+                'strokeRect',
+                args
+            ]);
+        },
+        fillText (...args) {
+            this.mods.push([
+                'fillText',
+                args
+            ]);
+        },
+        font (...args) {
+            this.mods.push([
+                'font',
+                args
+            ]);
+        },
+        textBaseline (...args) {
+            this.mods.push([
+                'textBaseline',
+                args
+            ]);
+        },
+        textAlign (...args) {
+            this.mods.push([
+                'textAlign',
+                args
+            ]);
+        }
+    };
+}
+class S extends Display {
+    width;
+    height;
+    x;
+    y;
+    scaleX;
+    scaleY;
+    rotation;
+    skewX;
+    skewY;
+    constructor(options = {}){
+        super();
+        this.width = options.width || 0;
+        this.height = options.height || 0;
+        this.x = options.x || 0;
+        this.y = options.y || 0;
+        this.scaleX = options.scaleX || 1;
+        this.scaleY = options.scaleY || 1;
+        this.rotation = options.rotation || 0;
+        this.skewX = options.skewX || 0;
+        this.skewY = options.skewY || 0;
+    }
+}
+class Graph extends S {
+    instruction;
+    constructor(options = {}){
+        super(options);
+        this.instruction = createInstruction();
+    }
+    render(ctx) {
+        this.create();
+        this.instruction.mods.forEach((mod)=>{
+            const direct = mod[0];
+            if (direct in ASSIGN_MAPPINGS) {
+                // @ts-expect-error
+                ctx[direct] = mod[1];
+                return;
+            }
+            // @ts-expect-error
+            ctx[direct].apply(ctx, ...mod.slice(1));
+        });
+    }
+}
+
+class Box extends Display {
+    elements;
+    constructor(){
+        super();
+        this.elements = [];
+    }
+    add(...elements) {
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            const element = elements[i];
+            if (element.parent) ;
+            this.elements.push(element);
+            element.parent = this;
+        }
+    }
+    remove(...elements) {
+        const cap = elements.length;
+        for(let i = 0; i < cap; i++){
+            for(let j = this.elements.length - 1; j >= 0; j--){
+                const element = this.elements[j];
+                if (element.id === elements[i].id) {
+                    this.elements.splice(j, 1);
+                    element.parent = null;
+                }
+            }
+        }
+    }
+    destory() {
+        this.elements.forEach((element)=>element.parent = null);
+        this.elements.length = 0;
+    }
+}
+
+// Runtime is designed for graph element
+function decodeHLS(meta) {
+    const { h, l, s, a } = meta;
+    if ('a' in meta) {
+        return `hsla(${h}deg, ${s}%, ${l}%, ${a})`;
+    }
+    return `hsl(${h}deg, ${s}%, ${l}%)`;
+}
+function decodeRGB(meta) {
+    const { r, g, b, a } = meta;
+    if ('a' in meta) {
+        return `rgba(${r}, ${g}, ${b}, ${a})`;
+    }
+    return `rgb(${r}, ${g}, ${b})`;
+}
+function decodeColor(meta) {
+    return meta.mode === 'rgb' ? decodeRGB(meta.desc) : decodeHLS(meta.desc);
+}
+function evaluateFillStyle(primitive, opacity = 1) {
+    const descibe = {
+        mode: primitive.mode,
+        desc: {
+            ...primitive.desc,
+            a: opacity
+        }
+    };
+    return decodeColor(descibe);
+}
+const runtime = {
+    evaluateFillStyle
+};
+
+class Rect extends Graph {
+    style;
+    constructor(options = {}){
+        super(options);
+        this.style = options.style || Object.create(null);
+    }
+    create() {
+        if (this.style.fill) {
+            this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity));
+            this.instruction.fillRect(0, 0, this.width, this.height);
+        }
+        if (this.style.stroke) {
+            this.instruction.strokeStyle(this.style.stroke);
+            if (typeof this.style.lineWidth === 'number') {
+                this.instruction.lineWidth(this.style.lineWidth);
+            }
+            this.instruction.strokeRect(0, 0, this.width, this.height);
+        }
+    }
+}
+
+class Text extends Graph {
+    text;
+    style;
+    constructor(options = {}){
+        super(options);
+        this.text = options.text || '';
+        this.style = options.style || Object.create(null);
+    }
+    create() {
+        if (this.style.fill) {
+            this.instruction.font(this.style.font);
+            this.instruction.lineWidth(this.style.lineWidth);
+            this.instruction.textBaseline(this.style.baseline);
+            this.instruction.fillStyle(this.style.fill);
+            this.instruction.fillText(this.text, 0, 0);
+        }
+    }
+}
+
+class Event {
+    eventCollections;
+    constructor(){
+        this.eventCollections = Object.create(null);
+    }
+    on(evt, handler, c) {
+        if (!(evt in this.eventCollections)) {
+            this.eventCollections[evt] = [];
+        }
+        const data = {
+            name: evt,
+            handler,
+            ctx: c || this
+        };
+        this.eventCollections[evt].push(data);
+    }
+    off(evt, handler) {
+        if (evt in this.eventCollections) {
+            if (!handler) {
+                this.eventCollections[evt] = [];
+                return;
+            }
+            this.eventCollections[evt] = this.eventCollections[evt].filter((d)=>d.handler !== handler);
+        }
+    }
+    emit(evt, ...args) {
+        if (!this.eventCollections[evt]) return;
+        const handlers = this.eventCollections[evt];
+        if (handlers.length) {
+            handlers.forEach((d)=>{
+                d.handler.call(d.ctx, ...args);
+            });
+        }
+    }
+    bindWithContext(c) {
+        return (evt, handler)=>this.on(evt, handler, c);
+    }
+}
+
+const NAME_SPACE = 'etoile';
+const log = {
+    error: (message)=>{
+        return `[${NAME_SPACE}] ${message}`;
+    }
+};
+
+class Render {
+    canvas;
+    ctx;
+    options;
+    constructor(to, options){
+        this.canvas = document.createElement('canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.options = options;
+        this.initOptions(options);
+        to.appendChild(this.canvas);
+    }
+    clear(width, height) {
+        this.ctx.clearRect(0, 0, width, height);
+    }
+    initOptions(userOptions = {}) {
+        Object.assign(this.options, userOptions);
+        const { options } = this;
+        this.canvas.width = options.width * options.devicePixelRatio;
+        this.canvas.height = options.height * options.devicePixelRatio;
+        this.canvas.style.cssText = `width: ${options.width}px; height: ${options.height}px`;
+    }
+    update(schedule) {
+        this.clear(this.options.width, this.options.height);
+        schedule.execute(this);
+    }
+    destory() {}
+}
+
+let Schedule$1 = class Schedule extends Box {
+    render;
+    to;
+    event;
+    constructor(to, renderOptions = {}){
+        super();
+        this.to = typeof to === 'string' ? document.querySelector(to) : to;
+        if (!this.to) {
+            throw new Error(log.error('The element to bind is not found.'));
+        }
+        const { width, height } = this.to.getBoundingClientRect();
+        Object.assign(renderOptions, {
+            width,
+            height
+        }, {
+            devicePixelRatio: window.devicePixelRatio || 1
+        });
+        this.event = new Event();
+        this.render = new Render(this.to, renderOptions);
+    }
+    applyTransform(matrix) {
+        const pixel = this.render.options.devicePixelRatio;
+        this.render.ctx.setTransform(matrix.a * pixel, matrix.b * pixel, matrix.c * pixel, matrix.d * pixel, matrix.e * pixel, matrix.f * pixel);
+    }
+    update() {
+        this.render.update(this);
+        const matrix = this.matrix.create({
+            a: 1,
+            b: 0,
+            c: 0,
+            d: 1,
+            e: 0,
+            f: 0
+        });
+        this.applyTransform(matrix);
+    }
+    // execute all graph elements
+    execute(render, graph = this) {
+        render.ctx.save();
+        let matrix = graph.matrix;
+        this.applyTransform(matrix);
+        if (graph instanceof Box) {
+            const cap = graph.elements.length;
+            for(let i = 0; i < cap; i++){
+                const element = graph.elements[i];
+                matrix = element.matrix.create({
+                    a: 1,
+                    b: 0,
+                    c: 0,
+                    d: 1,
+                    e: 0,
+                    f: 0
+                });
+                if (element instanceof Graph) {
+                    matrix.transform(element.x, element.y, element.scaleX, element.scaleY, element.rotation, element.skewX, element.skewY);
+                }
+                this.execute(render, element);
+            }
+        }
+        if (graph instanceof Graph) {
+            graph.render(render.ctx);
+        }
+        render.ctx.restore();
+    }
+};
+
+function traverse(graphs, handler) {
+    graphs.forEach((graph)=>{
+        if (graph instanceof Box) {
+            traverse(graph.elements, handler);
+        } else if (graph instanceof Graph) {
+            handler(graph);
+        }
+    });
+}
+const etoile = {
+    Schedule: Schedule$1,
+    traverse
+};
+
+// Currently, etoile is an internal module, so we won't need too much easing functions.
+// And the animation logic is implemented by user code.
+const easing = {
+    linear: (k)=>k,
+    quadraticIn: (k)=>k * k,
+    quadraticOut: (k)=>k * (2 - k),
+    quadraticInOut: (k)=>{
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k;
+        }
+        return -0.5 * (--k * (k - 2) - 1);
+    },
+    cubicIn: (k)=>k * k * k,
+    cubicOut: (k)=>{
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k;
+        }
+        return 0.5 * ((k -= 2) * k * k + 2);
+    },
+    cubicInOut: (k)=>{
+        if ((k *= 2) < 1) {
+            return 0.5 * k * k * k;
+        }
+        return 0.5 * ((k -= 2) * k * k + 2);
+    }
+};
+
+function sortChildrenByKey(data, ...keys) {
+    return data.sort((a, b)=>{
+        for (const key of keys){
+            const v = a[key];
+            const v2 = b[key];
+            if (perferNumeric(v) && perferNumeric(v2)) {
+                if (v2 > v) return 1;
+                if (v2 < v) return -1;
+                continue;
+            }
+            // Not numeric, compare as string
+            const comparison = ('' + v).localeCompare('' + v2);
+            if (comparison !== 0) return comparison;
+        }
+        return 0;
+    });
+}
+function c2m(data, key, modifier) {
+    if (Array.isArray(data.groups)) {
+        data.groups = sortChildrenByKey(data.groups.map((d)=>c2m(d, key, modifier)), 'weight');
+    }
+    const obj = {
+        ...data,
+        weight: data[key]
+    };
+    if (modifier) return modifier(obj);
+    return obj;
+}
+function flatten(data) {
+    const result = [];
+    for(let i = 0; i < data.length; i++){
+        const { groups, ...rest } = data[i];
+        result.push(rest);
+        if (groups) {
+            result.push(...flatten(groups));
+        }
+    }
+    return result;
+}
+function bindParentForModule(modules, parent) {
+    return modules.map((module)=>{
+        const next = {
+            ...module
+        };
+        next.parent = parent;
+        if (next.groups && Array.isArray(next.groups)) {
+            next.groups = bindParentForModule(next.groups, next);
+        }
+        return next;
+    });
+}
+function getNodeDepth(node) {
+    let depth = 0;
+    while(node.parent){
+        node = node.parent;
+        depth++;
+    }
+    return depth;
+}
+function visit(data, fn) {
+    if (!data) return null;
+    for (const d of data){
+        if (d.children) {
+            const result = visit(d.children, fn);
+            if (result) return result;
+        }
+        const stop = fn(d);
+        if (stop) return d;
+    }
+    return null;
+}
+function findRelativeNode(c, 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) {
+            return true;
+        }
+    });
+}
+function findRelativeNodeById(id, layoutNodes) {
+    return visit(layoutNodes, (node)=>{
+        if (node.node.id === id) {
+            return true;
+        }
+    });
+}
+
+function squarify(data, rect, layoutDecorator) {
+    const result = [];
+    if (!data.length) return result;
+    const worst = (start, end, shortestSide, totalWeight, aspectRatio)=>{
+        const max = data[start].weight * aspectRatio;
+        const min = data[end].weight * aspectRatio;
+        return Math.max(shortestSide * shortestSide * max / (totalWeight * totalWeight), totalWeight * totalWeight / (shortestSide * shortestSide * min));
+    };
+    const recursion = (start, rect)=>{
+        while(start < data.length){
+            let totalWeight = 0;
+            for(let i = start; i < data.length; i++){
+                totalWeight += data[i].weight;
+            }
+            const shortestSide = Math.min(rect.w, rect.h);
+            const aspectRatio = rect.w * rect.h / totalWeight;
+            let end = start;
+            let areaInRun = 0;
+            let oldWorst = 0;
+            // find the best split
+            while(end < data.length){
+                const area = data[end].weight * aspectRatio;
+                const newWorst = worst(start, end, shortestSide, areaInRun + area, aspectRatio);
+                if (end > start && oldWorst < newWorst) break;
+                areaInRun += area;
+                oldWorst = newWorst;
+                end++;
+            }
+            const splited = Math.round(areaInRun / shortestSide);
+            let areaInLayout = 0;
+            for(let i = start; i < end; i++){
+                const children = data[i];
+                const area = children.weight * aspectRatio;
+                const lower = Math.round(shortestSide * areaInLayout / areaInRun);
+                const upper = Math.round(shortestSide * (areaInLayout + area) / areaInRun);
+                const [x, y, w, h] = rect.w >= rect.h ? [
+                    rect.x,
+                    rect.y + lower,
+                    splited,
+                    upper - lower
+                ] : [
+                    rect.x + lower,
+                    rect.y,
+                    upper - lower,
+                    splited
+                ];
+                const depth = getNodeDepth(children) || 1;
+                const { titleAreaHeight, rectGap } = layoutDecorator;
+                const diff = titleAreaHeight.max / depth;
+                const hh = diff < titleAreaHeight.min ? titleAreaHeight.min : diff;
+                result.push({
+                    layout: [
+                        x,
+                        y,
+                        w,
+                        h
+                    ],
+                    node: children,
+                    decorator: {
+                        ...layoutDecorator,
+                        titleHeight: hh
+                    },
+                    children: w > rectGap * 2 && h > hh + rectGap ? squarify(children.groups || [], {
+                        x: x + rectGap,
+                        y: y + hh,
+                        w: w - rectGap * 2,
+                        h: h - hh - rectGap
+                    }, layoutDecorator) : []
+                });
+                areaInLayout += area;
+            }
+            start = end;
+            if (rect.w >= rect.h) {
+                rect.x += splited;
+                rect.w -= splited;
+            } else {
+                rect.y += splited;
+                rect.h -= splited;
+            }
+        }
+    };
+    recursion(0, rect);
+    return result;
+}
+
+function applyForOpacity(graph, lastState, nextState, easedProgress) {
+    const alpha = lastState + (nextState - lastState) * easedProgress;
+    if (graph instanceof Rect) {
+        graph.style.opacity = alpha;
+    }
+}
+
+class RegisterModule {
+    static mixin(app, methods) {
+        methods.forEach(({ name, fn })=>{
+            Object.defineProperty(app, name, {
+                value: fn(app),
+                writable: false
+            });
+        });
+    }
+}
+function registerModuleForSchedule(mod) {
+    if (mod instanceof RegisterModule) {
+        return (app, treemap, render)=>mod.init(app, treemap, render);
+    }
+    throw new Error(log.error('The module is not a valid RegisterScheduleModule.'));
+}
+
+// etoile is a simple 2D render engine for web and it don't take complex rendering into account.
+// So it's no need to implement a complex event algorithm or hit mode.
+// If one day etoile need to build as a useful library. Pls rewrite it!
+// All of implementation don't want to consider the compatibility of the browser.
+const primitiveEvents = [
+    'click',
+    'mousedown',
+    'mousemove',
+    'mouseup',
+    'mouseover',
+    'mouseout'
+];
+function smoothDrawing(c) {
+    const { self, treemap } = c;
+    const currentNode = self.currentNode;
+    if (currentNode) {
+        const lloc = new Set();
+        visit([
+            currentNode
+        ], (node)=>{
+            const [x, y, w, h] = node.layout;
+            const { rectGap, titleHeight } = node.decorator;
+            lloc.add(x + '-' + y);
+            lloc.add(x + '-' + (y + h - rectGap));
+            lloc.add(x + '-' + (y + titleHeight));
+            lloc.add(x + w - rectGap + '-' + (y + titleHeight));
+        });
+        const startTime = Date.now();
+        const animationDuration = 300;
+        const draw = ()=>{
+            if (self.forceDestroy) {
+                return;
+            }
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / animationDuration, 1);
+            const easedProgress = easing.cubicIn(progress) || 0.1;
+            let allTasksCompleted = true;
+            treemap.reset();
+            etoile.traverse([
+                treemap.elements[0]
+            ], (graph)=>{
+                const key = `${graph.x}-${graph.y}`;
+                if (lloc.has(key)) {
+                    applyForOpacity(graph, 1, 0.7, easedProgress);
+                    if (progress < 1) {
+                        allTasksCompleted = false;
+                    }
+                }
+            });
+            applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
+            treemap.update();
+            if (!allTasksCompleted) {
+                window.requestAnimationFrame(draw);
+            }
+        };
+        if (!self.isAnimating) {
+            self.isAnimating = true;
+            window.requestAnimationFrame(draw);
+        }
+    } else {
+        treemap.reset();
+        applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
+        treemap.update();
+    }
+}
+function applyZoomEvent(ctx) {
+    ctx.treemap.event.on('zoom', (node)=>{
+        const root = null;
+        if (ctx.self.isDragging) return;
+        onZoom(ctx, node, root);
+    });
+}
+function getOffset(el) {
+    let e = 0;
+    let f = 0;
+    if (document.documentElement.getBoundingClientRect && el.getBoundingClientRect) {
+        const { top, left } = el.getBoundingClientRect();
+        e = top;
+        f = left;
+    } else {
+        for(let elt = el; elt; elt = el.offsetParent){
+            e += el.offsetLeft;
+            f += el.offsetTop;
+        }
+    }
+    return [
+        e + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft),
+        f + Math.max(document.documentElement.scrollTop, document.body.scrollTop)
+    ];
+}
+function captureBoxXY(c, evt, a, d, translateX, translateY) {
+    const boundingClientRect = c.getBoundingClientRect();
+    if (evt instanceof MouseEvent) {
+        const [e, f] = getOffset(c);
+        return {
+            x: (evt.clientX - boundingClientRect.left - e - translateX) / a,
+            y: (evt.clientY - boundingClientRect.top - f - translateY) / d
+        };
+    }
+    return {
+        x: 0,
+        y: 0
+    };
+}
+function bindPrimitiveEvent(ctx, evt, bus) {
+    const { treemap, self } = ctx;
+    const c = treemap.render.canvas;
+    const handler = (e)=>{
+        const { x, y } = captureBoxXY(c, e, self.scaleRatio, self.scaleRatio, self.translateX, self.translateY);
+        const event = {
+            native: e,
+            module: findRelativeNode(c, {
+                x,
+                y
+            }, treemap.layoutNodes)
+        };
+        // @ts-expect-error
+        bus.emit(evt, event);
+    };
+    c.addEventListener(evt, handler);
+    return handler;
+}
+class SelfEvent extends RegisterModule {
+    currentNode;
+    isAnimating;
+    forceDestroy;
+    scaleRatio;
+    translateX;
+    translateY;
+    layoutWidth;
+    layoutHeight;
+    isDragging;
+    draggingState;
+    event;
+    constructor(){
+        super();
+        this.currentNode = null;
+        this.isAnimating = false;
+        this.forceDestroy = false;
+        this.isDragging = false;
+        this.scaleRatio = 1;
+        this.translateX = 0;
+        this.translateY = 0;
+        this.layoutWidth = 0;
+        this.layoutHeight = 0;
+        this.draggingState = {
+            x: 0,
+            y: 0
+        };
+        this.event = new Event();
+    }
+    ondragstart(metadata) {
+        const { native } = metadata;
+        if (isScrollWheelOrRightButtonOnMouseupAndDown(native)) {
+            return;
+        }
+        const x = native.offsetX;
+        const y = native.offsetY;
+        this.self.isDragging = true;
+        this.self.draggingState = {
+            x,
+            y
+        };
+    }
+    ondragmove(metadata) {
+        if (!this.self.isDragging) {
+            if ('zoom' in this.treemap.event.eventCollections) {
+                const condit = this.treemap.event.eventCollections.zoom.length > 0;
+                if (!condit) {
+                    applyZoomEvent(this);
+                }
+            }
+            return;
+        }
+        // @ts-expect-error
+        this.self.event.off('mousemove', this.self.onmousemove);
+        this.treemap.event.off('zoom');
+        this.self.forceDestroy = true;
+        const { native } = metadata;
+        const x = native.offsetX;
+        const y = native.offsetY;
+        const { x: lastX, y: lastY } = this.self.draggingState;
+        const drawX = x - lastX;
+        const drawY = y - lastY;
+        this.self.translateX += drawX;
+        this.self.translateY += drawY;
+        this.self.draggingState = {
+            x,
+            y
+        };
+        this.treemap.reset();
+        applyGraphTransform(this.treemap.elements, this.self.translateX, this.self.translateY, this.self.scaleRatio);
+        this.treemap.update();
+    }
+    ondragend(metadata) {
+        if (!this.self.isDragging) {
+            return;
+        }
+        this.self.isDragging = false;
+        this.self.draggingState = {
+            x: 0,
+            y: 0
+        };
+        this.self.event.bindWithContext(this)('mousemove', this.self.onmousemove);
+    }
+    onmousemove(metadata) {
+        const { self } = this;
+        if (self.isDragging) {
+            return;
+        }
+        const { module: node } = metadata;
+        self.forceDestroy = false;
+        if (self.currentNode !== node) {
+            self.currentNode = node;
+            self.isAnimating = false;
+        }
+        smoothDrawing(this);
+    }
+    onmouseout() {
+        const { self } = this;
+        self.currentNode = null;
+        self.forceDestroy = true;
+        self.isDragging = false;
+        smoothDrawing(this);
+    }
+    onwheel(metadata) {
+        const { self, treemap } = this;
+        // @ts-expect-error
+        const wheelDelta = metadata.native.wheelDelta;
+        const absWheelDelta = Math.abs(wheelDelta);
+        const offsetX = metadata.native.offsetX;
+        const offsetY = metadata.native.offsetY;
+        if (wheelDelta === 0) {
+            return;
+        }
+        self.forceDestroy = true;
+        self.isAnimating = true;
+        treemap.reset();
+        const factor = absWheelDelta > 3 ? 1.4 : absWheelDelta > 1 ? 1.2 : 1.1;
+        const delta = wheelDelta > 0 ? factor : 1 / factor;
+        self.scaleRatio *= delta;
+        const translateX = offsetX - (offsetX - self.translateX) * delta;
+        const translateY = offsetY - (offsetY - self.translateY) * delta;
+        self.translateX = translateX;
+        self.translateY = translateY;
+        applyGraphTransform(treemap.elements, self.translateX, self.translateY, self.scaleRatio);
+        treemap.update();
+        self.forceDestroy = false;
+        self.isAnimating = false;
+    }
+    init(app, treemap, render) {
+        const event = this.event;
+        const nativeEvents = [];
+        const methods = [
+            {
+                name: 'on',
+                fn: ()=>event.bindWithContext(treemap.api).bind(event)
+            },
+            {
+                name: 'off',
+                fn: ()=>event.off.bind(event)
+            },
+            {
+                name: 'emit',
+                fn: ()=>event.emit.bind(event)
+            }
+        ];
+        RegisterModule.mixin(app, methods);
+        const selfEvents = [
+            ...primitiveEvents,
+            'wheel'
+        ];
+        selfEvents.forEach((evt)=>{
+            nativeEvents.push(bindPrimitiveEvent({
+                treemap,
+                self: this
+            }, evt, event));
+        });
+        const selfEvt = event.bindWithContext({
+            treemap,
+            self: this
+        });
+        selfEvt('mousedown', this.ondragstart);
+        selfEvt('mousemove', this.ondragmove);
+        selfEvt('mouseup', this.ondragend);
+        // highlight
+        selfEvt('mousemove', this.onmousemove);
+        selfEvt('mouseout', this.onmouseout);
+        // wheel
+        selfEvt('wheel', this.onwheel);
+        applyZoomEvent({
+            treemap,
+            self: this
+        });
+        treemap.event.on('cleanup:selfevent', ()=>{
+            this.currentNode = null;
+            this.isAnimating = false;
+            this.scaleRatio = 1;
+            this.translateX = 0;
+            this.translateY = 0;
+            this.layoutWidth = treemap.render.canvas.width;
+            this.layoutHeight = treemap.render.canvas.height;
+            this.isDragging = false;
+            this.draggingState = {
+                x: 0,
+                y: 0
+            };
+        });
+    }
+}
+function estimateZoomingArea(node, root, w, h) {
+    const defaultSizes = [
+        w,
+        h,
+        1
+    ];
+    if (root === node) {
+        return defaultSizes;
+    }
+    const viewArea = w * h;
+    let area = viewArea;
+    let parent = node.node.parent;
+    let totalWeight = node.node.weight;
+    while(parent){
+        const siblings = parent.groups || [];
+        let siblingWeightSum = 0;
+        for (const sibling of siblings){
+            siblingWeightSum += sibling.weight;
+        }
+        area *= siblingWeightSum / totalWeight;
+        totalWeight = parent.weight;
+        parent = parent.parent;
+    }
+    const maxScaleFactor = 2.5;
+    const minScaleFactor = 0.3;
+    const scaleFactor = Math.max(minScaleFactor, Math.min(maxScaleFactor, Math.sqrt(area / viewArea)));
+    return [
+        w * scaleFactor,
+        h * scaleFactor
+    ];
+}
+function applyGraphTransform(graphs, translateX, translateY, scale) {
+    etoile.traverse(graphs, (graph)=>{
+        graph.x = graph.x * scale + translateX;
+        graph.y = graph.y * scale + translateY;
+        graph.scaleX = scale;
+        graph.scaleY = scale;
+    });
+}
+function onZoom(ctx, node, root) {
+    if (!node) return;
+    const { treemap, self } = ctx;
+    let isAnimating = false;
+    const c = treemap.render.canvas;
+    const boundingClientRect = c.getBoundingClientRect();
+    const [w, h] = estimateZoomingArea(node, root, boundingClientRect.width, boundingClientRect.height);
+    resetLayout(treemap, w, h);
+    const module = findRelativeNodeById(node.node.id, treemap.layoutNodes);
+    if (module) {
+        const [mx, my, mw, mh] = module.layout;
+        const scale = Math.min(boundingClientRect.width / mw, boundingClientRect.height / mh);
+        const translateX = boundingClientRect.width / 2 - (mx + mw / 2) * scale;
+        const translateY = boundingClientRect.height / 2 - (my + mh / 2) * scale;
+        const initialScale = self.scaleRatio;
+        const initialTranslateX = self.translateX;
+        const initialTranslateY = self.translateY;
+        const startTime = Date.now();
+        const animationDuration = 300;
+        const draw = ()=>{
+            if (self.forceDestroy) {
+                return;
+            }
+            const elapsed = Date.now() - startTime;
+            const progress = Math.min(elapsed / animationDuration, 1);
+            const easedProgress = easing.cubicInOut(progress);
+            const scaleRatio = initialScale + (scale - initialScale) * easedProgress;
+            self.translateX = initialTranslateX + (translateX - initialTranslateX) * easedProgress;
+            self.translateY = initialTranslateY + (translateY - initialTranslateY) * easedProgress;
+            self.scaleRatio = scaleRatio;
+            treemap.reset();
+            applyGraphTransform(treemap.elements, self.translateX, self.translateY, scaleRatio);
+            treemap.update();
+            if (progress < 1) {
+                window.requestAnimationFrame(draw);
+            } else {
+                self.layoutWidth = w;
+                self.layoutHeight = h;
+                isAnimating = false;
+            }
+        };
+        if (!isAnimating) {
+            isAnimating = true;
+            window.requestAnimationFrame(draw);
+        }
+    }
+    root = node;
+}
+// Only works for mouseup and mousedown events
+function isScrollWheelOrRightButtonOnMouseupAndDown(e) {
+    return e.which === 2 || e.which === 3;
+}
+
+const defaultRegistries = [
+    registerModuleForSchedule(new SelfEvent())
+];
+function charCodeWidth(c, ch) {
+    return c.measureText(String.fromCharCode(ch)).width;
+}
+function evaluateOptimalFontSize(c, text, width, fontRange, fontFamily, height) {
+    height = Math.floor(height);
+    let optimalFontSize = fontRange.min;
+    for(let fontSize = fontRange.min; fontSize <= fontRange.max; fontSize++){
+        c.font = `${fontSize}px ${fontFamily}`;
+        let textWidth = 0;
+        const textHeight = fontSize;
+        let i = 0;
+        while(i < text.length){
+            const codePointWidth = charCodeWidth(c, text.charCodeAt(i));
+            textWidth += codePointWidth;
+            i++;
+        }
+        if (textWidth >= width) {
+            const overflow = textWidth - width;
+            const ratio = overflow / textWidth;
+            const newFontSize = Math.abs(Math.floor(fontSize - fontSize * ratio));
+            optimalFontSize = newFontSize || fontRange.min;
+            break;
+        }
+        if (textHeight >= height) {
+            const overflow = textHeight - height;
+            const ratio = overflow / textHeight;
+            const newFontSize = Math.abs(Math.floor(fontSize - fontSize * ratio));
+            optimalFontSize = newFontSize || fontRange.min;
+            break;
+        }
+        optimalFontSize = fontSize;
+    }
+    return optimalFontSize;
+}
+function getSafeText(c, text, width) {
+    const ellipsisWidth = c.measureText('...').width;
+    if (width < ellipsisWidth) {
+        return false;
+    }
+    let textWidth = 0;
+    let i = 0;
+    while(i < text.length){
+        const codePointWidth = charCodeWidth(c, text.charCodeAt(i));
+        textWidth += codePointWidth;
+        i++;
+    }
+    if (textWidth < width) {
+        return {
+            text,
+            width: textWidth
+        };
+    }
+    return {
+        text: '...',
+        width: ellipsisWidth
+    };
+}
+function createFillBlock(color, x, y, width, height) {
+    return new Rect({
+        width,
+        height,
+        x,
+        y,
+        style: {
+            fill: color,
+            opacity: 1
+        }
+    });
+}
+function createTitleText(text, x, y, font, color) {
+    return new Text({
+        text,
+        x,
+        y,
+        style: {
+            fill: color,
+            textAlign: 'center',
+            baseline: 'middle',
+            font,
+            lineWidth: 1
+        }
+    });
+}
+function resetLayout(treemap, w, h) {
+    treemap.layoutNodes = squarify(treemap.data, {
+        w,
+        h,
+        x: 0,
+        y: 0
+    }, treemap.decorator.layout);
+    treemap.reset();
+}
+// https://www.typescriptlang.org/docs/handbook/mixins.html
+class Schedule extends etoile.Schedule {
+}
+class TreemapLayout extends Schedule {
+    data;
+    layoutNodes;
+    decorator;
+    bgBox;
+    fgBox;
+    constructor(...args){
+        super(...args);
+        this.data = [];
+        this.layoutNodes = [];
+        this.bgBox = new Box();
+        this.fgBox = new Box();
+        this.decorator = Object.create(null);
+    }
+    drawBackgroundNode(node) {
+        for (const child of node.children){
+            this.drawBackgroundNode(child);
+        }
+        const [x, y, w, h] = node.layout;
+        const { rectGap, titleHeight } = node.decorator;
+        const fill = this.decorator.color.mappings[node.node.id];
+        if (node.children.length) {
+            const box = new Box();
+            box.add(createFillBlock(fill, x, y, w, titleHeight), createFillBlock(fill, x, y + h - rectGap, w, rectGap), createFillBlock(fill, x, y + titleHeight, rectGap, h - titleHeight - rectGap), createFillBlock(fill, x + w - rectGap, y + titleHeight, rectGap, h - titleHeight - rectGap));
+            this.bgBox.add(box);
+        } else {
+            this.bgBox.add(createFillBlock(fill, x, y, w, h));
+        }
+    }
+    drawForegroundNode(node) {
+        for (const child of node.children){
+            this.drawForegroundNode(child);
+        }
+        const [x, y, w, h] = node.layout;
+        const { rectBorderWidth, titleHeight, rectGap } = node.decorator;
+        const { fontSize, fontFamily, color } = this.decorator.font;
+        const rect = new Rect({
+            x: x + 0.5,
+            y: y + 0.5,
+            width: w,
+            height: h,
+            style: {
+                stroke: '#222',
+                lineWidth: rectBorderWidth
+            }
+        });
+        this.fgBox.add(rect);
+        this.render.ctx.textBaseline = 'middle';
+        const optimalFontSize = evaluateOptimalFontSize(this.render.ctx, node.node.label, w - rectGap * 2, fontSize, fontFamily, node.children.length ? Math.round(titleHeight / 2) + rectGap : h);
+        this.render.ctx.font = `${optimalFontSize}px ${fontFamily}`;
+        if (h > titleHeight) {
+            const result = getSafeText(this.render.ctx, node.node.label, w - rectGap * 2);
+            if (!result) return;
+            const { text, width } = result;
+            const textX = x + Math.round((w - width) / 2);
+            let textY = y + Math.round(h / 2);
+            if (node.children.length) {
+                textY = y + Math.round(titleHeight / 2);
+            }
+            this.fgBox.add(createTitleText(text, textX, textY, `${optimalFontSize}px ${fontFamily}`, color));
+        } else {
+            const ellipsisWidth = 3 * charCodeWidth(this.render.ctx, 46);
+            const textX = x + Math.round((w - ellipsisWidth) / 2);
+            const textY = y + Math.round(h / 2);
+            this.fgBox.add(createTitleText('...', textX, textY, `${optimalFontSize}px ${fontFamily}`, color));
+        }
+    }
+    reset() {
+        this.bgBox.destory();
+        this.fgBox.destory();
+        this.remove(this.bgBox, this.fgBox);
+        for (const node of this.layoutNodes){
+            this.drawBackgroundNode(node);
+            this.drawForegroundNode(node);
+        }
+        this.add(this.bgBox, this.fgBox);
+    }
+    get api() {
+        return {
+            zoom: (node)=>{
+                this.event.emit('zoom', node);
+            }
+        };
+    }
+}
+function createTreemap() {
+    let treemap = null;
+    let root = null;
+    const uses = [];
+    const context = {
+        init,
+        dispose,
+        setOptions,
+        resize,
+        use
+    };
+    function init(el) {
+        treemap = new TreemapLayout(el);
+        root = el;
+    }
+    function dispose() {
+        if (root && treemap) {
+            treemap.destory();
+            root.removeChild(root.firstChild);
+            root = null;
+            treemap = null;
+        }
+    }
+    function resize() {
+        if (!treemap || !root) return;
+        const { width, height } = root.getBoundingClientRect();
+        treemap.render.initOptions({
+            height,
+            width,
+            devicePixelRatio: window.devicePixelRatio
+        });
+        treemap.event.emit('cleanup:selfevent');
+        resetLayout(treemap, width, height);
+        treemap.update();
+    }
+    function setOptions(options) {
+        if (!treemap) {
+            throw new Error('Treemap not initialized');
+        }
+        treemap.data = bindParentForModule(options.data || []);
+        for (const registry of defaultRegistries){
+            registry(context, treemap, treemap.render);
+        }
+        for (const use of uses){
+            use(treemap);
+        }
+        resize();
+    }
+    function use(key, register) {
+        switch(key){
+            case 'decorator':
+                uses.push((treemap)=>register(treemap));
+                break;
+        }
+    }
+    return context;
+}
+
+const defaultLayoutOptions = {
+    titleAreaHeight: {
+        max: 80,
+        min: 20
+    },
+    rectGap: 5,
+    rectBorderRadius: 0.5,
+    rectBorderWidth: 1.5
+};
+const defaultFontOptions = {
+    color: '#000',
+    fontSize: {
+        max: 38,
+        min: 7
+    },
+    fontFamily: 'sans-serif'
+};
+function presetDecorator(app) {
+    Object.assign(app.decorator, {
+        layout: defaultLayoutOptions,
+        font: defaultFontOptions,
+        color: colorMappings(app)
+    });
+}
+function colorDecorator(node, state) {
+    const depth = getNodeDepth(node);
+    let baseHue = 0;
+    let sweepAngle = Math.PI * 2;
+    const totalHueRange = Math.PI;
+    if (node.parent) {
+        sweepAngle = node.weight / node.parent.weight * sweepAngle;
+        baseHue = state.hue + sweepAngle / Math.PI * 180;
+    }
+    baseHue += sweepAngle;
+    const depthHueOffset = depth + totalHueRange / 10;
+    const finalHue = baseHue + depthHueOffset / 2;
+    const saturation = 0.6 + 0.4 * Math.max(0, Math.cos(finalHue));
+    const lightness = 0.5 + 0.2 * Math.max(0, Math.cos(finalHue + Math.PI * 2 / 3));
+    state.hue = baseHue;
+    return {
+        mode: 'hsl',
+        desc: {
+            h: finalHue,
+            s: Math.round(saturation * 100),
+            l: Math.round(lightness * 100)
+        }
+    };
+}
+function evaluateColorMappingByNode(node, state) {
+    const colorMappings = {};
+    if (node.groups && Array.isArray(node.groups)) {
+        for (const child of node.groups){
+            Object.assign(colorMappings, evaluateColorMappingByNode(child, state));
+        }
+    }
+    if (node.id) {
+        colorMappings[node.id] = colorDecorator(node, state);
+    }
+    return colorMappings;
+}
+function colorMappings(app) {
+    const colorMappings = {};
+    const state = {
+        hue: 0
+    };
+    for (const node of app.data){
+        Object.assign(colorMappings, evaluateColorMappingByNode(node, state));
+    }
+    return {
+        mappings: colorMappings
+    };
+}
+
+exports.c2m = c2m;
+exports.createTreemap = createTreemap;
+exports.defaultFontOptions = defaultFontOptions;
+exports.defaultLayoutOptions = defaultLayoutOptions;
+exports.flattenModule = flatten;
+exports.presetDecorator = presetDecorator;
+exports.sortChildrenByKey = sortChildrenByKey;