lunchboxjs 0.2.1020 → 2.0.0-beta.1

package/dist/lunchboxjs.umd.d.ts

@@ -1 +0,0 @@
-export * from "../src/index"

package/src/components/LunchboxEventHandlers.tsx

@@ -1,237 +0,0 @@
-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/LunchboxScene.tsx

@@ -1,8 +0,0 @@
-import { defineComponent } from 'vue'
-
-export const LunchboxScene = defineComponent({
-    name: 'LunchboxScene',
-    setup(props, { slots }) {
-        return () => <scene>{slots.default?.()}</scene>
-    },
-})

package/src/components/LunchboxWrapper/LunchboxWrapper.tsx

@@ -1,341 +0,0 @@
-import {
-    computed,
-    defineComponent,
-    onBeforeUnmount,
-    onMounted,
-    PropType,
-    reactive,
-    ref,
-    watch,
-    WatchSource,
-} from 'vue'
-import { cancelUpdate, cancelUpdateSource, MiniDom, update } from '../../core'
-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) => {
-    return {
-        position,
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-        width: '100%',
-        height: '100%',
-        display: 'block',
-    }
-}
-
-export const LunchboxWrapper = defineComponent({
-    name: 'Lunchbox',
-    props: {
-        // These should match the Lunchbox.WrapperProps interface
-        background: String,
-        cameraArgs: Array,
-        cameraLook: Array as unknown as PropType<Lunch.Vector3AsArray>,
-        cameraLookAt: Array as unknown as PropType<Lunch.Vector3AsArray>,
-        cameraPosition: Array as unknown as PropType<Lunch.Vector3AsArray>,
-        dpr: Number,
-        ortho: Boolean,
-        orthographic: Boolean,
-        r3f: Boolean,
-        rendererArguments: Object,
-        rendererProperties: Object,
-        sizePolicy: String as PropType<Lunch.SizePolicy>,
-        shadow: [Boolean, Object],
-        transparent: Boolean,
-        zoom: Number,
-        updateSource: Object as PropType<WatchSource>,
-    },
-    setup(props, context) {
-        const canvas = ref<MiniDom.RendererDomNode>()
-        let dpr = props.dpr ?? -1
-        const container = ref<MiniDom.RendererDomNode>()
-        const renderer = ref<Lunch.LunchboxComponent<THREE.Renderer>>()
-        const camera = ref<Lunch.LunchboxComponent<THREE.Camera>>()
-        const scene = ref<Lunch.LunchboxComponent<THREE.Scene>>()
-        const globals = useGlobals()
-        const updateGlobals = useUpdateGlobals()
-        const app = useApp()
-        const consolidatedCameraProperties: Record<string, any> = reactive({})
-        const startCallbacks = useStartCallbacks()
-
-        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
-        if (props.r3f && (THREE as any)?.ColorManagement) {
-            ;(THREE as any).ColorManagement.legacyMode = false
-        }
-
-        const interactables = useLunchboxInteractables()
-
-        // MOUNT
-        // ====================
-        onMounted(async () => {
-            // canvas needs to exist (or user needs to handle it on their own)
-            if (!canvas.value && !context.slots?.renderer?.()?.length)
-                throw new Error('missing canvas')
-
-            // no camera provided, so let's create one
-            if (!context.slots?.camera?.()?.length) {
-                if (props.cameraPosition) {
-                    consolidatedCameraProperties.position = props.cameraPosition
-                }
-                if (props.cameraLook || props.cameraLookAt) {
-                    consolidatedCameraProperties.lookAt =
-                        props.cameraLook || props.cameraLookAt
-                }
-                if (props.zoom !== undefined) {
-                    consolidatedCameraProperties.zoom = props.zoom
-                }
-            }
-
-            // SCENE
-            // ====================
-            // set background color
-            if (scene.value?.$el?.instance && props.background) {
-                scene.value.$el.instance.background = new THREE.Color(
-                    props.background
-                )
-            }
-
-            // MISC PROPERTIES
-            // ====================
-            if (dpr === -1) {
-                dpr = window.devicePixelRatio
-            }
-            updateGlobals?.({ dpr })
-
-            while (
-                !renderer.value?.$el?.instance &&
-                // TODO: remove `as any`
-                !(renderer.value as any)?.component?.ctx.$el?.instance
-            ) {
-                await new Promise((r) => requestAnimationFrame(r))
-            }
-
-            while (
-                !scene.value?.$el?.instance &&
-                // TODO: remove `as any`
-                !(scene.value as any)?.component?.ctx.$el?.instance
-            ) {
-                await new Promise((r) => requestAnimationFrame(r))
-            }
-
-            const normalizedRenderer = (renderer.value?.$el?.instance ??
-                (renderer.value as any)?.component?.ctx.$el
-                    ?.instance) as THREE.WebGLRenderer
-
-            normalizedRenderer.setPixelRatio(globals.dpr)
-
-            const normalizedScene = (scene.value?.$el?.instance ??
-                (scene.value as any)?.component?.ctx.$el
-                    ?.instance) as THREE.Scene
-
-            const normalizedCamera = (camera.value?.$el?.instance ??
-                (camera.value as any)?.component?.ctx.$el
-                    ?.instance) as THREE.Camera
-
-            // TODO: update DPR on monitor switch
-            // prep canvas (sizing, observe, unmount, etc)
-            // (only run if no custom renderer)
-            if (!context.slots?.renderer?.()?.length) {
-                // TODO: use dispose
-                const { dispose } = prepCanvas(
-                    container,
-                    normalizedCamera,
-                    normalizedRenderer,
-                    normalizedScene,
-                    props.sizePolicy
-                )
-
-                if (props.r3f) {
-                    normalizedRenderer.outputEncoding = THREE.sRGBEncoding
-                    normalizedRenderer.toneMapping = THREE.ACESFilmicToneMapping
-                }
-
-                // update render sugar
-                const sugar = {
-                    shadow: props.shadow,
-                }
-                if (sugar?.shadow) {
-                    normalizedRenderer.shadowMap.enabled = true
-                    if (typeof sugar.shadow === 'object') {
-                        normalizedRenderer.shadowMap.type = sugar.shadow.type
-                    }
-                }
-            }
-
-            // START
-            // ====================
-            if (!app) {
-                throw new Error('error creating app')
-            }
-
-            // save renderer, scene, camera
-            app.config.globalProperties.lunchbox.camera = normalizedCamera
-            app.config.globalProperties.lunchbox.renderer = normalizedRenderer
-            app.config.globalProperties.lunchbox.scene = normalizedScene
-
-            for (let startCallback of startCallbacks ?? []) {
-                startCallback({
-                    app,
-                    camera: normalizedCamera,
-                    renderer: normalizedRenderer,
-                    scene: normalizedScene,
-                })
-            }
-
-            // KICK UPDATE
-            // ====================
-            update({
-                app,
-                camera: normalizedCamera,
-                renderer: normalizedRenderer,
-                scene: normalizedScene,
-                updateSource: props.updateSource,
-            })
-        })
-
-        // UNMOUNT
-        // ====================
-        onBeforeUnmount(() => {
-            cancelUpdate()
-            cancelUpdateSource()
-        })
-
-        // RENDER FUNCTION
-        // ====================
-        const containerFillStyle =
-            props.sizePolicy === 'container' ? 'static' : 'absolute'
-        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... */}
-                {context.slots?.renderer?.()?.length ? (
-                    // TODO: remove `as any` cast
-                    (renderer.value = context.slots?.renderer?.()[0] as any)
-                ) : (
-                    // ...otherwise, add canvas...
-                    <>
-                        <div
-                            class="lunchbox-container"
-                            style={fillStyle(containerFillStyle) as any}
-                            ref={container}
-                            data-lunchbox="true"
-                        >
-                            <canvas
-                                ref={canvas}
-                                class="lunchbox-canvas"
-                                style={fillStyle(canvasFillStyle) as any}
-                                data-lunchbox="true"
-                            ></canvas>
-                        </div>
-                        {/* ...and create default renderer once canvas is present */}
-                        {canvas.value?.domElement && (
-                            <webGLRenderer
-                                {...(props.rendererProperties ?? {})}
-                                ref={renderer}
-                                args={[
-                                    {
-                                        alpha: props.transparent,
-                                        antialias: true,
-                                        canvas: canvas.value?.domElement,
-                                        powerPreference: !!props.r3f
-                                            ? 'high-performance'
-                                            : 'default',
-                                        ...(props.rendererArguments ?? {}),
-                                    },
-                                ]}
-                            />
-                        )}
-                    </>
-                )}
-
-                {/* use scene slot if provided... */}
-                {context.slots?.scene?.()?.length ? (
-                    // TODO: remove `as any` cast
-                    (scene.value = context.slots?.scene?.()[0] as any)
-                ) : (
-                    // ...otherwise, add default scene
-                    // TODO: why does this need to be a separate component? <scene> throws an error
-                    <LunchboxScene ref={scene}>
-                        {context.slots?.default?.()}
-                    </LunchboxScene>
-                )}
-
-                {/* use camera slot if provided... */}
-                {context.slots?.camera?.()?.length ? (
-                    // TODO: remove `any` cast
-                    camera.value
-                ) : props.ortho || props.orthographic ? (
-                    <orthographicCamera
-                        ref={camera}
-                        args={props.cameraArgs ?? []}
-                        {...consolidatedCameraProperties}
-                    />
-                ) : (
-                    <perspectiveCamera
-                        ref={camera}
-                        args={
-                            props.cameraArgs ?? [
-                                props.r3f ? 75 : 45,
-                                0.5625,
-                                1,
-                                1000,
-                            ]
-                        }
-                        {...consolidatedCameraProperties}
-                    />
-                )}
-
-                {/* Lunchbox interaction handlers */}
-                {interactables?.value.length && <LunchboxEventHandlers />}
-            </>
-        )
-    },
-})

package/src/components/LunchboxWrapper/prepCanvas.ts

@@ -1,55 +0,0 @@
-import { MiniDom } from '../../core'
-import { Lunch } from '../../types'
-import { Ref } from 'vue'
-import { resizeCanvas } from './resizeCanvas'
-
-const getInnerDimensions = (node: Element) => {
-    const computedStyle = getComputedStyle(node)
-    const width =
-        node.clientWidth -
-        parseFloat(computedStyle.paddingLeft) -
-        parseFloat(computedStyle.paddingRight)
-    const height =
-        node.clientHeight -
-        parseFloat(computedStyle.paddingTop) -
-        parseFloat(computedStyle.paddingBottom)
-    return { width, height }
-}
-
-export const prepCanvas = (
-    container: Ref<MiniDom.RendererDomNode | undefined>,
-    camera: THREE.Camera,
-    renderer: THREE.Renderer,
-    scene: THREE.Scene,
-    sizePolicy?: Lunch.SizePolicy
-) => {
-    const containerElement = container.value?.domElement
-    if (!containerElement) throw new Error('missing container')
-
-    // save and size element
-    const resizeCanvasByPolicy = () => {
-        if (sizePolicy === 'container') {
-            const dims = getInnerDimensions(containerElement)
-            resizeCanvas(camera, renderer, scene, dims.width, dims.height)
-        } else resizeCanvas(camera, renderer, scene)
-    }
-    resizeCanvasByPolicy()
-
-    // attach listeners
-    let observer = new ResizeObserver(() => {
-        resizeCanvasByPolicy()
-    })
-    // window.addEventListener('resize', resizeCanvas)
-    if (containerElement) {
-        observer.observe(containerElement)
-    }
-
-    // cleanup
-    return {
-        dispose() {
-            if (containerElement) {
-                observer.unobserve(containerElement)
-            }
-        },
-    }
-}

package/src/components/LunchboxWrapper/resizeCanvas.ts

@@ -1,41 +0,0 @@
-import { toRaw } from 'vue'
-
-export const resizeCanvas = (
-    camera: THREE.Camera,
-    renderer: THREE.Renderer,
-    scene: THREE.Scene,
-    width?: number,
-    height?: number
-) => {
-    // ignore if no element
-    if (!renderer?.domElement || !scene || !camera) return
-
-    width = width ?? window.innerWidth
-    height = height ?? window.innerHeight
-
-    // update camera
-    const aspect = width / height
-    if (camera.type?.toLowerCase() === 'perspectivecamera') {
-        const perspectiveCamera = camera as THREE.PerspectiveCamera
-        perspectiveCamera.aspect = aspect
-        perspectiveCamera.updateProjectionMatrix()
-    } else if (camera.type?.toLowerCase() === 'orthographiccamera') {
-        // TODO: ortho camera update
-        const orthoCamera = camera as THREE.OrthographicCamera
-        const heightInTermsOfWidth = height / width
-        orthoCamera.top = heightInTermsOfWidth * 10
-        orthoCamera.bottom = -heightInTermsOfWidth * 10
-        orthoCamera.right = 10
-        orthoCamera.left = -10
-        orthoCamera.updateProjectionMatrix()
-    } else {
-        // TODO: non-ortho or perspective camera
-    }
-
-    // update canvas
-    renderer.setSize(width, height)
-    // render immediately so there's no flicker
-    if (scene && camera) {
-        renderer.render(toRaw(scene), toRaw(camera))
-    }
-}