lunchboxjs 0.2.1020 → 2.0.0-beta.0

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))
-    }
-}

package/src/components/autoGeneratedComponents.ts

@@ -1,175 +0,0 @@
-// list of all components to register out of the box
-export const autoGeneratedComponents = [
-    // ThreeJS basics
-    'mesh',
-    'instancedMesh',
-    'scene',
-    'sprite',
-    'object3D',
-
-    // geometry
-    'instancedBufferGeometry',
-    'bufferGeometry',
-    'boxBufferGeometry',
-    'circleBufferGeometry',
-    'coneBufferGeometry',
-    'cylinderBufferGeometry',
-    'dodecahedronBufferGeometry',
-    'extrudeBufferGeometry',
-    'icosahedronBufferGeometry',
-    'latheBufferGeometry',
-    'octahedronBufferGeometry',
-    'parametricBufferGeometry',
-    'planeBufferGeometry',
-    'polyhedronBufferGeometry',
-    'ringBufferGeometry',
-    'shapeBufferGeometry',
-    'sphereBufferGeometry',
-    'tetrahedronBufferGeometry',
-    'textBufferGeometry',
-    'torusBufferGeometry',
-    'torusKnotBufferGeometry',
-    'tubeBufferGeometry',
-    'wireframeGeometry',
-    'parametricGeometry',
-    'tetrahedronGeometry',
-    'octahedronGeometry',
-    'icosahedronGeometry',
-    'dodecahedronGeometry',
-    'polyhedronGeometry',
-    'tubeGeometry',
-    'torusKnotGeometry',
-    'torusGeometry',
-    // textgeometry has been moved to /examples/jsm/geometries/TextGeometry
-    // 'textGeometry',
-    'sphereGeometry',
-    'ringGeometry',
-    'planeGeometry',
-    'latheGeometry',
-    'shapeGeometry',
-    'extrudeGeometry',
-    'edgesGeometry',
-    'coneGeometry',
-    'cylinderGeometry',
-    'circleGeometry',
-    'boxGeometry',
-
-    // materials
-    'material',
-    'shadowMaterial',
-    'spriteMaterial',
-    'rawShaderMaterial',
-    'shaderMaterial',
-    'pointsMaterial',
-    'meshPhysicalMaterial',
-    'meshStandardMaterial',
-    'meshPhongMaterial',
-    'meshToonMaterial',
-    'meshNormalMaterial',
-    'meshLambertMaterial',
-    'meshDepthMaterial',
-    'meshDistanceMaterial',
-    'meshBasicMaterial',
-    'meshMatcapMaterial',
-    'lineDashedMaterial',
-    'lineBasicMaterial',
-
-    // lights
-    'light',
-    'spotLightShadow',
-    'spotLight',
-    'pointLight',
-    'rectAreaLight',
-    'hemisphereLight',
-    'directionalLightShadow',
-    'directionalLight',
-    'ambientLight',
-    'lightShadow',
-    'ambientLightProbe',
-    'hemisphereLightProbe',
-    'lightProbe',
-
-    // textures
-    'texture',
-    'videoTexture',
-    'dataTexture',
-    'dataTexture3D',
-    'compressedTexture',
-    'cubeTexture',
-    'canvasTexture',
-    'depthTexture',
-
-    // Texture loaders
-    'textureLoader',
-
-    // misc
-    'group',
-    'catmullRomCurve3',
-    'points',
-    'raycaster',
-
-    // helpers
-    'cameraHelper',
-
-    // cameras
-    'camera',
-    'perspectiveCamera',
-    'orthographicCamera',
-    'cubeCamera',
-    'arrayCamera',
-
-    // renderers
-    'webGLRenderer',
-
-    /*
-    // List copied from r3f:
-    // https://github.com/pmndrs/react-three-fiber/blob/master/packages/fiber/src/three-types.ts
-
-    // NOT IMPLEMENTED (can be added via Extend - docs.lunchboxjs.com/components/extend/):
-    audioListener: AudioListenerProps
-    positionalAudio: PositionalAudioProps
-
-    lOD: LODProps
-    skinnedMesh: SkinnedMeshProps
-    skeleton: SkeletonProps
-    bone: BoneProps
-    lineSegments: LineSegmentsProps
-    lineLoop: LineLoopProps
-    // see `audio`
-    // line: LineProps
-    immediateRenderObject: ImmediateRenderObjectProps
-
-    // primitive
-    primitive: PrimitiveProps
-
-    // helpers
-    spotLightHelper: SpotLightHelperProps
-    skeletonHelper: SkeletonHelperProps
-    pointLightHelper: PointLightHelperProps
-    hemisphereLightHelper: HemisphereLightHelperProps
-    gridHelper: GridHelperProps
-    polarGridHelper: PolarGridHelperProps
-    directionalLightHelper: DirectionalLightHelperProps
-    boxHelper: BoxHelperProps
-    box3Helper: Box3HelperProps
-    planeHelper: PlaneHelperProps
-    arrowHelper: ArrowHelperProps
-    axesHelper: AxesHelperProps
-
-
-    // misc
-    vector2: Vector2Props
-    vector3: Vector3Props
-    vector4: Vector4Props
-    euler: EulerProps
-    matrix3: Matrix3Props
-    matrix4: Matrix4Props
-    quaternion: QuaternionProps
-    bufferAttribute: BufferAttributeProps
-    instancedBufferAttribute: InstancedBufferAttributeProps
-    color: ColorProps
-    fog: FogProps
-    fogExp2: FogExp2Props
-    shape: ShapeProps
-*/
-]

package/src/components/index.ts

@@ -1,31 +0,0 @@
-import { h, defineComponent } from 'vue'
-import { LunchboxWrapper } from './LunchboxWrapper/LunchboxWrapper'
-import { autoGeneratedComponents } from './autoGeneratedComponents'
-import type { Lunch } from '../types'
-
-export const catalogue: Lunch.Catalogue = {}
-
-// component creation utility
-const createComponent = (tag: string) =>
-    defineComponent({
-        inheritAttrs: false,
-        name: tag,
-        setup(props, context) {
-            return () => {
-                return h(tag, context.attrs, context.slots?.default?.() || [])
-            }
-        },
-    })
-
-// turn components into registered map
-const processed = autoGeneratedComponents
-    .map(createComponent)
-    .reduce((acc, curr) => {
-        acc[curr.name] = curr
-        return acc
-    }, {} as Record<string, ReturnType<typeof defineComponent>>)
-
-export const components = {
-    ...processed,
-    Lunchbox: LunchboxWrapper,
-}