feat: make type happy

dev/main.ts

@@ -2,7 +2,7 @@ import { c2m, createTreemap, presetDecorator, sortChildrenByKey } from '../src'
 
 import './live-reload'
 
-const root = document.querySelector('#app')!
+const root = document.querySelector<HTMLDivElement>('#app')!
 const treemap = createTreemap()
 treemap.use('decorator', presetDecorator)
 

src/etoile/graph/display.ts

@@ -60,19 +60,28 @@ export interface LocOptions {
 export interface GraphOptions extends LocOptions {
 }
 
-type Mod = [string, ...any[]]
+export interface InstructionAssignMappings {
+  fillStyle: (arg: string) => void
+  strokeStyle: (arg: string) => void
+  font: (arg: string) => void
+  lineWidth: (arg: number) => void
+  textAlign: (arg: CanvasTextAlign) => void
+  textBaseline: (arg: CanvasTextBaseline) => void
+}
+
+export interface InstructionWithFunctionCall {
+  fillRect: (x: number, y: number, w: number, h: number) => void
+  strokeRect: (x: number, y: number, w: number, h: number) => void
+  fillText: (text: string, x: number, y: number, maxWidth?: number) => void
+}
+
+type Mod<
+  T extends InstructionAssignMappings & InstructionWithFunctionCall = InstructionAssignMappings & InstructionWithFunctionCall,
+  K extends keyof T = keyof T
+> = T[K] extends (...args: any) => any ? [K, Parameters<T[K]>] : never
 
-interface Instruction {
+interface Instruction extends InstructionAssignMappings, InstructionWithFunctionCall {
   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
 }
 
 const ASSIGN_MAPPINGS = {
@@ -87,19 +96,19 @@ const ASSIGN_MAPPINGS = {
 function createInstruction() {
   return <Instruction> {
     mods: [],
-    fillStyle(...args: any[]) {
+    fillStyle(...args) {
       this.mods.push(['fillStyle', args])
     },
-    fillRect(...args: any[]) {
+    fillRect(...args) {
       this.mods.push(['fillRect', args])
     },
-    strokeStyle(...args: any[]) {
+    strokeStyle(...args) {
       this.mods.push(['strokeStyle', args])
     },
-    lineWidth(...args: any[]) {
+    lineWidth(...args) {
       this.mods.push(['lineWidth', args])
     },
-    strokeRect(...args: any[]) {
+    strokeRect(...args) {
       this.mods.push(['strokeRect', args])
     },
     fillText(...args) {

src/etoile/schedule/index.ts

@@ -2,6 +2,7 @@ import { applyCanvasTransform } from '../../shared'
 import { Box, asserts } from '../graph'
 import { Display } from '../graph/display'
 import { Event } from '../native/event'
+import type { DefaultEventDefinition } from '../native/event'
 import { log } from '../native/log'
 import { Render } from './render'
 
@@ -46,10 +47,10 @@ export function drawGraphIntoCanvas(
   ctx.restore()
 }
 
-export class Schedule extends Box {
+export class Schedule<D extends DefaultEventDefinition = DefaultEventDefinition> extends Box {
   render: Render
   to: Element
-  event: Event
+  event: Event<D>
   constructor(to: ApplyTo, renderOptions: Partial<RenderViewportOptions> = {}) {
     super()
     this.to = typeof to === 'string' ? document.querySelector(to)! : to
@@ -63,7 +64,8 @@ export class Schedule extends Box {
   }
 
   update() {
-    this.render.update(this)
+    this.render.clear(this.render.options.width, this.render.options.height)
+    this.execute(this.render, this)
     const matrix = this.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })
     applyCanvasTransform(this.render.ctx, matrix, this.render.options.devicePixelRatio)
   }

src/etoile/schedule/render.ts

@@ -1,5 +1,4 @@
 import { createCanvasElement } from '../../shared'
-import { Schedule } from '../schedule'
 
 export function writeBoundingRectForCanvas(c: HTMLCanvasElement, w: number, h: number, dpr: number) {
   c.width = w * dpr
@@ -55,11 +54,6 @@ export class Render {
     writeBoundingRectForCanvas(this.canvas, this.options.width, this.options.height, this.options.devicePixelRatio)
   }
 
-  update(schedule: Schedule) {
-    this.clear(this.options.width, this.options.height)
-    schedule.execute(this)
-  }
-
   destory() {
   }
 }

src/index.ts

@@ -1,5 +1,5 @@
 export { createTreemap } from './primitives/component'
-export type { App, TreemapInstanceAPI, TreemapOptions } from './primitives/component'
+export type { App, TreemapInstanceAPI, TreemapOptions, unstable_use } from './primitives/component'
 export { TreemapLayout } from './primitives/component'
 export * from './primitives/decorator'
 export type {

src/primitives/component.ts

@@ -1,11 +1,11 @@
 import { createFillBlock, createTitleText } from '../shared'
 import { Box, Layer, etoile } from '../etoile'
-import type { EventMethods } from './event'
+import type { EventMethods, InternalEventDefinition } from './event'
 import { bindParentForModule, findRelativeNodeById } from './struct'
 import type { Module, NativeModule } from './struct'
 import { squarify } from './squarify'
 import type { LayoutModule } from './squarify'
-import { SelfEvent } from './event'
+import { SelfEvent, internalEventMappings } from './event'
 import { registerModuleForSchedule } from './registry'
 import type { RenderDecorator, Series } from './decorator'
 
@@ -16,7 +16,7 @@ export interface TreemapOptions {
 export type Using = 'decorator'
 
 export interface App {
-  init: (el: Element) => void
+  init: (el: HTMLElement) => void
   dispose: () => void
   setOptions: (options: TreemapOptions) => void
   resize: () => void
@@ -38,6 +38,13 @@ interface OptimalFontOptions {
   family: string
 }
 
+/**
+ * This interface isn't stable it might be remove at next few versions.
+ * If you want set custom decorator pls see 'presetDecorator' for details.
+ */
+// eslint-disable-next-line no-use-before-define
+export type unstable_use = (app: TreemapLayout) => void
+
 export function evaluateOptimalFontSize(
   c: CanvasRenderingContext2D,
   text: string,
@@ -97,7 +104,7 @@ export function resetLayout(treemap: TreemapLayout, w: number, h: number) {
   treemap.reset(true)
 }
 
-export class TreemapLayout extends etoile.Schedule {
+export class TreemapLayout extends etoile.Schedule<InternalEventDefinition> {
   data: NativeModule[]
   layoutNodes: LayoutModule[]
   decorator: RenderDecorator
@@ -186,7 +193,7 @@ export class TreemapLayout extends etoile.Schedule {
   get api() {
     return {
       zoom: (node: LayoutModule) => {
-        this.event.emit('zoom', node)
+        this.event.emit(internalEventMappings.ON_ZOOM, node)
       }
     }
   }
@@ -198,9 +205,9 @@ export class TreemapLayout extends etoile.Schedule {
 
 export function createTreemap() {
   let treemap: TreemapLayout | null = null
-  let root: Element | null = null
+  let root: HTMLElement | null = null
   let installed = false
-  const uses: any[] = []
+  const uses: unstable_use[] = []
 
   const context = {
     init,
@@ -211,7 +218,7 @@ export function createTreemap() {
     zoom
   }
 
-  function init(el: Element) {
+  function init(el: HTMLElement) {
     treemap = new TreemapLayout(el)
     root = el
     ;(root as HTMLDivElement).style.position = 'relative'
@@ -242,8 +249,8 @@ export function createTreemap() {
     treemap.backgroundLayer.initLoc()
     treemap.backgroundLayer.matrix = treemap.backgroundLayer.matrix.create({ a: 1, b: 0, c: 0, d: 1, e: 0, f: 0 })
     treemap.fontsCaches = Object.create(null)
-    treemap.event.emit('cleanup:selfevent')
-    treemap.event.emit('onload:selfevent', { width, height, root })
+    treemap.event.emit(internalEventMappings.CLEAN_UP)
+    treemap.event.emit(internalEventMappings.ON_LOAD, width, height, root)
     resetLayout(treemap, width, height)
     treemap.update()
   }

src/primitives/event.ts

@@ -60,6 +60,24 @@ interface DraggingState {
   y: number
 }
 
+export const internalEventMappings = {
+  CLEAN_UP: 'self:cleanup',
+  ON_LOAD: 'self:onload',
+  ON_ZOOM: 'zoom'
+} as const
+
+export type InternalEventType = typeof internalEventMappings[keyof typeof internalEventMappings]
+
+export interface InternalEventMappings {
+  [internalEventMappings.CLEAN_UP]: () => void
+  [internalEventMappings.ON_LOAD]: (width: number, height: number, root: HTMLElement) => void
+  [internalEventMappings.ON_ZOOM]: (node: LayoutModule) => void
+}
+
+export type InternalEventDefinition = {
+  [key in InternalEventType]: InternalEventMappings[key]
+}
+
 const fill = <ColorDecoratorResultRGB> { desc: { r: 255, g: 255, b: 255 }, mode: 'rgb' }
 
 function smoothDrawing(c: SelfEventContenxt) {
@@ -95,7 +113,7 @@ function smoothDrawing(c: SelfEventContenxt) {
 }
 
 function applyZoomEvent(ctx: SelfEventContenxt) {
-  ctx.treemap.event.on('zoom', (node: LayoutModule) => {
+  ctx.treemap.event.on(internalEventMappings.ON_ZOOM, (node: LayoutModule) => {
     const root: LayoutModule | null = null
     if (ctx.self.isDragging) return
     onZoom(ctx, node, root)
@@ -153,7 +171,7 @@ function bindPrimitiveEvent(
 
     const event = <PrimitiveEventMetadata<PrimitiveEvent>> {
       native: e,
-      module: findRelativeNode(c, { x, y }, treemap.layoutNodes)
+      module: findRelativeNode({ x, y }, treemap.layoutNodes)
     }
     // @ts-expect-error
     bus.emit(evt, event)
@@ -218,7 +236,7 @@ export class SelfEvent extends RegisterModule {
     this.self.highlight.setDisplayLayerForHighlight()
     // @ts-expect-error
     this.self.event.off('mousemove', this.self.onmousemove)
-    this.treemap.event.off('zoom')
+    this.treemap.event.off(internalEventMappings.ON_ZOOM)
     this.self.forceDestroy = true
     const { native } = metadata
     const x = native.offsetX
@@ -332,7 +350,7 @@ export class SelfEvent extends RegisterModule {
 
     let installHightlightEvent = false
 
-    treemap.event.on('onload:selfevent', ({ width, height, root }) => {
+    treemap.event.on(internalEventMappings.ON_LOAD, (width, height, root) => {
       this.highlight.init(width, height, root)
 
       if (!installHightlightEvent) {
@@ -347,7 +365,7 @@ export class SelfEvent extends RegisterModule {
       this.highlight.reset()
     })
 
-    treemap.event.on('cleanup:selfevent', () => {
+    treemap.event.on(internalEventMappings.CLEAN_UP, () => {
       this.currentNode = null
       this.scaleRatio = 1
       this.translateX = 0

src/primitives/struct.ts

@@ -87,7 +87,7 @@ export function visit<T extends AnyObject>(data: T[], fn: (data: T) => boolean |
   return null
 }
 
-export function findRelativeNode(c: HTMLCanvasElement, p: { x: number; y: number }, layoutNodes: LayoutModule[]) {
+export function findRelativeNode(p: { x: number; y: number }, layoutNodes: LayoutModule[]) {
   return visit(layoutNodes, (node) => {
     const [x, y, w, h] = node.layout
     if (p.x >= x && p.y >= y && p.x < x + w && p.y < y + h) {