squarified 0.2.2 → 0.3.2

package/README.md

@@ -1,6 +1,6 @@
 # Squarified
 
-`squarified treemap` is a mini treemap component.
+`squarified` is a mini treemap component.
 
 ![display](./data.gif)
 
@@ -35,7 +35,7 @@ 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
+  x: number,
   y: number
 }, layoutNodes: LayoutModule[]): LayoutModule | null
 

package/dist/index.d.mts

@@ -16,8 +16,8 @@ declare class Matrix2D implements MatrixLoc {
     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;
+    translation(x: number, y: number): this;
+    scale(a: number, d: number): this;
     private skew;
     private roate;
 }
@@ -25,46 +25,23 @@ declare class Matrix2D implements MatrixLoc {
 declare const enum DisplayType {
     Graph = "Graph",
     Box = "Box",
-    Rect = "Rect",
     Text = "Text",
-    Layer = "Layer"
+    RoundRect = "RoundRect",
+    Bitmap = "Bitmap"
 }
 declare abstract class Display {
     parent: Display | null;
     id: number;
     matrix: Matrix2D;
-    abstract get __instanceOf__(): string;
+    abstract get __instanceOf__(): DisplayType;
     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;
+    abstract get __instanceOf__(): DisplayType;
     add(...elements: Display[]): void;
     remove(...elements: Display[]): void;
     destory(): void;
@@ -79,50 +56,6 @@ declare class Box extends C {
     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;
@@ -145,13 +78,14 @@ interface ColorDecoratorResultRGB {
 }
 type ColorDecoratorResult = ColorDecoratorResultHLS | ColorDecoratorResultRGB;
 
-type EventCallback<P = any[]> = P extends any[] ? (...args: P) => any : never;
+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;
+    silent: boolean;
 }
 type EventCollections<EvtDefinition extends DefaultEventDefinition> = Record<keyof EvtDefinition, EventCollectionData<EvtDefinition>[]>;
 declare class Event<EvtDefinition extends DefaultEventDefinition = DefaultEventDefinition> {
@@ -159,26 +93,85 @@ declare class Event<EvtDefinition extends DefaultEventDefinition = DefaultEventD
     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;
+    silent(evt: keyof EvtDefinition, handler?: BindThisParameter<EvtDefinition[keyof EvtDefinition], unknown>): void;
+    active(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;
+interface RenderViewportOptions {
+    width: number;
+    height: number;
+    devicePixelRatio: number;
+    shaow?: boolean;
+}
+declare class Canvas {
+    canvas: HTMLCanvasElement;
+    ctx: CanvasRenderingContext2D;
+    constructor(options: RenderViewportOptions);
+    setOptions(options: RenderViewportOptions): void;
+}
+declare class Render {
+    options: RenderViewportOptions;
+    private container;
+    constructor(to: HTMLElement, options: RenderViewportOptions);
+    clear(width: number, height: number): void;
+    get canvas(): HTMLCanvasElement;
+    get ctx(): CanvasRenderingContext2D;
+    initOptions(userOptions?: Partial<RenderViewportOptions>): void;
+    destory(): void;
+}
+
+type ApplyTo = string | HTMLElement;
 declare class Schedule<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
     render: Render;
-    to: Element;
+    to: HTMLElement;
     event: Event<D>;
     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;
+declare const DOM_EVENTS: readonly ["click", "mousedown", "mousemove", "mouseup", "mouseover", "mouseout", "wheel"];
+type DOMEventType = typeof DOM_EVENTS[number];
+interface DOMLoc {
+    x: number;
+    y: number;
+}
+interface DOMEventMetadata<T extends keyof HTMLElementEventMap = Any> {
+    native: HTMLElementEventMap[T];
+    loc: DOMLoc;
+}
+type DOMEventCallback<T extends DOMEventType> = (metadata: DOMEventMetadata<T>) => void;
+type DOMEventDefinition<API = unknown> = {
+    [K in DOMEventType]: BindThisParameter<DOMEventCallback<K>, API>;
 };
 
+declare abstract class Cache {
+    abstract key: string;
+    abstract get state(): boolean;
+    abstract flush(...args: never): void;
+    abstract destroy(): void;
+}
+declare class RenderCache extends Canvas implements Cache {
+    key: string;
+    private $memory;
+    constructor(opts: RenderViewportOptions);
+    get state(): boolean;
+    flush(treemap: TreemapLayout, matrix?: Matrix2D): void;
+    destroy(): void;
+}
+declare class FontCache implements Cache {
+    key: string;
+    private fonts;
+    ellispsis: Record<string, number>;
+    constructor();
+    get state(): boolean;
+    flush(treemap: TreemapLayout, matrix?: Matrix2D): void;
+    destroy(): void;
+    queryFontById(id: string, byDefault: () => number): number;
+}
+
 type ColorMappings = Record<string, ColorDecoratorResult>;
 type Rect = {
     w: number;
@@ -226,10 +219,10 @@ declare const defaultFontOptions: {
 };
 declare function presetDecorator(app: TreemapLayout): void;
 
-type AnyObject = Record<keyof any, any>;
+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[];
+    groups: Any[];
 }, K extends keyof T>(data: T, key: K, modifier?: (data: T) => T): T & {
     weight: number;
 };
@@ -265,30 +258,26 @@ type LayoutModule = {
     };
 };
 
-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;
+    module: LayoutModule | null;
 }
-type PrimitiveEventCallback<T extends PrimitiveEvent> = (metadata: PrimitiveEventMetadata<T>) => void;
-type PrimitiveEventDefinition = {
-    [key in PrimitiveEvent]: BindThisParameter<PrimitiveEventCallback<key>, TreemapInstanceAPI>;
+type ExposedEventCallback<T extends DOMEventType> = (metadata: PrimitiveEventMetadata<T>) => void;
+type ExposedEventDefinition = {
+    [K in DOMEventType]: BindThisParameter<ExposedEventCallback<K>, TreemapInstanceAPI>;
 };
-interface EventMethods<C = TreemapInstanceAPI, D = PrimitiveEventDefinition> {
+interface ExposedEventMethods<C = TreemapInstanceAPI, D = ExposedEventDefinition> {
     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";
+declare const INTERNAL_EVENT_MAPPINGS: {
+    readonly ON_ZOOM: 1;
+    readonly ON_CLEANUP: 3;
 };
-type InternalEventType = typeof internalEventMappings[keyof typeof internalEventMappings];
+type InternalEventType = typeof INTERNAL_EVENT_MAPPINGS[keyof typeof INTERNAL_EVENT_MAPPINGS];
 interface InternalEventMappings {
-    [internalEventMappings.CLEAN_UP]: () => void;
-    [internalEventMappings.ON_LOAD]: (width: number, height: number, root: HTMLElement) => void;
-    [internalEventMappings.ON_ZOOM]: (node: LayoutModule) => void;
+    [INTERNAL_EVENT_MAPPINGS.ON_ZOOM]: (node: LayoutModule) => void;
+    [INTERNAL_EVENT_MAPPINGS.ON_CLEANUP]: () => void;
 }
 type InternalEventDefinition = {
     [key in InternalEventType]: InternalEventMappings[key];
@@ -297,13 +286,13 @@ type InternalEventDefinition = {
 interface TreemapOptions {
     data: Module[];
 }
-type Using = 'decorator';
+type UseKind = 'decorator';
 interface App {
     init: (el: HTMLElement) => void;
     dispose: () => void;
     setOptions: (options: TreemapOptions) => void;
     resize: () => void;
-    use: (using: Using, register: (app: TreemapLayout) => void) => void;
+    use: (using: UseKind, register: (app: TreemapLayout) => void) => void;
     zoom: (id: string) => void;
 }
 /**
@@ -311,24 +300,47 @@ interface App {
  * If you want set custom decorator pls see 'presetDecorator' for details.
  */
 type unstable_use = (app: TreemapLayout) => void;
-declare class TreemapLayout extends etoile.Schedule<InternalEventDefinition> {
+declare class Highlight extends Schedule<DOMEventDefinition> {
+    reset(): void;
+    get canvas(): HTMLCanvasElement;
+    setZIndexForHighlight(zIndex?: string): void;
+    init(): void;
+}
+declare class TreemapLayout extends Schedule<InternalEventDefinition> {
     data: NativeModule[];
     layoutNodes: LayoutModule[];
     decorator: RenderDecorator;
-    private bgLayer;
-    private fgBox;
-    fontsCaches: Record<string, number>;
-    ellispsisWidthCache: Record<string, number>;
-    constructor(...args: ConstructorParameters<typeof etoile.Schedule>);
+    bgBox: Box;
+    fgBox: Box;
+    highlight: Highlight;
+    renderCache: RenderCache;
+    fontCache: FontCache;
+    constructor(...args: ConstructorParameters<typeof Schedule>);
     drawBackgroundNode(node: LayoutModule): void;
     drawForegroundNode(node: LayoutModule): void;
     reset(refresh?: boolean): void;
     get api(): {
-        zoom: (node: LayoutModule) => void;
+        zoom: (node: LayoutModule | null) => void;
     };
-    get backgroundLayer(): Layer;
 }
-declare function createTreemap(): App & EventMethods;
+declare function createTreemap(): App & ExposedEventMethods;
 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, type unstable_use, visit };
+/**
+ * @deprecated compat `PrimitiveEvent` using `DOMEventType` replace it. (will be removed in the next three versions.)
+ */
+type PrimitiveEvent = DOMEventType;
+/**
+ * @deprecated compat `EventMethods` using `ExposedEventMethods` replace it. (will be removed in the next three versions.)
+ */
+type EventMethods = ExposedEventMethods;
+/**
+ * @deprecated compat `PrimitiveEventCallback` using `ExposedEventCallback` replace it. (will be removed in the next three versions.)
+ */
+type PrimitiveEventCallback<T extends PrimitiveEvent> = ExposedEventCallback<T>;
+/**
+ * @deprecated compat `PrimitiveEventDefinition` using `ExposedEventDefinition` replace it. (will be removed in the next three versions.)
+ */
+type PrimitiveEventDefinition = ExposedEventDefinition;
+
+export { type App, type ColorMappings, type DOMEventType, type EventMethods, type ExposedEventCallback, type ExposedEventDefinition, type ExposedEventMethods, 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 };