@solidrt/core 0.0.1-exp.9 → 0.0.2

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.1-exp.9",
+  "version": "0.0.2",
   "license": "MIT",
+  "author": "Antoine van Wel",
   "type": "module",
   "main": "src/index.ts",
   "exports": {
@@ -17,6 +18,9 @@
   "dependencies": {
     "colord": "^2.9.3"
   },
+  "devDependencies": {
+    "@solidrt/flux-types": "0.0.2"
+  },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.13",
     "@solidjs/universal": "2.0.0-beta.13"

package/src/focus.ts

@@ -0,0 +1,21 @@
+import { getEventHandler } from "./events"
+
+// Currently-focused node id. Reset to null automatically across engine
+// reloads because the JS environment is rebuilt from scratch.
+let focusedNodeId: number | null = null
+
+export function setFocus(nodeId: number | null): void {
+  if (nodeId === focusedNodeId) return
+  let oldId = focusedNodeId
+  focusedNodeId = nodeId
+  if (oldId != null) {
+    getEventHandler(oldId, "onBlur")?.()
+  }
+  if (nodeId != null) {
+    getEventHandler(nodeId, "onFocus")?.()
+  }
+}
+
+export function getFocusedNodeId(): number | null {
+  return focusedNodeId
+}

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./renderer"
-export { onRender, onResize } from "./window"
+export { setFocus, getFocusedNodeId } from "./focus"
+export { onRender, onResize, onWindowFocus, onWindowBlur } from "./window"

package/src/types.d.ts

@@ -1,9 +1,8 @@
+/// <reference types="@solidrt/flux-types" />
+
 import type { Accessor, JSX as SolidJSX } from "@solidjs/signals"
 
 declare global {
-  let Flux: {
-    on(event: string, callback: (data: any) => void): () => void
-  }
 
   let ffi: {
     createRoot(id: number): void
@@ -22,6 +21,7 @@ interface FlexboxProps {
   gap?: number
   rowGap?: number
   columnGap?: number
+  flex?: number | "none" | "auto" | (string & {})
   flexGrow?: number
   flexShrink?: number
   flexBasis?: number
@@ -77,6 +77,8 @@ export interface LayoutProps extends FlexboxProps, GridProps {
   marginLeft?: Dimension
 
   overflow?: "visible" | "clip" | "hidden" | "scroll"
+  overflowX?: "visible" | "clip" | "hidden" | "scroll"
+  overflowY?: "visible" | "clip" | "hidden" | "scroll"
 }
 
 import type { LCH } from "./color"
@@ -97,6 +99,8 @@ export interface TransformProps {
   scale?: OA<number>
   x?: OA<number>
   y?: OA<number>
+  cx?: OA<number>
+  cy?: OA<number>
 }
 
 export interface PointerProps {
@@ -124,6 +128,7 @@ interface Position {
 export interface WindowProps extends LayoutProps {
   children?: Children
   title?: string
+  fullscreen?: boolean
   vsync?: boolean
   fps?: boolean
 }
@@ -159,9 +164,11 @@ export interface PathProps extends Position, PaintProps, PointerProps {
 }
 
 export interface TextProps extends PaintProps {
-  children: Children
+  children?: Children
+  fontFamily?: "sans" | "mono" | (string & {})
   fontSize?: number
   fontStyle?: "normal" | "italic"
+  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
   textAlign?: "left" | "right" | "center" | "justify"
   maxLines?: number
 }

package/src/window.ts

@@ -1,5 +1,6 @@
 import { onCleanup, onSettled } from "@solidjs/signals"
 import { getEventHandler } from "./events"
+import { getFocusedNodeId } from "./focus"
 
 // ------ Animation frames ----------------
 
@@ -49,13 +50,30 @@ export function onResize(fn: (data: ResizeEvent) => void) {
   return unsubscribe
 }
 
+export function onWindowFocus(fn: () => void) {
+  let unsubscribe = Flux.on("windowFocus", fn)
+  onCleanup(unsubscribe)
+  return unsubscribe
+}
+
+export function onWindowBlur(fn: () => void) {
+  let unsubscribe = Flux.on("windowBlur", fn)
+  onCleanup(unsubscribe)
+  return unsubscribe
+}
+
 // ------ Window ----------------
 
 export function attachWindow(_nodeId: number) {
   let unsubscribe: () => void = null!
   let unsubDown: () => void = null!
+  let unsubUp: () => void = null!
+  let unsubMove: () => void = null!
   let unsubEnter: () => void = null!
   let unsubLeave: () => void = null!
+  let unsubWheel: () => void = null!
+  let unsubKeyDown: () => void = null!
+  let unsubKeyUp: () => void = null!
 
   onSettled(() => {
     unsubscribe = Flux.on("render", ({ time, frame }: { time: number, frame: number }) => {
@@ -70,21 +88,53 @@ export function attachWindow(_nodeId: number) {
       draw()
     })
 
-    unsubDown = Flux.on("pointerDown", ({ targets, button, clientX, clientY }: { targets: number[], button: number, clientX: number, clientY: number }) => {
+    unsubDown = Flux.on("pointerDown", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, "onPointerDown")?.(e)
+      }
+    })
+
+    unsubUp = Flux.on("pointerUp", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, "onPointerUp")?.(e)
+      }
+    })
+
+    unsubMove = Flux.on("pointerMove", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
+      for (let nodeId of targets) {
+        getEventHandler(nodeId, "onPointerMove")?.(e)
+      }
+    })
+
+    unsubEnter = Flux.on("pointerEnter", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
       for (let nodeId of targets) {
-        getEventHandler(nodeId, "onPointerDown")?.({ button, clientX, clientY })
+        getEventHandler(nodeId, "onPointerEnter")?.(e)
       }
     })
 
-    unsubEnter = Flux.on("pointerEnter", ({ targets }: { targets: number[] }) => {
+    unsubLeave = Flux.on("pointerLeave", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
       for (let nodeId of targets) {
-        getEventHandler(nodeId, "onPointerEnter")?.()
+        getEventHandler(nodeId, "onPointerLeave")?.(e)
       }
     })
 
-    unsubLeave = Flux.on("pointerLeave", ({ targets }: { targets: number[] }) => {
+    unsubWheel = Flux.on("wheel", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
       for (let nodeId of targets) {
-        getEventHandler(nodeId, "onPointerLeave")?.()
+        getEventHandler(nodeId, "onWheel")?.(e)
+      }
+    })
+
+    unsubKeyDown = Flux.on("keydown", (e: any) => {
+      let id = getFocusedNodeId()
+      if (id != null) {
+        getEventHandler(id, "onKeyDown")?.(e)
+      }
+    })
+
+    unsubKeyUp = Flux.on("keyup", (e: any) => {
+      let id = getFocusedNodeId()
+      if (id != null) {
+        getEventHandler(id, "onKeyUp")?.(e)
       }
     })
 
@@ -95,7 +145,12 @@ export function attachWindow(_nodeId: number) {
   onCleanup(() => {
     if (unsubscribe) unsubscribe()
     if (unsubDown) unsubDown()
+    if (unsubUp) unsubUp()
+    if (unsubMove) unsubMove()
     if (unsubEnter) unsubEnter()
     if (unsubLeave) unsubLeave()
+    if (unsubWheel) unsubWheel()
+    if (unsubKeyDown) unsubKeyDown()
+    if (unsubKeyUp) unsubKeyUp()
   })
 }