Merge pull request #10 from ssr765/main

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

@@ -7,8 +7,8 @@ export interface UseDrawOptions {
   onDrawStart?: () => void
   onDraw?: () => void
   onDrawEnd?: () => void
-  width: number
-  height: number,
+  width: Ref<number>
+  height: Ref<number>
   snapAngles?: Ref<number[] | undefined>
 }
 
@@ -43,20 +43,18 @@ export function useDraw({
     left: 0,
     top: 0
   })
-
   const snapPosition = computed(() => snapToAngle({
     snapAngles,
     posStart,
-    x: Math.round(((absoluteX.value - left.value) * width) / scaledWidth.value),
-    y: Math.round(((absoluteY.value - top.value) * height) / scaledHeight.value)
+    x: Math.round(((absoluteX.value - left.value) * width.value) / scaledWidth.value),
+    y: Math.round(((absoluteY.value - top.value) * height.value) / scaledHeight.value)
   }))
   const x = computed(() => snapPosition.value.x)
   const y = computed(() => snapPosition.value.y)
-
   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

@@ -197,10 +197,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