ctrl shift bbox modifiers

app.py

@@ -547,6 +547,20 @@ gradio-app { height: 100vh; overflow: hidden; }
 .ib-sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
 .ib-se { right: -6px; bottom: -6px; cursor: nwse-resize; }
 
+/* group-transform box (shown when 2+ boxes selected): outline is click-through, handles aren't */
+.ib-group {
+    position: absolute; border: 1px dashed #ff8c00; box-sizing: border-box;
+    pointer-events: none; z-index: 6;
+}
+.ib-gh {
+    position: absolute; width: 11px; height: 11px; background: #fff; border: 1px solid #ff8c00;
+    box-sizing: border-box; pointer-events: auto;
+}
+.ib-gh.ib-n { left: 50%; top: -6px; transform: translateX(-50%); cursor: ns-resize; }
+.ib-gh.ib-s { left: 50%; bottom: -6px; transform: translateX(-50%); cursor: ns-resize; }
+.ib-gh.ib-e { right: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
+.ib-gh.ib-w { left: -6px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
+
 /* ---- Right-side element cards (rendered by JS into #panel-root) ---- */
 .ib-panel-head { display: flex; align-items: center; gap: 8px; margin: 4px 0 6px; }
 .ib-add-wrap { margin-left: auto; display: flex; gap: 6px; align-items: center; }
@@ -714,7 +728,7 @@ CANVAS_JS = r"""
     canvasRoot.appendChild(stage);
 
     let els = []; // {id,type,ymin,xmin,ymax,xmax,desc,text,palette}
-    let selected = null;
+    let sel = new Set(); // selected ids (multi-select via ctrl/cmd-click)
     let drag = null;
     let jsCounter = 0;
     let emitTimer = null;
@@ -761,7 +775,7 @@ CANVAS_JS = r"""
           text: e.text || "",
           colors: e.colors || [],
         })),
-        selected: selected,
+        selected: Array.from(sel),
       };
       setNativeValue(el, JSON.stringify(payload));
       el.dispatchEvent(new Event("input", { bubbles: true }));
@@ -777,10 +791,11 @@ CANVAS_JS = r"""
     }
 
     function renderBoxes() {
-      stage.querySelectorAll(".ib-box").forEach((n) => n.remove());
+      stage.querySelectorAll(".ib-box, .ib-group").forEach((n) => n.remove());
+      const single = sel.size === 1;
       els.forEach((e, i) => {
         const d = document.createElement("div");
-        d.className = "ib-box" + (e.id === selected ? " sel" : "");
+        d.className = "ib-box" + (sel.has(e.id) ? " sel" : "");
         d.style.left = e.xmin / 10 + "%";
         d.style.top = e.ymin / 10 + "%";
         d.style.width = (e.xmax - e.xmin) / 10 + "%";
@@ -790,20 +805,39 @@ CANVAS_JS = r"""
         lab.className = "ib-label";
         lab.textContent = labelText(e, i);
         d.appendChild(lab);
-        ["nw", "ne", "sw", "se"].forEach((h) => {
-          const hd = document.createElement("div");
-          hd.className = "ib-h ib-" + h;
-          hd.dataset.h = h;
-          d.appendChild(hd);
-        });
+        if (single && sel.has(e.id)) {
+          ["nw", "ne", "sw", "se"].forEach((h) => {
+            const hd = document.createElement("div");
+            hd.className = "ib-h ib-" + h;
+            hd.dataset.h = h;
+            d.appendChild(hd);
+          });
+        }
         stage.appendChild(d);
       });
+      // A single group box with 8 handles when 2+ are selected — drag a handle to scale them together.
+      if (sel.size >= 2) {
+        const g = groupBBox();
+        const go = document.createElement("div");
+        go.className = "ib-group";
+        go.style.left = g.x0 / 10 + "%";
+        go.style.top = g.y0 / 10 + "%";
+        go.style.width = (g.x1 - g.x0) / 10 + "%";
+        go.style.height = (g.y1 - g.y0) / 10 + "%";
+        ["nw", "n", "ne", "e", "se", "s", "sw", "w"].forEach((h) => {
+          const hd = document.createElement("div");
+          hd.className = "ib-gh ib-" + h;
+          hd.dataset.gh = h;
+          go.appendChild(hd);
+        });
+        stage.appendChild(go);
+      }
     }
 
     function cardHTML(e, i) {
       const isText = e.type === "text";
       return (
-        '<div class="ib-card' + (e.id === selected ? " sel" : "") + '" data-id="' + e.id + '">' +
+        '<div class="ib-card' + (sel.has(e.id) ? " sel" : "") + '" data-id="' + e.id + '">' +
         '<div class="ib-card-head">' +
         '<span class="ib-badge">' + (i + 1) + "</span>" +
         '<select class="ib-type" data-f="type">' +
@@ -1055,16 +1089,37 @@ CANVAS_JS = r"""
       renderPanel();
     }
 
-    function setSelected(id) {
-      selected = id;
-      stage.querySelectorAll(".ib-box").forEach((n) =>
-        n.classList.toggle("sel", n.dataset.id === id));
-      const panelRoot = document.getElementById("panel-root");
-      if (!panelRoot) return;
-      panelRoot.querySelectorAll(".ib-card").forEach((n) =>
-        n.classList.toggle("sel", n.dataset.id === id));
-      const card = panelRoot.querySelector('.ib-card[data-id="' + id + '"]');
-      if (card) card.scrollIntoView({ block: "nearest" });
+    const selArr = () => els.filter((e) => sel.has(e.id));
+    function groupBBox() {
+      const s = selArr();
+      if (!s.length) return null;
+      let x0 = 1e9, y0 = 1e9, x1 = -1e9, y1 = -1e9;
+      s.forEach((e) => {
+        x0 = Math.min(x0, e.xmin); y0 = Math.min(y0, e.ymin);
+        x1 = Math.max(x1, e.xmax); y1 = Math.max(y1, e.ymax);
+      });
+      return { x0: x0, y0: y0, x1: x1, y1: y1 };
+    }
+    function applySelClasses() {
+      stage.querySelectorAll(".ib-box").forEach((n) => n.classList.toggle("sel", sel.has(n.dataset.id)));
+      const pr = document.getElementById("panel-root");
+      if (pr) pr.querySelectorAll(".ib-card").forEach((n) => n.classList.toggle("sel", sel.has(n.dataset.id)));
+    }
+    function scrollToCard(id) {
+      const pr = document.getElementById("panel-root");
+      const c = pr && pr.querySelector('.ib-card[data-id="' + id + '"]');
+      if (c) c.scrollIntoView({ block: "nearest" });
+    }
+    function selectOnly(id) {
+      sel = new Set(id ? [id] : []);
+      renderBoxes();
+      applySelClasses();
+      if (id) scrollToCard(id);
+    }
+    function toggleSelect(id) {
+      if (sel.has(id)) sel.delete(id); else sel.add(id);
+      renderBoxes();
+      applySelClasses();
     }
 
     function toNorm(ev) {
@@ -1075,26 +1130,86 @@ CANVAS_JS = r"""
       };
     }
 
+    // snapshot the current geometry of the selected boxes (for move/group-resize deltas)
+    const snapshot = () => {
+      const o = {};
+      selArr().forEach((e) => { o[e.id] = { xmin: e.xmin, ymin: e.ymin, xmax: e.xmax, ymax: e.ymax }; });
+      return o;
+    };
+
+    function resizeSingle(dr, p, shift) {
+      const e = dr.e, o = dr.orig, h = dr.h;
+      let xmin = o.xmin, ymin = o.ymin, xmax = o.xmax, ymax = o.ymax;
+      if (h.includes("w")) xmin = Math.min(p.x, o.xmax - 1);
+      if (h.includes("e")) xmax = Math.max(p.x, o.xmin + 1);
+      if (h.includes("n")) ymin = Math.min(p.y, o.ymax - 1);
+      if (h.includes("s")) ymax = Math.max(p.y, o.ymin + 1);
+      if (shift) { // preserve aspect ratio, anchored at the opposite corner
+        const ow = o.xmax - o.xmin, oh = o.ymax - o.ymin;
+        const scale = Math.max((xmax - xmin) / ow, (ymax - ymin) / oh);
+        const nw = ow * scale, nh = oh * scale;
+        if (h.includes("w")) xmin = o.xmax - nw; else xmax = o.xmin + nw;
+        if (h.includes("n")) ymin = o.ymax - nh; else ymax = o.ymin + nh;
+      }
+      e.xmin = clamp(xmin); e.ymin = clamp(ymin); e.xmax = clamp(xmax); e.ymax = clamp(ymax);
+    }
+
+    function groupResize(dr, p, shift) {
+      const h = dr.h, g = dr.g;
+      let nx0 = g.x0, ny0 = g.y0, nx1 = g.x1, ny1 = g.y1;
+      if (h.includes("w")) nx0 = Math.min(p.x, g.x1 - 1);
+      if (h.includes("e")) nx1 = Math.max(p.x, g.x0 + 1);
+      if (h.includes("n")) ny0 = Math.min(p.y, g.y1 - 1);
+      if (h.includes("s")) ny1 = Math.max(p.y, g.y0 + 1);
+      let sx = (nx1 - nx0) / (g.x1 - g.x0);
+      let sy = (ny1 - ny0) / (g.y1 - g.y0);
+      if (h === "n" || h === "s") sx = 1;
+      if (h === "e" || h === "w") sy = 1;
+      if (shift && h.length === 2) { const f = Math.max(sx, sy); sx = f; sy = f; }
+      const ax = h.includes("w") ? g.x1 : g.x0; // anchor = opposite side
+      const ay = h.includes("n") ? g.y1 : g.y0;
+      selArr().forEach((e) => {
+        const o = dr.orig[e.id];
+        e.xmin = clamp(ax + (o.xmin - ax) * sx);
+        e.xmax = clamp(ax + (o.xmax - ax) * sx);
+        e.ymin = clamp(ay + (o.ymin - ay) * sy);
+        e.ymax = clamp(ay + (o.ymax - ay) * sy);
+      });
+    }
+
     // ---- canvas interaction ----
     stage.addEventListener("pointerdown", (ev) => {
       if (ev.button !== 0 || !img.src || eyedropSample) return;
+      const p = toNorm(ev);
+      const gh = ev.target.classList.contains("ib-gh") ? ev.target.dataset.gh : null;
       const boxEl = ev.target.closest(".ib-box");
       const handle = ev.target.classList.contains("ib-h") ? ev.target.dataset.h : null;
-      const p = toNorm(ev);
-      if (handle && boxEl) {
-        drag = { mode: "resize", h: handle, e: byId(boxEl.dataset.id) };
-        setSelected(boxEl.dataset.id);
-      } else if (boxEl) {
+      const additive = ev.ctrlKey || ev.metaKey;
+
+      if (gh) {
+        drag = { mode: "gresize", h: gh, g: groupBBox(), orig: snapshot() };
+      } else if (handle && boxEl) {
         const e = byId(boxEl.dataset.id);
-        drag = { mode: "move", e: e, start: p, orig: Object.assign({}, e) };
-        setSelected(e.id);
+        drag = { mode: "resize", h: handle, e: e,
+          orig: { xmin: e.xmin, ymin: e.ymin, xmax: e.xmax, ymax: e.ymax } };
+      } else if (boxEl) {
+        const id = boxEl.dataset.id;
+        if (additive) {
+          toggleSelect(id);
+          stage.setPointerCapture(ev.pointerId);
+          ev.preventDefault();
+          return;
+        }
+        if (!sel.has(id)) selectOnly(id);
+        drag = { mode: "move", start: p, orig: snapshot(), ids: Array.from(sel) };
       } else {
+        sel = new Set();
         const id = "j" + jsCounter++;
         const e = { id: id, type: "obj", ymin: p.y, xmin: p.x, ymax: p.y, xmax: p.x,
           desc: "", text: "", colors: [] };
         els.push(e);
+        sel = new Set([id]);
         drag = { mode: "draw", e: e, start: p };
-        selected = id;
         renderAll();
       }
       stage.setPointerCapture(ev.pointerId);
@@ -1104,45 +1219,54 @@ CANVAS_JS = r"""
     stage.addEventListener("pointermove", (ev) => {
       if (!drag) return;
       const p = toNorm(ev);
-      const e = drag.e;
+      const shift = ev.shiftKey;
       if (drag.mode === "move") {
-        const o = drag.orig;
-        const w = o.xmax - o.xmin;
-        const h = o.ymax - o.ymin;
-        e.xmin = clamp(o.xmin + (p.x - drag.start.x));
-        e.ymin = clamp(o.ymin + (p.y - drag.start.y));
-        e.xmax = e.xmin + w;
-        e.ymax = e.ymin + h;
-        if (e.xmax > 1000) { e.xmax = 1000; e.xmin = 1000 - w; }
-        if (e.ymax > 1000) { e.ymax = 1000; e.ymin = 1000 - h; }
+        let dx = p.x - drag.start.x, dy = p.y - drag.start.y;
+        let gx0 = 1e9, gy0 = 1e9, gx1 = -1e9, gy1 = -1e9;
+        drag.ids.forEach((id) => {
+          const o = drag.orig[id];
+          gx0 = Math.min(gx0, o.xmin); gy0 = Math.min(gy0, o.ymin);
+          gx1 = Math.max(gx1, o.xmax); gy1 = Math.max(gy1, o.ymax);
+        });
+        dx = Math.max(-gx0, Math.min(1000 - gx1, dx));
+        dy = Math.max(-gy0, Math.min(1000 - gy1, dy));
+        drag.ids.forEach((id) => {
+          const o = drag.orig[id], e = byId(id);
+          if (!e) return;
+          e.xmin = o.xmin + dx; e.ymin = o.ymin + dy;
+          e.xmax = o.xmax + dx; e.ymax = o.ymax + dy;
+        });
       } else if (drag.mode === "draw") {
+        const e = drag.e;
         e.xmin = Math.min(drag.start.x, p.x);
         e.xmax = Math.max(drag.start.x, p.x);
         e.ymin = Math.min(drag.start.y, p.y);
         e.ymax = Math.max(drag.start.y, p.y);
       } else if (drag.mode === "resize") {
-        const h = drag.h;
-        if (h.includes("w")) e.xmin = Math.min(p.x, e.xmax - 1);
-        if (h.includes("e")) e.xmax = Math.max(p.x, e.xmin + 1);
-        if (h.includes("n")) e.ymin = Math.min(p.y, e.ymax - 1);
-        if (h.includes("s")) e.ymax = Math.max(p.y, e.ymin + 1);
+        resizeSingle(drag, p, shift);
+      } else if (drag.mode === "gresize") {
+        groupResize(drag, p, shift);
       }
       renderBoxes();
     });
 
     function endDrag() {
       if (!drag) return;
-      const e = drag.e;
-      if (drag.mode === "draw" && (e.xmax - e.xmin < 8 || e.ymax - e.ymin < 8)) {
-        els = els.filter((x) => x !== e);
-        selected = null;
+      if (drag.mode === "draw") {
+        const e = drag.e;
+        if (e.xmax - e.xmin < 8 || e.ymax - e.ymin < 8) {
+          els = els.filter((x) => x !== e);
+          sel = new Set();
+        }
       }
       const wasDraw = drag.mode === "draw";
       drag = null;
       renderAll();
+      applySelClasses();
       emitNow();
       if (wasDraw) {
-        const card = panelRoot.querySelector('.ib-card.sel .ib-desc');
+        const pr = document.getElementById("panel-root");
+        const card = pr && pr.querySelector(".ib-card.sel .ib-desc");
         if (card) card.focus();
       }
     }
@@ -1150,11 +1274,11 @@ CANVAS_JS = r"""
     stage.addEventListener("pointercancel", endDrag);
 
     window.addEventListener("keydown", (ev) => {
-      if ((ev.key === "Delete") && selected) {
+      if (ev.key === "Delete" && sel.size) {
         const t = document.activeElement;
         if (t && (t.tagName === "TEXTAREA" || t.tagName === "INPUT")) return;
-        els = els.filter((x) => x.id !== selected);
-        selected = null;
+        els = els.filter((x) => !sel.has(x.id));
+        sel = new Set();
         renderAll();
         emitNow();
       }
@@ -1184,7 +1308,7 @@ CANVAS_JS = r"""
       if (!e) return;
       e.type = ev.target.value;
       renderAll();
-      setSelected(e.id);
+      selectOnly(e.id);
       emitNow();
     });
     document.addEventListener("click", (ev) => {
@@ -1196,7 +1320,7 @@ CANVAS_JS = r"""
       const e = byId(card.dataset.id);
       if (ev.target.classList.contains("ib-del")) {
         els = els.filter((x) => x.id !== card.dataset.id);
-        if (selected === card.dataset.id) selected = null;
+        sel.delete(card.dataset.id);
         renderAll();
         emitNow();
         return;
@@ -1229,16 +1353,18 @@ CANVAS_JS = r"""
         });
         return;
       }
-      if (!ev.target.closest(".ib-f, .ib-type, .ib-pal")) setSelected(card.dataset.id);
+      if (!ev.target.closest(".ib-f, .ib-type, .ib-pal")) {
+        if (ev.ctrlKey || ev.metaKey) toggleSelect(card.dataset.id);
+        else selectOnly(card.dataset.id);
+      }
     });
 
     function addElement(type) {
       const id = "j" + jsCounter++;
       els.push({ id: id, type: type, ymin: 350, xmin: 350, ymax: 650, xmax: 650,
         desc: "", text: "", colors: [] });
-      selected = id;
       renderAll();
-      setSelected(id);
+      selectOnly(id);
       emitNow();
     }
 
@@ -1251,7 +1377,7 @@ CANVAS_JS = r"""
           if (Array.isArray(p.elements)) {
             els = p.elements.map((e) => Object.assign({}, e));
           }
-          if ("selected" in p) selected = p.selected;
+          sel = new Set(Array.isArray(p.selected) ? p.selected : []);
           renderAll();
         } catch (e) {
           console.error("IB.load", e);