lunchboxjs 0.2.1001-beta.0 → 0.2.1001-beta.1

package/src/nodeOps/index.ts

@@ -1,70 +1,83 @@
-import { RendererOptions } from 'vue'
+import { RendererOptions, ref } from 'vue'
 import { createElement } from './createElement'
 import { insert } from './insert'
 import { remove } from './remove'
 import { isLunchboxDomComponent, isLunchboxRootNode } from '../utils'
-import {
-    createCommentNode,
-    createTextNode,
-    MiniDom,
-    updateObjectProp,
-} from '../core'
-import { Lunch } from '..'
+import { createCommentNode, createTextNode, updateObjectProp } from '../core'
+import type { MiniDom } from '../core'
+import type { Lunch } from '..'
 
 /*
     Elements are `create`d from the outside in, then `insert`ed from the inside out.
 */
 
-export const nodeOps: RendererOptions<
-    MiniDom.RendererBaseNode,
-    MiniDom.RendererBaseNode
-> = {
-    createElement,
-    createText(text) {
-        return createTextNode({ text })
-    },
-    createComment(text) {
-        return createCommentNode({ text })
-    },
-    insert,
-    nextSibling(node) {
-        const result = node.nextSibling
-        // console.log('found', result)
-        if (!result) return null
-        return result as MiniDom.RendererBaseNode
-    },
-    parentNode(node) {
-        const result = node.parentNode
-        if (!result) return null
-        return result as MiniDom.RendererBaseNode
-    },
-    patchProp(node, key, prevValue, nextValue) {
-        if (isLunchboxDomComponent(node)) {
-            // handle DOM node
-            if (key === 'style') {
-                // special handling for style
-                Object.keys(nextValue).forEach((k) => {
-                    ;(node.domElement.style as any)[k] = nextValue[k]
-                })
-            } else {
-                node.domElement.setAttribute(key, nextValue)
+export const createNodeOps = () => {
+    // APP-LEVEL GLOBALS
+    // ====================
+    // These need to exist at the app level in a place where the node ops can access them.
+    // It'd be better to set these via `app.provide` at app creation, but the node ops need access
+    // to these values before the app is instantiated, so this is the next-best place for them to exist.
+    const interactables = ref([] as Lunch.Node[])
+
+    // NODE OPS
+    // ====================
+    const nodeOps: RendererOptions<
+        MiniDom.RendererBaseNode,
+        MiniDom.RendererBaseNode
+    > = {
+        createElement,
+        createText(text) {
+            return createTextNode({ text })
+        },
+        createComment(text) {
+            return createCommentNode({ text })
+        },
+        insert,
+        nextSibling(node) {
+            const result = node.nextSibling
+            if (!result) return null
+            return result as MiniDom.RendererBaseNode
+        },
+        parentNode(node) {
+            const result = node.parentNode
+            if (!result) return null
+            return result as MiniDom.RendererBaseNode
+        },
+        patchProp(node, key, prevValue, nextValue) {
+            if (isLunchboxDomComponent(node)) {
+                // handle DOM node
+                if (key === 'style') {
+                    // special handling for style
+                    Object.keys(nextValue).forEach((k) => {
+                        ;(node.domElement.style as any)[k] = nextValue[k]
+                    })
+                } else {
+                    node.domElement.setAttribute(key, nextValue)
+                }
+                return
+            }
+
+            // ignore if root node, or Lunchbox internal prop
+            if (isLunchboxRootNode(node) || key.startsWith('$')) {
+                return
             }
-            return
-        }
 
-        // ignore if root node, or Lunchbox internal prop
-        if (isLunchboxRootNode(node) || key.startsWith('$')) {
-            return
-        }
+            // otherwise, update prop
+            updateObjectProp({
+                node: node as Lunch.Node,
+                key,
+                interactables,
+                value: nextValue,
+            })
+        },
+        remove,
+        setElementText() {
+            // noop
+        },
+        setText() {
+            // noop
+        },
+    }
 
-        // otherwise, update prop
-        updateObjectProp({ node: node as Lunch.Node, key, value: nextValue })
-    },
-    remove,
-    setElementText() {
-        // noop
-    },
-    setText() {
-        // noop
-    },
+    return { nodeOps, interactables }
 }

package/src/types.ts

@@ -36,10 +36,6 @@ export declare namespace Lunch {
         update: UpdateCallback
     }
 
-    // type AppGlobals = {
-    //     /** Device pixel resolution */
-    //     dpr: number
-    // }
     type AppGlobals = App['config']['globalProperties']['lunchbox']
 
     type AppGlobalsUpdate = (newValue: Partial<AppGlobals>) => void
@@ -159,10 +155,6 @@ export declare namespace Lunch {
         renderer?: THREE.Renderer | null
         camera?: THREE.Camera | null
         updateSource?: WatchSource | null
-
-        // sceneNode: Node<THREE.Scene> | null
-        // rendererNode: Node<THREE.Renderer> | null
-        // cameraNode: Node<THREE.Camera> | null
     }
 
     /** Universally unique identifier. */

package/src/components/catalogue.ts

@@ -1,3 +0,0 @@
-import { Lunch } from '..'
-
-export const catalogue: Lunch.Catalogue = {}

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,232 +0,0 @@
-// import { interactables } from '.'
-// import {
-//     ensuredCamera,
-//     // ensuredRaycaster,
-//     ensureRenderer,
-//     onBeforeRender,
-// } from '..'
-import {
-    // globals,
-    Lunch,
-    useGlobals,
-} 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
-
-//     // TODO: inject doesn't work here. replace this raycaster with a component so we can
-//     // `inject` in `setup`?
-//     const appLevelGlobals = { dpr: window.devicePixelRatio } //useGlobals()
-
-//     // 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) /
-//                     appLevelGlobals.dpr
-//                 const screenHeight =
-//                     (renderer.instance!.domElement.height ?? 1) /
-//                     appLevelGlobals.dpr
-
-//                 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 })
-//             })
-//         }
-//     })
-// }