quickdbd-cli 0.3.3__tar.gz → 0.3.5__tar.gz

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.5
 Name: quickdbd-cli
-Version: 0.3.3
+Version: 0.3.5
 Summary: Compile QuickDBD-syntax schema files into interactive HTML ER diagrams, with no table limit.
 Project-URL: Homepage, https://qdbd.dev/
 Project-URL: Documentation, https://qdbd.dev/guide/
@@ -186,7 +186,7 @@ jobs:
     permissions: { contents: read, pull-requests: write }
     steps:
       - uses: actions/checkout@v4
-      - uses: MarkPhamm/quickdbd-cli@v0.3.3
+      - uses: MarkPhamm/quickdbd-cli@v0.3.5
         with:
           path: erd/                  # schema file(s) or folder(s)
           output: site/index.html

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/README.md

@@ -148,7 +148,7 @@ jobs:
     permissions: { contents: read, pull-requests: write }
     steps:
       - uses: actions/checkout@v4
-      - uses: MarkPhamm/quickdbd-cli@v0.3.3
+      - uses: MarkPhamm/quickdbd-cli@v0.3.5
         with:
           path: erd/                  # schema file(s) or folder(s)
           output: site/index.html

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "quickdbd-cli"
-version = "0.3.3"
+version = "0.3.5"
 description = "Compile QuickDBD-syntax schema files into interactive HTML ER diagrams, with no table limit."
 readme = "README.md"
 license = "Apache-2.0"

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/scripts/build_gallery.py

@@ -19,7 +19,7 @@ from pathlib import Path
 from quickdbd_cli import __version__, diff
 from quickdbd_cli.dbt import import_dbt
 from quickdbd_cli.export import font_css
-from quickdbd_cli.html import _escape, _json_for_script, render_page
+from quickdbd_cli.html import _escape, _json_for_script, favicon, render_page
 from quickdbd_cli.parser import compile_sources
 from quickdbd_cli.project import Project
 
@@ -175,6 +175,7 @@ def gallery_page(catalog: Catalog, stats: dict[str, dict]) -> str:
     html = TEMPLATE.read_text(encoding="utf-8")
     return (
         html.replace("/*FONT_CSS*/", font_css())
+        .replace("<!--FAVICON-->", favicon())
         .replace("__VERSION__", _escape(__version__))
         .replace("__DATA__", _json_for_script(data))
     )

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/scripts/gen_thumbnails.py

@@ -3,6 +3,7 @@
     python scripts/gen_thumbnails.py            # every demo
     python scripts/gen_thumbnails.py diff tags  # just these
     python scripts/gen_thumbnails.py hero       # the README hero (docs/assets/img/hero.png)
+    python scripts/gen_thumbnails.py path-sql   # the home page's path-to-SQL shot (docs/assets/img/path-sql.png)
 
 Dev-only: needs Playwright (`uv pip install -p .venv playwright`) and drives the system Chrome, so no
 browser download. Each demo is opened at its `view` + `shot` URL hash; the screenshot is framed in a card
@@ -24,6 +25,8 @@ from quickdbd_cli.html import _escape
 
 W, H = 1200, 630
 SHOT_W, SHOT_H = 1280, 820
+# The home page's "Every relationship is a JOIN" section; hooks/home.py asks join_path for the same two tables.
+PATH_SHOT = ("sakila", "t=payment&p=country")
 # Hidden in the screenshot: the table list, toolbar, minimap and hint. The details panel and diff bar stay.
 CLEAN = ".explorer, .bar, .minimap, .hint { display: none !important; }"
 
@@ -98,6 +101,20 @@ def main(argv: list[str]) -> int:
             dst = ROOT / "docs" / "assets" / "img" / "hero.png"
             page.screenshot(path=str(dst))
             print(f"Wrote {dst.relative_to(ROOT)}")
+        if "path-sql" in (set(argv) or {"path-sql"}):
+            page.set_viewport_size({"width": 1440, "height": 860})
+            page.goto((out / PATH_SHOT[0] / "index.html").as_uri() + f"#{PATH_SHOT[1]}")
+            page.wait_for_timeout(800)
+            page.get_by_text("Show only this path").click()
+            # the home page shows the SQL beside the shot, so the panel goes and the whole path shows
+            page.add_style_tag(content=".details, .hint { display: none !important; }")
+            page.click("#zfit")
+            page.click("#zout")  # fit counts tables only; the payment edge loops out to the right
+            page.mouse.move(700, 820)
+            page.wait_for_timeout(800)
+            dst = ROOT / "docs" / "assets" / "img" / "path-sql.png"
+            page.screenshot(path=str(dst))
+            print(f"Wrote {dst.relative_to(ROOT)}")
         browser.close()
     return 0
 

quickdbd_cli-0.3.5/src/quickdbd_cli/__init__.py

@@ -0,0 +1 @@
+__version__ = "0.3.5"

quickdbd_cli-0.3.5/src/quickdbd_cli/assets/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><rect width="128" height="128" rx="28" fill="#2563eb"/><rect x="22" y="22" width="42" height="36" rx="9" fill="#fff"/><path d="M44 58v19a10 10 0 0 0 10 10h12" fill="none" stroke="#fff" stroke-width="8"/><rect x="64" y="70" width="42" height="33" rx="8" fill="#a8c1f7"/></svg>

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/src/quickdbd_cli/assets/render.js

@@ -547,6 +547,54 @@
     return lines.join("\n");
   }
 
+  /* ------------------------------------------------------------------ lit relationships (viewer only, never exported) */
+  var CARD_LABEL = { one: "1", zeroOne: "0..1", many: "*", zeroMany: "0..*" };
+  var CARD_WORD = { one: "one", zeroOne: "zero or one", many: "many", zeroMany: "zero or many" };
+
+  /* Cardinality labels for a lit line: one just past each end, on the side the line leaves from. a end first. */
+  function edgeLabels(model, pos, mode, rel, geo) {
+    var e = edgeGeom(model, geo || geometry(model, mode), pos, rel);
+    if (!e) return null;
+    function spot(x, y, dir, card) {
+      return { x: n(x + dir * 8), y: n(y - 9), anchor: dir > 0 ? "start" : "end", text: CARD_LABEL[card] || "" };
+    }
+    return [spot(e.xa, e.ya, e.da, rel.a.card), spot(e.xb, e.yb, e.db, rel.b.card)];
+  }
+
+  /* Text of the relationship card for model.rels[i]: the child (FK / many) side first, a plain-English sentence and
+   * the JOIN, built like `qdbd path` so quoting and composite keys match. */
+  function relCard(model, i) {
+    var r = model.rels[i], byId = {};
+    model.tables.forEach(function (t) { byId[t.id] = t; });
+    var aMany = r.a.card === "many" || r.a.card === "zeroMany", bMany = r.b.card === "many" || r.b.card === "zeroMany";
+    var aIsChild = aMany || !bMany, child = aIsChild ? r.a : r.b, parent = aIsChild ? r.b : r.a;
+    var pairs = stepPairs(model, i, child.t);
+    function side(end, k) {
+      var t = byId[end.t], cols = pairs.map(function (p) {
+        var c = t.cols.filter(function (x) { return x.id === p[k]; })[0];
+        return c ? c.name : p[k];
+      });
+      return t.name + (cols.length > 1 ? ".(" + cols.join(", ") + ")" : cols.length ? "." + cols[0] : "");
+    }
+    var plural = child.card === "many" || child.card === "zeroMany";
+    return {
+      from: side(child, 0),
+      to: side(parent, 1),
+      cardFrom: CARD_LABEL[child.card] || "",
+      cardTo: CARD_LABEL[parent.card] || "",
+      sentence: "Each " + byId[parent.t].name + " row has " + CARD_WORD[child.card] + " " + byId[child.t].name + (plural ? " rows" : " row"),
+      sql: child.t === parent.t ? selfJoin(byId[child.t], pairs) : pathSql(model, child.t, [{ from: child, to: parent, pairs: pairs }]),
+    };
+  }
+  /* A table joined to itself needs an alias, or every column is ambiguous. */
+  function selfJoin(t, pairs) {
+    var name = sqlIdent(t.name), alias = sqlPart(t.name.split(".").pop() + "_2");
+    function col(c) { var x = t.cols.filter(function (k) { return k.id === c; })[0]; return sqlPart(x ? x.name : c); }
+    var on = pairs.map(function (p) { return alias + "." + col(p[1]) + " = " + name + "." + col(p[0]); });
+    return "FROM " + name + "\nJOIN " + name + " AS " + alias + " ON " +
+      (on.length ? on.join(" AND ") : "...  -- table-level relationship: join columns not specified");
+  }
+
   root.qdbd = {
     findPath: findPath,
     stepPairs: stepPairs,
@@ -563,8 +611,12 @@
     renderSvg: renderSvg,
     bounds: bounds,
     neighbourhood: neighbourhood,
+    edgeLabels: edgeLabels,
+    relCard: relCard,
     esc: esc,
   };
+  root.qdbdEdgeLabels = edgeLabels;
+  root.qdbdRelCard = relCard;
   root.qdbdRenderSvg = renderSvg;
   root.qdbdSelect = select;
   root.qdbdRenderDrawio = renderDrawio;

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/src/quickdbd_cli/assets/style.css

@@ -34,6 +34,8 @@
   --t-edge: #b8bcc2;
   --row-hl: #dbe6f6;
   --row-hover: #eef3fa;
+  --lit: #4361ee;
+  --lit-deep: #2a3fb8;
 }
 /* Dark theme. viewer.js sets data-theme from the toggle, or from prefers-color-scheme when it's on auto. */
 :root[data-theme="dark"] {
@@ -71,6 +73,8 @@
   --t-edge: #5b6472;
   --row-hl: #24344d;
   --row-hover: #23282f;
+  --lit: #8aa0ff;
+  --lit-deep: #c3ceff;
 }
 ::selection { background: var(--pick); color: var(--ink); }
 :focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
@@ -105,6 +109,36 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 .r.hl .rb { fill: var(--row-hl); fill-opacity: 1; }
 .r:hover .rb { fill: var(--row-hover); fill-opacity: 1; }
 .t.flash .tb { stroke: #f0a020; stroke-width: 3; }
+.t .tb { transition: filter .18s; }
+.t:hover .tb { filter: drop-shadow(0 6px 14px rgba(16, 24, 40, .16)); }
+
+/* lit relationships: hovered or selected table, hovered or clicked line (viewer.js light()) */
+.e.lit .ep { stroke: var(--lit); stroke-width: 2.2; }
+.e.lit path, .e.lit .mc { stroke: var(--lit); }
+.r.lit .rb { fill: var(--row-hl); fill-opacity: 1; }
+.efocus .t:not(.on) { opacity: .18; }
+.efocus .e:not(.lit) { opacity: .07; }
+.fx { pointer-events: none; }
+.fx .flow { fill: none; stroke: var(--lit-deep); stroke-width: 4; stroke-dasharray: 4 18; animation: qdbd-flow 1.1s linear infinite; }
+.fx .flow.amber { stroke: #b86e00; }
+@keyframes qdbd-flow { to { stroke-dashoffset: -22; } }
+.fx .lbl { font: 600 11px Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; fill: var(--lit); paint-order: stroke;
+  stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; animation: qdbd-fade .2s ease-out; }
+@keyframes qdbd-fade { from { opacity: 0; } }
+.hit path { fill: none; stroke: transparent; stroke-width: 14; pointer-events: stroke; cursor: pointer; }
+/* relationship card (a clicked line) */
+.rcard { position: absolute; z-index: 6; display: none; min-width: 240px; max-width: min(460px, calc(100% - 16px)); padding: 10px 12px;
+  background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: 12px;
+  color: var(--ink); transform-origin: top left; }
+.rcard.open { display: block; animation: qdbd-cardin .16s ease-out; }
+@keyframes qdbd-cardin { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
+.rcard .rt { font-weight: 600; margin-bottom: 2px; word-break: break-word; }
+.rcard .rt b { color: var(--lit); font-weight: 600; padding: 0 6px; white-space: nowrap; }
+.rcard .rk { color: var(--muted); margin-bottom: 8px; }
+.rcard pre { margin: 0 0 8px; padding: 7px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 7px;
+  font: 11px ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; user-select: text; }
+.rcard .acts a { color: var(--blue); cursor: pointer; margin-right: 12px; }
+@media (prefers-reduced-motion: reduce) { .fx .flow, .fx .lbl, .rcard.open { animation: none; } }
 .t { cursor: grab; }
 #canvas.panning .t { cursor: grabbing; }
 
@@ -177,8 +211,10 @@ html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
 /* details drawer (right) */
 .details { position: absolute; top: 64px; right: 16px; bottom: 16px; width: 380px; background: var(--panel);
   border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); overflow: auto;
-  display: none; z-index: 3; padding: 16px 18px; }
-.details.open { display: block; }
+  z-index: 3; padding: 16px 18px; visibility: hidden; opacity: 0; transform: translateX(16px); pointer-events: none;
+  transition: opacity .2s, transform .2s, visibility 0s .2s; }
+.details.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity .2s, transform .2s; }
+@media (prefers-reduced-motion: reduce) { .details, .details.open { transition: none; } }
 .has-details .minimap { right: 412px; }
 .details .close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 6px;
   background: transparent; display: flex; align-items: center; justify-content: center; color: var(--muted); cursor: pointer; }

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/src/quickdbd_cli/assets/viewer.js

@@ -16,6 +16,8 @@
     shown: {},
     regions: !!data.model.regions,
     path: null, // {to: id, steps: [...]} from the selected table
+    edge: null, // the clicked (locked) relationship line: "a|ac|b|bc", like the .e data attributes
+    hover: null, // {t: table id} or {e: line key} under the mouse: lights lines without dimming anything
   };
   var svg = document.getElementById("canvas");
   var vp = document.getElementById("vp");
@@ -29,7 +31,12 @@
 
   /* ------------------------------------------------------------- render */
   function render() {
-    vp.innerHTML = Q.renderInner(S.vm, S.pos, S.mode, { docMarks: true, regions: S.regions });
+    vp.innerHTML = Q.renderInner(S.vm, S.pos, S.mode, { docMarks: true, regions: S.regions }) +
+      '<g class="fx"></g><g class="hit"></g>';
+    vp.appendChild(vp.querySelector(".tables")); // lit overlay and line hit targets sit under the tables
+    relByKey = {};
+    S.vm.rels.forEach(function (r, i) { relByKey[[r.a.t, r.a.c, r.b.t, r.b.c].join("|")] = i; });
+    buildHits();
     applyFocus();
     drawMinimap();
   }
@@ -37,9 +44,114 @@
   function renderEdges() {
     var g = vp.querySelector(".edges");
     if (g) g.innerHTML = Q.renderEdges(S.vm, S.pos, S.mode);
+    buildHits();
     applyFocus();
   }
 
+  /* ------------------------------------------------------------- lit relationships
+   * A lit line gets the --lit colour, flowing dashes and cardinality labels (drawn in .fx), and its rows are
+   * highlighted. Lines light up under a hovered table or line, for the selected table, and for the clicked line. */
+  var relByKey = {};
+  function edgeKey(e) {
+    return [e.getAttribute("data-a"), e.getAttribute("data-ac"), e.getAttribute("data-b"), e.getAttribute("data-bc")].join("|");
+  }
+  /* Wide transparent copies of every line, so a 1px curve can be hovered and clicked. */
+  function buildHits() {
+    var hit = vp.querySelector(".hit");
+    if (!hit) return;
+    hit.innerHTML = [].map.call(vp.querySelectorAll(".e"), function (e) {
+      return '<path data-k="' + Q.esc(edgeKey(e)) + '" d="' + e.querySelector(".ep").getAttribute("d") + '"/>';
+    }).join("");
+  }
+  function light() {
+    var fx = vp.querySelector(".fx");
+    if (!fx) return;
+    if (S.edge && relByKey[S.edge] === undefined) S.edge = null; // the clicked line was filtered away or edited out
+    if (!S.edge) closeCard();
+    vp.querySelectorAll(".lit, .t.on").forEach(function (el) { el.classList.remove("lit", "on"); });
+    svg.classList.toggle("efocus", !!S.edge);
+    var focused = svg.classList.contains("focus"), h = S.hover || {}, geo = null, parts = [];
+    vp.querySelectorAll(".e").forEach(function (e) {
+      var k = edgeKey(e), a = e.getAttribute("data-a"), b = e.getAttribute("data-b"), d = e.querySelector(".ep").getAttribute("d");
+      var dk = ' data-k="' + Q.esc(k) + '"';
+      if (e.classList.contains("ph")) { parts.push('<path class="flow amber"' + dk + ' d="' + d + '"/>'); return; }
+      if (!(k === S.edge || h.e === k || h.t === a || h.t === b || e.classList.contains("hl") ||
+          (focused && !S.path && !e.classList.contains("dim")))) return;
+      var r = S.vm.rels[relByKey[k]];
+      if (!r) return;
+      e.classList.add("lit");
+      [[r.a.t, r.a.c], [r.b.t, r.b.c]].forEach(function (end) {
+        var t = vp.querySelector('.t[data-id="' + cssEsc(end[0]) + '"]');
+        if (!t) return;
+        if (k === S.edge) t.classList.add("on");
+        var row = t.querySelector('.r[data-c="' + cssEsc(end[1]) + '"]');
+        if (row) row.classList.add("lit");
+      });
+      parts.push('<path class="flow"' + dk + ' d="' + d + '"/>');
+      (Q.edgeLabels(S.vm, S.pos, S.mode, r, geo = geo || Q.geometry(S.vm, S.mode)) || []).forEach(function (l) {
+        parts.push('<text class="lbl"' + dk + ' x="' + l.x + '" y="' + l.y + '" text-anchor="' + l.anchor + '">' + Q.esc(l.text) + "</text>");
+      });
+    });
+    fx.innerHTML = parts.join("");
+  }
+  var lightRaf = null;
+  function scheduleLight() {
+    if (!lightRaf) lightRaf = requestAnimationFrame(function () { lightRaf = null; light(); });
+  }
+  vp.addEventListener("mouseover", function (ev) {
+    var hp = ev.target.closest && ev.target.closest(".hit path"), t = ev.target.closest && ev.target.closest(".t");
+    var next = hp ? { e: hp.getAttribute("data-k") } : t ? { t: t.getAttribute("data-id") } : null;
+    if (JSON.stringify(next) !== JSON.stringify(S.hover)) { S.hover = next; scheduleLight(); }
+  });
+  /* A click on a line locks it: everything else dims. A second click on it, Esc or a click elsewhere clears it. */
+  function lockEdge(k, x, y) {
+    select(null);
+    S.edge = k;
+    light();
+    openCard(k, x, y);
+  }
+
+  /* The relationship card: both ends with their cardinality, a plain-English sentence and the JOIN. */
+  var rcard = document.getElementById("rcard"), cardInfo = null;
+  function openCard(k, x, y) {
+    var r = S.vm.rels[relByKey[k]], c = Q.relCard(S.vm, relByKey[k]);
+    cardInfo = { sql: c.sql, tables: [r.a.t, r.b.t] };
+    rcard.innerHTML = '<div class="rt">' + Q.esc(c.from) + "<b>" + Q.esc(c.cardFrom) + " &mdash; " + Q.esc(c.cardTo) + "</b>" + Q.esc(c.to) +
+      '</div><div class="rk">' + Q.esc(c.sentence) + "</div><pre>" + Q.esc(c.sql) +
+      '</pre><div class="acts"><a id="rcopy">Copy JOIN</a><a id="rboth">Show both tables</a></div>';
+    rcard.classList.remove("open");
+    void rcard.offsetWidth; // restart the open animation
+    rcard.classList.add("open");
+    var st = document.getElementById("stage").getBoundingClientRect();
+    rcard.style.left = Math.max(8, Math.min(x - st.left + 12, st.width - rcard.offsetWidth - 8)) + "px";
+    rcard.style.top = Math.max(8, Math.min(y - st.top + 12, st.height - rcard.offsetHeight - 8)) + "px";
+  }
+  function closeCard() { rcard.classList.remove("open"); }
+  rcard.addEventListener("click", function (ev) {
+    if (ev.target.id === "rcopy" && cardInfo) copyText(cardInfo.sql, "JOIN copied", rcard.querySelector("pre"));
+    else if (ev.target.id === "rboth" && cardInfo) {
+      var names = cardInfo.tables.filter(function (t, i, all) { return all.indexOf(t) === i; }).map(function (t) { return byId[t].name; });
+      closeCard();
+      applyFilter(names.map(function (n) { return n.replace(/[\s,+!]/g, "?"); }).join(" "));
+    }
+  });
+  document.addEventListener("pointerdown", function (ev) {
+    if (!rcard.contains(ev.target) && !(ev.target.closest && ev.target.closest(".hit path"))) closeCard();
+  });
+
+  /* The clipboard is blocked in some frames (the VS Code preview): select the text instead and say how to copy it. */
+  function copyText(text, done, pre) {
+    function fallback() {
+      var sel = window.getSelection(), range = document.createRange();
+      range.selectNodeContents(pre);
+      sel.removeAllRanges();
+      sel.addRange(range);
+      showToast("Press Ctrl/Cmd+C");
+    }
+    if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(text).then(function () { showToast(done); }, fallback);
+    else fallback();
+  }
+
   // Zoomed out on a big diagram, table text is unreadable but repainting it made every zoom step take ~150 ms
   // at 1000 tables, so it is hidden there. Smaller diagrams always show it.
   var LOD_TABLES = 300, LOD_ZOOM = 0.3;
@@ -57,7 +169,28 @@
     return [r.width || 800, r.height || 600];
   }
 
-  function fit(only) {
+  /* Zoom, fit and jump glide instead of snapping. The next pointer press or wheel stops a glide. Instant with
+   * prefers-reduced-motion, on load and while a shared link is applied. */
+  var glide = null, glideTarget = null, reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)");
+  function glideTo(v, ms) {
+    cancelGlide();
+    if (!ms || reduceMotion.matches || applyingHash) { S.view = v; applyView(); return; }
+    var from = { x: S.view.x, y: S.view.y, k: S.view.k }, t0 = performance.now();
+    glideTarget = v;
+    (function step(now) {
+      var f = Math.min(1, (now - t0) / ms), e = 1 - Math.pow(1 - f, 3);
+      S.view = { x: from.x + (v.x - from.x) * e, y: from.y + (v.y - from.y) * e, k: from.k + (v.k - from.k) * e };
+      applyView();
+      glide = f < 1 ? requestAnimationFrame(step) : null;
+      if (!glide) glideTarget = null;
+    })(t0);
+  }
+  function cancelGlide() {
+    if (glide) cancelAnimationFrame(glide);
+    glide = glideTarget = null;
+  }
+
+  function fit(only, animate) {
     var b = Q.bounds(only ? Q.subset(S.vm, only) : S.vm, S.pos, S.mode), sz = stageSize(), pad = 40;
     if (S.regions && !only) b = [b[0] - 30, b[1] - 60, b[2] + 30, b[3] + 30]; // room for region borders and labels
     if (only) sz = [sz[0] - (details.classList.contains("open") ? 400 : 0), sz[1]]; // keep clear of the details panel
@@ -65,24 +198,21 @@
     var top = 70, bottom = sz[0] < 900 ? 70 : pad, availH = sz[1] - top - bottom;
     var k = Math.min((sz[0] - 2 * pad) / (b[2] - b[0]), availH / (b[3] - b[1]), 1.5);
     k = Math.max(k, 0.03); // same floor as manual zoom, so wide diagrams still fit a phone screen
-    S.view = { k: k, x: (sz[0] - (b[2] - b[0]) * k) / 2 - b[0] * k, y: top + (availH - (b[3] - b[1]) * k) / 2 - b[1] * k };
-    applyView();
+    glideTo({ k: k, x: (sz[0] - (b[2] - b[0]) * k) / 2 - b[0] * k, y: top + (availH - (b[3] - b[1]) * k) / 2 - b[1] * k }, animate ? 350 : 0);
   }
 
-  function zoomAt(factor, cx, cy) {
-    var v = S.view, k = Math.min(4, Math.max(0.03, v.k * factor));
-    S.view = { k: k, x: cx - (cx - v.x) * (k / v.k), y: cy - (cy - v.y) * (k / v.k) };
-    applyView();
+  function zoomAt(factor, cx, cy, ms) {
+    var v = glideTarget || S.view, k = Math.min(4, Math.max(0.03, v.k * factor)); // quick clicks compound
+    glideTo({ k: k, x: cx - (cx - v.x) * (k / v.k), y: cy - (cy - v.y) * (k / v.k) }, ms);
   }
 
-  function centerOn(id) {
+  function centerOn(id, animate) {
     var t = byId[id], p = S.pos[id];
     if (!t || !p) return;
     var g = Q.geometry(S.vm, S.mode)[id], sz = stageSize();
     if (!g) return;
     var k = Math.max(S.view.k, 0.9);
-    S.view = { k: k, x: sz[0] / 2 - (p[0] + g.w / 2) * k, y: sz[1] / 2 - (p[1] + g.h / 2) * k };
-    applyView();
+    glideTo({ k: k, x: sz[0] / 2 - (p[0] + g.w / 2) * k, y: sz[1] / 2 - (p[1] + g.h / 2) * k }, animate ? 350 : 0);
     var el = vp.querySelector('.t[data-id="' + cssEsc(id) + '"]');
     if (el) {
       el.classList.add("flash");
@@ -104,6 +234,10 @@
   }
 
   function applyFocus() {
+    applyFocusClasses();
+    light();
+  }
+  function applyFocusClasses() {
     vp.querySelectorAll(".ph").forEach(function (el) { el.classList.remove("ph"); });
     if (S.path && S.focus && S.path.steps) {
       var on = {}, edges = [];
@@ -161,7 +295,7 @@
       if (t) t.classList.add("hl");
     });
   });
-  vp.addEventListener("mouseleave", function () { clearHover(); hideTip(); });
+  vp.addEventListener("mouseleave", function () { clearHover(); hideTip(); S.hover = null; scheduleLight(); });
 
   /* ------------------------------------------------------------- doc-comment tooltips */
   var tip = document.getElementById("tip");
@@ -209,17 +343,21 @@
   /* ------------------------------------------------------------- pointer: pan, click, drag */
   var drag = null;
   svg.addEventListener("pointerdown", function (ev) {
+    cancelGlide();
     if (ev.button !== 0) return;
     var tEl = ev.target.closest && ev.target.closest(".t");
-    drag = { sx: ev.clientX, sy: ev.clientY, moved: false, table: tEl ? tEl.getAttribute("data-id") : null, el: tEl };
+    var hp = !tEl && ev.target.closest && ev.target.closest(".hit path");
+    drag = { sx: ev.clientX, sy: ev.clientY, moved: false, table: tEl ? tEl.getAttribute("data-id") : null, el: tEl,
+      edge: hp ? hp.getAttribute("data-k") : null };
     if (drag.table) { // tables are draggable everywhere; only `qdbd serve` saves the new position
       drag.start = S.pos[drag.table].slice();
+      dragPrep(drag);
       tEl.parentNode.appendChild(tEl); // bring the grabbed table to the front
     } else {
       drag.view = { x: S.view.x, y: S.view.y };
     }
     svg.classList.add("panning");
-    svg.setPointerCapture(ev.pointerId);
+    try { svg.setPointerCapture(ev.pointerId); } catch (e) { /* synthetic events (the qdbd.dev tour) have no pointer to capture */ }
   });
   var raf = null;
   svg.addEventListener("pointermove", function (ev) {
@@ -231,19 +369,20 @@
       var p = [Math.round(drag.start[0] + dx / S.view.k), Math.round(drag.start[1] + dy / S.view.k)];
       S.pos[drag.table] = p;
       drag.el.setAttribute("transform", "translate(" + p[0] + "," + p[1] + ")");
-      if (!raf) raf = requestAnimationFrame(function () { raf = null; renderEdges(); });
+      if (!raf) raf = requestAnimationFrame(function () { raf = null; if (drag) dragEdges(drag); });
     } else if (drag.view) {
       S.view.x = drag.view.x + dx;
       S.view.y = drag.view.y + dy;
       applyView();
     }
   });
-  svg.addEventListener("pointerup", function () {
+  svg.addEventListener("pointerup", function (ev) {
     if (!drag) return;
     svg.classList.remove("panning");
     var d = drag;
     drag = null;
     if (!d.moved) {
+      if (d.edge) { if (d.edge === S.edge) select(null); else lockEdge(d.edge, ev.clientX, ev.clientY); return; }
       // Clicking the selected table toggles it off, unless it was selected quietly: then show its details.
       if (d.table && d.table === S.focus && !details.classList.contains("open")) showDetails(d.table);
       else select(d.table && S.focus !== d.table ? d.table : null);
@@ -251,14 +390,45 @@
     }
     if (d.start) {
       if (S.regions) render(); // regions are sized from table positions
+      else renderEdges();
       drawMinimap();
       var name = byId[d.table].name, body = {};
       body[name] = S.pos[d.table];
       if (window.qdbdServe) window.qdbdServe.saveLayout(body);
     }
   });
+  /* While a table is dragged only its own lines are redrawn (a full redraw per frame was slow at 200+ tables). */
+  function dragPrep(d) {
+    var on = function (k) { var p = k.split("|"); return p[0] === d.table || p[2] === d.table; };
+    d.geo = Q.geometry(S.vm, S.mode);
+    d.rels = S.vm.rels.filter(function (r) { return r.a.t === d.table || r.b.t === d.table; });
+    d.els = {};
+    d.hits = {};
+    vp.querySelectorAll(".edges .e").forEach(function (e) { var k = edgeKey(e); if (on(k)) d.els[k] = e; });
+    vp.querySelectorAll(".hit path").forEach(function (h) { var k = h.getAttribute("data-k"); if (on(k)) d.hits[k] = h; });
+  }
+  function dragEdges(d) {
+    var tmp = document.createElementNS("http://www.w3.org/2000/svg", "g"), fx = vp.querySelector(".fx");
+    tmp.innerHTML = Q.renderEdges({ style: S.vm.style, tables: S.vm.tables, rels: d.rels }, S.pos, S.mode, d.geo);
+    [].slice.call(tmp.children).forEach(function (e) {
+      var k = edgeKey(e), old = d.els[k], path = e.querySelector(".ep").getAttribute("d");
+      if (!old) return;
+      e.setAttribute("class", old.getAttribute("class")); // keep dim / lit / ph
+      old.replaceWith(e);
+      d.els[k] = e;
+      if (d.hits[k]) d.hits[k].setAttribute("d", path);
+      var items = fx ? fx.querySelectorAll('[data-k="' + cssEsc(k) + '"]') : [], labels = null, li = 0;
+      [].forEach.call(items, function (it) {
+        if (it.tagName === "path") { it.setAttribute("d", path); return; }
+        labels = labels || Q.edgeLabels(S.vm, S.pos, S.mode, S.vm.rels[relByKey[k]], d.geo) || [];
+        var l = labels[li++];
+        if (l) { it.setAttribute("x", l.x); it.setAttribute("y", l.y); it.setAttribute("text-anchor", l.anchor); }
+      });
+    });
+  }
   svg.addEventListener("wheel", function (ev) {
     ev.preventDefault();
+    cancelGlide();
     var r = svg.getBoundingClientRect();
     var factor = Math.exp(-ev.deltaY * (ev.ctrlKey ? 0.01 : 0.0015));
     zoomAt(factor, ev.clientX - r.left, ev.clientY - r.top);
@@ -269,9 +439,9 @@
 
   /* ------------------------------------------------------------- toolbar */
   function center() { var s = stageSize(); return [s[0] / 2, s[1] / 2]; }
-  document.getElementById("zin").onclick = function () { var c = center(); zoomAt(1.25, c[0], c[1]); };
-  document.getElementById("zout").onclick = function () { var c = center(); zoomAt(0.8, c[0], c[1]); };
-  document.getElementById("zfit").onclick = function () { fit(); };
+  document.getElementById("zin").onclick = function () { var c = center(); zoomAt(1.25, c[0], c[1], 200); };
+  document.getElementById("zout").onclick = function () { var c = center(); zoomAt(0.8, c[0], c[1], 200); };
+  document.getElementById("zfit").onclick = function () { fit(null, true); };
   document.querySelectorAll("#modes button").forEach(function (b) {
     b.onclick = function () {
       setMode(b.getAttribute("data-mode"));
@@ -325,13 +495,14 @@
   /* opts.center: pan to it. opts.quiet: don't open the details panel (only refresh it if it's already open). */
   function select(id, opts) {
     if ((id || null) !== S.focus) S.path = null;
+    S.edge = null; // a table (or nothing) replaces the clicked line
     S.focus = id && byId[id] ? id : null;
     scheduleHash();
     applyFocus();
     if (S.focus && (!(opts && opts.quiet) || details.classList.contains("open"))) showDetails(S.focus);
     else closeDetails();
     markTree();
-    if (S.focus && opts && opts.center) centerOn(S.focus);
+    if (S.focus && opts && opts.center) centerOn(S.focus, true);
   }
 
   /* ------------------------------------------------------------- explorer: search + table tree */
@@ -465,7 +636,7 @@
     drawTree();
     if (S.focus) showDetails(S.focus);
     else closeDetails();
-    if (!keepView) fit();
+    if (!keepView) fit(null, true);
     scheduleHash();
   }
   finput.addEventListener("input", function () {
@@ -590,7 +761,7 @@
     S.path = { to: target, steps: Q.findPath(S.vm, S.focus, target) };
     showDetails(S.focus);
     applyFocus();
-    if (S.path.steps && !applyingHash) fit([S.focus].concat(S.path.steps.map(function (st) { return st.to.t; })));
+    if (S.path.steps && !applyingHash) fit([S.focus].concat(S.path.steps.map(function (st) { return st.to.t; })), true);
     scheduleHash();
     return true;
   }
@@ -606,9 +777,7 @@
       // Selector syntax treats spaces, commas, + and a leading ! specially; match those characters with "?".
       applyFilter(names.map(function (n) { return n.replace(/[\s,+!]/g, "?"); }).join(" "));
     } else if (ev.target.id === "pathsql" && S.path && S.path.steps) {
-      var sql = Q.pathSql(S.vm, S.focus, S.path.steps);
-      if (navigator.clipboard && window.isSecureContext) navigator.clipboard.writeText(sql).then(function () { showToast("SQL copied"); });
-      else window.prompt("Copy SQL:", sql);
+      copyText(Q.pathSql(S.vm, S.focus, S.path.steps), "SQL copied", dbody.querySelector("#pathres pre"));
     }
   });
 
@@ -649,6 +818,7 @@
     r.setAttribute("height", sz[1] / v.k);
   }
   function miniPan(ev) {
+    cancelGlide();
     var pt = mini.createSVGPoint();
     pt.x = ev.clientX;
     pt.y = ev.clientY;
@@ -658,7 +828,11 @@
     applyView();
   }
   var miniDrag = false;
-  mini.addEventListener("pointerdown", function (ev) { miniDrag = true; mini.setPointerCapture(ev.pointerId); miniPan(ev); });
+  mini.addEventListener("pointerdown", function (ev) {
+    miniDrag = true;
+    try { mini.setPointerCapture(ev.pointerId); } catch (e) { /* synthetic event */ }
+    miniPan(ev);
+  });
   mini.addEventListener("pointermove", function (ev) { if (miniDrag) miniPan(ev); });
   mini.addEventListener("pointerup", function () { miniDrag = false; });
 

{quickdbd_cli-0.3.3 → quickdbd_cli-0.3.5}/src/quickdbd_cli/html.py

@@ -4,6 +4,7 @@ from __future__ import annotations
 
 import json
 from importlib import resources
+from urllib.parse import quote
 
 from .export import font_css
 
@@ -14,6 +15,11 @@ def _asset(name: str) -> str:
     return resources.files("quickdbd_cli").joinpath(f"assets/{name}").read_text(encoding="utf-8")
 
 
+def favicon() -> str:
+    """The VS Code extension's icon as an inline SVG data URL, so pages stay single-file."""
+    return f'<link rel="icon" href="data:image/svg+xml,{quote(_asset("icon.svg").strip(), safe=" /=:")}">'
+
+
 def _json_for_script(obj) -> str:
     # Safe inside <script type="application/json">: no "</" sequences.
     return json.dumps(obj, sort_keys=True, separators=(",", ":"), ensure_ascii=False).replace("</", "<\\/")
@@ -90,6 +96,7 @@ BODY = """
       <svg id="mini" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet"></svg>
     </div>
     <div class="tip" id="tip" role="tooltip"></div>
+    <div class="rcard" id="rcard" role="dialog" aria-label="Relationship"></div>
     <div class="toast" id="toast" role="status"></div>
     <div class="diffbar" id="diffbar"></div>
     <div class="hint">{hint}</div>
@@ -170,6 +177,7 @@ def render_page(
         '<!doctype html>\n<html lang="en"><head><meta charset="utf-8">'
         '<meta name="viewport" content="width=device-width, initial-scale=1">'
         '<meta name="generator" content="qdbd">'
+        f"{favicon()}"
         f"<title>{_escape(title)}</title>"
         f"<script>{THEME_JS}</script>"
         # The font CSS lives in its own <style> so the viewer can reuse it for SVG/PNG export