Merge pull request #1 from sartography/script-editor-style

Script editor style

assets/diagram-js-code-editor.css

@@ -16,6 +16,15 @@ border-radius: 2px;
 box-sizing: border-box;
 }
 
+.ace_editor {
+    position: absolute;
+    bottom: 0;
+    right: 8px;
+    display: block;
+    font-size: 14px;
+    font-weight: lighter;
+}
+
 /*Toggle*/
 .djs-editor:not(.enabled) {
 color: #CCC; /*Grayed Out*/
@@ -102,7 +111,8 @@ color: blue;
 /*Ide*/
 
 .djs-editor.open .ide {
-display: block;
+    width: 600px;
+    display: block;
 }
 
 .djs-editor .ide {
@@ -114,12 +124,22 @@ height: 280px;
 
 .dropdown-menu {
 height: auto;
-max-height: 200px;
     overflow-scrolling: auto;
     /*overflow-y: scroll;*/
     /*overflow-x: hidden;*/
 }
 
+.dropdown-menu.show {
+    /*
+     See - https://stackoverflow.com/questions/3550795/is-it-possible-to-have-a-popup-div-that-breaks-out-of-an-overflowscroll-or-ov
+     for limitations on having a popout element from a scroll menu.
+     in the future, this could be updated to calculate the position of the
+     popout element in JS.
+     */
+    /* overflow-x: hidden;
+    overflow-y: auto; */
+}
+
 .djs-editor:not(.open) .toggle {
 width: 46px;
 height: 46px;
@@ -160,7 +180,7 @@ background:rgba(200,100,100,0.5);
 z-index:3;
 }
 
-.dropdown-menu li{ position: relative; 	}
+.dropdown-menu li{ }
 .nav-item .submenu{
 display: none;
 position: absolute;
@@ -170,4 +190,4 @@ left:100%; top:-7px;
 right:100%; left:auto;
 }
 .dropdown-menu > li:hover { background-color: #f1f1f1 }
-.dropdown-menu > li:hover > .submenu{ display: block; }
+.dropdown-menu > li:hover > .submenu{ position: absolute; display: block; }

lib/Editor.js

@@ -2,12 +2,13 @@ import {attr as domAttr, classes as domClasses, event as domEvent} from 'min-dom
 
 import {assign} from 'min-dash';
 
-import * as ace from 'ace-builds/src-noconflict/ace';
+import * as acebuilds from 'ace-builds/src-noconflict/ace';
 // var Range = ace.require('ace/range').Range;
 // Enable dynamic loading of formatting modes
-ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');
+acebuilds.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');
 // https://stackoverflow.com/questions/16024721/how-can-i-highlight-multiple-lines-with-ace/16024998#16024998
-const Range = ace.require('ace/range').Range // get reference to ace/range
+const Range = ace.require('ace/range').Range
+
 /**
  * A code editor that allows you to add syntax highlighting and testing to bpmn properties panel
  */
@@ -221,7 +222,7 @@ Editor.prototype.open = function() {
   // ? There should be some way to pass the closed editor to ace
   this._ide = ace.edit('editor');
   this._ide.setAutoScrollEditorIntoView(true);
-  makeAceEditorResizable(this._ide);
+  // makeAceEditorResizable(this._ide);
 
   // this._ide.setTheme("ace/theme/monokai");
   this._ide.session.setMode('ace/mode/python');

package.json

@@ -14,7 +14,8 @@
     "distro": "run-s build test:build",
     "build": "rollup -c",
     "test:build": "",
-    "bump": "npm run build; npm publish"
+    "bump": "npm run build; npm publish",
+    "watch": "watch 'npm run build' ./lib"
   },
   "repository": {
     "type": "git",
@@ -60,9 +61,9 @@
     "webpack": "^4.41.0"
   },
   "dependencies": {
-    "@popperjs/core": "^2.9.2",
+    "@popperjs/core": "^2.10.2",
     "ace": "^1.3.0",
-    "ace-builds": "^1.4.12",
+    "ace-builds": "^1.4.13",
     "bootstrap": "^5.0.2",
     "codemirror": "^5.61.1",
     "css.escape": "^1.5.1",
@@ -71,6 +72,7 @@
     "min-dom": "^3.1.1",
     "popper.js": "^1.16.1",
     "tiny-svg": "^2.2.2",
-    "typescript-eslint": "0.0.1-alpha.0"
+    "typescript-eslint": "0.0.1-alpha.0",
+    "watch": "^1.0.2"
   }
 }

rollup.config.js

@@ -51,7 +51,8 @@ export default [
       'css.escape',
       'min-dash',
       'min-dom',
-      'tiny-svg'
+      'tiny-svg',
+      'ace-builds/src-noconflict/ace',
     ],
     plugins: pgl()
   }