From ddc229e6e492b9e7887add0fcc679a9ae4e47f5c Mon Sep 17 00:00:00 2001 From: Alvaro Saburido Date: Fri, 8 Mar 2024 09:50:45 +0100 Subject: [PATCH] fix: `nodeOps` is now a function (#579) * fix: `nodeOps` is now a function * chore(test): updated tests for `nodeOps` --- playground/src/components/MultipleCanvas.vue | 97 -------------------- playground/src/pages/multiple.vue | 81 +++++++++++++++- src/components/TresCanvas.vue | 11 ++- src/core/nodeOps.ts | 8 +- src/core/nodeOpts.test.ts | 26 +++--- src/core/renderer.ts | 12 --- 6 files changed, 102 insertions(+), 133 deletions(-) delete mode 100644 playground/src/components/MultipleCanvas.vue delete mode 100644 src/core/renderer.ts diff --git a/playground/src/components/MultipleCanvas.vue b/playground/src/components/MultipleCanvas.vue deleted file mode 100644 index dad40f41a..000000000 --- a/playground/src/components/MultipleCanvas.vue +++ /dev/null @@ -1,97 +0,0 @@ - - - \ No newline at end of file diff --git a/playground/src/pages/multiple.vue b/playground/src/pages/multiple.vue index 7e8e659b4..d89499989 100644 --- a/playground/src/pages/multiple.vue +++ b/playground/src/pages/multiple.vue @@ -1,7 +1,80 @@ - + diff --git a/src/components/TresCanvas.vue b/src/components/TresCanvas.vue index f9d0bd0e8..c1d70b4b0 100644 --- a/src/components/TresCanvas.vue +++ b/src/components/TresCanvas.vue @@ -6,8 +6,8 @@ import type { ShadowMapType, ToneMapping, } from 'three' -import type { Ref, - App } from 'vue' +import * as THREE from 'three' +import type { Ref, App } from 'vue' import { computed, onMounted, @@ -20,6 +20,7 @@ import { defineComponent, h, getCurrentInstance, + createRenderer, } from 'vue' import pkg from '../../package.json' import { @@ -29,7 +30,7 @@ import { type TresContext, } from '../composables' import { extend } from '../core/catalogue' -import { render } from '../core/renderer' +import { nodeOps } from '../core/nodeOps' import type { RendererPresetsType } from '../composables/useRenderer/const' import type { TresCamera, TresObject } from '../types/' @@ -87,6 +88,7 @@ const slots = defineSlots<{ }>() const instance = getCurrentInstance()?.appContext.app +extend(THREE) const createInternalComponent = (context: TresContext) => defineComponent({ @@ -105,6 +107,9 @@ const createInternalComponent = (context: TresContext) => const mountCustomRenderer = (context: TresContext) => { const InternalComponent = createInternalComponent(context) + + const { render } = createRenderer(nodeOps()) + render(h(InternalComponent), scene.value as unknown as TresObject) } diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts index d16f80192..ac1a35d0e 100644 --- a/src/core/nodeOps.ts +++ b/src/core/nodeOps.ts @@ -12,7 +12,6 @@ function noop(fn: string): any { fn } -let scene: TresScene | null = null const { logError } = useLogger() const supportedPointerEvents = [ @@ -33,8 +32,9 @@ export function invalidateInstance(instance: TresObject) { } -export const nodeOps: RendererOptions = { - createElement(tag, _isSVG, _anchor, props): TresObject | null { +export const nodeOps: () => RendererOptions = () => { + let scene: TresScene | null = null + return { createElement(tag, _isSVG, _anchor, props): TresObject | null { if (!props) props = {} if (!props.args) { @@ -303,5 +303,5 @@ export const nodeOps: RendererOptions = { setScopeId: () => noop('setScopeId'), cloneNode: () => noop('cloneNode'), - insertStaticContent: () => noop('insertStaticContent'), + insertStaticContent: () => noop('insertStaticContent') } } diff --git a/src/core/nodeOpts.test.ts b/src/core/nodeOpts.test.ts index cddd7a04f..e232e9dab 100644 --- a/src/core/nodeOpts.test.ts +++ b/src/core/nodeOpts.test.ts @@ -15,7 +15,7 @@ describe('nodeOps', () => { const props = { args: [] } // Test - const instance = nodeOps.createElement(tag, false, null, props) + const instance = nodeOps().createElement(tag, false, null, props) // Assert expect(instance.isObject3D).toBeTruthy() @@ -28,7 +28,7 @@ describe('nodeOps', () => { const props = { args: [10, 3, 16, 100] } // Test - const instance = nodeOps.createElement(tag, false, null, props) + const instance = nodeOps().createElement(tag, false, null, props) // Assert expect(instance.parameters.radius).toBe(10) @@ -43,7 +43,7 @@ describe('nodeOps', () => { const props = { args: [75, 2, 0.1, 5] } // Test - const instance = nodeOps.createElement(tag, false, null, props) + const instance = nodeOps().createElement(tag, false, null, props) // Assert expect(instance.isCamera).toBeTruthy() @@ -60,7 +60,7 @@ describe('nodeOps', () => { consoleWarnSpy.mockImplementation(() => { }) // Test - const instance = nodeOps.createElement(tag, false, null, props) + const instance = nodeOps().createElement(tag, false, null, props) // Assert expect(instance.isCamera).toBeTruthy() @@ -74,7 +74,7 @@ describe('nodeOps', () => { const props = { args: [] } // Test - const instance = nodeOps.createElement(tag, false, null, props) + const instance = nodeOps().createElement(tag, false, null, props) // Assert expect(instance.isMaterial).toBeTruthy() @@ -87,7 +87,7 @@ describe('nodeOps', () => { const props = { args: [] } // Test - const instance = nodeOps.createElement(tag, false, null, props) + const instance = nodeOps().createElement(tag, false, null, props) // Assert expect(instance.isBufferGeometry).toBeTruthy() @@ -115,7 +115,7 @@ describe('nodeOps', () => { } // Test - nodeOps.insert(child, parent, null) + nodeOps().insert(child, parent, null) // Assert expect(parent.children.includes(child)).toBeTruthy() @@ -130,10 +130,10 @@ describe('nodeOps', () => { child.__vnode = { type: 'TresMesh', } - nodeOps.insert(child, parent) + nodeOps().insert(child, parent) // Test - nodeOps.remove(child) + nodeOps().remove(child) // Assert expect(!parent.children.includes(child)).toBeTruthy() @@ -151,7 +151,7 @@ describe('nodeOps', () => { const nextValue = false // Test - nodeOps.patchProp(node, prop, null, nextValue) + nodeOps().patchProp(node, prop, null, nextValue) // Assert expect(node.visible === nextValue) @@ -169,7 +169,7 @@ describe('nodeOps', () => { const nextValue = 5 // Test - nodeOps.patchProp(node, prop, null, nextValue) + nodeOps().patchProp(node, prop, null, nextValue) // Assert expect(node.position.x === nextValue) @@ -187,7 +187,7 @@ describe('nodeOps', () => { const nextValue = true // Test - nodeOps.patchProp(node, prop, null, nextValue) + nodeOps().patchProp(node, prop, null, nextValue) // Assert expect(node.castShadow === nextValue) @@ -201,7 +201,7 @@ describe('nodeOps', () => { child.parent = parent // Test - const parentNode = nodeOps.parentNode(child) + const parentNode = nodeOps().parentNode(child) // Assert expect(parentNode === parent) diff --git a/src/core/renderer.ts b/src/core/renderer.ts deleted file mode 100644 index 316cb6020..000000000 --- a/src/core/renderer.ts +++ /dev/null @@ -1,12 +0,0 @@ -import * as THREE from 'three' - -import { createRenderer } from 'vue' -import { extend } from './catalogue' -import { nodeOps } from './nodeOps' - -export const { render } = createRenderer(nodeOps) - -// Creates the catalogue of components based on THREE namespace -extend(THREE) - -export default { extend }