adminbruno
/
docuseal
mirror of https://github.com/docusealco/docuseal
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

use relative document field area position

Browse Source
pull/105/head
Alex Turchyn 2 years ago
parent 91b955a39f
commit 90e579ad01
5 changed files with 27 additions and 50 deletions
Show Stats Download Patch File Download Diff File

21
app/javascript/components/area.vue
Unescape View File

@ -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) {

42
app/javascript/components/page.vue
Unescape View File

@ -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
})
}

2
app/javascript/elements/flow_view.js
Unescape View File

@ -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',

2
app/views/submit_flow/_area.html.erb
Unescape View File

@ -1,3 +1,3 @@
<flow-area data-field-uuid="<%= field['uuid'] %>" data-action="click:flow-view#focusField" data-targets="flow-view.areas" class=" cursor-pointer bg-red-100 absolute" style="width: <%= area['w'] * 100 / page.metadata['width'] %>%; height: <%= area['h'] * 100 / page.metadata['height'] %>%; left: <%= area['x'] * 100 / page.metadata['width'] %>%; top: <%= area['y'] * 100 / page.metadata['height'] %>%">
<flow-area data-field-uuid="<%= field['uuid'] %>" data-action="click:flow-view#focusField" data-targets="flow-view.areas" class=" cursor-pointer bg-red-100 absolute" style="width: <%= area['w'] * 100 %>%; height: <%= area['h'] * 100 %>%; left: <%= area['x'] * 100 %>%; top: <%= area['y'] * 100 %>%">
<%= submission.values[field['uuid']] %>
</flow-area>

10
lib/submissions/generate_result_attachments.rb
Unescape View File

@ -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

Write Preview
Loading…
Cancel
Save