@yuneta/gobj-ui 7.23.132 → 7.23.134

package/src/c_g6_nodes_tree.js

@@ -290,7 +290,7 @@ const PORT_LINE_WIDTH = 2;
  *  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
+ *  topic's colour -- a circle, a square, 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
@@ -311,9 +311,11 @@ const SHAPE_SIZE = {
     child:        22,
 };
 /*  The figures a `shape` node can be, by G6's own node types
- *  (`square` is G6's `rect` with rounded corners).  */
+ *  (`square` is G6's `rect` with rounded corners). A circle by
+ *  default: a figure is a POINT of the topology, and a circle is
+ *  the one figure that says nothing more than that.  */
 const NODE_SHAPES = ['square', 'circle', 'diamond', 'triangle', 'hexagon', 'star'];
-const DEFAULT_NODE_SHAPE = 'square';
+const DEFAULT_NODE_SHAPE = 'circle';
 
 /***************************************************************
  *  Internal layout and operation mode definitions
@@ -519,6 +521,7 @@ let PRIVATE_DATA = {
     _focus_topic:       null,       // topic currently focused (EV_FOCUS_TOPIC)
     _focus_ids:         [],         // node ids carrying the focus 'active' state
     _on_pointerdown_focus: null,    // listener keeping the keyboard on the canvas
+    _on_native_contextmenu: null,   // listener keeping the browser's menu out
     _uninstall_long_press: null,    // touch door to the context menu
     toolbar_collapsed:  true,       // floating toolbars folded (narrow only)
     _toolbars_could_collapse: null, // last answer, to notice it changed
@@ -704,6 +707,13 @@ function mt_destroy(gobj)
         priv._on_focusout_restore = null;
     }
 
+    if(priv._on_native_contextmenu) {
+        priv.$container.removeEventListener(
+            "contextmenu", priv._on_native_contextmenu, true
+        );
+        priv._on_native_contextmenu = null;
+    }
+
     if(priv.theme_observer) {
         priv.theme_observer.disconnect();
         priv.theme_observer = null;
@@ -1141,6 +1151,32 @@ function configure_events(gobj)
     };
     priv.$container.addEventListener("focusout", priv._on_focusout_restore);
 
+    /*  The browser's own menu never opens over the graph.
+     *
+     *  The context-menu plugin calls preventDefault() on the event
+     *  it is handed, and that event is the one @antv/g SYNTHESISES
+     *  from `pointerdown` with `button === 2` -- not the DOM's
+     *  `contextmenu`, which nobody cancelled. So a right click opened
+     *  both menus, and where ours had nothing to show (an edge, the
+     *  empty canvas) it opened the browser's alone. A form field of a
+     *  popover keeps it: that is where cut and paste live.  */
+    if(priv._on_native_contextmenu) {
+        priv.$container.removeEventListener(
+            "contextmenu", priv._on_native_contextmenu, true
+        );
+    }
+    priv._on_native_contextmenu = (ev) => {
+        let target = ev.target;
+        if(target && typeof target.closest === "function" &&
+                target.closest("input, textarea, select, [contenteditable]")) {
+            return;
+        }
+        ev.preventDefault();
+    };
+    priv.$container.addEventListener(
+        "contextmenu", priv._on_native_contextmenu, true
+    );
+
     /*  The canvas carries a `tabIndex` of its own, so a keydown reaches
      *  us only while the GRAPH has focus. That is what keeps Ctrl+A in
      *  the find box a text selection and not a selection of every node:
@@ -1205,7 +1241,12 @@ function configure_plugins(gobj)
      *  press below, so the gesture arms itself on exactly what the
      *  menu would agree to open on.  */
     let menu_enable = (e) => {
-        return e.targetType === 'node' || e.targetType === 'edge';
+        if(e.targetType === 'node') {
+            return true;
+        }
+        /*  An edge's commands (its properties, unlink) are edition
+         *  commands: in reading mode it has nothing to offer.  */
+        return e.targetType === 'edge' && !!priv.edit_mode;
     };
 
     graph_add_plugin(
@@ -2400,7 +2441,7 @@ function pill_innerHTML_of(gobj, nd, theme, 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.  */
+ *  a circle.  */
 function node_figure_of(gobj, desc, geometry)
 {
     let shape = geometry? geometry.node_shape : null;
@@ -2447,13 +2488,14 @@ function figure_shape_of(gobj, desc, record, geometry, flags)
     let fill = dark? mix_colors(paint.fill, 0.25, "#2c3542")
                    : mix_colors(paint.fill, 0.10, "#ffffff");
     let stroke = dark? mix_colors(paint.fill, 0.85, "#ffffff") : paint.fill;
-    let line_width = 2;
+    /*  The card's and the pill's line width, 1 unless somebody chose
+     *  another: the three views of a record wear the same outline.  */
+    let line_width = paint.lineWidth;
     /*  A paint somebody CHOSE (a node's or a topic's own, saved in
      *  `__graphs__`) is not ours to reinterpret: it comes through as
      *  it was chosen.  */
     if(paint.stroke !== getStrokeColor(paint.fill)) {
         stroke = paint.stroke;
-        line_width = Math.max(paint.lineWidth, 2);
     }
     if(f.selected) {
         stroke = SELECT_RING;
@@ -2798,57 +2840,17 @@ function draw_link(
      *  Create the edge with independent id and semantic data
      *  HACK: source/target are interchanged so arrows point parent -> child
      */
-    // Doc-style default: neutral grey edges, teal for the
-    // containment/tree relation (parent and child same topic, i.e.
-    // a self-hierarchy). Saturated topic colour is dropped.
-    // `themed_default` marks edges still on the default colour so a
-    // theme toggle can re-theme them without touching user-saved ones.
-    let dark = (priv.theme === "dark");
     let is_tree = (parent_topic === child_topic);
-    let saved_lineWidth = is_tree ? 2 : 1.6;
-    let saved_stroke = is_tree
-        ? (dark ? '#22a7c2' : '#0e7490')
-        : (dark ? '#8b94a3' : '#6b7280');
-    let themed_default = true;
-    let topic_props = priv._graph_properties[parent_topic];
-    if(topic_props) {
-        // Per-edge saved style
-        if(is_object(topic_props.edges)) {
-            let edge_key = hook_name + ":" + parent_id + ":" + child_id;
-            let edge_props = topic_props.edges[edge_key];
-            if(edge_props) {
-                if(edge_props.lineWidth != null) {
-                    saved_lineWidth = edge_props.lineWidth;
-                }
-                if(edge_props.stroke) {
-                    saved_stroke = edge_props.stroke;
-                    themed_default = false;
-                }
-            }
-        }
-        // Fall back to topic defaults (only if not user-overridden)
-        if(themed_default && is_object(topic_props.defaults)) {
-            let defs = topic_props.defaults;
-            if(defs.edge_styles && defs.edge_styles[hook_name]) {
-                let hook_style = defs.edge_styles[hook_name];
-                if(hook_style.lineWidth != null) {
-                    saved_lineWidth = hook_style.lineWidth;
-                }
-                if(hook_style.stroke) {
-                    saved_stroke = hook_style.stroke;
-                    themed_default = false;
-                }
-            } else if(defs.edge_style) {
-                if(defs.edge_style.lineWidth != null) {
-                    saved_lineWidth = defs.edge_style.lineWidth;
-                }
-                if(defs.edge_style.stroke) {
-                    saved_stroke = defs.edge_style.stroke;
-                    themed_default = false;
-                }
-            }
-        }
-    }
+    let edge_style = edge_style_of(gobj, {
+        parent_topic: parent_topic,
+        parent_id:    parent_id,
+        hook_name:    hook_name,
+        child_id:     child_id,
+        is_tree:      is_tree,
+    });
+    let saved_lineWidth = edge_style.lineWidth;
+    let saved_stroke = edge_style.stroke;
+    let themed_default = edge_style.themed_default;
 
     let edge = {
         id: build_edge_id(gobj),
@@ -6804,6 +6806,7 @@ function show_node_popover(gobj)
     shapeSelect.value = nodeData.data && nodeData.data.desc
         ? node_figure_of(gobj, nodeData.data.desc, nodeData.data.graph_props || {})
         : DEFAULT_NODE_SHAPE;
+    let orig_figure = shapeSelect.value;
 
     // Apply-to scope
     create_form_label(popover, 'apply to');
@@ -6832,7 +6835,10 @@ function show_node_popover(gobj)
                     strokeInput.value,
                     parseInt(lwInput.value) || 1,
                     scopeSelect.value,
-                    shapeSelect.value
+                    /*  Only a figure somebody CHOSE is written: the
+                     *  one the select opened on is today's default,
+                     *  and saving it would freeze it on the node.  */
+                    (shapeSelect.value !== orig_figure)? shapeSelect.value : ""
                 );
             },
         },
@@ -8256,9 +8262,89 @@ function apply_edge_properties(gobj, edge_id, lineWidth, stroke, scope)
     deselect_edge(gobj);
 }
 
+/************************************************************
+ *  The style an edge INHERITS, before anything saved for the
+ *  edge itself: its hook's default in the parent topic, else the
+ *  parent topic's default for every edge, else the library's.
+ *
+ *  The library's: neutral grey, teal for the containment/tree
+ *  relation (parent and child of the same topic, a
+ *  self-hierarchy). `themed_default` says the colour is still the
+ *  library's, so a theme toggle re-themes it and leaves a chosen
+ *  one alone.
+ ************************************************************/
+function edge_inherited_style_of(gobj, d)
+{
+    let priv = gobj.priv;
+    let dark = (priv.theme === "dark");
+    let style = {
+        lineWidth: d.is_tree ? 2 : 1.6,
+        stroke: d.is_tree
+            ? (dark ? '#22a7c2' : '#0e7490')
+            : (dark ? '#8b94a3' : '#6b7280'),
+        themed_default: true,
+    };
+
+    let defs = topic_defaults_of(gobj, d.parent_topic);
+    if(!defs) {
+        return style;
+    }
+    let chosen = null;
+    if(is_object(defs.edge_styles) && is_object(defs.edge_styles[d.hook_name])) {
+        chosen = defs.edge_styles[d.hook_name];
+    } else if(is_object(defs.edge_style)) {
+        chosen = defs.edge_style;
+    }
+    if(chosen) {
+        if(chosen.lineWidth != null) {
+            style.lineWidth = chosen.lineWidth;
+        }
+        if(chosen.stroke) {
+            style.stroke = chosen.stroke;
+            style.themed_default = false;
+        }
+    }
+    return style;
+}
+
+/*  The key of an edge's own entry in its parent topic's `edges`.  */
+function edge_key_of(d)
+{
+    return d.hook_name + ":" + d.parent_id + ":" + d.child_id;
+}
+
+/************************************************************
+ *  The style an edge WEARS: what it inherits, with what was saved
+ *  for the edge itself on top.
+ ************************************************************/
+function edge_style_of(gobj, d)
+{
+    let style = edge_inherited_style_of(gobj, d);
+    let topic_props = gobj.priv._graph_properties[d.parent_topic];
+    let own = (is_object(topic_props) && is_object(topic_props.edges))?
+        topic_props.edges[edge_key_of(d)] : null;
+    if(is_object(own)) {
+        if(own.lineWidth != null) {
+            style.lineWidth = own.lineWidth;
+        }
+        if(own.stroke) {
+            style.stroke = own.stroke;
+            style.themed_default = false;
+        }
+    }
+    return style;
+}
+
 /************************************************************
  *  Save edge styles into _graph_properties (called from
  *  save_geometry).
+ *
+ *  Only what differs from what the edge INHERITS is written. It
+ *  used to be "any line width but 2", and the library's own width
+ *  for an edge between two topics is 1.6: every Save wrote every
+ *  such edge down with its width and its theme's colour, so the
+ *  default was frozen on it -- a theme toggle no longer re-themed
+ *  it after a reload, and a topic default never reached it.
  ************************************************************/
 function update_edge_geometry(gobj, edge_id)
 {
@@ -8271,16 +8357,20 @@ function update_edge_geometry(gobj, edge_id)
     }
 
     let style = edgeData.style || {};
-    let lineWidth = style.lineWidth;
-    let stroke = style.stroke;
+    let d = edgeData.data;
+    let inherited = edge_inherited_style_of(gobj, d);
+    let parent_topic = d.parent_topic;
+    let edge_key = edge_key_of(d);
 
-    let parent_topic = edgeData.data.parent_topic;
-    let edge_key = edgeData.data.hook_name + ":" +
-        edgeData.data.parent_id + ":" + edgeData.data.child_id;
+    let edge_props = {};
+    if(style.lineWidth != null && style.lineWidth !== inherited.lineWidth) {
+        edge_props.lineWidth = style.lineWidth;
+    }
+    if(style.stroke && style.stroke !== inherited.stroke) {
+        edge_props.stroke = style.stroke;
+    }
 
-    // If default values, remove any previously saved entry
-    let hasCustom = (lineWidth != null && lineWidth !== 2);
-    if(!hasCustom) {
+    if(Object.keys(edge_props).length === 0) {
         let topic_props = priv._graph_properties[parent_topic];
         if(topic_props && is_object(topic_props.edges)) {
             delete topic_props.edges[edge_key];
@@ -8298,11 +8388,6 @@ function update_edge_geometry(gobj, edge_id)
     if(!is_object(topic_props.edges)) {
         topic_props.edges = {};
     }
-
-    let edge_props = { lineWidth: lineWidth };
-    if(stroke) {
-        edge_props.stroke = stroke;
-    }
     topic_props.edges[edge_key] = edge_props;
 }
 
@@ -8341,7 +8426,9 @@ function build_context_menu_items(gobj, e)
             gobj, node_id, canvasPoint[0], canvasPoint[1]
         );
 
-        if(port_key) {
+        /*  A port's commands are edition commands; out of edition a
+         *  port is part of its node, and gets the node's menu.  */
+        if(port_key && priv.edit_mode) {
             priv._context_port_key = port_key;
             return build_port_context_menu(gobj, node_id, port_key);
         } else {
@@ -8387,11 +8474,14 @@ function build_node_context_menu(gobj, node_id)
     if(gobj.priv.edit_mode && !node_is_compact(gobj, node_id)) {
         items.push(ctx_item('g6-icon-resize', t('resize all'), 'resize_all_nodes'));
         items.push(ctx_item('g6-icon-resize', t('resize topic nodes'), 'resize_topic_nodes'));
-        /*  The way back: the sizes somebody saved -- or that a Save
-         *  froze before 7.23.80 -- forgotten, the library's defaults
-         *  back on every card.  */
-        items.push(ctx_item('g6-icon-undo', t('reset sizes'), 'reset_all_sizes'));
-        items.push(ctx_item('g6-icon-undo', t('reset topic sizes'), 'reset_topic_sizes'));
+    }
+    if(gobj.priv.edit_mode) {
+        /*  The way back, in every view: what the node properties and
+         *  the resizes saved -- or a Save froze before 7.23.80 --
+         *  forgotten, the library's defaults back.  */
+        items.push(ctx_item('g6-icon-undo', t('reset node'), 'reset_node'));
+        items.push(ctx_item('g6-icon-undo', t('reset topic nodes'), 'reset_topic_nodes'));
+        items.push(ctx_item('g6-icon-undo', t('reset all nodes'), 'reset_all_nodes'));
     }
 
     return items;
@@ -8411,18 +8501,33 @@ function build_port_context_menu(gobj, node_id, port_key)
         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'));
+        /*  The way back from the popover and the two above: the
+         *  library's own shape and radius.  */
+        items.push(ctx_item('g6-icon-undo', t('reset port'), 'reset_port'));
+        items.push(ctx_item('g6-icon-undo', t('reset topic ports'), 'reset_topic_ports'));
+        items.push(ctx_item('g6-icon-undo', t('reset all ports'), 'reset_all_ports'));
     }
 
     return items;
 }
 
 /************************************************************
- *  Build edge context menu items (prepared for expansion).
+ *  Build edge context menu items: the two floating icons of a
+ *  selected edge, for a right click and for a finger.
  ************************************************************/
 function build_edge_context_menu(gobj)
 {
     let items = [];
-    // Future: add edge-specific actions here
+
+    if(gobj.priv.edit_mode) {
+        inject_svg_icons();
+        items.push(ctx_item('g6-icon-edit', t('edge properties'), 'edge_properties'));
+        items.push(ctx_item('g6-icon-delete', t('unlink'), 'unlink_edge'));
+        items.push(ctx_item('g6-icon-undo', t('reset edge'), 'reset_edge'));
+        items.push(ctx_item('g6-icon-undo', t('reset same type edges'), 'reset_same_type_edges'));
+        items.push(ctx_item('g6-icon-undo', t('reset all edges'), 'reset_all_edges'));
+    }
+
     return items;
 }
 
@@ -8445,11 +8550,23 @@ function handle_context_menu_click(gobj, value)
         case 'resize_topic_nodes':
             copy_size_to_nodes(gobj, true);
             break;
-        case 'reset_all_sizes':
-            reset_sizes(gobj, false);
+        case 'reset_node':
+            reset_nodes(gobj, 'this');
+            break;
+        case 'reset_topic_nodes':
+            reset_nodes(gobj, 'same_topic');
+            break;
+        case 'reset_all_nodes':
+            reset_nodes(gobj, 'all');
             break;
-        case 'reset_topic_sizes':
-            reset_sizes(gobj, true);
+        case 'reset_edge':
+            reset_edges(gobj, 'this');
+            break;
+        case 'reset_same_type_edges':
+            reset_edges(gobj, 'same_type');
+            break;
+        case 'reset_all_edges':
+            reset_edges(gobj, 'all');
             break;
         case 'port_properties':
             if(priv._context_node_id && priv._context_port_key) {
@@ -8463,6 +8580,32 @@ function handle_context_menu_click(gobj, value)
         case 'resize_topic_ports':
             copy_size_to_ports(gobj, true);
             break;
+        case 'reset_port':
+            reset_ports(gobj, 'this');
+            break;
+        case 'reset_topic_ports':
+            reset_ports(gobj, 'same_topic');
+            break;
+        case 'reset_all_ports':
+            reset_ports(gobj, 'all');
+            break;
+        case 'edge_properties':
+            if(priv._context_edge_id) {
+                deselect_node(gobj);
+                select_edge(gobj, priv._context_edge_id);
+                show_edge_popover(gobj);
+            }
+            break;
+        case 'unlink_edge':
+            if(priv._context_edge_id) {
+                deselect_node(gobj);
+                select_edge(gobj, priv._context_edge_id);
+                request_unlink_edge(gobj);
+            }
+            break;
+        default:
+            log_error(`${gobj_short_name(gobj)}: unknown context menu item: ${value}`);
+            break;
     }
 }
 
@@ -8561,40 +8704,47 @@ function copy_size_to_nodes(gobj, same_topic_only)
     }
 }
 
+/*
+ *  What a reset forgets, by what it resets. A node's own look is
+ *  its size, its colours, its line width and its figure; its ports
+ *  have their own reset. The POSITION is not a property and no reset
+ *  touches it: it is where somebody put the node.
+ */
+const NODE_STYLE_KEYS = ["size", "fill", "stroke", "lineWidth", "node_shape"];
+const PORT_STYLE_KEYS = ["portR", "port_sizes", "port_shapes", "port_shape"];
+
 /************************************************************
- *  Forget every SAVED size: the card sizes, the port radii and the
- *  per-port radii, per node and as topic defaults (`resize all`),
- *  for one topic or for all of them. The cards go back to the
- *  library's defaults on the spot, and Save writes the cleared
- *  entries -- a size nobody chose is not written back (see
- *  update_geometry). Positions and edge styles are not touched:
- *  they are a different choice.
+ *  Forget these saved keys -- on the node of the menu alone
+ *  ('this'), or on every node of its topic and in the topic's
+ *  defaults ('same_topic'), or everywhere ('all'). Both copies of
+ *  an entry are stripped: the one in `_graph_properties` (which
+ *  Save writes, folded nodes included) and the one the node
+ *  carries. Returns the ids of the nodes on screen to reshape.
  ************************************************************/
-function reset_sizes(gobj, same_topic_only)
+function forget_saved_node_keys(gobj, nd, scope, keys)
 {
     let priv = gobj.priv;
     let graph = priv.graph;
-
-    let topic = "";
-    if(same_topic_only) {
-        let nd = priv._context_node_id? graph.getNodeData(priv._context_node_id) : null;
-        if(!nd || !nd.data || !nd.data.topic_name) {
-            log_error(`${gobj_short_name(gobj)}: reset topic sizes without a node`);
-            return;
-        }
-        topic = nd.data.topic_name;
-    }
-    const SIZE_KEYS = ["size", "portR", "port_sizes"];
     let strip = (props) => {
         if(!is_object(props)) {
             return;
         }
-        for(let k of SIZE_KEYS) {
+        for(let k of keys) {
             delete props[k];
         }
     };
 
-    /*  The saved entries, on screen or folded away.  */
+    if(scope === 'this') {
+        strip(node_props_entry(gobj, nd));
+        strip(nd.data.graph_props);
+        if(nd.data.record) {
+            strip(nd.data.record._geometry);
+        }
+        return [nd.id];
+    }
+
+    let topic = (scope === 'same_topic')? nd.data.topic_name : "";
+
     for(const [topic_name, props] of Object.entries(priv._graph_properties || {})) {
         if(topic && topic_name !== topic) {
             continue;
@@ -8607,25 +8757,191 @@ function reset_sizes(gobj, same_topic_only)
         strip(props.defaults);
     }
 
-    /*  The nodes on screen: their own copy of the entry, then the shape.  */
     let ids = [];
-    for(let nd of (graph.getNodeData() || [])) {
-        if(!nd || !nd.data || !nd.data.desc || is_more_node(nd)) {
+    for(let n of (graph.getNodeData() || [])) {
+        if(!n || !n.data || !n.data.desc || is_more_node(n)) {
             continue;
         }
-        if(topic && nd.data.topic_name !== topic) {
+        if(topic && n.data.topic_name !== topic) {
             continue;
         }
-        strip(nd.data.graph_props);
-        if(nd.data.record) {
-            strip(nd.data.record._geometry);
+        strip(n.data.graph_props);
+        if(n.data.record) {
+            strip(n.data.record._geometry);
         }
-        ids.push(nd.id);
+        ids.push(n.id);
     }
+    return ids;
+}
+
+/*  The nodes are reshaped from what is left saved, and Save writes
+ *  the cleared entries: a value nobody chose is not written back
+ *  (see update_geometry).  */
+function reshape_after_reset(gobj, ids)
+{
+    let graph = gobj.priv.graph;
     reshape_nodes(gobj, ids);
     graph.draw().then(() => {
         update_resize_handles_position(gobj);
         update_port_resize_handles_position(gobj);
+        update_port_icon_position(gobj);
+        mark_graph_dirty(gobj);
+    });
+}
+
+/************************************************************
+ *  Forget the saved look of nodes (NODE_STYLE_KEYS), back to the
+ *  library's: this node, its topic's, or all of them. A figure
+ *  saved as a square before the circle became the default goes
+ *  back to the default this way.
+ ************************************************************/
+function reset_nodes(gobj, scope)
+{
+    let priv = gobj.priv;
+    let nd = priv._context_node_id? priv.graph.getNodeData(priv._context_node_id) : null;
+    if(!nd || !nd.data || !nd.data.topic_name) {
+        log_error(`${gobj_short_name(gobj)}: reset nodes without a node`);
+        return;
+    }
+    reshape_after_reset(gobj, forget_saved_node_keys(gobj, nd, scope, NODE_STYLE_KEYS));
+}
+
+/************************************************************
+ *  Forget the saved SHAPE and RADIUS of ports, back to the
+ *  library's own:
+ *      'this'          the port of the menu, on its node only
+ *      'same_topic'    every port of the node's topic, with the
+ *                      topic's port defaults
+ *      'all'           every port of every topic, likewise
+ *  The node's own look is not touched: that is `reset node`.
+ ************************************************************/
+function reset_ports(gobj, scope)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    let node_id = priv._context_node_id;
+    let port_key = priv._context_port_key;
+    let nd = node_id? graph.getNodeData(node_id) : null;
+    if(!nd || !nd.data || !nd.data.topic_name || !port_key) {
+        log_error(`${gobj_short_name(gobj)}: reset ports without a port`);
+        return;
+    }
+
+    if(scope !== 'this') {
+        reshape_after_reset(gobj, forget_saved_node_keys(gobj, nd, scope, PORT_STYLE_KEYS));
+        return;
+    }
+
+    /*  One port: its entries in the per-port maps, not the maps.  */
+    let strip_port = (props) => {
+        if(!is_object(props)) {
+            return;
+        }
+        for(let k of ["port_sizes", "port_shapes"]) {
+            if(is_object(props[k])) {
+                delete props[k][port_key];
+                if(Object.keys(props[k]).length === 0) {
+                    delete props[k];
+                }
+            }
+        }
+    };
+    strip_port(node_props_entry(gobj, nd));
+    strip_port(nd.data.graph_props);
+    if(nd.data.record) {
+        strip_port(nd.data.record._geometry);
+    }
+    reshape_after_reset(gobj, [node_id]);
+}
+
+/************************************************************
+ *  Forget the saved style of edges, back to what they inherit:
+ *      'this'          the edge of the menu, its own entry
+ *      'same_type'     every edge of its hook in its parent topic,
+ *                      with that hook's default
+ *      'all'           every edge, with every edge default
+ *  The same three scopes as the edge properties popover.
+ ************************************************************/
+function reset_edges(gobj, scope)
+{
+    let priv = gobj.priv;
+    let graph = priv.graph;
+
+    let ed = priv._context_edge_id? graph.getEdgeData(priv._context_edge_id) : null;
+    if(!ed || !ed.data || !ed.data.parent_topic) {
+        log_error(`${gobj_short_name(gobj)}: reset edges without an edge`);
+        return;
+    }
+    let src = ed.data;
+    let hits = (d) => {
+        if(!d || !d.parent_topic) {
+            return false;   /* a `+N` chip's line */
+        }
+        if(scope === 'this') {
+            return edge_key_of(d) === edge_key_of(src) && d.parent_topic === src.parent_topic;
+        }
+        if(scope === 'same_type') {
+            return d.parent_topic === src.parent_topic && d.hook_name === src.hook_name;
+        }
+        return true;
+    };
+
+    /*  The saved entries, on screen or folded away.  */
+    for(const [topic_name, props] of Object.entries(priv._graph_properties || {})) {
+        if(!is_object(props)) {
+            continue;
+        }
+        if(scope !== 'all' && topic_name !== src.parent_topic) {
+            continue;
+        }
+        if(is_object(props.edges)) {
+            for(let key of Object.keys(props.edges)) {
+                let hook_name = key.split(":")[0];
+                if(scope === 'this' && key !== edge_key_of(src)) {
+                    continue;
+                }
+                if(scope === 'same_type' && hook_name !== src.hook_name) {
+                    continue;
+                }
+                delete props.edges[key];
+            }
+            if(Object.keys(props.edges).length === 0) {
+                delete props.edges;
+            }
+        }
+        if(is_object(props.defaults)) {
+            if(scope === 'same_type' && is_object(props.defaults.edge_styles)) {
+                delete props.defaults.edge_styles[src.hook_name];
+                if(Object.keys(props.defaults.edge_styles).length === 0) {
+                    delete props.defaults.edge_styles;
+                }
+            } else if(scope === 'all') {
+                delete props.defaults.edge_styles;
+                delete props.defaults.edge_style;
+            }
+        }
+    }
+
+    /*  The edges on screen, restyled from what is left.  */
+    let updates = [];
+    for(let e of (graph.getEdgeData() || [])) {
+        if(!e || !hits(e.data)) {
+            continue;
+        }
+        let style = edge_style_of(gobj, e.data);
+        updates.push({
+            id: e.id,
+            style: {lineWidth: style.lineWidth, stroke: style.stroke},
+            data: Object.assign({}, e.data, {themed_default: style.themed_default}),
+        });
+    }
+
+    deselect_edge(gobj);
+    if(updates.length > 0) {
+        graph.updateEdgeData(updates);
+    }
+    graph.draw().then(() => {
         mark_graph_dirty(gobj);
     });
 }