drawing and style details

main
km0 1 year ago
parent 2d5591112d
commit 32ab7e8e01

@ -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)
}

Loading…
Cancel
Save