@yuneta/gobj-ui 7.23.69 → 7.23.71

package/src/c_yui_form.js

@@ -65,6 +65,7 @@ import {
 import "./c_yui_form.css";
 import {attach_clear, refresh_clear} from "./yui_inputs.js";
 import {plan_toolbar, DEFAULT_TOOLBAR} from "./form_toolbar_plan.js";
+import {field_is_readonly} from "./form_field_readonly.js";
 /*  Read at field-build time only — deliberately NOT watched: the hosting
  *  dialog rebuilds the form on every open, and re-rendering a form under
  *  the user mid-edit would throw away what they typed. */
@@ -601,8 +602,13 @@ function build_form_field_conf(gobj, field_desc)
         extras: {},             // extra html input/textarea attributes
         /*  A form opened to LOOK at a record has no editable field, and
          *  that is a property of the opening, not of the schema: the same
-         *  col is writable when the same form is opened to edit.  */
-        readonly: gobj_read_bool_attr(gobj, "readonly") || !field_desc.is_writable,
+         *  col is writable when the same form is opened to edit.  And an
+         *  fkey is editable WITHOUT `writable`, because a link is not
+         *  written, it is linked -- the rule and its why live in
+         *  form_field_readonly.js.  */
+        readonly: field_is_readonly(
+            gobj_read_bool_attr(gobj, "readonly"), field_desc
+        ),
         required: field_desc.is_required,
         hidden: field_desc.is_hidden,
         default_value: field_desc.default_value,

package/src/c_yui_treedb_graph.js

@@ -506,6 +506,12 @@ function option_label(name)
         /*  Layouts (`layout_names` of the G6 child).  */
         case "manual":
             return t("manual");
+        case "treedb-tree":
+            return t("treedb-tree");
+        case "treedb-outline":
+            return t("treedb-outline");
+        case "radial":
+            return t("radial");
         case "dagre":
             return t("dagre");
         case "antv-dagre":

package/src/form_field_readonly.js

@@ -0,0 +1,61 @@
+/***********************************************************************
+ *          form_field_readonly.js
+ *
+ *      Is this field of the form read-only?
+ *
+ *      Pure, so the rule can be tested without a DOM: the gclass turns
+ *      the answer into `readonly`/`disabled` on a control, this decides
+ *      the answer. Same split as form_toolbar_plan.js and
+ *      treedb_write_plan.js.
+ *
+ *      The rule it exists to state ONCE: **`writable` governs the WRITE
+ *      of a column's VALUE, and an fkey is not written — it is LINKED.**
+ *      An fkey column is normally declared with no `writable` flag at
+ *      all (`treedb_authzs`'s `users.roles` is `['fkey']`, and so is
+ *      almost every fkey in the tree), so reading "not writable" as "not
+ *      editable" takes away the only way to link a record to its parent
+ *      — with `users.roles`, the only way to give a person a role.
+ *
+ *      The other half of this rule is already written down in
+ *      c_yui_treedb_topic_with_form.js, where the record travels back:
+ *      the form sends "the writable cols, the fkeys (a link is edited by
+ *      linking) and the pkey". The two halves have to agree, and when
+ *      they did not, the form disabled the control whose value the save
+ *      path was still waiting for.
+ *
+ *      A `file` column is an fkey too (flagged `['fkey','file']`) and is
+ *      NOT covered: it answers `type: "file"`, its bytes travel beside
+ *      the record, and the SDK declares as legal a `file` column that
+ *      only a load fills.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+
+/***************************************************************
+ *  field_is_readonly(form_readonly, field_desc) -> boolean
+ *
+ *      form_readonly   the FORM is read-only: a record opened to be
+ *                      looked at, or a store nobody may write. It is
+ *                      a property of the opening, not of the schema,
+ *                      and it wins over everything.
+ *      field_desc      as treedb_get_field_desc() answers it
+ *                      (`type`, `is_writable`).
+ ***************************************************************/
+function field_is_readonly(form_readonly, field_desc)
+{
+    if(form_readonly) {
+        return true;
+    }
+
+    let desc = field_desc || {};
+    if(desc.type === "fkey") {
+        return false;
+    }
+
+    return !desc.is_writable;
+}
+
+
+export {field_is_readonly};

package/src/form_field_readonly.test.js

@@ -0,0 +1,50 @@
+import {describe, it, expect} from "vitest";
+import {field_is_readonly} from "./form_field_readonly.js";
+
+describe("field_is_readonly", () => {
+
+    it("a form opened to LOOK has no editable field, fkey included", () => {
+        /*  A record opened to be read: the schema does not enter into it. */
+        expect(field_is_readonly(true, {type: "fkey", is_writable: false}))
+            .toBe(true);
+        expect(field_is_readonly(true, {type: "fkey", is_writable: true}))
+            .toBe(true);
+        expect(field_is_readonly(true, {type: "string", is_writable: true}))
+            .toBe(true);
+    });
+
+    it("an fkey is EDITABLE without `writable`: a link is edited by linking", () => {
+        /*  `treedb_authzs`'s `users.roles` is declared `['fkey']` and
+         *  nothing else -- as almost every fkey in the tree is. Reading
+         *  that as "not editable" left a user with no way to be given a
+         *  role, while the save path was still sending the column. */
+        expect(field_is_readonly(false, {type: "fkey", is_writable: false}))
+            .toBe(false);
+    });
+
+    it("a plain column still needs `writable`", () => {
+        expect(field_is_readonly(false, {type: "string", is_writable: false}))
+            .toBe(true);
+        expect(field_is_readonly(false, {type: "string", is_writable: true}))
+            .toBe(false);
+        expect(field_is_readonly(false, {type: "enum", is_writable: false}))
+            .toBe(true);
+    });
+
+    it("a `file` column is NOT covered by the fkey exemption", () => {
+        /*  It is an fkey (`['fkey','file']`) but answers `type: "file"`,
+         *  and the SDK declares as legal a `file` column that only a load
+         *  fills. */
+        expect(field_is_readonly(false, {type: "file", is_writable: false, is_file: true}))
+            .toBe(true);
+        expect(field_is_readonly(false, {type: "file", is_writable: true, is_file: true}))
+            .toBe(false);
+    });
+
+    it("no descriptor is read-only, not editable", () => {
+        /*  Nothing known about a field is not a reason to let it be
+         *  written. */
+        expect(field_is_readonly(false, undefined)).toBe(true);
+        expect(field_is_readonly(false, {})).toBe(true);
+    });
+});

package/src/treedb_layout.js

@@ -0,0 +1,380 @@
+/***********************************************************************
+ *          treedb_layout.js
+ *
+ *      Two layouts made for a treedb, and nothing else.
+ *
+ *      What a treedb graph IS, once it is folded (treedb_fold_model.js):
+ *      a forest read left to right. A main topic is a tree (places:
+ *      country, region, site, hall), the other topics hang from its
+ *      nodes through hooks (devices, users, controllers), a record may
+ *      hang from two parents (a device from its place AND its
+ *      controller), and every visible node was reached from a root.
+ *      Tens to a few hundred cards on screen, never the whole store.
+ *
+ *      G6's own layouts either do not know that or pay for not knowing:
+ *
+ *      - `dagre` gets the reading direction right and then ranks by
+ *        longest path and minimises crossings with a heuristic that
+ *        REORDERS the siblings on every run -- open one hook and the
+ *        column next to it shuffles. It is O(n·m) per sweep and it is
+ *        the one thing that takes time on a big expansion.
+ *      - the tree layouts (`compact-box`, `indented`, `dendrogram`,
+ *        `mindmap`) draw exactly the shape wanted, but G6 runs them on
+ *        a TREE it builds from the edges: a node with two parents is
+ *        placed by whichever parent the builder met first, unstably.
+ *      - the force family scatters a tree, which is the pile with
+ *        physics.
+ *
+ *      So: a tidy tree (`tree`) and an outline (`outline`), both fed by
+ *      the SAME spanning tree, chosen deterministically:
+ *
+ *      - roots are the nodes with no incoming edge, in node order;
+ *      - a node belongs to the FIRST parent that reaches it in a
+ *        breadth-first walk from the roots -- the place, not the
+ *        controller, because the place's column came first -- and the
+ *        other links are drawn as edges across the tree;
+ *      - the children of a node are ordered by the HOOK they hang from
+ *        (the parent's port order, which is the schema's column order)
+ *        and then by node order (record order, the pages' order);
+ *      - a node nothing reaches (a cycle) is a root too.
+ *
+ *      `tree`: the classic tidy tree, left to right. Each depth is a
+ *      column as wide as its widest card; a node is centred on the
+ *      block of its children; siblings stack with `nodesep` between
+ *      them. O(n), and opening a hook moves NOTHING that is not below
+ *      or beside it -- the cards keep their order, the eye keeps its
+ *      place.
+ *
+ *      `outline`: one node per row, indented by depth -- what a JSON
+ *      viewer draws, and what a treedb is when read as one. Tall, but
+ *      nothing is ever beside anything: the reader scrolls a list.
+ *
+ *      Pure: takes plain nodes and edges, returns positions. The G6
+ *      classes in c_g6_nodes_tree.js are two thin adapters over it.
+ *
+ *          Copyright (c) 2026, ArtGins.
+ *          All Rights Reserved.
+ ***********************************************************************/
+
+const DEFAULTS = {
+    nodesep: 18,        /*  gap between siblings (tree) / rows (outline)  */
+    ranksep: 110,       /*  gap between a column and the next (tree)  */
+    indent: 48,         /*  what a depth adds to the x of a row (outline)  */
+};
+
+/************************************************************
+ *  The spanning tree of a graph, deterministic.
+ *
+ *      nodes   [{id, w, h, order}]        order: creation index
+ *      edges   [{source, target, rank}]   rank: the hook's position in
+ *                                         the parent's ports (0 = first)
+ *
+ *  Returns {roots: [id], children: Map<id, [id]>, depth: Map<id, n>,
+ *           by_id: Map<id, node>}
+ ************************************************************/
+export function spanning_tree(nodes, edges)
+{
+    let by_id = new Map();
+    for(let i = 0; i < nodes.length; i++) {
+        let n = nodes[i];
+        by_id.set(n.id, Object.assign({order: i}, n));
+    }
+
+    /*  Outgoing links per node, with the rank of the hook they leave by.  */
+    let out = new Map();
+    let has_parent = new Set();
+    for(let e of edges) {
+        if(!by_id.has(e.source) || !by_id.has(e.target) || e.source === e.target) {
+            continue;
+        }
+        if(!out.has(e.source)) {
+            out.set(e.source, []);
+        }
+        out.get(e.source).push({id: e.target, rank: (e.rank > 0)? e.rank : 0});
+        has_parent.add(e.target);
+    }
+    for(let list of out.values()) {
+        list.sort((a, b) => {
+            if(a.rank !== b.rank) {
+                return a.rank - b.rank;
+            }
+            return by_id.get(a.id).order - by_id.get(b.id).order;
+        });
+    }
+
+    let roots = [];
+    for(let n of by_id.values()) {
+        if(!has_parent.has(n.id)) {
+            roots.push(n.id);
+        }
+    }
+
+    let children = new Map();
+    let depth = new Map();
+    let assign = (start) => {
+        let queue = [start];
+        depth.set(start, 0);
+        while(queue.length) {
+            let id = queue.shift();
+            let kids = [];
+            for(let link of (out.get(id) || [])) {
+                if(depth.has(link.id)) {
+                    continue;   /*  reached before: that parent keeps it  */
+                }
+                depth.set(link.id, depth.get(id) + 1);
+                kids.push(link.id);
+                queue.push(link.id);
+            }
+            children.set(id, kids);
+        }
+    };
+    for(let root of roots) {
+        assign(root);
+    }
+    /*  A cycle with no way in: its first node, in node order, is a root.  */
+    for(let n of by_id.values()) {
+        if(!depth.has(n.id)) {
+            roots.push(n.id);
+            assign(n.id);
+        }
+    }
+
+    return {roots: roots, children: children, depth: depth, by_id: by_id};
+}
+
+/************************************************************
+ *  The tidy tree, left to right.
+ *
+ *  Returns Map<id, {x, y}> with the CENTRE of each node, the way G6
+ *  positions a node.
+ ************************************************************/
+export function layout_tree(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    let t = spanning_tree(nodes, edges);
+    let pos = new Map();
+
+    /*  Column widths: the widest card of each depth.  */
+    let col_w = [];
+    for(let [id, d] of t.depth) {
+        let w = t.by_id.get(id).w;
+        col_w[d] = Math.max(col_w[d] || 0, w);
+    }
+    let col_x = [];
+    let x = 0;
+    for(let d = 0; d < col_w.length; d++) {
+        col_x[d] = x;
+        x += (col_w[d] || 0) + o.ranksep;
+    }
+
+    /*  Subtree heights, post-order.  */
+    let height = new Map();
+    let measure = (id) => {
+        let kids = t.children.get(id) || [];
+        let own = t.by_id.get(id).h;
+        if(!kids.length) {
+            height.set(id, own);
+            return own;
+        }
+        let sum = 0;
+        for(let i = 0; i < kids.length; i++) {
+            sum += measure(kids[i]);
+            if(i > 0) {
+                sum += o.nodesep;
+            }
+        }
+        let h = Math.max(own, sum);
+        height.set(id, h);
+        return h;
+    };
+    for(let root of t.roots) {
+        measure(root);
+    }
+
+    /*  Placement, pre-order: a node is centred on the block of its
+     *  children, which starts at the top of its own block.  */
+    let place = (id, top) => {
+        let n = t.by_id.get(id);
+        let d = t.depth.get(id);
+        let kids = t.children.get(id) || [];
+        let block = height.get(id);
+        let cx = col_x[d] + (col_w[d] - n.w) / 2 + n.w / 2;
+        if(!kids.length) {
+            pos.set(id, {x: cx, y: top + block / 2});
+            return;
+        }
+        let kids_h = 0;
+        for(let i = 0; i < kids.length; i++) {
+            kids_h += height.get(kids[i]);
+            if(i > 0) {
+                kids_h += o.nodesep;
+            }
+        }
+        let cursor = top + (block - kids_h) / 2;
+        for(let kid of kids) {
+            place(kid, cursor);
+            cursor += height.get(kid) + o.nodesep;
+        }
+        pos.set(id, {x: cx, y: top + block / 2});
+    };
+    let top = 0;
+    for(let root of t.roots) {
+        place(root, top);
+        top += height.get(root) + o.nodesep * 2;
+    }
+
+    return pos;
+}
+
+/************************************************************
+ *  The radial tree: the root in the middle, a ring per depth.
+ *
+ *  G6's `radial` places by MDS on the graph distances and pushes
+ *  overlaps apart afterwards, with a ring radius it is TOLD; twenty
+ *  cards of 172px on a ring of radius 200 have 52px each and pile
+ *  up. This one is the radial form of the tidy tree above: every
+ *  subtree gets an angular SECTOR proportional to its leaves, a node
+ *  sits in the middle of its sector, and the radius of each ring is
+ *  the larger of "one step further out than the ring before" and
+ *  "long enough for its nodes to sit side by side" -- so a hall
+ *  with a hundred devices is a wide, sparse fan, and nothing
+ *  overlaps by construction. Several roots share the circle around
+ *  a virtual centre.
+ *
+ *      ranksep   the step between rings
+ *      nodesep   the gap between neighbours on a ring
+ ************************************************************/
+export function layout_radial(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    let t = spanning_tree(nodes, edges);
+    let pos = new Map();
+    if(!t.roots.length) {
+        return pos;
+    }
+
+    /*  Leaves under each node: the sector it deserves.  */
+    let leaves = new Map();
+    let count = (id) => {
+        let kids = t.children.get(id) || [];
+        if(!kids.length) {
+            leaves.set(id, 1);
+            return 1;
+        }
+        let n = 0;
+        for(let kid of kids) {
+            n += count(kid);
+        }
+        leaves.set(id, n);
+        return n;
+    };
+    let total = 0;
+    for(let root of t.roots) {
+        total += count(root);
+    }
+
+    /*  One root sits at the centre; several sit on the first ring
+     *  around an empty centre, so every depth shifts out by one.  */
+    let single = (t.roots.length === 1);
+    let ring_of = (id) => t.depth.get(id) + (single? 0 : 1);
+
+    /*  Pass 1, the ANGLES: a node's children split its sector by
+     *  their leaves, and a node sits at the middle of its sector.
+     *  Angles do not depend on the radii, so they come first.  */
+    let angle = new Map();
+    let rings = [];         /*  ring -> [{id, angle, diag}]  */
+    let sector = (id, from, span) => {
+        let a = from + span / 2;
+        angle.set(id, a);
+        let ring = ring_of(id);
+        if(!rings[ring]) {
+            rings[ring] = [];
+        }
+        let n = t.by_id.get(id);
+        rings[ring].push({id: id, angle: a, diag: Math.hypot(n.w, n.h)});
+        let cursor = from;
+        for(let kid of (t.children.get(id) || [])) {
+            let part = span * leaves.get(kid) / leaves.get(id);
+            sector(kid, cursor, part);
+            cursor += part;
+        }
+    };
+    if(single) {
+        let root = t.roots[0];
+        angle.set(root, 0);
+        let cursor = -Math.PI / 2;      /*  the first child at the top  */
+        for(let kid of (t.children.get(root) || [])) {
+            let part = 2 * Math.PI * leaves.get(kid) / leaves.get(root);
+            sector(kid, cursor, part);
+            cursor += part;
+        }
+    } else {
+        let cursor = -Math.PI / 2;
+        for(let root of t.roots) {
+            let part = 2 * Math.PI * leaves.get(root) / total;
+            sector(root, cursor, part);
+            cursor += part;
+        }
+    }
+
+    /*  Pass 2, the RADII: a ring is one step further out than the
+     *  ring before, and as far out as its two closest neighbours need
+     *  to sit side by side -- the arc between two adjacent centres is
+     *  r·Δangle, and it has to hold half of each card plus the gap.
+     *  Measured on NEIGHBOURS, not on the ring's total length: a
+     *  leafless root squeezed between two big subtrees gets a sliver
+     *  of angle, and it is the sliver that sets the radius.  */
+    let radius = [0];
+    for(let ring = 1; ring < rings.length; ring++) {
+        let r = radius[ring - 1] + o.ranksep;
+        let list = (rings[ring] || []).slice().sort((a, b) => a.angle - b.angle);
+        for(let i = 0; i < list.length && list.length > 1; i++) {
+            let a = list[i];
+            let b = list[(i + 1) % list.length];
+            let gap = (i + 1 < list.length)
+                ? b.angle - a.angle
+                : b.angle + 2 * Math.PI - a.angle;
+            if(gap > 1e-9) {
+                r = Math.max(r, (a.diag / 2 + b.diag / 2 + o.nodesep) / gap);
+            }
+        }
+        radius[ring] = r;
+    }
+
+    /*  Pass 3, the positions.  */
+    for(let [id, a] of angle) {
+        let r = radius[ring_of(id)] || 0;
+        pos.set(id, {x: r * Math.cos(a), y: r * Math.sin(a)});
+    }
+
+    return pos;
+}
+
+/************************************************************
+ *  The outline: one node per row, indented by depth, in the
+ *  pre-order of the spanning tree. Rows are left-aligned on
+ *  their indent, so a column of chips reads as a list.
+ ************************************************************/
+export function layout_outline(nodes, edges, opts)
+{
+    let o = Object.assign({}, DEFAULTS, opts || {});
+    let t = spanning_tree(nodes, edges);
+    let pos = new Map();
+
+    let y = 0;
+    let visit = (id) => {
+        let n = t.by_id.get(id);
+        let d = t.depth.get(id);
+        pos.set(id, {x: d * o.indent + n.w / 2, y: y + n.h / 2});
+        y += n.h + o.nodesep;
+        for(let kid of (t.children.get(id) || [])) {
+            visit(kid);
+        }
+    };
+    for(let root of t.roots) {
+        visit(root);
+        y += o.nodesep;     /*  a breath between two trees  */
+    }
+
+    return pos;
+}