use relative document field area position

app/javascript/components/area.vue

@@ -21,11 +21,6 @@
 export default {
   name: 'FieldArea',
   props: {
-    scale: {
-      type: Number,
-      required: false,
-      default: 1
-    },
     bounds: {
       type: Object,
       required: false,
@@ -56,22 +51,22 @@ export default {
       const { x, y, w, h } = this.bounds
 
       return {
-        top: this.scale * y + 'px',
-        left: this.scale * x + 'px',
-        width: this.scale * w + 'px',
-        height: this.scale * h + 'px'
+        top: y * 100 + '%',
+        left: x * 100 + '%',
+        width: w * 100 + '%',
+        height: h * 100 + '%'
       }
     }
   },
   methods: {
     resize (e) {
-      this.bounds.w = e.layerX / this.scale - this.bounds.x
-      this.bounds.h = e.layerY / this.scale - this.bounds.y
+      this.bounds.w = e.layerX / e.toElement.clientWidth - this.bounds.x
+      this.bounds.h = e.layerY / e.toElement.clientHeight - this.bounds.y
     },
     drag (e) {
       if (e.toElement.id === 'mask') {
-        this.bounds.x = (e.layerX - this.dragFrom.x) / this.scale
-        this.bounds.y = (e.layerY - this.dragFrom.y) / this.scale
+        this.bounds.x = (e.layerX - this.dragFrom.x) / e.toElement.clientWidth
+        this.bounds.y = (e.layerY - this.dragFrom.y) / e.toElement.clientHeight
       }
     },
     startDrag (e) {

app/javascript/components/page.vue

@@ -13,7 +13,6 @@
       <FieldArea
         v-for="(item, i) in areas"
         :key="i"
-        :scale="scale"
         :bounds="item.area"
         :field="item.field"
         @start-resize="showMask = true"
@@ -23,7 +22,6 @@
       />
       <FieldArea
         v-if="newArea"
-        :scale="scale"
         :bounds="newArea"
       />
     </div>
@@ -77,7 +75,6 @@ export default {
   emits: ['draw', 'drop-field'],
   data () {
     return {
-      scale: 1,
       showMask: false,
       newArea: null
     }
@@ -90,34 +87,23 @@ export default {
       return this.image.metadata.height
     }
   },
-  mounted () {
-    this.resizeObserver = new ResizeObserver(this.onResize)
-
-    this.resizeObserver.observe(this.$refs.image)
-  },
-  beforeUnmount () {
-    this.resizeObserver.unobserve(this.$refs.image)
-  },
   methods: {
-    onResize () {
-      this.scale = this.$refs.image.clientWidth / this.image.metadata.width
-    },
     onDrop (e) {
       this.$emit('drop-field', {
-        x: e.layerX / this.scale,
-        y: e.layerY / this.scale,
-        w: 200,
-        h: 40,
+        x: e.layerX / this.$refs.mask.clientWidth,
+        y: e.layerY / this.$refs.mask.clientHeight,
+        w: this.$refs.mask.clientWidth / 5 / this.$refs.mask.clientWidth,
+        h: this.$refs.mask.clientWidth / 30 / this.$refs.mask.clientWidth,
         page: this.number
       })
     },
     onPointerdown (e) {
       if (this.isDraw) {
         this.newArea = {
-          initialX: e.layerX / this.scale,
-          initialY: e.layerY / this.scale,
-          x: e.layerX / this.scale,
-          y: e.layerY / this.scale,
+          initialX: e.layerX / this.$refs.mask.clientWidth,
+          initialY: e.layerY / this.$refs.mask.clientHeight,
+          x: e.layerX / this.$refs.mask.clientWidth,
+          y: e.layerY / this.$refs.mask.clientHeight,
           w: 0,
           h: 0
         }
@@ -125,19 +111,19 @@ export default {
     },
     onPointermove (e) {
       if (this.newArea) {
-        const dx = e.layerX / this.scale - this.newArea.initialX
-        const dy = e.layerY / this.scale - this.newArea.initialY
+        const dx = e.layerX / this.$refs.mask.clientWidth - this.newArea.initialX
+        const dy = e.layerY / this.$refs.mask.clientHeight - this.newArea.initialY
 
         if (dx > 0) {
           this.newArea.x = this.newArea.initialX
         } else {
-          this.newArea.x = e.layerX / this.scale
+          this.newArea.x = e.layerX / this.$refs.mask.clientWidth
         }
 
         if (dy > 0) {
           this.newArea.y = this.newArea.initialY
         } else {
-          this.newArea.y = e.layerY / this.scale
+          this.newArea.y = e.layerY / this.$refs.mask.clientHeight
         }
 
         this.newArea.w = Math.abs(dx)
@@ -149,8 +135,8 @@ export default {
         this.$emit('draw', {
           x: this.newArea.x,
           y: this.newArea.y,
-          w: Math.max(this.newArea.w, 50),
-          h: Math.max(this.newArea.h, 40),
+          w: Math.max(this.newArea.w, this.$refs.mask.clientWidth / 5 / this.$refs.mask.clientWidth),
+          h: Math.max(this.newArea.h, this.$refs.mask.clientWidth / 30 / this.$refs.mask.clientWidth),
           page: this.number
         })
       }

app/javascript/elements/flow_view.js

@@ -2,8 +2,6 @@ import { targets, target, targetable } from '@github/catalyst/lib/targetable'
 import { actionable } from '@github/catalyst/lib/actionable'
 
 export default actionable(targetable(class extends HTMLElement {
-  static observedAttributes = ['data-scale']
-
   static [target.static] = [
     'form',
     'completed',