lunchboxjs 0.1.4017 → 0.2.1001-beta.1

package/src/core/allNodes.ts

@@ -1,4 +0,0 @@
-import { MiniDom } from '.'
-
-// this needs to be in a separate file to ensure it's created immediately
-export const allNodes = [] as Array<MiniDom.BaseNode>

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)
-    }
-}