squarified 0.1.1 → 0.2.0

package/README.md

@@ -4,20 +4,15 @@
 
 ![display](./data.gif)
 
-## Usage
-
-```ts
-import { createTreemap, presetDecorator } from 'squarified'
-
-const root = document.querySelector('#app')
+## Install
 
-const treemap = createTreemap()
-treemap.use('decorator', presetDecorator)
+```shell
+$ yarn add squarified
+```
 
-treemap.init(root)
+## Usage
 
-treemap.setOptions({ data: [] })
-```
+See the dev directory for a minimal example.
 
 ### Auth
 

package/dist/index.d.mts

@@ -0,0 +1,312 @@
+interface MatrixLoc {
+    a: number;
+    b: number;
+    c: number;
+    d: number;
+    e: number;
+    f: number;
+}
+declare class Matrix2D implements MatrixLoc {
+    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 const enum DisplayType {
+    Graph = "Graph",
+    Box = "Box",
+    Rect = "Rect",
+    Text = "Text",
+    Layer = "Layer"
+}
+declare abstract class Display {
+    parent: Display | null;
+    id: number;
+    matrix: Matrix2D;
+    abstract get __instanceOf__(): string;
+    constructor();
+    destory(): void;
+}
+interface LocOptions {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+    skewX: number;
+    skewY: number;
+}
+declare abstract 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 C extends Display {
+    elements: Display[];
+    constructor();
+    abstract get __instanceOf__(): string;
+    add(...elements: Display[]): void;
+    remove(...elements: Display[]): void;
+    destory(): void;
+}
+declare class Box extends C {
+    elements: Display[];
+    constructor();
+    add(...elements: Display[]): void;
+    remove(...elements: Display[]): void;
+    destory(): void;
+    get __instanceOf__(): DisplayType.Box;
+    clone(): Box;
+}
+
+interface RenderViewportOptions {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+    shaow?: boolean;
+}
+declare class Render {
+    private c;
+    options: RenderViewportOptions;
+    constructor(to: Element, options: RenderViewportOptions);
+    clear(width: number, height: number): void;
+    get canvas(): HTMLCanvasElement;
+    get ctx(): CanvasRenderingContext2D;
+    initOptions(userOptions?: Partial<RenderViewportOptions>): void;
+    update(schedule: Schedule): void;
+    destory(): void;
+}
+
+declare class Layer extends C implements S {
+    private c;
+    __refresh__: boolean;
+    options: RenderViewportOptions;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+    skewX: number;
+    skewY: number;
+    constructor(options?: Partial<LocOptions>);
+    get __instanceOf__(): DisplayType.Layer;
+    setCanvasOptions(options?: Partial<RenderViewportOptions>): void;
+    setCacheSnapshot(c: HTMLCanvasElement): void;
+    initLoc(options?: Partial<LocOptions>): void;
+    draw(ctx: CanvasRenderingContext2D): void;
+    get canvas(): HTMLCanvasElement;
+    get ctx(): CanvasRenderingContext2D;
+}
+
+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;
+}
+
+type ApplyTo = string | Element;
+declare class Schedule extends Box {
+    render: Render;
+    to: Element;
+    event: Event;
+    constructor(to: ApplyTo, renderOptions?: Partial<RenderViewportOptions>);
+    update(): void;
+    execute(render: Render, graph?: Display): void;
+}
+
+declare function traverse(graphs: Display[], handler: (graph: S) => void): void;
+declare const etoile: {
+    Schedule: typeof Schedule;
+    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[];
+};
+declare function getNodeDepth(node: NativeModule): number;
+declare function visit<T extends AnyObject>(data: T[], fn: (data: T) => boolean | void): T | null;
+declare function findRelativeNode(c: HTMLCanvasElement, p: {
+    x: number;
+    y: number;
+}, layoutNodes: LayoutModule[]): LayoutModule | null;
+declare function findRelativeNodeById(id: string, layoutNodes: LayoutModule[]): LayoutModule | null;
+
+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;
+    zoom: (id: string) => void;
+}
+declare class TreemapLayout extends etoile.Schedule {
+    data: NativeModule[];
+    layoutNodes: LayoutModule[];
+    decorator: RenderDecorator;
+    private bgLayer;
+    private fgBox;
+    fontsCaches: Record<string, number>;
+    ellispsisWidthCache: Record<string, number>;
+    constructor(...args: ConstructorParameters<typeof etoile.Schedule>);
+    drawBackgroundNode(node: LayoutModule): void;
+    drawForegroundNode(node: LayoutModule): void;
+    reset(refresh?: boolean): void;
+    get api(): {
+        zoom: (node: LayoutModule) => void;
+    };
+    get backgroundLayer(): Layer;
+}
+declare function createTreemap(): App & EventMethods;
+type TreemapInstanceAPI = TreemapLayout['api'];
+
+export { type App, type ColorMappings, type EventMethods, type LayoutModule, type Module, type NativeModule, type PrimitiveEvent, type PrimitiveEventCallback, type PrimitiveEventDefinition, type PrimitiveEventMetadata, type Rect, type RenderColor, type RenderDecorator, type RenderFont, type RenderLayout, type Series, type TreemapInstanceAPI, TreemapLayout, type TreemapOptions, c2m, createTreemap, defaultFontOptions, defaultLayoutOptions, findRelativeNode, findRelativeNodeById, flatten as flattenModule, getNodeDepth, presetDecorator, sortChildrenByKey, visit };

package/dist/index.d.ts

@@ -6,7 +6,7 @@ interface MatrixLoc {
     e: number;
     f: number;
 }
-declare class Matrix2D {
+declare class Matrix2D implements MatrixLoc {
     a: number;
     b: number;
     c: number;
@@ -22,10 +22,18 @@ declare class Matrix2D {
     private roate;
 }
 
-declare class Display {
+declare const enum DisplayType {
+    Graph = "Graph",
+    Box = "Box",
+    Rect = "Rect",
+    Text = "Text",
+    Layer = "Layer"
+}
+declare abstract class Display {
     parent: Display | null;
     id: number;
     matrix: Matrix2D;
+    abstract get __instanceOf__(): string;
     constructor();
     destory(): void;
 }
@@ -40,23 +48,7 @@ interface LocOptions {
     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 {
+declare abstract class S extends Display {
     width: number;
     height: number;
     x: number;
@@ -68,20 +60,65 @@ declare class S extends Display {
     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 {
+declare abstract class C extends Display {
     elements: Display[];
     constructor();
+    abstract get __instanceOf__(): string;
     add(...elements: Display[]): void;
     remove(...elements: Display[]): void;
     destory(): void;
 }
+declare class Box extends C {
+    elements: Display[];
+    constructor();
+    add(...elements: Display[]): void;
+    remove(...elements: Display[]): void;
+    destory(): void;
+    get __instanceOf__(): DisplayType.Box;
+    clone(): Box;
+}
+
+interface RenderViewportOptions {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+    shaow?: boolean;
+}
+declare class Render {
+    private c;
+    options: RenderViewportOptions;
+    constructor(to: Element, options: RenderViewportOptions);
+    clear(width: number, height: number): void;
+    get canvas(): HTMLCanvasElement;
+    get ctx(): CanvasRenderingContext2D;
+    initOptions(userOptions?: Partial<RenderViewportOptions>): void;
+    update(schedule: Schedule): void;
+    destory(): void;
+}
+
+declare class Layer extends C implements S {
+    private c;
+    __refresh__: boolean;
+    options: RenderViewportOptions;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    scaleX: number;
+    scaleY: number;
+    rotation: number;
+    skewX: number;
+    skewY: number;
+    constructor(options?: Partial<LocOptions>);
+    get __instanceOf__(): DisplayType.Layer;
+    setCanvasOptions(options?: Partial<RenderViewportOptions>): void;
+    setCacheSnapshot(c: HTMLCanvasElement): void;
+    initLoc(options?: Partial<LocOptions>): void;
+    draw(ctx: CanvasRenderingContext2D): void;
+    get canvas(): HTMLCanvasElement;
+    get ctx(): CanvasRenderingContext2D;
+}
 
 interface RGBColor {
     r: number;
@@ -123,36 +160,19 @@ declare class Event<EvtDefinition extends DefaultEventDefinition = DefaultEventD
     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 {
+declare class Schedule 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 function traverse(graphs: Display[], handler: (graph: S) => void): void;
 declare const etoile: {
-    Schedule: typeof Schedule$1;
+    Schedule: typeof Schedule;
     traverse: typeof traverse;
 };
 
@@ -269,21 +289,22 @@ interface App {
     use: (using: Using, register: (app: TreemapLayout) => void) => void;
     zoom: (id: string) => void;
 }
-declare class Schedule extends etoile.Schedule {
-}
-declare class TreemapLayout extends Schedule {
+declare class TreemapLayout extends etoile.Schedule {
     data: NativeModule[];
     layoutNodes: LayoutModule[];
     decorator: RenderDecorator;
-    private bgBox;
+    private bgLayer;
     private fgBox;
-    constructor(...args: ConstructorParameters<typeof Schedule>);
+    fontsCaches: Record<string, number>;
+    ellispsisWidthCache: Record<string, number>;
+    constructor(...args: ConstructorParameters<typeof etoile.Schedule>);
     drawBackgroundNode(node: LayoutModule): void;
     drawForegroundNode(node: LayoutModule): void;
-    reset(): void;
+    reset(refresh?: boolean): void;
     get api(): {
         zoom: (node: LayoutModule) => void;
     };
+    get backgroundLayer(): Layer;
 }
 declare function createTreemap(): App & EventMethods;
 type TreemapInstanceAPI = TreemapLayout['api'];