ontotext-yasgui-web-component 1.3.15 → 1.3.17

package/dist/cjs/confirmation-dialog_9.cjs.entry.js

@@ -1143,9 +1143,12 @@ class OntotextYasgui {
    * @param query The query value to be set.
    */
   setQuery(query) {
-    const cursor = this.yasgui.getTab().getYasqe().getDoc().getCursor();
-    this.yasgui.getTab().getYasqe().setValue(query);
-    this.yasgui.getTab().getYasqe().getDoc().setCursor(cursor);
+    const yasqe = this.yasgui.getTab().getYasqe();
+    const cursor = yasqe.getDoc().getCursor();
+    const lastLine = yasqe.getDoc().lastLine();
+    const lastLineLength = yasqe.getDoc().getLine(lastLine).length;
+    yasqe.getDoc().replaceRange(query, { line: 0, ch: 0 }, { line: lastLine, ch: lastLineLength });
+    yasqe.getDoc().setCursor(cursor);
   }
   query() {
     return this.yasgui.getTab().getYasqe().query();
@@ -1240,6 +1243,20 @@ class OntotextYasgui {
     }
     return tabInstance;
   }
+  /**
+   * Searches the local store for the given tab ID and returns the height for the yasqe editor. If no height can be found,
+   * the default 300 is returned.
+   * @param tabId
+   */
+  getEditorHeight(tabId) {
+    const heightString = this.getInstance().getTab(tabId).persistentJson.yasqe.editorHeight;
+    if (heightString) {
+      return parseInt(heightString.replace("px", ""), 10);
+    }
+    else {
+      return 300;
+    }
+  }
   destroy() {
     if (this.yasgui) {
       this.yasgui.destroy();
@@ -1348,8 +1365,9 @@ class VisualisationUtils {
    * actually rendered before trying out to find it.
    * @param mode
    * @param orientation
+   * @param editorHeight if the mode is YASGUI, this height will be set for the yasqe.
    */
-  static setYasqeFullHeight(mode, orientation) {
+  static setYasqeFullHeight(mode, orientation, editorHeight) {
     const selectActiveEditor = () => document.querySelector('.yasgui .tabPanel.active .CodeMirror');
     if (mode === RenderingMode.YASQE || orientation === Orientation.HORIZONTAL) {
       setTimeout(() => {
@@ -1368,7 +1386,7 @@ class VisualisationUtils {
       setTimeout(() => {
         const codemirrorEl = selectActiveEditor();
         if (codemirrorEl) {
-          codemirrorEl.style.removeProperty('height');
+          codemirrorEl.style.setProperty('height', editorHeight + 'px');
         }
       });
     }
@@ -1378,8 +1396,9 @@ class VisualisationUtils {
    * @param hostElement
    * @param newMode
    * @param isVerticalOrientation
+   * @param editorHeight
    */
-  static changeRenderMode(hostElement, newMode, isVerticalOrientation) {
+  static changeRenderMode(hostElement, newMode, isVerticalOrientation, editorHeight) {
     VisualisationUtils.unselectAllToolbarButtons(hostElement);
     const button = HtmlElementsUtil.getRenderModeButton(hostElement, newMode);
     /** The button can be undefined if the render buttons are hidden and the {@see OntotextYasguiWebComponent#changeRenderMode} method is called.*/
@@ -1389,7 +1408,7 @@ class VisualisationUtils {
     const modes = Object.values(RenderingMode);
     hostElement.classList.remove(...modes);
     hostElement.classList.add(newMode);
-    this.setYasqeFullHeight(newMode, this.resolveOrientation(isVerticalOrientation));
+    this.setYasqeFullHeight(newMode, this.resolveOrientation(isVerticalOrientation), editorHeight);
   }
   static toggleLayoutOrientationButton(hostElement, newOrientation) {
     const buttonOrientation = HtmlElementsUtil.getOrientationButton(hostElement);
@@ -1400,12 +1419,12 @@ class VisualisationUtils {
       buttonOrientation.classList.remove('icon-rotate-quarter');
     }
   }
-  static toggleLayoutOrientation(hostElement, isVerticalOrientation, mode) {
+  static toggleLayoutOrientation(hostElement, isVerticalOrientation, mode, editorHeight) {
     const newOrientation = this.resolveOrientation(isVerticalOrientation);
     const orientations = Object.values(Orientation);
     hostElement.classList.remove(...orientations);
     hostElement.classList.add(newOrientation);
-    this.setYasqeFullHeight(mode, newOrientation);
+    this.setYasqeFullHeight(mode, newOrientation, editorHeight);
     VisualisationUtils.toggleLayoutOrientationButton(hostElement, newOrientation);
   }
   static resolveOrientation(isVerticalOrientation) {
@@ -4469,11 +4488,12 @@ const OntotextYasguiWebComponent = class {
    * Changes rendering mode of component.
    *
    * @param newRenderMode - then new render mode of component.
+   * @param editorHeight - the height for yasqe.
    */
-  changeRenderMode(newRenderMode) {
+  changeRenderMode(newRenderMode, editorHeight) {
     return this.getOntotextYasgui()
       .then(() => {
-      VisualisationUtils.changeRenderMode(this.hostElement, newRenderMode, this.getOrientationMode() === Orientation.VERTICAL);
+      VisualisationUtils.changeRenderMode(this.hostElement, newRenderMode, this.isVerticalOrientation, editorHeight);
     });
   }
   /**
@@ -4643,7 +4663,8 @@ const OntotextYasguiWebComponent = class {
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
       ontotextYasgui.refresh();
-      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation));
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     });
   }
   onBeforeunloadHandler() {
@@ -4802,13 +4823,14 @@ const OntotextYasguiWebComponent = class {
     this.output.emit(toOutputEvent(event));
   }
   onQuery(event) {
-    this.changeRenderMode(this.defaultViewMode);
-    this.defaultViewMode = RenderingMode.YASGUI;
     this.output.emit(toOutputEvent(event));
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
       ontotextYasgui.leaveFullScreen();
-      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation));
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      this.changeRenderMode(this.defaultViewMode, editorHeight);
+      this.defaultViewMode = RenderingMode.YASGUI;
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     });
   }
   onInternalQueryExecuted(event) {
@@ -4831,9 +4853,10 @@ const OntotextYasguiWebComponent = class {
   }
   changeOrientation() {
     this.isVerticalOrientation = !this.isVerticalOrientation;
-    VisualisationUtils.toggleLayoutOrientation(this.hostElement, this.isVerticalOrientation, this.renderingMode);
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      VisualisationUtils.toggleLayoutOrientation(this.hostElement, this.isVerticalOrientation, this.renderingMode, editorHeight);
       ontotextYasgui.refresh();
     });
   }
@@ -4944,7 +4967,8 @@ const OntotextYasguiWebComponent = class {
   }
   changeRenderingMode(mode) {
     this.renderingMode = mode;
-    VisualisationUtils.changeRenderMode(this.hostElement, mode, this.isVerticalOrientation);
+    const editorHeight = this.ontotextYasgui.getEditorHeight(this.ontotextYasgui.getTabId());
+    VisualisationUtils.changeRenderMode(this.hostElement, mode, this.isVerticalOrientation, editorHeight);
   }
   isOntotextYasguiInitialiazed() {
     return !!this.ontotextYasgui && !!this.ontotextYasgui.getInstance();
@@ -4967,7 +4991,9 @@ const OntotextYasguiWebComponent = class {
       VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation);
     });
     this.ontotextYasgui.getInstance().on('tabSelect', (_yasgui, _tab) => {
-      VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation);
+      const editorHeight = this.ontotextYasgui.getEditorHeight(_tab);
+      VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation, editorHeight);
+      this.updateYasrTopMargin();
     });
     this.ontotextYasgui.getInstance().on('autocompletionShown', (_instance, _tab, _widget) => {
       hint.parentNode && hint.parentNode.removeChild(hint);
@@ -5051,6 +5077,8 @@ const OntotextYasguiWebComponent = class {
       this.ontotextYasgui = this.yasguiBuilder.build(this.hostElement, yasguiConfiguration);
       this.registerEventHandlers();
       this.afterInit();
+      const editorHeight = this.ontotextYasgui.getEditorHeight(this.ontotextYasgui.getTabId());
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     }
   }
   componentWillLoad() {

package/dist/collection/components/ontotext-yasgui-web-component/ontotext-yasgui-web-component.js

@@ -1,5 +1,5 @@
 import { h, Host } from '@stencil/core';
-import { defaultOntotextYasguiConfig, Orientation, RenderingMode } from '../../models/yasgui-configuration';
+import { defaultOntotextYasguiConfig, RenderingMode } from '../../models/yasgui-configuration';
 import { YASGUI_MIN_SCRIPT } from '../yasgui/yasgui-script';
 import { YasguiBuilder } from '../../services/yasgui/yasgui-builder';
 import { VisualisationUtils } from '../../services/utils/visualisation-utils';
@@ -98,11 +98,12 @@ export class OntotextYasguiWebComponent {
    * Changes rendering mode of component.
    *
    * @param newRenderMode - then new render mode of component.
+   * @param editorHeight - the height for yasqe.
    */
-  changeRenderMode(newRenderMode) {
+  changeRenderMode(newRenderMode, editorHeight) {
     return this.getOntotextYasgui()
       .then(() => {
-      VisualisationUtils.changeRenderMode(this.hostElement, newRenderMode, this.getOrientationMode() === Orientation.VERTICAL);
+      VisualisationUtils.changeRenderMode(this.hostElement, newRenderMode, this.isVerticalOrientation, editorHeight);
     });
   }
   /**
@@ -272,7 +273,8 @@ export class OntotextYasguiWebComponent {
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
       ontotextYasgui.refresh();
-      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation));
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     });
   }
   onBeforeunloadHandler() {
@@ -431,13 +433,14 @@ export class OntotextYasguiWebComponent {
     this.output.emit(toOutputEvent(event));
   }
   onQuery(event) {
-    this.changeRenderMode(this.defaultViewMode);
-    this.defaultViewMode = RenderingMode.YASGUI;
     this.output.emit(toOutputEvent(event));
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
       ontotextYasgui.leaveFullScreen();
-      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation));
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      this.changeRenderMode(this.defaultViewMode, editorHeight);
+      this.defaultViewMode = RenderingMode.YASGUI;
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     });
   }
   onInternalQueryExecuted(event) {
@@ -460,9 +463,10 @@ export class OntotextYasguiWebComponent {
   }
   changeOrientation() {
     this.isVerticalOrientation = !this.isVerticalOrientation;
-    VisualisationUtils.toggleLayoutOrientation(this.hostElement, this.isVerticalOrientation, this.renderingMode);
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      VisualisationUtils.toggleLayoutOrientation(this.hostElement, this.isVerticalOrientation, this.renderingMode, editorHeight);
       ontotextYasgui.refresh();
     });
   }
@@ -573,7 +577,8 @@ export class OntotextYasguiWebComponent {
   }
   changeRenderingMode(mode) {
     this.renderingMode = mode;
-    VisualisationUtils.changeRenderMode(this.hostElement, mode, this.isVerticalOrientation);
+    const editorHeight = this.ontotextYasgui.getEditorHeight(this.ontotextYasgui.getTabId());
+    VisualisationUtils.changeRenderMode(this.hostElement, mode, this.isVerticalOrientation, editorHeight);
   }
   isOntotextYasguiInitialiazed() {
     return !!this.ontotextYasgui && !!this.ontotextYasgui.getInstance();
@@ -596,7 +601,9 @@ export class OntotextYasguiWebComponent {
       VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation);
     });
     this.ontotextYasgui.getInstance().on('tabSelect', (_yasgui, _tab) => {
-      VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation);
+      const editorHeight = this.ontotextYasgui.getEditorHeight(_tab);
+      VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation, editorHeight);
+      this.updateYasrTopMargin();
     });
     this.ontotextYasgui.getInstance().on('autocompletionShown', (_instance, _tab, _widget) => {
       hint.parentNode && hint.parentNode.removeChild(hint);
@@ -680,6 +687,8 @@ export class OntotextYasguiWebComponent {
       this.ontotextYasgui = this.yasguiBuilder.build(this.hostElement, yasguiConfiguration);
       this.registerEventHandlers();
       this.afterInit();
+      const editorHeight = this.ontotextYasgui.getEditorHeight(this.ontotextYasgui.getTabId());
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     }
   }
   componentWillLoad() {
@@ -983,13 +992,19 @@ export class OntotextYasguiWebComponent {
     return {
       "changeRenderMode": {
         "complexType": {
-          "signature": "(newRenderMode: RenderingMode) => Promise<void>",
+          "signature": "(newRenderMode: RenderingMode, editorHeight?: number) => Promise<void>",
           "parameters": [{
               "tags": [{
                   "name": "param",
                   "text": "newRenderMode - then new render mode of component."
                 }],
               "text": "- then new render mode of component."
+            }, {
+              "tags": [{
+                  "name": "param",
+                  "text": "editorHeight - the height for yasqe."
+                }],
+              "text": "- the height for yasqe."
             }],
           "references": {
             "Promise": {
@@ -1007,6 +1022,9 @@ export class OntotextYasguiWebComponent {
           "tags": [{
               "name": "param",
               "text": "newRenderMode - then new render mode of component."
+            }, {
+              "name": "param",
+              "text": "editorHeight - the height for yasqe."
             }]
         }
       },

package/dist/collection/models/ontotext-yasgui.js

@@ -36,9 +36,12 @@ export class OntotextYasgui {
    * @param query The query value to be set.
    */
   setQuery(query) {
-    const cursor = this.yasgui.getTab().getYasqe().getDoc().getCursor();
-    this.yasgui.getTab().getYasqe().setValue(query);
-    this.yasgui.getTab().getYasqe().getDoc().setCursor(cursor);
+    const yasqe = this.yasgui.getTab().getYasqe();
+    const cursor = yasqe.getDoc().getCursor();
+    const lastLine = yasqe.getDoc().lastLine();
+    const lastLineLength = yasqe.getDoc().getLine(lastLine).length;
+    yasqe.getDoc().replaceRange(query, { line: 0, ch: 0 }, { line: lastLine, ch: lastLineLength });
+    yasqe.getDoc().setCursor(cursor);
   }
   query() {
     return this.yasgui.getTab().getYasqe().query();
@@ -133,6 +136,20 @@ export class OntotextYasgui {
     }
     return tabInstance;
   }
+  /**
+   * Searches the local store for the given tab ID and returns the height for the yasqe editor. If no height can be found,
+   * the default 300 is returned.
+   * @param tabId
+   */
+  getEditorHeight(tabId) {
+    const heightString = this.getInstance().getTab(tabId).persistentJson.yasqe.editorHeight;
+    if (heightString) {
+      return parseInt(heightString.replace("px", ""), 10);
+    }
+    else {
+      return 300;
+    }
+  }
   destroy() {
     if (this.yasgui) {
       this.yasgui.destroy();

package/dist/collection/services/utils/visualisation-utils.js

@@ -13,8 +13,9 @@ export class VisualisationUtils {
    * actually rendered before trying out to find it.
    * @param mode
    * @param orientation
+   * @param editorHeight if the mode is YASGUI, this height will be set for the yasqe.
    */
-  static setYasqeFullHeight(mode, orientation) {
+  static setYasqeFullHeight(mode, orientation, editorHeight) {
     const selectActiveEditor = () => document.querySelector('.yasgui .tabPanel.active .CodeMirror');
     if (mode === RenderingMode.YASQE || orientation === Orientation.HORIZONTAL) {
       setTimeout(() => {
@@ -33,7 +34,7 @@ export class VisualisationUtils {
       setTimeout(() => {
         const codemirrorEl = selectActiveEditor();
         if (codemirrorEl) {
-          codemirrorEl.style.removeProperty('height');
+          codemirrorEl.style.setProperty('height', editorHeight + 'px');
         }
       });
     }
@@ -43,8 +44,9 @@ export class VisualisationUtils {
    * @param hostElement
    * @param newMode
    * @param isVerticalOrientation
+   * @param editorHeight
    */
-  static changeRenderMode(hostElement, newMode, isVerticalOrientation) {
+  static changeRenderMode(hostElement, newMode, isVerticalOrientation, editorHeight) {
     VisualisationUtils.unselectAllToolbarButtons(hostElement);
     const button = HtmlElementsUtil.getRenderModeButton(hostElement, newMode);
     /** The button can be undefined if the render buttons are hidden and the {@see OntotextYasguiWebComponent#changeRenderMode} method is called.*/
@@ -54,7 +56,7 @@ export class VisualisationUtils {
     const modes = Object.values(RenderingMode);
     hostElement.classList.remove(...modes);
     hostElement.classList.add(newMode);
-    this.setYasqeFullHeight(newMode, this.resolveOrientation(isVerticalOrientation));
+    this.setYasqeFullHeight(newMode, this.resolveOrientation(isVerticalOrientation), editorHeight);
   }
   static toggleLayoutOrientationButton(hostElement, newOrientation) {
     const buttonOrientation = HtmlElementsUtil.getOrientationButton(hostElement);
@@ -65,12 +67,12 @@ export class VisualisationUtils {
       buttonOrientation.classList.remove('icon-rotate-quarter');
     }
   }
-  static toggleLayoutOrientation(hostElement, isVerticalOrientation, mode) {
+  static toggleLayoutOrientation(hostElement, isVerticalOrientation, mode, editorHeight) {
     const newOrientation = this.resolveOrientation(isVerticalOrientation);
     const orientations = Object.values(Orientation);
     hostElement.classList.remove(...orientations);
     hostElement.classList.add(newOrientation);
-    this.setYasqeFullHeight(mode, newOrientation);
+    this.setYasqeFullHeight(mode, newOrientation, editorHeight);
     VisualisationUtils.toggleLayoutOrientationButton(hostElement, newOrientation);
   }
   static resolveOrientation(isVerticalOrientation) {

package/dist/components/ontotext-yasgui.js

@@ -125,9 +125,12 @@ class OntotextYasgui$1 {
    * @param query The query value to be set.
    */
   setQuery(query) {
-    const cursor = this.yasgui.getTab().getYasqe().getDoc().getCursor();
-    this.yasgui.getTab().getYasqe().setValue(query);
-    this.yasgui.getTab().getYasqe().getDoc().setCursor(cursor);
+    const yasqe = this.yasgui.getTab().getYasqe();
+    const cursor = yasqe.getDoc().getCursor();
+    const lastLine = yasqe.getDoc().lastLine();
+    const lastLineLength = yasqe.getDoc().getLine(lastLine).length;
+    yasqe.getDoc().replaceRange(query, { line: 0, ch: 0 }, { line: lastLine, ch: lastLineLength });
+    yasqe.getDoc().setCursor(cursor);
   }
   query() {
     return this.yasgui.getTab().getYasqe().query();
@@ -222,6 +225,20 @@ class OntotextYasgui$1 {
     }
     return tabInstance;
   }
+  /**
+   * Searches the local store for the given tab ID and returns the height for the yasqe editor. If no height can be found,
+   * the default 300 is returned.
+   * @param tabId
+   */
+  getEditorHeight(tabId) {
+    const heightString = this.getInstance().getTab(tabId).persistentJson.yasqe.editorHeight;
+    if (heightString) {
+      return parseInt(heightString.replace("px", ""), 10);
+    }
+    else {
+      return 300;
+    }
+  }
   destroy() {
     if (this.yasgui) {
       this.yasgui.destroy();
@@ -330,8 +347,9 @@ class VisualisationUtils {
    * actually rendered before trying out to find it.
    * @param mode
    * @param orientation
+   * @param editorHeight if the mode is YASGUI, this height will be set for the yasqe.
    */
-  static setYasqeFullHeight(mode, orientation) {
+  static setYasqeFullHeight(mode, orientation, editorHeight) {
     const selectActiveEditor = () => document.querySelector('.yasgui .tabPanel.active .CodeMirror');
     if (mode === RenderingMode.YASQE || orientation === Orientation.HORIZONTAL) {
       setTimeout(() => {
@@ -350,7 +368,7 @@ class VisualisationUtils {
       setTimeout(() => {
         const codemirrorEl = selectActiveEditor();
         if (codemirrorEl) {
-          codemirrorEl.style.removeProperty('height');
+          codemirrorEl.style.setProperty('height', editorHeight + 'px');
         }
       });
     }
@@ -360,8 +378,9 @@ class VisualisationUtils {
    * @param hostElement
    * @param newMode
    * @param isVerticalOrientation
+   * @param editorHeight
    */
-  static changeRenderMode(hostElement, newMode, isVerticalOrientation) {
+  static changeRenderMode(hostElement, newMode, isVerticalOrientation, editorHeight) {
     VisualisationUtils.unselectAllToolbarButtons(hostElement);
     const button = HtmlElementsUtil.getRenderModeButton(hostElement, newMode);
     /** The button can be undefined if the render buttons are hidden and the {@see OntotextYasguiWebComponent#changeRenderMode} method is called.*/
@@ -371,7 +390,7 @@ class VisualisationUtils {
     const modes = Object.values(RenderingMode);
     hostElement.classList.remove(...modes);
     hostElement.classList.add(newMode);
-    this.setYasqeFullHeight(newMode, this.resolveOrientation(isVerticalOrientation));
+    this.setYasqeFullHeight(newMode, this.resolveOrientation(isVerticalOrientation), editorHeight);
   }
   static toggleLayoutOrientationButton(hostElement, newOrientation) {
     const buttonOrientation = HtmlElementsUtil.getOrientationButton(hostElement);
@@ -382,12 +401,12 @@ class VisualisationUtils {
       buttonOrientation.classList.remove('icon-rotate-quarter');
     }
   }
-  static toggleLayoutOrientation(hostElement, isVerticalOrientation, mode) {
+  static toggleLayoutOrientation(hostElement, isVerticalOrientation, mode, editorHeight) {
     const newOrientation = this.resolveOrientation(isVerticalOrientation);
     const orientations = Object.values(Orientation);
     hostElement.classList.remove(...orientations);
     hostElement.classList.add(newOrientation);
-    this.setYasqeFullHeight(mode, newOrientation);
+    this.setYasqeFullHeight(mode, newOrientation, editorHeight);
     VisualisationUtils.toggleLayoutOrientationButton(hostElement, newOrientation);
   }
   static resolveOrientation(isVerticalOrientation) {
@@ -3452,11 +3471,12 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
    * Changes rendering mode of component.
    *
    * @param newRenderMode - then new render mode of component.
+   * @param editorHeight - the height for yasqe.
    */
-  changeRenderMode(newRenderMode) {
+  changeRenderMode(newRenderMode, editorHeight) {
     return this.getOntotextYasgui()
       .then(() => {
-      VisualisationUtils.changeRenderMode(this.hostElement, newRenderMode, this.getOrientationMode() === Orientation.VERTICAL);
+      VisualisationUtils.changeRenderMode(this.hostElement, newRenderMode, this.isVerticalOrientation, editorHeight);
     });
   }
   /**
@@ -3626,7 +3646,8 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
       ontotextYasgui.refresh();
-      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation));
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     });
   }
   onBeforeunloadHandler() {
@@ -3785,13 +3806,14 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
     this.output.emit(toOutputEvent(event));
   }
   onQuery(event) {
-    this.changeRenderMode(this.defaultViewMode);
-    this.defaultViewMode = RenderingMode.YASGUI;
     this.output.emit(toOutputEvent(event));
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
       ontotextYasgui.leaveFullScreen();
-      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation));
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      this.changeRenderMode(this.defaultViewMode, editorHeight);
+      this.defaultViewMode = RenderingMode.YASGUI;
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     });
   }
   onInternalQueryExecuted(event) {
@@ -3814,9 +3836,10 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
   }
   changeOrientation() {
     this.isVerticalOrientation = !this.isVerticalOrientation;
-    VisualisationUtils.toggleLayoutOrientation(this.hostElement, this.isVerticalOrientation, this.renderingMode);
     this.getOntotextYasgui()
       .then((ontotextYasgui) => {
+      const editorHeight = this.ontotextYasgui.getEditorHeight(ontotextYasgui.getTabId());
+      VisualisationUtils.toggleLayoutOrientation(this.hostElement, this.isVerticalOrientation, this.renderingMode, editorHeight);
       ontotextYasgui.refresh();
     });
   }
@@ -3927,7 +3950,8 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
   }
   changeRenderingMode(mode) {
     this.renderingMode = mode;
-    VisualisationUtils.changeRenderMode(this.hostElement, mode, this.isVerticalOrientation);
+    const editorHeight = this.ontotextYasgui.getEditorHeight(this.ontotextYasgui.getTabId());
+    VisualisationUtils.changeRenderMode(this.hostElement, mode, this.isVerticalOrientation, editorHeight);
   }
   isOntotextYasguiInitialiazed() {
     return !!this.ontotextYasgui && !!this.ontotextYasgui.getInstance();
@@ -3950,7 +3974,9 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
       VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation);
     });
     this.ontotextYasgui.getInstance().on('tabSelect', (_yasgui, _tab) => {
-      VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation);
+      const editorHeight = this.ontotextYasgui.getEditorHeight(_tab);
+      VisualisationUtils.changeRenderMode(this.hostElement, this.renderingMode, this.isVerticalOrientation, editorHeight);
+      this.updateYasrTopMargin();
     });
     this.ontotextYasgui.getInstance().on('autocompletionShown', (_instance, _tab, _widget) => {
       hint.parentNode && hint.parentNode.removeChild(hint);
@@ -4034,6 +4060,8 @@ const OntotextYasguiWebComponent = /*@__PURE__*/ proxyCustomElement(class extend
       this.ontotextYasgui = this.yasguiBuilder.build(this.hostElement, yasguiConfiguration);
       this.registerEventHandlers();
       this.afterInit();
+      const editorHeight = this.ontotextYasgui.getEditorHeight(this.ontotextYasgui.getTabId());
+      VisualisationUtils.setYasqeFullHeight(this.renderingMode, VisualisationUtils.resolveOrientation(this.isVerticalOrientation), editorHeight);
     }
   }
   componentWillLoad() {