@solidrt/core 0.0.1-exp.7 → 0.0.1-exp.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.1-exp.7",
+  "version": "0.0.1-exp.9",
   "license": "MIT",
   "type": "module",
   "main": "src/index.ts",
@@ -14,8 +14,11 @@
     "jsx-runtime.d.ts",
     "LICENSE"
   ],
+  "dependencies": {
+    "colord": "^2.9.3"
+  },
   "peerDependencies": {
-    "@solidjs/signals": "2.0.0-beta.7",
-    "@solidjs/universal": "2.0.0-beta.7"
+    "@solidjs/signals": "2.0.0-beta.13",
+    "@solidjs/universal": "2.0.0-beta.13"
   }
 }

package/src/color.ts

@@ -0,0 +1,9 @@
+import { colord, extend } from "colord"
+import namesPlugin from "colord/plugins/names"
+extend([namesPlugin])
+
+// Parses any CSS color string and returns a packed u32: 0xRRGGBBAA
+export function parseColorToU32(color: string): number {
+  let { r, g, b, a } = colord(color).toRgb()
+  return (((r & 0xFF) << 24) | ((g & 0xFF) << 16) | ((b & 0xFF) << 8) | ((a * 255) & 0xFF)) >>> 0
+}

package/src/events.ts

@@ -0,0 +1,22 @@
+let handlers = new Map<number, Map<string, Function>>()
+
+export function setEventHandler(nodeId: number, name: string, fn: Function | null | undefined): void {
+  if (fn == null) {
+    handlers.get(nodeId)?.delete(name)
+    return
+  }
+  let nodeHandlers = handlers.get(nodeId)
+  if (!nodeHandlers) {
+    nodeHandlers = new Map()
+    handlers.set(nodeId, nodeHandlers)
+  }
+  nodeHandlers.set(name, fn)
+}
+
+export function getEventHandler(nodeId: number, name: string): Function | undefined {
+  return handlers.get(nodeId)?.get(name)
+}
+
+export function cleanupNodeHandlers(nodeId: number): void {
+  handlers.delete(nodeId)
+}

package/src/renderer.ts

@@ -1,6 +1,10 @@
 import { createRoot, createEffect } from "@solidjs/signals"
 import { createRenderer } from "@solidjs/universal"
 import { attachWindow } from "./window"
+import { parseColorToU32, isColorProp } from "./color"
+import { setEventHandler, cleanupNodeHandlers } from "./events"
+
+export { getEventHandler } from "./events"
 
 export let nodes = new Map()
 
@@ -42,7 +46,7 @@ export let {
   createElement: (elementType: string): ProxyNode => {
     let proxy = createProxyNode(elementType)
 
-    console.log("createElement", proxy.id, elementType)
+    // console.debug("[srt] createElement", proxy.id, elementType)
 
     if (elementType === "window") ffi.createRoot(proxy.id)
     else ffi.createNode(proxy.id, elementType)
@@ -52,23 +56,32 @@ export let {
 
   createTextNode: (value: string): ProxyNode => {
     let proxy = createProxyNode("span")
-    console.log("createTextNode", proxy.id, value)
+    // console.debug("[srt] createTextNode", proxy.id, value)
     ffi.createNode(proxy.id, "span")
     ffi.setProperty(proxy.id, "text", "" + value)
     return proxy
   },
 
   replaceText: (node: ProxyNode, value: string): void => {
-    console.log("replaceText", node.id, value)
+    // console.debug("[srt] replaceText", node.id, value)
     ffi.setProperty(node.id, "text", "" + value)
   },
 
   isTextNode: (node: ProxyNode): boolean => node?.elementType === "span",
-  setProperty: <T>(node: ProxyNode, name: string, value: T, prev?: T): void => {
+  setProperty: <T>(node: ProxyNode, name: string, value: T): void => {
     if (!node) return
 
-    console.log("setProperty", node.id, name, value)
-    // if (runPropHandlers(node.id, name, value, prev)) return
+    // console.debug("[srt] setProperty", node.id, name, value)
+
+    if (/^on[A-Z]/.test(name) && (value == null || typeof value === "function")) {
+      setEventHandler(node.id, name, value as Function | null | undefined)
+      return
+    }
+
+    if (name === "color" && typeof value === "string") {
+      ffi.setProperty(node.id, name, parseColorToU32(value))
+      return
+    }
 
     ffi.setProperty(node.id, name, value)
   },
@@ -90,7 +103,7 @@ export let {
         }
       }
 
-      console.log("insertNode", parent.id, node.id, anchor?.id ?? "")
+      // console.debug("[srt] insertNode", parent.id, node.id, anchor?.id ?? "")
 
       if (anchor) ffi.insertNode(parent.id, node.id, anchor.id)
       else ffi.insertNode(parent.id, node.id)
@@ -100,7 +113,7 @@ export let {
   removeNode: (parent: ProxyNode, node: ProxyNode): void => {
     if (!node || !parent) return
 
-    console.log("removeNode", parent.id, node.id)
+    // console.debug("[srt] removeNode", parent.id, node.id)
 
     // Update JS tree references
     let index = parent.children.indexOf(node)
@@ -112,12 +125,12 @@ export let {
     ffi.deleteNode(parent.id, node.id)
 
     // Recursively clean up node and all descendants
-    // let cleanup = (n: ProxyNode) => {
-    //   for (let child of n.children) cleanup(child)
-    //   nodes.delete(n.id)
-    //   runNodeCleanup(n.id)
-    // }
-    // cleanup(node)
+    let cleanup = (n: ProxyNode) => {
+      for (let child of n.children) cleanup(child)
+      nodes.delete(n.id)
+      cleanupNodeHandlers(n.id)
+    }
+    cleanup(node)
   },
 
   getParentNode: (node: ProxyNode) => node?.parent,

package/src/types.d.ts

@@ -143,7 +143,9 @@ export interface AudioProps {
 export interface RectProps extends Position, PaintProps, PointerProps {
   w?: number
   h?: number
-  r?: number
+  // Corner radius. A single number applies to all four corners; an array is
+  // [top-left, top-right, bottom-right, bottom-left] (CSS border-radius order).
+  radius?: number | [number, number, number, number]
 }
 
 export interface OvalProps extends Position, PaintProps, PointerProps {

package/src/window.ts

@@ -1,4 +1,5 @@
 import { onCleanup, onSettled } from "@solidjs/signals"
+import { getEventHandler } from "./events"
 
 // ------ Animation frames ----------------
 
@@ -52,6 +53,9 @@ export function onResize(fn: (data: ResizeEvent) => void) {
 
 export function attachWindow(_nodeId: number) {
   let unsubscribe: () => void = null!
+  let unsubDown: () => void = null!
+  let unsubEnter: () => void = null!
+  let unsubLeave: () => void = null!
 
   onSettled(() => {
     unsubscribe = Flux.on("render", ({ time, frame }: { time: number, frame: number }) => {
@@ -66,11 +70,32 @@ export function attachWindow(_nodeId: number) {
       draw()
     })
 
+    unsubDown = Flux.on("pointerDown", ({ targets, button, clientX, clientY }: { targets: number[], button: number, clientX: number, clientY: number }) => {
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, "onPointerDown")?.({ button, clientX, clientY })
+      }
+    })
+
+    unsubEnter = Flux.on("pointerEnter", ({ targets }: { targets: number[] }) => {
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, "onPointerEnter")?.()
+      }
+    })
+
+    unsubLeave = Flux.on("pointerLeave", ({ targets }: { targets: number[] }) => {
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, "onPointerLeave")?.()
+      }
+    })
+
     // trigger first draw
     draw()
   })
 
   onCleanup(() => {
     if (unsubscribe) unsubscribe()
+    if (unsubDown) unsubDown()
+    if (unsubEnter) unsubEnter()
+    if (unsubLeave) unsubLeave()
   })
 }