From 90e579ad01fe2b727ca346e606645b302d57fdce Mon Sep 17 00:00:00 2001 From: Alex Turchyn Date: Tue, 23 May 2023 00:22:17 +0300 Subject: [PATCH] use relative document field area position --- app/javascript/components/area.vue | 21 ++++------ app/javascript/components/page.vue | 42 +++++++------------ app/javascript/elements/flow_view.js | 2 - app/views/submit_flow/_area.html.erb | 2 +- .../generate_result_attachments.rb | 10 ++--- 5 files changed, 27 insertions(+), 50 deletions(-) diff --git a/app/javascript/components/area.vue b/app/javascript/components/area.vue index 766dfd5d..3f0b8437 100644 --- a/app/javascript/components/area.vue +++ b/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) { diff --git a/app/javascript/components/page.vue b/app/javascript/components/page.vue index 36937e6f..70d56ec7 100644 --- a/app/javascript/components/page.vue +++ b/app/javascript/components/page.vue @@ -13,7 +13,6 @@ @@ -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 }) } diff --git a/app/javascript/elements/flow_view.js b/app/javascript/elements/flow_view.js index 9f9916eb..9f47fe65 100644 --- a/app/javascript/elements/flow_view.js +++ b/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', diff --git a/app/views/submit_flow/_area.html.erb b/app/views/submit_flow/_area.html.erb index d8b432bd..85cdabe9 100644 --- a/app/views/submit_flow/_area.html.erb +++ b/app/views/submit_flow/_area.html.erb @@ -1,3 +1,3 @@ - + <%= submission.values[field['uuid']] %> diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb index 92bc7d93..c03c07b1 100644 --- a/lib/submissions/generate_result_attachments.rb +++ b/lib/submissions/generate_result_attachments.rb @@ -20,15 +20,13 @@ module Submissions next if blocks.blank? - scale = page.page_size[2] / 1400.0 - blocks.each do |block| area, field = block.values_at(:area, :field) page.textbox(submission.values[field['uuid']], - x: (area['x'] * scale) - 10, - y: page.page_size[2] - (area['y'] * scale) + 150, - width: area['w'] * scale, - height: area['h'] * scale) + x: area['x'] * page.page_size[2], + y: page.page_size[3] - (area['y'] * page.page_size[3]), + width: area['w'] * page.page_size[2], + height: area['h'] * page.page_size[3]) end end