diff --git a/static/onnx.js b/static/onnx.js index ee1a9d8..3186161 100644 --- a/static/onnx.js +++ b/static/onnx.js @@ -597,6 +597,8 @@ onnx.Graph = class { // console.log(custom_add_node) this._custom_added_node.push(custom_add_node) + + return custom_add_node; } }; diff --git a/static/view-grapher.js b/static/view-grapher.js index b2f5271..968ede4 100644 --- a/static/view-grapher.js +++ b/static/view-grapher.js @@ -21,7 +21,7 @@ grapher.Graph = class { this._pathArgumentNames = new Set(); // the name of arguments which occurs in both sides of an edge this._renameMap = new Map(); - this._addedNode = []; + this._addedNode = new Map(); } get options() { diff --git a/static/view-sidebar.js b/static/view-sidebar.js index 4791896..eafb649 100644 --- a/static/view-sidebar.js +++ b/static/view-sidebar.js @@ -288,7 +288,7 @@ sidebar.NodeSidebar = class { } _addAttribute(name, attribute) { - const item = new NodeAttributeView(this._host, attribute); + const item = new NodeAttributeView(this._host, attribute, name, this._modelNodeName); item.on('show-graph', (sender, graph) => { this._raise('show-graph', graph); }); @@ -298,8 +298,9 @@ sidebar.NodeSidebar = class { } _addInput(name, input) { + // console.log(input) if (input.arguments.length > 0) { - const view = new sidebar.ParameterView(this._host, input); + const view = new sidebar.ParameterView(this._host, input, this._modelNodeName); view.on('export-tensor', (sender, tensor) => { this._raise('export-tensor', tensor); }); @@ -315,7 +316,7 @@ sidebar.NodeSidebar = class { _addOutput(name, output) { if (output.arguments.length > 0) { - const item = new sidebar.NameValueView(this._host, name, new sidebar.ParameterView(this._host, output)); + const item = new sidebar.NameValueView(this._host, name, new sidebar.ParameterView(this._host, output, this._modelNodeName)); this._outputs.push(item); this._elements.push(item.render()); } @@ -626,9 +627,11 @@ sidebar.ValueTextView = class { class NodeAttributeView { - constructor(host, attribute) { + constructor(host, attribute, attributeName, modelNodeName) { this._host = host; this._attribute = attribute; + this._attributeName = attributeName + this._modelNodeName = modelNodeName this._element = this._host.document.createElement('div'); this._element.className = 'sidebar-view-item-value'; @@ -672,10 +675,22 @@ class NodeAttributeView { if (content && typeof content === 'string') { content = content.split('<').join('<').split('>').join('>'); } - const line = this._host.document.createElement('div'); - line.className = 'sidebar-view-item-value-line'; - line.innerHTML = content ? content : ' '; - this._element.appendChild(line); + // const line = this._host.document.createElement('div'); + // line.className = 'sidebar-view-item-value-line'; + // line.innerHTML = content ? content : ' '; + // this._element.appendChild(line); + + var attr_input = document.createElement("INPUT"); + attr_input.setAttribute("type", "text"); + attr_input.setAttribute("value", content ? content : ' '); + attr_input.addEventListener('input', (e) => { + // console.log(e.target.value); + this._host._view._graph.changeNodeAttribute(this._modelNodeName, this._attributeName, e.target.value); + // console.log(this._host._view._graph._renameMap); + }); + + this._element.appendChild(attr_input); + } } } @@ -744,14 +759,17 @@ class NodeAttributeView { sidebar.ParameterView = class { - constructor(host, list) { + constructor(host, list, modelNodeName) { this._host = host; this._list = list; + this._modelNodeName = modelNodeName this._elements = []; this._items = []; - - for (const argument of list.arguments) { - const item = new sidebar.ArgumentView(host, argument); + + // console.log(list) + // for (const argument of list.arguments) { + for (const [index, argument] of list.arguments.entries()) { + const item = new sidebar.ArgumentView(host, argument, index, list._name, this._modelNodeName); item.on('export-tensor', (sender, tensor) => { this._raise('export-tensor', tensor); }); @@ -790,9 +808,12 @@ sidebar.ParameterView = class { sidebar.ArgumentView = class { - constructor(host, argument) { + constructor(host, argument, arg_index, parameterName, modelNodeName) { this._host = host; this._argument = argument; + this._arg_index = arg_index + this._parameterName = parameterName + this._modelNodeName = modelNodeName this._element = this._host.document.createElement('div'); this._element.className = 'sidebar-view-item-value'; @@ -820,15 +841,30 @@ sidebar.ArgumentView = class { this._hasKind = initializer && initializer.kind ? true : false; if (this._hasId || (!this._hasKind && !type)) { this._hasId = true; - const nameLine = this._host.document.createElement('div'); - nameLine.className = 'sidebar-view-item-value-line'; + if (typeof name !== 'string') { throw new Error("Invalid argument identifier '" + JSON.stringify(name) + "'."); } name = name.split('\n').shift(); // custom argument id name = name || ' '; - nameLine.innerHTML = 'name: ' + name + ''; - this._element.appendChild(nameLine); + + // const nameLine = this._host.document.createElement('div'); + // nameLine.className = 'sidebar-view-item-value-line'; + // nameLine.innerHTML = 'name: ' + name + ''; + // this._element.appendChild(nameLine); + + var arg_input = document.createElement("INPUT"); + arg_input.setAttribute("type", "text"); + arg_input.setAttribute("value", name); + arg_input.addEventListener('input', (e) => { + // console.log(this._argument) + // console.log(this._argument.name) + // console.log(e.target.value); + this._host._view._graph.changeNodeInput(this._modelNodeName, this._parameterName, this._arg_index, e.target.value); + // console.log(this._host._view._graph._renameMap); + }); + this._element.appendChild(arg_input); + } else if (this._hasKind) { const kindLine = this._host.document.createElement('div'); diff --git a/static/view.js b/static/view.js index 2577b7e..f599516 100644 --- a/static/view.js +++ b/static/view.js @@ -1031,11 +1031,6 @@ view.Graph = class extends grapher.Graph { } - // custom added node - for (const node of this._addedNode) { - - } - for (const output of graph.outputs) { const viewOutput = this.createOutput(output); for (const argument of output.arguments) { @@ -1114,18 +1109,46 @@ view.Graph = class extends grapher.Graph { properties.set('op_type', op_type) properties.set('name', modelNodeName) // console.log(properties) - this._addedNode.push(new view.LightNodeInfo(properties)) - // console.log(this._addedNode) + // this._addedNode.push(new view.LightNodeInfo(properties)) + this._addedNode.set(modelNodeName, new view.LightNodeInfo(properties)) + console.log(this._addedNode) // refresh this.view._graphs[0].reset_custom_added_node() - for (const node_info of this._addedNode) { + // for (const node_info of this._addedNode.values()) { + for (const [modelNodeName, node_info] of this._addedNode) { // console.log(node) - this.view._graphs[0].make_custom_add_node(node_info) + var node = this.view._graphs[0].make_custom_add_node(node_info) + + // padding empty array for LightNodeInfo.inputs/outputs + for (var input of node.inputs) { + var arg_len = input._arguments.length + this._addedNode.get(modelNodeName).inputs.set(input.name, new Array(arg_len)) + } + } // console.log(this.view._graphs[0].nodes) + console.log(this._addedNode) + + } + changeNodeAttribute(modelNodeName, attributeName, targetValue) { + if (this._addedNode.has(modelNodeName)) { + this._addedNode.get(modelNodeName).attributes.set(attributeName, targetValue) + } + // console.log(this._addedNode) + } + + changeNodeInput(modelNodeName, parameterName, arg_index, targetValue) { + if (this._addedNode.has(modelNodeName)) { + this._addedNode.get(modelNodeName).inputs.get(parameterName)[arg_index] = targetValue + + } + console.log(this._addedNode) + } + + build(document, origin) { for (const argument of this._arguments.values()) { @@ -1349,8 +1372,8 @@ view.Output = class extends grapher.Node { view.LightNodeInfo = class { constructor(properties, attributes, inputs, outputs) { this.properties = properties - this.attributes = attributes || [] - this.inputs = inputs || [] + this.attributes = attributes || new Map() + this.inputs = inputs || new Map() this.outputs = outputs || [] } }