mirror of
https://github.com/sartography/diagram-js-code-editor.git
synced 2025-01-11 16:14:23 +00:00
Still cant scroll
This commit is contained in:
NWalker4483
parent
1eee2033b7
commit
4aa0bdd133
@ -25,92 +25,178 @@
|
||||
.toolbar {
|
||||
display: none;
|
||||
width: 50%;
|
||||
height: 35px;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.djs-editor.open .toolbar {
|
||||
display: block;
|
||||
text-align: left;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f2f2f2;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
.toolbar > div {
|
||||
float: left;
|
||||
display: block;
|
||||
border-right: 1px solid #ccc;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
display: block;
|
||||
text-align: left;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.toolbar div {
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #069;
|
||||
}
|
||||
.toolbar {
|
||||
width: 100%;
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f2f2f2;
|
||||
border-bottom: 1px solid #ccc;
|
||||
border-top: 1px solid #ccc;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
color: #069;
|
||||
}
|
||||
|
||||
.toolbar div:hover {
|
||||
color: #c00;
|
||||
background-color: #fff;
|
||||
}
|
||||
/* Pure CSS DropDown Multilabil DropDown Menu */
|
||||
|
||||
.toolbar div.active {
|
||||
background-color: rgb(201, 205, 248);
|
||||
}
|
||||
nav {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.dropdown .trigger {
|
||||
border: none;
|
||||
padding: 0px;
|
||||
}
|
||||
nav ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
position: relative;
|
||||
}
|
||||
nav ul li {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.dropdown .dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
background-color: #f2f2f2 !important;
|
||||
z-index: 1;
|
||||
}
|
||||
nav ul a {
|
||||
text-decoration: none;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.dropdown:hover .dropdown-content {
|
||||
display: block;
|
||||
}
|
||||
nav>ul>li {
|
||||
float: left;
|
||||
margin-right: 1px;
|
||||
}
|
||||
|
||||
.dropdown-content .sub-trigger {
|
||||
text-decoration: none;
|
||||
padding: 0 0 0 15px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
display: block;
|
||||
}
|
||||
nav>ul>li>a {
|
||||
display: inline-block;
|
||||
padding: 4px 10px 0;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none;
|
||||
color: #000 !important;
|
||||
min-width: 250px;
|
||||
background-color: #f2f2f2 !important;
|
||||
}
|
||||
nav>ul>li.submenu>a {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.dropdown-content .sub-trigger{
|
||||
position: relative;
|
||||
}
|
||||
.dropdown-content .sub-trigger:hover .description {
|
||||
top: 0;
|
||||
left: 100%;
|
||||
nav>ul>li.submenu>.description {
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
display: block;
|
||||
}
|
||||
nav>ul>li:hover {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
nav li.submenu {
|
||||
padding-right: 22px;
|
||||
}
|
||||
|
||||
nav li.submenu:before {
|
||||
content: "☞";
|
||||
display: block;
|
||||
position: absolute;
|
||||
/* top:4px; */
|
||||
right: 0;
|
||||
color: #000;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
nav ul ul {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
/* top:29px; */
|
||||
width: 180px;
|
||||
filter: alpha(opacity="0");
|
||||
opacity: 0;
|
||||
background: #666;
|
||||
font-size: 12px;
|
||||
border: 1px solid #000;
|
||||
border-bottom: 0;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.description {
|
||||
display: none
|
||||
}
|
||||
|
||||
/* nav > ul > ul {
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
nav > ul > ul {
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
} */
|
||||
|
||||
nav ul ul li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
nav ul li.submenu:hover>ul>li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul li.submenu:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav ul li.submenu:hover>ul {
|
||||
filter: alpha(opacity="100");
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
nav ul li.submenu:hover>ul ul {
|
||||
filter: alpha(opacity="0");
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
nav ul li.submenu:hover>ul li.submenu:hover>ul {
|
||||
filter: alpha(opacity="100");
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
nav ul li.submenu:hover>ul li.submenu:hover>ul>li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul ul li {
|
||||
border-bottom: 1px solid #000;
|
||||
background: #565656;
|
||||
}
|
||||
|
||||
nav ul ul li:first-child {
|
||||
border-top: 1px solid #000;
|
||||
}
|
||||
|
||||
nav ul ul li a {
|
||||
padding: 4px 10px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav ul ul li:hover {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
nav ul ul li:hover>a {
|
||||
padding-left: 15px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
nav ul ul ul {
|
||||
left: 180px;
|
||||
top: 0;
|
||||
margin-top: -1px;
|
||||
}
|
||||
|
||||
/* */
|
||||
|
||||
#run_btn {
|
||||
font-family: "Material Icons", sans-serif;
|
||||
@ -120,7 +206,21 @@ position: relative;
|
||||
content: "build";
|
||||
}
|
||||
|
||||
#run_btn.passing {
|
||||
color: green;
|
||||
}
|
||||
|
||||
#run_btn.failing {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#run_btn.unknown {
|
||||
color: rgba(207, 168, 10, 0.842);
|
||||
}
|
||||
|
||||
.djs-editor .ide {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
display: none;
|
||||
width: 100%;
|
||||
min-width: 420px;
|
||||
@ -160,5 +260,4 @@ position: relative;
|
||||
right: 0;
|
||||
padding: 6px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
}
|
||||
199
lib/Editor.js
199
lib/Editor.js
@ -34,10 +34,9 @@ export default function Editor(
|
||||
|
||||
this._state = {
|
||||
isOpen: undefined,
|
||||
isEnabled: undefined,
|
||||
};
|
||||
|
||||
this._init();
|
||||
this.init();
|
||||
|
||||
this.toggle((config && config.open) || false);
|
||||
|
||||
@ -48,74 +47,61 @@ export default function Editor(
|
||||
self.toggle();
|
||||
});
|
||||
|
||||
domEvent.bind(this._run_btn, 'click', function (event) {
|
||||
domEvent.bind(this.run_btn, 'click', function (event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
|
||||
self.validate();
|
||||
});
|
||||
|
||||
domEvent.bind(this._parent, 'wheel', function(event) {
|
||||
domEvent.bind(this._parent, 'wheel', function (event) {
|
||||
// stop propagation and handle scroll differently
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
|
||||
// Check that the currently selected bpmn task is a script task and enable or disable coding window appropriately
|
||||
eventBus.on('selection.changed', function (context) {
|
||||
if (self.isOpen()) {
|
||||
self.close();
|
||||
}
|
||||
if (context.newSelection && self._parent) { // ? Try and replace self._parent with self.isOpen() cause idk why it works yet
|
||||
domClasses(self._parent).remove('enabled');
|
||||
if (context.newSelection.length > 0) {
|
||||
if (context.newSelection[0].type == "bpmn:ScriptTask") {
|
||||
domClasses(self._parent).add('enabled');
|
||||
self._state.isEnabled = true;
|
||||
return;
|
||||
}
|
||||
}
|
||||
domClasses(self._parent).remove('enabled');
|
||||
self._state.isEnabled = false;
|
||||
});
|
||||
|
||||
eventBus.on('editor.validate.response', function (response) {
|
||||
if(response.type == "error"){
|
||||
} else {
|
||||
if (response.passing){
|
||||
// Update Status
|
||||
}
|
||||
}
|
||||
self._eventBus.fire("editor.toolbar.update");
|
||||
});
|
||||
|
||||
eventBus.on('editor.validate.response', function (response) {
|
||||
if (response.passing) {
|
||||
domClasses(self.run_btn).add('passing');
|
||||
domClasses(self.run_btn).remove('failing');
|
||||
domClasses(self.run_btn).remove('unknown');
|
||||
} else {
|
||||
domClasses(self.run_btn).add('failing');
|
||||
domClasses(self.run_btn).remove('passing');
|
||||
domClasses(self.run_btn).remove('unknown');
|
||||
}
|
||||
});
|
||||
|
||||
// Return a list of objects containing both the script name and description in plain text
|
||||
eventBus.on('editor.scripts.response', function (response) {
|
||||
if(response.type == "error"){
|
||||
self.scripts = [{name:"No Scripts Available", description:"Contact your system administrator if this is abnormal"}];
|
||||
if (response.type == "error") {
|
||||
self.scripts = [{ name: "No Scripts Available", description: "Contact your system administrator if this is abnormal" }];
|
||||
} else {
|
||||
self.scripts = response.scripts;
|
||||
}
|
||||
self._eventBus.fire("editor.toolbar.update");
|
||||
});
|
||||
|
||||
eventBus.on('editor.objects.response', function (response) {
|
||||
if(response.type == "error"){
|
||||
self.objects = [{name:"No Data Objects Available", description:"Contact your system administrator if this is abnormal"}];
|
||||
} else {
|
||||
self.objects = response.objects;
|
||||
}
|
||||
self._eventBus.fire("editor.toolbar.update");
|
||||
});
|
||||
|
||||
eventBus.on('editor.toolbar.update', function () {
|
||||
self._scripts_menu.innerHTML = "";
|
||||
self.scripts_menu.innerHTML = "";
|
||||
self.scripts.forEach(element =>
|
||||
self._scripts_menu.innerHTML += `<div class="sub-trigger">${element.name}<div class="description">${element.description}</div></div>`);
|
||||
|
||||
|
||||
self._objects_menu.innerHTML = "";
|
||||
self.objects.forEach(element => {
|
||||
self._objects_menu.innerHTML += `<div class="sub-trigger">${element.name}<div class="data-type">${element.type}</div>`;
|
||||
// Add hierarchical stuff
|
||||
self._objects_menu.innerHTML += "</div>";});
|
||||
self.scripts_menu.innerHTML += `<li class="submenu"><a>${element.name}</a><ul><li>${element.description}</ul></li></li>`); //<div class="description">${element.description}</div>
|
||||
});
|
||||
//
|
||||
eventBus.on('editor.objects.response', function (response) {
|
||||
self.objects = response.objects;
|
||||
self.objects_menu.innerHTML = recurseObject(self.objects);
|
||||
});
|
||||
}
|
||||
|
||||
@ -127,89 +113,52 @@ Editor.$inject = [
|
||||
'elementRegistry'
|
||||
];
|
||||
|
||||
Editor.prototype._init = function () {
|
||||
Editor.prototype.init = function () {
|
||||
var canvas = this._canvas,
|
||||
container = canvas.getContainer();
|
||||
|
||||
var template = `
|
||||
<div class="djs-editor">
|
||||
<div class="toggle" id="toggle"></div>
|
||||
<div class="toolbar" id="toolbar">
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a id="run_btn"></a></li>
|
||||
<li class="submenu"><a>Scripts</a>
|
||||
<ul id="scripts_list">
|
||||
</ul>
|
||||
</li>
|
||||
<li class="submenu"><a>Data</a>
|
||||
<ul id="objects_list">
|
||||
<li><a>Scripts</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class="ide" id="editor"></div>
|
||||
</div>`
|
||||
let dom = new DOMParser()
|
||||
.parseFromString(template, 'text/html');
|
||||
|
||||
// create parent div
|
||||
var parent = this._parent = document.createElement('div');
|
||||
var parent = this._parent = dom.body.firstElementChild;
|
||||
|
||||
// prevent drag propagation
|
||||
domEvent.bind(parent, 'mousedown', function (event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
this._toggle = dom.getElementById('toggle');
|
||||
|
||||
domClasses(parent).add('djs-editor');
|
||||
this.run_btn = dom.getElementById('run_btn');
|
||||
this.scripts_menu = dom.getElementById('scripts_list');
|
||||
this.scripts = [];
|
||||
this.objects_menu = dom.getElementById('objects_list');
|
||||
this.objects = {};
|
||||
|
||||
container.appendChild(parent);
|
||||
|
||||
// create toggle
|
||||
var toggle = this._toggle = document.createElement('div');
|
||||
|
||||
domClasses(toggle).add('toggle');
|
||||
|
||||
parent.appendChild(toggle);
|
||||
|
||||
|
||||
var toolbar = this._toolbar = document.createElement('div');
|
||||
domClasses(toolbar).add('toolbar');
|
||||
|
||||
var run_btn = this._run_btn = document.createElement('div');
|
||||
run_btn.setAttribute("id", "run_btn");
|
||||
|
||||
// ? I'm pretty sure I can just create a template string that will hold all these definitions but I'll have to get into that
|
||||
|
||||
this.scripts = [];
|
||||
|
||||
var scripts_menu_container = document.createElement('div');
|
||||
domClasses(scripts_menu_container).add('dropdown');
|
||||
|
||||
var scripts_menu_trigger = document.createElement('div');
|
||||
scripts_menu_trigger.innerHTML = "Scripts";
|
||||
domClasses(scripts_menu_trigger).add('trigger');
|
||||
|
||||
scripts_menu_container.appendChild(scripts_menu_trigger);
|
||||
|
||||
var scripts_menu = this._scripts_menu = document.createElement('div');
|
||||
domClasses(scripts_menu).add('dropdown-content');
|
||||
self._scripts = [];
|
||||
|
||||
scripts_menu_container.appendChild(scripts_menu);
|
||||
//--------------------------------------------------------//
|
||||
this.objects = [];
|
||||
|
||||
var objects_menu_container = document.createElement('div');
|
||||
domClasses(objects_menu_container).add('dropdown');
|
||||
|
||||
var objects_menu_trigger = document.createElement('div');
|
||||
objects_menu_trigger.innerHTML = "Data";
|
||||
domClasses(objects_menu_trigger).add('trigger');
|
||||
|
||||
objects_menu_container.appendChild(objects_menu_trigger);
|
||||
|
||||
var objects_menu = this._objects_menu = document.createElement('div');
|
||||
domClasses(objects_menu).add('dropdown-content');
|
||||
self._objects = [];
|
||||
|
||||
objects_menu_container.appendChild(objects_menu);
|
||||
|
||||
toolbar.appendChild(run_btn);
|
||||
toolbar.appendChild(scripts_menu_container);
|
||||
toolbar.appendChild(objects_menu_container);
|
||||
|
||||
// create ide textarea
|
||||
var ide_window = document.createElement('div');
|
||||
ide_window.setAttribute("id", "editor");
|
||||
domClasses(ide_window).add('ide');
|
||||
|
||||
parent.appendChild(toolbar);
|
||||
parent.appendChild(ide_window);
|
||||
|
||||
this._eventBus.fire('editor.toolbar.update');
|
||||
};
|
||||
|
||||
Editor.prototype.validate = function () {
|
||||
this._eventBus.fire('editor.validate.request', { code: this._codestore.value });
|
||||
this._eventBus.fire('editor.validate.request', { code: document.getElementById("cam-script-val").value, task_name: document.getElementById('camunda-id').value });
|
||||
}
|
||||
|
||||
Editor.prototype.open = function () {
|
||||
@ -226,16 +175,24 @@ Editor.prototype.open = function () {
|
||||
this._ide.session.setMode("ace/mode/python");
|
||||
|
||||
// grab script properties window
|
||||
var codestore = this._codestore = document.getElementById("cam-script-val");
|
||||
var codestore = document.getElementById("cam-script-val");
|
||||
// Sync code window and a properties tab
|
||||
this._ide.session.setValue(codestore.value);
|
||||
|
||||
codestore.addEventListener("input", (event) => {
|
||||
this._ide.session.setValue(codestore.value);
|
||||
|
||||
// TODO: Consolidate this bit
|
||||
domClasses(this.run_btn).remove('passing');
|
||||
domClasses(this.run_btn).remove('failing');
|
||||
domClasses(this.run_btn).add('unknown');
|
||||
});
|
||||
|
||||
this._ide.addEventListener("input", (event) => {
|
||||
codestore.value = this._ide.getValue();
|
||||
|
||||
domClasses(this.run_btn).remove('passing');
|
||||
domClasses(this.run_btn).remove('failing');
|
||||
domClasses(this.run_btn).add('unknown');
|
||||
triggerEvent(codestore, "change");
|
||||
});
|
||||
|
||||
@ -310,4 +267,16 @@ var triggerEvent = function (element, eventType) {
|
||||
}
|
||||
|
||||
return element.dispatchEvent(evt);
|
||||
};
|
||||
};
|
||||
|
||||
function recurseObject(data) {
|
||||
var html = "";
|
||||
for (const [key, value] of Object.entries(data)) {
|
||||
if (typeof value == 'object') {
|
||||
html += `<li class="submenu"><a>${key}</a><ul>` + recurseObject(value) + `</ul><li>`;
|
||||
} else {
|
||||
html += `<li><a>${key}</a><div class="data-type">${typeof value}</div></li>`;
|
||||
}
|
||||
}
|
||||
return html
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user