lunchboxjs 0.1.4002 → 0.1.4006-dev002

package/dist/lunchboxjs.module.js

@@ -9,27 +9,36 @@ const allNodes = [];
 const resizeCanvas = (width, height) => {
     const renderer = ensureRenderer.value?.instance;
     const scene = ensuredScene.value.instance;
+    const camera = ensuredCamera.value;
     // ignore if no element
-    if (!renderer?.domElement || !scene)
+    if (!renderer?.domElement || !scene || !camera)
         return;
     width = width ?? window.innerWidth;
     height = height ?? window.innerHeight;
     // update camera
     const aspect = width / height;
-    const camera = ensuredCamera.value;
     if (camera.type?.toLowerCase() === 'perspectivecamera') {
         const perspectiveCamera = camera.instance;
         perspectiveCamera.aspect = aspect;
         perspectiveCamera.updateProjectionMatrix();
     }
+    else if (camera.type?.toLowerCase() === 'orthographiccamera') {
+        // console.log('TODO: ortho camera update')
+        const orthoCamera = camera.instance;
+        const heightInTermsOfWidth = height / width;
+        orthoCamera.top = heightInTermsOfWidth * 10;
+        orthoCamera.bottom = -heightInTermsOfWidth * 10;
+        orthoCamera.right = 10;
+        orthoCamera.left = -10;
+        orthoCamera.updateProjectionMatrix();
+    }
     else {
-        console.log('TODO: ortho camera update');
+        console.log('TODO: non-ortho or perspective camera');
     }
     // update canvas
     renderer.setSize(width, height);
     // render immediately so there's no flicker
     if (scene && camera.instance) {
-        // const cameraInstance = scene.traverse(v => )
         renderer.render(toRaw(scene), toRaw(camera.instance));
     }
 };
@@ -74,8 +83,13 @@ const LunchboxWrapper = {
     props: {
         // These should match the Lunchbox.WrapperProps interface
         background: String,
+        cameraArgs: Array,
+        cameraLook: Array,
+        cameraLookAt: Array,
         cameraPosition: Array,
         dpr: Number,
+        ortho: Boolean,
+        orthographic: Boolean,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
@@ -86,6 +100,7 @@ const LunchboxWrapper = {
         const dpr = ref(props.dpr ?? -1);
         const container = ref();
         let renderer;
+        let camera;
         let scene;
         // MOUNT
         // ====================
@@ -93,12 +108,6 @@ const LunchboxWrapper = {
             // canvas needs to exist
             if (!canvas.value)
                 throw new Error('missing canvas');
-            // ensure camera
-            const camera = ensuredCamera.value.instance;
-            // move camera if needed
-            if (camera && props.cameraPosition) {
-                camera.position.set(...props.cameraPosition);
-            }
             // RENDERER
             // ====================
             // is there already a renderer?
@@ -155,6 +164,47 @@ const LunchboxWrapper = {
                 rendererReady.value = true;
                 return;
             }
+            // CAMERA
+            // ====================
+            // is there already a camera?
+            camera = tryGetNodeWithInstanceType([
+                'PerspectiveCamera',
+                'OrthographicCamera',
+            ]);
+            // if not, let's create one
+            if (!camera) {
+                // create ortho camera
+                if (props.ortho || props.orthographic) {
+                    ensuredCamera.value = createNode({
+                        props: { args: props.cameraArgs ?? [] },
+                        type: 'OrthographicCamera',
+                        uuid: fallbackCameraUuid,
+                    });
+                }
+                else {
+                    ensuredCamera.value = createNode({
+                        props: {
+                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                        },
+                        type: 'PerspectiveCamera',
+                        uuid: fallbackCameraUuid,
+                    });
+                }
+                cameraReady.value = true;
+                camera = ensuredCamera.value;
+            }
+            else {
+                cameraReady.value = true;
+            }
+            // move camera if needed
+            if (camera && props.cameraPosition) {
+                camera.instance?.position.set(...props.cameraPosition);
+            }
+            // angle camera if needed
+            if (camera && (props.cameraLookAt || props.cameraLook)) {
+                const source = (props.cameraLookAt || props.cameraLook);
+                camera.instance?.lookAt(...source);
+            }
             // SCENE
             // ====================
             scene = ensuredScene.value;
@@ -181,7 +231,7 @@ const LunchboxWrapper = {
             // console.log(scene)
             update({
                 app: getCurrentInstance().appContext.app,
-                camera,
+                camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
             });
@@ -211,21 +261,6 @@ const LunchboxWrapper = {
     },
 };
 
-const catalogue = {};
-
-const lunchboxDomComponentNames = [
-    'canvas',
-    'div',
-    'LunchboxWrapper',
-];
-// component creation utility
-const createComponent$1 = (tag) => defineComponent({
-    inheritAttrs: false,
-    name: tag,
-    setup(props, context) {
-        return () => h(tag, context.attrs, context.slots?.default?.() || []);
-    },
-});
 // list of all components to register out of the box
 const autoGeneratedComponents = [
     // ThreeJS basics
@@ -338,21 +373,11 @@ const autoGeneratedComponents = [
     'arrayCamera',
     // renderers
     'webGLRenderer',
-].map(createComponent$1).reduce((acc, curr) => {
-    acc[curr.name] = curr;
-    return acc;
-});
-const components = {
-    ...autoGeneratedComponents,
-    'Lunchbox': LunchboxWrapper,
-    // Gltf,
-};
-// console.log(components, Gltf)
-/*
-// List copied from r3f
-// https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
+    /*
+    // List copied from r3f:
+    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
 
-// NOT IMPLEMENTED:
+    // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
     audioListener: AudioListenerProps
     positionalAudio: PositionalAudioProps
 
@@ -400,6 +425,27 @@ const components = {
     fogExp2: FogExp2Props
     shape: ShapeProps
 */
+];
+
+const catalogue = {};
+
+const lunchboxDomComponentNames = ['canvas', 'div', 'LunchboxWrapper'];
+// component creation utility
+const createComponent$1 = (tag) => defineComponent({
+    inheritAttrs: false,
+    name: tag,
+    setup(props, context) {
+        return () => h(tag, context.attrs, context.slots?.default?.() || []);
+    },
+});
+autoGeneratedComponents.map(createComponent$1).reduce((acc, curr) => {
+    acc[curr.name] = curr;
+    return acc;
+});
+const components = {
+    ...autoGeneratedComponents,
+    Lunchbox: LunchboxWrapper,
+};
 
 function find(target) {
     target = isRef(target) ? target.value : target;
@@ -561,6 +607,7 @@ function addEventListener({ node, key, value, }) {
     // register click, pointerdown, pointerup
     if (key === 'onClick' || key === 'onPointerDown' || key === 'onPointerUp') {
         const stop = watch(() => inputActive.value, (isDown) => {
+            console.log(isDown, currentIntersections);
             const idx = currentIntersections
                 .map((v) => v.element)
                 .findIndex((v) => v.instance &&
@@ -828,9 +875,27 @@ function buildEnsured(pascalCaseTypes, fallbackUuid, props = {}, callback = null
 // ENSURE CAMERA
 // ====================
 const fallbackCameraUuid = 'FALLBACK_CAMERA';
-const ensuredCamera = buildEnsured(['PerspectiveCamera', 'OrthographicCamera'], fallbackCameraUuid, {
-    args: [45, 0.5625, 1, 1000],
+const defaultCamera = buildEnsured(['PerspectiveCamera', 'OrthographicCamera'], fallbackCameraUuid, { args: [45, 0.5625, 1, 1000] });
+/** Special value to be changed ONLY in `LunchboxWrapper`.
+ * Functions waiting for a Camera need to wait for this to be true.  */
+const cameraReady = ref(false);
+const ensuredCamera = computed({
+    get() {
+        return (cameraReady.value ? defaultCamera.value : null);
+    },
+    set(val) {
+        const t = val.type ?? '';
+        const pascalType = t[0].toUpperCase() + t.slice(1);
+        overrides[pascalType] = val;
+    },
 });
+// export const ensuredCamera = buildEnsured<THREE.Camera>(
+//     ['PerspectiveCamera', 'OrthographicCamera'],
+//     fallbackCameraUuid,
+//     {
+//         args: [45, 0.5625, 1, 1000],
+//     }
+// )
 // ENSURE RENDERER
 // ====================
 const fallbackRendererUuid = 'FALLBACK_RENDERER';
@@ -1179,12 +1244,14 @@ let frameID;
 const beforeRender = [];
 const afterRender = [];
 const update = (opts) => {
+    // request next frame
     frameID = requestAnimationFrame(() => update({
         app: opts.app,
         renderer: ensureRenderer.value?.instance,
         scene: ensuredScene.value.instance,
-        camera: ensuredCamera.value.instance,
+        camera: ensuredCamera.value?.instance,
     }));
+    // prep options
     const { app, renderer, scene, camera } = opts;
     // BEFORE RENDER
     beforeRender.forEach((cb) => {
@@ -1193,9 +1260,13 @@ const update = (opts) => {
         }
     });
     // RENDER
-    // console.log(camera?.position.z)
     if (renderer && scene && camera) {
-        renderer.render(toRaw(scene), toRaw(camera));
+        if (app.customRender) {
+            app.customRender(opts);
+        }
+        else {
+            renderer.render(toRaw(scene), toRaw(camera));
+        }
     }
     // AFTER RENDER
     afterRender.forEach((cb) => {
@@ -1212,6 +1283,15 @@ const onBeforeRender = (cb, index = Infinity) => {
         beforeRender.splice(index, 0, cb);
     }
 };
+const offBeforeRender = (cb) => {
+    if (isFinite(cb)) {
+        beforeRender.splice(cb, 1);
+    }
+    else {
+        const idx = beforeRender.findIndex((v) => v == cb);
+        beforeRender.splice(idx, 1);
+    }
+};
 const onAfterRender = (cb, index = Infinity) => {
     if (index === Infinity) {
         afterRender.push(cb);
@@ -1220,6 +1300,15 @@ const onAfterRender = (cb, index = Infinity) => {
         afterRender.splice(index, 0, cb);
     }
 };
+const offAfterRender = (cb) => {
+    if (isFinite(cb)) {
+        afterRender.splice(cb, 1);
+    }
+    else {
+        const idx = afterRender.findIndex((v) => v == cb);
+        afterRender.splice(idx, 1);
+    }
+};
 const cancelUpdate = () => {
     if (frameID)
         cancelAnimationFrame(frameID);
@@ -1573,11 +1662,33 @@ const globals = {
     inputActive,
     mousePos,
 };
-const camera = computed(() => ensuredCamera.value.instance);
+const camera = computed(() => ensuredCamera.value?.instance ?? null);
 const renderer = computed(() => ensureRenderer.value?.instance ?? null);
 const scene = computed(() => ensuredScene.value.instance);
+// CUSTOM RENDER SUPPORT
+// ====================
+let app = null;
+let queuedCustomRenderFunction = null;
+/** Set a custom render function, overriding the Lunchbox app's default render function.
+ * Changing this requires the user to manually render their scene.
+ */
+const setCustomRender = (render) => {
+    if (app)
+        app.setCustomRender(render);
+    else
+        queuedCustomRenderFunction = render;
+};
+/** Clear the active app's custom render function. */
+const clearCustomRender = () => {
+    if (app)
+        app.clearCustomRender();
+    else
+        queuedCustomRenderFunction = null;
+};
+// CREATE APP
+// ====================
 const createApp = (root) => {
-    const app = createRenderer(nodeOps).createApp(root);
+    app = createRenderer(nodeOps).createApp(root);
     // register all components
     Object.keys(components).forEach((key) => {
         app.component(key, components[key]);
@@ -1600,11 +1711,24 @@ const createApp = (root) => {
     };
     // embed .extend function
     app.extend = (targets) => {
-        extend({ app, ...targets });
+        extend({ app: app, ...targets });
         return app;
     };
+    // prep for custom render support
+    app.setCustomRender = (newRender) => {
+        app.customRender = newRender;
+    };
+    // add queued custom render if we have one
+    if (queuedCustomRenderFunction) {
+        app.setCustomRender(queuedCustomRenderFunction);
+        queuedCustomRenderFunction = null;
+    }
+    // add custom render removal
+    app.clearCustomRender = () => {
+        app.customRender = null;
+    };
     // done
     return app;
 };
 
-export { camera, createApp, find, globals, lunchboxRootNode as lunchboxTree, onAfterRender, onBeforeRender, renderer, scene, update };
+export { autoGeneratedComponents, camera, clearCustomRender, createApp, find, globals, lunchboxRootNode as lunchboxTree, offAfterRender, offBeforeRender, onAfterRender, onBeforeRender, renderer, scene, setCustomRender };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4002",
+    "version": "0.1.4006-dev002",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -25,6 +25,8 @@
         "@types/three": "0.133.0",
         "@types/uuid": "8.3.1",
         "@vitejs/plugin-vue": "^1.9.3",
+        "chroma-js": "2.1.2",
+        "nice-color-palettes": "3.0.0",
         "rollup-plugin-delete": "2.0.0",
         "rollup-plugin-terser": "7.0.2",
         "typescript": "^4.4.3",

package/src/components/LunchboxWrapper/LunchboxWrapper.ts

@@ -8,11 +8,13 @@ import {
     WritableComputedRef,
 } from 'vue'
 import {
+    cameraReady,
     cancelUpdate,
     createNode,
     ensuredCamera,
     ensureRenderer,
     ensuredScene,
+    fallbackCameraUuid,
     fallbackRendererUuid,
     MiniDom,
     rendererReady,
@@ -21,7 +23,7 @@ import {
 } from '../../core'
 import { set } from 'lodash'
 import { globals, Lunch } from '../..'
-import { Color } from 'three'
+import { Color, Vector2 } from 'three'
 import { prepCanvas } from './prepCanvas'
 
 /** fixed & fill styling for container */
@@ -42,8 +44,13 @@ export const LunchboxWrapper: ComponentOptions = {
     props: {
         // These should match the Lunchbox.WrapperProps interface
         background: String,
+        cameraArgs: Array,
+        cameraLook: Array,
+        cameraLookAt: Array,
         cameraPosition: Array,
         dpr: Number,
+        ortho: Boolean,
+        orthographic: Boolean,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
@@ -54,6 +61,7 @@ export const LunchboxWrapper: ComponentOptions = {
         const dpr = ref(props.dpr ?? -1)
         const container = ref<MiniDom.RendererDomNode>()
         let renderer: Lunch.Node<THREE.WebGLRenderer> | null
+        let camera: Lunch.Node<THREE.Camera> | null
         let scene: MiniDom.RendererStandardNode<THREE.Scene>
 
         // MOUNT
@@ -62,13 +70,6 @@ export const LunchboxWrapper: ComponentOptions = {
             // canvas needs to exist
             if (!canvas.value) throw new Error('missing canvas')
 
-            // ensure camera
-            const camera = ensuredCamera.value.instance
-            // move camera if needed
-            if (camera && props.cameraPosition) {
-                camera.position.set(...props.cameraPosition)
-            }
-
             // RENDERER
             // ====================
             // is there already a renderer?
@@ -139,6 +140,48 @@ export const LunchboxWrapper: ComponentOptions = {
                 return
             }
 
+            // CAMERA
+            // ====================
+            // is there already a camera?
+            camera = tryGetNodeWithInstanceType([
+                'PerspectiveCamera',
+                'OrthographicCamera',
+            ])
+            // if not, let's create one
+            if (!camera) {
+                // create ortho camera
+                if (props.ortho || props.orthographic) {
+                    ensuredCamera.value = createNode<THREE.OrthographicCamera>({
+                        props: { args: props.cameraArgs ?? [] },
+                        type: 'OrthographicCamera',
+                        uuid: fallbackCameraUuid,
+                    })
+                } else {
+                    ensuredCamera.value = createNode<THREE.PerspectiveCamera>({
+                        props: {
+                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                        },
+                        type: 'PerspectiveCamera',
+                        uuid: fallbackCameraUuid,
+                    })
+                }
+
+                cameraReady.value = true
+
+                camera = ensuredCamera.value
+            } else {
+                cameraReady.value = true
+            }
+            // move camera if needed
+            if (camera && props.cameraPosition) {
+                camera.instance?.position.set(...props.cameraPosition)
+            }
+            // angle camera if needed
+            if (camera && (props.cameraLookAt || props.cameraLook)) {
+                const source = (props.cameraLookAt || props.cameraLook)!
+                camera.instance?.lookAt(...source)
+            }
+
             // SCENE
             // ====================
             scene = ensuredScene.value
@@ -171,7 +214,7 @@ export const LunchboxWrapper: ComponentOptions = {
             // console.log(scene)
             update({
                 app: getCurrentInstance()!.appContext.app as Lunch.App,
-                camera,
+                camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
             })

package/src/components/LunchboxWrapper/resizeCanvas.ts

@@ -4,29 +4,37 @@ 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
 
     // ignore if no element
-    if (!renderer?.domElement || !scene) return
+    if (!renderer?.domElement || !scene || !camera) return
 
     width = width ?? window.innerWidth
     height = height ?? window.innerHeight
 
     // update camera
     const aspect = width / height
-    const camera = ensuredCamera.value
     if (camera.type?.toLowerCase() === 'perspectivecamera') {
         const perspectiveCamera = camera.instance 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
+        const heightInTermsOfWidth = height / width
+        orthoCamera.top = heightInTermsOfWidth * 10
+        orthoCamera.bottom = -heightInTermsOfWidth * 10
+        orthoCamera.right = 10
+        orthoCamera.left = -10
+        orthoCamera.updateProjectionMatrix()
     } else {
-        console.log('TODO: ortho camera update')
+        console.log('TODO: non-ortho or perspective camera')
     }
 
     // update canvas
     renderer.setSize(width, height)
     // render immediately so there's no flicker
     if (scene && camera.instance) {
-        // const cameraInstance = scene.traverse(v => )
         renderer.render(toRaw(scene), toRaw(camera.instance))
     }
 }