remove button

2 years ago · af6db808d0
parent 2674a3cf17
commit af6db808d0
5 changed files with 27 additions and 7 deletions
--- a/index.html
+++ b/index.html
@ -8,6 +8,9 @@
  </head>
  <body>
    <div id="app"></div>
+   
+
+
    <script type="module" src="src/main.js"></script>
  </body>
 </html>
--- a/src/App.vue
+++ b/src/App.vue
@ -3,11 +3,7 @@
 </template>

 <script setup>
-
 import AppDraw from './components/AppDraw.vue'
-
-
-
 </script>

 <style>
--- a/src/animations.css
+++ b/src/animations.css
@ -0,0 +1,11 @@
+@keyframes grow {
+    from {
+        transform: scale(1);
+    }
+
+    to {
+        transform: scale(1.1);
+    }
+}
+
+
--- a/src/components/AppDraw.vue
+++ b/src/components/AppDraw.vue
@ -3,6 +3,7 @@
    <form v-if="editing" class="edit">
    <textarea v-model="style"></textarea>
    <button @click="edit">Confirm</button>
+    <button @click.prevent="remove"> X </button>
    </form>


@ -26,7 +27,7 @@

 import {ref, computed, onMounted} from 'vue'

-let style = ref("color: white; stroke-width: 4px;")
+let style = ref("color: white; fill: white; stroke-width: 4px;")
 const editing = ref(false)
 const currentIndex = ref(0)

@ -44,6 +45,11 @@ const select = (p, index) => {
    }
 }

+const remove = () => {
+    paths.value.splice(currentIndex.value, 1)
+    edit.value = false
+}
+
 const container = ref(null)
 const paths = ref([])
 let rect = null
@ -158,8 +164,7 @@ const stopDrawing = (e) => {
    if (!path) return
    path = null
    strPath = ""
-    
-
+	paths.value[paths.value.length-1].style += " fill: white;"
 }


@ -216,6 +221,10 @@ path {
    cursor: pointer;
 }

+.edit button + button {
+    margin-left: 8px;
+}
+
 .edit button:hover {
    background-color: white;
    color: black;
--- a/src/main.js
+++ b/src/main.js
@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import './style.css'
+import './animations.css'
 import App from './App.vue'

 createApp(App).mount('#app')