Improvement - PenAndPaper - Add background and set user select none on text nodes

Author: graphieros

package.json

@@ -105,4 +105,4 @@
     "vitest": "^3.1.1",
     "vue": "^3.5.14"
   }
-}
+}

src/atoms/NonSvgPenAndPaper.vue

@@ -89,6 +89,7 @@ function startSvgTextEditing(event) {
     tspan.textContent = '';
     textNode.appendChild(tspan);
     textNode.style.pointerEvents = 'none';
+    textNode.style.userSelect = 'none';
 
     G.value.appendChild(textNode);
     editingTextNode.value = textNode;
@@ -540,6 +541,7 @@ const range = ref(null);
             'vue-ui-pen-and-paper-actions': true,
             'visible': active
         }"
+        :style="{ backgroundColor: backgroundColor }"
     >
         <button
             class="vue-ui-pen-and-paper-action"

src/atoms/PenAndPaper.vue

@@ -74,6 +74,7 @@ function startSvgTextEditing(event) {
     tspan.textContent = '';
     textNode.appendChild(tspan);
     textNode.style.pointerEvents = 'none';
+    textNode.style.userSelect = 'none';
 
     G.value.appendChild(textNode);
     editingTextNode.value = textNode;
@@ -579,7 +580,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-    <div v-if="active" data-dom-to-png-ignore class="vue-ui-pen-and-paper-actions">
+    <div v-if="active" data-dom-to-png-ignore class="vue-ui-pen-and-paper-actions" :style="{ backgroundColor: backgroundColor }">
         <button class="vue-ui-pen-and-paper-action" @click="emit('close')" :style="{
             backgroundColor: backgroundColor,
             border: `1px solid ${buttonBorderColor}`