From de16a7977b19e9bb90662ee6b2413bdbb6e7a984 Mon Sep 17 00:00:00 2001 From: ZhangGe6 Date: Sun, 24 Apr 2022 21:51:41 +0800 Subject: [PATCH] delete node in a backtrack manner done. However, the output_node still stays --- static/view-grapher.js | 21 ++++++++++++--------- static/view-sidebar.js | 20 ++++++++------------ static/view.js | 39 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 57 insertions(+), 23 deletions(-) diff --git a/static/view-grapher.js b/static/view-grapher.js index 308ca2c..03629eb 100644 --- a/static/view-grapher.js +++ b/static/view-grapher.js @@ -16,6 +16,7 @@ grapher.Graph = class { // My code this._modelNodeName2ViewNode = new Map(); this._modelNodeName2State = new Map(); + this._namedEdges = new Map(); } get options() { @@ -39,17 +40,10 @@ grapher.Graph = class { // My code const modelNodeName = node.value.name; - // console.log(modelNodeName); - const viewNode = this._modelNodeName2ViewNode.get(modelNodeName); - if (viewNode) { - this._modelNodeName2ViewNode[modelNodeName] = node; - } - else { - this._modelNodeName2ViewNode.set(modelNodeName, node); - } - + this._modelNodeName2ViewNode.set(modelNodeName, node); this._modelNodeName2State.set(modelNodeName, 'Exist'); + console.log(modelNodeName) } setEdge(edge) { @@ -63,6 +57,15 @@ grapher.Graph = class { if (!this._edges.has(key)) { this._edges.set(key, { v: edge.v, w: edge.w, label: edge }); } + + // My code + // _namedEdges: from : to + var from_node_name = edge.from.value.name + var to_node_name = edge.to.value.name + if (!this._namedEdges.has(from_node_name)) { + this._namedEdges.set(from_node_name, []); + } + this._namedEdges.get(from_node_name).push(to_node_name); } setParent(node, parent) { diff --git a/static/view-sidebar.js b/static/view-sidebar.js index 70650a4..36162cf 100644 --- a/static/view-sidebar.js +++ b/static/view-sidebar.js @@ -204,6 +204,7 @@ sidebar.NodeSidebar = class { // console.log(node) // console.log(this._node) this._addButton('Delete'); + this._addButton('DeleteWithChildren'); this._addButton('Recover'); this._addButton('Download'); this._addButton('RefreshGraph'); @@ -291,19 +292,18 @@ sidebar.NodeSidebar = class { // console.log(title) if (title === 'Delete') { buttonElement.addEventListener('click', () => { - console.log(this._host._view._graph._modelNodeName2State.get(this._node.name)) - this._host._view._graph._modelNodeName2ViewNode.get(this._node.name).element.style.opacity = 0.3; - this._host._view._graph._modelNodeName2State.set(this._node.name,'Deleted'); - console.log(this._host._view._graph._modelNodeName2State.get(this._node.name)) + this._host._view._graph.delete_node(this._node.name) + }); + } + if (title === 'DeleteWithChildren') { + buttonElement.addEventListener('click', () => { + this._host._view._graph.delete_node_with_children(this._node.name) }); } if (title === 'Recover') { // console.log('pressed') buttonElement.addEventListener('click', () => { - console.log(this._host._view._graph._modelNodeName2State.get(this._node.name)) - this._host._view._graph._modelNodeName2ViewNode.get(this._node.name).element.style.opacity = 1; - this._host._view._graph._modelNodeName2State.set(this._node.name,'Existed'); - console.log(this._host._view._graph._modelNodeName2State.get(this._node.name)) + this._host._view._graph.recover_node(this._node.name) }); } @@ -338,10 +338,6 @@ sidebar.NodeSidebar = class { this._host._view._updateGraph(); }); } - - - - } toggleInput(name) { diff --git a/static/view.js b/static/view.js index 04a3ba0..0ab7b0f 100644 --- a/static/view.js +++ b/static/view.js @@ -586,7 +586,7 @@ view.View = class { console.log('node state of lastViewGraph is loaded') viewGraph._modelNodeName2State = this.lastViewGraph._modelNodeName2State; } - console.log(viewGraph._modelNodeName2State) + // console.log(viewGraph._modelNodeName2State) viewGraph.add(graph); // console.log(viewGraph._arguments) @@ -866,6 +866,8 @@ view.View = class { view.Graph = class extends grapher.Graph { constructor(view, model, compound, options) { + // console.log('constructing view.Graph') + // console.log(compound) // undefined super(compound, options); this.view = view; this.model = model; @@ -1019,6 +1021,38 @@ view.Graph = class extends grapher.Graph { } } + // My code + delete_node(node_name) { + this._modelNodeName2State.set(node_name, 'Deleted'); + this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 0.3; + } + + recover_node(node_name) { + this._modelNodeName2State.set(node_name, 'Existed'); + this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 1; + } + + + delete_node_with_children(node_name) { + this.delete_backtrack(node_name); + } + + delete_backtrack(node_name) { + this._modelNodeName2State.set(node_name, 'Deleted'); + this._modelNodeName2ViewNode.get(node_name).element.style.opacity = 0.3; + + if (!this._namedEdges.has(node_name)) { + return; + } + + for (var i = 0; i < this._namedEdges.get(node_name).length; i++) { + this.delete_backtrack(this._namedEdges.get(node_name)[i]) + } + } + + + + build(document, origin) { for (const argument of this._arguments.values()) { argument.build(); @@ -1276,7 +1310,7 @@ view.Argument = class { } const edge = this.context.createEdge(this._from, to); edge.v = this._from.name; - edge.w = to.name; + edge.w = to.name; if (content) { edge.label = content; } @@ -1286,6 +1320,7 @@ view.Argument = class { } this.context.setEdge(edge); this._edges.push(edge); + // console.log(this.context._namedEdges); } } }