Various fixes

dist/css/ueb-style.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,aACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,gBACA,eACA,gBACA,gBACA,gBACA,aACA,YACA,cAEA,gEAGI,mBACA,aC7FR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCjHR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}

dist/ueblueprint.js

@@ -4,6 +4,8 @@ class Configuration {
     static expandGridSize = 400
     static fontSize = "12px"
     static gridAxisLineColor = "black"
+    static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event
+    static gridShrinkThreshold = 2 // exceding size factor threshold to cause a shrink event 
     static gridLineColor = "#353535"
     static gridLineWidth = 1 // pixel
     static gridSet = 8
@@ -133,12 +135,15 @@ class Configuration {
     }
 }
 
+// @ts-check
+
 /**
  * This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML()
  */
 const html = String.raw;
 
 // @ts-check
+
 /**
  * @typedef {import("../element/IElement").default} IElement
  */
@@ -160,6 +165,8 @@ class ITemplate {
     }
 }
 
+// @ts-check
+
 document.createElement("div");
 
 const tagReplacement = {
@@ -177,6 +184,8 @@ function sanitizeText(value) {
     return value
 }
 
+// @ts-check
+
 class OrderedIndexArray {
 
     /**
@@ -317,6 +326,8 @@ class OrderedIndexArray {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {{
  *      primaryInf: number,
@@ -481,6 +492,8 @@ class FastSelectionModel {
 
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../Blueprint").default} Blueprint
  * @typedef {import("../entity/IEntity").default} IEntity
@@ -536,12 +549,12 @@ class IElement extends HTMLElement {
     }
 
     /**
-     * @template {} T
-     * @param {new () => T} type
+     * @template {IContext} T
+     * @param {new (...args: any[]) => T} type
      * @returns {T}
      */
     getInputObject(type) {
-        return this.inputObjects.find(object => object.constructor == type)
+        return /** @type {T} */ (this.inputObjects.find(object => object.constructor == type))
     }
 
     // Subclasses will want to override
@@ -550,6 +563,8 @@ class IElement extends HTMLElement {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../element/SelectorElement").default} SelectorElement
  */
@@ -596,6 +611,8 @@ class SelectorTemplate extends ITemplate {
     }
 }
 
+// @ts-check
+
 class SelectorElement extends IElement {
 
     static tagName = "ueb-selector"
@@ -633,6 +650,8 @@ class SelectorElement extends IElement {
 
 customElements.define(SelectorElement.tagName, SelectorElement);
 
+// @ts-check
+
 /**
  * @typedef {import("../Blueprint").default} Blueprint
  * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
@@ -769,6 +788,8 @@ class BlueprintTemplate extends ITemplate {
     }
 }
 
+// @ts-check
+
 class IContext {
 
     /** @type {HTMLElement} */
@@ -822,6 +843,8 @@ class IContext {
     }
 }
 
+// @ts-check
+
 class TypeInitialization {
 
     static sanitize(value) {
@@ -849,6 +872,8 @@ class TypeInitialization {
     }
 }
 
+// @ts-check
+
 class Utility {
 
     static sigmoid(x, curvature = 1.7) {
@@ -964,6 +989,8 @@ class Utility {
     }
 }
 
+// @ts-check
+
 class IEntity {
 
     constructor(options = {}) {
@@ -1017,6 +1044,8 @@ class IEntity {
     }
 }
 
+// @ts-check
+
 class ObjectReferenceEntity extends IEntity {
 
     static attributes = {
@@ -1025,6 +1054,8 @@ class ObjectReferenceEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class FunctionReferenceEntity extends IEntity {
 
     static attributes = {
@@ -1033,6 +1064,8 @@ class FunctionReferenceEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class GuidEntity extends IEntity {
 
     static attributes = {
@@ -1060,6 +1093,8 @@ class GuidEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class IdentifierEntity extends IEntity {
 
     static attributes = {
@@ -1085,6 +1120,8 @@ class IdentifierEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class IntegerEntity extends IEntity {
 
     static attributes = {
@@ -1110,6 +1147,8 @@ class IntegerEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class KeyBindingEntity extends IEntity {
 
     static attributes = {
@@ -1125,6 +1164,8 @@ class KeyBindingEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class LocalizedTextEntity extends IEntity {
 
     static lookbehind = "NSLOCTEXT"
@@ -1135,6 +1176,8 @@ class LocalizedTextEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class PathSymbolEntity extends IEntity {
 
     static attributes = {
@@ -1146,6 +1189,8 @@ class PathSymbolEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class PinReferenceEntity extends IEntity {
 
     static attributes = {
@@ -1154,6 +1199,8 @@ class PinReferenceEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {{
  *     PinCategory: String,
@@ -1262,6 +1309,8 @@ class PinEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class VariableReferenceEntity extends IEntity {
 
     static attributes = {
@@ -1271,6 +1320,8 @@ class VariableReferenceEntity extends IEntity {
     }
 }
 
+// @ts-check
+
 class ObjectEntity extends IEntity {
 
     static attributes = {
@@ -1312,6 +1363,8 @@ var parsimmon_umd_min = {exports: {}};
 
 var Parsimmon = /*@__PURE__*/getDefaultExportFromCjs(parsimmon_umd_min.exports);
 
+// @ts-check
+
 let P = Parsimmon;
 
 class Grammar {
@@ -1566,6 +1619,8 @@ class Grammar {
     MultipleObject = r => r.Object.sepBy1(P.whitespace).trim(P.optWhitespace)
 }
 
+// @ts-check
+
 class SerializerFactory {
 
     static #serializers = new Map()
@@ -1579,6 +1634,8 @@ class SerializerFactory {
     }
 }
 
+// @ts-check
+
 class ISerializer {
 
     static grammar = Parsimmon.createLanguage(new Grammar())
@@ -1657,6 +1714,8 @@ class ISerializer {
     }
 }
 
+// @ts-check
+
 class ObjectSerializer extends ISerializer {
 
     constructor() {
@@ -1715,6 +1774,8 @@ End Object\n`;
     }
 }
 
+// @ts-check
+
 class Copy extends IContext {
 
     #copyHandler
@@ -1741,6 +1802,7 @@ class Copy extends IContext {
     }
 }
 
+// @ts-check
 class IKeyboardShortcut extends IContext {
 
     /** @type {KeyBindingEntity} */
@@ -1825,6 +1887,8 @@ class IKeyboardShortcut extends IContext {
     }
 }
 
+// @ts-check
+
 class KeyboardCanc extends IKeyboardShortcut {
 
     /**
@@ -1845,6 +1909,8 @@ class KeyboardCanc extends IKeyboardShortcut {
     }
 }
 
+// @ts-check
+
 class IPointing extends IContext {
 
     constructor(target, blueprint, options) {
@@ -1863,6 +1929,8 @@ class IPointing extends IContext {
     }
 }
 
+// @ts-check
+
 class IMouseWheel extends IPointing {
 
     /** @type {(e: WheelEvent) => void} */
@@ -1908,6 +1976,8 @@ class IMouseWheel extends IPointing {
     }
 }
 
+// @ts-check
+
 class Zoom extends IMouseWheel {
 
     #enableZoonIn = false
@@ -1935,6 +2005,8 @@ class Zoom extends IMouseWheel {
     }
 }
 
+// @ts-check
+
 class KeyboardEnableZoom extends IKeyboardShortcut {
 
     /** @type {} */
@@ -1963,6 +2035,8 @@ class KeyboardEnableZoom extends IKeyboardShortcut {
     }
 }
 
+// @ts-check
+
 class KeyboardSelectAll extends IKeyboardShortcut {
 
     /**
@@ -1983,6 +2057,8 @@ class KeyboardSelectAll extends IKeyboardShortcut {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../element/LinkElement").default} LinkElement
  * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
@@ -2146,6 +2222,8 @@ class LinkTemplate extends ITemplate {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("./PinElement").default} PinElement
  * @typedef {import("./LinkMessageElement").default} LinkMessageElement
@@ -2230,7 +2308,7 @@ class LinkElement extends IElement {
     /**
      * @param {Number[]} location
      */
-    setSourceLocation(location) {
+    setSourceLocation(location = null) {
         if (location == null) {
             location = this.#source.template.getLinkLocation(this.#source);
         }
@@ -2259,7 +2337,7 @@ class LinkElement extends IElement {
     /**
      * @param {Number[]} location
      */
-    setDestinationLocation(location) {
+    setDestinationLocation(location = null) {
         if (location == null) {
             location = this.#destination.template.getLinkLocation(this.#destination);
         }
@@ -2353,6 +2431,8 @@ class LinkElement extends IElement {
 
 customElements.define(LinkElement.tagName, LinkElement);
 
+// @ts-check
+
 /**
  * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses.
  */
@@ -2498,6 +2578,8 @@ class IMouseClickDrag extends IPointing {
     }
 }
 
+// @ts-check
+
 class MouseScrollGraph extends IMouseClickDrag {
 
     startDrag() {
@@ -2513,6 +2595,8 @@ class MouseScrollGraph extends IMouseClickDrag {
     }
 }
 
+// @ts-check
+
 class MouseTracking extends IPointing {
 
     /** @type {IPointing} */
@@ -2573,6 +2657,8 @@ class MouseTracking extends IPointing {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement
  */
@@ -2620,11 +2706,15 @@ class MouseMoveNodes extends IMouseClickDrag {
     }
 }
 
-/** @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate */
+// @ts-check
 
+/**
+ * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
+ */
 class ISelectableDraggableElement extends IElement {
 
     constructor(...args) {
+        // @ts-expect-error
         super(...args);
         this.dragObject = null;
         this.location = [0, 0];
@@ -2646,6 +2736,9 @@ class ISelectableDraggableElement extends IElement {
         ]
     }
 
+    /**
+     * @param {Number[]} value 
+     */
     setLocation(value = [0, 0]) {
         const d = [value[0] - this.location[0], value[1] - this.location[1]];
         const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, {
@@ -2700,6 +2793,8 @@ class ISelectableDraggableElement extends IElement {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
  */
@@ -2735,6 +2830,8 @@ class LinkMessageTemplate extends ITemplate {
 
 }
 
+// @ts-check
+
 /**
  * @typedef {import("./PinElement").default} PinElement
  * @typedef {import("./LinkElement").default} LinkElement
@@ -2796,6 +2893,8 @@ class LinkMessageElement extends IElement {
 
 customElements.define(LinkMessageElement.tagName, LinkMessageElement);
 
+// @ts-check
+
 /**
  * @typedef {import("../../element/LinkElement").default} LinkElement
  * @typedef {import("../../element/PinElement").default} PinElement
@@ -2897,6 +2996,8 @@ class MouseCreateLink extends IMouseClickDrag {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../element/NodeElement").default} NodeElement
  * @typedef {import("../element/PinElement").default} PinElement
@@ -2991,6 +3092,8 @@ class PinTemplate extends ITemplate {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../element/PinElement").default} PinElement
  */
@@ -3017,12 +3120,19 @@ class StringPinTemplate extends PinTemplate {
      * @param {PinElement} pin
      */
     renderInput(pin) {
+        const stopEventPropagation = "e => stopPropagation()";
         return html`
-            <span class="ueb-pin-input" role="textbox" contenteditable="true"></span>
+            <span class="ueb-pin-input">
+                <span class="ueb-pin-input-content" role="textbox" contenteditable="true"
+                    onkeydown="${stopEventPropagation}" onkeyup="${stopEventPropagation}"
+                    oncopy="${stopEventPropagation}" onpaste="${stopEventPropagation}"></span>
+            </span>
         `
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("./NodeElement").default} NodeElement
  * @typedef {import("../entity/GuidEntity").default} GuidEntity
@@ -3160,6 +3270,8 @@ class PinElement extends IElement {
 
 customElements.define(PinElement.tagName, PinElement);
 
+// @ts-check
+
 /**
  * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
  */
@@ -3187,6 +3299,8 @@ class SelectableDraggableTemplate extends ITemplate {
     }
 }
 
+// @ts-check
+
 /**
  * @typedef {import("../element/NodeElement").default} NodeElement
  */
@@ -3252,6 +3366,8 @@ class NodeTemplate extends SelectableDraggableTemplate {
     }
 }
 
+// @ts-check
+
 class NodeElement extends ISelectableDraggableElement {
 
     static tagName = "ueb-node"
@@ -3317,6 +3433,8 @@ class NodeElement extends ISelectableDraggableElement {
 
 customElements.define(NodeElement.tagName, NodeElement);
 
+// @ts-check
+
 class Paste extends IContext {
 
     #pasteHandle
@@ -3368,6 +3486,8 @@ class Paste extends IContext {
     }
 }
 
+// @ts-check
+
 class Select extends IMouseClickDrag {
 
     constructor(target, blueprint, options) {
@@ -3396,6 +3516,8 @@ class Select extends IMouseClickDrag {
     }
 }
 
+// @ts-check
+
 class Unfocus extends IContext {
 
     /** @type {(e: WheelEvent) => void} */
@@ -3447,9 +3569,9 @@ class Blueprint extends IElement {
     links = []
     expandGridSize = Configuration.expandGridSize
     /** @type {number[]} */
-    additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0]
+    additional = [2 * this.expandGridSize, 2 * this.expandGridSize]
     /** @type {number[]} */
-    translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0]
+    translateValue = [this.expandGridSize, this.expandGridSize]
     /** @type {number[]} */
     mousePosition = [0, 0]
     /** @type {HTMLElement} */
@@ -3492,21 +3614,17 @@ class Blueprint extends IElement {
     }
 
     /**
-     * Expand the grid, considers the absolute value of params
-     * @param {number} x - Horizontal expansion value
-     * @param {number} y - Vertical expansion value
+     * @param {number} x
+     * @param {number} y
      */
     #expand(x, y) {
-        x = Math.round(Math.abs(x));
-        y = Math.round(Math.abs(y));
         this.additional = [this.additional[0] + x, this.additional[1] + y];
         this.template.applyExpand(this);
     }
 
     /**
-     * Moves the content of the grid according to the coordinates
-     * @param {number} x - Horizontal translation value
-     * @param {number} y - Vertical translation value
+     * @param {number} x
+     * @param {number} y
      */
     #translate(x, y) {
         x = Math.round(x);
@@ -3569,38 +3687,46 @@ class Blueprint extends IElement {
     }
 
     scrollDelta(delta, smooth = false) {
-        const scrollMax = this.getScrollMax();
+        const maxScroll = this.getScrollMax();
         let currentScroll = this.getScroll();
         let finalScroll = [
             currentScroll[0] + delta[0],
             currentScroll[1] + delta[1]
         ];
         let expand = [0, 0];
+        let shrink = [0, 0];
+        let direction = [0, 0];
         for (let i = 0; i < 2; ++i) {
-            if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) {
-                // Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step
-                expand[i] = finalScroll[i];
-                if (expand[i] > 0) {
-                    // Final scroll is still in rage (more than zero) but we want to expand to negative (left or top)
-                    expand[i] = -this.expandGridSize;
+            if (delta[i] < 0 && finalScroll[i] < Configuration.gridExpandThreshold * this.expandGridSize) {
+                // Expand left/top
+                expand[i] = this.expandGridSize;
+                direction[i] = -1;
+                if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) {
+                    shrink[i] = -this.expandGridSize;
                 }
-            } else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) {
-                // Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step
-                expand[i] = finalScroll[i] - scrollMax[i];
-                if (expand[i] < 0) {
-                    // Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom)
-                    expand[i] = this.expandGridSize;
+            } else if (delta[i] > 0 && finalScroll[i]
+                > maxScroll[i] - Configuration.gridExpandThreshold * this.expandGridSize) {
+                // Expand right/bottom
+                expand[i] = this.expandGridSize;
+                direction[i] = 1;
+                if (finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) {
+                    shrink[i] = -this.expandGridSize;
                 }
             }
         }
         if (expand[0] != 0 || expand[1] != 0) {
-            this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1]));
-            currentScroll = this.getScroll();
-            finalScroll = [
-                currentScroll[0] + delta[0],
-                currentScroll[1] + delta[1]
+            this.seamlessExpand(expand, direction);
+            direction = [
+                -direction[0],
+                -direction[1]
             ];
+            this.seamlessExpand(shrink, direction);
         }
+        currentScroll = this.getScroll();
+        finalScroll = [
+            currentScroll[0] + delta[0],
+            currentScroll[1] + delta[1]
+        ];
         this.setScroll(finalScroll, smooth);
     }
 
@@ -3631,7 +3757,7 @@ class Blueprint extends IElement {
 
     /**
      * Get the scroll limits
-     * @return {array} The horizonal and vertical maximum scroll limits
+     * @return {Array} The horizonal and vertical maximum scroll limits
      */
     getScrollMax() {
         return [
@@ -3645,24 +3771,35 @@ class Blueprint extends IElement {
     }
 
     /**
-     * Expand the grind indefinitely, the content will remain into position
-     * @param {number} x - Horizontal expand value (negative means left, positive means right)
-     * @param {number} y - Vertical expand value (negative means top, positive means bottom)
+     * @param {Number} x - Horizontal 
+     * @param {Number} y - Vertical expand value (negative means top, positive means bottom)
+     * @param {Number} factor - Either 1 (expand) or -1 (shrink)
      */
-    seamlessExpand(x, y) {
+
+
+    /**
+     * Expand or shrink the grind indefinitely, the content will remain into position
+     * @param {Number[]} param0 - Expand value (negative means shrink, positive means expand)
+     * @param {Number[]} param1 - Direction of expansion (negative: left/top, position: right/bottom)
+     */
+    seamlessExpand([x, y], [directionX, directionY] = [1, 1]) {
+        const initialScroll = [
+            this.viewportElement.scrollLeft,
+            this.viewportElement.scrollTop
+        ];
         let scale = this.getScale();
         let scaledX = x / scale;
         let scaledY = y / scale;
         // First expand the grid to contain the additional space
         this.#expand(scaledX, scaledY);
         // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
-        this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0);
-        if (x < 0) {
-            this.viewportElement.scrollLeft -= x;
-        }
-        if (y < 0) {
-            this.viewportElement.scrollTop -= y;
-        }
+        const translate = [
+            directionX < 0 ? scaledX : 0,
+            directionY < 0 ? scaledY : 0
+        ];
+        this.#translate(translate[0], translate[1]);
+        this.viewportElement.scrollLeft = initialScroll[0] + translate[0];
+        this.viewportElement.scrollTop = initialScroll[1] + translate[1];
     }
 
     progressiveSnapToGrid(x) {
@@ -3824,6 +3961,8 @@ class Blueprint extends IElement {
 
 customElements.define(Blueprint.tagName, Blueprint);
 
+// @ts-check
+
 class GeneralSerializer extends ISerializer {
 
     constructor(wrap, entityType, prefix, separator, trailingSeparator, attributeValueConjunctionSign, attributeKeyPrinter) {
@@ -3848,6 +3987,8 @@ class GeneralSerializer extends ISerializer {
     }
 }
 
+// @ts-check
+
 class CustomSerializer extends GeneralSerializer {
 
     constructor(objectWriter, entityType) {
@@ -3861,6 +4002,8 @@ class CustomSerializer extends GeneralSerializer {
     }
 }
 
+// @ts-check
+
 class ToStringSerializer extends GeneralSerializer {
 
     constructor(entityType) {
@@ -3873,6 +4016,8 @@ class ToStringSerializer extends GeneralSerializer {
     }
 }
 
+// @ts-check
+
 function initializeSerializerFactory() {
 
     SerializerFactory.registerSerializer(
@@ -3925,6 +4070,8 @@ function initializeSerializerFactory() {
     SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity));
 }
 
+// @ts-check
+
 initializeSerializerFactory();
 
 export { Blueprint, Configuration, LinkElement, NodeElement };