@solidrt/core 0.0.1 → 0.0.3

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@solidrt/core",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "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.3"
+  },
   "peerDependencies": {
     "@solidjs/signals": "2.0.0-beta.13",
     "@solidjs/universal": "2.0.0-beta.13"

package/src/focus.ts

@@ -3,6 +3,7 @@ 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
+let textInputActive = false
 
 export function setFocus(nodeId: number | null): void {
   if (nodeId === focusedNodeId) return
@@ -14,6 +15,11 @@ export function setFocus(nodeId: number | null): void {
   if (nodeId != null) {
     getEventHandler(nodeId, "onFocus")?.()
   }
+  let wantActive = nodeId != null && getEventHandler(nodeId, "onTextInput") != null
+  if (wantActive !== textInputActive) {
+    textInputActive = wantActive
+    ffi.setTextInputActive(wantActive)
+  }
 }
 
 export function getFocusedNodeId(): number | null {

package/src/index.ts

@@ -1,3 +1,5 @@
 export * from "./renderer"
 export { setFocus, getFocusedNodeId } from "./focus"
-export { onRender, onResize, onWindowFocus, onWindowBlur } from "./window"
+export { onRender, onLayout, onResize, onWindowFocus, onWindowBlur } from "./window"
+export { measureText } from "./text"
+export type { MeasureTextOptions } from "./types"

package/src/renderer.ts

@@ -3,6 +3,7 @@ import { createRenderer } from "@solidjs/universal"
 import { attachWindow } from "./window"
 import { parseColorToU32, isColorProp } from "./color"
 import { setEventHandler, cleanupNodeHandlers } from "./events"
+import { getFocusedNodeId, setFocus } from "./focus"
 
 export { getEventHandler } from "./events"
 
@@ -124,9 +125,11 @@ export let {
 
     ffi.deleteNode(parent.id, node.id)
 
-    // Recursively clean up node and all descendants
+    // Recursively clean up node and all descendants. Clear focus before
+    // dropping handlers so onBlur still fires for a focused descendant.
     let cleanup = (n: ProxyNode) => {
       for (let child of n.children) cleanup(child)
+      if (n.id === getFocusedNodeId()) setFocus(null)
       nodes.delete(n.id)
       cleanupNodeHandlers(n.id)
     }

package/src/text.ts

@@ -0,0 +1,5 @@
+import type { MeasureTextOptions } from "./types"
+
+export function measureText(text: string, options?: MeasureTextOptions): { width: number, height: number } {
+  return ffi.measureText(text, options)
+}

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
@@ -11,9 +10,19 @@ declare global {
     insertNode(parentId: number, nodeId: number, anchorId?: number): void
     deleteNode(parentId: number, nodeId: number): void
     setProperty(nodeId: number, name: string, value: unknown): void
+    setTextInputActive(active: boolean): void
+    measureText(text: string, options?: MeasureTextOptions): { width: number, height: number }
   }
 }
 
+export interface MeasureTextOptions {
+  fontFamily?: "sans" | "mono" | (string & {})
+  fontSize?: number
+  fontStyle?: "normal" | "italic"
+  fontWeight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
+  maxLines?: number
+}
+
 type Children = SolidJSX.Element
 
 type OA<T> = T | Accessor<T>
@@ -22,6 +31,7 @@ interface FlexboxProps {
   gap?: number
   rowGap?: number
   columnGap?: number
+  flex?: number | "none" | "auto" | (string & {})
   flexGrow?: number
   flexShrink?: number
   flexBasis?: number
@@ -77,6 +87,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 +109,10 @@ export interface TransformProps {
   scale?: OA<number>
   x?: OA<number>
   y?: OA<number>
+  cx?: OA<number>
+  cy?: OA<number>
+  scrollX?: OA<number>
+  scrollY?: OA<number>
 }
 
 export interface PointerProps {
@@ -124,6 +140,7 @@ interface Position {
 export interface WindowProps extends LayoutProps {
   children?: Children
   title?: string
+  fullscreen?: boolean
   vsync?: boolean
   fps?: boolean
 }
@@ -159,9 +176,12 @@ export interface PathProps extends Position, PaintProps, PointerProps {
 }
 
 export interface TextProps extends PaintProps {
-  children: Children
+  children?: Children
+  fontFamily?: "sans" | "mono" | (string & {})
   fontSize?: number
+  lineHeight?: 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,6 +1,6 @@
 import { onCleanup, onSettled } from "@solidjs/signals"
 import { getEventHandler } from "./events"
-import { getFocusedNodeId } from "./focus"
+import { getFocusedNodeId, setFocus } from "./focus"
 
 // ------ Animation frames ----------------
 
@@ -50,6 +50,16 @@ export function onResize(fn: (data: ResizeEvent) => void) {
   return unsubscribe
 }
 
+// Fires after layout has been computed for the current frame but before paint.
+// Setting properties that affect layout from this callback will be picked up
+// by a re-layout pass before painting (one extra pass; cascades beyond that
+// paint stale).
+export function onLayout(fn: () => void) {
+  let unsubscribe = Flux.on("postLayout", fn)
+  onCleanup(unsubscribe)
+  return unsubscribe
+}
+
 export function onWindowFocus(fn: () => void) {
   let unsubscribe = Flux.on("windowFocus", fn)
   onCleanup(unsubscribe)
@@ -74,6 +84,8 @@ export function attachWindow(_nodeId: number) {
   let unsubWheel: () => void = null!
   let unsubKeyDown: () => void = null!
   let unsubKeyUp: () => void = null!
+  let unsubTextInput: () => void = null!
+  let unsubKeyboardVisibility: () => void = null!
 
   onSettled(() => {
     unsubscribe = Flux.on("render", ({ time, frame }: { time: number, frame: number }) => {
@@ -92,6 +104,12 @@ export function attachWindow(_nodeId: number) {
       for (let nodeId of targets) {
         getEventHandler(nodeId, "onPointerDown")?.(e)
       }
+      // Outside-tap blur. Read focus AFTER per-node handlers so a tap that
+      // moves focus to a new node is not immediately blurred again.
+      let focused = getFocusedNodeId()
+      if (focused != null && !targets.includes(focused)) {
+        setFocus(null)
+      }
     })
 
     unsubUp = Flux.on("pointerUp", ({ targets, ...e }: { targets: number[], [k: string]: any }) => {
@@ -138,6 +156,19 @@ export function attachWindow(_nodeId: number) {
       }
     })
 
+    unsubTextInput = Flux.on("textInput", (e: any) => {
+      let id = getFocusedNodeId()
+      if (id != null) {
+        getEventHandler(id, "onTextInput")?.(e)
+      }
+    })
+
+    // When the user dismisses the on-screen keyboard (swipe down, "Done",
+    // back button), blur the focused node so the app's UI state catches up.
+    unsubKeyboardVisibility = Flux.on("keyboardVisibility", ({ shown }: { shown: boolean }) => {
+      if (!shown) setFocus(null)
+    })
+
     // trigger first draw
     draw()
   })
@@ -152,5 +183,7 @@ export function attachWindow(_nodeId: number) {
     if (unsubWheel) unsubWheel()
     if (unsubKeyDown) unsubKeyDown()
     if (unsubKeyUp) unsubKeyUp()
+    if (unsubTextInput) unsubTextInput()
+    if (unsubKeyboardVisibility) unsubKeyboardVisibility()
   })
 }