lunchboxjs 0.1.4018 → 0.2.1001-beta.2

package/src/core/ensure.ts

@@ -1,203 +0,0 @@
-import { allNodes, createNode, isMinidomNode, MiniDom } from '.'
-import { setupAutoRaycaster } from './interaction/setupAutoRaycaster'
-import { computed, reactive, ref, WritableComputedRef } from 'vue'
-import { Lunch } from '..'
-
-// 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
-    },
-})
-
-// 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
-    },
-})
-
-// 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>>

package/src/core/interaction/index.ts

@@ -1,102 +0,0 @@
-import { watch } from 'vue'
-import {
-    addInteractable,
-    interactables,
-    removeInteractable,
-} from './interactables'
-import { ensuredRaycaster } from '..'
-import { inputActive } from './input'
-import { currentIntersections } from '.'
-import { Lunch } from '../..'
-
-export * from './input'
-export * from './interactables'
-export * from './setupAutoRaycaster'
-
-/** 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,
-    value,
-}: {
-    node: Lunch.Node
-    key: Lunch.EventKey
-    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)) {
-        // 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)
-            node.eventListenerRemoveFunctions[key].push(() =>
-                removeInteractable(node)
-            )
-        }
-    }
-
-    // register click, pointerdown, pointerup
-    if (key === 'onClick' || key === 'onPointerDown' || key === 'onPointerUp') {
-        const stop = watch(
-            () => inputActive.value,
-            (isDown) => {
-                const idx = currentIntersections
-                    .map((v) => v.element)
-                    .findIndex(
-                        (v) =>
-                            v.instance &&
-                            v.instance.uuid === node.instance?.uuid
-                    )
-                if (idx !== -1) {
-                    if (
-                        isDown &&
-                        (key === 'onClick' || key === 'onPointerDown')
-                    ) {
-                        node.eventListeners[key].forEach((func) => {
-                            func({
-                                intersection:
-                                    currentIntersections[idx].intersection,
-                            })
-                        })
-                    } else if (!isDown && key === 'onPointerUp') {
-                        node.eventListeners[key].forEach((func) => {
-                            func({
-                                intersection:
-                                    currentIntersections[idx].intersection,
-                            })
-                        })
-                    }
-                }
-            }
-        )
-
-        node.eventListenerRemoveFunctions[key].push(stop)
-    }
-
-    return node
-}
-
-const interactionsRequiringRaycaster = [
-    'onClick',
-    'onPointerUp',
-    'onPointerDown',
-    'onPointerOver',
-    'onPointerOut',
-    'onPointerEnter',
-    'onPointerLeave',
-    'onPointerMove',
-    // 'onPointerMissed',
-]

package/src/core/interaction/input.ts

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

package/src/core/interaction/interactables.ts

@@ -1,14 +0,0 @@
-import { Lunch } from '../..'
-
-export const interactables: Array<Lunch.Node> = []
-
-export const addInteractable = (target: Lunch.Node) => {
-    interactables.push(target)
-}
-
-export const removeInteractable = (target: Lunch.Node) => {
-    const idx = interactables.indexOf(target)
-    if (idx !== -1) {
-        interactables.splice(idx, 1)
-    }
-}

package/src/core/interaction/setupAutoRaycaster.ts

@@ -1,224 +0,0 @@
-import { interactables } from '.'
-import {
-    ensuredCamera,
-    ensuredRaycaster,
-    ensureRenderer,
-    onBeforeRender,
-} from '..'
-import { globals, Lunch } from '../../'
-import { ref, watch, WatchStopHandle } from 'vue'
-import { inputActive } from './input'
-import { Intersection } from 'three'
-
-let mouseMoveListener: (event: MouseEvent) => void
-let mouseDownListener: (event: MouseEvent) => void
-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
-
-    if (!instance) return
-
-    // add mouse events once renderer is ready
-    let stopWatcher: WatchStopHandle | null = null
-    stopWatcher = watch(
-        () => ensureRenderer.value,
-        (renderer) => {
-            // make sure renderer exists
-            if (!renderer?.instance) return
-
-            // cancel early if autoraycaster exists
-            if (autoRaycasterEventsInitialized) {
-                if (stopWatcher) stopWatcher()
-                return
-            }
-
-            // create mouse events
-            mouseMoveListener = (evt) => {
-                const screenWidth =
-                    (renderer.instance!.domElement.width ?? 1) /
-                    globals.dpr.value
-                const screenHeight =
-                    (renderer.instance!.domElement.height ?? 1) /
-                    globals.dpr.value
-
-                mousePos.value.x = (evt.offsetX / screenWidth) * 2 - 1
-                mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1
-            }
-            mouseDownListener = () => (inputActive.value = true)
-            mouseUpListener = () => (inputActive.value = false)
-
-            // add mouse events
-            renderer.instance.domElement.addEventListener(
-                'mousemove',
-                mouseMoveListener
-            )
-            renderer.instance.domElement.addEventListener(
-                'mousedown',
-                mouseDownListener
-            )
-            renderer.instance.domElement.addEventListener(
-                'mouseup',
-                mouseUpListener
-            )
-
-            // TODO: add touch events
-
-            // 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
-
-            // cancel setup watcher
-            if (stopWatcher) {
-                stopWatcher()
-            }
-        },
-        { immediate: true }
-    )
-}
-
-// AUTO-RAYCASTER CALLBACK
-// ====================
-export let currentIntersections: Array<{
-    element: Lunch.Node
-    intersection: Intersection<THREE.Object3D>
-}> = []
-
-const autoRaycasterBeforeRender = () => {
-    // setup
-    const raycaster = ensuredRaycaster.value?.instance
-    const camera = ensuredCamera.value?.instance
-    if (!raycaster || !camera) return
-
-    raycaster.setFromCamera(globals.mousePos.value, camera)
-    const intersections = raycaster.intersectObjects(
-        interactables.map((v) => v.instance as any as THREE.Object3D)
-    )
-
-    let enterValues: Array<Intersection<THREE.Object3D>> = [],
-        sameValues: Array<Intersection<THREE.Object3D>> = [],
-        leaveValues: Array<Intersection<THREE.Object3D>> = [],
-        entering: Array<{
-            element: Lunch.Node
-            intersection: Intersection<THREE.Object3D>
-        }> = [],
-        staying: Array<{
-            element: Lunch.Node
-            intersection: Intersection<THREE.Object3D>
-        }> = []
-
-    // intersection arrays
-    leaveValues = currentIntersections.map((v) => v.intersection)
-
-    // element arrays
-    intersections?.forEach((intersection) => {
-        const currentIdx = currentIntersections.findIndex(
-            (v) => v.intersection.object === intersection.object
-        )
-        if (currentIdx === -1) {
-            // new intersection
-            enterValues.push(intersection)
-
-            const found = interactables.find(
-                (v) => v.instance?.uuid === intersection.object.uuid
-            )
-            if (found) {
-                entering.push({ element: found, intersection })
-            }
-        } else {
-            // existing intersection
-            sameValues.push(intersection)
-
-            const found = interactables.find(
-                (v) => v.instance?.uuid === intersection.object.uuid
-            )
-            if (found) {
-                staying.push({ element: found, intersection })
-            }
-        }
-        // this is a current intersection, so it won't be in our `leave` array
-        const leaveIdx = leaveValues.findIndex(
-            (v) => v.object.uuid === intersection.object.uuid
-        )
-        if (leaveIdx !== -1) {
-            leaveValues.splice(leaveIdx, 1)
-        }
-    })
-
-    const leaving: Array<{
-        element: Lunch.Node
-        intersection: Intersection<THREE.Object3D>
-    }> = leaveValues.map((intersection) => {
-        return {
-            element: interactables.find(
-                (interactable) =>
-                    interactable.instance?.uuid === intersection.object.uuid
-            ) as any as Lunch.Node,
-            intersection,
-        }
-    })
-
-    // new interactions
-    entering.forEach(({ element, intersection }) => {
-        fireEventsFromIntersections({
-            element,
-            eventKeys: ['onPointerEnter'],
-            intersection,
-        })
-    })
-
-    // unchanged interactions
-    staying.forEach(({ element, intersection }) => {
-        const eventKeys: Array<Lunch.EventKey> = [
-            'onPointerOver',
-            'onPointerMove',
-        ]
-        fireEventsFromIntersections({ element, eventKeys, intersection })
-    })
-
-    // exited interactions
-    leaving.forEach(({ element, intersection }) => {
-        const eventKeys: Array<Lunch.EventKey> = [
-            'onPointerLeave',
-            'onPointerOut',
-        ]
-        fireEventsFromIntersections({ element, eventKeys, intersection })
-    })
-
-    currentIntersections = ([] as any).concat(entering, staying)
-}
-
-// utility function for firing multiple callbacks and multiple events on a Lunchbox.Element
-const fireEventsFromIntersections = ({
-    element,
-    eventKeys,
-    intersection,
-}: {
-    element: Lunch.Node
-    eventKeys: Array<Lunch.EventKey>
-    intersection: Intersection<THREE.Object3D>
-}) => {
-    if (!element) return
-    eventKeys.forEach((eventKey) => {
-        if (element.eventListeners[eventKey]) {
-            element.eventListeners[eventKey].forEach((cb) => {
-                cb({ intersection })
-            })
-        }
-    })
-}

package/src/core/start.ts

@@ -1,11 +0,0 @@
-import { Lunch } from '..'
-
-export const startCallbacks = [] as Lunch.UpdateCallback[]
-
-export const onStart = (cb: Lunch.UpdateCallback, index = Infinity) => {
-    if (index === Infinity) {
-        startCallbacks.push(cb)
-    } else {
-        startCallbacks.splice(index, 0, cb)
-    }
-}