labull-framework 0.1.1__tar.gz → 0.1.2__tar.gz

{labull_framework-0.1.1/labull_framework.egg-info → labull_framework-0.1.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: labull-framework
-Version: 0.1.1
+Version: 0.1.2
 Summary: Labull Framework: a pluggable Django app with Authing OIDC login and magic blocks
 Author: Labull Framework
 License-Expression: MIT

{labull_framework-0.1.1 → labull_framework-0.1.2}/labull_framework/admin.py

@@ -59,5 +59,5 @@ class MagicBlockAdmin(admin.ModelAdmin):
         return None
 
     def has_add_permission(self, request) -> bool:
-        # 块的 uuid 由开发者在前端写死（`<MagicBlockHost uuid="…">`），admin 里"新增"没有意义。
+        # 块的 uuid 由开发者在前端路由表里写死（`MagicBlockPage` 的 `props.uuid`），admin 里"新增"没有意义。
         return False

{labull_framework-0.1.1 → labull_framework-0.1.2}/labull_framework/canvas/data.py

@@ -366,18 +366,74 @@ def payload() -> dict[str, Any]:
     current_tables = current['tables']
     baseline = gitinfo.baseline_tables()
     diff = _diff(baseline, current_tables)
+    relation_diff = _relation_diff(baseline, current_tables)
     return {
         'tables': current_tables,
         'deletedTables': _deleted_tables(baseline, diff['deleted']),
         'diff': diff,
         # 逐列的差异（`表名 → {added, modified, deleted}`）：前端拿它给**整行**上色。
         'fieldDiff': _field_diff(baseline, current_tables),
+        # 逐条**关联**的差异（`表名 → {added, modified, deleted}`，键是关联名）：前端拿它给**连线上色**。
+        'relationDiff': relation_diff,
+        # 🔴 **被删掉的关联**那几条的原文（`表名 → [关联]`）：现在这一份里已经没有了，
+        #    前端要照基线的这一份把红线补画出来 —— 否则关联一删就"少了一根线"，
+        #    看不出是哪两张表之间断的（与 `deletedTables` 同一个道理）。
+        'deletedRelations': _deleted_relations(baseline, relation_diff),
         'git': gitinfo.head(),
         'baseline': 'none' if baseline is None else 'present',
         'layout': read_layout(),
     }
 
 
+def _deleted_relations(
+    baseline: list[dict[str, Any]] | None,
+    relation_diff: dict[str, dict[str, list[str]]],
+) -> dict[str, list[dict[str, Any]]]:
+    """基线里有、现在没有的那些关联（只取真的被删掉的那几个键）。
+
+    🔴 **要把 `targetTable` 补齐**：老契约里的关联只写了 `target`（模型名），没有 `targetTable`
+       （表名）—— 而前端是**按表名**找卡片的。不补的话那条红线找不到对端，会被直接跳过，
+       症状就是"关联删了但图上什么都没少"（与这一条功能想解决的问题正好相反）。
+    """
+    if not baseline or not relation_diff:
+        return {}
+    out: dict[str, list[dict[str, Any]]] = {}
+    for table in baseline:
+        name = str(table.get('table'))
+        removed = (relation_diff.get(name) or {}).get('deleted') or []
+        if not removed:
+            continue
+        old = _relations_of(table)
+        rows = []
+        for key in removed:
+            row = old.get(key)
+            if row is None:
+                continue
+            fixed = dict(row)
+            if not fixed.get('targetTable'):
+                fixed['targetTable'] = _table_name_of(fixed.get('target'))
+            rows.append(fixed)
+        if rows:
+            out[name] = rows
+    return out
+
+
+def _table_name_of(model_name: Any) -> str:
+    """模型名 → **数据库表名**（补老契约缺的那一项）。查不到就回空串，由前端跳过这一条。"""
+    wanted = str(model_name or '')
+    if not wanted:
+        return ''
+    try:
+        from django.apps import apps
+
+        for model in apps.get_models():
+            if model.__name__ == wanted:
+                return str(model._meta.db_table)
+    except Exception:  # noqa: BLE001 —— 补不上就空串，不影响别的
+        return ''
+    return ''
+
+
 def _deleted_tables(baseline: list[dict[str, Any]] | None, deleted: list[str]) -> list[dict[str, Any]]:
     """基线里有、现在没有的那些表（补上新契约才有的键，免得前端到处判空）。"""
     if not baseline or not deleted:
@@ -413,6 +469,10 @@ def _field_diff(baseline: list[dict[str, Any]] | None, current_tables: list[dict
        不需要再逐列标一遍。
     🔴 判据与 `_compare_key()` 同源：**列的类型 / 主键 / 可空 / 唯一变了才算改**，
        备注文案（`brief`）变了不算 —— 否则给某个字段补一句说明，整张表就满屏黄。
+    🔴 **改名按"库里那条记录还在不在"判**（用户明确要求）：
+       · 只改了名字、列还是原来那一列（类型 / 主键 / 可空 / 唯一 都没变）⇒ 算**修改**；
+       · 列被删掉、另外起了一列（形状不一样）⇒ 算**删一列 + 加一列**。
+       配对只按**结构**配（见 `_renames()`）：名字里带 `_id` 那种后缀差异不会影响判断。
     """
     if not baseline:
         return {}
@@ -431,11 +491,60 @@ def _field_diff(baseline: list[dict[str, Any]] | None, current_tables: list[dict
             for key, column in new.items()
             if key in old and _column_key(old[key]) != _column_key(column)
         ]
+        # 改名：把"删掉的"与"新加的"里形状一致的那些配成"修改"。
+        pairs = _renames(
+            [(key, _column_key(old[key])) for key in removed],
+            [(key, _column_key(new[key])) for key in added],
+        )
+        if pairs:
+            gone = {old_key for old_key, _new_key in pairs}
+            fresh = {new_key for _old_key, new_key in pairs}
+            removed = [key for key in removed if key not in gone]
+            added = [key for key in added if key not in fresh]
+            # 🔴 **两边都标上**：基线那一版的名字与现在这一版的名字各标一次 ——
+            #    前端只有"现在这一份"，它按名字查标记，漏掉新名字那一份就整行不亮。
+            for old_key, new_key in pairs:
+                changed.extend([old_key, new_key])
         if added or removed or changed:
-            out[name] = {'added': sorted(added), 'modified': sorted(changed), 'deleted': sorted(removed)}
+            out[name] = {
+                'added': sorted(set(added)),
+                'modified': sorted(set(changed)),
+                'deleted': sorted(set(removed)),
+            }
     return out
 
 
+def _renames(
+    removed: list[tuple[str, Any]],
+    added: list[tuple[str, Any]],
+) -> list[tuple[str, str]]:
+    """把"删掉的"与"新加的"里**形状一模一样**的配成"改名"，回 `[(旧名, 新名)]`。
+
+    🔴 这是"库里那条记录还在不在"的落地判据：形状（类型 / 主键 / 可空 / 唯一）没变
+       ⇒ 那就是**同一列换了个名字** ⇒ 算修改；形状对不上 ⇒ 真的是删一列 + 加一列。
+    🔴 逐个 "吃" 掉（不是一整个签名一把抓）：**同一张表里两根形状一样的列**（很少见但不是没有）
+       才不会把同一个新列配给两个旧列。
+    ⚠️ 顺序取各自在契约里的出现顺序（契约是按库里的列序排的）—— 只影响"谁配谁"，
+       而配错的后果很轻（两个都标成"修改"而不是一红一绿）。
+    """
+    used: set[int] = set()
+    pairs: list[tuple[str, str]] = []
+    for old_key, old_shape in removed:
+        hit = None
+        for index, (new_key, new_shape) in enumerate(added):
+            if index in used or new_shape != old_shape:
+                continue
+            if new_key == old_key:
+                continue  # 同名的不算改名（那种在别处已经处理过了）
+            hit = index
+            break
+        if hit is None:
+            continue
+        used.add(hit)
+        pairs.append((old_key, added[hit][0]))
+    return pairs
+
+
 def _columns_of(table: dict[str, Any]) -> dict[str, dict[str, Any]]:
     """一张表的列（老契约用 `fields`、新契约用 `columns`，两个都认）。"""
     columns = table.get('columns') if isinstance(table.get('columns'), list) else table.get('fields')
@@ -472,6 +581,124 @@ def _compare_key(table: dict[str, Any]) -> Any:
     return (table.get('table') or table.get('name'), shape)
 
 
+def _relation_diff(
+    baseline: list[dict[str, Any]] | None,
+    current_tables: list[dict[str, Any]],
+) -> dict[str, dict[str, list[str]]]:
+    """每一张表的**关联**里哪几条是新增 / 改过 / 删掉的（键是关联名：外键列名或反向关联名）。
+
+    🔴 为什么要它：用户要的是"连线也随增删改变色" —— 而"这一条关联动过没有"这件事
+       前端算不出来（它手里只有现在这一份，没有基线）。判据与逐列那一份同源，只放这一处。
+    🔴 判的是**结构**（指向谁 / 种类 / 基数 / 可空 / 唯一），不是文案：
+       `brief` 改一句话不该让整张图满屏黄 —— 与 `_compare_key()` 的理由完全一样。
+    🔴 没有基线（`None`）时**一条都不报**：否则一张干净的图会被判成"全是新增"。
+    """
+    if not baseline:
+        return {}
+    before = {str(table.get('table')): _relations_of(table) for table in baseline}
+    out: dict[str, dict[str, list[str]]] = {}
+    for table in current_tables:
+        name = str(table.get('table'))
+        old = before.get(name)
+        if old is None:
+            continue  # 新增的表整块标色，不必逐条关联再标一遍
+        new = _relations_of(table)
+        added = [key for key in new if key not in old]
+        removed = [key for key in old if key not in new]
+        changed = [key for key, one in new.items() if key in old and _relation_key(old[key]) != _relation_key(one)]
+        # 关联改名 → 修改，而不是"删一条 + 加一条"：见 `_relation_renames()`。
+        pairs = _relation_renames(old, new, removed, added)
+        if pairs:
+            gone = {old_key for old_key, _new_key in pairs}
+            fresh = {new_key for _old_key, new_key in pairs}
+            removed = [key for key in removed if key not in gone]
+            added = [key for key in added if key not in fresh]
+            for old_key, new_key in pairs:
+                changed.extend([old_key, new_key])
+        if added or removed or changed:
+            out[name] = {
+                'added': sorted(set(added)),
+                'modified': sorted(set(changed)),
+                'deleted': sorted(set(removed)),
+            }
+    return out
+
+
+def _relation_renames(
+    old: dict[str, dict[str, Any]],
+    new: dict[str, dict[str, Any]],
+    removed: list[str],
+    added: list[str],
+) -> list[tuple[str, str]]:
+    """关联改名 ⇒ 配成"修改"，回 `[(旧关联名, 新关联名)]`。
+
+    ⚠️ 配对**只看列名是否一模一样**：列名一样 ⇒ 字段名改了而列没动 ⇒ 改名；
+       列名对不上 ⇒ 那是**另一列**，一律按删 + 加算（用户明确要求）。
+       "形状一致"**不做兜底**：`customer_row_id` → `buyer_id` 这种形状也一样，
+       但它是换了一列，不是改名（真踩过：兜底会把"删了"说成"改了"）。
+    """
+    if not removed or not added:
+        return []
+    pairs: list[tuple[str, str]] = []
+    used: set[str] = set()
+    for old_key in removed:
+        want = (old.get(old_key) or {}).get('column')
+        if not want:
+            continue  # 没有列（反向 / 多对多）⇒ 没有"记录还在不在"可判，按删 + 加
+        for new_key in added:
+            if new_key in used:
+                continue
+            got = (new.get(new_key) or {}).get('column')
+            if got and str(got) == str(want):
+                used.add(new_key)
+                pairs.append((old_key, new_key))
+                break
+    return pairs
+
+
+def _relation_shape(relation: dict[str, Any]) -> Any:
+    """关联的**结构**（不含名字）：指向谁 / 什么种类 / 基数 / 可空 / 唯一。
+
+    ⚠️ 与 `_relation_key()` 是两件事：那一份用来判"同一条关联动过没有"（含指向），
+       这一份留给"光看结构够不够判同一件事"的场合 —— 目前**没有**用它来配改名：
+       改名只认"列名一样"（见 `_relation_renames()`），结构一样但列换了的属于删 + 加。
+    """
+    return (
+        str(relation.get('targetTable') or relation.get('target') or ''),
+        str(relation.get('kind') or ''),
+        str(relation.get('cardinality') or ''),
+        relation.get('null'),
+        relation.get('unique'),
+    )
+
+
+def _relations_of(table: dict[str, Any]) -> dict[str, dict[str, Any]]:
+    """一张表的关联（键 = 关联名：外键列名 / 反向关联名 / 多对多那一侧的名字）。"""
+    rows = table.get('relations')
+    out: dict[str, dict[str, Any]] = {}
+    for row in rows or []:
+        if not isinstance(row, dict):
+            continue
+        key = str(row.get('field') or row.get('targetTable') or '')
+        if key:
+            out[key] = row
+    return out
+
+
+def _relation_key(relation: dict[str, Any]) -> Any:
+    """一条关联**用来比差异的那部分**：指向谁 / 什么种类 / 基数 / 可空 / 唯一。
+
+    ⚠️ 不含 `brief` / `column` 这类展示与实现细节（理由见 `_relation_diff()`）。
+    """
+    return (
+        str(relation.get('targetTable') or relation.get('target') or ''),
+        str(relation.get('kind') or ''),
+        str(relation.get('cardinality') or ''),
+        relation.get('null'),
+        relation.get('unique'),
+    )
+
+
 def _diff(baseline: list[dict[str, Any]] | None, current: list[dict[str, Any]]) -> dict[str, list[str]]:
     """逐表逐列比出加 / 改 / 删。
 

{labull_framework-0.1.1 → labull_framework-0.1.2}/labull_framework/canvas/static/canvas.css

@@ -18,6 +18,8 @@
   --modified: #b45309;
   --deleted: #b91c1c;
   --accent: #2563eb;
+  /* 连线 / 箭头的**默认色**：黑。只有"相对基线动过"的关联才换成上面那三档状态色。 */
+  --ink: #1f2933;
   /* 三态的底色（🔴 整块 / 整行染色，而不是只描一圈边 —— 一屏几十列时边线看不出是哪一行变了） */
   --tint-added: #e8f6ec;
   --tint-added-strong: #d5efdd;
@@ -166,17 +168,26 @@ body {
   z-index: 2;
 }
 
+/* 🔴 **默认是黑的**（用户明确要求）：连线只有在"这条关联相对基线动过"时才上色 ——
+ *    没动过的线不该抢眼，颜色留给"变了的东西"（与卡片、字段行那三档同一套 token）。 */
 .edge {
   fill: none;
-  stroke: var(--tone-green);
+  stroke: var(--ink);
   stroke-width: 1.6;
   stroke-linejoin: round;
   pointer-events: stroke;
   transition: stroke-width .12s;
 }
+
 .edge.violet { stroke: var(--tone-violet); }
 /* 反向（只读）那一侧画虚一点：库里没有这一列，不该看起来跟真外键一模一样 */
 .edge.is-readonly { stroke-dasharray: 5 4; }
+/* 🔴 关联的增 / 改 / 删：颜色与卡片、字段行的三档完全一致（同一份 token）。
+ * ⚠️ 必须写在 `.edge.violet` / `.edge.is-readonly` **后面**：那几个是按"关联种类"上的色，
+ *    状态色优先级更高（一条新增的多对多线也该是绿的）。 */
+.edge.is-added { stroke: var(--added); stroke-dasharray: none; }
+.edge.is-modified { stroke: var(--modified); stroke-dasharray: none; }
+.edge.is-deleted { stroke: var(--deleted); stroke-dasharray: 6 4; }
 /* 悬停卡片上那一行关联时，这条线加粗、并给它一圈白底（压在别的线上也看得清） */
 .edge.is-hot {
   stroke-width: 3;
@@ -190,7 +201,11 @@ body {
 .arrow { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
 .arrow.green { stroke: var(--tone-green); }
 .arrow.violet { stroke: var(--tone-violet); }
-.arrow.muted { stroke: var(--muted); }
+.arrow.muted { stroke: var(--ink); }
+/* 关联的增 / 改 / 删：箭头跟着线一起换色（marker 各自一份，见 `edgeDefs()`）。 */
+.arrow.added { stroke: var(--added); }
+.arrow.modified { stroke: var(--modified); }
+.arrow.deleted { stroke: var(--deleted); }
 
 /* 基数：**空心圆里一个 `1` / `*`**，落在方块边界附近（线的两端）。
  * 🔴 圆填白、描边走线的颜色：它压在白卡 / 绿卡 / 黄卡上都读得出来 ——

{labull_framework-0.1.1 → labull_framework-0.1.2}/labull_framework/canvas/static/canvas.js

@@ -49,6 +49,14 @@ const MARKER_R = 12;
  *     圆骑着线并坐在边界上，三者就对上了。 */
 const MARKER_BACK = MARKER_R;
 
+/** 同一张卡片同一条边上，相邻两个连线端口至少隔多远。
+ *  🔴 必须**大于基数圆的直径**（`MARKER_R` × 2 = 24）：不然两个 `1`/`*` 还是会叠在一起 ——
+ *    而"每个 1 / * 都看得见"正是这个值存在的理由（45 张表的项目里一张表被七八条线指向）。 */
+const PORT_GAP = 26;
+/** 最后那道"两条线挨太近就推开"的阈值。🔴 **别调大**：端口已经锚在卡片边界上，
+ *  推得太狠会把端点从边界推走，于是又变成"线没贴紧边缘"（原来取 14 就踩过这个）。 */
+const DE_OVERLAP_GAP = 8;
+
 /* ── 自关联那个圈（见 `selfLoops`） ──
  * 🔴 半径要**明显大于**基数圆圈的半径（`MARKER_R` = 12）：圈上要放两枚基数记号，
  *    圈太小的话那两个圆会盖住圈本身、看着像两个点而不是"一条绕回来的关联"。
@@ -165,6 +173,48 @@ function stateOf(table) {
   return '';
 }
 
+/**
+ * 这张表**要画的关联**：现在这一份逐条带上 `mark`（`added` / `modified` / 空），
+ * 后面再接上**基线里有、现在没了**的那几条（`mark = 'deleted'`），它们画成红线。
+ *
+ * 🔴 为什么连"删掉的关联"也要画：用户要的是"连线随增删改变色" —— 关联被删掉时，
+ *    那条线如果直接消失，人只会看到"少了一根线"，看不出**是哪一对表之间断的**。
+ *    与 `deletedTables`（被删的表整块呈现）是同一个道理。
+ * 🔴 `relationDiff` 由后端算（前端没有基线，算不出"动过没有"）：见 `data._relation_diff()`。
+ *    **后端没给（老数据 / 同源没升级）时一律按"没动过"处理**，也就是默认黑色 —— 不猜。
+ * ⚠️ 自关联那几张大卡片上还列着关联行，所以这里**不能改 `item.table.relations` 本身**：
+ *    只给 `edges()` 一份"要画的"，卡片拿到的还是原来那份完整的。
+ */
+function relationsOf(table) {
+  // 🔴 页面上那份 `state.relationDiff` 是**后端算的**（前端没有基线）。
+  //    `window.__LABULL_RELATION_DIFF__` 是给验收脚本用的**替身**（真项目里用不到）：
+  //    有它就用它，没有就用后端那份 —— 后者才是正常路径。
+  const injected = typeof window !== 'undefined' ? window.__LABULL_RELATION_DIFF__ : null;
+  const perTable = injected || state.relationDiff || {};
+  const diff = perTable[table.table] || {};
+  const added = new Set(diff.added || []);
+  const modified = new Set(diff.modified || []);
+  const rows = [];
+  for (const link of table.relations || []) {
+    const key = link.field || link.targetTable || '';
+    let mark = '';
+    if (added.has(key)) mark = 'added';
+    else if (modified.has(key)) mark = 'modified';
+    rows.push({ ...link, mark });
+  }
+  const deleted = new Set(diff.deleted || []);
+  if (deleted.size) {
+    const injectedBase = typeof window !== 'undefined' ? window.__LABULL_DELETED_RELATIONS__ : null;
+    const baseline = ((injectedBase || state.deletedRelations || {})[table.table]) || [];
+    for (const old of baseline) {
+      const key = old.field || old.targetTable || '';
+      if (!deleted.has(key)) continue;
+      rows.push({ ...old, mark: 'deleted' });
+    }
+  }
+  return rows;
+}
+
 /* ── 渲染 ──────────────────────────────────────────────────────────────── */
 
 function render() {
@@ -208,13 +258,13 @@ function render() {
     return;
   }
   place(cards, layer);
-  edges(cards, layer, paths, labels);
+  edges(cards, paths, labels);
   // 🔴 把"重画一次"暴露给拖拽：**拖动期间每一帧都要重画**（见 `dragify`）。
   //    原来唯一的重画入口是这一层上的 `click`（下面那一行），而拖动是"按住 + 移动"：
   //    按住的那几十帧里线一直停在旧坐标 —— 线是 `z-index:2` 盖在卡片上的，于是那条不动的线
   //    横穿被拖走的卡片、两端的 `1`/`*` 落在已经无关的卡片旁，看起来就是"关联乱掉了"（真踩过）。
   //    拖出卡片再松手更糟：那种松手浏览器**不合成 click**，线就永久停在旧位置。
-  redrawEdges = () => edges(cards, layer, paths, labels);
+  redrawEdges = () => edges(cards, paths, labels);
   applyView();
   // 🔴 **第一次打开时自动适应一次**：按列自动排出来的图常常比视口宽（表一多、或者表很长），
   //    不缩一下的话最右边那几张表就在屏幕外，看着像"少画了"（真踩过）。
@@ -224,7 +274,7 @@ function render() {
     requestAnimationFrame(() => requestAnimationFrame(fitView));
   }
   // 展开 / 收起会改变卡片高度 ⇒ 线要重画（否则箭头会指到卡片外面去）。
-  layer.addEventListener('click', () => requestAnimationFrame(() => edges(cards, layer, paths, labels)));
+  layer.addEventListener('click', () => requestAnimationFrame(() => edges(cards, paths, labels)));
   if (diff.added.length === 0 && diff.modified.length === 0 && diff.deleted.length === 0 && state.baseline === 'none') {
     notify('没有可比基线：这里只画当前的数据模型。想看到"改了什么"，导出模型形状并提交一次。');
   }
@@ -238,11 +288,13 @@ function svgEl(tag, attrs = {}) {
   return el;
 }
 
-/** 箭头那一个小三角（颜色三档，与线的颜色一一对应）。 */
+/** 箭头那一个小三角（颜色按"线的状态"分档，与线本身一一对应）。 */
 function edgeDefs() {
   const defs = svgEl('defs');
-  // ⚠️ 一个 marker 只能有一种颜色 ⇒ 三种颜色各做一个（用 `context-stroke` 的写法浏览器支持不一）。
-  for (const tone of ['muted', 'green', 'violet']) {
+  // ⚠️ 一个 marker 只能有一种颜色 ⇒ 每种颜色各做一个（用 `context-stroke` 的写法浏览器支持不一）。
+  // 🔴 除了"外键 / 多对多"那两档，还要给**新增 / 修改 / 删除**各做一份：
+  //    线按 diff 上色时箭头的颜色得跟着变，否则会出现"绿线配绿箭、红线配绿箭"。
+  for (const tone of ['muted', 'green', 'violet', 'added', 'modified', 'deleted']) {
     const marker = svgEl('marker', {
       id: `arrow-${tone}`,
       viewBox: '0 0 10 10',
@@ -279,7 +331,7 @@ function edgeDefs() {
  *    没有正向（说明是纯反向关系，例如 M2M 的另一侧）才画反向。
  * 🔴 一对表之间真有多条时按垂直方向**扇形排开**：重叠的两条线看起来就是一条，等于丢了一半信息。
  */
-function edges(cards, layer, paths, labels) {
+function edges(cards, paths, labels) {
   paths.innerHTML = '';
   labels.innerHTML = '';
   // ⚠️ 自关联（见 `selfLoops`）也要画，所以"只有一张卡片"时不能直接返回。
@@ -287,12 +339,34 @@ function edges(cards, layer, paths, labels) {
   const byTable = new Map();
   for (const item of cards) byTable.set(item.el.dataset.name, item.el);
 
-  const layerBox = layer.getBoundingClientRect();
+  /* 🔴 量出来的卡片盒必须是**图层坐标**（＝ SVG 的用户坐标），**不能**把 `getBoundingClientRect()`
+   *    直接当它用：那个值已经**过了 `.surface` 的 `scale()`**，是视口坐标。100% 时两者恰好相等，
+   *    所以这个坑平时藏着 —— 缩到 40% 时量到的全是真值的 0.4 倍，而写进 `d` 的端点又要被 transform
+   *    缩一次 ⇒ 屏幕上只剩 0.16 倍：所有线朝图层原点塌陷、基数圆缩成小点、自关联的圈脱离卡片角。
+   *    （用户报的就是这个：「页面缩放的时候拖动表，关联马上就坏掉」。）
+   *    ⚠️ 为什么偏偏**拖动**才炸：缩放本身**不重画连线**（`applyView()` 只改 `transform`），首次渲染
+   *       又是在 scale = 1 下算的 ⇒ 缩放之后线看着还是贴着的；而拖动走 `scheduleRedraw()` 重画，
+   *       第一帧就把错位的坐标写死了。两个单变量验收（只缩放 / 只拖动）因此都漏掉了它 ——
+   *       交叉场景另有一条 `tools/zoom-drag-check-canvas.mjs` 盯着。
+   *    🎯 换算走 SVG 自己的 `getScreenCTM()` 求逆：它与"缩放是谁施加的、`transform-origin` 在哪"
+   *       都无关，将来画布换成旋转 / 加 `viewBox` 也仍然成立。两个验收脚本判"端点贴不贴卡片边界"
+   *       用的正是它的正向 —— 两边同一个变换，不会各算各的。
+   */
+  const ctm = paths.getScreenCTM();
+  const inv = ctm ? ctm.inverse() : null;
+  // 画布没渲染时 `getScreenCTM()` 会给 null（理论上到不了）：原样放行，别把这一页炸掉。
+  const toLayer = (x, y) => (inv
+    ? { x: inv.a * x + inv.c * y + inv.e, y: inv.b * x + inv.d * y + inv.f }
+    : { x, y });
   const boxes = new Map();
   const box = (el) => {
     if (boxes.has(el)) return boxes.get(el);
     const rect = el.getBoundingClientRect();
-    const value = { x: rect.left - layerBox.left, y: rect.top - layerBox.top, w: rect.width, h: rect.height };
+    // 🔴 两个角都换算一次再相减（别只换算左上角、宽高照抄 `rect.width`）：后者假定变换是纯平移，
+    //    缩放一旦存在，宽高就还是视口值 —— 那正是这个 bug 的另一半。
+    const topLeft = toLayer(rect.left, rect.top);
+    const bottomRight = toLayer(rect.right, rect.bottom);
+    const value = { x: topLeft.x, y: topLeft.y, w: bottomRight.x - topLeft.x, h: bottomRight.y - topLeft.y };
     boxes.set(el, value);
     return value;
   };
@@ -307,7 +381,7 @@ function edges(cards, layer, paths, labels) {
   //       "卡片右上角画一个圈"的路（见 `selfLoop()`）。
   const groups = new Map();
   for (const item of cards) {
-    for (const link of item.table.relations || []) {
+    for (const link of relationsOf(item.table)) {
       if (!byTable.has(link.targetTable) || link.targetTable === item.el.dataset.name) continue;
       const key = [item.el.dataset.name, link.targetTable].sort().join('|');
       if (!groups.has(key)) groups.set(key, { forward: [], reverse: [] });
@@ -315,85 +389,141 @@ function edges(cards, layer, paths, labels) {
     }
   }
 
-  // ② 有正向用正向，没有才用反向。
+  // ② 有正向用正向，没有才用反向 —— **但状态标记要合并过来**。
+  //    🔴 同一对表的两侧是**同一条关联**（`order_item.order_row` 与 `orders.order_item_set`），
+  //       而"动过没有"可能只挂在**被丢掉的那一侧**上（反向关联被改 / 被删时就是如此）。
+  //       不合并的话：那条线照旧是黑的 —— 用户要的"关联变化要变色"就静默失效了（真踩过）。
+  //    合并口径：只要两侧里**任意一侧**有标记，这条线就带上它；两边都有时按 删 > 改 > 增 取一个
+  //    （删掉最该显眼；同一对表两侧真的同时变动时，人先要知道"这条没了"）。
+  const MARK_ORDER = { deleted: 3, modified: 2, added: 1 };
   const edgesToDraw = [];
-  for (const group of groups.values()) edgesToDraw.push(...(group.forward.length ? group.forward : group.reverse));
-
-  // ③ 逐对排开画线。同一个表对内的多条才需要扇形偏移。
-  const pairs = new Map();
-  for (const entry of edgesToDraw) {
-    const key = [entry.item.el.dataset.name, entry.link.targetTable].sort().join('|');
-    if (!pairs.has(key)) pairs.set(key, []);
-    pairs.get(key).push(entry);
+  for (const group of groups.values()) {
+    const picked = group.forward.length ? group.forward : group.reverse;
+    const marks = new Set([...group.forward, ...group.reverse].map((entry) => entry.link.mark || ''));
+    marks.delete('');
+    const mark = marks.size
+      ? [...marks].sort((one, two) => (MARK_ORDER[two] || 0) - (MARK_ORDER[one] || 0))[0]
+      : '';
+    for (const entry of picked) {
+      edgesToDraw.push(mark ? { ...entry, link: { ...entry.link, mark } } : entry);
+    }
+  }
+
+  // ③ 先算出每条线的**原始端口**（`port()` 给的那两点，就在卡片边界上）。
+  const raw = [];
+  for (const { item, link } of edgesToDraw) {
+    const target = byTable.get(link.targetTable);
+    const a = port(box(item.el), box(target));
+    const b = port(box(target), box(item.el));
+    raw.push({ item, link, target, a, b });
+  }
+  // ④ 🔴 **把同一个"卡片 + 哪条边"上的端口沿那条边铺开**（这是"别全挤到一点"的关键）。
+  //
+  //    为什么不能只靠"垂直于连线"那种扇形偏移：那种偏移是**按表对**算的，而真正挤在一起的是
+  //    **一张表被很多张表引用**的场合（45 张表的项目里 `fams_spec` 被七八张表指向）——
+  //    那些线来自不同表对、每对只有一条 ⇒ 偏移量全是 0，于是七八条线、七八个 `1`/`*`
+  //    全叠在卡片边上的同一个点（用户报的就是这个：圈叠成一团、边看着像"没接上"）。
+  //
+  //    判据是"端口属于哪张卡片的哪条边"：同一条边上的端口排序之后**等距铺开**，
+  //    间距取 `PORT_GAP`（比基数圆的直径大一点，圆才不会互相盖住）。
+  //    排序键取**另一端的坐标**：这样线是顺序扇开的，不会互相交叉成一团乱麻。
+  const slots = new Map();
+  for (const entry of raw) {
+    const push = (card, side, slot) => {
+      const key = `${card.dataset.name}|${side}`;
+      if (!slots.has(key)) slots.set(key, { card, side, items: [] });
+      slots.get(key).items.push(slot);
+    };
+    push(entry.item.el, entry.a.side, { port: entry.a, other: entry.b });
+    push(entry.target, entry.b.side, { port: entry.b, other: entry.a });
+  }
+
+  // 逐条边：排序 → 等距分配 → 得到每个端口的新坐标（用端口对象身份当键）。
+  const fanned = new Map();
+  for (const { card, side, items } of slots.values()) {
+    const vertical = side === 'left' || side === 'right'; // 竖边 ⇒ 沿 y 铺开
+    const cardBox = box(card);
+    const fixed = vertical ? items[0].port.x : items[0].port.y;
+    // 🔴 铺开的**中心取原来那个端口**（`port()` 算出来的、在卡片边中点附近），不是卡片边的起点。
+    //    取起点的话：端口会被排到"边的最上端往下数"的位置，最后几个落出卡片之外 ——
+    //    线的端点于是悬在卡片外面（真踩过：`hub` 明明在 y=382..480，端点却落在 y=258）。
+    const anchor = vertical ? items[0].port.y : items[0].port.x;
+    // 可用长度：那一条边去掉两端各留一个圆的位置（不让圆被边角切掉）。
+    const span = (vertical ? cardBox.h : cardBox.w) - MARKER_R * 2;
+    const ordered = [...items].sort((one, two) => (vertical ? one.other.y - two.other.y : one.other.x - two.other.x));
+    const gap = ordered.length > 1 ? Math.min(PORT_GAP, span / (ordered.length - 1)) : 0;
+    const first = anchor - (gap * (ordered.length - 1)) / 2;
+    ordered.forEach((slot, index) => {
+      const at = ordered.length > 1 ? first + gap * index : anchor;
+      fanned.set(slot.port, vertical ? { x: fixed, y: at } : { x: at, y: fixed });
+    });
   }
 
+  // ⑤ 逐条画线：两端用**铺开之后**的端口，线**正好落在卡片边界上**。
   const drawn = [];
-  for (const group of pairs.values()) {
-    const total = group.length;
-    group.forEach(({ item, link }, index) => {
-      const target = byTable.get(link.targetTable);
-      const from = box(item.el);
-      const to = box(target);
-      const a = port(from, to);
-      const b = port(to, from);
-      // 垂直方向上的扇形偏移：只有一条时偏移 0（正中间），多条时对称铺开。
-      const spread = total > 1 ? (index - (total - 1) / 2) * 26 : 0;
-      const dx = b.x - a.x;
-      const dy = b.y - a.y;
-      const length = Math.hypot(dx, dy) || 1;
-      const ux = dx / length;
-      const uy = dy / length;
-      const ox = (-dy / length) * spread;
-      const oy = (dx / length) * spread;
-      // 🔴 `portA` / `portB` 是**卡片边界上的那两点**（`port()` 给的），线最终就画到这两点 ——
-      //    `start` / `end` 是**扇形铺开 / 挤开**之后的端点，用来定箭头与基数圆的位置。
-      //    两者要分开存：混成一个的话"线贴不贴边缘"就只能靠巧合。
-      const portA = { x: a.x, y: a.y };
-      const portB = { x: b.x, y: b.y };
-      const start = { x: a.x + ox, y: a.y + oy };
-      const end = { x: b.x + ox, y: b.y + oy };
-      const tone = link.kind === 'manyToMany' ? 'violet' : 'green';
-      // 箭头落在**哪一头**：从"1"出发、指向"多"。
-      // 🔴 `oneAtTarget` 同时决定两件事，必须一起算：
-      //    ① 箭头方向（"多"那一端出箭头）；
-      //    ② 两枚基数怎么标 —— 见下面那两行的说明。
-      const selfCard = link.cardinality || '1';
-      const otherCard = reciprocalOf(target, link, item.el.dataset.name);
-      const oneAtTarget = selfCard === '*' && otherCard !== '*'; // 对面那一头是"1"
-      const path = svgEl('path', {
-        d: `M ${start.x} ${start.y} L ${end.x} ${end.y}`,
-        class: `edge ${tone}${link.readonly ? ' is-readonly' : ''}`,
-        // 对面是 "1" ⇒ 箭头在**起点**（"多"这一端）朝外；否则箭头在终点。
-        ...(oneAtTarget
-          ? { 'marker-start': `url(#arrow-${tone})` }
-          : { 'marker-end': `url(#arrow-${tone})` }),
-        'data-from': item.el.dataset.name,
-        'data-to': link.targetTable,
-        // 这几项挂到 DOM 上纯粹为了**排查**：出问题时探针能直接读出"画的时候算的是哪一端"，
-        // 不用再靠推理猜（这一处来回改错过三次，就是缺这个）。
-        'data-self-card': selfCard,
-        'data-other-card': otherCard,
-        'data-one-at-target': String(oneAtTarget),
-      });
-      path.append(titleEl(link.brief || `${item.table.table}.${link.field} → ${link.targetTable}`));
-      paths.append(path);
-      // `ux` / `uy` 与 `ox` / `oy` 都记下来：后面要沿线的方向挪标记、沿垂直方向错开名字。
-      drawn.push({ item, link, target, start, end, portA, portB, dx, dy, length, ux, uy, ox, oy, path, selfCard, otherCard, oneAtTarget });
+  for (const entry of raw) {
+    const { item, link, target } = entry;
+    const portA = fanned.get(entry.a) || { x: entry.a.x, y: entry.a.y };
+    const portB = fanned.get(entry.b) || { x: entry.b.x, y: entry.b.y };
+    const start = { x: portA.x, y: portA.y };
+    const end = { x: portB.x, y: portB.y };
+    const dx = end.x - start.x;
+    const dy = end.y - start.y;
+    const length = Math.hypot(dx, dy) || 1;
+    const ux = dx / length;
+    const uy = dy / length;
+    const ox = 0;
+    const oy = 0;
+    const tone = link.kind === 'manyToMany' ? 'violet' : 'green';
+    // 🔴 **连线按"这条关联动过没有"上色**（用户明确要的）：没动过是**黑的**（默认色调，
+    //    `tone` 只在没挂 diff 标记时才用它区分"外键 / 多对多"）；
+    //    新增绿、改过黄、删掉红 —— 与卡片、字段行那三档配色**同一套 token**，一眼能对上。
+    //    ⚠️ 箭头也要跟着换：marker 是 `<defs>` 里按颜色各做一份的（SVG 的 marker 不吃 currentColor）。
+    const mark = link.mark || '';
+    const edgeClass = ['edge', tone, mark ? `is-${mark}` : '', link.readonly ? 'is-readonly' : '']
+      .filter(Boolean).join(' ');
+    // 箭头落在**哪一头**：从"1"出发、指向"多"。
+    // 🔴 `oneAtTarget` 同时决定两件事，必须一起算：
+    //    ① 箭头方向（"多"那一端出箭头）；
+    //    ② 两枚基数怎么标 —— 见下面那两行的说明。
+    const selfCard = link.cardinality || '1';
+    const otherCard = reciprocalOf(target, link, item.el.dataset.name);
+    const oneAtTarget = selfCard === '*' && otherCard !== '*'; // 对面那一头是"1"
+    const path = svgEl('path', {
+      d: `M ${start.x} ${start.y} L ${end.x} ${end.y}`,
+      class: edgeClass,
+      // 对面是 "1" ⇒ 箭头在**起点**（"多"这一端）朝外；否则箭头在终点。
+      // 🔴 箭头的颜色跟着线的状态走（mark 为空时仍按 kind 那份）。
+      ...(oneAtTarget
+        ? { 'marker-start': `url(#arrow-${mark || tone})` }
+        : { 'marker-end': `url(#arrow-${mark || tone})` }),
+      'data-from': item.el.dataset.name,
+      'data-to': link.targetTable,
+      // 这几项挂到 DOM 上纯粹为了**排查**：出问题时探针能直接读出"画的时候算的是哪一端"，
+      // 不用再靠推理猜（这一处来回改错过三次，就是缺这个）。
+      'data-self-card': selfCard,
+      'data-other-card': otherCard,
+      'data-one-at-target': String(oneAtTarget),
     });
+    path.append(titleEl(link.brief || `${item.table.table}.${link.field} → ${link.targetTable}`));
+    paths.append(path);
+    // `ux` / `uy` 与 `ox` / `oy` 都记下来：后面要沿线的方向挪标记、沿垂直方向错开名字。
+    drawn.push({ item, link, target, start, end, portA, portB, dx, dy, length, ux, uy, ox, oy, path, selfCard, otherCard, oneAtTarget });
   }
 
-  // 🔴 重叠的那两条看起来就是一条线（等于丢了一半信息），所以最后再挤一遍：
-  //    两条线的**垂直距离**不够大就各自往两边挪。为什么不只靠上面那个扇形偏移：
-  //    偏移是沿"垂直于连线"的方向加的，而连线本身是斜的 —— 两条斜线换个基准点之后
-  //    垂直间距会被压缩（实测：端点差 26px 的两条线，到另一头只差 13px）。
+  // 🔴 重叠的那两条看起来就是一条线（等于丢了一半信息），所以再挤一遍：
+  //    上面那一步已经按"卡片的那条边"把端口铺开了，这里只处理**剩下的**近重叠
+  //    （两条线方向几乎一致、又恰好挨在一起）。阈值取 `DE_OVERLAP_GAP`：
+  //    🔴 **不能取太大**（原来是 14）——端口已经是锚在卡片边界上的，推得太狠会把端点从
+  //       边界上推走，于是又变成"线没贴紧边缘"（真踩过）。只够把两条线分开一点点就行。
   for (let i = 0; i < drawn.length; i += 1) {
     for (let j = i + 1; j < drawn.length; j += 1) {
       const one = drawn[i];
       const two = drawn[j];
       if (Math.abs(one.length - two.length) > 1) continue // 方向差太多：本来就不会重叠
       const gap = Math.abs((two.start.y - one.start.y) * (one.dx / one.length) - (two.start.x - one.start.x) * (one.dy / one.length));
-      if (gap >= 14) continue;
-      const push = (14 - gap) / 2 + 1;
+      if (gap >= DE_OVERLAP_GAP) continue;
+      const push = (DE_OVERLAP_GAP - gap) / 2 + 0.5;
       for (const [edge, sign] of [[one, 1], [two, -1]]) {
         const nx = (-edge.dy / edge.length) * push * sign;
         const ny = (edge.dx / edge.length) * push * sign;

{labull_framework-0.1.1 → labull_framework-0.1.2}/labull_framework/magic_block/devkit.py

@@ -373,11 +373,21 @@ def dev_guide() -> str:
         '\n'
         '```js\n'
         'const me = await magicBlock.getMe()                 // 当前用户（认人只认它）\n'
-        "await magicBlock.navigateTab('/orders')             // 跳一个页面（可跳哪些见 pages.lock.ts）\n"
+        "await magicBlock.navigateTab('/orders')             // 跳标签（可跳哪些见 pages.lock.ts）\n"
+        'const tab = await magicBlock.context()              // 这条标签的链接参数：tab.path / tab.params / tab.query\n'
+        "await magicBlock.setTabTitle('订单 SO-42')            // 给所属那条标签起名（只有块自己知道是哪一单）\n"
         'const rows = await magicBackendApi.Order.list({})   // 调这个块自己的后端\n'
         '```\n'
         '\n'
-        '- 这三样是宿主**注入**的，运行期就有；别去 import 任何东西（块没有构建步骤，就是普通 HTML + JS）。\n'
+        '- 这几样是宿主**注入**的，运行期就有；别去 import 任何东西（块没有构建步骤，就是普通 HTML + JS）。\n'
+        '- **跳页 = 打开那个页面的标签**：已经开着就切过去，没开就新开一条（带参数就写全 `/orders/42?orderId=7`）。\n'
+        '- 块自己**读不到地址栏**（它跑在 srcdoc 沙箱 iframe 里，地址是 `about:srcdoc`）：链接参数只能问宿主，\n'
+        '  也就是上面那句 `magicBlock.context()`。\n'
+        '- 🔴 块**一律占满它所属的那一条标签页**：高度由宿主按"这一页还剩多少地方"给，滚的是标签页那一层。\n'
+        '  **块自己不许出滚动条** —— 别写 `html, body { height: 100% }` 或 `overflow: auto` 跟宿主打架\n'
+        '  （宿主已经注入了一条 `html, body { overflow: hidden }`，你写了也不生效）。\n'
+        '- 宿主那边怎么把它挂上标签：**一条路由 = 一个块**（`component: MagicBlockPage, props: { uuid }`）。\n'
+        '  **块外面一个字的页面代码都没有** —— 标题 / 按钮 / 参数展示都写在这个块的 `' + BLOCK_ENTRY + '` 里。\n'
         '- **样式别自己写**：用这个应用正在用的 labull 类名（`p-button` / `p-inputtext` / `p-tag` / `p-checkbox` /\n'
         f'  `labull-panel` / `labull-subject-title` / `pi pi-*`，以及 `--sp-*` 那几个 token）。**什么都不用引** ——\n'
         '  宿主会把主题注入每个块的 iframe（`MagicBlockHost` 的 `theme` prop，默认开），直接写类名就生效。\n'

{labull_framework-0.1.1 → labull_framework-0.1.2/labull_framework.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: labull-framework
-Version: 0.1.1
+Version: 0.1.2
 Summary: Labull Framework: a pluggable Django app with Authing OIDC login and magic blocks
 Author: Labull Framework
 License-Expression: MIT

{labull_framework-0.1.1 → labull_framework-0.1.2}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "labull-framework"
-version = "0.1.1"
+version = "0.1.2"
 description = "Labull Framework: a pluggable Django app with Authing OIDC login and magic blocks"
 readme = "README-pypi.md"
 requires-python = ">=3.10"