remove button

1 year 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')