Monaco Text Editor

config/config.base.js

@@ -14,6 +14,11 @@ config.blob.fsDir = process.env.DEEPFORGE_BLOB_DIR || config.blob.fsDir;
 config.requirejsPaths.deepforge = './src/common';
 config.requirejsPaths['aws-sdk-min'] = './node_modules/aws-sdk/dist/aws-sdk.min';
 config.requirejsPaths.ace = './src/visualizers/widgets/TextEditor/lib/ace';
+config.requirejsPaths.vs = './node_modules/monaco-editor/min/vs';
+config.requirejsPaths.MonacoThemes = './src/visualizers/widgets/MonacoEditor/styles/themes';
+config.requirejsPaths.MonacoVim = './node_modules/monaco-vim/dist/monaco-vim';
+config.requirejsPaths.Chance = './node_modules/chance/dist/chance.min';
+
 config.seedProjects.defaultProject = 'project';
 
 config.plugin.allowBrowserExecution = true;

package.json

@@ -30,6 +30,7 @@
     "@babel/runtime": "^7.7.2",
     "aws-sdk": "^2.680.0",
     "commander": "^2.20.3",
+    "deepforge-keras": "github:deepforge-dev/deepforge-keras",
     "deepforge-user-management-page": "github:deepforge-dev/user-management-page",
     "dotenv": "^2.0.0",
     "exists-file": "^2.1.0",
@@ -40,6 +41,9 @@
     "lodash.merge": "^4.5.1",
     "lodash.template": "^4.4.0",
     "minimatch": "^3.0.4",
+    "monaco-editor": "^0.20.0",
+    "monaco-themes": "^0.3.3",
+    "monaco-vim": "^0.1.7",
     "mongodb": "^2.2.10",
     "node-fetch": "^2.6.0",
     "npm": "^4.0.5",

src/visualizers/Visualizers.json

@@ -148,5 +148,11 @@
     "title": "OperationDepEditor",
     "panel": "panels/OperationDepEditor/OperationDepEditorPanel",
     "DEBUG_ONLY": false
+  },
+  {
+    "id": "MonacoEditor",
+    "title": "MonacoEditor",
+    "panel": "panels/MonacoEditor/MonacoEditorPanel",
+    "DEBUG_ONLY": false
   }
-]
+]

src/visualizers/panels/MonacoEditor/MonacoEditorControl.js

@@ -0,0 +1,228 @@
+/*globals defines*/
+
+define([
+    'js/Constants',
+    'js/Utils/GMEConcepts',
+    'js/NodePropertyNames',
+    'underscore'
+], function (
+    CONSTANTS,
+    GMEConcepts,
+    nodePropertyNames,
+    _
+) {
+
+    'use strict';
+
+    function MonacoEditorControl(options) {
+
+        this._logger = options.logger.fork('Control');
+
+        this._client = options.client;
+
+        // Initialize core collections and variables
+        this._widget = options.widget;
+
+        this.ATTRIBUTE_NAME = options.attributeName || 'code';
+
+        this.defaultTemplate = _.template(options.defaultTemplate || '');
+
+        this._currentNodeId = null;
+        this._currentNodeParentId = undefined;
+        this._currentNodeHasAttr = false;
+        this._embedded = options.embedded;
+
+        this._initWidgetEventHandlers();
+
+        this._logger.debug('ctor finished');
+    }
+
+    MonacoEditorControl.prototype._initWidgetEventHandlers = function () {
+        this._widget.saveTextFor = (id, text) => {
+            if(this._currentNodeHasAttr) {
+                this.saveTextFor(id, text);
+            } else {
+                this._logger.warn(`Cannot save attribute ${this.ATTRIBUTE_NAME} ` +
+                    `for ${id} - node doesn't have the given attribute!`);
+            }
+        };
+
+        this._widget.setName = this.setName.bind(this);
+    };
+
+    MonacoEditorControl.prototype.saveTextFor = function (id, text, inTransaction) {
+        const node = this._client.getNode(this._currentNodeId),
+            name = node.getAttribute('name'),
+            msg = `Updating ${this.ATTRIBUTE_NAME} of ${name} (${id})`;
+
+        if (!inTransaction) {
+            this._client.startTransaction(msg);
+        }
+        this._client.setAttribute(id, this.ATTRIBUTE_NAME, text);
+        if (!inTransaction) {
+            this._client.completeTransaction();
+        }
+    };
+
+    MonacoEditorControl.prototype.setName = function (name) {
+        var node = this._client.getNode(this._currentNodeId),
+            oldName = node.getAttribute('name'),
+            msg = `Renaming ${oldName} -> ${name}`;
+
+        this._client.startTransaction(msg);
+        this._client.setAttribute(this._currentNodeId, 'name', name);
+        this._client.completeTransaction();
+    };
+
+    MonacoEditorControl.prototype.TERRITORY_RULE = {children: 0};
+    MonacoEditorControl.prototype.selectedObjectChanged = function (nodeId) {
+        var self = this;
+
+        self._logger.debug('activeObject nodeId \'' + nodeId + '\'');
+
+        // Remove current territory patterns
+        if (self._currentNodeId) {
+            self._client.removeUI(self._territoryId);
+        }
+
+        self._currentNodeId = nodeId;
+        self._currentNodeParentId = undefined;
+        self._currentNodeHasAttr = false;
+
+        if (typeof self._currentNodeId === 'string') {
+            var parentId = this._getParentId(nodeId);
+            // Put new node's info into territory rules
+            self._selfPatterns = {};
+
+            self._currentNodeParentId = parentId;
+
+            self._territoryId = self._client.addUI(self, function (events) {
+                const node = self._client.getNode(self._currentNodeId);
+                self._currentNodeHasAttr = node && node.getValidAttributeNames().includes(self.ATTRIBUTE_NAME);
+
+                self._eventCallback(events);
+            });
+            self._logger.debug(`TextEditor territory id is ${this._territoryId}`);
+
+            // Update the territory
+            self._selfPatterns[nodeId] = this.TERRITORY_RULE;
+            self._client.updateTerritory(self._territoryId, self._selfPatterns);
+        }
+    };
+
+    MonacoEditorControl.prototype._getParentId = function (nodeId) {
+        var node = this._client.getNode(nodeId);
+        return node ? node.getParentId() : null;
+    };
+
+
+    MonacoEditorControl.prototype._getDefaultText = function (node) {
+        const attrs = node.getAttributeNames()
+            .map(attrName => [attrName, node.getAttribute(attrName)]);
+        const nodeData = _.object(attrs);
+        return this.defaultTemplate(nodeData);
+    };
+
+    MonacoEditorControl.prototype._getObjectDescriptor = function (nodeId) {
+        const node = this._client.getNode(nodeId);
+
+        if (node) {
+            return {
+                id: node.getId(),
+                name: node.getAttribute(nodePropertyNames.Attributes.name),
+                parentId: node.getParentId(),
+                text: node.getAttribute(this.ATTRIBUTE_NAME) || this._getDefaultText(node),
+                ownText: node.getOwnAttribute(this.ATTRIBUTE_NAME),
+            };
+        }
+    };
+
+    /* * * * * * * * Node Event Handling * * * * * * * */
+    MonacoEditorControl.prototype._eventCallback = function (events) {
+        var i = events ? events.length : 0,
+            event;
+
+        this._logger.debug('_eventCallback \'' + i + '\' items');
+
+        while (i--) {
+            event = events[i];
+            switch (event.etype) {
+
+            case CONSTANTS.TERRITORY_EVENT_LOAD:
+                this._onLoad(event.eid);
+                break;
+            case CONSTANTS.TERRITORY_EVENT_UPDATE:
+                this._onUpdate(event.eid);
+                break;
+            case CONSTANTS.TERRITORY_EVENT_UNLOAD:
+                this._onUnload(event.eid);
+                break;
+            default:
+                break;
+            }
+        }
+
+        this._logger.debug('_eventCallback \'' + events.length + '\' items - DONE');
+    };
+
+    MonacoEditorControl.prototype._onLoad = function (gmeId) {
+        if (this._currentNodeId === gmeId) {
+            var description = this._getObjectDescriptor(gmeId);
+            this._widget.addNode(description);
+        }
+    };
+
+    MonacoEditorControl.prototype._onUpdate = function (gmeId) {
+        var description = this._getObjectDescriptor(gmeId);
+        this._widget.updateNode(description);
+    };
+
+    MonacoEditorControl.prototype._onUnload = function (gmeId) {
+        this._widget.removeNode(gmeId);
+    };
+
+    MonacoEditorControl.prototype._stateActiveObjectChanged = function (model, activeObjectId) {
+        if (this._currentNodeId === activeObjectId) {
+            // The same node selected as before - do not trigger
+        } else {
+            this.selectedObjectChanged(activeObjectId);
+        }
+    };
+
+    /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+    MonacoEditorControl.prototype.destroy = function () {
+        this._detachClientEventListeners();
+        if (this._territoryId) {
+            this._client.removeUI(this._territoryId);
+        }
+    };
+
+    MonacoEditorControl.prototype._attachClientEventListeners = function () {
+        if (!this._embedded) {
+            this._detachClientEventListeners();
+            WebGMEGlobal.State.on('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, this._stateActiveObjectChanged, this);
+        }
+    };
+
+    MonacoEditorControl.prototype._detachClientEventListeners = function () {
+        if (!this._embedded) {
+            WebGMEGlobal.State.off('change:' + CONSTANTS.STATE_ACTIVE_OBJECT, this._stateActiveObjectChanged);
+        }
+    };
+
+    MonacoEditorControl.prototype.onActivate = function () {
+        this._attachClientEventListeners();
+
+        if (typeof this._currentNodeId === 'string') {
+            WebGMEGlobal.State.registerSuppressVisualizerFromNode(true);
+            WebGMEGlobal.State.registerActiveObject(this._currentNodeId);
+            WebGMEGlobal.State.registerSuppressVisualizerFromNode(false);
+        }
+    };
+
+    MonacoEditorControl.prototype.onDeactivate = function () {
+        this._detachClientEventListeners();
+    };
+
+    return MonacoEditorControl;
+});

src/visualizers/panels/MonacoEditor/MonacoEditorPanel.js

@@ -0,0 +1,101 @@
+/*globals define, _, WebGMEGlobal*/
+/**
+ * Generated by VisualizerGenerator 1.7.0 from webgme on Fri Jun 12 2020 11:26:51 GMT-0500 (Central Daylight Time).
+ */
+
+define([
+    'js/PanelBase/PanelBaseWithHeader',
+    'js/PanelManager/IActivePanel',
+    'widgets/MonacoEditor/MonacoEditorWidget',
+    './MonacoEditorControl'
+], function (
+    PanelBaseWithHeader,
+    IActivePanel,
+    MonacoEditorWidget,
+    MonacoEditorControl
+) {
+    'use strict';
+
+    function MonacoEditorPanel(layoutManager, params) {
+        var options = {};
+        //set properties from options
+        options[PanelBaseWithHeader.OPTIONS.LOGGER_INSTANCE_NAME] = 'MonacoEditorPanel';
+        options[PanelBaseWithHeader.OPTIONS.FLOATING_TITLE] = true;
+
+        //call parent's constructor
+        PanelBaseWithHeader.apply(this, [options, layoutManager]);
+
+        this._client = params.client;
+        this._embedded = params.embedded;
+
+        //initialize UI
+        this._initialize();
+
+        this.logger.debug('ctor finished');
+    }
+
+    //inherit from PanelBaseWithHeader
+    _.extend(MonacoEditorPanel.prototype, PanelBaseWithHeader.prototype);
+    _.extend(MonacoEditorPanel.prototype, IActivePanel.prototype);
+
+    MonacoEditorPanel.prototype._initialize = function () {
+        var self = this;
+
+        //set Widget title
+        this.setTitle('');
+
+        this.widget = new MonacoEditorWidget(this.logger, this.$el);
+
+        this.widget.setTitle = function (title) {
+            self.setTitle(title);
+        };
+
+        this.control = new MonacoEditorControl({
+            logger: this.logger,
+            client: this._client,
+            embedded: this._embedded,
+            widget: this.widget
+        });
+
+        this.onActivate();
+    };
+
+    /* OVERRIDE FROM WIDGET-WITH-HEADER */
+    /* METHOD CALLED WHEN THE WIDGET'S READ-ONLY PROPERTY CHANGES */
+    MonacoEditorPanel.prototype.onReadOnlyChanged = function (isReadOnly) {
+        //apply parent's onReadOnlyChanged
+        PanelBaseWithHeader.prototype.onReadOnlyChanged.call(this, isReadOnly);
+        this.widget.setReadOnly(isReadOnly);
+    };
+
+    MonacoEditorPanel.prototype.onResize = function (width, height) {
+        this.logger.debug('onResize --> width: ' + width + ', height: ' + height);
+        this.widget.onWidgetContainerResize(width, height);
+    };
+
+    /* * * * * * * * Visualizer life cycle callbacks * * * * * * * */
+    MonacoEditorPanel.prototype.destroy = function () {
+        this.control.destroy();
+        this.widget.destroy();
+
+        PanelBaseWithHeader.prototype.destroy.call(this);
+        WebGMEGlobal.KeyboardManager.setListener(undefined);
+        WebGMEGlobal.Toolbar.refresh();
+    };
+
+    MonacoEditorPanel.prototype.onActivate = function () {
+        this.widget.onActivate();
+        this.control.onActivate();
+        WebGMEGlobal.KeyboardManager.setListener(this.widget);
+        WebGMEGlobal.Toolbar.refresh();
+    };
+
+    MonacoEditorPanel.prototype.onDeactivate = function () {
+        this.widget.onDeactivate();
+        this.control.onDeactivate();
+        WebGMEGlobal.KeyboardManager.setListener(undefined);
+        WebGMEGlobal.Toolbar.refresh();
+    };
+
+    return MonacoEditorPanel;
+});