lunchboxjs 0.1.4018 → 0.2.1001-beta.2

package/src/components/LunchboxWrapper/prepCanvas.ts

@@ -5,35 +5,39 @@ import { resizeCanvas } from './resizeCanvas'
 
 const getInnerDimensions = (node: Element) => {
     const computedStyle = getComputedStyle(node)
-    const width = node.clientWidth - parseFloat(computedStyle.paddingLeft) - parseFloat(computedStyle.paddingRight)
-    const height = node.clientHeight - parseFloat(computedStyle.paddingTop) - parseFloat(computedStyle.paddingBottom)
+    const width =
+        node.clientWidth -
+        parseFloat(computedStyle.paddingLeft) -
+        parseFloat(computedStyle.paddingRight)
+    const height =
+        node.clientHeight -
+        parseFloat(computedStyle.paddingTop) -
+        parseFloat(computedStyle.paddingBottom)
     return { width, height }
 }
 
 export const prepCanvas = (
     container: Ref<MiniDom.RendererDomNode | undefined>,
-    canvasElement: HTMLCanvasElement,
-    onBeforeUnmount: Function,
+    camera: THREE.Camera,
+    renderer: THREE.Renderer,
+    scene: THREE.Scene,
     sizePolicy?: Lunch.SizePolicy
 ) => {
     const containerElement = container.value?.domElement
     if (!containerElement) throw new Error('missing container')
 
-    // save...
-    // ...and size element
+    // save and size element
     const resizeCanvasByPolicy = () => {
-        if (sizePolicy === "container") {
-            const dims = getInnerDimensions(containerElement);
-            resizeCanvas(dims.width, dims.height);
-        }
-        else
-            resizeCanvas()
-    };
-    resizeCanvasByPolicy();
+        if (sizePolicy === 'container') {
+            const dims = getInnerDimensions(containerElement)
+            resizeCanvas(camera, renderer, scene, dims.width, dims.height)
+        } else resizeCanvas(camera, renderer, scene)
+    }
+    resizeCanvasByPolicy()
 
     // attach listeners
-    const observer = new ResizeObserver(([canvas]) => {
-        resizeCanvasByPolicy();
+    let observer = new ResizeObserver(() => {
+        resizeCanvasByPolicy()
     })
     // window.addEventListener('resize', resizeCanvas)
     if (containerElement) {
@@ -41,9 +45,11 @@ export const prepCanvas = (
     }
 
     // cleanup
-    onBeforeUnmount(() => {
-        if (canvasElement) {
-            observer.unobserve(canvasElement)
-        }
-    })
+    return {
+        dispose() {
+            if (containerElement) {
+                observer.unobserve(containerElement)
+            }
+        },
+    }
 }

package/src/components/LunchboxWrapper/resizeCanvas.ts

@@ -1,11 +1,12 @@
-import { ensuredCamera, ensureRenderer, ensuredScene } from '../../core'
 import { toRaw } from 'vue'
 
-export const resizeCanvas = (width?: number, height?: number) => {
-    const renderer = ensureRenderer.value?.instance
-    const scene = ensuredScene.value.instance
-    const camera = ensuredCamera.value
-
+export const resizeCanvas = (
+    camera: THREE.Camera,
+    renderer: THREE.Renderer,
+    scene: THREE.Scene,
+    width?: number,
+    height?: number
+) => {
     // ignore if no element
     if (!renderer?.domElement || !scene || !camera) return
 
@@ -15,12 +16,12 @@ export const resizeCanvas = (width?: number, height?: number) => {
     // update camera
     const aspect = width / height
     if (camera.type?.toLowerCase() === 'perspectivecamera') {
-        const perspectiveCamera = camera.instance as THREE.PerspectiveCamera
+        const perspectiveCamera = camera as THREE.PerspectiveCamera
         perspectiveCamera.aspect = aspect
         perspectiveCamera.updateProjectionMatrix()
     } else if (camera.type?.toLowerCase() === 'orthographiccamera') {
-        // console.log('TODO: ortho camera update')
-        const orthoCamera = camera.instance as THREE.OrthographicCamera
+        // TODO: ortho camera update
+        const orthoCamera = camera as THREE.OrthographicCamera
         const heightInTermsOfWidth = height / width
         orthoCamera.top = heightInTermsOfWidth * 10
         orthoCamera.bottom = -heightInTermsOfWidth * 10
@@ -28,13 +29,13 @@ export const resizeCanvas = (width?: number, height?: number) => {
         orthoCamera.left = -10
         orthoCamera.updateProjectionMatrix()
     } else {
-        console.log('TODO: non-ortho or perspective camera')
+        // TODO: non-ortho or perspective camera
     }
 
     // update canvas
     renderer.setSize(width, height)
     // render immediately so there's no flicker
-    if (scene && camera.instance) {
-        renderer.render(toRaw(scene), toRaw(camera.instance))
+    if (scene && camera) {
+        renderer.render(toRaw(scene), toRaw(camera))
     }
 }

package/src/components/autoGeneratedComponents.ts

@@ -106,6 +106,7 @@ export const autoGeneratedComponents = [
     'group',
     'catmullRomCurve3',
     'points',
+    'raycaster',
 
     // helpers
     'cameraHelper',
@@ -157,7 +158,6 @@ export const autoGeneratedComponents = [
 
 
     // misc
-    raycaster: RaycasterProps
     vector2: Vector2Props
     vector3: Vector3Props
     vector4: Vector4Props

package/src/components/index.ts

@@ -1,11 +1,9 @@
 import { h, defineComponent } from 'vue'
 import { LunchboxWrapper } from './LunchboxWrapper/LunchboxWrapper'
 import { autoGeneratedComponents } from './autoGeneratedComponents'
+import type { Lunch } from '../types'
 
-import { catalogue } from './catalogue'
-export { catalogue }
-
-export const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper']
+export const catalogue: Lunch.Catalogue = {}
 
 // component creation utility
 const createComponent = (tag: string) =>

package/src/core/createNode.ts

@@ -1,7 +1,6 @@
 import { isLunchboxRootNode } from '../utils'
-import { instantiateThreeObject, MiniDom, ensuredScene } from '.'
-import { Lunch } from '..'
-import { ensuredCamera } from './ensure'
+import { instantiateThreeObject, MiniDom } from '.'
+import type { Lunch } from '..'
 
 /** Create a new Lunchbox comment node. */
 export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {
@@ -59,13 +58,6 @@ export function createNode<T extends object = THREE.Object3D>(
     })
 
     if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-        // if (node.type.includes('Camera')) {
-        //     console.log(node.type, {
-        //         ...node.props,
-        //         ...props,
-        //     })
-        //     console.trace()
-        // }
         node.instance = instantiateThreeObject({
             ...node,
             props: {
@@ -75,13 +67,5 @@ export function createNode<T extends object = THREE.Object3D>(
         })
     }
 
-    // TODO: these manual overrides are a bit brittle - replace?
-    if (node.type?.toLowerCase() === 'scene') {
-        // manually set scene override
-        ensuredScene.value = node as Lunch.Node<THREE.Scene>
-    } else if (node.type?.toLowerCase().endsWith('camera')) {
-        ensuredCamera.value = node as Lunch.Node<THREE.Camera>
-    }
-
     return node
 }

package/src/core/extend.ts

@@ -1,6 +1,6 @@
 import { h, defineComponent } from 'vue'
 import { catalogue } from '../components'
-import { Lunch } from '..'
+import type { Lunch } from '..'
 
 const createComponent = (tag: string) =>
     defineComponent({

package/src/core/index.ts

@@ -1,10 +1,7 @@
-export * from './allNodes'
 export * from './createNode'
-export * from './ensure'
 export * from './interaction'
 export * from './extend'
 export * from './instantiateThreeObject'
 export * from './minidom'
-export * from './start'
 export * from './update'
 export * from './updateObjectProp'

package/src/core/instantiateThreeObject/index.ts

@@ -1,14 +1,19 @@
 import { catalogue } from '../../components'
 import * as THREE from 'three'
 import { processPropAsArray } from './processProps'
-import { Lunch } from '../..'
+import type { Lunch } from '../..'
 
 export function instantiateThreeObject<T>(node: Lunch.StandardMeta<T>) {
     if (!node.type) return null
 
     // what class will we be instantiating?
     const uppercaseType = node.type[0].toUpperCase() + node.type.slice(1)
-    const targetClass = catalogue[node.type] || (THREE as any)[uppercaseType]
+    const translatedType = uppercaseType.replace(/Lunchbox$/, '')
+    const targetClass =
+        catalogue[node.type] ||
+        (THREE as any)[uppercaseType] ||
+        catalogue[translatedType] ||
+        (THREE as any)[translatedType]
     if (!targetClass)
         throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`
 

package/src/core/instantiateThreeObject/processProps.ts

@@ -1,4 +1,4 @@
-import { Lunch } from '../..'
+import type { Lunch } from '../..'
 
 /** Process props into either themselves or the $attached value */
 export function processProp<T, U = THREE.Object3D>({

package/src/core/interaction.ts

@@ -0,0 +1,55 @@
+import type { Ref } from 'vue'
+import type { Lunch } from '..'
+
+/** Add an event listener to the given node. Also creates the event teardown function and any necessary raycaster/interaction dictionary updates. */
+export function addEventListener({
+    node,
+    key,
+    interactables,
+    value,
+}: {
+    node: Lunch.Node
+    key: Lunch.EventKey
+    interactables: Ref<Lunch.Node[]>
+    value: Lunch.EventCallback
+}) {
+    // create new records for this key if needed
+    if (!node.eventListeners[key]) {
+        node.eventListeners[key] = []
+    }
+    if (!node.eventListenerRemoveFunctions[key]) {
+        node.eventListenerRemoveFunctions[key] = []
+    }
+
+    // add event listener
+    node.eventListeners[key].push(value)
+
+    // if we need it, let's get/create the main raycaster
+    if (interactionsRequiringRaycaster.includes(key)) {
+        if (node.instance && !interactables.value.includes(node)) {
+            // add to interactables
+            interactables.value.push(node)
+            node.eventListenerRemoveFunctions[key].push(() => {
+                // remove from interactables
+                const idx = interactables.value.indexOf(node)
+                if (idx !== -1) {
+                    interactables.value.splice(idx, 1)
+                }
+            })
+        }
+    }
+
+    return node
+}
+
+const interactionsRequiringRaycaster = [
+    'onClick',
+    'onPointerUp',
+    'onPointerDown',
+    'onPointerOver',
+    'onPointerOut',
+    'onPointerEnter',
+    'onPointerLeave',
+    'onPointerMove',
+    // 'onPointerMissed',
+]

package/src/core/minidom.ts

@@ -1,6 +1,5 @@
 import { v4 as createUuid } from 'uuid'
-import { allNodes } from '.'
-import { Lunch } from '..'
+import type { Lunch } from '..'
 
 // MiniDom recreates DOM node properties and methods.
 // Since Vue 3 is a DOM-first framework, many of its nodeOps depend on
@@ -17,7 +16,7 @@ export namespace MiniDom {
             this.minidomType = 'MinidomBaseNode'
             this.uuid = options?.uuid ?? createUuid()
 
-            allNodes.push(this)
+            // allNodes.push(this)
         }
         uuid: Lunch.Uuid
 
@@ -89,10 +88,10 @@ export namespace MiniDom {
         /** Drop this node. Removes parent's knowledge of this node
          * and resets this node's internal parent. */
         drop() {
-            // remove parent
-            this.parentNode = null
             // remove as child
             this.removeAsChildFromAnyParents()
+            // remove parent
+            this.parentNode = null
         }
 
         /** Walk over the entire subtree. Return falsey value in callback to end early. */
@@ -124,7 +123,7 @@ export namespace MiniDom {
         minidomType: MiniDom.NodeType
 
         removeAsChildFromAnyParents() {
-            allNodes.forEach((node) => node.removeChild(this))
+            this.parentNode?.removeChild(this)
         }
     }
 
@@ -255,6 +254,3 @@ export namespace MiniDom {
 export function isMinidomNode(item: any): item is MiniDom.RendererBaseNode {
     return (item as MiniDom.BaseNode)?.minidomType === 'RendererNode'
 }
-
-export const rootNode = new MiniDom.RendererRootNode()
-rootNode.minidomType = 'RootNode'

package/src/core/update.ts

@@ -1,31 +1,28 @@
-import { ensureRenderer, ensuredScene, ensuredCamera } from '.'
-import { Lunch } from '..'
-import { toRaw, watch, WatchStopHandle } from 'vue'
-
-let frameID: number
-let watchStopHandle: WatchStopHandle
-
-export const beforeRender = [] as Lunch.UpdateCallback[]
-export const afterRender = [] as Lunch.UpdateCallback[]
+import type { Lunch } from '..'
+import { inject, toRaw, watch } from 'vue'
+import * as Keys from '../keys'
 
 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,
-        })
+    if (typeof opts.app.config.globalProperties.lunchbox.frameId === 'number') {
+        cancelAnimationFrame(opts.app.config.globalProperties.lunchbox.frameId)
+    }
+    opts.app.config.globalProperties.lunchbox.frameId = requestAnimationFrame(
+        () =>
+            update({
+                app: opts.app,
+                renderer: opts.renderer,
+                scene: opts.scene,
+                camera: opts.camera,
+                updateSource: opts.updateSource,
+            })
     )
 }
 
 export const update: Lunch.UpdateCallback = (opts) => {
     if (opts.updateSource) {
-        if (!watchStopHandle) {
+        if (!opts.app.config.globalProperties.lunchbox.watchStopHandle) {
             // request next frame only when state changes
-            watchStopHandle = watch(
+            opts.app.config.globalProperties.lunchbox.watchStopHandle = watch(
                 opts.updateSource,
                 () => {
                     requestUpdate(opts)
@@ -41,70 +38,112 @@ export const update: Lunch.UpdateCallback = (opts) => {
     }
 
     // prep options
-    const { app, renderer, scene, camera } = opts
+    const { app, renderer, scene } = opts
 
     // BEFORE RENDER
-    beforeRender.forEach((cb: Lunch.UpdateCallback | undefined) => {
-        if (cb) {
-            cb(opts)
-        }
+    app.config.globalProperties.lunchbox.beforeRender.forEach((cb) => {
+        cb?.(opts)
     })
 
     // RENDER
-    if (renderer && scene && camera) {
+    if (renderer && scene && opts.app.config.globalProperties.lunchbox.camera) {
         if (app.customRender) {
             app.customRender(opts)
         } else {
-            renderer.render(toRaw(scene), toRaw(camera))
+            renderer.render(
+                toRaw(scene),
+                opts.app.config.globalProperties.lunchbox.camera
+                // toRaw(camera)
+            )
         }
     }
 
     // AFTER RENDER
-    afterRender.forEach((cb: Lunch.UpdateCallback | undefined) => {
-        if (cb) {
-            cb(opts)
-        }
+    app.config.globalProperties.lunchbox.afterRender.forEach((cb) => {
+        cb?.(opts)
     })
 }
 
-export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    if (index === Infinity) {
-        beforeRender.push(cb)
-    } else {
-        beforeRender.splice(index, 0, cb)
+// before render
+// ====================
+/** Obtain callback methods for `onBeforeRender` and `offBeforeRender`. Usually used internally by Lunchbox. */
+export const useBeforeRender = () => {
+    return {
+        onBeforeRender: inject<typeof onBeforeRender>(Keys.onBeforeRenderKey),
+        offBeforeRender: inject<typeof offBeforeRender>(
+            Keys.offBeforeRenderKey
+        ),
     }
 }
 
+/** Run a function before every render.
+ *
+ * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
+ * before a render triggered by that `updateSource`. Normally, the function should run every frame.
+ */
+export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
+    useBeforeRender().onBeforeRender?.(cb, index)
+}
+
+/** Remove a function from the `beforeRender` callback list. Useful for tearing down functions added
+ * by `onBeforeRender`.
+ */
 export const offBeforeRender = (cb: Lunch.UpdateCallback | number) => {
-    if (isFinite(cb as number)) {
-        beforeRender.splice(cb as number, 1)
-    } else {
-        const idx = beforeRender.findIndex((v) => v == cb)
-        beforeRender.splice(idx, 1)
+    useBeforeRender().offBeforeRender?.(cb)
+}
+
+// after render
+// ====================
+/** Obtain callback methods for `onAfterRender` and `offAfterRender`. Usually used internally by Lunchbox. */
+export const useAfterRender = () => {
+    return {
+        onAfterRender: inject<typeof onAfterRender>(Keys.onBeforeRenderKey),
+        offAfterRender: inject<typeof offAfterRender>(Keys.offBeforeRenderKey),
     }
 }
 
+/** Run a function after every render.
+ *
+ * Note that if `updateSource` is set in the Lunchbox wrapper component, this will **only** run
+ * after a render triggered by that `updateSource`. Normally, the function should run every frame.
+ */
 export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    if (index === Infinity) {
-        afterRender.push(cb)
-    } else {
-        afterRender.splice(index, 0, cb)
-    }
+    useBeforeRender().onBeforeRender?.(cb, index)
 }
 
+/** Remove a function from the `afterRender` callback list. Useful for tearing down functions added
+ * by `onAfterRender`.
+ */
 export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
-    if (isFinite(cb as number)) {
-        afterRender.splice(cb as number, 1)
-    } else {
-        const idx = afterRender.findIndex((v) => v == cb)
-        afterRender.splice(idx, 1)
+    useBeforeRender().offBeforeRender?.(cb)
+}
+
+/** Obtain a function used to cancel the current update frame. Use `cancelUpdate` if you wish
+ * to immediately invoke the cancellation function. Usually used internally by Lunchbox.
+ */
+export const useCancelUpdate = () => {
+    const frameId = inject<number>(Keys.frameIdKey)
+    return () => {
+        if (frameId !== undefined) cancelAnimationFrame(frameId)
     }
 }
 
+/** Cancel the current update frame. Usually used internally by Lunchbox. */
 export const cancelUpdate = () => {
-    if (frameID) cancelAnimationFrame(frameID)
+    useCancelUpdate()?.()
+}
+
+/** Obtain a function used to cancel an update source. Use `cancelUpdateSource` if you wish to
+ * immediately invoke the cancellation function. Usually used internally by Lunchbox.
+ */
+export const useCancelUpdateSource = () => {
+    const cancel = inject<
+        Lunch.App['config']['globalProperties']['watchStopHandle']
+    >(Keys.watchStopHandleKey)
+    return () => cancel?.()
 }
 
+/** Cancel an update source. Usually used internally by Lunchbox. */
 export const cancelUpdateSource = () => {
-    if (watchStopHandle) watchStopHandle()
+    useCancelUpdateSource()?.()
 }

package/src/core/updateObjectProp.ts

@@ -1,34 +1,25 @@
 import { isEventKey, isLunchboxStandardNode } from '../utils'
 import { addEventListener } from './interaction'
 import { get, isNumber, set } from 'lodash'
-import { Lunch } from '..'
-
-/** Update the given node so all of its props are current. */
-export function updateAllObjectProps({ node }: { node: Lunch.Node }) {
-    // set props
-    const props = node.props || {}
-    let output = node
-    Object.keys(props).forEach((key) => {
-        output = updateObjectProp({ node, key, value: props[key] })
-    })
-
-    return output
-}
+import type { Lunch } from '..'
+import type { Ref } from 'vue'
 
 /** Update a single prop on a given node. */
 export function updateObjectProp({
     node,
     key,
+    interactables,
     value,
 }: {
     node: Lunch.Node
     key: string
+    interactables: Ref<Lunch.Node[]>
     value: any
 }) {
     // handle and return early if prop is an event
     // (event list from react-three-fiber)
     if (isEventKey(key)) {
-        return addEventListener({ node, key, value })
+        return addEventListener({ node, key, interactables, value })
     }
 
     // update THREE property