squarified 0.1.2 → 0.2.1

package/README.md

@@ -4,19 +4,53 @@
 
 ![display](./data.gif)
 
-## Usage
+## Install
 
-```ts
-import { createTreemap, presetDecorator } from 'squarified'
+```shell
+$ yarn add squarified
+```
 
-const root = document.querySelector('#app')
+## Usage
 
-const treemap = createTreemap()
-treemap.use('decorator', presetDecorator)
+See the dev directory for a minimal example.
 
-treemap.init(root)
+### API
 
-treemap.setOptions({ data: [] })
+```ts
+// convert data into expected data
+declare function c2m<
+  T extends AnyObject & {
+    groups: any[]
+  },
+  K extends keyof T
+>(data: T, key: K, modifier?: (data: T) => T): T & {
+  weight: number
+}
+
+// preset theme layout (unstable)
+declare function presetDecorator(app: TreemapLayout): void
+
+declare function getNodeDepth(node: NativeModule): number
+
+declare function visit<T extends AnyObject>(data: T[], fn: (data: T) => boolean | void): T | null
+
+declare function findRelativeNode(p: {
+  x: number
+  y: number
+}, layoutNodes: LayoutModule[]): LayoutModule | null
+
+declare function findRelativeNodeById(id: string, layoutNodes: LayoutModule[]): LayoutModule | null
+
+interface App {
+  init: (el: HTMLElement) => void
+  dispose: () => void
+  setOptions: (options: TreemapOptions) => void
+  resize: () => void
+  use: (using: Using, register: (app: TreemapLayout) => void) => void
+  zoom: (id: string) => void
+}
+
+declare function createTreemap(): App
 ```
 
 ### Auth

package/dist/index.d.mts

@@ -6,7 +6,7 @@ interface MatrixLoc {
     e: number;
     f: number;
 }
-declare class Matrix2D {
+declare class Matrix2D implements MatrixLoc {
     a: number;
     b: number;
     c: number;
@@ -26,7 +26,8 @@ declare const enum DisplayType {
     Graph = "Graph",
     Box = "Box",
     Rect = "Rect",
-    Text = "Text"
+    Text = "Text",
+    Layer = "Layer"
 }
 declare abstract class Display {
     parent: Display | null;
@@ -36,12 +37,6 @@ declare abstract class Display {
     constructor();
     destory(): void;
 }
-interface GraphStyleSheet {
-    stroke: string;
-    opacity: number;
-    font: string;
-    lineWidth: number;
-}
 interface LocOptions {
     width: number;
     height: number;
@@ -53,22 +48,6 @@ 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 abstract class S extends Display {
     width: number;
     height: number;
@@ -81,20 +60,16 @@ declare abstract class S extends Display {
     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 {
+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;
@@ -104,6 +79,50 @@ declare class Box extends Display {
     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;
+    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;
+    cleanCacheSnapshot(): {
+        dpr: number;
+        matrix: Matrix2D;
+    };
+    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;
@@ -144,36 +163,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<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
     render: Render;
     to: Element;
-    event: Event;
+    event: Event<D>;
     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;
 };
 
@@ -245,7 +247,7 @@ type NativeModule = ReturnType<typeof bindParentForModule>[number] & {
 };
 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: {
+declare function findRelativeNode(p: {
     x: number;
     y: number;
 }, layoutNodes: LayoutModule[]): LayoutModule | null;
@@ -277,38 +279,56 @@ 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;
 }
+declare const internalEventMappings: {
+    readonly CLEAN_UP: "self:cleanup";
+    readonly ON_LOAD: "self:onload";
+    readonly ON_ZOOM: "zoom";
+};
+type InternalEventType = typeof internalEventMappings[keyof typeof internalEventMappings];
+interface InternalEventMappings {
+    [internalEventMappings.CLEAN_UP]: () => void;
+    [internalEventMappings.ON_LOAD]: (width: number, height: number, root: HTMLElement) => void;
+    [internalEventMappings.ON_ZOOM]: (node: LayoutModule) => void;
+}
+type InternalEventDefinition = {
+    [key in InternalEventType]: InternalEventMappings[key];
+};
 
 interface TreemapOptions {
     data: Module[];
 }
 type Using = 'decorator';
 interface App {
-    init: (el: Element) => void;
+    init: (el: HTMLElement) => 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 {
+/**
+ * This interface isn't stable it might be remove at next few versions.
+ * If you want set custom decorator pls see 'presetDecorator' for details.
+ */
+type unstable_use = (app: TreemapLayout) => void;
+declare class TreemapLayout extends etoile.Schedule<InternalEventDefinition> {
     data: NativeModule[];
     layoutNodes: LayoutModule[];
     decorator: RenderDecorator;
-    private bgBox;
+    private bgLayer;
     private fgBox;
     fontsCaches: Record<string, number>;
     ellispsisWidthCache: Record<string, number>;
-    constructor(...args: ConstructorParameters<typeof Schedule>);
+    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'];
 
-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 };
+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, type unstable_use, 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;
@@ -26,7 +26,8 @@ declare const enum DisplayType {
     Graph = "Graph",
     Box = "Box",
     Rect = "Rect",
-    Text = "Text"
+    Text = "Text",
+    Layer = "Layer"
 }
 declare abstract class Display {
     parent: Display | null;
@@ -36,12 +37,6 @@ declare abstract class Display {
     constructor();
     destory(): void;
 }
-interface GraphStyleSheet {
-    stroke: string;
-    opacity: number;
-    font: string;
-    lineWidth: number;
-}
 interface LocOptions {
     width: number;
     height: number;
@@ -53,22 +48,6 @@ 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 abstract class S extends Display {
     width: number;
     height: number;
@@ -81,20 +60,16 @@ declare abstract class S extends Display {
     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 {
+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;
@@ -104,6 +79,50 @@ declare class Box extends Display {
     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;
+    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;
+    cleanCacheSnapshot(): {
+        dpr: number;
+        matrix: Matrix2D;
+    };
+    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;
@@ -144,36 +163,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<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
     render: Render;
     to: Element;
-    event: Event;
+    event: Event<D>;
     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;
 };
 
@@ -245,7 +247,7 @@ type NativeModule = ReturnType<typeof bindParentForModule>[number] & {
 };
 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: {
+declare function findRelativeNode(p: {
     x: number;
     y: number;
 }, layoutNodes: LayoutModule[]): LayoutModule | null;
@@ -277,38 +279,56 @@ 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;
 }
+declare const internalEventMappings: {
+    readonly CLEAN_UP: "self:cleanup";
+    readonly ON_LOAD: "self:onload";
+    readonly ON_ZOOM: "zoom";
+};
+type InternalEventType = typeof internalEventMappings[keyof typeof internalEventMappings];
+interface InternalEventMappings {
+    [internalEventMappings.CLEAN_UP]: () => void;
+    [internalEventMappings.ON_LOAD]: (width: number, height: number, root: HTMLElement) => void;
+    [internalEventMappings.ON_ZOOM]: (node: LayoutModule) => void;
+}
+type InternalEventDefinition = {
+    [key in InternalEventType]: InternalEventMappings[key];
+};
 
 interface TreemapOptions {
     data: Module[];
 }
 type Using = 'decorator';
 interface App {
-    init: (el: Element) => void;
+    init: (el: HTMLElement) => 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 {
+/**
+ * This interface isn't stable it might be remove at next few versions.
+ * If you want set custom decorator pls see 'presetDecorator' for details.
+ */
+type unstable_use = (app: TreemapLayout) => void;
+declare class TreemapLayout extends etoile.Schedule<InternalEventDefinition> {
     data: NativeModule[];
     layoutNodes: LayoutModule[];
     decorator: RenderDecorator;
-    private bgBox;
+    private bgLayer;
     private fgBox;
     fontsCaches: Record<string, number>;
     ellispsisWidthCache: Record<string, number>;
-    constructor(...args: ConstructorParameters<typeof Schedule>);
+    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'];
 
-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 };
+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, type unstable_use, visit };