lunchboxjs 0.1.4017 → 0.2.1001-beta.1

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/ensure.ts

@@ -1,203 +1,16 @@
-import { allNodes, createNode, isMinidomNode, MiniDom } from '.'
-import { setupAutoRaycaster } from './interaction/setupAutoRaycaster'
-import { computed, reactive, ref, WritableComputedRef } from 'vue'
-import { Lunch } from '..'
+import { ComputedRef, inject } from 'vue'
+import * as Keys from '../keys'
 
-// ENSURE ROOT
-// ====================
-export const rootUuid = 'LUNCHBOX_ROOT'
-export let lunchboxRootNode: MiniDom.RendererRootNode
-export function ensureRootNode(options: Partial<Lunch.RootMeta> = {}) {
-    if (!lunchboxRootNode) {
-        lunchboxRootNode = new MiniDom.RendererRootNode(options)
-    }
-    return lunchboxRootNode
-}
-
-// This is used in `buildEnsured` below and `LunchboxWrapper`
-/** Search the overrides record and the node tree for a node in the given types */
-export function tryGetNodeWithInstanceType<T extends THREE.Object3D>(
-    pascalCaseTypes: string | string[]
-) {
-    if (!Array.isArray(pascalCaseTypes)) {
-        pascalCaseTypes = [pascalCaseTypes]
-    }
-
-    // default to override if we have one
-    for (let singleType of pascalCaseTypes) {
-        if (overrides[singleType]) return overrides[singleType] as Lunch.Node<T>
-    }
-
-    // look for auto-created node
-    for (let singleType of pascalCaseTypes) {
-        const found =
-            autoCreated[singleType] ||
-            allNodes.find(
-                (node) =>
-                    (node as MiniDom.RendererBaseNode).type?.toLowerCase() ===
-                    singleType.toLowerCase()
-            )
-
-        // cancel if found example is marked !isDefault
-        if (
-            isMinidomNode(found) &&
-            (found.props['is-default'] === false ||
-                !found.props['isDefault'] === false)
-        ) {
-            return null
-        }
-
-        // if we have one, save and return
-        if (found) {
-            const createdAsNode = found as MiniDom.RendererStandardNode<T>
-            autoCreated[singleType] = createdAsNode
-            return createdAsNode
-        }
-    }
-
-    return null
-}
-
-// GENERIC ENSURE FUNCTION
-// ====================
-// Problem:
-// I want to make sure an object of type Xyz exists in my Lunchbox app.
-// If it doesn't exist, I want to create it and add it to the root node.
-//
-// Solution:
-// export const ensuredXyz = buildEnsured<Xyz>('Xyz', 'FALLBACK_XYZ')
-//
-// Now in other components, you can do both:
-// import { ensuredXyz }
-// ensuredXyz.value (...)
-// and:
-// ensuredXyz.value = ...
-export const autoCreated: Record<string, Lunch.Node | null> = reactive({})
-export const overrides: Record<string, Lunch.Node | null> = reactive({})
-
-/**
- * Build a computed ensured value with a getter and setter.
- * @param pascalCaseTypes List of types this can be. Will autocreate first type if array provided.
- * @param fallbackUuid Fallback UUID to use.
- * @param props Props to pass to autocreated element
- * @returns Computed getter/setter for ensured object.
- */
-function buildEnsured<T extends THREE.Object3D>(
-    pascalCaseTypes: string | string[],
-    fallbackUuid: string,
-    props: Record<string, any> = {},
-    callback: ((node: MiniDom.RendererStandardNode<T>) => void) | null = null
-) {
-    // make sure we've got an array
-    if (!Array.isArray(pascalCaseTypes)) {
-        pascalCaseTypes = [pascalCaseTypes]
-    }
-
-    // add type for autoCreated and overrides
-    for (let singleType of pascalCaseTypes) {
-        if (!autoCreated[singleType]) {
-            autoCreated[singleType] = null
-        }
-        if (!overrides[singleType]) {
-            overrides[singleType] = null
-        }
-    }
-
-    return computed({
-        get(): MiniDom.RendererStandardNode<T> {
-            // try to get existing type
-            const existing = tryGetNodeWithInstanceType<T>(
-                pascalCaseTypes as string[]
-            )
-            if (existing) return existing
-
-            // otherwise, create a new node
-            const root = ensureRootNode()
-            const node = createNode<T>({
-                type: pascalCaseTypes[0],
-                uuid: fallbackUuid,
-                props,
-            })
-            root.addChild(node)
-            autoCreated[pascalCaseTypes[0]] = node
-            if (callback) {
-                callback(node)
-            }
-            return node
-        },
-        set(val: MiniDom.RendererStandardNode<T>) {
-            const t = val.type ?? ''
-            const pascalType = t[0].toUpperCase() + t.slice(1)
-            overrides[pascalType] = val
-        },
-    })
-}
-
-// ENSURE CAMERA
-// ====================
-export const fallbackCameraUuid = 'FALLBACK_CAMERA'
-export const defaultCamera = buildEnsured(
-    ['PerspectiveCamera', 'OrthographicCamera'],
-    fallbackCameraUuid,
-    { args: [45, 0.5625, 1, 1000] }
-) as unknown as WritableComputedRef<Lunch.Node<THREE.Camera>>
-/** Special value to be changed ONLY in `LunchboxWrapper`.
- * Functions waiting for a Camera need to wait for this to be true.  */
-export const cameraReady = ref(false)
-
-export const ensuredCamera = computed<Lunch.Node<THREE.Camera> | null>({
-    get() {
-        return (
-            cameraReady.value ? (defaultCamera.value as any) : (null as any)
-        ) as any
-    },
-    set(val: any) {
-        const t = val.type ?? ''
-        const pascalType = t[0].toUpperCase() + t.slice(1)
-        overrides[pascalType] = val as any
-    },
-})
+export const ensuredCamera = <T extends THREE.Camera = THREE.Camera>() =>
+    inject<ComputedRef<T>>(Keys.appCameraKey)!
 
 // ENSURE RENDERER
 // ====================
-export const fallbackRendererUuid = 'FALLBACK_RENDERER'
-export const ensuredRenderer = buildEnsured(
-    // TODO: ensure support for css/svg renderers
-    ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
-    fallbackRendererUuid,
-    {}
-) as unknown as WritableComputedRef<Lunch.Node<THREE.WebGLRenderer>>
-/** Special value to be changed ONLY in `LunchboxWrapper`.
- * Functions waiting for a Renderer need to wait for this to be true.  */
-export const rendererReady = ref(false)
-
-export const ensureRenderer = computed<Lunch.Node<THREE.WebGLRenderer> | null>({
-    get() {
-        return (
-            rendererReady.value ? (ensuredRenderer.value as any) : (null as any)
-        ) as any
-    },
-    set(val: any) {
-        const t = val.type ?? ''
-        const pascalType = t[0].toUpperCase() + t.slice(1)
-        overrides[pascalType] = val as any
-    },
-})
+export const ensureRenderer = <
+    T extends THREE.Renderer = THREE.WebGLRenderer
+>() => inject<ComputedRef<T>>(Keys.appRenderersKey)
 
 // ENSURE SCENE
 // ====================
-export const fallbackSceneUuid = 'FALLBACK_SCENE'
-export const ensuredScene = buildEnsured<THREE.Scene>(
-    'Scene',
-    fallbackSceneUuid
-)
-
-// ENSURE AUTO-RAYCASTER
-export const autoRaycasterUuid = 'AUTO_RAYCASTER'
-// `unknown` is intentional here - we need to typecast the node since Raycaster isn't an Object3D
-export const ensuredRaycaster = buildEnsured(
-    'Raycaster',
-    autoRaycasterUuid,
-    {},
-    (node) => setupAutoRaycaster(node as unknown as Lunch.Node<THREE.Raycaster>)
-) as unknown as WritableComputedRef<Lunch.Node<THREE.Raycaster>>
+export const ensuredScene = <T extends THREE.Scene = THREE.Scene>() =>
+    inject<ComputedRef<T>>(Keys.appSceneKey)

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,8 @@
-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'