add svg element within component instead of composable

components/OperonStructure.vue

@@ -455,50 +455,43 @@ function drawGenesLabel(operonGroup: d3.Selection<SVGGElement, any, SVGElement |
         .attr("cursor", d => d.highlight ? "pointer" : null)
         .select<SVGTextElement>("text")
         .attr("style", d => d.highlight ? "font-weight: 700" : null)
-        // .text(d => d.sanitizedLabel)
-        .attr("transform", function (d) {
+        .each(function (d) {
             const genesTextRotateVal = toValue(genesTextRotate)
             const geneId = d.id.toString()
             const textRotate = genesTextRotateVal?.[geneId]
             if (textRotate !== undefined) {
-                const { rotate, width, setTextElem, wrappedText } = textRotate
+                /**
+                 * dirty, let the composable handle width, height, rotate value
+                 * by setting the textElement to the composable 
+                 */
+                const { setTextElem } = textRotate
                 setTextElem(this)
-                return `translate(${d.x + d.width / 2 - toValue(width) / 2},${d.y}) rotate(${toValue(rotate)}) `
             }
-            return null
         })
-        // .html(function (d) {
-        //     console.log("html-----------------------------------")
-
-        //     const genesTextRotateVal = toValue(genesTextRotate)
-        //     const geneId = d.id.toString()
-        //     const textRotate = genesTextRotateVal?.[geneId]
-        //     if (textRotate !== undefined) {
-        //         // if (false) {
-        //         const { wrappedText, setTextElem, rotate } = textRotate
-        //         setTextElem(this)
-        //         console.log("rotate = ", rotate)
-        //         const wrappedTextVal = toValue(wrappedText)
-        //         if (wrappedTextVal.length > 1) {
-        //             return wrappedTextVal.reduce((acc, curr, i) => {
-        //                 let str = `${acc}\n<tspan x="0" y="${i * 16}">${curr}</tspan>`
-        //                 // console.log("str: ", str)
-        //                 return str
-        //             }, '')
-        //         }
-        //         else {
-        //             return wrappedTextVal.join(" ")
-        //         }
-        //     } else {
-        //         return d.sanitizedLabel
-        //     }
-        // })
-
-
     updateSelection.select("title").text(d => operonTitle(d))
 
 }
 
+
+// wrapped text or rotate it depending on the available width
+watch(genesTextRotate, (genesTextRotateVal) => {
+    Object.values(genesTextRotateVal).forEach(({ wrappedText, rotate, width, textElement }) => {
+        const wrappedTextVal = toValue(wrappedText)
+        const textElementVal = toValue(textElement)
+        if (textElementVal) {
+            const textElemSelection = d3.select<SVGTextElement, StructureOperonGeneLabels>(textElementVal)
+            textElemSelection.selectAll("tspan").remove()
+            textElemSelection.attr("transform", d => {
+                const x = d.x + d.width / 2 - toValue(width) / 2
+                return `translate(${x},${d.y}) rotate(${toValue(rotate)})`
+            })
+            for (let i = 0; i < wrappedTextVal.length; i++) {
+                textElemSelection.append("tspan").attr("x", 0).attr("y", 16 * i).text(wrappedTextVal[i])
+            }
+        }
+    })
+}, { deep: true, immediate: true })
+
 </script>
 <template>
     <div ref="gbContainer">

composables/useTextRotate.ts

@@ -12,11 +12,10 @@ export interface TextRotateOuput {
     height: ComputedRef<number>
     wrappedText: ComputedRef<string[]>
     setTextElem: (newTextElement: MaybeRef<SVGTextElement>) => void
+    textElement: MaybeRef<SVGTextElement | undefined>
 }
 
 export function useTextRotate({ availableWidth, text }: TextRotateInput): TextRotateOuput {
-    // const width = ref<number>(0)
-    // const height = ref<number>(20)
     const textElement = ref<SVGTextElement | undefined>(undefined)
     const availableWidthVal = toValue(availableWidth)
 
@@ -107,7 +106,6 @@ export function useTextRotate({ availableWidth, text }: TextRotateInput): TextRo
                     if (width > maxWidth) {
                         maxWidth = width
                     }
-                    // textElemSelection.append("tspan").attr("x", 0).attr("y", 16 * i).text(wrappedTextVal[i])
                 }
                 textElementVal.textContent = ''
                 return maxWidth
@@ -150,18 +148,5 @@ export function useTextRotate({ availableWidth, text }: TextRotateInput): TextRo
         return rotateRad.value * 180 / Math.PI
     })
 
- 
-
-    watchEffect(() => {
-        const textElementVal = toValue(textElement)
-        const wrappedTextVal = toValue(wrappedText)
-        if (textElementVal !== undefined) {
-            const textElemSelection = d3.select(textElementVal)
-            for (let i = 0; i < wrappedTextVal.length; i++) {
-                textElemSelection.append("tspan").attr("x", 0).attr("y", 16 * i).text(wrappedTextVal[i])
-            }
-        }
-    })
-
-    return { rotate, width, height, wrappedText, setTextElem }
+    return { rotate, width, height, wrappedText, setTextElem, textElement }
 }
\ No newline at end of file