Custom operators

static/index.js

@@ -362,6 +362,14 @@ host.BrowserHost = class {
                 openFileDialog.click();
             });
         }
+
+        const makeCustomOperatorSidebar = this.document.getElementById('make-custom-operator');
+        makeCustomOperatorSidebar.addEventListener('click', () => {
+            const customOperatorSidebar = new sidebar.CustomOperatorSidebar(this);
+            console.log(sidebar);
+            this._view._sidebar.open(customOperatorSidebar.render(), 'Custom Operator'); // bad practice change later
+        })
+
         const githubButton = this.document.getElementById('github-button');
         const githubLink = this.document.getElementById('logo-github');
         if (githubButton && githubLink) {

static/view-sidebar.js

@@ -443,6 +443,7 @@ sidebar.NodeSidebar = class {
     _raise(event, data) {
         if (this._events && this._events[event]) {
             for (const callback of this._events[event]) {
+                console.log(`raised event ${event} data ${data}`)
                 callback(this, data);
             }
         }
@@ -545,6 +546,64 @@ sidebar.NodeSidebar = class {
     }
 };
 
+sidebar.CustomOperatorSidebar = class {
+    constructor(host) {
+        this._host = host;
+        this._elements = [];
+
+        this._addEditableProperty('type');
+        this._addHeader('Attributes');
+        this._addProperty('addProperty test', new sidebar.ValueTextView(this._host, "foo"));
+        this._addHeader('Inputs');
+        this._addHeader('Outputs');
+    }
+
+    render() {
+        return this._elements;
+    }
+
+    _addHeader(title) {
+        const headerElement = this._host.document.createElement('div');
+        headerElement.className = 'sidebar-view-header';
+        headerElement.innerText = title;
+        this._elements.push(headerElement);
+    }
+
+    _addProperty(name, value) {
+        const item = new sidebar.NameValueView(this._host, name, value);
+        this._elements.push(item.render());
+    }
+
+    _addEditableProperty(name) {
+        const valueElement = this._host.document.createElement('div');
+        valueElement.className = 'sidebar-view-item-value'
+        const inputElement = this._host.document.createElement('input');
+        inputElement.setAttribute('type', 'text');
+        inputElement.setAttribute('value', '');
+        inputElement.setAttribute('title', '');
+        inputElement.setAttribute('size', '42');
+        valueElement.appendChild(inputElement);
+
+        this._elements.push((new sidebar.NameValueView(this._host, name, {render() {return [valueElement];}})).render());
+    }
+
+    /*
+    _addButton(title) {
+        const buttonElement = this._host.document.createElement('button');
+        buttonElement.className = 'sidebar-view-button';
+        buttonElement.innerText = title;
+        this._elements.push(buttonElement);
+
+        if (title === 'Create') {
+            buttonElement.addEventListener('click', () => {
+                // put this code somewhere else later?
+
+            });
+        }
+    }
+    */
+}
+
 sidebar.NameValueView = class {
 
     constructor(host, name, value) {

templates/index.html

@@ -442,6 +442,7 @@
     <select id="add-node-dropdown" class="graph-op-add-node-dropdown">
     </select>
 	<button id="load-model" class="graph-button-load">LoadModel</button>
+	<button id="make-custom-operator" class="graph-op-button-makeCustomOperator">Make custom operator</button>
 
     <button id="back-button" class="toolbar-back-button" title="Back">
         &#x276E;