improve mobile modtext edit

TalkingPanda0 · TalkingPanda0 · commit bb66a9f904fa · 2026-01-19T15:51:10.000+03:00
diff --git a/src/html/modtextedit.html b/src/html/modtextedit.html
@@ -1,5 +1,9 @@
 <!doctype html>
 <html>
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
+  />
   <head>
     <style>
       canvas {
@@ -22,6 +26,7 @@
         color-scheme: dark;
         background-color: #15171c;
         color: white;
+        margin-left: 0px;
       }
       #textarea {
         width: 95%;
@@ -35,9 +40,18 @@
       }
       #canvasContainer {
         position: relative;
-        width: 960px; /* 1920 * 0.5 */
-        height: 540px; /* 1080 * 0.5 */
-        border: 2px solid #333;
+        width: 100vw;
+        height: 90vh;
+        overflow: hidden;
+      }
+
+      #scaler {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 1920px;
+        height: 1080px;
+        transform-origin: top left;
       }
 
       #player {
@@ -87,6 +101,9 @@
       .actions {
         text-align: right;
       }
+      canvas {
+        border: none;
+      }
     </style>
     <link
       href="https://fonts.googleapis.com/icon?family=Material+Icons"
@@ -210,12 +227,11 @@ <h3>Select an image</h3>
         </form>
       </dialog>
     </div>
-    <div
-      id="canvasContainer"
-      style="border: 2px solid #333; display: inline-block"
-    >
-      <div id="player"></div>
-      <canvas id="editorCanvas" style="display: none"></canvas>
+    <div id="canvasContainer" style="display: inline-block">
+      <div id="scaler">
+        <div id="player"></div>
+        <canvas id="editorCanvas" style="display: none"></canvas>
+      </div>
     </div>
 
     <textarea style="display: none" id="textarea" rows="10"></textarea>
@@ -224,19 +240,22 @@ <h3>Select an image</h3>
       const dialog = document.getElementById("imageDialog");
       const grid = document.getElementById("imageGrid");
       const form = document.getElementById("imageUploadForm");
-
-      fabric.FabricObject.customProperties = ["dataId", "counterName"];
-      let data = {};
       const playPauseButton = document.getElementById("playPauseButton");
       const player = new Twitch.Player("player", {
-        width: 1920 / 2,
-        height: 1080 / 2,
+        width: 1920,
+        height: 1080,
         channel: "sweetbabooo_o",
         parent: ["localhost", "talkingpanda.dev"],
         autoplay: true,
         muted: true,
       });
-      player.addEventListener(Twitch.Player.PLAYING, () => {
+      let viewScale = 1;
+      let panX = 0;
+      let panY = 0;
+      fabric.FabricObject.customProperties = ["dataId", "counterName"];
+      let data = {};
+
+      player.addEventListener(Twitch.Player.READY, () => {
         if (!canvas) initCanvas();
       });
 
@@ -286,14 +305,191 @@ <h3>Select an image</h3>
         ctx.drawImage(deleteImg, -size / 2, -size / 2, size, size);
         ctx.restore();
       }
+
+      function enablePinchAndPan(canvas) {
+        let lastDist = null;
+        let lastMid = null;
+        let startScale = viewScale;
+        let startPanX = panX;
+        let startPanY = panY;
+
+        const el = canvas.upperCanvasEl;
+
+        el.addEventListener(
+          "touchstart",
+          (e) => {
+            if (e.touches.length === 2) {
+              e.preventDefault();
+
+              lastDist = getDistance(e.touches[0], e.touches[1]);
+              lastMid = getMidpoint(e.touches[0], e.touches[1]);
+
+              startScale = viewScale;
+              startPanX = panX;
+              startPanY = panY;
+              canvas.selection = false;
+              canvas.discardActiveObject();
+            }
+          },
+          { passive: false },
+        );
+
+        el.addEventListener(
+          "touchmove",
+          (e) => {
+            if (e.touches.length !== 2 || lastDist === null) return;
+
+            e.preventDefault();
+
+            const dist = getDistance(e.touches[0], e.touches[1]);
+            const mid = getMidpoint(e.touches[0], e.touches[1]);
+
+            /* ----- SCALE ----- */
+            if (Math.abs(dist - lastDist) > 25) {
+              const scaleFactor = dist / lastDist;
+              const oldScale = viewScale;
+              viewScale = clamp(startScale * scaleFactor, 0.25, 3);
+              zoomAtCursor(mid.x, mid.y, oldScale, viewScale);
+            } else {
+              /* ----- PAN ----- */
+              panX = startPanX + (mid.x - lastMid.x);
+              panY = startPanY + (mid.y - lastMid.y);
+            }
+
+            clampPan();
+            applyTransform();
+          },
+          { passive: false },
+        );
+
+        el.addEventListener("touchend", () => {
+          lastDist = null;
+          lastMid = null;
+          canvas.selection = true;
+        });
+      }
+
+      function clampPan() {
+        const container = document.getElementById("canvasContainer");
+
+        const maxX = 0;
+        const maxY = 0;
+
+        const minX = container.clientWidth - 1920 * viewScale;
+        const minY = container.clientHeight - 1080 * viewScale;
+
+        panX = clamp(panX, minX, maxX);
+        panY = clamp(panY, minY, maxY);
+      }
+
+      function clamp(v, min, max) {
+        return Math.min(Math.max(v, min), max);
+      }
+
+      function getDistance(t1, t2) {
+        const dx = t2.clientX - t1.clientX;
+        const dy = t2.clientY - t1.clientY;
+        return Math.hypot(dx, dy);
+      }
+
+      function getMidpoint(t1, t2) {
+        return {
+          x: (t1.clientX + t2.clientX) / 2,
+          y: (t1.clientY + t2.clientY) / 2,
+        };
+      }
+
+      function enableMousePanAndZoom(canvas) {
+        const el = canvas.upperCanvasEl;
+
+        let isPanning = false;
+        let startX = 0;
+        let startY = 0;
+        let startPanX = 0;
+        let startPanY = 0;
+
+        el.addEventListener("mousedown", (e) => {
+          if (e.button !== 1) return; // Mouse3 only
+          e.preventDefault();
+
+          isPanning = true;
+          startX = e.clientX;
+          startY = e.clientY;
+          startPanX = panX;
+          startPanY = panY;
+          canvas.selection = false;
+          canvas.discardActiveObject();
+        });
+
+        window.addEventListener("mousemove", (e) => {
+          if (!isPanning) return;
+
+          panX = startPanX + (e.clientX - startX);
+          panY = startPanY + (e.clientY - startY);
+
+          clampPan();
+          applyTransform();
+        });
+
+        window.addEventListener("mouseup", (e) => {
+          if (e.button === 1) {
+            isPanning = false;
+            canvas.selection = true;
+          }
+        });
+
+        /* ---------- CTRL + SCROLL ZOOM ---------- */
+
+        el.addEventListener(
+          "wheel",
+          (e) => {
+            if (!e.ctrlKey) return;
+
+            e.preventDefault();
+
+            const zoomIntensity = 0.0015;
+            const delta = -e.deltaY * zoomIntensity;
+
+            const oldScale = viewScale;
+            viewScale = clamp(viewScale * (1 + delta), 0.5, 3);
+
+            zoomAtCursor(e.clientX, e.clientY, oldScale, viewScale);
+            clampPan();
+            applyTransform();
+          },
+          { passive: false },
+        );
+      }
+
+      function zoomAtCursor(clientX, clientY, oldScale, newScale) {
+        const container = document.getElementById("canvasContainer");
+        const rect = container.getBoundingClientRect();
+
+        const cx = clientX - rect.left;
+        const cy = clientY - rect.top;
+
+        const scaleRatio = newScale / oldScale;
+
+        panX = cx - scaleRatio * (cx - panX);
+        panY = cy - scaleRatio * (cy - panY);
+      }
+
+      function applyTransform() {
+        const scaler = document.getElementById("scaler");
+
+        scaler.style.transform = `translate(${panX}px, ${panY}px) scale(${viewScale})`;
+
+        canvas.requestRenderAll();
+      }
+
       function initCanvas() {
         document.getElementById("editorCanvas").style.display = "block";
         canvas = new fabric.Canvas("editorCanvas", {
           width: 1920,
           height: 1080,
         });
-        canvas.setZoom(0.5);
-        canvas.setDimensions({ width: 1920 * 0.5, height: 1080 * 0.5 });
+        enablePinchAndPan(canvas);
+        enableMousePanAndZoom(canvas);
         getModText().then(() => {
           events.forEach((event) => canvas.on(event, () => saveState()));
         });
@@ -474,7 +670,8 @@ <h3>Select an image</h3>
 
       async function getModText() {
         if (!mode) {
-          await getModTextCanvas();
+          if (!canvas) initCanvas();
+          else await getModTextCanvas();
           return;
         }
         try {
