Text windows now sync

lib/Editor.js

@@ -21,8 +21,8 @@ import { getVisual } from 'diagram-js/lib/util/GraphicsUtil';
  * A code editor that reflects and lets you navigate the diagram.
  */
 export default function Editor(
-    config, injector, eventBus,
-    canvas, elementRegistry) {
+  config, injector, eventBus,
+  canvas, elementRegistry) {
 
   var self = this;
 
@@ -40,27 +40,25 @@ export default function Editor(
 
   this.toggle((config && config.open) || false);
 
-  domEvent.bind(this._toggle, 'click', function(event) {
+  domEvent.bind(this._toggle, 'click', function (event) {
     event.preventDefault();
     event.stopPropagation();
 
     self.toggle();
   });
 
-  eventBus.on('selection.changed', function(context) {
-    if (context.newSelection[0] && self._parent){
-      if (context.newSelection[0].type == "bpmn:ScriptTask"){
+  eventBus.on('selection.changed', function (context) {
+    if (context.newSelection[0] && self._parent) {
+      if (context.newSelection[0].type == "bpmn:ScriptTask") {
         domClasses(self._parent).add('enabled');
         self._state.isEnabled = true;
-         // grab script properties window 
-         self._codestore = document.getElementById("cam-script-val");
-         console.log(self._codestore);
         return;
-      }}
-      domClasses(self._parent).remove('enabled');
-      self._state.isEnabled = false;
-      if (self.isOpen()){
-        self.close();
+      }
+    }
+    domClasses(self._parent).remove('enabled');
+    self._state.isEnabled = false;
+    if (self.isOpen()) {
+      self.close();
     }
   });
 
@@ -74,9 +72,9 @@ Editor.$inject = [
   'elementRegistry'
 ];
 
-Editor.prototype._init = function() {
+Editor.prototype._init = function () {
   var canvas = this._canvas,
-      container = canvas.getContainer();
+    container = canvas.getContainer();
 
   // create parent div
   var parent = this._parent = document.createElement('div');
@@ -97,8 +95,8 @@ Editor.prototype._init = function() {
 
   ide.name = "code";
   ide.maxLength = "5000";
-  ide.cols = "80";
-  ide.rows = "40";
+  ide.cols = "40";
+  ide.rows = "80";
 
   domClasses(ide).add('ide');
 
@@ -109,42 +107,51 @@ Editor.prototype._init = function() {
   //   mode: "python",
   //   theme: 'monokai'
   // });
-
-    // Add Comment
-
-
 };
 
 
-Editor.prototype.validate = function() {
+Editor.prototype.validate = function () {
   // ! This parts gonna be hard
 }
 
-Editor.prototype.open = function() {
+Editor.prototype.open = function () {
   assign(this._state, { isOpen: true });
 
   domClasses(this._parent).add('open');
 
-  var translate = this._injector.get('translate', false) || function(s) { return s; };
+  var translate = this._injector.get('translate', false) || function (s) { return s; };
 
   domAttr(this._toggle, 'title', translate('Close Editor'));
+  if (this._state.isEnabled) {
+    // grab script properties window 
+    var codestore = this._codestore = document.getElementById("cam-script-val");
+    // Sync code window and a properties tab
+    this._ide.value = codestore.value;
+
+    codestore.addEventListener("input", (event) => {
+      this._ide.value = codestore.value;
+    });
+    this._ide.addEventListener("input", (event) => {
+      codestore.value = this._ide.value;
+    });
+  }
 
   this._eventBus.fire('editor.toggle', { open: true });
 };
 
-Editor.prototype.close = function() {
+Editor.prototype.close = function () {
   assign(this._state, { isOpen: false });
 
   domClasses(this._parent).remove('open');
 
-  var translate = this._injector.get('translate', false) || function(s) { return s; };
+  var translate = this._injector.get('translate', false) || function (s) { return s; };
 
   domAttr(this._toggle, 'title', translate('Open Editor'));
 
   this._eventBus.fire('editor.toggle', { open: false });
 };
 
-Editor.prototype.toggle = function(open) {
+Editor.prototype.toggle = function (open) {
 
   var currentOpen = this.isOpen();
 
@@ -163,6 +170,6 @@ Editor.prototype.toggle = function(open) {
   }
 };
 
-Editor.prototype.isOpen = function() {
+Editor.prototype.isOpen = function () {
   return this._state.isOpen;
 };