fix: do not change pierced props case (#608)

Tresjs · Mar 31, 2024 · 906f2e1 · 906f2e1
1 parent 05069ab
commit 906f2e1
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 1 deletion.
diff --git a/playground/src/pages/basic/PiercedProps.vue b/playground/src/pages/basic/PiercedProps.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+
+const x = shallowRef(1)
+const y = shallowRef(1)
+const z = shallowRef(1)
+const rx = shallowRef(1)
+const ry = shallowRef(1)
+const rz = shallowRef(1)
+const sx = shallowRef(1)
+const sy = shallowRef(1)
+const sz = shallowRef(1)
+const label = shallowRef('')
+
+const refs = [x, y, z, rx, ry, rz, sx, sy, sz]
+const labels = [
+  'position-x', 'position-y', 'position-z', 
+  'rotation-x', 'rotation-y', 'rotation-z', 
+  'scale-x', 'scale-y', 'scale-z',
+]
+
+const PI2 = Math.PI * 2
+
+useRenderLoop().onLoop(({ elapsed }) => {
+  const i = Math.floor(elapsed % refs.length)
+  refs[i].value = Math.cos(elapsed * Math.PI * 2)
+  label.value = `${labels[i]} ${Math.trunc(refs[i].value * 10) / 10}`
+})
+</script>
+
+<template>
+  <div class="overlay">
+    <p>Demonstrate pierced props</p>
+    {{ label }}
+  </div>
+  <TresCanvas>
+    <TresMesh
+      :position-x="x"
+      :position-y="y"
+      :position-z="z"
+      :rotation-x="rx"
+      :rotation-y="ry"
+      :rotation-z="rz"
+      :scale-x="sx"
+      :scale-y="sy"
+      :scale-z="sz"
+    >
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial />
+    </TresMesh>
+  </TresCanvas>
+</template>
+
+<style>
+.overlay {
+    position: fixed;
+    padding: 10px;
+    font-family: sans-serif;
+}
+</style>
diff --git a/playground/src/router/routes/basic.ts b/playground/src/router/routes/basic.ts
@@ -34,4 +34,9 @@ export const basicRoutes = [
     name: 'Responsiveness',
     component: () => import('../../pages/basic/Responsiveness.vue'),
   },
+  {
+    path: '/basic/pierced-props',
+    name: 'Pierced Props',
+    component: () => import('../../pages/basic/PiercedProps.vue'),
+  },
 ]
diff --git a/src/core/nodeOps.ts b/src/core/nodeOps.ts
@@ -263,7 +263,7 @@ export const nodeOps: () => RendererOptions<TresObject, TresObject | null> = ()
         const chain = key.split('-')
         target = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
         key = chain.pop() as string
-        finalKey = key.toLowerCase()
+        finalKey = key
         if (!target?.set) root = chain.reduce((acc, key) => acc[kebabToCamel(key)], root)
       }
       let value = nextValue

diff --git a/src/core/nodeOpts.test.ts b/src/core/nodeOpts.test.ts
@@ -193,6 +193,22 @@ describe('nodeOps', () => {
     expect(node.castShadow === nextValue)
   })
 
+  it('patchProp should preserve ALL_CAPS_CASE in pierced props', () => {
+    // Issue: https://github.com/Tresjs/tres/issues/605
+    const {createElement, patchProp} = nodeOps()
+    const node = createElement('TresMeshStandardMaterial', null, null, {})
+    const allCapsKey = 'STANDARD'
+    const allCapsUnderscoresKey = 'USE_UVS'
+    const allCapsValue = 'hello'
+    const allCapsUnderscoresValue = 'goodbye'
+
+    patchProp(node, 'defines-' + allCapsKey, null, allCapsValue)
+    patchProp(node, 'defines-' + allCapsUnderscoresKey, null, allCapsUnderscoresValue)
+
+    expect(node.defines[allCapsKey]).equals(allCapsValue)
+    expect(node.defines[allCapsUnderscoresKey]).equals(allCapsUnderscoresValue)
+  }) 
+
   it('parentNode: returns parent of a node', async () => {
     // Setup
     const parent: TresObject = new Scene()