drawing and style details

src/components/AppDraw.vue

@@ -1,9 +1,9 @@
 <template>
 
-    <section v-if="editing" class="edit">
+    <form v-if="editing" class="edit">
     <textarea v-model="style"></textarea>
     <button @click="edit">Confirm</button>
-    </section>
+    </form>
 
 
     <svg ref="container" id="container" @mousedown="startDrawing" @mousemove="moveDrawing" @mouseup="stopDrawing">
@@ -15,7 +15,7 @@
             stroke-width="1px" 
             stroke="currentColor"
             fill="none"
-            @click="editing = true; currentIndex = index"
+            @click="select(p, index)"
         />
 
     </svg>
@@ -36,6 +36,13 @@ const edit = () => {
     editing.value = false;
 }
 
+const select = (p, index) => {
+    editing.value = true
+    currentIndex.value = index
+    if (p.style != "") {
+        style.value = p.style
+    }
+}
 
 const container = ref(null)
 const paths = ref([])
@@ -53,7 +60,7 @@ const setViewBox = () => container.value.setAttribute('viewBox', `0 0 ${containe
 
 class Drawing {
     path = ""
-    style = ""
+    style = "color: white; stroke-width: 4px;"
 
     constructor (path) {
         this.path = path
@@ -123,7 +130,7 @@ const updateSvgPath = function () {
 		}
 
 		// Set the complete current path coordinates
-		paths.value[paths.value.length-1].path +=  tmpPath;
+		paths.value[paths.value.length-1].path = strPath + tmpPath;
 	}
 };
 
@@ -134,9 +141,9 @@ const startDrawing = (e) => {
     buffer = []
     let pt = getMousePosition(e)
     appendToBuffer(pt)
-    let stringPath =  "M" + pt.x + " " + pt.y
+    strPath =  "M" + pt.x + " " + pt.y
     
-    path = new Drawing(stringPath)
+    path = new Drawing(strPath)
     paths.value.push(path)
 
 }