style builder ui

app/javascript/template_builder/document.vue

@@ -3,11 +3,11 @@
     <Page
       v-for="(image, index) in sortedPreviewImages"
       :key="image.id"
+      :ref="setPageRefs"
       :number="index"
       :areas="areasIndex[index]"
       :is-draw="isDraw"
       :is-drag="isDrag"
-      :class="{ 'cursor-crosshair': isDraw }"
       :image="image"
       @drop-field="$emit('drop-field', {...$event, attachment_uuid: document.uuid })"
       @draw="$emit('draw', {...$event, attachment_uuid: document.uuid })"
@@ -44,10 +44,28 @@ export default {
     }
   },
   emits: ['draw', 'drop-field'],
+  data () {
+    return {
+      pageRefs: []
+    }
+  },
   computed: {
     sortedPreviewImages () {
       return [...this.document.preview_images].sort((a, b) => parseInt(a.filename) - parseInt(b.filename))
     }
+  },
+  beforeUpdate () {
+    this.pageRefs = []
+  },
+  methods: {
+    scrollToArea (area) {
+      this.pageRefs[area.page].areaRefs.find((e) => e.bounds === area).$el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+    },
+    setPageRefs (el) {
+      if (el) {
+        this.pageRefs.push(el)
+      }
+    }
   }
 }
 </script>