squarified 0.1.2 → 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

@@ -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,47 @@ 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;
+    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;
@@ -144,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;
 };
 
@@ -290,23 +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;
     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'];

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,47 @@ 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;
+    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;
@@ -144,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;
 };
 
@@ -290,23 +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;
     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'];