squarified 0.1.0 → 0.1.2

package/dist/index.d.mts

@@ -0,0 +1,314 @@
+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 const enum DisplayType {
+    Graph = "Graph",
+    Box = "Box",
+    Rect = "Rect",
+    Text = "Text"
+}
+declare abstract class Display {
+    parent: Display | null;
+    id: number;
+    matrix: Matrix2D;
+    abstract get __instanceOf__(): string;
+    constructor();
+    destory(): void;
+}
+interface GraphStyleSheet {
+    stroke: string;
+    opacity: number;
+    font: string;
+    lineWidth: number;
+}
+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 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 Graph extends S {
+    instruction: ReturnType<typeof createInstruction>;
+    __refresh__: boolean;
+    __options__: Partial<LocOptions>;
+    abstract style: GraphStyleSheet;
+    constructor(options?: Partial<GraphOptions>);
+    abstract create(): void;
+    abstract clone(): Graph;
+    abstract get __shape__(): string;
+    render(ctx: CanvasRenderingContext2D): void;
+    get __instanceOf__(): DisplayType.Graph;
+}
+
+declare class Box extends Display {
+    elements: Display[];
+    constructor();
+    add(...elements: Display[]): void;
+    remove(...elements: Display[]): void;
+    destory(): void;
+    get __instanceOf__(): DisplayType.Box;
+    clone(): Box;
+}
+
+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[];
+};
+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 Schedule extends etoile.Schedule {
+}
+declare class TreemapLayout extends Schedule {
+    data: NativeModule[];
+    layoutNodes: LayoutModule[];
+    decorator: RenderDecorator;
+    private bgBox;
+    private fgBox;
+    fontsCaches: Record<string, number>;
+    ellispsisWidthCache: Record<string, number>;
+    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 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

@@ -22,13 +22,26 @@ declare class Matrix2D {
     private roate;
 }
 
-declare class Display {
+declare const enum DisplayType {
+    Graph = "Graph",
+    Box = "Box",
+    Rect = "Rect",
+    Text = "Text"
+}
+declare abstract class Display {
     parent: Display | null;
     id: number;
     matrix: Matrix2D;
+    abstract get __instanceOf__(): string;
     constructor();
     destory(): void;
 }
+interface GraphStyleSheet {
+    stroke: string;
+    opacity: number;
+    font: string;
+    lineWidth: number;
+}
 interface LocOptions {
     width: number;
     height: number;
@@ -56,7 +69,7 @@ interface Instruction {
     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;
@@ -70,9 +83,15 @@ declare class S extends Display {
 }
 declare abstract class Graph extends S {
     instruction: ReturnType<typeof createInstruction>;
+    __refresh__: boolean;
+    __options__: Partial<LocOptions>;
+    abstract style: GraphStyleSheet;
     constructor(options?: Partial<GraphOptions>);
     abstract create(): void;
+    abstract clone(): Graph;
+    abstract get __shape__(): string;
     render(ctx: CanvasRenderingContext2D): void;
+    get __instanceOf__(): DisplayType.Graph;
 }
 
 declare class Box extends Display {
@@ -81,6 +100,8 @@ declare class Box extends Display {
     add(...elements: Display[]): void;
     remove(...elements: Display[]): void;
     destory(): void;
+    get __instanceOf__(): DisplayType.Box;
+    clone(): Box;
 }
 
 interface RGBColor {
@@ -222,6 +243,13 @@ type NativeModule = ReturnType<typeof bindParentForModule>[number] & {
     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;
@@ -260,6 +288,7 @@ interface App {
     setOptions: (options: TreemapOptions) => void;
     resize: () => void;
     use: (using: Using, register: (app: TreemapLayout) => void) => void;
+    zoom: (id: string) => void;
 }
 declare class Schedule extends etoile.Schedule {
 }
@@ -269,6 +298,8 @@ declare class TreemapLayout extends Schedule {
     decorator: RenderDecorator;
     private bgBox;
     private fgBox;
+    fontsCaches: Record<string, number>;
+    ellispsisWidthCache: Record<string, number>;
     constructor(...args: ConstructorParameters<typeof Schedule>);
     drawBackgroundNode(node: LayoutModule): void;
     drawForegroundNode(node: LayoutModule): void;
@@ -280,4 +311,4 @@ declare class TreemapLayout extends Schedule {
 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 };
+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 };