lunchboxjs 0.1.4001 → 0.1.4005

package/src/components/index.ts

@@ -1,16 +1,11 @@
 import { h, defineComponent } from 'vue'
-// import Gltf from './Gltf'
-// import { Lunchbox } from '../types'
 import { LunchboxWrapper } from './LunchboxWrapper/LunchboxWrapper'
+import { autoGeneratedComponents } from './autoGeneratedComponents'
 
 import { catalogue } from './catalogue'
 export { catalogue }
 
-export const lunchboxDomComponentNames = [
-    'canvas',
-    'div',
-    'LunchboxWrapper',
-]
+export const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper']
 
 // component creation utility
 const createComponent = (tag: string) =>
@@ -22,190 +17,12 @@ const createComponent = (tag: string) =>
         },
     })
 
-// list of all components to register out of the box
-const autoGeneratedComponents = [
-
-    // ThreeJS basics
-    'mesh',
-    'instancedMesh',
-    'scene',
-    'sprite',
-    'object3D',
-
-    // geometry
-    'instancedBufferGeometry',
-    'bufferGeometry',
-    'boxBufferGeometry',
-    'circleBufferGeometry',
-    'coneBufferGeometry',
-    'cylinderBufferGeometry',
-    'dodecahedronBufferGeometry',
-    'extrudeBufferGeometry',
-    'icosahedronBufferGeometry',
-    'latheBufferGeometry',
-    'octahedronBufferGeometry',
-    'parametricBufferGeometry',
-    'planeBufferGeometry',
-    'polyhedronBufferGeometry',
-    'ringBufferGeometry',
-    'shapeBufferGeometry',
-    'sphereBufferGeometry',
-    'tetrahedronBufferGeometry',
-    'textBufferGeometry',
-    'torusBufferGeometry',
-    'torusKnotBufferGeometry',
-    'tubeBufferGeometry',
-    'wireframeGeometry',
-    'parametricGeometry',
-    'tetrahedronGeometry',
-    'octahedronGeometry',
-    'icosahedronGeometry',
-    'dodecahedronGeometry',
-    'polyhedronGeometry',
-    'tubeGeometry',
-    'torusKnotGeometry',
-    'torusGeometry',
-    // textgeometry has been moved to /examples/jsm/geometries/TextGeometry
-    // 'textGeometry',
-    'sphereGeometry',
-    'ringGeometry',
-    'planeGeometry',
-    'latheGeometry',
-    'shapeGeometry',
-    'extrudeGeometry',
-    'edgesGeometry',
-    'coneGeometry',
-    'cylinderGeometry',
-    'circleGeometry',
-    'boxGeometry',
-
-    // materials
-    'material',
-    'shadowMaterial',
-    'spriteMaterial',
-    'rawShaderMaterial',
-    'shaderMaterial',
-    'pointsMaterial',
-    'meshPhysicalMaterial',
-    'meshStandardMaterial',
-    'meshPhongMaterial',
-    'meshToonMaterial',
-    'meshNormalMaterial',
-    'meshLambertMaterial',
-    'meshDepthMaterial',
-    'meshDistanceMaterial',
-    'meshBasicMaterial',
-    'meshMatcapMaterial',
-    'lineDashedMaterial',
-    'lineBasicMaterial',
-
-    // lights
-    'light',
-    'spotLightShadow',
-    'spotLight',
-    'pointLight',
-    'rectAreaLight',
-    'hemisphereLight',
-    'directionalLightShadow',
-    'directionalLight',
-    'ambientLight',
-    'lightShadow',
-    'ambientLightProbe',
-    'hemisphereLightProbe',
-    'lightProbe',
-
-    // textures
-    'texture',
-    'videoTexture',
-    'dataTexture',
-    'dataTexture3D',
-    'compressedTexture',
-    'cubeTexture',
-    'canvasTexture',
-    'depthTexture',
-
-    // Texture loaders
-    'textureLoader',
-
-    // misc
-    'group',
-    'catmullRomCurve3',
-    'points',
-
-    // helpers
-    'cameraHelper',
-
-    // cameras
-    'camera',
-    'perspectiveCamera',
-    'orthographicCamera',
-    'cubeCamera',
-    'arrayCamera',
-
-    // renderers
-    'webGLRenderer',
-].map(createComponent).reduce((acc, curr) => {
-    ; (acc as any)[curr.name] = curr
+autoGeneratedComponents.map(createComponent).reduce((acc, curr) => {
+    ;(acc as any)[curr.name] = curr
     return acc
 })
 
 export const components = {
     ...autoGeneratedComponents,
-    'Lunchbox': LunchboxWrapper,
-    // Gltf,
+    Lunchbox: LunchboxWrapper,
 }
-
-// console.log(components, Gltf)
-
-/*
-// List copied from r3f
-// https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
-
-// NOT IMPLEMENTED:
-    audioListener: AudioListenerProps
-    positionalAudio: PositionalAudioProps
-
-    lOD: LODProps
-    skinnedMesh: SkinnedMeshProps
-    skeleton: SkeletonProps
-    bone: BoneProps
-    lineSegments: LineSegmentsProps
-    lineLoop: LineLoopProps
-    // see `audio`
-    // line: LineProps
-    immediateRenderObject: ImmediateRenderObjectProps
-
-    // primitive
-    primitive: PrimitiveProps
-
-    // helpers
-    spotLightHelper: SpotLightHelperProps
-    skeletonHelper: SkeletonHelperProps
-    pointLightHelper: PointLightHelperProps
-    hemisphereLightHelper: HemisphereLightHelperProps
-    gridHelper: GridHelperProps
-    polarGridHelper: PolarGridHelperProps
-    directionalLightHelper: DirectionalLightHelperProps
-    boxHelper: BoxHelperProps
-    box3Helper: Box3HelperProps
-    planeHelper: PlaneHelperProps
-    arrowHelper: ArrowHelperProps
-    axesHelper: AxesHelperProps
-
-
-    // misc
-    raycaster: RaycasterProps
-    vector2: Vector2Props
-    vector3: Vector3Props
-    vector4: Vector4Props
-    euler: EulerProps
-    matrix3: Matrix3Props
-    matrix4: Matrix4Props
-    quaternion: QuaternionProps
-    bufferAttribute: BufferAttributeProps
-    instancedBufferAttribute: InstancedBufferAttributeProps
-    color: ColorProps
-    fog: FogProps
-    fogExp2: FogExp2Props
-    shape: ShapeProps
-*/

package/src/core/createNode.ts

@@ -1,11 +1,11 @@
 import { isLunchboxRootNode } from '../utils'
-import { instantiateThreeObject, MiniDom } from '.'
+import { instantiateThreeObject, MiniDom, ensuredScene } from '.'
 import { Lunch } from '..'
 
 /** Create a new Lunchbox comment node. */
 export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {
     const defaults: Omit<Lunch.CommentMeta, keyof Lunch.MetaBase> = {
-        text: options.text ?? ''
+        text: options.text ?? '',
     }
     return new MiniDom.RendererCommentNode({
         ...defaults,
@@ -29,11 +29,10 @@ export function createDomNode(options: Partial<Lunch.DomMeta> = {}) {
     return node
 }
 
-
 /** Create a new Lunchbox text node. */
 export function createTextNode(options: Partial<Lunch.TextMeta> = {}) {
     const defaults: Omit<Lunch.CommentMeta, keyof Lunch.MetaBase> = {
-        text: options.text ?? ''
+        text: options.text ?? '',
     }
     return new MiniDom.RendererTextNode({
         ...options,
@@ -45,13 +44,12 @@ export function createTextNode(options: Partial<Lunch.TextMeta> = {}) {
 /** Create a new Lunchbox standard node. */
 export function createNode<T extends object = THREE.Object3D>(
     options: Partial<Lunch.StandardMeta<T>> = {},
-    props: Lunch.LunchboxMetaProps = {},
+    props: Lunch.LunchboxMetaProps = {}
 ) {
-
     const defaults: Omit<Lunch.StandardMeta<T>, keyof Lunch.MetaBase> = {
         attached: options.attached ?? [],
         attachedArray: options.attachedArray ?? {},
-        instance: options.instance ?? null
+        instance: options.instance ?? null,
     }
     const node = new MiniDom.RendererStandardNode<T>({
         ...options,
@@ -60,14 +58,26 @@ 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: {
                 ...node.props,
                 ...props,
-            }
+            },
         })
     }
 
+    if (node.type === 'scene') {
+        // manually set scene override
+        ensuredScene.value = node as Lunch.Node<THREE.Scene>
+    }
+
     return node
-}
+}

package/src/core/ensure.ts

@@ -1,6 +1,6 @@
 import { allNodes, createNode, MiniDom } from '.'
 import { setupAutoRaycaster } from './interaction/setupAutoRaycaster'
-import { ref } from 'vue'
+import { computed, reactive, ref, WritableComputedRef } from 'vue'
 import { Lunch } from '..'
 
 // ENSURE ROOT
@@ -14,151 +14,187 @@ export function ensureRootNode(options: Partial<Lunch.RootMeta> = {}) {
     return lunchboxRootNode
 }
 
-// ENSURE CAMERA
-// ====================
-export const fallbackCameraUuid = 'FALLBACK_CAMERA'
-export const createdCamera = ref<Lunch.Node<THREE.Camera> | null>(null)
-export const ensureCamera = () => {
-    // look for cameras
-    // TODO: does this need to be more robust?
-    const foundCamera = allNodes.find((node) =>
-        (node as MiniDom.RendererBaseNode).type
-            ?.toLowerCase()
-            .includes('camera')
-    )
-
-    // if we have one, return
-    if (foundCamera) {
-        const cameraAsStandardNode =
-            foundCamera as MiniDom.RendererStandardNode<THREE.Camera>
-        createdCamera.value = cameraAsStandardNode
-        return cameraAsStandardNode
+// 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]
     }
 
-    // otherwise, create a new camera
-    const root = ensureRootNode()
-    const cameraNode = createNode<THREE.Camera>({
-        type: 'PerspectiveCamera',
-        uuid: fallbackCameraUuid,
-        props: {
-            args: [45, 0.5625, 1, 1000],
-        },
-    })
-    root.addChild(cameraNode)
-    createdCamera.value = cameraNode
+    // 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()
+            )
+
+        // if we have one, save and return
+        if (found) {
+            const createdAsNode = found as MiniDom.RendererStandardNode<T>
+            autoCreated[singleType] = createdAsNode
+            return createdAsNode
+        }
+    }
 
-    // add camera to scene
-    ensureScene().instance?.add(cameraNode.instance!)
-    return cameraNode
+    return null
 }
 
-// ENSURE RENDERER
+// GENERIC ENSURE FUNCTION
 // ====================
-export const fallbackRendererUuid = 'FALLBACK_RENDERER'
-export const createdRenderer = ref<Lunch.Node<THREE.Renderer> | null>(null)
-export const ensureRenderer = (
-    fallbackArgs: Array<THREE.WebGLRendererParameters> = [],
-    sugar: {
-        shadow?: Lunch.ShadowSugar
-    } = {}
-) => {
-    // look for renderers
-    // TODO: does this need to be more robust?
-    const foundRenderer = allNodes.find((node) =>
-        (node as MiniDom.RendererBaseNode).type
-            ?.toLowerCase()
-            .includes('renderer')
-    )
-
-    // if we have one, return
-    if (foundRenderer) {
-        const rendererAsStandardNode =
-            foundRenderer as MiniDom.RendererStandardNode<THREE.WebGLRenderer>
-        createdRenderer.value = rendererAsStandardNode
-        return rendererAsStandardNode
+// 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]
     }
 
-    // otherwise, create a new renderer
-    const root = ensureRootNode()
-    const rendererNode = createNode<THREE.WebGLRenderer>(
-        {
-            type: 'WebGLRenderer',
-            uuid: fallbackRendererUuid,
-        },
-        { args: fallbackArgs }
-    )
-
-    // shadow sugar
-    if (sugar?.shadow) {
-        rendererNode.instance!.shadowMap.enabled = true
-        if (typeof sugar.shadow === 'object') {
-            rendererNode.instance!.shadowMap.type = sugar.shadow.type
+    // add type for autoCreated and overrides
+    for (let singleType of pascalCaseTypes) {
+        if (!autoCreated[singleType]) {
+            autoCreated[singleType] = null
+        }
+        if (!overrides[singleType]) {
+            overrides[singleType] = null
         }
     }
 
-    root.addChild(rendererNode)
-    createdRenderer.value = rendererNode
-
-    // return created node
-    return rendererNode
+    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 = buildEnsured<THREE.Camera>(
+//     ['PerspectiveCamera', 'OrthographicCamera'],
+//     fallbackCameraUuid,
+//     {
+//         args: [45, 0.5625, 1, 1000],
+//     }
+// )
+
+// ENSURE RENDERER
+// ====================
+export const fallbackRendererUuid = 'FALLBACK_RENDERER'
+export const v = 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 ? (v.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
+    },
+})
+
 // ENSURE SCENE
 // ====================
 export const fallbackSceneUuid = 'FALLBACK_SCENE'
-export const createdScene = ref<Lunch.Node<THREE.Scene>>()
-export const ensureScene = () => {
-    // look for scenes
-    const foundScene = allNodes.find(
-        (node) =>
-            (node as MiniDom.RendererBaseNode).type?.toLowerCase() === 'scene'
-    )
-    // if we have one, return
-    if (foundScene) {
-        const sceneAsLunchboxNode =
-            foundScene as MiniDom.RendererStandardNode<THREE.Scene>
-        createdScene.value = sceneAsLunchboxNode
-        return sceneAsLunchboxNode
-    }
-
-    // otherwise, create a new scene
-    const root = ensureRootNode()
-    const sceneNode = createNode<THREE.Scene>({
-        type: 'Scene',
-        uuid: fallbackSceneUuid,
-    })
-    root.addChild(sceneNode)
-    createdScene.value = sceneNode
-    return sceneNode
-}
+export const ensuredScene = buildEnsured<THREE.Scene>(
+    'Scene',
+    fallbackSceneUuid
+)
 
 // ENSURE AUTO-RAYCASTER
 export const autoRaycasterUuid = 'AUTO_RAYCASTER'
-export const createdRaycaster = ref<Lunch.Node<THREE.Raycaster> | null>(null)
-export const ensureRaycaster = () => {
-    // look for autoraycaster
-    const found = allNodes.find(
-        (node) => (node as Lunch.Node).uuid === autoRaycasterUuid
-    )
-    // if we have one, return
-    if (found) {
-        const foundAsNode = found as Lunch.Node<THREE.Raycaster>
-        createdRaycaster.value = foundAsNode
-        return foundAsNode
-    }
-
-    // otherwise, create raycaster
-    const root = ensureRootNode()
-    const raycasterNode = createNode<THREE.Raycaster>({
-        type: 'Raycaster',
-        uuid: autoRaycasterUuid,
-    })
-    root.addChild(raycasterNode)
-    createdRaycaster.value = raycasterNode
-
-    // finish auto-raycaster setup
-    setupAutoRaycaster(raycasterNode)
-
-    // done with raycaster
-    return raycasterNode
-}
+// `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>>

package/src/core/instantiateThreeObject/index.ts

@@ -9,7 +9,8 @@ export function instantiateThreeObject<T>(node: Lunch.StandardMeta<T>) {
     // 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]
-    if (!targetClass) throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`
+    if (!targetClass)
+        throw `${uppercaseType} is not part of the THREE namespace! Did you forget to extend? import {extend} from 'lunchbox'; extend({app, YourComponent, ...})`
 
     // what args have we been provided?
     const args: Array<any> = node.props.args ?? []
@@ -17,9 +18,11 @@ export function instantiateThreeObject<T>(node: Lunch.StandardMeta<T>) {
     // replace $attached values with their instances
     // we need to guarantee everything comes back as an array so we can spread $attachedArrays,
     // so we'll use processPropAsArray
-    const argsWrappedInArrays = args.map((arg: any) => { return processPropAsArray({ node, prop: arg }) })
+    const argsWrappedInArrays = args.map((arg: any) => {
+        return processPropAsArray({ node, prop: arg })
+    })
     let processedArgs = [] as Array<any>
-    argsWrappedInArrays.forEach(arr => {
+    argsWrappedInArrays.forEach((arr) => {
         processedArgs = processedArgs.concat(arr)
     })
 
@@ -27,4 +30,3 @@ export function instantiateThreeObject<T>(node: Lunch.StandardMeta<T>) {
 
     return instance as T
 }
-

package/src/core/interaction/index.ts

@@ -4,7 +4,7 @@ import {
     interactables,
     removeInteractable,
 } from './interactables'
-import { ensureRaycaster } from '..'
+import { ensuredRaycaster } from '..'
 import { inputActive } from './input'
 import { currentIntersections } from '.'
 import { Lunch } from '../..'
@@ -36,7 +36,9 @@ export function addEventListener({
 
     // if we need it, let's get/create the main raycaster
     if (interactionsRequiringRaycaster.includes(key)) {
-        ensureRaycaster()
+        // we're not using `v` here, we're just making sure the raycaster has been created
+        // TODO: is this necessary?
+        const v = ensuredRaycaster.value
 
         if (node.instance && !interactables.includes(node)) {
             addInteractable(node)