@yuneta/gobj-ui 7.23.80 → 7.23.82

package/src/c_g6_nodes_tree.js

@@ -137,6 +137,7 @@ import {
     HistoryEvent,
     EdgeEvent,
     Circle,
+    HTML,
     Toolbar,
     register,
 } from '@antv/g6';
@@ -262,16 +263,34 @@ const PORT_R_CHILD    = 8;
 const PORT_LINE_WIDTH = 2;
 
 /*
- *  The CLOSED shape of a record: a rounded square of the topic's
- *  colour, no ports, no text -- topology and nothing else. The
- *  three tiers keep their order of size, so a root is still bigger
- *  than a leaf when nothing says which is which.
+ *  The three VIEWS of a record (`node_mode`), the same three the
+ *  gobj tree view has: `expanded` is the card with its pills and
+ *  its ports; `compact` is a one-line pill with the name inside
+ *  and small ports, the half-way house; `shape` is a figure of the
+ *  topic's colour -- a square, a circle, a diamond... chosen in the
+ *  node's properties -- no ports, no text, topology and nothing
+ *  else. The three tiers keep their order of size in every view,
+ *  so a root is still bigger than a leaf when nothing says which
+ *  is which.
  */
-const COMPACT_SIZE = {
+const NODE_MODES = ['expanded', 'compact', 'shape'];
+
+const PILL_SIZE = {
+    hierarchical: [200, 30],
+    extended:     [180, 28],
+    child:        [160, 26],
+};
+const PORT_R_PILL = 6;
+
+const SHAPE_SIZE = {
     hierarchical: 32,
     extended:     28,
     child:        22,
 };
+/*  The figures a `shape` node can be, by G6's own node types
+ *  (`square` is G6's `rect` with rounded corners).  */
+const NODE_SHAPES = ['square', 'circle', 'diamond', 'triangle', 'hexagon', 'star'];
+const DEFAULT_NODE_SHAPE = 'square';
 
 /***************************************************************
  *  Internal layout and operation mode definitions
@@ -397,8 +416,8 @@ SDATA(data_type_t.DTP_STRING,   "main_topic",           0,  "",     "The topic t
 SDATA(data_type_t.DTP_LIST,     "loose_topics",         0,  "[]",   "Topics whose loose records (no parent, in a topic the schema hangs from the main one) are shown as roots"),
 
 /*---------------- Node shape ----------------*/
-SDATA(data_type_t.DTP_STRING,   "node_mode",            0,  "expanded", "How a record is drawn: `expanded` = the card with its ports (the only shape a link can be edited on); `compact` = a rounded square of the topic's colour, no ports, no text -- the topology alone. One node can be toggled against it (EV_TOGGLE_NODE_MODE)"),
-SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",          0,  true,   "A compact node says its name under the square. Off, it is a coloured square and nothing else"),
+SDATA(data_type_t.DTP_STRING,   "node_mode",            0,  "expanded", "How a record is drawn: `expanded` = the card with its pills and ports; `compact` = a one-line pill with the name and small ports; `shape` = a figure of the topic's colour (square, circle, diamond... per node or topic, from the node properties), no ports, no text -- the topology alone. One node can be toggled against it (EV_TOGGLE_NODE_MODE)"),
+SDATA(data_type_t.DTP_BOOLEAN,  "node_labels",          0,  true,   "A `shape` node says its name under the figure. Off, it is a coloured figure and nothing else"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_delete_node",  0,  true,   "Ask confirmation before deleting a node"),
 SDATA(data_type_t.DTP_BOOLEAN,  "confirm_unlink_edge",  0,  true,   "Ask confirmation before unlinking an edge"),
 
@@ -446,6 +465,8 @@ let PRIVATE_DATA = {
     _edge_icon_el:      null,       // floating properties icon element
     _edge_delete_el:    null,       // floating delete icon element for edge
     _edge_popover_el:   null,       // edge properties popover element
+    _port_icon_el:      null,       // floating port properties icon element
+    _port_popover_el:   null,       // port properties popover element
     _node_icon_el:      null,       // floating node properties icon element
     _node_delete_el:    null,       // floating delete icon element for node
     _node_popover_el:   null,       // node properties popover element
@@ -839,6 +860,7 @@ function register_layouts(gobj)
         register(ExtensionCategory.LAYOUT, 'treedb-tree', TreedbTreeLayout);
         register(ExtensionCategory.LAYOUT, 'treedb-radial', TreedbRadialLayout);
         register(ExtensionCategory.NODE, 'light', LightNode);
+        register(ExtensionCategory.NODE, 'treedb-card', TreedbCard);
     }
 }
 
@@ -940,6 +962,7 @@ function configure_events(gobj)
         update_edge_icon_position(gobj);
         update_node_icon_position(gobj);
         update_link_icon_position(gobj);
+        update_port_icon_position(gobj);
     });
 
     graph.on(NodeEvent.DRAG_END, (evt) => {
@@ -974,6 +997,7 @@ function configure_events(gobj)
         update_edge_icon_position(gobj);
         update_node_icon_position(gobj);
         update_link_icon_position(gobj);
+        update_port_icon_position(gobj);
         update_zoom_readout(gobj);
 
         /*
@@ -2014,20 +2038,47 @@ function create_topic_node(gobj, desc, record)
  ************************************************************/
 function node_shape_of(gobj, node_id, desc, record, geometry, pills_html)
 {
-    if(node_is_compact(gobj, node_id)) {
-        return compact_shape_of(gobj, desc, record, {});
+    switch(node_mode_of(gobj, node_id)) {
+        case 'shape':
+            return figure_shape_of(gobj, desc, record, geometry, {});
+        case 'compact':
+            return pill_shape_of(gobj, desc, record, geometry);
+        default:
+            return card_shape_of(gobj, desc, record, geometry, pills_html);
     }
-    return card_shape_of(gobj, desc, record, geometry, pills_html);
 }
 
-function node_is_compact(gobj, node_id)
+/*  The view of ONE node: the graph's `node_mode`, unless the node
+ *  was toggled against it -- an expanded node in a compact or shape
+ *  graph, a compact one in an expanded graph.  */
+function node_mode_of(gobj, node_id)
 {
     let priv = gobj.priv;
     if(!priv._open_nodes) {
         priv._open_nodes = new Set();
     }
-    let compact = (gobj_read_str_attr(gobj, "node_mode") === "compact");
-    return priv._open_nodes.has(node_id)? !compact : compact;
+    let mode = gobj_read_str_attr(gobj, "node_mode");
+    if(!mode || !str_in_list(NODE_MODES, mode)) {
+        mode = 'expanded';
+    }
+    if(priv._open_nodes.has(node_id)) {
+        return (mode === 'expanded')? 'compact' : 'expanded';
+    }
+    return mode;
+}
+
+/*  Not the full card: a pill or a figure. What the size bookkeeping
+ *  asks -- neither has a size anybody chose, or pills to grow for.  */
+function node_is_compact(gobj, node_id)
+{
+    return node_mode_of(gobj, node_id) !== 'expanded';
+}
+
+function topic_defaults_of(gobj, topic_name)
+{
+    let topic_props = gobj.priv._graph_properties[topic_name];
+    return (is_object(topic_props) && is_object(topic_props.defaults))?
+        topic_props.defaults : null;
 }
 
 /************************************************************
@@ -2109,54 +2160,139 @@ function card_shape_of(gobj, desc, record, geometry, pills_html)
         style.portR = geometry.portR;
     }
 
-    if(json_size(ports)) {
-        json_object_update_missing(style, {
-            port: true,
-            ports: ports,
-            portR: node_treedb_type === 'child' ? PORT_R_CHILD : PORT_R_ENTITY,
-            portLineWidth: PORT_LINE_WIDTH,
-        });
+    dress_ports(gobj, style, ports, geometry, topic_defaults,
+        node_treedb_type === 'child' ? PORT_R_CHILD : PORT_R_ENTITY, false);
 
-        // Restore per-port radius: saved geometry first, then topic defaults
-        let port_sizes = geometry.port_sizes;
-        let default_port_sizes = topic_defaults ? topic_defaults.port_sizes : null;
-        if(is_object(port_sizes) || is_object(default_port_sizes)) {
-            for(let i = 0; i < style.ports.length; i++) {
-                let key = style.ports[i].key;
-                let r = is_object(port_sizes) ? port_sizes[key] : null;
-                if(r == null && is_object(default_port_sizes)) {
-                    r = default_port_sizes[key];
-                }
-                if(r != null) {
-                    style.ports[i].r = r;
-                }
-            }
-        }
-    } else {
+    return {type: 'treedb-card', style: style};
+}
+
+/************************************************************
+ *  The ports of a card or a pill, dressed: the node-level radius
+ *  (saved, topic default, or the tier's), each port's own radius
+ *  and shape (saved first, then the topic's per-port defaults, then
+ *  the topic's one shape for every port). `fixed_r` -- the pill --
+ *  ignores every saved radius: a pill has one size of port.
+ ************************************************************/
+function dress_ports(gobj, style, ports, geometry, topic_defaults, r_default, fixed_r)
+{
+    if(!json_size(ports)) {
         style.port = false;
         style.ports = [];
+        return;
+    }
+    json_object_update_missing(style, {
+        port: true,
+        ports: ports,
+        portR: r_default,
+        portLineWidth: PORT_LINE_WIDTH,
+    });
+    if(fixed_r) {
+        style.portR = r_default;
     }
 
-    return {type: 'html', style: style};
+    let port_sizes = fixed_r? null : geometry.port_sizes;
+    let default_port_sizes = (!fixed_r && topic_defaults)? topic_defaults.port_sizes : null;
+    let port_shapes = geometry.port_shapes;
+    let default_port_shapes = topic_defaults? topic_defaults.port_shapes : null;
+    let default_shape = topic_defaults? topic_defaults.port_shape : null;
+    for(let i = 0; i < style.ports.length; i++) {
+        let key = style.ports[i].key;
+        let r = is_object(port_sizes)? port_sizes[key] : null;
+        if(r == null && is_object(default_port_sizes)) {
+            r = default_port_sizes[key];
+        }
+        if(r != null) {
+            style.ports[i].r = r;
+        }
+        let shape = is_object(port_shapes)? port_shapes[key] : null;
+        if(!shape && is_object(default_port_shapes)) {
+            shape = default_port_shapes[key];
+        }
+        if(!shape) {
+            shape = default_shape;
+        }
+        if(shape && str_in_list(PORT_SHAPES, shape)) {
+            style.ports[i].shape = shape;
+        }
+    }
+}
+
+/************************************************************
+ *  The PILL: one line with the name inside, the tint and the
+ *  border of the topic, small ports on its edges -- the half-way
+ *  house between the card and the figure, and the same one-line
+ *  chip a leaf record already is, at the tier's width. No pills:
+ *  a hook is opened from the card (expand the node).
+ ************************************************************/
+function pill_shape_of(gobj, desc, record, geometry)
+{
+    let priv = gobj.priv;
+    let tier = desc.node_treedb_type;
+    let size = PILL_SIZE[tier] || PILL_SIZE.hierarchical;
+    let ports = build_ports(gobj, desc);
+
+    let style = {
+        fill: desc.color,
+        stroke: getStrokeColor(desc.color),
+        lineWidth: 1,
+        lineDash: [],
+        halo: false,
+        labelText: "",
+        size: [...size],
+        dx: -size[0] / 2,
+        dy: -size[1] / 2,
+        innerHTML: build_chip_innerHTML(
+            desc.color, priv.theme, record.icon, node_label(desc, record), record.id
+        ),
+    };
+    dress_ports(gobj, style, ports, geometry, topic_defaults_of(gobj, desc.topic_name),
+        PORT_R_PILL, true);
+    return {type: 'treedb-card', style: style};
+}
+
+/*  The pill's html with the flags it carries right now.  */
+function pill_innerHTML_of(gobj, nd, theme, highlight, selected, anchored)
+{
+    let desc = nd.data.desc;
+    let record = nd.data.record || {};
+    return build_chip_innerHTML(
+        desc.color, theme, record.icon, node_label(desc, record), record.id,
+        highlight, selected, anchored
+    );
+}
+
+/*  The figure a `shape` node wears: the node's own, then the
+ *  topic's default (the node properties popover writes both), then
+ *  a square.  */
+function node_figure_of(gobj, desc, geometry)
+{
+    let shape = geometry? geometry.node_shape : null;
+    if(!shape) {
+        let defaults = topic_defaults_of(gobj, desc.topic_name);
+        shape = defaults? defaults.node_shape : null;
+    }
+    return (shape && str_in_list(NODE_SHAPES, shape))? shape : DEFAULT_NODE_SHAPE;
 }
 
 /************************************************************
- *  The SQUARE: a G6 `rect` of the topic's colour, no ports, the
- *  name as a label under it when `node_labels` says so. A native
- *  shape and not html on purpose: G6's own stroke and halo paint
- *  on it, so the focus, the selection and the anchor are three
- *  keys of the style instead of a rebuilt innerHTML.
+ *  The FIGURE: a native G6 node of the topic's colour -- a square,
+ *  a circle, a diamond, a triangle, a hexagon, a star -- no ports,
+ *  the name as a label under it when `node_labels` says so. Native
+ *  and not html on purpose: G6's own stroke and halo paint on it,
+ *  so the focus, the selection and the anchor are three keys of
+ *  the style instead of a rebuilt innerHTML.
  *
  *      flags   {highlight, selected, anchored}
  ************************************************************/
-function compact_shape_of(gobj, desc, record, flags)
+function figure_shape_of(gobj, desc, record, geometry, flags)
 {
     let priv = gobj.priv;
     let dark = (priv.theme === "dark");
     let f = flags || {};
     let tier = desc.node_treedb_type;
-    let side = COMPACT_SIZE[tier] || COMPACT_SIZE.hierarchical;
+    let side = SHAPE_SIZE[tier] || SHAPE_SIZE.hierarchical;
     let labels = gobj_read_bool_attr(gobj, "node_labels");
+    let figure = node_figure_of(gobj, desc, geometry || {});
 
     let stroke = getStrokeColor(desc.color);
     let line_width = 1.5;
@@ -2181,7 +2317,7 @@ function compact_shape_of(gobj, desc, record, flags)
 
     let style = {
         size: [side, side],
-        radius: Math.round(side / 5),
+        radius: (figure === 'square')? Math.round(side / 5) : 0,
         fill: desc.color,
         stroke: stroke,
         lineWidth: line_width,
@@ -2205,7 +2341,7 @@ function compact_shape_of(gobj, desc, record, flags)
         labelBackgroundRadius: 3,
         labelPadding: [1, 3],
     };
-    return {type: 'rect', style: style};
+    return {type: (figure === 'square')? 'rect' : figure, style: style};
 }
 
 /************************************************************
@@ -2776,6 +2912,18 @@ function update_geometry(gobj, node_id)
         } else {
             delete node_props.port_sizes;
         }
+        // And the shape of each port that is not a circle
+        let port_shapes = {};
+        for(let i = 0; i < ports.length; i++) {
+            if(ports[i].shape && ports[i].shape !== 'circle') {
+                port_shapes[ports[i].key] = ports[i].shape;
+            }
+        }
+        if(Object.keys(port_shapes).length > 0) {
+            node_props.port_shapes = port_shapes;
+        } else {
+            delete node_props.port_shapes;
+        }
     }
 
     topic_props.nodes[record.id] = node_props;
@@ -3485,6 +3633,7 @@ function graph_resize(gobj, width, height)
     update_port_resize_handles_position(gobj);
     update_node_icon_position(gobj);
     update_link_icon_position(gobj);
+    update_port_icon_position(gobj);
 }
 
 function graph_write_behaviors(gobj, behaviors)
@@ -3520,6 +3669,64 @@ function graph_set_behavior(gobj, behavior, set)
     });
 }
 
+/************************************************************
+ *  Custom G6 node: TreedbCard -- G6's html node with ports that
+ *  have a SHAPE.
+ *
+ *  G6 draws every port as a circle (`drawPortShapes` upserts a
+ *  `Circle`, nothing in the port style says otherwise). A port's
+ *  `shape` -- `circle`, `square`, `diamond`, `triangle` -- picks
+ *  the G shape here, by the names G6 registers itself, and `r`
+ *  stays the one size: the half-side of the square, the half-
+ *  diagonal of the diamond, the half-height of the triangle. The
+ *  hit test, the resize handles and the edge's landing point all
+ *  read `r` and none of them care about the outline.
+ ************************************************************/
+const PORT_SHAPES = ['circle', 'square', 'diamond', 'triangle'];
+
+class TreedbCard extends HTML
+{
+    drawPortShapes(attributes, container) {
+        const portsStyle = this.getPortsStyle(attributes);
+        Object.keys(portsStyle).forEach((key) => {
+            const style = portsStyle[key];
+            const shapeKey = `port-${key}`;
+            if(style === false) {
+                this.upsert(shapeKey, 'circle', false, container);
+                return;
+            }
+            let r = Number(style.r) || 0;
+            switch(style.shape) {
+                case 'square':
+                    this.upsert(shapeKey, 'rect', Object.assign({}, style, {
+                        x: -r, y: -r, width: 2 * r, height: 2 * r,
+                    }), container);
+                    break;
+                case 'diamond':
+                    this.upsert(shapeKey, 'polygon', Object.assign({}, style, {
+                        points: [[0, -r], [r, 0], [0, r], [-r, 0]],
+                    }), container);
+                    break;
+                case 'triangle':
+                    this.upsert(shapeKey, 'polygon', Object.assign({}, style, {
+                        points: [[0, -r], [r, r], [-r, r]],
+                    }), container);
+                    break;
+                default:
+                    this.upsert(shapeKey, 'circle', style, container);
+                    break;
+            }
+        });
+    }
+}
+
+/*  A record's card is `treedb-card`; `html` is what it was until
+ *  7.23.81 and what a `+N` chip still is.  */
+function is_card_type(type)
+{
+    return type === 'treedb-card' || type === 'html';
+}
+
 /************************************************************
  *  Custom G6 node: LightNode (circle with status indicator)
  ************************************************************/
@@ -4661,7 +4868,7 @@ function start_node_resize(gobj, e, mx, my)
         }
 
         // HTML nodes: update dx, dy to keep content centered
-        if(nodeType === 'html') {
+        if(is_card_type(nodeType)) {
             updateStyle.dx = -newW / 2;
             updateStyle.dy = -newH / 2;
         }
@@ -4842,6 +5049,7 @@ function select_port(gobj, node_id, port_key)
 
     show_port_resize_handles(gobj);
     show_link_icon_if_fkey(gobj);
+    show_port_icon(gobj);
 }
 
 /************************************************************
@@ -4853,6 +5061,8 @@ function deselect_port(gobj)
 
     exit_linking_mode(gobj);
     hide_link_icon(gobj);
+    hide_port_icon(gobj);
+    hide_port_popover(gobj);
     hide_port_resize_handles(gobj);
     priv._selected_port_key = null;
 }
@@ -4940,6 +5150,272 @@ function update_link_icon_position(gobj)
     }
 }
 
+/************************************************************
+ *  Port properties icon and popover: the gear beside a selected
+ *  port, as the node has its own. The popover has the two things
+ *  a port IS on screen -- its shape and its radius -- and the
+ *  scope: this port, the same port of every card of the topic
+ *  (the hook or fkey column), or every port there is.
+ ************************************************************/
+function port_icon_xy(gobj)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    let canvasPos = get_port_canvas_position(
+        gobj, priv._selected_node_id, priv._selected_port_key
+    );
+    if(!canvasPos) {
+        return null;
+    }
+    let vp = graph.getViewportByCanvas([canvasPos.x, canvasPos.y]);
+    /*  Under the link icon when there is one (an fkey), in its
+     *  place otherwise.  */
+    let below = priv._link_icon_el? floating_icon_step() : 0;
+    return {
+        x: vp[0] + floating_icon_size() / 2 + 4,
+        y: vp[1] + floating_icon_dy() + below,
+    };
+}
+
+function show_port_icon(gobj)
+{
+    hide_port_icon(gobj);
+
+    let priv = gobj.priv;
+    if(!priv._selected_node_id || !priv._selected_port_key) {
+        return;
+    }
+    let xy = port_icon_xy(gobj);
+    if(!xy) {
+        return;
+    }
+    let icon = create_floating_icon(
+        'gear', '#1890ff', xy.x, xy.y,
+        t('port properties'), () => toggle_port_popover(gobj)
+    );
+    priv.$container.appendChild(icon);
+    priv._port_icon_el = icon;
+}
+
+function hide_port_icon(gobj)
+{
+    hide_overlay(gobj, '_port_icon_el');
+}
+
+function update_port_icon_position(gobj)
+{
+    let priv = gobj.priv;
+    if(!priv._port_icon_el || !priv._selected_node_id || !priv._selected_port_key) {
+        return;
+    }
+    try {
+        let xy = port_icon_xy(gobj);
+        if(!xy) {
+            hide_port_icon(gobj);
+            hide_port_popover(gobj);
+            return;
+        }
+        priv._port_icon_el.style.left = xy.x + 'px';
+        priv._port_icon_el.style.top = xy.y + 'px';
+        if(priv._port_popover_el) {
+            priv._port_popover_el.style.left = (xy.x + floating_popover_dx()) + 'px';
+            priv._port_popover_el.style.top = xy.y + 'px';
+            clamp_popover_position(gobj, priv._port_popover_el);
+        }
+    } catch(e) {
+        hide_port_icon(gobj);
+        hide_port_popover(gobj);
+    }
+}
+
+function toggle_port_popover(gobj)
+{
+    let priv = gobj.priv;
+    if(priv._port_popover_el) {
+        hide_port_popover(gobj);
+    } else {
+        show_port_popover(gobj);
+    }
+}
+
+function hide_port_popover(gobj)
+{
+    hide_overlay(gobj, '_port_popover_el');
+}
+
+/*  The ports of a node with ONE of them rewritten.  */
+function ports_with(ports, port_key, changes)
+{
+    return (ports || []).map((p) => (p.key === port_key)? Object.assign({}, p, changes) : p);
+}
+
+function show_port_popover(gobj)
+{
+    hide_port_popover(gobj);
+
+    let priv = gobj.priv;
+    let graph = priv.graph;
+    let node_id = priv._selected_node_id;
+    let port_key = priv._selected_port_key;
+    if(!node_id || !port_key) {
+        return;
+    }
+    let nodeData = graph.getNodeData(node_id);
+    if(!nodeData || !nodeData.style) {
+        return;
+    }
+    let ports = nodeData.style.ports || [];
+    let port = ports.find((p) => p.key === port_key);
+    if(!port) {
+        return;
+    }
+    let orig_shape = port.shape || 'circle';
+    let orig_r = get_port_radius(gobj, node_id, port_key);
+
+    let xy = port_icon_xy(gobj);
+    if(!xy) {
+        return;
+    }
+    const popover = create_popover_base(
+        xy.x + floating_popover_dx(), xy.y, 'g6-port-popover', '#d9d9d9', 180
+    );
+
+    /*  Live preview on THIS port; the others wait for apply.  */
+    function preview_port() {
+        let r = parseInt(rInput.value) || orig_r;
+        graph.updateNodeData([{id: node_id, style: {
+            ports: ports_with(nodeData.style.ports, port_key, {shape: shapeSelect.value, r: r}),
+        }}]);
+        graph.draw().then(() => {
+            update_port_resize_handles_position(gobj);
+        });
+    }
+
+    create_form_label(popover, 'shape');
+    let shapeSelect = create_form_select(popover, PORT_SHAPES.map((shape) => {
+        return {value: shape, label: t(shape)};
+    }));
+    shapeSelect.value = orig_shape;
+    shapeSelect.addEventListener('change', preview_port);
+
+    create_form_label(popover, 'radius');
+    let rInput = create_form_number_input(popover, orig_r, 2, 40, preview_port);
+
+    create_form_label(popover, 'apply to');
+    let scopeSelect = create_form_select(popover, [
+        {value: 'this', label: t('this port')},
+        {value: 'same_topic', label: t('same port in topic')},
+        {value: 'all', label: t('all ports')},
+    ]);
+
+    create_form_button_row(popover, [
+        {
+            text: 'cancel',
+            style: BTN_STYLE_CANCEL,
+            onClick: () => {
+                graph.updateNodeData([{id: node_id, style: {
+                    ports: ports_with(nodeData.style.ports, port_key, {shape: orig_shape, r: orig_r}),
+                }}]);
+                graph.draw().then(() => {
+                    update_port_resize_handles_position(gobj);
+                });
+                hide_port_popover(gobj);
+            },
+        },
+        {
+            text: 'apply',
+            style: 'flex:1;padding:6px;background:#1890ff;color:#fff;border:none;' +
+                   'border-radius:4px;cursor:pointer;font-size:13px;font-weight:500;',
+            onClick: () => {
+                apply_port_properties(gobj, node_id, port_key,
+                    shapeSelect.value, parseInt(rInput.value) || orig_r, scopeSelect.value
+                );
+            },
+        },
+    ]);
+
+    priv.$container.appendChild(popover);
+    priv._port_popover_el = popover;
+    clamp_popover_position(gobj, popover);
+}
+
+/************************************************************
+ *  Apply a port's shape and radius to one port, to the same port
+ *  of every card of the topic, or to every port -- and remember
+ *  the choice as the topic's default, the way `resize all ports`
+ *  does, so a card that arrives later is born with it.
+ *      scope: 'this', 'same_topic', 'all'
+ ************************************************************/
+function apply_port_properties(gobj, node_id, port_key, shape, r, scope)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    let nodeData = graph.getNodeData(node_id);
+    if(!nodeData || !nodeData.data) {
+        return;
+    }
+    let source_topic = nodeData.data.topic_name;
+
+    if(scope === 'same_topic') {
+        if(!is_object(priv._graph_properties[source_topic])) {
+            priv._graph_properties[source_topic] = {};
+        }
+        let defaults = priv._graph_properties[source_topic].defaults || {};
+        defaults.port_sizes = Object.assign({}, defaults.port_sizes, {[port_key]: r});
+        defaults.port_shapes = Object.assign({}, defaults.port_shapes, {[port_key]: shape});
+        priv._graph_properties[source_topic].defaults = defaults;
+    } else if(scope === 'all') {
+        for(const topic_name of Object.keys(priv.descs || {})) {
+            if(!is_object(priv._graph_properties[topic_name])) {
+                priv._graph_properties[topic_name] = {};
+            }
+            let defaults = priv._graph_properties[topic_name].defaults || {};
+            defaults.portR = r;
+            defaults.port_shape = shape;
+            delete defaults.port_sizes;
+            delete defaults.port_shapes;
+            priv._graph_properties[topic_name].defaults = defaults;
+        }
+    }
+
+    let updates = [];
+    for(let nd of (graph.getNodeData() || [])) {
+        if(!nd || !nd.data || !nd.data.desc || !nd.style || !is_array(nd.style.ports)) {
+            continue;
+        }
+        let new_ports;
+        if(scope === 'this') {
+            if(nd.id !== node_id) {
+                continue;
+            }
+            new_ports = ports_with(nd.style.ports, port_key, {shape: shape, r: r});
+        } else if(scope === 'same_topic') {
+            if(nd.data.topic_name !== source_topic) {
+                continue;
+            }
+            new_ports = ports_with(nd.style.ports, port_key, {shape: shape, r: r});
+        } else {
+            new_ports = nd.style.ports.map((p) => Object.assign({}, p, {shape: shape, r: r}));
+        }
+        let upd = {ports: new_ports};
+        if(scope === 'all') {
+            upd.portR = r;
+        }
+        updates.push({id: nd.id, style: upd});
+    }
+
+    if(updates.length > 0) {
+        graph.updateNodeData(updates);
+        graph.draw().then(() => {
+            update_port_resize_handles_position(gobj);
+            update_port_icon_position(gobj);
+            mark_graph_dirty(gobj);
+        });
+    }
+    hide_port_popover(gobj);
+}
+
 /************************************************************
  *  Get a column descriptor by field id from a topic desc.
  ************************************************************/
@@ -5960,6 +6436,17 @@ function show_node_popover(gobj)
     create_form_label(popover, 'line width');
     let lwInput = create_form_number_input(popover, currentLW, 1, 20, preview_node);
 
+    /*  The figure the node wears in the `shape` view. No preview:
+     *  it shows only in that view, and applying it is the same
+     *  reshape either way.  */
+    create_form_label(popover, 'shape');
+    let shapeSelect = create_form_select(popover, NODE_SHAPES.map((shape) => {
+        return {value: shape, label: t(shape)};
+    }));
+    shapeSelect.value = nodeData.data && nodeData.data.desc
+        ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {})
+        : DEFAULT_NODE_SHAPE;
+
     // Apply-to scope
     create_form_label(popover, 'apply to');
     let scopeSelect = create_form_select(popover, [
@@ -5997,7 +6484,8 @@ function show_node_popover(gobj)
                     fillInput.value,
                     strokeInput.value,
                     parseInt(lwInput.value) || 1,
-                    scopeSelect.value
+                    scopeSelect.value,
+                    shapeSelect.value
                 );
             },
         },
@@ -6397,18 +6885,22 @@ function repaint_cards(gobj, ids)
             continue;       /* gone since it was listed */
         }
         let anchored = (priv.anchor_state === "on" && id === priv.anchor_id);
-        /*  A closed node paints its flags on its own stroke.  */
-        if(nd && nd.data && nd.data.desc && node_is_compact(gobj, id)) {
-            updates.push({id: id, style: compact_shape_of(
-                gobj, nd.data.desc, nd.data.record || {},
+        /*  A figure paints its flags on its own stroke; a pill in
+         *  its one-line html; a card in its own.  */
+        let mode = (nd && nd.data && nd.data.desc)? node_mode_of(gobj, id) : 'expanded';
+        if(mode === 'shape') {
+            updates.push({id: id, style: figure_shape_of(
+                gobj, nd.data.desc, nd.data.record || {}, nd.data.graph_props || {},
                 {highlight: focus.has(id), selected: selected.has(id), anchored: anchored}
             ).style});
             continue;
         }
-        let html = node_innerHTML_of(
-            nd, priv.theme, focus.has(id), selected.has(id), anchored,
-            pills_html_of(gobj, nd)
-        );
+        let html = (mode === 'compact')
+            ? pill_innerHTML_of(gobj, nd, priv.theme, focus.has(id), selected.has(id), anchored)
+            : node_innerHTML_of(
+                nd, priv.theme, focus.has(id), selected.has(id), anchored,
+                pills_html_of(gobj, nd)
+            );
         if(html !== null) {
             updates.push({id: id, style: {innerHTML: html}});
         }
@@ -6465,17 +6957,20 @@ function refresh_html_nodes_theme(gobj, theme)
         let id = nodes[i].id;
         let nd = graph.getNodeData(id);
         let anchored = (priv.anchor_state === "on" && id === priv.anchor_id);
-        if(nd && nd.data && nd.data.desc && node_is_compact(gobj, id)) {
-            updates.push({id: id, style: compact_shape_of(
-                gobj, nd.data.desc, nd.data.record || {},
+        let mode = (nd && nd.data && nd.data.desc)? node_mode_of(gobj, id) : 'expanded';
+        if(mode === 'shape') {
+            updates.push({id: id, style: figure_shape_of(
+                gobj, nd.data.desc, nd.data.record || {}, nd.data.graph_props || {},
                 {highlight: highlighted.has(id), selected: selected.has(id), anchored: anchored}
             ).style});
             continue;
         }
-        let html = node_innerHTML_of(
-            nd, theme, highlighted.has(id), selected.has(id), anchored,
-            pills_html_of(gobj, nd)
-        );
+        let html = (mode === 'compact')
+            ? pill_innerHTML_of(gobj, nd, theme, highlighted.has(id), selected.has(id), anchored)
+            : node_innerHTML_of(
+                nd, theme, highlighted.has(id), selected.has(id), anchored,
+                pills_html_of(gobj, nd)
+            );
         if(html === null) {
             html = more_innerHTML_of(gobj, nd, theme);   /* a `+N` chip, or null */
         }
@@ -7185,7 +7680,7 @@ function hide_unlink_confirm(gobj)
  *  Apply node properties to one or more nodes.
  *  scope: 'this', 'same_topic', 'all'
  ************************************************************/
-function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope)
+function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope, shape)
 {
     let priv = gobj.priv;
     let graph = priv.graph;
@@ -7199,6 +7694,23 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope)
     let updates = [];
     const nodes = graph.getData().nodes;
 
+    /*  The figure: written where Save reads it (the node's entry in
+     *  `__graphs__`), and as the topic's default for the wider
+     *  scopes, so a record that arrives later is born with it.  */
+    let figure = (shape && str_in_list(NODE_SHAPES, shape))? shape : "";
+    let reshaped = [];
+    if(figure && scope !== 'this') {
+        let topics = (scope === 'same_topic')? [source_topic] : Object.keys(priv.descs || {});
+        for(let topic_name of topics) {
+            if(!is_object(priv._graph_properties[topic_name])) {
+                priv._graph_properties[topic_name] = {};
+            }
+            let defaults = priv._graph_properties[topic_name].defaults || {};
+            defaults.node_shape = figure;
+            priv._graph_properties[topic_name].defaults = defaults;
+        }
+    }
+
     for(let i = 0; i < nodes.length; i++) {
         let nd = graph.getNodeData(nodes[i].id);
         if(!nd || !nd.data || !nd.data.desc) {
@@ -7212,6 +7724,13 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope)
             continue;
         }
 
+        if(figure) {
+            node_props_entry(gobj, nd).node_shape = figure;
+            if(node_mode_of(gobj, nodes[i].id) === 'shape') {
+                reshaped.push(nodes[i].id);
+            }
+        }
+
         let updateStyle = { fill: fill, stroke: stroke, lineWidth: lineWidth };
         if(nd.data.desc.node_treedb_type === 'hierarchical') {
             let record = nd.data.record || {};
@@ -7227,6 +7746,9 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope)
 
     if(updates.length > 0) {
         graph.updateNodeData(updates);
+        if(reshaped.length) {
+            reshape_nodes(gobj, reshaped);
+        }
         graph.draw().then(() => {
             mark_graph_dirty(gobj);
         });
@@ -7235,6 +7757,32 @@ function apply_node_properties(gobj, node_id, fill, stroke, lineWidth, scope)
     hide_node_popover(gobj);
 }
 
+/************************************************************
+ *  The node's entry in `_graph_properties` -- the object Save
+ *  reads and writes -- created if it has none yet, and the node's
+ *  `data.graph_props` pointed at it, so a key written here is
+ *  read by the next reshape and survives the next Save.
+ ************************************************************/
+function node_props_entry(gobj, nd)
+{
+    let priv = gobj.priv;
+    let topic_name = nd.data.topic_name;
+    let record = nd.data.record || {};
+
+    if(!is_object(priv._graph_properties[topic_name])) {
+        priv._graph_properties[topic_name] = {};
+    }
+    let topic_props = priv._graph_properties[topic_name];
+    if(!is_object(topic_props.nodes)) {
+        topic_props.nodes = {};
+    }
+    if(!is_object(topic_props.nodes[record.id])) {
+        topic_props.nodes[record.id] = is_object(nd.data.graph_props)? nd.data.graph_props : {};
+    }
+    nd.data.graph_props = topic_props.nodes[record.id];
+    return nd.data.graph_props;
+}
+
 /************************************************************
  *  Apply edge properties to one or more edges.
  *  scope: 'this', 'same_type', 'all'
@@ -7426,9 +7974,9 @@ function build_node_context_menu(gobj, node_id)
     /*  Open or close THIS node against the mode: the door a finger
      *  has to it (a double click is the mouse's).  */
     if(node_is_compact(gobj, node_id)) {
-        items.push(ctx_item('g6-icon-fullscreen', t('open node'), 'toggle_node_mode'));
+        items.push(ctx_item('g6-icon-fullscreen', t('expand node'), 'toggle_node_mode'));
     } else {
-        items.push(ctx_item('g6-icon-fullscreen-exit', t('close node'), 'toggle_node_mode'));
+        items.push(ctx_item('g6-icon-fullscreen-exit', t('collapse node'), 'toggle_node_mode'));
     }
 
     if(gobj.priv.edit_mode && !node_is_compact(gobj, node_id)) {
@@ -7453,6 +8001,9 @@ function build_port_context_menu(gobj, node_id, port_key)
 
     if(gobj.priv.edit_mode) {
         inject_svg_icons();
+        /*  The popover, for a finger: the gear beside the port needs
+         *  the port selected first, and a long press is the menu.  */
+        items.push(ctx_item('g6-icon-edit', t('port properties'), 'port_properties'));
         items.push(ctx_item('g6-icon-resize', t('resize all ports'), 'resize_all_ports'));
         items.push(ctx_item('g6-icon-resize', t('resize topic ports'), 'resize_topic_ports'));
     }
@@ -7495,6 +8046,12 @@ function handle_context_menu_click(gobj, value)
         case 'reset_topic_sizes':
             reset_sizes(gobj, true);
             break;
+        case 'port_properties':
+            if(priv._context_node_id && priv._context_port_key) {
+                select_port(gobj, priv._context_node_id, priv._context_port_key);
+                show_port_popover(gobj);
+            }
+            break;
         case 'resize_all_ports':
             copy_size_to_ports(gobj, false);
             break;
@@ -7581,7 +8138,7 @@ function copy_size_to_nodes(gobj, same_topic_only)
         }
 
         // Recalculate dx/dy for HTML nodes
-        if(nd.type === 'html') {
+        if(is_card_type(nd.type)) {
             updateStyle.dx = -source_size[0] / 2;
             let h = source_size.length > 1 ? source_size[1] : source_size[0];
             updateStyle.dy = -h / 2;
@@ -7773,7 +8330,7 @@ function copy_size_to_ports(gobj, same_topic_only)
 /*  A card with pills is this much taller; the row sits under the subtitle.  */
 const PILL_ROW_HEIGHT = 24;
 const MORE_CHIP_SIZE = [76, 26];
-/*  The chip beside CLOSED nodes: a square of 22 next to a chip of 76
+/*  The chip beside pills and figures: a square of 22 next to a chip of 76
  *  read as the biggest thing in the row, so it takes the closed
  *  scale -- the count and nothing else.  */
 const MORE_CHIP_SIZE_COMPACT = [40, 22];
@@ -7787,7 +8344,7 @@ function more_chip_is_compact(gobj, nd)
     if(parent_id) {
         return node_is_compact(gobj, parent_id);
     }
-    return gobj_read_str_attr(gobj, "node_mode") === "compact";
+    return gobj_read_str_attr(gobj, "node_mode") !== "expanded";
 }
 
 function more_chip_style(gobj, nd, color, rest)
@@ -8418,6 +8975,7 @@ async function reconcile_fold_apply(gobj, opts, visible)
     update_edge_icon_position(gobj);
     update_node_icon_position(gobj);
     update_link_icon_position(gobj);
+    update_port_icon_position(gobj);
 
     return changed;
 }
@@ -9302,7 +9860,7 @@ function ac_set_loose_topics(gobj, event, kw, src)
 function ac_set_node_mode(gobj, event, kw, src)
 {
     let priv = gobj.priv;
-    let mode = (kw && kw.node_mode === "compact")? "compact" : "expanded";
+    let mode = (kw && kw.node_mode && str_in_list(NODE_MODES, kw.node_mode))? kw.node_mode : "expanded";
 
     gobj_write_str_attr(gobj, "node_mode", mode);
     priv._open_nodes = new Set();
@@ -9316,9 +9874,9 @@ function ac_set_node_mode(gobj, event, kw, src)
 }
 
 /************************************************************
- *  The name under a closed square, on or off. Only the closed
- *  nodes change, and nothing moves: the label hangs outside the
- *  square and the layout measures the square.
+ *  The name under a figure, on or off. Only the `shape` nodes
+ *  change, and nothing moves: the label hangs outside the figure
+ *  and the layout measures the figure.
  ************************************************************/
 function ac_set_node_labels(gobj, event, kw, src)
 {
@@ -9328,7 +9886,7 @@ function ac_set_node_labels(gobj, event, kw, src)
     if(!priv.graph) {
         return 0;
     }
-    let ids = all_record_node_ids(gobj).filter((id) => node_is_compact(gobj, id));
+    let ids = all_record_node_ids(gobj).filter((id) => node_mode_of(gobj, id) === 'shape');
     reshape_nodes(gobj, ids);
     return 0;
 }