Moved feFunc code output to Vue component

bbag · Mar 5, 2024 · cce590d · cce590d
1 parent 909289f
commit cce590d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 27 deletions.
diff --git a/src/content/experiments/svg-heatmaps/Visualizer.astro b/src/content/experiments/svg-heatmaps/Visualizer.astro
@@ -6,14 +6,6 @@ import KeyboardButton from '@/components/base/KeyboardButton.astro'
 
 const codeTheme = 'material-theme-palenight'
 
-// const colors = [
-//     { r: 0.165, g: 0.239, b: 0.361 },
-//     { r: 0.094, g: 0.353, b: 0.647 },
-//     { r: 0.192, g: 0.667, b: 0.31 },
-//     { r: 0.949, g: 0.882, b: 0.129 },
-//     { r: 0.984, g: 0.027, b: 0.078 }
-// ]
-
 const colors = [
     { r: 0.17, g: 0.24, b: 0.36 },
     { r: 0.09, g: 0.35, b: 0.65 },

diff --git a/src/content/experiments/svg-heatmaps/Visualizer.vue b/src/content/experiments/svg-heatmaps/Visualizer.vue
@@ -88,27 +88,27 @@ const colors = ref<Color[]>([
     { r: 0.99, g: 0.03, b: 0.08 }
 ])
 
+// Output feFunc refs
+const feFuncOutputR = ref<HTMLSpanElement>()
+const feFuncOutputG = ref<HTMLSpanElement>()
+const feFuncOutputB = ref<HTMLSpanElement>()
+
+// Output values for the tableValues attributes of the filter
+const feFuncRValues = computed(() => colors.value.map(color => color.r).join(' '))
+const feFuncGValues = computed(() => colors.value.map(color => color.g).join(' '))
+const feFuncBValues = computed(() => colors.value.map(color => color.b).join(' '))
+
 // Update the filter's displayed code values whenever a color changes
 watch(
     () => colors,
     () => {
-        const feFuncOutputR = document.querySelector('#fefunc-output code > span:nth-child(1) span:nth-child(11)') as HTMLSpanElement
-        const feFuncOutputG = document.querySelector('#fefunc-output code > span:nth-child(2) span:nth-child(11)') as HTMLSpanElement
-        const feFuncOutputB = document.querySelector('#fefunc-output code > span:nth-child(3) span:nth-child(11)') as HTMLSpanElement
-
-        if (!feFuncOutputR || !feFuncOutputG || !feFuncOutputB) return
-
-        feFuncOutputR.innerText = colors.value.map(color => color.r).join(' ')
-        feFuncOutputG.innerText = colors.value.map(color => color.g).join(' ')
-        feFuncOutputB.innerText = colors.value.map(color => color.b).join(' ')
+        if (!feFuncOutputR.value || !feFuncOutputG.value || !feFuncOutputB.value) return
+        feFuncOutputR.value.innerText = feFuncRValues.value
+        feFuncOutputG.value.innerText = feFuncGValues.value
+        feFuncOutputB.value.innerText = feFuncBValues.value
     },
     { deep: true }
 )
-
-// Output values for the tableValues attributes of the filter
-const feFuncRValues = computed(() => colors.value.map(color => color.r).join(' '))
-const feFuncGValues = computed(() => colors.value.map(color => color.g).join(' '))
-const feFuncBValues = computed(() => colors.value.map(color => color.b).join(' '))
 </script>
 
 <template>
@@ -210,6 +210,9 @@ const feFuncBValues = computed(() => colors.value.map(color => color.b).join(' '
             <use href="#svgRect" y="15" />
         </svg>
     </div>
+    <div id="fefunc-output"><pre class="astro-code material-theme-palenight" style="background-color:#292D3E;color:#babed8; overflow-x: auto;" tabindex="0"><code><span class="line"><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">feFuncR</span><span style="color:#C792EA"> type</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D">table</span><span style="color:#89DDFF">"</span><span style="color:#C792EA"> tableValues</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D" ref="feFuncOutputR">0.17 0.09 0.19 0.95 0.99</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">feFuncG</span><span style="color:#C792EA"> type</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D">table</span><span style="color:#89DDFF">"</span><span style="color:#C792EA"> tableValues</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D" ref="feFuncOutputG">0.24 0.35 0.67 0.88 0.03</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF"> /&gt;</span></span>
+<span class="line"><span style="color:#89DDFF">&lt;</span><span style="color:#F07178">feFuncB</span><span style="color:#C792EA"> type</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D">table</span><span style="color:#89DDFF">"</span><span style="color:#C792EA"> tableValues</span><span style="color:#89DDFF">=</span><span style="color:#89DDFF">"</span><span style="color:#C3E88D" ref="feFuncOutputB">0.36 0.65 0.31 0.13 0.08</span><span style="color:#89DDFF">"</span><span style="color:#89DDFF"> /&gt;</span></span></code></pre></div>
 </template>
 
 <style lang="scss" scoped>

diff --git a/src/content/experiments/svg-heatmaps/index.mdx b/src/content/experiments/svg-heatmaps/index.mdx
@@ -118,11 +118,6 @@ Here’s a fun playground — add/remove colors below and click the color picker
     <Visualizer2 client:idle />
 </div>
 
-<div id="fefunc-output">
-    <Code theme='material-theme-palenight' code='<feFuncR type="table" tableValues="0.17 0.09 0.19 0.95 0.99" />
-    <feFuncG type="table" tableValues="0.24 0.35 0.67 0.88 0.03" />
-    <feFuncB type="table" tableValues="0.36 0.65 0.31 0.13 0.08" />' lang="html" />
-</div>
 <figure>
     <div style="display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; margin: 1rem 0;">
         <Image src={Xray} alt="X-ray" style="border-radius: 0.5rem;" />