lunchboxjs 0.2.1001-beta.0 → 0.2.1001-beta.301

package/extras/OrbitControlsWrapper.vue

@@ -11,15 +11,8 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, ref, watch } from 'vue'
-import {
-    onBeforeRender,
-    globals,
-    Lunch,
-    // camera,
-    useRenderer,
-    useCamera,
-} from '../src'
+import { computed, ref } from 'vue'
+import { onBeforeRender, Lunch, useCamera, useRenderer } from '../src'
 
 // props
 const props = defineProps<{
@@ -33,9 +26,6 @@ const ready = computed(() => {
 const camera = useCamera()
 const renderer = useRenderer()
 const orbitArgs = computed(() => [camera.value, renderer.value?.domElement])
-// watch(() => orbitArgs.value, console.log, { immediate: true })
-// console.log(renderer)
-watch(camera, console.log)
 
 // update
 const controls = ref<Lunch.LunchboxComponent>()

package/package.json

@@ -1,19 +1,22 @@
 {
     "name": "lunchboxjs",
-    "version": "0.2.1001-beta.0",
+    "version": "0.2.1001-beta.301",
     "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",
         "docs:serve": "vitepress serve docs",
         "demo:create": "node utils/createExample"
     },
+    "engines": {
+        "node": ">=16.0.0"
+    },
     "dependencies": {
         "uuid": "8.3.2",
         "vue": "^3.2.16"
@@ -36,6 +39,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,237 @@
+import { defineComponent, onBeforeUnmount, ref, watch } from 'vue'
+import {
+    useCamera,
+    Lunch,
+    useGlobals,
+    useLunchboxInteractables,
+    onRendererReady,
+} from '..'
+import * as THREE from 'three'
+import { offBeforeRender, onBeforeRender } from '../core'
+
+export const LunchboxEventHandlers = defineComponent({
+    name: 'LunchboxEventHandlers',
+    setup() {
+        const interactables = useLunchboxInteractables()
+        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
+        onRendererReady((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)
+        })
+
+        const camera = useCamera()
+        const update = () => {
+            const c = camera.value
+            if (!c) return
+
+            // console.log(camera.value)
+
+            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) => {
+            // run raycaster on click (necessary when `update` is not automatically called,
+            // for example in `updateSource` functions)
+            update()
+
+            // 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

@@ -1,18 +1,23 @@
 import {
+    computed,
     defineComponent,
     onBeforeUnmount,
     onMounted,
     PropType,
     reactive,
     ref,
+    watch,
     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'
+import * as Keys from '../../keys'
+import { waitFor } from '../../utils'
 
 /** fixed & fill styling for container */
 const fillStyle = (position: string) => {
@@ -67,6 +72,8 @@ export const LunchboxWrapper = defineComponent({
             ;(THREE as any).ColorManagement.legacyMode = false
         }
 
+        const interactables = useLunchboxInteractables()
+
         // MOUNT
         // ====================
         onMounted(async () => {
@@ -104,26 +111,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
@@ -214,6 +216,43 @@ export const LunchboxWrapper = defineComponent({
         const canvasFillStyle =
             props.sizePolicy === 'container' ? 'static' : 'fixed'
 
+        // REACTIVE CUSTOM CAMERAS
+        // ====================
+        // find first camera with `type.name` property
+        // (which indicates a Lunch.Node)
+        const activeCamera = computed(() => {
+            const output = context.slots
+                ?.camera?.()
+                .find((c) => (c.type as any)?.name)
+            if (output) {
+                return output
+            }
+
+            return output
+        })
+
+        // TODO: make custom cameras reactive
+        watch(
+            activeCamera,
+            async (newVal, oldVal) => {
+                // console.log('got camera', newVal)
+                if (newVal && newVal?.props?.key !== oldVal?.props?.key) {
+                    // TODO: remove cast
+                    camera.value = newVal as any
+
+                    // TODO: why isn't this updating app camera?
+                    // const el = await waitFor(() => newVal.el)
+                    // console.log(el)
+                    // camera.value = el
+                    // console.log(newVal.uuid)
+                    // updateGlobals?.({ camera: el })
+                }
+            },
+            { immediate: true }
+        )
+
+        // RENDER FUNCTION
+        // ====================
         return () => (
             <>
                 {/* use renderer slot if provided... */}
@@ -272,7 +311,7 @@ export const LunchboxWrapper = defineComponent({
                 {/* use camera slot if provided... */}
                 {context.slots?.camera?.()?.length ? (
                     // TODO: remove `any` cast
-                    (camera.value = context.slots?.camera?.()[0] as any)
+                    camera.value
                 ) : props.ortho || props.orthographic ? (
                     <orthographicCamera
                         ref={camera}
@@ -293,6 +332,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/index.ts

@@ -1,5 +1,4 @@
 export * from './createNode'
-export * from './ensure'
 export * from './interaction'
 export * from './extend'
 export * from './instantiateThreeObject'

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