lunchboxjs 0.1.4013 → 0.1.4016

package/dist/lunchboxjs.module.js

@@ -1,6 +1,5 @@
 import { toRaw, ref, onMounted, getCurrentInstance, onBeforeUnmount, h, defineComponent, isRef, isVNode, watch, reactive, computed, createRenderer } from 'vue';
 import * as THREE from 'three';
-import { Color } from 'three';
 import { set, get, isNumber } from 'lodash';
 
 // this needs to be in a separate file to ensure it's created immediately
@@ -66,6 +65,8 @@ const prepCanvas = (container, canvasElement, onBeforeUnmount) => {
     });
 };
 
+// TODO:
+// Continue r3f prop - what else (besides camera fov) makes r3f look good?
 /** fixed & fill styling for container */
 const fillStyle = (position) => {
     return {
@@ -90,11 +91,13 @@ const LunchboxWrapper = {
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        r3f: Boolean,
         rendererArguments: Object,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
         zoom: Number,
+        updateSource: Object,
     },
     setup(props, context) {
         const canvas = ref();
@@ -104,6 +107,10 @@ const LunchboxWrapper = {
         let renderer;
         let camera;
         let scene;
+        // https://threejs.org/docs/index.html#manual/en/introduction/Color-management
+        if (props.r3f && THREE?.ColorManagement) {
+            THREE.ColorManagement.legacyMode = false;
+        }
         // MOUNT
         // ====================
         onMounted(() => {
@@ -124,6 +131,9 @@ const LunchboxWrapper = {
                     alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
+                    powerPreference: !!props.r3f
+                        ? 'high-performance'
+                        : 'default',
                     ...(props.rendererArguments ?? {}),
                 };
                 // create new renderer
@@ -137,6 +147,15 @@ const LunchboxWrapper = {
                 // we've initialized the renderer, so anything depending on it can execute now
                 rendererReady.value = true;
                 const rendererAsWebGlRenderer = ensureRenderer;
+                // apply r3f settings if desired
+                if (props.r3f) {
+                    if (rendererAsWebGlRenderer.value.instance) {
+                        rendererAsWebGlRenderer.value.instance.outputEncoding =
+                            THREE.sRGBEncoding;
+                        rendererAsWebGlRenderer.value.instance.toneMapping =
+                            THREE.ACESFilmicToneMapping;
+                    }
+                }
                 // update render sugar
                 const sugar = {
                     shadow: props.shadow,
@@ -184,7 +203,12 @@ const LunchboxWrapper = {
                 else {
                     ensuredCamera.value = createNode({
                         props: {
-                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                            args: props.cameraArgs ?? [
+                                props.r3f ? 75 : 45,
+                                0.5625,
+                                1,
+                                1000,
+                            ],
                         },
                         type: 'PerspectiveCamera',
                         uuid: fallbackCameraUuid,
@@ -217,7 +241,7 @@ const LunchboxWrapper = {
             scene = ensuredScene.value;
             // set background color
             if (scene && scene.instance && props.background) {
-                scene.instance.background = new Color(props.background);
+                scene.instance.background = new THREE.Color(props.background);
             }
             // MISC PROPERTIES
             // ====================
@@ -253,12 +277,14 @@ const LunchboxWrapper = {
                 camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
+                updateSource: props.updateSource,
             });
         });
         // UNMOUNT
         // ====================
         onBeforeUnmount(() => {
             cancelUpdate();
+            cancelUpdateSource();
         });
         // RENDER FUNCTION
         // ====================
@@ -523,76 +549,6 @@ const isLunchboxRootNode = (node) => {
     return node.isLunchboxRootNode;
 };
 
-/** Create a new Lunchbox comment node. */
-function createCommentNode(options = {}) {
-    const defaults = {
-        text: options.text ?? '',
-    };
-    return new MiniDom.RendererCommentNode({
-        ...defaults,
-        ...options,
-        metaType: 'commentMeta',
-    });
-}
-/** Create a new DOM node. */
-function createDomNode(options = {}) {
-    const domElement = document.createElement(options.type ?? '');
-    const defaults = {
-        domElement,
-    };
-    const node = new MiniDom.RendererDomNode({
-        ...defaults,
-        ...options,
-        metaType: 'domMeta',
-    });
-    return node;
-}
-/** Create a new Lunchbox text node. */
-function createTextNode(options = {}) {
-    const defaults = {
-        text: options.text ?? '',
-    };
-    return new MiniDom.RendererTextNode({
-        ...options,
-        ...defaults,
-        metaType: 'textMeta',
-    });
-}
-/** Create a new Lunchbox standard node. */
-function createNode(options = {}, props = {}) {
-    const defaults = {
-        attached: options.attached ?? [],
-        attachedArray: options.attachedArray ?? {},
-        instance: options.instance ?? null,
-    };
-    const node = new MiniDom.RendererStandardNode({
-        ...options,
-        ...defaults,
-        metaType: 'standardMeta',
-    });
-    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: {
-                ...node.props,
-                ...props,
-            },
-        });
-    }
-    if (node.type === 'scene') {
-        // manually set scene override
-        ensuredScene.value = node;
-    }
-    return node;
-}
-
 const interactables = [];
 const addInteractable = (target) => {
     interactables.push(target);
@@ -674,6 +630,7 @@ let mouseDownListener;
 let mouseUpListener;
 const mousePos = ref({ x: Infinity, y: Infinity });
 let autoRaycasterEventsInitialized = false;
+let frameID$1;
 const setupAutoRaycaster = (node) => {
     const instance = node.instance;
     if (!instance)
@@ -706,8 +663,14 @@ const setupAutoRaycaster = (node) => {
         renderer.instance.domElement.addEventListener('mousedown', mouseDownListener);
         renderer.instance.domElement.addEventListener('mouseup', mouseUpListener);
         // TODO: add touch events
-        // add to update loop
-        onBeforeRender(autoRaycasterBeforeRender);
+        // process mouse events asynchronously, whenever the mouse state changes
+        watch(() => [inputActive.value, mousePos.value.x, mousePos.value.y], () => {
+            if (frameID$1)
+                cancelAnimationFrame(frameID$1);
+            frameID$1 = requestAnimationFrame(() => {
+                autoRaycasterBeforeRender();
+            });
+        });
         // mark complete
         autoRaycasterEventsInitialized = true;
         // cancel setup watcher
@@ -918,17 +881,10 @@ const ensuredCamera = computed({
         overrides[pascalType] = val;
     },
 });
-// export const ensuredCamera = buildEnsured<THREE.Camera>(
-//     ['PerspectiveCamera', 'OrthographicCamera'],
-//     fallbackCameraUuid,
-//     {
-//         args: [45, 0.5625, 1, 1000],
-//     }
-// )
 // ENSURE RENDERER
 // ====================
 const fallbackRendererUuid = 'FALLBACK_RENDERER';
-const v = buildEnsured(
+const ensuredRenderer = buildEnsured(
 // TODO: ensure support for css/svg renderers
 ['WebGLRenderer'], //, 'CSS2DRenderer', 'CSS3DRenderer', 'SVGRenderer'],
 fallbackRendererUuid, {});
@@ -937,7 +893,7 @@ fallbackRendererUuid, {});
 const rendererReady = ref(false);
 const ensureRenderer = computed({
     get() {
-        return (rendererReady.value ? v.value : null);
+        return (rendererReady.value ? ensuredRenderer.value : null);
     },
     set(val) {
         const t = val.type ?? '';
@@ -954,6 +910,80 @@ const autoRaycasterUuid = 'AUTO_RAYCASTER';
 // `unknown` is intentional here - we need to typecast the node since Raycaster isn't an Object3D
 const ensuredRaycaster = buildEnsured('Raycaster', autoRaycasterUuid, {}, (node) => setupAutoRaycaster(node));
 
+/** Create a new Lunchbox comment node. */
+function createCommentNode(options = {}) {
+    const defaults = {
+        text: options.text ?? '',
+    };
+    return new MiniDom.RendererCommentNode({
+        ...defaults,
+        ...options,
+        metaType: 'commentMeta',
+    });
+}
+/** Create a new DOM node. */
+function createDomNode(options = {}) {
+    const domElement = document.createElement(options.type ?? '');
+    const defaults = {
+        domElement,
+    };
+    const node = new MiniDom.RendererDomNode({
+        ...defaults,
+        ...options,
+        metaType: 'domMeta',
+    });
+    return node;
+}
+/** Create a new Lunchbox text node. */
+function createTextNode(options = {}) {
+    const defaults = {
+        text: options.text ?? '',
+    };
+    return new MiniDom.RendererTextNode({
+        ...options,
+        ...defaults,
+        metaType: 'textMeta',
+    });
+}
+/** Create a new Lunchbox standard node. */
+function createNode(options = {}, props = {}) {
+    const defaults = {
+        attached: options.attached ?? [],
+        attachedArray: options.attachedArray ?? {},
+        instance: options.instance ?? null,
+    };
+    const node = new MiniDom.RendererStandardNode({
+        ...options,
+        ...defaults,
+        metaType: 'standardMeta',
+    });
+    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: {
+                ...node.props,
+                ...props,
+            },
+        });
+    }
+    // TODO: these manual overrides are a bit brittle - replace?
+    if (node.type?.toLowerCase() === 'scene') {
+        // manually set scene override
+        ensuredScene.value = node;
+    }
+    else if (node.type?.toLowerCase().endsWith('camera')) {
+        ensuredCamera.value = node;
+    }
+    return node;
+}
+
 const createComponent = (tag) => defineComponent({
     inheritAttrs: false,
     name: tag,
@@ -969,7 +999,7 @@ const extend = ({ app, ...targets }) => {
 };
 
 /** Process props into either themselves or the $attached value */
-function processProp({ node, prop }) {
+function processProp({ node, prop, }) {
     // return $attachedArray value if needed
     if (typeof prop === 'string' && prop.startsWith('$attachedArray')) {
         return node.attachedArray[prop.replace('$attachedArray.', '')];
@@ -981,10 +1011,12 @@ function processProp({ node, prop }) {
     // otherwise, return plain value
     return prop;
 }
-function processPropAsArray({ node, prop }) {
+function processPropAsArray({ node, prop, }) {
     const isAttachedArray = typeof prop === 'string' && prop.startsWith('$attachedArray');
     const output = processProp({ node, prop });
-    return Array.isArray(output) && isAttachedArray ? output : [output];
+    return Array.isArray(output) && isAttachedArray
+        ? output
+        : [output];
 }
 
 function instantiateThreeObject(node) {
@@ -1283,16 +1315,34 @@ const onStart = (cb, index = Infinity) => {
 };
 
 let frameID;
+let watchStopHandle;
 const beforeRender = [];
 const afterRender = [];
-const update = (opts) => {
-    // request next frame
+const requestUpdate = (opts) => {
+    cancelUpdate();
     frameID = requestAnimationFrame(() => update({
         app: opts.app,
         renderer: ensureRenderer.value?.instance,
         scene: ensuredScene.value.instance,
         camera: ensuredCamera.value?.instance,
+        updateSource: opts.updateSource,
     }));
+};
+const update = (opts) => {
+    if (opts.updateSource) {
+        if (!watchStopHandle) {
+            // request next frame only when state changes
+            watchStopHandle = watch(opts.updateSource, () => {
+                requestUpdate(opts);
+            }, {
+                deep: true,
+            });
+        }
+    }
+    else {
+        // request next frame on a continuous loop
+        requestUpdate(opts);
+    }
     // prep options
     const { app, renderer, scene, camera } = opts;
     // BEFORE RENDER
@@ -1355,6 +1405,10 @@ const cancelUpdate = () => {
     if (frameID)
         cancelAnimationFrame(frameID);
 };
+const cancelUpdateSource = () => {
+    if (watchStopHandle)
+        watchStopHandle();
+};
 
 /** Update a single prop on a given node. */
 function updateObjectProp({ node, key, value, }) {
@@ -1710,46 +1764,31 @@ const globals = {
 /** The current camera. Often easier to use `useCamera` instead of this. */
 const camera = computed(() => ensuredCamera.value?.instance ?? null);
 /** Run a function using the current camera when it's present. */
-function useCamera(callback, once = true) {
-    let destroy;
-    destroy = watch(camera, (newVal) => {
+function useCamera(callback) {
+    return watch(camera, (newVal) => {
         if (!newVal)
             return;
-        // TODO: better fix than `any`?
         callback(newVal);
-        if (once) {
-            destroy?.();
-        }
     }, { immediate: true });
 }
 /** The current renderer. Often easier to use `useRenderer` instead of this. */
 const renderer = computed(() => ensureRenderer.value?.instance ?? null);
 /** Run a function using the current renderer when it's present. */
-function useRenderer(callback, once = true) {
-    let destroy;
-    destroy = watch(renderer, (newVal) => {
+function useRenderer(callback) {
+    return watch(renderer, (newVal) => {
         if (!newVal)
             return;
-        // TODO: better fix than `any`?
         callback(newVal);
-        if (once) {
-            destroy?.();
-        }
     }, { immediate: true });
 }
 /** The current scene. Often easier to use `useScene` instead of this. */
 const scene = computed(() => ensuredScene.value.instance);
 /** Run a function using the current scene when it's present. */
-function useScene(callback, once = true) {
-    let destroy;
-    destroy = watch(scene, (newVal) => {
+function useScene(callback) {
+    return watch(scene, (newVal) => {
         if (!newVal)
             return;
-        // TODO: better fix than `any`?
         callback(newVal);
-        if (once) {
-            destroy?.();
-        }
     }, { immediate: true });
 }
 // CUSTOM RENDER SUPPORT
@@ -1778,12 +1817,14 @@ const createApp = (root) => {
     app = createRenderer(nodeOps).createApp(root);
     // register all components
     Object.keys(components).forEach((key) => {
-        app.component(key, components[key]);
+        app?.component(key, components[key]);
     });
     // update mount function to match Lunchbox.Node
     const { mount } = app;
     app.mount = (root, ...args) => {
+        // find DOM element to use as app root
         const domElement = (typeof root === 'string' ? document.querySelector(root) : root);
+        // create or find root node
         const rootNode = ensureRootNode({
             domElement,
             isLunchboxRootNode: true,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "lunchboxjs",
-    "version": "0.1.4013",
+    "version": "0.1.4016",
     "scripts": {
         "dev": "vite -c utils/vite.config.ts",
         "build": "vue-tsc --noEmit && vite build -c utils/vite.config.ts",
@@ -11,10 +11,10 @@
         "prepare": "npm run build:lib",
         "docs:dev": "vitepress dev docs",
         "docs:build": "vitepress build docs",
-        "docs:serve": "vitepress serve docs"
+        "docs:serve": "vitepress serve docs",
+        "demo:create": "node utils/createExample"
     },
     "dependencies": {
-        "lodash": "4.17.21",
         "uuid": "8.3.2",
         "vue": "^3.2.16"
     },
@@ -22,13 +22,18 @@
         "@rollup/plugin-node-resolve": "13.0.5",
         "@rollup/plugin-typescript": "8.3.0",
         "@types/lodash": "4.14.175",
-        "@types/three": "0.133.0",
+        "@types/three": "0.141.0",
         "@types/uuid": "8.3.1",
         "@vitejs/plugin-vue": "^1.9.3",
         "chroma-js": "2.1.2",
+        "kolorist": "1.5.1",
+        "lodash": "4.17.21",
         "nice-color-palettes": "3.0.0",
+        "prompt": "1.3.0",
+        "prompts": "2.4.2",
         "rollup-plugin-delete": "2.0.0",
         "rollup-plugin-terser": "7.0.2",
+        "three": "0.141.0",
         "typescript": "^4.4.3",
         "vite": "^2.6.4",
         "vite-plugin-glsl": "0.0.5",
@@ -36,7 +41,7 @@
         "vue-tsc": "^0.3.0"
     },
     "peerDependencies": {
-        "three": "0.137.5"
+        "three": "0.141.0"
     },
     "files": [
         "dist",

package/src/components/LunchboxWrapper/LunchboxWrapper.ts

@@ -5,11 +5,13 @@ import {
     onBeforeUnmount,
     onMounted,
     ref,
+    WatchSource,
     WritableComputedRef,
 } from 'vue'
 import {
     cameraReady,
     cancelUpdate,
+    cancelUpdateSource,
     createNode,
     ensuredCamera,
     ensureRenderer,
@@ -24,9 +26,13 @@ import {
 } from '../../core'
 import { set } from 'lodash'
 import { globals, Lunch } from '../..'
-import { Color, Vector2 } from 'three'
+// import { Color, Vector2, sRGBEncoding, ACESFilmicToneMapping } from 'three'
+import * as THREE from 'three'
 import { prepCanvas } from './prepCanvas'
 
+// TODO:
+// Continue r3f prop - what else (besides camera fov) makes r3f look good?
+
 /** fixed & fill styling for container */
 const fillStyle = (position: string) => {
     return {
@@ -52,11 +58,13 @@ export const LunchboxWrapper: ComponentOptions = {
         dpr: Number,
         ortho: Boolean,
         orthographic: Boolean,
+        r3f: Boolean,
         rendererArguments: Object,
         rendererProperties: Object,
         shadow: [Boolean, Object],
         transparent: Boolean,
         zoom: Number,
+        updateSource: Object,
     },
     setup(props: Lunch.WrapperProps, context) {
         const canvas = ref<MiniDom.RendererDomNode>()
@@ -67,6 +75,11 @@ export const LunchboxWrapper: ComponentOptions = {
         let camera: Lunch.Node<THREE.Camera> | null
         let scene: MiniDom.RendererStandardNode<THREE.Scene>
 
+        // 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(() => {
@@ -88,6 +101,9 @@ export const LunchboxWrapper: ComponentOptions = {
                     alpha: props.transparent,
                     antialias: true,
                     canvas: canvas.value.domElement,
+                    powerPreference: !!props.r3f
+                        ? 'high-performance'
+                        : 'default',
                     ...(props.rendererArguments ?? {}),
                 }
 
@@ -108,6 +124,16 @@ export const LunchboxWrapper: ComponentOptions = {
                         Lunch.Node<THREE.WebGLRenderer>
                     >
 
+                // apply r3f settings if desired
+                if (props.r3f) {
+                    if (rendererAsWebGlRenderer.value.instance) {
+                        rendererAsWebGlRenderer.value.instance.outputEncoding =
+                            THREE.sRGBEncoding
+                        rendererAsWebGlRenderer.value.instance.toneMapping =
+                            THREE.ACESFilmicToneMapping
+                    }
+                }
+
                 // update render sugar
                 const sugar = {
                     shadow: props.shadow,
@@ -160,7 +186,12 @@ export const LunchboxWrapper: ComponentOptions = {
                 } else {
                     ensuredCamera.value = createNode<THREE.PerspectiveCamera>({
                         props: {
-                            args: props.cameraArgs ?? [45, 0.5625, 1, 1000],
+                            args: props.cameraArgs ?? [
+                                props.r3f ? 75 : 45,
+                                0.5625,
+                                1,
+                                1000,
+                            ],
                         },
                         type: 'PerspectiveCamera',
                         uuid: fallbackCameraUuid,
@@ -195,7 +226,7 @@ export const LunchboxWrapper: ComponentOptions = {
             scene = ensuredScene.value
             // set background color
             if (scene && scene.instance && props.background) {
-                scene.instance.background = new Color(props.background)
+                scene.instance.background = new THREE.Color(props.background)
             }
 
             // MISC PROPERTIES
@@ -239,6 +270,7 @@ export const LunchboxWrapper: ComponentOptions = {
                 camera: camera.instance,
                 renderer: renderer.instance,
                 scene: scene.instance,
+                updateSource: props.updateSource,
             })
         })
 
@@ -246,6 +278,7 @@ export const LunchboxWrapper: ComponentOptions = {
         // ====================
         onBeforeUnmount(() => {
             cancelUpdate()
+            cancelUpdateSource()
         })
 
         // RENDER FUNCTION

package/src/components/LunchboxWrapper/prepCanvas.ts

@@ -5,7 +5,7 @@ import { resizeCanvas } from './resizeCanvas'
 export const prepCanvas = (
     container: Ref<MiniDom.RendererDomNode | undefined>,
     canvasElement: HTMLCanvasElement,
-    onBeforeUnmount: Function,
+    onBeforeUnmount: Function
 ) => {
     const containerElement = container.value?.domElement
     if (!containerElement) throw new Error('missing container')
@@ -29,4 +29,4 @@ export const prepCanvas = (
             observer.unobserve(canvasElement)
         }
     })
-}
+}

package/src/components/catalogue.ts

@@ -1,3 +1,3 @@
 import { Lunch } from '..'
 
-export const catalogue: Lunch.Catalogue = {}
+export const catalogue: Lunch.Catalogue = {}

package/src/core/createNode.ts

@@ -1,6 +1,7 @@
 import { isLunchboxRootNode } from '../utils'
 import { instantiateThreeObject, MiniDom, ensuredScene } from '.'
 import { Lunch } from '..'
+import { ensuredCamera } from './ensure'
 
 /** Create a new Lunchbox comment node. */
 export function createCommentNode(options: Partial<Lunch.CommentMeta> = {}) {
@@ -74,9 +75,12 @@ export function createNode<T extends object = THREE.Object3D>(
         })
     }
 
-    if (node.type === 'scene') {
+    // 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