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

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "lunchboxjs",
-    "version": "0.2.1001-beta.0",
+    "version": "0.2.1001-beta.1",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
         "build:tsc": "tsc --project ./utils/tsconfig.lib.json",
         "build:rollup": "rollup -c ./utils/lib-rollup.ts",
         "build:dts": "cp utils/lib-dts.d.ts dist/lunchboxjs.es.d.ts && cp utils/lib-dts.d.ts dist/lunchboxjs.umd.d.ts",
-        "build:lib": "rm -rf js && npm run build:tsc && npm run build:rollup && npm run build:dts",
+        "build:lib": "rimraf js && npm run build:tsc && npm run build:rollup && npm run build:dts",
         "prepare": "npm run build:lib",
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
@@ -36,6 +36,7 @@
         "nice-color-palettes": "3.0.0",
         "prompt": "1.3.0",
         "prompts": "2.4.2",
+        "rimraf": "3.0.2",
         "rollup-plugin-delete": "2.0.0",
         "rollup-plugin-jsx": "1.0.3",
         "rollup-plugin-terser": "7.0.2",

package/src/components/LunchboxEventHandlers.tsx

@@ -0,0 +1,239 @@
+import { defineComponent, onBeforeUnmount, ref, watch } from 'vue'
+import {
+    Lunch,
+    useCamera,
+    useGlobals,
+    useLunchboxInteractables,
+    useRenderer,
+} from '..'
+import * as THREE from 'three'
+import { offBeforeRender, onBeforeRender } from '../core'
+
+export const LunchboxEventHandlers = defineComponent({
+    name: 'LunchboxEventHandlers',
+    setup() {
+        const interactables = useLunchboxInteractables()
+        const camera = useCamera()
+        const renderer = useRenderer()
+        const globals = useGlobals()
+        const mousePos = ref({ x: Infinity, y: Infinity })
+        const inputActive = ref(false)
+
+        let currentIntersections: Array<{
+            element: Lunch.Node
+            intersection: THREE.Intersection<THREE.Object3D>
+        }> = []
+
+        const raycaster = new THREE.Raycaster(
+            new THREE.Vector3(),
+            new THREE.Vector3(0, 0, -1)
+        )
+
+        const fireEventsFromIntersections = ({
+            element,
+            eventKeys,
+            intersection,
+        }: {
+            element: Lunch.Node
+            eventKeys: Array<Lunch.EventKey>
+            intersection: THREE.Intersection<THREE.Object3D>
+        }) => {
+            if (!element) return
+            eventKeys.forEach((eventKey) => {
+                if (element.eventListeners[eventKey]) {
+                    element.eventListeners[eventKey].forEach((cb) => {
+                        cb({ intersection })
+                    })
+                }
+            })
+        }
+
+        // add mouse listener to renderer DOM element when the element is ready
+        const stopWatch = watch(
+            renderer,
+            (v) => {
+                if (!v?.domElement) return
+
+                // we have a DOM element, so let's add mouse listeners
+                const { domElement } = v
+
+                const mouseMoveListener = (evt: PointerEvent) => {
+                    const screenWidth = (domElement.width ?? 1) / globals.dpr
+                    const screenHeight = (domElement.height ?? 1) / globals.dpr
+                    mousePos.value.x = (evt.offsetX / screenWidth) * 2 - 1
+                    mousePos.value.y = -(evt.offsetY / screenHeight) * 2 + 1
+                }
+                const mouseDownListener = () => (inputActive.value = true)
+                const mouseUpListener = () => (inputActive.value = false)
+
+                // add mouse events
+                domElement.addEventListener('pointermove', mouseMoveListener)
+                domElement.addEventListener('pointerdown', mouseDownListener)
+                domElement.addEventListener('pointerup', mouseUpListener)
+
+                // stop the watcher
+                stopWatch()
+            },
+            { immediate: true }
+        )
+
+        const update = () => {
+            const c = camera.value
+            if (!c) return
+
+            raycaster.setFromCamera(mousePos.value, c)
+            const intersections = raycaster.intersectObjects(
+                interactables?.value.map(
+                    (v) => v.instance as any as THREE.Object3D
+                ) ?? []
+            )
+
+            let enterValues: Array<THREE.Intersection<THREE.Object3D>> = [],
+                sameValues: Array<THREE.Intersection<THREE.Object3D>> = [],
+                leaveValues: Array<THREE.Intersection<THREE.Object3D>> = [],
+                entering: Array<{
+                    element: Lunch.Node
+                    intersection: THREE.Intersection<THREE.Object3D>
+                }> = [],
+                staying: Array<{
+                    element: Lunch.Node
+                    intersection: THREE.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?.value.find(
+                        (v) => v.instance?.uuid === intersection.object.uuid
+                    )
+                    if (found) {
+                        entering.push({ element: found, intersection })
+                    }
+                } else {
+                    // existing intersection
+                    sameValues.push(intersection)
+
+                    const found = interactables?.value.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: THREE.Intersection<THREE.Object3D>
+            }> = leaveValues.map((intersection) => {
+                return {
+                    element: interactables?.value.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)
+        }
+
+        // update function
+        onBeforeRender(update)
+
+        const teardown = () => offBeforeRender(update)
+        onBeforeUnmount(teardown)
+
+        const clickEventKeys: Lunch.EventKey[] = [
+            'onClick',
+            'onPointerDown',
+            'onPointerUp',
+        ]
+        watch(inputActive, (isDown) => {
+            // meshes with multiple intersections receive multiple callbacks by default -
+            // let's make it so they only receive one callback of each type per frame.
+            // (ie usually when you click on a mesh, you expect only one click event to fire, even
+            // if there are technically multiple intersections with that mesh)
+            const uuidsInteractedWithThisFrame: string[] = []
+            currentIntersections.forEach((v) => {
+                clickEventKeys.forEach((key) => {
+                    const id = v.element.uuid + key
+                    if (
+                        isDown &&
+                        (key === 'onClick' || key === 'onPointerDown')
+                    ) {
+                        if (!uuidsInteractedWithThisFrame.includes(id)) {
+                            v.element.eventListeners[key]?.forEach((cb) =>
+                                cb({ intersection: v.intersection })
+                            )
+                            uuidsInteractedWithThisFrame.push(id)
+                        }
+                    } else if (!isDown && key === 'onPointerUp') {
+                        if (!uuidsInteractedWithThisFrame.includes(id)) {
+                            v.element.eventListeners[key]?.forEach((cb) =>
+                                cb({ intersection: v.intersection })
+                            )
+                            uuidsInteractedWithThisFrame.push(id)
+                        }
+                    }
+                })
+            })
+        })
+
+        // return arbitrary object to ensure instantiation
+        // TODO: why can't we return a <raycaster/> here?
+        return () => <object3D />
+    },
+})

package/src/components/LunchboxWrapper/LunchboxWrapper.tsx

@@ -8,11 +8,12 @@ import {
     WatchSource,
 } from 'vue'
 import { cancelUpdate, cancelUpdateSource, MiniDom, update } from '../../core'
-import { Lunch, useApp, useGlobals } from '../..'
+import { Lunch, useApp, useGlobals, useLunchboxInteractables } from '../..'
 import * as THREE from 'three'
 import { prepCanvas } from './prepCanvas'
 import { useUpdateGlobals, useStartCallbacks } from '../..'
 import { LunchboxScene } from './LunchboxScene'
+import { LunchboxEventHandlers } from '../LunchboxEventHandlers'
 
 /** fixed & fill styling for container */
 const fillStyle = (position: string) => {
@@ -67,6 +68,8 @@ export const LunchboxWrapper = defineComponent({
             ;(THREE as any).ColorManagement.legacyMode = false
         }
 
+        const interactables = useLunchboxInteractables()
+
         // MOUNT
         // ====================
         onMounted(async () => {
@@ -104,26 +107,21 @@ export const LunchboxWrapper = defineComponent({
             }
             updateGlobals?.({ dpr })
 
-            console.log(1)
             while (
                 !renderer.value?.$el?.instance &&
                 // TODO: remove `as any`
                 !(renderer.value as any)?.component?.ctx.$el?.instance
             ) {
-                console.log(2)
                 await new Promise((r) => requestAnimationFrame(r))
             }
 
-            console.log(3)
             while (
                 !scene.value?.$el?.instance &&
                 // TODO: remove `as any`
                 !(scene.value as any)?.component?.ctx.$el?.instance
             ) {
-                console.log(4)
                 await new Promise((r) => requestAnimationFrame(r))
             }
-            console.log(5)
 
             const normalizedRenderer = (renderer.value?.$el?.instance ??
                 (renderer.value as any)?.component?.ctx.$el
@@ -293,6 +291,9 @@ export const LunchboxWrapper = defineComponent({
                         {...consolidatedCameraProperties}
                     />
                 )}
+
+                {/* Lunchbox interaction handlers */}
+                {interactables?.value.length && <LunchboxEventHandlers />}
             </>
         )
     },

package/src/components/autoGeneratedComponents.ts

@@ -106,6 +106,7 @@ export const autoGeneratedComponents = [
     'group',
     'catmullRomCurve3',
     'points',
+    'raycaster',
 
     // helpers
     'cameraHelper',
@@ -157,7 +158,6 @@ export const autoGeneratedComponents = [
 
 
     // misc
-    raycaster: RaycasterProps
     vector2: Vector2Props
     vector3: Vector3Props
     vector4: Vector4Props

package/src/components/index.ts

@@ -1,9 +1,9 @@
 import { h, defineComponent } from 'vue'
 import { LunchboxWrapper } from './LunchboxWrapper/LunchboxWrapper'
 import { autoGeneratedComponents } from './autoGeneratedComponents'
+import type { Lunch } from '../types'
 
-import { catalogue } from './catalogue'
-export { catalogue }
+export const catalogue: Lunch.Catalogue = {}
 
 // component creation utility
 const createComponent = (tag: string) =>

package/src/core/createNode.ts

@@ -1,6 +1,6 @@
 import { isLunchboxRootNode } from '../utils'
 import { instantiateThreeObject, MiniDom } from '.'
-import { Lunch } from '..'
+import type { Lunch } from '..'
 
 /** Create a new Lunchbox comment node. */
 export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {

package/src/core/extend.ts

@@ -1,6 +1,6 @@
 import { h, defineComponent } from 'vue'
 import { catalogue } from '../components'
-import { Lunch } from '..'
+import type { Lunch } from '..'
 
 const createComponent = (tag: string) =>
     defineComponent({

package/src/core/instantiateThreeObject/index.ts

@@ -1,7 +1,7 @@
 import { catalogue } from '../../components'
 import * as THREE from 'three'
 import { processPropAsArray } from './processProps'
-import { Lunch } from '../..'
+import type { Lunch } from '../..'
 
 export function instantiateThreeObject<T>(node: Lunch.StandardMeta<T>) {
     if (!node.type) return null

package/src/core/instantiateThreeObject/processProps.ts

@@ -1,4 +1,4 @@
-import { Lunch } from '../..'
+import type { Lunch } from '../..'
 
 /** Process props into either themselves or the $attached value */
 export function processProp<T, U = THREE.Object3D>({

package/src/core/interaction.ts

@@ -0,0 +1,55 @@
+import type { Ref } from 'vue'
+import type { Lunch } from '..'
+
+/** 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,
+    interactables,
+    value,
+}: {
+    node: Lunch.Node
+    key: Lunch.EventKey
+    interactables: Ref<Lunch.Node[]>
+    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)) {
+        if (node.instance && !interactables.value.includes(node)) {
+            // add to interactables
+            interactables.value.push(node)
+            node.eventListenerRemoveFunctions[key].push(() => {
+                // remove from interactables
+                const idx = interactables.value.indexOf(node)
+                if (idx !== -1) {
+                    interactables.value.splice(idx, 1)
+                }
+            })
+        }
+    }
+
+    return node
+}
+
+const interactionsRequiringRaycaster = [
+    'onClick',
+    'onPointerUp',
+    'onPointerDown',
+    'onPointerOver',
+    'onPointerOut',
+    'onPointerEnter',
+    'onPointerLeave',
+    'onPointerMove',
+    // 'onPointerMissed',
+]

package/src/core/minidom.ts

@@ -1,5 +1,5 @@
 import { v4 as createUuid } from 'uuid'
-import { Lunch } from '..'
+import type { Lunch } from '..'
 
 // MiniDom recreates DOM node properties and methods.
 // Since Vue 3 is a DOM-first framework, many of its nodeOps depend on

package/src/core/update.ts

@@ -1,18 +1,7 @@
-// import {
-//ensureRenderer,
-// ensuredScene,
-// ensuredCamera,
-// } from '.'
-import { Lunch } from '..'
-import { inject, toRaw, watch, WatchStopHandle } from 'vue'
+import type { Lunch } from '..'
+import { inject, toRaw, watch } from 'vue'
 import * as Keys from '../keys'
 
-// let frameID: number
-// let watchStopHandle: WatchStopHandle
-
-// export const beforeRender = [] as Lunch.UpdateCallback[]
-// export const afterRender = [] as Lunch.UpdateCallback[]
-
 const requestUpdate = (opts: Lunch.UpdateCallbackProperties) => {
     if (typeof opts.app.config.globalProperties.lunchbox.frameId === 'number') {
         cancelAnimationFrame(opts.app.config.globalProperties.lunchbox.frameId)
@@ -117,23 +106,6 @@ export const offAfterRender = (cb: Lunch.UpdateCallback | number) => {
     useBeforeRender().offBeforeRender?.(cb)
 }
 
-// export const onAfterRender = (cb: Lunch.UpdateCallback, index = Infinity) => {
-//     if (index === Infinity) {
-//         afterRender.push(cb)
-//     } else {
-//         afterRender.splice(index, 0, cb)
-//     }
-// }
-
-// 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)
-//     }
-// }
-
 // TODO: document
 export const useCancelUpdate = () => {
     const frameId = inject<number>(Keys.frameIdKey)

package/src/core/updateObjectProp.ts

@@ -1,34 +1,25 @@
 import { isEventKey, isLunchboxStandardNode } from '../utils'
 import { addEventListener } from './interaction'
 import { get, isNumber, set } from 'lodash'
-import { Lunch } from '..'
-
-/** Update the given node so all of its props are current. */
-export function updateAllObjectProps({ node }: { node: Lunch.Node }) {
-    // set props
-    const props = node.props || {}
-    let output = node
-    Object.keys(props).forEach((key) => {
-        output = updateObjectProp({ node, key, value: props[key] })
-    })
-
-    return output
-}
+import type { Lunch } from '..'
+import type { Ref } from 'vue'
 
 /** Update a single prop on a given node. */
 export function updateObjectProp({
     node,
     key,
+    interactables,
     value,
 }: {
     node: Lunch.Node
     key: string
+    interactables: Ref<Lunch.Node[]>
     value: any
 }) {
     // handle and return early if prop is an event
     // (event list from react-three-fiber)
     if (isEventKey(key)) {
-        return addEventListener({ node, key, value })
+        return addEventListener({ node, key, interactables, value })
     }
 
     // update THREE property

package/src/index.ts

@@ -5,8 +5,9 @@ import {
     inject,
     watch,
     reactive,
+    Ref,
 } from 'vue'
-import { nodeOps } from './nodeOps'
+import { createNodeOps } from './nodeOps'
 import {
     ensuredCamera,
     ensureRenderer,
@@ -17,7 +18,6 @@ import {
 import { components } from './components'
 import { Lunch } from './types'
 
-// export { lunchboxRootNode as lunchboxTree } from './core'
 export * from './core'
 export * from './types'
 
@@ -48,7 +48,7 @@ export function useScene(callback: (newScene: THREE.Scene) => void) {
         scene,
         (newVal) => {
             if (!newVal) return
-            callback(newVal.value)
+            callback(newVal.value as THREE.Scene)
         },
         { immediate: true }
     )
@@ -137,11 +137,20 @@ export const onStart = (cb: Lunch.UpdateCallback, index = Infinity) => {
     }
 }
 
+// TODO: document
+export const useLunchboxInteractables = () =>
+    inject<Ref<Lunch.Node[]>>(Keys.lunchboxInteractables)
+
 // CREATE APP
 // ====================
 export const createApp = (root: Component) => {
+    const { nodeOps, interactables } = createNodeOps()
     const app = createRenderer(nodeOps).createApp(root) as Lunch.App
 
+    // provide Lunchbox interaction handlers flag (modified when user references events via
+    // @click, etc)
+    app.provide(Keys.lunchboxInteractables, interactables)
+
     // register all components
     // ====================
     Object.keys(components).forEach((key) => {

package/src/keys.ts

@@ -20,5 +20,6 @@ export const appKey = Symbol()
 export const appRenderersKey = Symbol()
 export const appSceneKey = Symbol()
 export const appCameraKey = Symbol()
+export const lunchboxInteractables = Symbol()
 
 export const startCallbackKey = Symbol()