Fixed Toggle

assets/diagram-js-code-editor.css

@@ -2,7 +2,6 @@
   position: absolute;
   top: 90px;
   right: 20px;
-  left: 500px;
   /* overflow: hidden; */
   background-color: rgba(255, 255, 255, 0.9);
   border: solid 1px #CCC;
@@ -13,6 +12,14 @@
   -ms-user-select: none;
   -webkit-user-select: none; */
 }
+.djs-editor:not(.enabled){
+  color: #CCC;
+  pointer-events: none;
+}
+
+.djs-editor.enabled{
+  color: rgb(0, 0, 0);
+}
 
 .djs-editor:not(.open) {
   overflow: hidden;
@@ -32,10 +39,19 @@
 }
 
 .djs-editor:not(.open) .toggle {
-  padding: 10px;
+  width: 46px;
+  height: 46px;
+  line-height: 46px;
+  content: "dvr" !important;
   text-align: center;
 }
 
+.djs-editor:not(.open) .toggle:before {
+  font-family: "Material Icons", sans-serif;
+  content: "dvr" !important;
+  font-size: 24px;
+}
+
 .djs-editor .toggle:before {
   content: attr(title);
 }

lib/Editor.js

@@ -5,15 +5,6 @@ import {
   query as domQuery
 } from 'min-dom';
 
-import {
-  append as svgAppend,
-  attr as svgAttr,
-  classes as svgClasses,
-  clone as svgClone,
-  create as svgCreate,
-  remove as svgRemove
-} from 'tiny-svg';
-
 import {
   assign,
   every,
@@ -26,8 +17,6 @@ import cssEscape from 'css.escape';
 
 import { getVisual } from 'diagram-js/lib/util/GraphicsUtil';
 
-
-
 /**
  * A code editor that reflects and lets you navigate the diagram.
  */
@@ -44,14 +33,6 @@ export default function Editor(
 
   this._state = {
     isOpen: undefined,
-    isDragging: false,
-    initialDragPosition: null,
-    offsetViewport: null,
-    cachedViewbox: null,
-    dragger: null,
-    svgClientRect: null,
-    parentClientRect: null,
-    zoomDelta: 0
   };
 
   this._init();
@@ -64,6 +45,20 @@ export default function Editor(
 
     self.toggle();
   });
+
+  eventBus.on('selection.changed', function(context) {
+    if (context.newSelection[0] && self._parent){
+      if (context.newSelection[0].type == "bpmn:ScriptTask"){
+        domClasses(self._parent).add('enabled');
+        document.getElementById("cam-script-val");
+      } else {
+        domClasses(self._parent).remove('enabled');
+        if (self.isOpen()){
+          self.close();
+        }
+      }
+    }
+  });
 }
 
 Editor.$inject = [
@@ -104,15 +99,19 @@ Editor.prototype._init = function() {
 
   parent.appendChild(ide);
 
-  CodeMirror.fromTextArea(ide, {
-    lineNumbers: true,
-    mode: "python",
-    theme: 'monokai'
-  });
+  // CodeMirror.fromTextArea(ide, {
+  //   lineNumbers: true,
+  //   mode: "python",
+  //   theme: 'monokai'
+  // });
+
+    // Add Comment
+
 
 };
 
-Editor.prototype._validate = function() {
+
+Editor.prototype.validate = function() {
   // ! This parts gonna be hard
 }