Skip to content

Commit

Permalink
Update view.js (#1285)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lutzroeder
lutzroeder committed Jun 10, 2024
1 parent 5732baf commit 1f68f3a
Showing 1 changed file with 102 additions and 60 deletions.
162 changes: 102 additions & 60 deletions source/view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,7 @@ view.View = class {
this._options.mousewheel = this._options.mousewheel === 'scroll' ? 'zoom' : 'scroll';
break;
default:
throw new view.Error(`Unsupported toogle '${name}'.`);
throw new view.Error(`Unsupported toggle '${name}'.`);
}
const options = {};
for (const [name, value] of Object.entries(this._options)) {
Expand Down Expand Up @@ -1074,6 +1074,27 @@ view.View = class {
}
}

showTensorProperties(value) {
try {
if (this._menu) {
this._menu.close();
}
const sidebar = new view.TensorSidebar(this, value);
sidebar.on('activate', (sender, value) => {
this._graph.select([value]);
});
sidebar.on('deactivate', () => {
this._graph.select(null);
});
sidebar.on('select', (sender, value) => {
this.scrollTo(this._graph.activate(value));
});
this._sidebar.open(sidebar, 'Tensor Properties');
} catch (error) {
this.error(error, 'Error showing tensor properties.', null);
}
}

exception(error, fatal) {
if (error && !error.context && this._model && this._model.identifier) {
error.context = this._model.identifier;
Expand Down Expand Up @@ -1705,45 +1726,50 @@ view.Graph = class extends grapher.Graph {

createNode(node, type) {
if (type) {
const value = new view.Node(this, { type });
value.name = (this._nodeKey++).toString();
this._table.set(type, value);
return value;
const obj = new view.Node(this, { type });
obj.name = (this._nodeKey++).toString();
this._table.set(type, obj);
return obj;
}
const value = new view.Node(this, node);
value.name = (this._nodeKey++).toString();
this._table.set(node, value);
return value;
const obj = new view.Node(this, node);
obj.name = (this._nodeKey++).toString();
this._table.set(node, obj);
return obj;
}

createInput(input) {
const value = new view.Input(this, input);
value.name = (this._nodeKey++).toString();
this._table.set(input, value);
return value;
const obj = new view.Input(this, input);
obj.name = (this._nodeKey++).toString();
this._table.set(input, obj);
return obj;
}

createOutput(output) {
const value = new view.Output(this, output);
value.name = (this._nodeKey++).toString();
this._table.set(output, value);
return value;
const obj = new view.Output(this, output);
obj.name = (this._nodeKey++).toString();
this._table.set(output, obj);
return obj;
}

createValue(argument) {
const name = argument.name;
createValue(value) {
const name = value.name;
if (this._values.has(name)) {
// duplicate argument name
const value = this._values.get(name);
this._table.set(argument, value);
const obj = this._values.get(name);
this._table.set(value, obj);
} else {
const value = new view.Value(this, argument);
this._values.set(name, value);
this._table.set(argument, value);
const obj = new view.Value(this, value);
this._values.set(name, obj);
this._table.set(value, obj);
}
return this._values.get(name);
}

createTensor(value) {
const obj = new view.Value(this, value);
this._table.set(value, obj);
}

add(graph, signature) {
const clusters = new Set();
const clusterParentMap = new Map();
Expand Down Expand Up @@ -1779,6 +1805,8 @@ view.Graph = class extends grapher.Graph {
for (const value of input.value) {
if (value.name !== '' && !value.initializer) {
this.createValue(value).to.push(viewNode);
} else if (value.initializer) {
this.createTensor(value);
}
}
}
Expand Down Expand Up @@ -2170,9 +2198,9 @@ view.Output = class extends grapher.Node {

view.Value = class {

constructor(context, argument) {
constructor(context, value) {
this.context = context;
this.value = argument;
this.value = value;
this.from = null;
this.to = [];
}
Expand Down Expand Up @@ -2237,11 +2265,12 @@ view.Value = class {
}

activate() {
if (this.value && this.from && Array.isArray(this.to)) {
const value = this.value;
if (this.value && this.value.initializer) {
this.context.view.showTensorProperties(this.value);
} else if (this.value && this.from && Array.isArray(this.to)) {
const from = this.from.value;
const to = this.to.map((node) => node.value);
this.context.view.showConnectionProperties(value, from, to);
this.context.view.showConnectionProperties(this.value, from, to);
}
}
};
Expand Down Expand Up @@ -2503,14 +2532,33 @@ view.NodeSidebar = class extends view.ObjectSidebar {
if (Array.isArray(inputs) && inputs.length > 0) {
this.addHeader('Inputs');
for (const input of inputs) {
this._addInput(input.name, input);
const name = input.name;
if (input.value.length > 0) {
const value = new view.ArgumentView(this._view, input);
value.on('export-tensor', (sender, value) => this.emit('export-tensor', value));
value.on('activate', (sender, value) => this.emit('activate', value));
value.on('deactivate', (sender, value) => this.emit('deactivate', value));
value.on('select', (sender, value) => this.emit('select', value));
const item = new view.NameValueView(this._view, name, value);
this._inputs.push(item);
this.element.appendChild(item.render());
}
}
}
const outputs = node.outputs;
if (Array.isArray(outputs) && outputs.length > 0) {
this.addHeader('Outputs');
for (const output of outputs) {
this._addOutput(output.name, output);
const name = output.name;
if (output.value.length > 0) {
const value = new view.ArgumentView(this._view, output);
value.on('activate', (sender, value) => this.emit('activate', value));
value.on('deactivate', (sender, value) => this.emit('deactivate', value));
value.on('select', (sender, value) => this.emit('select', value));
const item = new view.NameValueView(this._view, name, value);
this._outputs.push(item);
this.element.appendChild(item.render());
}
}
}
}
Expand Down Expand Up @@ -2542,31 +2590,6 @@ view.NodeSidebar = class extends view.ObjectSidebar {
this._attributes.push(item);
this.element.appendChild(item.render());
}

_addInput(name, input) {
if (input.value.length > 0) {
const value = new view.ArgumentView(this._view, input);
value.on('export-tensor', (sender, value) => this.emit('export-tensor', value));
value.on('activate', (sender, value) => this.emit('activate', value));
value.on('deactivate', (sender, value) => this.emit('deactivate', value));
value.on('select', (sender, value) => this.emit('select', value));
const item = new view.NameValueView(this._view, name, value);
this._inputs.push(item);
this.element.appendChild(item.render());
}
}

_addOutput(name, output) {
if (output.value.length > 0) {
const value = new view.ArgumentView(this._view, output);
value.on('activate', (sender, value) => this.emit('activate', value));
value.on('deactivate', (sender, value) => this.emit('deactivate', value));
value.on('select', (sender, value) => this.emit('select', value));
const item = new view.NameValueView(this._view, name, value);
this._outputs.push(item);
this.element.appendChild(item.render());
}
}
};

view.NameValueView = class extends view.Control {
Expand Down Expand Up @@ -2831,10 +2854,10 @@ view.ValueView = class extends view.Control {
element.innerHTML = `<span class='sidebar-item-value-line-content'>name: <b>${name || ' '}</b></span>`;
element.addEventListener('pointerenter', () => this.emit('activate', this._value));
element.addEventListener('pointerleave', () => this.emit('deactivate', this._value));
if (!initializer) {
element.style.cursor = 'pointer';
element.addEventListener('click', () => this.emit('select', this._value));
}
// if (!initializer) {
element.style.cursor = 'pointer';
element.addEventListener('click', () => this.emit('select', this._value));
// }
this._element.appendChild(element);
} else if (this._hasCategory) {
this._bold('category', initializer.category);
Expand Down Expand Up @@ -3114,6 +3137,25 @@ view.ConnectionSidebar = class extends view.ObjectSidebar {
}
};

view.TensorSidebar = class extends view.ObjectSidebar {

constructor(context, value) {
super(context);
this._value = value;
}

render() {
const value = this._value;
const [name] = value.name.split('\n');
this.addProperty('name', name);
if (value.type) {
const item = new view.ValueView(this._view, value, '');
this.add('type', item);
item.toggle();
}
}
};

view.ModelSidebar = class extends view.ObjectSidebar {

constructor(context, model, graph, signature) {
Expand Down

0 comments on commit 1f68f3a

Please sign in to comment.