feat: make everything responsive

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

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",
     });
   }
 }

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

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;
 

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;
+  }
+
 }

src/web/index.html

@@ -30,25 +30,27 @@
   </nav>
 
   <main role="region" aria-live="polite" class="bg-slate-50 h-full" data-controller="main editor list graph diagram"
-    data-action="
+    data-tab-target="region" data-action="
 editor:grammarChanged->main#ingestGrammar
 main:optionsChanged->list#ingestOptions
 list:selectionChanged->main#ingestSelection
 main:diagramChanged->diagram#ingestDiagram
 main:graphChanged->graph#ingestGraph
     ">
-    <section role="tabpanel" id="diagram-tabpanel" aria-labelledby="diagram-tab" class="h-full">
-      <div class="w-full h-full" data-diagram-target="container"></div>
+    <section role="tabpanel" id="grammar-tabpanel" aria-labelledby="grammar-tab" class="h-full" data-tab-target="panel">
+      <div class="w-full h-full" data-editor-target="container"></div>
     </section>
-    <section role="tabpanel" id="explorer-tabpanel" aria-labelledby="explorer-tab" class="h-full">
+    <section role="tabpanel" id="explorer-tabpanel" aria-labelledby="explorer-tab" class="h-full"
+      data-tab-target="panel">
       <div class="w-full h-full" data-graph-target="container"></div>
     </section>
-    <section role="tabpanel" id="list-tabpanel" aria-labelledby="list-tab">
+    <section role="tabpanel" id="list-tabpanel" aria-labelledby="list-tab" data-tab-target="panel">
       <select multiple class="w-full h-full" data-list-target="container"></select>
     </section>
-    <section role="tabpanel" id="grammar-tabpanel" aria-labelledby="grammar-tab" class="h-full">
-      <div class="w-full h-full" data-editor-target="container"></div>
+    <section role="tabpanel" id="diagram-tabpanel" aria-labelledby="diagram-tab" class="h-full" data-tab-target="panel">
+      <div class="w-full h-full" data-diagram-target="container"></div>
     </section>
+    <button draggable="true" id="handle" data-tab-target="handle"></button>
   </main>
 
   <script type="module" src="index.ts"></script>