From b598ee2c0655c5d6dc93fa2d508762697bbff8c0 Mon Sep 17 00:00:00 2001 From: Paolo Brasolin Date: Mon, 1 May 2023 23:47:31 +0200 Subject: [PATCH] feat: make everything responsive --- src/web/components/paper_navigator.ts | 6 ++++- src/web/controllers/diagram_controller.ts | 14 ++++++---- src/web/controllers/editor_controller.ts | 4 +++ src/web/controllers/tab_controller.ts | 33 +++++++++++++++++++++++ src/web/index.css | 12 ++++++++- src/web/index.html | 16 ++++++----- 6 files changed, 71 insertions(+), 14 deletions(-) diff --git a/src/web/components/paper_navigator.ts b/src/web/components/paper_navigator.ts index 8b1cdb7..379ad44 100644 --- a/src/web/components/paper_navigator.ts +++ b/src/web/components/paper_navigator.ts @@ -28,7 +28,11 @@ export default class { bindEvents() { this.paper.on("blank:pointerdblclick", () => { - this.paper.transformToFitContent(); + this.paper.transformToFitContent({ + useModelGeometry: true, + verticalAlign: "middle", + horizontalAlign: "middle", + }); }); this.paper.on("blank:pointerdown", ({ originalEvent }) => { if (originalEvent instanceof TouchEvent) { diff --git a/src/web/controllers/diagram_controller.ts b/src/web/controllers/diagram_controller.ts index 083c1e4..5477000 100644 --- a/src/web/controllers/diagram_controller.ts +++ b/src/web/controllers/diagram_controller.ts @@ -145,10 +145,9 @@ export default class extends Controller { new PaperNavigator(this.paper); - // this.paper.transformToFitContent({ - // useModelGeometry: true, - // padding: 10, - // }); + new ResizeObserver(joint.util.debounce(this.refocus.bind(this))).observe( + this.containerTarget + ); } disconnect() { @@ -217,9 +216,14 @@ export default class extends Controller { console.log(cells); this.graph.fromJSON({ cells }); + this.refocus(); + } + + refocus() { this.paper.transformToFitContent({ useModelGeometry: true, - padding: 10, + verticalAlign: "middle", + horizontalAlign: "middle", }); } } diff --git a/src/web/controllers/editor_controller.ts b/src/web/controllers/editor_controller.ts index 8a4f49f..3ee50d5 100644 --- a/src/web/controllers/editor_controller.ts +++ b/src/web/controllers/editor_controller.ts @@ -76,6 +76,10 @@ export default class extends Controller { }); this.editor.setValue(DEFAULT); + + new ResizeObserver((en) => { + this.editor.layout(); + }).observe(this.containerTarget); } disconnect() { diff --git a/src/web/controllers/tab_controller.ts b/src/web/controllers/tab_controller.ts index 025e528..10e2432 100644 --- a/src/web/controllers/tab_controller.ts +++ b/src/web/controllers/tab_controller.ts @@ -1,6 +1,39 @@ import { Controller } from "@hotwired/stimulus"; export default class extends Controller { + static targets = ["handle", "panel", "region"]; + declare readonly handleTarget: HTMLButtonElement; + declare readonly panelTargets: HTMLElement[]; + declare readonly regionTarget: HTMLElement; + + connect() { + this.handleTarget.addEventListener("touchmove", (e) => { + if (e.touches.length > 1) return; + this.resize(e.touches[0].clientX, e.touches[0].clientY); + }); + + this.handleTarget.addEventListener("drag", (e) => { + e.preventDefault(); + if (e.screenX === 0) return; // Drops last event + this.resize(e.clientX, e.clientY); + }); + + window.addEventListener("resize", () => { + const bound = this.regionTarget.getBoundingClientRect(); + this.resize(bound.width * 0.4, bound.height * 0.5); + }); + } + + resize(clientX: number, clientY: number) { + const bound = this.regionTarget.getBoundingClientRect(); + const x = clientX - bound.left; + const y = clientY - bound.top; + this.regionTarget.style.gridTemplateColumns = `${x}px ${bound.width - x}px`; + this.regionTarget.style.gridTemplateRows = `${y}px ${bound.height - y}px`; + this.handleTarget.style.left = `calc(${x}px - 15px)`; + this.handleTarget.style.top = `calc(${y}px - 15px)`; + } + switch({ currentTarget }: Event) { if (!currentTarget) return; diff --git a/src/web/index.css b/src/web/index.css index e36ddaa..6a6bf80 100644 --- a/src/web/index.css +++ b/src/web/index.css @@ -36,7 +36,17 @@ main { @apply grid; - grid-template-columns: repeat(2, 50%); + grid-template-columns: 40% 60%; grid-template-rows: repeat(2, 50%) } + + #handle { + z-index: 10000; + @apply absolute rounded-full bg-red-800 cursor-move opacity-0 hover:opacity-50; + left: calc(40% - 15px); + top: calc(50% - 15px); + width: 30px; + height: 30px; + } + } diff --git a/src/web/index.html b/src/web/index.html index 1ccfcbf..ac0700c 100644 --- a/src/web/index.html +++ b/src/web/index.html @@ -30,25 +30,27 @@
-
-
+
+
-
+
-
+
-
-
+
+
+