lunchboxjs 0.1.4016 → 0.2.1001-beta.0

package/extras/OrbitControlsWrapper.vue

@@ -12,7 +12,14 @@
 
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
-import { onBeforeRender, globals, Lunch, camera, renderer } from '../src'
+import {
+    onBeforeRender,
+    globals,
+    Lunch,
+    // camera,
+    useRenderer,
+    useCamera,
+} from '../src'
 
 // props
 const props = defineProps<{
@@ -20,14 +27,15 @@ const props = defineProps<{
 }>()
 
 // computed
-// const camera = globals.camera
-// const renderer = globals.renderer
 const ready = computed(() => {
-    return camera.value !== null && renderer.value?.domElement
+    return camera.value !== null && renderer.value.domElement
 })
+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,13 +1,13 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4016",
+    "version": "0.2.1001-beta.0",
     "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": "npm run build:tsc && npm run build:rollup && npm run build:dts",
+        "build:lib": "rm -rf 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",
@@ -19,12 +19,17 @@
         "vue": "^3.2.16"
     },
     "devDependencies": {
+        "@babel/plugin-transform-runtime": "7.18.10",
+        "@rollup/plugin-babel": "5.3.1",
         "@rollup/plugin-node-resolve": "13.0.5",
         "@rollup/plugin-typescript": "8.3.0",
         "@types/lodash": "4.14.175",
+        "@types/node": "18.6.3",
         "@types/three": "0.141.0",
         "@types/uuid": "8.3.1",
-        "@vitejs/plugin-vue": "^1.9.3",
+        "@vitejs/plugin-vue": "3.0.1",
+        "@vitejs/plugin-vue-jsx": "2.0.0",
+        "@vue/babel-plugin-jsx": "1.1.1",
         "chroma-js": "2.1.2",
         "kolorist": "1.5.1",
         "lodash": "4.17.21",
@@ -32,12 +37,14 @@
         "prompt": "1.3.0",
         "prompts": "2.4.2",
         "rollup-plugin-delete": "2.0.0",
+        "rollup-plugin-jsx": "1.0.3",
         "rollup-plugin-terser": "7.0.2",
         "three": "0.141.0",
         "typescript": "^4.4.3",
-        "vite": "^2.6.4",
+        "vite": "3.0.4",
         "vite-plugin-glsl": "0.0.5",
         "vitepress": "0.20.1",
+        "vue-jsx-factory": "0.3.0",
         "vue-tsc": "^0.3.0"
     },
     "peerDependencies": {

package/src/components/LunchboxWrapper/LunchboxScene.tsx

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

package/src/components/LunchboxWrapper/LunchboxWrapper.tsx

@@ -0,0 +1,299 @@
+import {
+    defineComponent,
+    onBeforeUnmount,
+    onMounted,
+    PropType,
+    reactive,
+    ref,
+    WatchSource,
+} from 'vue'
+import { cancelUpdate, cancelUpdateSource, MiniDom, update } from '../../core'
+import { Lunch, useApp, useGlobals } from '../..'
+import * as THREE from 'three'
+import { prepCanvas } from './prepCanvas'
+import { useUpdateGlobals, useStartCallbacks } from '../..'
+import { LunchboxScene } from './LunchboxScene'
+
+/** 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
+        }
+
+        // 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 })
+
+            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
+                    ?.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'
+
+        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 = context.slots?.camera?.()[0] as any)
+                ) : 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}
+                    />
+                )}
+            </>
+        )
+    },
+})

package/src/components/LunchboxWrapper/prepCanvas.ts

@@ -1,22 +1,43 @@
 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>,
-    canvasElement: HTMLCanvasElement,
-    onBeforeUnmount: Function
+    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
-    resizeCanvas()
+    // 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
-    const observer = new ResizeObserver(([canvas]) => {
-        resizeCanvas()
+    let observer = new ResizeObserver(() => {
+        resizeCanvasByPolicy()
     })
     // window.addEventListener('resize', resizeCanvas)
     if (containerElement) {
@@ -24,9 +45,11 @@ export const prepCanvas = (
     }
 
     // cleanup
-    onBeforeUnmount(() => {
-        if (canvasElement) {
-            observer.unobserve(canvasElement)
-        }
-    })
+    return {
+        dispose() {
+            if (containerElement) {
+                observer.unobserve(containerElement)
+            }
+        },
+    }
 }

package/src/components/LunchboxWrapper/resizeCanvas.ts

@@ -1,11 +1,12 @@
-import { ensuredCamera, ensureRenderer, ensuredScene } from '../../core'
 import { toRaw } from 'vue'
 
-export const resizeCanvas = (width?: number, height?: number) => {
-    const renderer = ensureRenderer.value?.instance
-    const scene = ensuredScene.value.instance
-    const camera = ensuredCamera.value
-
+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
 
@@ -15,12 +16,12 @@ export const resizeCanvas = (width?: number, height?: number) => {
     // update camera
     const aspect = width / height
     if (camera.type?.toLowerCase() === 'perspectivecamera') {
-        const perspectiveCamera = camera.instance as THREE.PerspectiveCamera
+        const perspectiveCamera = camera as THREE.PerspectiveCamera
         perspectiveCamera.aspect = aspect
         perspectiveCamera.updateProjectionMatrix()
     } else if (camera.type?.toLowerCase() === 'orthographiccamera') {
-        // console.log('TODO: ortho camera update')
-        const orthoCamera = camera.instance as THREE.OrthographicCamera
+        // TODO: ortho camera update
+        const orthoCamera = camera as THREE.OrthographicCamera
         const heightInTermsOfWidth = height / width
         orthoCamera.top = heightInTermsOfWidth * 10
         orthoCamera.bottom = -heightInTermsOfWidth * 10
@@ -28,13 +29,13 @@ export const resizeCanvas = (width?: number, height?: number) => {
         orthoCamera.left = -10
         orthoCamera.updateProjectionMatrix()
     } else {
-        console.log('TODO: non-ortho or perspective camera')
+        // TODO: non-ortho or perspective camera
     }
 
     // update canvas
     renderer.setSize(width, height)
     // render immediately so there's no flicker
-    if (scene && camera.instance) {
-        renderer.render(toRaw(scene), toRaw(camera.instance))
+    if (scene && camera) {
+        renderer.render(toRaw(scene), toRaw(camera))
     }
 }

package/src/components/index.ts

@@ -5,8 +5,6 @@ import { autoGeneratedComponents } from './autoGeneratedComponents'
 import { catalogue } from './catalogue'
 export { catalogue }
 
-export const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper']
-
 // component creation utility
 const createComponent = (tag: string) =>
     defineComponent({

package/src/core/createNode.ts

@@ -1,7 +1,6 @@
 import { isLunchboxRootNode } from '../utils'
-import { instantiateThreeObject, MiniDom, ensuredScene } from '.'
+import { instantiateThreeObject, MiniDom } from '.'
 import { Lunch } from '..'
-import { ensuredCamera } from './ensure'
 
 /** Create a new Lunchbox comment node. */
 export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {
@@ -59,13 +58,6 @@ export function createNode<T extends object = THREE.Object3D>(
     })
 
     if (node.type && !isLunchboxRootNode(node) && !node.instance) {
-        // if (node.type.includes('Camera')) {
-        //     console.log(node.type, {
-        //         ...node.props,
-        //         ...props,
-        //     })
-        //     console.trace()
-        // }
         node.instance = instantiateThreeObject({
             ...node,
             props: {
@@ -75,13 +67,5 @@ export function createNode<T extends object = THREE.Object3D>(
         })
     }
 
-    // TODO: these manual overrides are a bit brittle - replace?
-    if (node.type?.toLowerCase() === 'scene') {
-        // manually set scene override
-        ensuredScene.value = node as Lunch.Node<THREE.Scene>
-    } else if (node.type?.toLowerCase().endsWith('camera')) {
-        ensuredCamera.value = node as Lunch.Node<THREE.Camera>
-    }
-
     return node
 }