diff --git a/src/visualizers/panels/OperationEditor/OperationEditorPanel.js b/src/visualizers/panels/OperationEditor/OperationEditorPanel.js index bb0cee079..82fb05260 100644 --- a/src/visualizers/panels/OperationEditor/OperationEditorPanel.js +++ b/src/visualizers/panels/OperationEditor/OperationEditorPanel.js @@ -1,15 +1,17 @@ -/*globals define, */ +/*globals define, WebGMEGlobal*/ /*jshint browser: true*/ define([ 'panels/TilingViz/TilingVizPanel', 'panels/OperationCodeEditor/OperationCodeEditorPanel', 'panels/OperationInterfaceEditor/OperationInterfaceEditorPanel', + 'js/Constants', 'underscore' ], function ( TilingViz, CodeEditor, InterfaceEditor, + CONSTANTS, _ ) { 'use strict'; @@ -18,13 +20,79 @@ define([ OperationEditorPanel = function (layoutManager, params) { TilingViz.call(this, layoutManager, params); + this.initialize(); + }; + + OperationEditorPanel.prototype.initialize = function () { + this.territory = {}; + this.territoryId = null; + this._currentNodeId = null; + + this.control = this; + + // Set the editable title on node change + //var titleCntr = $(); + this.$panelHeaderTitle.on('dblclick', this.editTitle.bind(this)); }; //inherit from TilingViz _.extend(OperationEditorPanel.prototype, TilingViz.prototype); + OperationEditorPanel.prototype.editTitle = function () { + this.$panelHeaderTitle.editInPlace({ + css: { + 'z-index': 1000 + }, + onChange: (oldValue, newValue) => { + var msg = `Renamed operation: ${oldValue} -> ${newValue}`; + if (!/^\s*$/.test(newValue)) { + this._client.startTransaction(msg); + this._client.setAttributes(this._currentNodeId, 'name', + newValue); + this._client.completeTransaction(); + } + } + }); + }; + + OperationEditorPanel.prototype.selectedObjectChanged = function (id) { + this._currentNodeId = id; + if (typeof this._currentNodeId === 'string') { + // Setup the territory + this.territory = {}; + this.territory[this._currentNodeId] = {children: 0}; + this.territoryId = this._client.addUI(this, this._eventCallback.bind(this)); + this._client.updateTerritory(this.territoryId, this.territory); + } + TilingViz.prototype.selectedObjectChanged.call(this, id); + }; + + OperationEditorPanel.prototype._eventCallback = function (events) { + events = events.find(e => e.eid === this._currentNodeId); + this.updateTitle(); + }; + + OperationEditorPanel.prototype.updateTitle = function () { + var id = this._currentNodeId, + node = this._client.getNode(id), + name = node && node.getAttribute('name'); + + this.setTitle(name || ''); + }; + OperationEditorPanel.prototype.getPanels = function () { - return [CodeEditor, InterfaceEditor]; + return [InterfaceEditor, CodeEditor]; + }; + + OperationEditorPanel.prototype.onDeactivate = function () { + WebGMEGlobal.State.off('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, + this._stateActiveObjectChanged); + + if (this.territoryId) { + this._client.removeUI(this.territoryId); + } + + TilingViz.prototype.onDeactivate.call(this); }; return OperationEditorPanel; diff --git a/src/visualizers/widgets/OperationCodeEditor/OperationCodeEditorWidget.js b/src/visualizers/widgets/OperationCodeEditor/OperationCodeEditorWidget.js index 318f385e6..af0790ea8 100644 --- a/src/visualizers/widgets/OperationCodeEditor/OperationCodeEditorWidget.js +++ b/src/visualizers/widgets/OperationCodeEditor/OperationCodeEditorWidget.js @@ -30,11 +30,11 @@ define([ refs = desc.references.map(name => `-- ${name}`).join('\n'), outputs, header = [ - `-- Editing "${desc.name}"`, - '-- ' + `-- Editing "${desc.name}" Implementation` ]; if (inputs.length) { + header.push('--'); header.push('-- Defined variables:'); header.push(inputs); } @@ -42,6 +42,7 @@ define([ header.push(refs); } header.push('--'); + header.push('-- The following will be executed when the operation is run:'); // Add info about outputs outputs = desc.outputs.map(pair => `-- ${pair[0]} = `)