sartography
/
diagram-js-code-editor
mirror of https://github.com/sartography/diagram-js-code-editor.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Code Editor syncs to property window

This commit is contained in:
NWalker4483 2021-06-03 04:46:06 -04:00
parent 2cff0e0911
commit 97c064425c
3 changed files with 618 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
lib/Editor.js
View File

@ -12,10 +12,11 @@ import {
isObject
} from 'min-dash';
import CodeMirror from 'codemirror';
import cssEscape from 'css.escape';
import * as ace from 'ace-builds/src-noconflict/ace';
import { getVisual } from 'diagram-js/lib/util/GraphicsUtil';
// Enable dynamic loading of formatting modes
ace.config.set('basePath', 'https://unpkg.com/ace-builds@1.4.12/src-noconflict');
/**
* A code editor that reflects and lets you navigate the diagram.
@ -90,23 +91,14 @@ Editor.prototype._init = function () {
parent.appendChild(toggle);
// create ide textarea
var ide = this._ide = document.createElement('textarea');
var ide_window = document.createElement('div');
ide.name = "code";
ide.maxLength = "5000";
ide.cols = "40";
ide.rows = "80";
ide_window.setAttribute("id", "editor");
domClasses(ide).add('ide');
parent.appendChild(ide);
// CodeMirror.fromTextArea(ide, {
// lineNumbers: true,
// mode: "python",
// theme: 'monokai'
// });
domClasses(ide_window).add('ide');
parent.appendChild(ide_window);
};
@ -123,16 +115,20 @@ Editor.prototype.open = function () {
domAttr(this._toggle, 'title', translate('Close Editor'));
if (this._state.isEnabled) {
this._ide = ace.edit("editor");
//this._ide.setTheme("ace/theme/monokai");
this._ide.session.setMode("ace/mode/python");
// 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;
this._ide.session.setValue(codestore.value);
codestore.addEventListener("input", (event) => {
this._ide.value = codestore.value;
this._ide.session.setValue(codestore.value);
});
this._ide.addEventListener("input", (event) => {
codestore.value = this._ide.value;
codestore.value = this._ide.getValue();
});
}

682
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -31,6 +31,7 @@
},
"homepage": "https://github.com/NWalker4483/diagram-js-code-editor#readme",
"devDependencies": {
"@types/ace": "0.0.46",
"chai": "^4.2.0",
"diagram-js": "^5.0.2",
"eslint": "^6.5.0",
@ -56,6 +57,8 @@
"webpack": "^4.41.0"
},
"dependencies": {
"ace": "^1.3.0",
"ace-builds": "^1.4.12",
"codemirror": "^5.61.1",
"css.escape": "^1.5.1",
"min-dash": "^3.5.2",