squarified 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kanno
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# Squarified
+
+`squarified treemap` is a mini treemap component.
+
+![display](./data.gif)
+
+## Usage
+
+```ts
+import { createTreemap, presetDecorator } from 'squarified'
+
+const root = document.querySelector('#app')
+
+const treemap = createTreemap()
+treemap.use('decorator', presetDecorator)
+
+treemap.init(root)
+
+treemap.setOptions({ data: [] })
+```
+
+### Auth
+
+Kanno
+
+### LICENSE
+
+[MIT](./LICENSE)

package/dist/index.d.ts

@@ -0,0 +1,283 @@
+interface MatrixLoc {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+declare class Matrix2D {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+    constructor(loc?: Partial<MatrixLoc>);
+    create(loc: MatrixLoc): this;
+    transform(x: number, y: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number): this;
+    private translation;
+    private scale;
+    private skew;
+    private roate;
+}
+
+declare class Display {
+    parent: Display | null;
+    id: number;
+    matrix: Matrix2D;
+    constructor();
+    destory(): void;
+}
+interface LocOptions {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+    skewX: number;
+    skewY: number;
+}
+interface GraphOptions extends LocOptions {
+}
+type Mod = [string, ...any[]];
+interface Instruction {
+    mods: Mod[];
+    fillStyle(...args: any[]): void;
+    fillRect(...args: any[]): void;
+    strokeStyle(...args: any[]): void;
+    lineWidth(...args: any[]): void;
+    strokeRect(...args: any[]): void;
+    fillText(...args: any[]): void;
+    font(...args: any[]): void;
+    textBaseline(...args: any[]): void;
+    textAlign(...args: any[]): void;
+}
+declare function createInstruction(): Instruction;
+declare class S extends Display {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+    skewX: number;
+    skewY: number;
+    constructor(options?: Partial<LocOptions>);
+}
+declare abstract class Graph extends S {
+    instruction: ReturnType<typeof createInstruction>;
+    constructor(options?: Partial<GraphOptions>);
+    abstract create(): void;
+    render(ctx: CanvasRenderingContext2D): void;
+}
+
+declare class Box extends Display {
+    elements: Display[];
+    constructor();
+    add(...elements: Display[]): void;
+    remove(...elements: Display[]): void;
+    destory(): void;
+}
+
+interface RGBColor {
+    r: number;
+    g: number;
+    b: number;
+    a?: number;
+}
+interface HLSColor {
+    h: number;
+    l: number;
+    s: number;
+    a?: number;
+}
+interface ColorDecoratorResultHLS {
+    mode?: 'hsl';
+    desc: HLSColor;
+}
+interface ColorDecoratorResultRGB {
+    mode: 'rgb';
+    desc: RGBColor;
+}
+type ColorDecoratorResult = ColorDecoratorResultHLS | ColorDecoratorResultRGB;
+
+type EventCallback<P = any[]> = P extends any[] ? (...args: P) => any : never;
+type DefaultEventDefinition = Record<string, EventCallback>;
+type BindThisParameter<T, C = unknown> = T extends (...args: infer P) => infer R ? (this: C, ...args: P) => R : never;
+interface EventCollectionData<EvtDefinition extends DefaultEventDefinition, C = unknown> {
+    name: string;
+    handler: BindThisParameter<EvtDefinition[keyof EvtDefinition], C>;
+    ctx: C;
+}
+type EventCollections<EvtDefinition extends DefaultEventDefinition> = Record<keyof EvtDefinition, EventCollectionData<EvtDefinition>[]>;
+declare class Event<EvtDefinition extends DefaultEventDefinition = DefaultEventDefinition> {
+    eventCollections: EventCollections<EvtDefinition>;
+    constructor();
+    on<C, Evt extends keyof EvtDefinition>(evt: Evt, handler: BindThisParameter<EvtDefinition[Evt], unknown extends C ? this : C>, c?: C): void;
+    off(evt: keyof EvtDefinition, handler?: BindThisParameter<EvtDefinition[keyof EvtDefinition], unknown>): void;
+    emit(evt: keyof EvtDefinition, ...args: Parameters<EvtDefinition[keyof EvtDefinition]>): void;
+    bindWithContext<C>(c: C): (evt: keyof EvtDefinition, handler: BindThisParameter<EvtDefinition[keyof EvtDefinition], unknown extends C ? this : C>) => void;
+}
+
+interface RenderViewportOptions {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+}
+declare class Render {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    options: RenderViewportOptions;
+    constructor(to: Element, options: RenderViewportOptions);
+    clear(width: number, height: number): void;
+    initOptions(userOptions?: Partial<RenderViewportOptions>): void;
+    update(schedule: Schedule$1): void;
+    destory(): void;
+}
+
+type ApplyTo = string | Element;
+declare class Schedule$1 extends Box {
+    render: Render;
+    to: Element;
+    event: Event;
+    constructor(to: ApplyTo, renderOptions?: Partial<RenderViewportOptions>);
+    applyTransform(matrix: Matrix2D): void;
+    update(): void;
+    execute(render: Render, graph?: Display): void;
+}
+
+declare function traverse(graphs: Display[], handler: (graph: Graph) => void): void;
+declare const etoile: {
+    Schedule: typeof Schedule$1;
+    traverse: typeof traverse;
+};
+
+type ColorMappings = Record<string, ColorDecoratorResult>;
+type Rect = {
+    w: number;
+    h: number;
+};
+type Series<T> = {
+    max: T;
+    min: T;
+};
+interface RenderColor {
+    mappings: ColorMappings;
+}
+interface RenderLayout {
+    titleAreaHeight: Series<number>;
+    rectBorderRadius: number;
+    rectBorderWidth: number;
+    rectGap: number;
+}
+interface RenderFont {
+    color: string;
+    fontSize: Series<number>;
+    fontFamily: string;
+}
+interface RenderDecorator {
+    color: RenderColor;
+    layout: RenderLayout;
+    font: RenderFont;
+}
+declare const defaultLayoutOptions: {
+    titleAreaHeight: {
+        max: number;
+        min: number;
+    };
+    rectGap: number;
+    rectBorderRadius: number;
+    rectBorderWidth: number;
+};
+declare const defaultFontOptions: {
+    color: string;
+    fontSize: {
+        max: number;
+        min: number;
+    };
+    fontFamily: string;
+};
+declare function presetDecorator(app: TreemapLayout): void;
+
+type AnyObject = Record<keyof any, any>;
+declare function sortChildrenByKey<T extends AnyObject, K extends keyof T = 'weight'>(data: T[], ...keys: K[]): T[];
+declare function c2m<T extends AnyObject & {
+    groups: any[];
+}, K extends keyof T>(data: T, key: K, modifier?: (data: T) => T): T & {
+    weight: number;
+};
+declare function flatten<T extends AnyObject & {
+    groups: T[];
+}>(data: T[]): Omit<T, "groups">[];
+type Module = ReturnType<typeof c2m>;
+declare function bindParentForModule<T extends Module & {
+    parent: Module;
+}>(modules: Module[], parent?: Module): T[];
+type NativeModule = ReturnType<typeof bindParentForModule>[number] & {
+    id: string;
+    parent: NativeModule;
+    groups: NativeModule[];
+};
+
+type LayoutModule = {
+    node: NativeModule;
+    layout: [number, number, number, number];
+    children: LayoutModule[];
+    decorator: {
+        titleHeight: number;
+        rectBorderRadius: number;
+        rectGap: number;
+        rectBorderWidth: number;
+    };
+};
+
+declare const primitiveEvents: readonly ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout"];
+type PrimitiveEvent = typeof primitiveEvents[number];
+interface PrimitiveEventMetadata<T extends keyof HTMLElementEventMap> {
+    native: HTMLElementEventMap[T];
+    module: LayoutModule;
+}
+type PrimitiveEventCallback<T extends PrimitiveEvent> = (metadata: PrimitiveEventMetadata<T>) => void;
+type PrimitiveEventDefinition = {
+    [key in PrimitiveEvent]: BindThisParameter<PrimitiveEventCallback<key>, TreemapInstanceAPI>;
+};
+interface EventMethods<C = TreemapInstanceAPI, D = PrimitiveEventDefinition> {
+    on<Evt extends keyof D>(evt: Evt, handler: BindThisParameter<D[Evt], unknown extends C ? this : C>): void;
+    off<Evt extends keyof D>(evt: keyof D, handler?: BindThisParameter<D[Evt], unknown extends C ? this : C>): void;
+}
+
+interface TreemapOptions {
+    data: Module[];
+}
+type Using = 'decorator';
+interface App {
+    init: (el: Element) => void;
+    dispose: () => void;
+    setOptions: (options: TreemapOptions) => void;
+    resize: () => void;
+    use: (using: Using, register: (app: TreemapLayout) => void) => void;
+}
+declare class Schedule extends etoile.Schedule {
+}
+declare class TreemapLayout extends Schedule {
+    data: NativeModule[];
+    layoutNodes: LayoutModule[];
+    decorator: RenderDecorator;
+    private bgBox;
+    private fgBox;
+    constructor(...args: ConstructorParameters<typeof Schedule>);
+    drawBackgroundNode(node: LayoutModule): void;
+    drawForegroundNode(node: LayoutModule): void;
+    reset(): void;
+    get api(): {
+        zoom: (node: LayoutModule) => void;
+    };
+}
+declare function createTreemap(): App & EventMethods;
+type TreemapInstanceAPI = TreemapLayout['api'];
+
+export { type App, type ColorMappings, type Rect, type RenderColor, type RenderDecorator, type RenderFont, type RenderLayout, type Series, type TreemapInstanceAPI, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, flatten as flattenModule, presetDecorator, sortChildrenByKey };