Fix missing scrollbar in xml viewer (#91)

* Add linter script and fix errors * Apply prettier * Add workflow executing linters * Add working directory for npm ci * Remove unknown working-directory from linting action * Update linting workflow * Fix linting command * Fix NOTICE file * Fix licence years * Fix name in Github workflow * Enable unused variable linting rule * Run prettier * Enable unnecessary espace rule * Add .eslintignore * Adapt path to public folder * Update ignore rules for linters * Lint changes after merging master * Start fixing Readme * Lint changes from merge * Lint master merge * Lint changes after merge with origin/master * Replace renderer with correct file * Lint changes * Lint changes * Run linter * Fix lint error * Add badges to readme * add scrollbar * New diagram dialog (#89) * dialog for new diagram, isExecutable to true Co-Authored-By: LaviniaStiliadou <livia_16@live.de> * fix lint * adjust label for canceling dialog --------- Co-authored-by: SharonNaemi <naemi_17@live.de> Co-authored-by: mbeisel <beiselmn@gmail.com> * Fix plugin handling (#87) * fix plugin handling * fix lint * fix minLines and maxLines * remove useEffect as it overwrites the transformed workflow after opening it * Fix transformation bugs * Fix linting errors * Temporarily add OpenTOSCAUtils to QuantME plugin * Fix codestyle * fix open modal * add scrollbar * fix minLines and maxLines * Remove comment --------- Co-authored-by: Benjamin Weder <benjamin.weder@iaas.uni-stuttgart.de> Co-authored-by: SharonNaemi <naemi_17@live.de> Co-authored-by: mbeisel <beiselmn@gmail.com>
PlanQK · Oct 24, 2023 · 803fbc9 · 803fbc9
1 parent 77716bb
commit 803fbc9
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 10 deletions.
diff --git a/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js b/components/bpmn-q/modeler-component/QuantumWorkflowModeler.js
@@ -30,7 +30,7 @@ import {
 import * as editorConfig from "./editor/config/EditorConfigManager";
 import { initEditorEventHandler } from "./editor/events/EditorEventHandler";
 import $ from "jquery";
-import { edit } from "ace-builds";
+import ace from "ace-builds";
 
 /**
  * The Quantum Workflow modeler HTML web component which contains the bpmn-js modeler to model BPMN diagrams, an editor
@@ -200,7 +200,13 @@ export class QuantumWorkflowModeler extends HTMLElement {
 
     let editor = document.getElementById("editor");
     let dragging = false;
-    let aceEditor = edit(editor);
+    let aceEditor = ace.edit(editor);
+    aceEditor.setOptions({
+      scrollPastEnd: false,
+      vScrollBarAlwaysVisible: true,
+      minLines: 10,
+      maxLines: 10,
+    });
 
     $("#editor_dragbar").mousedown(function (e) {
       e.preventDefault();
@@ -231,7 +237,12 @@ export class QuantumWorkflowModeler extends HTMLElement {
           editor_wrap.css("height", newHeight + "px");
           editorElement.css("height", editorHeight + "px");
           dragbar.css("top", newTop - dragbar.height() + "px");
-          aceEditor.resize();
+          aceEditor.setOptions({
+            minLines: editorHeight / 28 + 7,
+            maxLines: editorHeight / 28 + 7,
+          });
+
+          aceEditor.resize(true);
         }
       });
     });

diff --git a/components/bpmn-q/modeler-component/editor/resources/styling/editor-ui.css b/components/bpmn-q/modeler-component/editor/resources/styling/editor-ui.css
@@ -211,6 +211,17 @@
   background: url("../icons/save-outline-icon.png") no-repeat center center;
 }
 
+#editor {
+  position: absolute;
+  width: 100%;
+  height: 20px;
+  overflow-y: auto;
+}
+
+.ace_print-margin {
+  display: none;
+}
+
 .qwm-icon-upload:before {
   content: "";
   width: 15px;
@@ -222,3 +233,19 @@
   display: inline-block;
   float: left;
 }
+
+.qwm-icon-xml-viewer:before {
+  content: "";
+  width: 20px;
+  height: 18px;
+  margin-top: 0px;
+  background-size: contain;
+  background-image: url("../icons/xml-viewer-icon.png");
+  background-repeat: no-repeat;
+  display: inline-block;
+  float: left;
+}
+
+.ace_scrollbar.ace_scrollbar-h {
+  display: none;
+}
diff --git a/components/bpmn-q/modeler-component/editor/ui/XMLViewerButton.js b/components/bpmn-q/modeler-component/editor/ui/XMLViewerButton.js
@@ -11,6 +11,12 @@ import { loadDiagram } from "../util/IoUtilities";
  */
 export default function XMLViewerButton() {
   const [enabledXMLView, setEnabledXMLView] = useState(false);
+
+  function update(aceEditor) {
+    let xml = aceEditor.getSession().getValue();
+    loadDiagram(xml, getModeler());
+  }
+
   function enableXMLViewer(enabledXMLView) {
     let modelerContainer = document.getElementById("modeler-container");
     let editor = document.getElementById("editor");
@@ -20,7 +26,15 @@ export default function XMLViewerButton() {
     if (!enabledXMLView) {
       modelerContainer.style.height = "93vh";
       editor.style.display = "block";
+      const minLines = aceEditor.getOption("minLines");
+      const maxLines = aceEditor.getOption("maxLines");
       editor.style.height = "93vh";
+      aceEditor.setOptions({
+        vScrollBarAlwaysVisible: true,
+        minLines: minLines,
+        maxLines: maxLines,
+      });
+      aceEditor.resize(true);
       panel.style.display = "none";
       editorWrap.style.display = "block";
 
@@ -37,14 +51,8 @@ export default function XMLViewerButton() {
       editorWrap.style.display = "none";
 
       aceEditor.getSession().on("change", function () {
-        update();
+        update(aceEditor);
       });
-
-      // eslint-disable-next-line no-inner-declarations
-      function update() {
-        let xml = aceEditor.getSession().getValue();
-        loadDiagram(xml, getModeler());
-      }
     }
 
     setEnabledXMLView(!enabledXMLView);