lunchboxjs 0.1.4001 → 0.1.4005

package/src/core/interaction/setupAutoRaycaster.ts

@@ -1,8 +1,8 @@
 import { interactables } from '.'
 import {
-    createdCamera,
-    createdRaycaster,
-    createdRenderer,
+    ensuredCamera,
+    ensuredRaycaster,
+    ensureRenderer,
     onBeforeRender,
 } from '..'
 import { globals, Lunch } from '../../'
@@ -25,7 +25,7 @@ export const setupAutoRaycaster = (node: Lunch.Node<THREE.Raycaster>) => {
     // add mouse events once renderer is ready
     let stopWatcher: WatchStopHandle | null = null
     stopWatcher = watch(
-        () => createdRenderer.value,
+        () => ensureRenderer.value,
         (renderer) => {
             // make sure renderer exists
             if (!renderer?.instance) return
@@ -91,8 +91,8 @@ export let currentIntersections: Array<{
 
 const autoRaycasterBeforeRender = () => {
     // setup
-    const raycaster = createdRaycaster.value?.instance
-    const camera = createdCamera.value?.instance
+    const raycaster = ensuredRaycaster.value?.instance
+    const camera = ensuredCamera.value?.instance
     if (!raycaster || !camera) return
 
     raycaster.setFromCamera(globals.mousePos.value, camera)

package/src/core/minidom.ts

@@ -9,7 +9,10 @@ import { Lunch } from '..'
 // to make a DOM-like but otherwise agnostic hierarchy structure.
 export namespace MiniDom {
     export class BaseNode {
-        constructor(options: Partial<BaseNode> = {}, parent?: MiniDom.BaseNode) {
+        constructor(
+            options: Partial<BaseNode> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             this.parentNode = options?.parentNode ?? parent ?? null
             this.minidomType = 'MinidomBaseNode'
             this.uuid = options?.uuid ?? createUuid()
@@ -25,7 +28,9 @@ export namespace MiniDom {
         get nextSibling(): MiniDom.BaseNode | null {
             if (!this.parentNode) return null
 
-            const idx = this.parentNode.children.findIndex(n => n.uuid === this.uuid)
+            const idx = this.parentNode.children.findIndex(
+                (n) => n.uuid === this.uuid
+            )
             // return next sibling if we're present and not the last child of the parent
             if (idx !== -1 && idx < this.parentNode.children.length - 1) {
                 return this.parentNode.children[idx + 1]
@@ -34,10 +39,15 @@ export namespace MiniDom {
             return null
         }
 
-        insertBefore(child: MiniDom.BaseNode, anchor?: MiniDom.BaseNode | null) {
+        insertBefore(
+            child: MiniDom.BaseNode,
+            anchor?: MiniDom.BaseNode | null
+        ) {
             child.removeAsChildFromAnyParents()
             child.parentNode = this
-            const anchorIdx = this.children.findIndex(n => n.uuid === anchor?.uuid)
+            const anchorIdx = this.children.findIndex(
+                (n) => n.uuid === anchor?.uuid
+            )
             if (anchorIdx !== -1) {
                 this.children.splice(anchorIdx, 0, child)
             } else {
@@ -45,7 +55,7 @@ export namespace MiniDom {
             }
         }
         removeChild(child: MiniDom.BaseNode) {
-            const idx = this.children.findIndex(n => n?.uuid === child?.uuid)
+            const idx = this.children.findIndex((n) => n?.uuid === child?.uuid)
             if (idx !== -1) {
                 this.children.splice(idx, 1)
             }
@@ -59,7 +69,7 @@ export namespace MiniDom {
                 // remove child from any other parents
                 child.removeAsChildFromAnyParents()
 
-                // add to this node 
+                // add to this node
                 child.parentNode = this
                 this.insertBefore(child, null)
             }
@@ -76,7 +86,7 @@ export namespace MiniDom {
             return output
         }
 
-        /** Drop this node. Removes parent's knowledge of this node 
+        /** Drop this node. Removes parent's knowledge of this node
          * and resets this node's internal parent. */
         drop() {
             // remove parent
@@ -89,13 +99,23 @@ export namespace MiniDom {
         // TODO: depth-first vs breadth-first
         walk(callback: (item: MiniDom.BaseNode) => boolean) {
             const queue = [this, ...this.children] as MiniDom.BaseNode[]
+            const traversed: MiniDom.BaseNode[] = []
             let canContinue = true
             while (queue.length && canContinue) {
                 const current = queue.shift()
                 if (current) {
-                    queue.push(...current.children)
+                    if (traversed.includes(current)) continue
+
+                    traversed.push(current)
+                    queue.push(
+                        ...current.children.filter(
+                            (child) => !traversed.includes(child)
+                        )
+                    )
                     canContinue = callback(current)
-                } else { canContinue = false }
+                } else {
+                    canContinue = false
+                }
             }
         }
 
@@ -104,12 +124,18 @@ export namespace MiniDom {
         minidomType: MiniDom.NodeType
 
         removeAsChildFromAnyParents() {
-            allNodes.forEach(node => node.removeChild(this))
+            allNodes.forEach((node) => node.removeChild(this))
         }
     }
 
-    export class RendererBaseNode extends MiniDom.BaseNode implements Lunch.MetaBase {
-        constructor(options: Partial<Lunch.MetaBase> = {}, parent?: MiniDom.BaseNode) {
+    export class RendererBaseNode
+        extends MiniDom.BaseNode
+        implements Lunch.MetaBase
+    {
+        constructor(
+            options: Partial<Lunch.MetaBase> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             super(options, parent)
             this.minidomType = 'RendererNode'
 
@@ -131,8 +157,8 @@ export namespace MiniDom {
         drop() {
             super.drop()
             // handle remove functions
-            Object.keys(this.eventListenerRemoveFunctions).forEach(key => {
-                this.eventListenerRemoveFunctions[key].forEach(func => func())
+            Object.keys(this.eventListenerRemoveFunctions).forEach((key) => {
+                this.eventListenerRemoveFunctions[key].forEach((func) => func())
             })
         }
     }
@@ -141,18 +167,31 @@ export namespace MiniDom {
     // SPECIFIC RENDERER NODES BELOW
     // ====================
 
-    export class RendererRootNode extends MiniDom.RendererBaseNode implements Lunch.RootMeta {
-        constructor(options: Partial<Lunch.RootMeta> = {}, parent?: MiniDom.BaseNode) {
+    export class RendererRootNode
+        extends MiniDom.RendererBaseNode
+        implements Lunch.RootMeta
+    {
+        constructor(
+            options: Partial<Lunch.RootMeta> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             super(options, parent)
-            this.domElement = options.domElement ?? document.createElement('div')
+            this.domElement =
+                options.domElement ?? document.createElement('div')
         }
 
         domElement: HTMLElement
         isLunchboxRootNode = true
     }
 
-    export class RendererCommentNode extends MiniDom.RendererBaseNode implements Lunch.CommentMeta {
-        constructor(options: Partial<Lunch.CommentMeta> = {}, parent?: MiniDom.BaseNode) {
+    export class RendererCommentNode
+        extends MiniDom.RendererBaseNode
+        implements Lunch.CommentMeta
+    {
+        constructor(
+            options: Partial<Lunch.CommentMeta> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             super(options, parent)
             this.text = options.text ?? ''
         }
@@ -160,17 +199,30 @@ export namespace MiniDom {
         text: string
     }
 
-    export class RendererDomNode extends MiniDom.RendererBaseNode implements Lunch.DomMeta {
-        constructor(options: Partial<Lunch.DomMeta> = {}, parent?: MiniDom.BaseNode) {
+    export class RendererDomNode
+        extends MiniDom.RendererBaseNode
+        implements Lunch.DomMeta
+    {
+        constructor(
+            options: Partial<Lunch.DomMeta> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             super(options, parent)
-            this.domElement = options.domElement ?? document.createElement('div')
+            this.domElement =
+                options.domElement ?? document.createElement('div')
         }
 
         domElement: HTMLElement
     }
 
-    export class RendererTextNode extends MiniDom.RendererBaseNode implements Lunch.TextMeta {
-        constructor(options: Partial<Lunch.TextMeta> = {}, parent?: MiniDom.BaseNode) {
+    export class RendererTextNode
+        extends MiniDom.RendererBaseNode
+        implements Lunch.TextMeta
+    {
+        constructor(
+            options: Partial<Lunch.TextMeta> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             super(options, parent)
             this.text = options.text ?? ''
         }
@@ -178,8 +230,14 @@ export namespace MiniDom {
         text: string
     }
 
-    export class RendererStandardNode<T = THREE.Object3D> extends MiniDom.RendererBaseNode implements Lunch.StandardMeta<T> {
-        constructor(options: Partial<Lunch.StandardMeta<T>> = {}, parent?: MiniDom.BaseNode) {
+    export class RendererStandardNode<T = THREE.Object3D>
+        extends MiniDom.RendererBaseNode
+        implements Lunch.StandardMeta<T>
+    {
+        constructor(
+            options: Partial<Lunch.StandardMeta<T>> = {},
+            parent?: MiniDom.BaseNode
+        ) {
             super(options, parent)
             this.attached = options.attached ?? []
             this.attachedArray = options.attachedArray ?? {}
@@ -199,4 +257,4 @@ export function isMinidomNode(item: any): item is MiniDom.RendererBaseNode {
 }
 
 export const rootNode = new MiniDom.RendererRootNode()
-rootNode.minidomType = 'RootNode'
+rootNode.minidomType = 'RootNode'

package/src/core/update.ts

@@ -1,19 +1,24 @@
-import { ensureRenderer, ensureScene, ensureCamera } from '.'
+import { ensureRenderer, ensuredScene, ensuredCamera } from '.'
 import { Lunch } from '..'
+import { toRaw } from 'vue'
 
 let frameID: number
 
 export const beforeRender = [] as Lunch.UpdateCallback[]
 export const afterRender = [] as Lunch.UpdateCallback[]
 
-export const update: Lunch.UpdateCallback = (opts: {
-    app: Lunch.App
-    renderer?: THREE.Renderer | null
-    scene?: THREE.Scene | null
-    camera?: THREE.Camera | null
-}) => {
-    frameID = requestAnimationFrame(() => update(opts))
+export const update: Lunch.UpdateCallback = (opts) => {
+    // request next frame
+    frameID = requestAnimationFrame(() =>
+        update({
+            app: opts.app,
+            renderer: ensureRenderer.value?.instance,
+            scene: ensuredScene.value.instance,
+            camera: ensuredCamera.value?.instance,
+        })
+    )
 
+    // prep options
     const { app, renderer, scene, camera } = opts
 
     // BEFORE RENDER
@@ -25,7 +30,11 @@ export const update: Lunch.UpdateCallback = (opts: {
 
     // RENDER
     if (renderer && scene && camera) {
-        renderer.render(scene, camera)
+        if (app.customRender) {
+            app.customRender(opts)
+        } else {
+            renderer.render(toRaw(scene), toRaw(camera))
+        }
     }
 
     // AFTER RENDER
@@ -34,23 +43,6 @@ export const update: Lunch.UpdateCallback = (opts: {
             cb(opts)
         }
     })
-
-    /*
-    frameID = requestAnimationFrame(() => update(renderer, scene, camera))
-
-    // Make sure we have all necessary components
-    if (!renderer) {
-        renderer = ensureRenderer().instance
-    }
-    if (!scene) {
-        scene = ensureScene().instance
-    }
-    if (!camera) {
-        camera = ensureCamera().instance
-    }
-
-
-    */
 }
 
 export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
@@ -61,6 +53,15 @@ export const onBeforeRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+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)
+    }
+}
+
 export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     if (index === Infinity) {
         afterRender.push(cb)
@@ -69,6 +70,15 @@ export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+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)
+    }
+}
+
 export const cancelUpdate = () => {
     if (frameID) cancelAnimationFrame(frameID)
 }

package/src/index.ts

@@ -1,21 +1,28 @@
-import { computed, createRenderer, Component, ref } from 'vue'
+import { computed, createRenderer, Component, ref, watch } from 'vue'
 import { nodeOps } from './nodeOps'
 import {
-    createdCamera,
-    createdRenderer,
-    createdScene,
+    // createdCamera,
+    // createdRenderer,
+    // autoScene,
+    ensuredCamera,
+    ensureRenderer,
+    ensuredScene,
     ensureRootNode,
     extend,
     inputActive,
     mousePos,
     rootUuid,
-    update,
 } from './core'
 import { components } from './components'
 import { Lunch } from './types'
 
 export { lunchboxRootNode as lunchboxTree } from './core'
-export { onBeforeRender, onAfterRender, update } from './core'
+export {
+    offAfterRender,
+    offBeforeRender,
+    onBeforeRender,
+    onAfterRender,
+} from './core'
 export * from './types'
 
 // Utilities
@@ -26,22 +33,43 @@ export const globals = {
     dpr: ref(1),
     inputActive,
     mousePos,
+}
+
+export const camera = computed(() => ensuredCamera.value?.instance ?? null)
+export const renderer = computed(() => ensureRenderer.value?.instance ?? null)
+export const scene = computed(() => ensuredScene.value.instance)
 
-    camera: createdCamera,
-    renderer: createdRenderer,
-    scene: createdScene,
+// CUSTOM RENDER SUPPORT
+// ====================
+let app: Lunch.App | null = null
+let queuedCustomRenderFunction:
+    | ((opts: Lunch.UpdateCallbackProperties) => void)
+    | null = null
+
+/** Set a custom render function, overriding the Lunchbox app's default render function.
+ * Changing this requires the user to manually render their scene.
+ */
+export const setCustomRender = (
+    render: (opts: Lunch.UpdateCallbackProperties) => void
+) => {
+    if (app) app.setCustomRender(render)
+    else queuedCustomRenderFunction = render
 }
 
-export const camera = computed(() => globals.camera.value?.instance)
-export const renderer = computed(() => globals.renderer.value?.instance)
-export const scene = computed(() => globals.scene.value?.instance)
+/** Clear the active app's custom render function. */
+export const clearCustomRender = () => {
+    if (app) app.clearCustomRender()
+    else queuedCustomRenderFunction = null
+}
 
+// CREATE APP
+// ====================
 export const createApp = (root: Component) => {
-    const app = createRenderer(nodeOps).createApp(root) as Lunch.App
+    app = createRenderer(nodeOps).createApp(root) as Lunch.App
 
     // 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
@@ -58,22 +86,34 @@ export const createApp = (root: Component) => {
             type: 'root',
             uuid: rootUuid,
         })
-        app.rootNode = rootNode
+        app!.rootNode = rootNode
         const mounted = mount(rootNode, ...args)
         return mounted
     }
 
     // embed .extend function
     app.extend = (targets: Record<string, any>) => {
-        extend({ app, ...targets })
-        return app
+        extend({ app: app!, ...targets })
+        return app!
     }
 
-    // kick update loop
-    // app.update = update
-    // app.update({
-    //     app,
-    // })
+    // prep for custom render support
+    app.setCustomRender = (
+        newRender: (opts: Lunch.UpdateCallbackProperties) => void
+    ) => {
+        app!.customRender = newRender
+    }
+
+    // add queued custom render if we have one
+    if (queuedCustomRenderFunction) {
+        app.setCustomRender(queuedCustomRenderFunction)
+        queuedCustomRenderFunction = null
+    }
+
+    // add custom render removal
+    app.clearCustomRender = () => {
+        app!.customRender = null
+    }
 
     // done
     return app

package/src/nodeOps/createElement.ts

@@ -2,10 +2,7 @@ import { createDomNode, createNode } from '../core'
 import { isLunchboxDomComponent } from '../utils'
 import { Lunch } from '..'
 
-const autoAttach = [
-    'geometry',
-    'material',
-]
+const autoAttach = ['geometry', 'material']
 
 export const createElement = (
     type: string,
@@ -29,7 +26,7 @@ export const createElement = (
     const node = createNode(options)
 
     // autoattach
-    autoAttach.forEach(key => {
+    autoAttach.forEach((key) => {
         if (type.toLowerCase().endsWith(key)) {
             node.props.attach = key
         }
@@ -37,4 +34,4 @@ export const createElement = (
     // TODO: array autoattach
 
     return node
-}
+}

package/src/nodeOps/insert.ts

@@ -3,7 +3,7 @@ import {
     isLunchboxRootNode,
     isLunchboxStandardNode,
 } from '../utils'
-import { ensureRootNode, ensureScene } from '../core'
+import { ensureRootNode, ensuredScene } from '../core'
 import { MiniDom } from '../core/minidom'
 import { Lunch } from '..'
 
@@ -54,11 +54,11 @@ export const insert = (
         // add to scene if parent is the wrapper node
         if (
             child.metaType === 'standardMeta' &&
-            child.type !== 'Scene' &&
+            child.type !== 'scene' &&
             isLunchboxRootNode(effectiveParent)
         ) {
             // ensure scene exists
-            const sceneNode = ensureScene()
+            const sceneNode = ensuredScene.value
 
             if (sceneNode.instance && child) {
                 sceneNode.addChild(child)
@@ -68,7 +68,9 @@ export const insert = (
                 child.instance.isObject3D &&
                 sceneNode.instance
             ) {
-                sceneNode.instance.add(child.instance)
+                if (sceneNode !== child) {
+                    sceneNode.instance.add(child.instance)
+                }
             }
         }
         // add to hierarchy otherwise

package/src/nodeOps/remove.ts

@@ -1,24 +1,38 @@
 import { allNodes, MiniDom } from '../core'
-import { isLunchboxStandardNode } from "../utils"
+import { isLunchboxStandardNode } from '../utils'
+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 => {
+    node.walk((descendant) => {
         subtree.push(descendant)
         return true
     })
 
     // clean up subtree
     subtree.forEach((n) => {
+        const overrideKey = overrideKeys.find(
+            (key) => overrides[key]?.uuid === n.uuid
+        )
+        // if this node is an override, remove it from the overrides list
+        if (overrideKey) {
+            overrides[overrideKey] = null
+        }
+
         if (isLunchboxStandardNode(n)) {
             // try to remove three object
             n.instance?.removeFromParent?.()
 
             // try to dispose three object
-            const dispose = (n.instance as any)?.dispose as (() => void) | null
+            const dispose =
+                // calling `dispose` on a scene triggers an error,
+                // so let's ignore if this node is a scene
+                n.type !== 'scene' &&
+                ((n.instance as any)?.dispose as (() => void) | null)
             if (dispose) dispose.bind(n.instance)()
             n.instance = null
         }
@@ -27,9 +41,9 @@ export const remove = (node: MiniDom.RendererBaseNode) => {
         n.drop()
 
         // remove Lunchbox node from main list
-        const idx = allNodes.findIndex(v => v.uuid === n.uuid)
+        const idx = allNodes.findIndex((v) => v.uuid === n.uuid)
         if (idx !== -1) {
             allNodes.splice(idx, 1)
         }
     })
-}
+}

package/src/types.ts

@@ -7,8 +7,13 @@ type RendererStandardNode<T = THREE.Object3D> =
 export declare namespace Lunch {
     /** Lunchbox app. */
     type App = VueApp<any> & {
+        clearCustomRender: () => void
+        customRender: ((opts: UpdateCallbackProperties) => void) | null
         extend: (v: Record<string, any>) => App
         rootNode: RootNode
+        setCustomRender: (
+            update: (opts: UpdateCallbackProperties) => void
+        ) => void
         update: UpdateCallback
     }
 
@@ -133,8 +138,13 @@ export declare namespace Lunch {
 
     interface WrapperProps {
         background?: string
+        cameraArgs?: any[]
+        cameraLook?: [number, number, number]
+        cameraLookAt?: [number, number, number]
         cameraPosition?: [number, number, number]
         dpr?: number
+        ortho?: boolean
+        orthographic?: boolean
         rendererProperties?: Partial<THREE.WebGLRenderer>
         shadow?: ShadowSugar
         transparent?: boolean