feat: draw on correct position when resizing editor

src/components/VpEditor.vue

@@ -27,6 +27,9 @@ const props = withDefaults(
   { width: 1280, height: 720 }
 )
 
+const widthRef = ref(props.width);
+const heightRef = ref(props.height);
+
 const history = defineModel<Shape[]>('history', { default: [] })
 
 const vpImage = ref()
@@ -36,8 +39,8 @@ const { activeShape, setTool, undo, redo, save, reset } = useEditor({
   tools: props.tools,
   history: toRef(history),
   settings: toRef(settings),
-  width: props.width,
-  height: props.height,
+  width: widthRef,
+  height: heightRef,
   emit
 })
 
@@ -52,7 +55,7 @@ onMounted(() => {
 
 <template>
   <div class="vue-paint vp-editor" :class="`active-tool-${settings.tool}`">
-    <vp-image ref="vpImage" :tools :activeShape :history :width :height />
+    <vp-image ref="vpImage" :tools :activeShape :history :width="widthRef" :height="heightRef" />
 
     <slot name="toolbar" :set-tool :undo :save :reset :settings>
       <vp-toolbar v-model:settings="settings" @set-tool="setTool" @undo="undo" @redo="redo" @save="save" @reset="reset"

src/composables/useDraw.ts

@@ -6,8 +6,8 @@ export interface UseDrawOptions {
   onDrawStart?: () => void
   onDraw?: () => void
   onDrawEnd?: () => void
-  width: number
-  height: number
+  width: Ref<number>
+  height: Ref<number>
 }
 
 /** Without this variable you can start drawing in one editor and continue in another (with it's potentially other tool). */
@@ -40,14 +40,14 @@ export function useDraw({
     left: 0,
     top: 0
   })
-  const x = computed(() => Math.round(((absoluteX.value - left.value) * width) / scaledWidth.value))
+  const x = computed(() => Math.round(((absoluteX.value - left.value) * width.value) / scaledWidth.value))
   const y = computed(() =>
-    Math.round(((absoluteY.value - top.value) * height) / scaledHeight.value)
+    Math.round(((absoluteY.value - top.value) * height.value) / scaledHeight.value)
   )
   const minX = computed(() => Math.max(0, Math.min(posStart.x, x.value)))
   const minY = computed(() => Math.max(0, Math.min(posStart.y, y.value)))
-  const maxX = computed(() => Math.min(width, Math.max(posStart.x, x.value)))
-  const maxY = computed(() => Math.min(height, Math.max(posStart.y, y.value)))
+  const maxX = computed(() => Math.min(width.value, Math.max(posStart.x, x.value)))
+  const maxY = computed(() => Math.min(height.value, Math.max(posStart.y, y.value)))
   const isInside = computed(
     () =>
       absoluteX.value >= left.value &&

src/composables/useEditor.ts

@@ -9,8 +9,8 @@ export interface UseEditorOptions {
   tools: Tool<any>[]
   history: Ref<ImageHistory<Tool<any>[]>>
   settings: Ref<Settings>
-  width: number
-  height: number
+  width: Ref<number>
+  height: Ref<number>
   emit?: Function
 }
 

src/types.ts

@@ -183,10 +183,10 @@ export interface DrawEvent {
   id: string
 
   /** The width of the image in pixels. Note that it might be scaled down by the browser, but this is the base all other values will relate to. */
-  width: number
+  width: Ref<number>
 
   /** The height of the image in pixels. Note that it might be scaled down by the browser, but this is the base all other values will relate to. */
-  height: number
+  height: Ref<number>
 
   /** The X position of the pointer/cursor relative to the image left edge. */
   x: number