From fc0526d518ebf4d262f8af7992805ca3f9278a91 Mon Sep 17 00:00:00 2001
From: Robert Rosman <robert.rosman@zmartagroup.com>
Date: Sun, 12 May 2024 06:27:39 +0200
Subject: [PATCH] feat: add draw events to PaintEditor

---
 src/App.vue                    | 11 ++++++++++-
 src/components/PaintEditor.vue |  6 ++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index e7ca05e..4ccbf16 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import PaintEditor from './components/PaintEditor.vue'
-import type { SaveParameters, Shape } from './types'
+import type { DrawEvent, SaveParameters, Shape } from './types'
 import { toCanvas } from './utils/toCanvas';
 import { exportSvg } from './utils/exportSvg';
 import { useStorage } from '@vueuse/core';
@@ -19,6 +19,10 @@ function save({ svg, tools, history }: SaveParameters) {
   toCanvas({ svg, canvas: canvasRef, tools, history })
 }
 
+function logEvent(event: DrawEvent) {
+  console.log(event)
+}
+
 const history = useStorage<Shape[]>("history", [{
   type: "crop",
   x: 50,
@@ -51,4 +55,9 @@ const history = useStorage<Shape[]>("history", [{
     current state (like in localStorage or on a server). Try to draw something and reload the page to see localStorage
     in action. </p>
   <paint-editor v-model:history="history" class="vue-draw" @save="save" :tools></paint-editor>
+
+  <h1>Using events</h1>
+  <p>You can hook into events that are emitted from the component. Watch the console while drawing to see it in action.
+  </p>
+  <paint-editor class="vue-draw" @save="save" :tools @draw-start="logEvent" @draw-end="logEvent"></paint-editor>
 </template>
\ No newline at end of file
diff --git a/src/components/PaintEditor.vue b/src/components/PaintEditor.vue
index 77b0632..c8e76e8 100644
--- a/src/components/PaintEditor.vue
+++ b/src/components/PaintEditor.vue
@@ -6,6 +6,9 @@ import PaintRenderer from './PaintRenderer.vue';
 
 const emit = defineEmits<{
     (e: 'save', { svg, tools, history }: SaveParameters): void
+    (e: 'drawStart', event: DrawEvent): void
+    (e: 'draw', event: DrawEvent): void
+    (e: 'drawEnd', event: DrawEvent): void
     (e: 'clear'): void
 }>()
 
@@ -51,12 +54,15 @@ const { posStart, posEnd, isSwiping } = usePointerSwipe(svgRef, {
     threshold: 0,
     onSwipeStart(e) {
         activeShape.value = getActiveTool()?.onDrawStart?.(drawEvent.value) ?? activeShape.value
+        emit('drawStart', drawEvent.value)
     },
     onSwipe(e) {
         activeShape.value = getActiveTool()?.onDraw?.(drawEvent.value) ?? activeShape.value
+        emit('draw', drawEvent.value)
     },
     onSwipeEnd() {
         activeShape.value = getActiveTool()?.onDrawEnd?.(drawEvent.value) ?? activeShape.value
+        emit('drawEnd', drawEvent.value)
         if (activeShape.value) {
             history.value.push(activeShape.value)
             activeShape.value = undefined