Squashed commit of the following:

commit 49ceb0dfc100c3885800a531ec5b777a5063653a
Author: kanno <[email protected]>
Date:   Tue Dec 10 15:19:40 2024 +0800

    light event

    feat: init trackpad logic

    chore: remove cache

    chore: remove unused

    type change

    try add cache

    clean code

commit c6947c0
Author: kanno <[email protected]>
Date:   Tue Dec 10 09:56:52 2024 +0800

    round

src/etoile/etoile.ts

@@ -6,13 +6,9 @@ function traverse(graphs: Display[], handler: (graph: S) => void) {
   const len = graphs.length
   for (let i = 0; i < len; i++) {
     const graph = graphs[i]
-    if (asserts.isLayer(graph) && graph.__refresh__) {
-      handler(graph)
-      continue
-    }
     if (asserts.isGraph(graph)) {
       handler(graph)
-    } else if (asserts.isBox(graph) || asserts.isLayer(graph)) {
+    } else if (asserts.isBox(graph)) {
       traverse(graph.elements, handler)
     }
   }

src/etoile/graph/display.ts

@@ -11,14 +11,10 @@ const SELF_ID = {
 
 export const enum DisplayType {
   Graph = 'Graph',
-
   Box = 'Box',
-
-  Rect = 'Rect',
-
   Text = 'Text',
-
-  Layer = 'Layer'
+  RoundRect = 'RoundRect',
+  Bitmap = 'Bitmap'
 }
 
 export abstract class Display {
@@ -69,10 +65,16 @@ export interface InstructionAssignMappings {
   textBaseline: (arg: CanvasTextBaseline) => void
 }
 
-export interface InstructionWithFunctionCall {
+export interface InstructionWithFunctionCall extends CanvasDrawImage {
   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
+  beginPath: () => void
+  moveTo: (x: number, y: number) => void
+  arcTo: (x1: number, y1: number, x2: number, y2: number, radius: number) => void
+  closePath: () => void
+  fill: () => void
+  stroke: () => void
 }
 
 type Mod<
@@ -128,6 +130,29 @@ function createInstruction() {
     },
     textAlign(...args) {
       this.mods.push({ mod: ['textAlign', args], type: ASSIGN_MAPPINGS.textAlign })
+    },
+    beginPath() {
+      this.mods.push({ mod: ['beginPath', []], type: CALL_MAPPINGS_MODE })
+    },
+    moveTo(...args) {
+      this.mods.push({ mod: ['moveTo', args], type: CALL_MAPPINGS_MODE })
+    },
+    arcTo(...args) {
+      this.mods.push({ mod: ['arcTo', args], type: CALL_MAPPINGS_MODE })
+    },
+    closePath() {
+      this.mods.push({ mod: ['closePath', []], type: CALL_MAPPINGS_MODE })
+    },
+    fill() {
+      this.mods.push({ mod: ['fill', []], type: CALL_MAPPINGS_MODE })
+    },
+    stroke() {
+      this.mods.push({ mod: ['stroke', []], type: CALL_MAPPINGS_MODE })
+    },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    drawImage(this: Instruction, ...args: any[]) {
+      // @ts-expect-error safe
+      this.mods.push({ mod: ['drawImage', args], type: CALL_MAPPINGS_MODE })
     }
   }
 }
@@ -142,6 +167,7 @@ export abstract class S extends Display {
   rotation: number
   skewX: number
   skewY: number
+
   constructor(options: Partial<LocOptions> = {}) {
     super()
     this.width = options.width || 0
@@ -156,6 +182,8 @@ export abstract class S extends Display {
   }
 }
 
+// For performance. we need impl AABB Check for render.
+
 export abstract class Graph extends S {
   instruction: ReturnType<typeof createInstruction>
   __options__: Partial<LocOptions>

src/etoile/graph/image.ts

@@ -0,0 +1,36 @@
+import { DisplayType, Graph } from './display'
+import type { GraphOptions, GraphStyleSheet } from './display'
+
+export interface BitmapOptions extends Omit<GraphOptions, 'style'> {
+  style: Partial<
+    GraphStyleSheet & {
+      font: string,
+      textAlign: CanvasTextAlign,
+      baseline: CanvasTextBaseline,
+      lineWidth: number,
+      fill: string
+    }
+  >
+  bitmap: HTMLCanvasElement
+}
+
+export class Bitmap extends Graph {
+  bitmap: HTMLCanvasElement | null
+  style: Required<BitmapOptions['style']>
+  constructor(options: Partial<BitmapOptions> = {}) {
+    super(options)
+    this.bitmap = options.bitmap || null
+    this.style = (options.style || Object.create(null)) as Required<BitmapOptions['style']>
+  }
+  create() {
+    if (this.bitmap) {
+      this.instruction.drawImage(this.bitmap, 0, 0)
+    }
+  }
+  clone() {
+    return new Bitmap({ ...this.style, ...this.__options__ })
+  }
+  get __shape__() {
+    return DisplayType.Bitmap
+  }
+}

src/etoile/graph/index.ts

@@ -1,5 +1,5 @@
 export { Box } from './box'
-export { Layer } from './layer'
-export { Rect } from './rect'
+export { Bitmap } from './image'
+export { RoundRect } from './rect'
 export { Text } from './text'
 export * from './types'

src/etoile/graph/rect.ts

@@ -3,35 +3,54 @@ import type { ColorDecoratorResult } from '../native/runtime'
 import { DisplayType, Graph } from './display'
 import type { GraphOptions, GraphStyleSheet } from './display'
 
-export type RectStyleOptions = GraphStyleSheet & { fill: ColorDecoratorResult }
+export type RectStyleOptions = GraphStyleSheet & { fill: ColorDecoratorResult, padding?: number }
 
 export type RectOptions = GraphOptions & { style: Partial<RectStyleOptions> }
-export class Rect extends Graph {
-  style: Required<RectStyleOptions>
-  constructor(options: Partial<RectOptions> = {}) {
+
+export type RoundRectStyleOptions = RectStyleOptions & { radius: number }
+
+export type RoundRectOptions = RectOptions & { style: Partial<RoundRectStyleOptions> }
+
+export class RoundRect extends Graph {
+  style: Required<RoundRectStyleOptions>
+  constructor(options: Partial<RoundRectOptions> = {}) {
     super(options)
-    this.style = (options.style || Object.create(null)) as Required<RectStyleOptions>
+    this.style = (options.style || Object.create(null)) as Required<RoundRectStyleOptions>
   }
 
   get __shape__() {
-    return DisplayType.Rect
+    return DisplayType.RoundRect
   }
 
   create() {
+    const padding = this.style.padding
+    const x = 0
+    const y = 0
+    const width = this.width - padding * 2
+    const height = this.height - padding * 2
+    const radius = this.style.radius || 0
+    this.instruction.beginPath()
+    this.instruction.moveTo(x + radius, y)
+    this.instruction.arcTo(x + width, y, x + width, y + height, radius)
+    this.instruction.arcTo(x + width, y + height, x, y + height, radius)
+    this.instruction.arcTo(x, y + height, x, y, radius)
+    this.instruction.arcTo(x, y, x + width, y, radius)
+    this.instruction.closePath()
     if (this.style.fill) {
+      this.instruction.closePath()
       this.instruction.fillStyle(runtime.evaluateFillStyle(this.style.fill, this.style.opacity))
-      this.instruction.fillRect(0, 0, this.width, this.height)
+      this.instruction.fill()
     }
     if (this.style.stroke) {
-      this.instruction.strokeStyle(this.style.stroke)
       if (typeof this.style.lineWidth === 'number') {
         this.instruction.lineWidth(this.style.lineWidth)
       }
-      this.instruction.strokeRect(0, 0, this.width, this.height)
+      this.instruction.strokeStyle(this.style.stroke)
+      this.instruction.stroke()
     }
   }
 
   clone() {
-    return new Rect({ ...this.style, ...this.__options__ })
+    return new RoundRect({ ...this.style, ...this.__options__ })
   }
 }

src/etoile/graph/types.ts

@@ -1,7 +1,7 @@
 import { Box } from './box'
 import { Display, DisplayType, Graph } from './display'
-import { Layer } from './layer'
-import { Rect } from './rect'
+import { Bitmap } from './image'
+import { RoundRect } from './rect'
 import { Text } from './text'
 
 export function isGraph(display: Display): display is Graph {
@@ -12,22 +12,22 @@ export function isBox(display: Display): display is Box {
   return display.__instanceOf__ === DisplayType.Box
 }
 
-export function isRect(display: Display): display is Rect {
-  return isGraph(display) && display.__shape__ === DisplayType.Rect
+export function isRoundRect(display: Display): display is RoundRect {
+  return isGraph(display) && display.__shape__ === DisplayType.RoundRect
 }
 
 export function isText(display: Display): display is Text {
   return isGraph(display) && display.__shape__ === DisplayType.Text
 }
 
-export function isLayer(display: Display): display is Layer {
-  return display.__instanceOf__ === DisplayType.Layer
+export function isBitmap(display: Display): display is Bitmap {
+  return isGraph(display) && display.__shape__ === DisplayType.Bitmap
 }
 
 export const asserts = {
   isGraph,
   isBox,
-  isRect,
   isText,
-  isLayer
+  isRoundRect,
+  isBitmap
 }