From 2e98885f41dcdd2e895cb5e16078875fcae647c8 Mon Sep 17 00:00:00 2001 From: DocuSeal Date: Fri, 6 Oct 2023 03:21:14 +0300 Subject: [PATCH] make builder usable on mobile --- app/javascript/application.js | 1 - app/javascript/template_builder/area.vue | 75 ++++++++++++++- app/javascript/template_builder/builder.vue | 94 +++++++++++++++---- .../template_builder/field_type.vue | 28 +++--- app/javascript/template_builder/page.vue | 15 ++- 5 files changed, 178 insertions(+), 35 deletions(-) diff --git a/app/javascript/application.js b/app/javascript/application.js index 43941222..339b558b 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -76,7 +76,6 @@ document.addEventListener('turbo:submit-end', async (event) => { window.customElements.define('template-builder', class extends HTMLElement { connectedCallback () { this.appElem = document.createElement('div') - this.appElem.classList.add('max-h-screen') this.app = createApp(TemplateBuilder, { template: reactive(JSON.parse(this.dataset.template)), diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue index 7d09b75e..a6fe118c 100644 --- a/app/javascript/template_builder/area.vue +++ b/app/javascript/template_builder/area.vue @@ -4,6 +4,7 @@ :style="positionStyle" @pointerdown.stop @mousedown.stop="startDrag" + @touchstart="startTouchDrag" >
@@ -309,6 +312,47 @@ export default { this.$emit('start-drag') }, + startTouchDrag (e) { + if (e.target !== this.$refs.touchTarget) { + return + } + + this.$refs?.name?.blur() + + e.preventDefault() + + this.isDragged = true + + const rect = e.target.getBoundingClientRect() + + this.selectedAreaRef.value = this.area + + this.dragFrom = { x: rect.left - e.touches[0].clientX, y: rect.top - e.touches[0].clientY } + + this.$el.getRootNode().addEventListener('touchmove', this.touchDrag) + this.$el.getRootNode().addEventListener('touchend', this.stopTouchDrag) + + this.$emit('start-drag') + }, + touchDrag (e) { + const page = this.$parent.$refs.mask.previousSibling + const rect = page.getBoundingClientRect() + + this.area.x = (this.dragFrom.x + e.touches[0].clientX - rect.left) / rect.width + this.area.y = (this.dragFrom.y + e.touches[0].clientY - rect.top) / rect.height + }, + stopTouchDrag () { + this.$el.getRootNode().removeEventListener('touchmove', this.touchDrag) + this.$el.getRootNode().removeEventListener('touchend', this.stopTouchDrag) + + if (this.isDragged) { + this.save() + } + + this.isDragged = false + + this.$emit('stop-drag') + }, stopDrag () { this.$el.getRootNode().removeEventListener('mousemove', this.drag) this.$el.getRootNode().removeEventListener('mouseup', this.stopDrag) @@ -335,6 +379,33 @@ export default { this.$emit('stop-resize') + this.save() + }, + startTouchResize (e) { + this.selectedAreaRef.value = this.area + + this.$refs?.name?.blur() + + e.preventDefault() + + this.$el.getRootNode().addEventListener('touchmove', this.touchResize) + this.$el.getRootNode().addEventListener('touchend', this.stopTouchResize) + + this.$emit('start-resize', 'nwse') + }, + touchResize (e) { + const page = this.$parent.$refs.mask.previousSibling + const rect = page.getBoundingClientRect() + + this.area.w = (e.touches[0].clientX - rect.left) / rect.width - this.area.x + this.area.h = (e.touches[0].clientY - rect.top) / rect.height - this.area.y + }, + stopTouchResize () { + this.$el.getRootNode().removeEventListener('touchmove', this.touchResize) + this.$el.getRootNode().removeEventListener('touchend', this.stopTouchResize) + + this.$emit('stop-resize') + this.save() } } diff --git a/app/javascript/template_builder/builder.vue b/app/javascript/template_builder/builder.vue index 8cb0b679..cf60ff89 100644 --- a/app/javascript/template_builder/builder.vue +++ b/app/javascript/template_builder/builder.vue @@ -1,9 +1,9 @@ -
-
- - You need a larger screen to use builder tools. + + + + Draw {{ fieldNames[drawField.type] }} Field -
-
+ + Cancel + + + + + +