lunchboxjs 0.1.4013 → 0.1.4016

package/src/core/ensure.ts

@@ -158,18 +158,10 @@ export const ensuredCamera = computed<Lunch.Node<THREE.Camera> | null>({
     },
 })
 
-// export const ensuredCamera = buildEnsured<THREE.Camera>(
-//     ['PerspectiveCamera', 'OrthographicCamera'],
-//     fallbackCameraUuid,
-//     {
-//         args: [45, 0.5625, 1, 1000],
-//     }
-// )
-
 // ENSURE RENDERER
 // ====================
 export const fallbackRendererUuid = 'FALLBACK_RENDERER'
-export const v = buildEnsured(
+export const ensuredRenderer = buildEnsured(
     // TODO: ensure support for css/svg renderers
     ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
     fallbackRendererUuid,
@@ -181,7 +173,9 @@ export const rendererReady = ref(false)
 
 export const ensureRenderer = computed<Lunch.Node<THREE.WebGLRenderer> | null>({
     get() {
-        return (rendererReady.value ? (v.value as any) : (null as any)) as any
+        return (
+            rendererReady.value ? (ensuredRenderer.value as any) : (null as any)
+        ) as any
     },
     set(val: any) {
         const t = val.type ?? ''

package/src/core/instantiateThreeObject/processProps.ts

@@ -1,10 +1,18 @@
 import { Lunch } from '../..'
 
 /** Process props into either themselves or the $attached value */
-export function processProp<T, U = THREE.Object3D>({ node, prop }: { node: Lunch.StandardMeta<U>, prop: any }) {
+export function processProp<T, U = THREE.Object3D>({
+    node,
+    prop,
+}: {
+    node: Lunch.StandardMeta<U>
+    prop: any
+}) {
     // return $attachedArray value if needed
     if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
-        return node.attachedArray[prop.replace('$attachedArray.', '')] as any as T
+        return node.attachedArray[
+            prop.replace('$attachedArray.', '')
+        ] as any as T
     }
 
     // return $attached value if needed
@@ -16,8 +24,17 @@ export function processProp<T, U = THREE.Object3D>({ node, prop }: { node: Lunch
     return prop as T
 }
 
-export function processPropAsArray<T, U = THREE.Object3D>({ node, prop }: { node: Lunch.StandardMeta<U>, prop: any }) {
-    const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray')
+export function processPropAsArray<T, U = THREE.Object3D>({
+    node,
+    prop,
+}: {
+    node: Lunch.StandardMeta<U>
+    prop: any
+}) {
+    const isAttachedArray =
+        typeof prop === 'string' && prop.startsWith('$attachedArray')
     const output = processProp<T, U>({ node, prop })
-    return Array.isArray(output) && isAttachedArray ? output as Array<T> : [output]
-}
+    return Array.isArray(output) && isAttachedArray
+        ? (output as Array<T>)
+        : [output]
+}

package/src/core/interaction/input.ts

@@ -1,4 +1,4 @@
 import { ref } from 'vue'
 
 /** Mouse is down, touch is pressed, etc */
-export const inputActive = ref(false)
+export const inputActive = ref(false)

package/src/core/interaction/setupAutoRaycaster.ts

@@ -17,6 +17,8 @@ let mouseUpListener: (event: MouseEvent) => void
 export const mousePos = ref({ x: Infinity, y: Infinity })
 let autoRaycasterEventsInitialized = false
 
+let frameID: number
+
 export const setupAutoRaycaster = (node: Lunch.Node<THREE.Raycaster>) => {
     const instance = node.instance
 
@@ -67,8 +69,16 @@ export const setupAutoRaycaster = (node: Lunch.Node<THREE.Raycaster>) => {
 
             // TODO: add touch events
 
-            // add to update loop
-            onBeforeRender(autoRaycasterBeforeRender)
+            // process mouse events asynchronously, whenever the mouse state changes
+            watch(
+                () => [inputActive.value, mousePos.value.x, mousePos.value.y],
+                () => {
+                    if (frameID) cancelAnimationFrame(frameID)
+                    frameID = requestAnimationFrame(() => {
+                        autoRaycasterBeforeRender()
+                    })
+                }
+            )
 
             // mark complete
             autoRaycasterEventsInitialized = true

package/src/core/update.ts

@@ -1,22 +1,44 @@
 import { ensureRenderer, ensuredScene, ensuredCamera } from '.'
 import { Lunch } from '..'
-import { toRaw } from 'vue'
+import { toRaw, watch, WatchStopHandle } from 'vue'
 
 let frameID: number
+let watchStopHandle: WatchStopHandle
 
 export const beforeRender = [] as Lunch.UpdateCallback[]
 export const afterRender = [] as Lunch.UpdateCallback[]
 
-export const update: Lunch.UpdateCallback = (opts) => {
-    // request next frame
+const requestUpdate = (opts: Lunch.UpdateCallbackProperties) => {
+    cancelUpdate()
     frameID = requestAnimationFrame(() =>
         update({
             app: opts.app,
             renderer: ensureRenderer.value?.instance,
             scene: ensuredScene.value.instance,
             camera: ensuredCamera.value?.instance,
+            updateSource: opts.updateSource,
         })
     )
+}
+
+export const update: Lunch.UpdateCallback = (opts) => {
+    if (opts.updateSource) {
+        if (!watchStopHandle) {
+            // request next frame only when state changes
+            watchStopHandle = watch(
+                opts.updateSource,
+                () => {
+                    requestUpdate(opts)
+                },
+                {
+                    deep: true,
+                }
+            )
+        }
+    } else {
+        // request next frame on a continuous loop
+        requestUpdate(opts)
+    }
 
     // prep options
     const { app, renderer, scene, camera } = opts
@@ -82,3 +104,7 @@ export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
 export const cancelUpdate = () => {
     if (frameID) cancelAnimationFrame(frameID)
 }
+
+export const cancelUpdateSource = () => {
+    if (watchStopHandle) watchStopHandle()
+}

package/src/index.ts

@@ -1,11 +1,4 @@
-import {
-    computed,
-    createRenderer,
-    Component,
-    ref,
-    watch,
-    WatchStopHandle,
-} from 'vue'
+import { computed, createRenderer, Component, ref, watch } from 'vue'
 import { nodeOps } from './nodeOps'
 import {
     // createdCamera,
@@ -47,20 +40,13 @@ export const globals = {
 export const camera = computed(() => ensuredCamera.value?.instance ?? null)
 /** Run a function using the current camera when it's present. */
 export function useCamera<T extends THREE.Camera = THREE.PerspectiveCamera>(
-    callback: (cam: T) => void,
-    once = true
+    callback: (cam: T) => void
 ) {
-    let destroy: WatchStopHandle
-    destroy = watch(
+    return watch(
         camera,
         (newVal) => {
             if (!newVal) return
-
-            // TODO: better fix than `any`?
-            callback(newVal as any)
-            if (once) {
-                destroy?.()
-            }
+            callback(newVal as unknown as T)
         },
         { immediate: true }
     )
@@ -70,20 +56,13 @@ export function useCamera<T extends THREE.Camera = THREE.PerspectiveCamera>(
 export const renderer = computed(() => ensureRenderer.value?.instance ?? null)
 /** Run a function using the current renderer when it's present. */
 export function useRenderer<T extends THREE.Renderer = THREE.WebGLRenderer>(
-    callback: (rend: T) => void,
-    once = true
+    callback: (rend: T) => void
 ) {
-    let destroy: WatchStopHandle
-    destroy = watch(
+    return watch(
         renderer,
         (newVal) => {
             if (!newVal) return
-
-            // TODO: better fix than `any`?
-            callback(newVal as any)
-            if (once) {
-                destroy?.()
-            }
+            callback(newVal as unknown as T)
         },
         { immediate: true }
     )
@@ -92,21 +71,12 @@ export function useRenderer<T extends THREE.Renderer = THREE.WebGLRenderer>(
 /** The current scene. Often easier to use `useScene` instead of this. */
 export const scene = computed(() => ensuredScene.value.instance)
 /** Run a function using the current scene when it's present. */
-export function useScene(
-    callback: (newScene: THREE.Scene) => void,
-    once = true
-) {
-    let destroy: WatchStopHandle
-    destroy = watch(
+export function useScene(callback: (newScene: THREE.Scene) => void) {
+    return watch(
         scene,
         (newVal) => {
             if (!newVal) return
-
-            // TODO: better fix than `any`?
             callback(newVal as any)
-            if (once) {
-                destroy?.()
-            }
         },
         { immediate: true }
     )
@@ -142,15 +112,17 @@ export const createApp = (root: Component) => {
 
     // register all components
     Object.keys(components).forEach((key) => {
-        app!.component(key, (components as any)[key])
+        app?.component(key, (components as any)[key])
     })
 
     // update mount function to match Lunchbox.Node
     const { mount } = app
     app.mount = (root, ...args) => {
+        // find DOM element to use as app root
         const domElement = (
             typeof root === 'string' ? document.querySelector(root) : root
         ) as HTMLElement
+        // create or find root node
         const rootNode = ensureRootNode({
             domElement,
             isLunchboxRootNode: true,

package/src/nodeOps/remove.ts

@@ -5,7 +5,6 @@ import { overrides } from '../core'
 export const remove = (node: MiniDom.RendererBaseNode) => {
     if (!node) return
     const overrideKeys = Object.keys(overrides)
-
     // prep subtree
     const subtree: MiniDom.BaseNode[] = []
     node.walk((descendant) => {

package/src/types.ts

@@ -1,6 +1,7 @@
 type RootNode = import('./core/minidom').MiniDom.RendererRootNode
 type VNodeProps = import('vue').VNodeProps
 type VueApp<T> = import('vue').App<T>
+type WatchSource = import('vue').WatchSource
 type RendererStandardNode<T = THREE.Object3D> =
     import('./core').MiniDom.RendererStandardNode<T>
 
@@ -127,6 +128,7 @@ export declare namespace Lunch {
         scene?: THREE.Scene | null
         renderer?: THREE.Renderer | null
         camera?: THREE.Camera | null
+        updateSource?: WatchSource | null
 
         // sceneNode: Node<THREE.Scene> | null
         // rendererNode: Node<THREE.Renderer> | null
@@ -145,11 +147,13 @@ export declare namespace Lunch {
         dpr?: number
         ortho?: boolean
         orthographic?: boolean
+        r3f?: boolean
         // TODO: Why doesn't ConstructorParameters<THREE.WebGLRenderer> work here?
         rendererArguments?: object
         rendererProperties?: Partial<THREE.WebGLRenderer>
         shadow?: ShadowSugar
         transparent?: boolean
         zoom?: number
+        updateSource?: WatchSource | null
     }
 }