Various fixes

js/Blueprint.js

@@ -32,9 +32,9 @@ export default 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} */
@@ -77,21 +77,17 @@ export default 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)
@@ -154,38 +150,46 @@ export default 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)
     }
 
@@ -216,7 +220,7 @@ export default 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 [
@@ -230,24 +234,35 @@ export default 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) {

js/Configuration.js

@@ -4,6 +4,8 @@ export default 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

js/Utility.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "./Configuration"
 import TypeInitialization from "./entity/TypeInitialization"
 

js/element/IElement.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /**
  * @typedef {import("../Blueprint").default} Blueprint
  * @typedef {import("../entity/IEntity").default} IEntity
@@ -53,12 +55,12 @@ export default 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

js/element/ISelectableDraggableElement.js

@@ -1,12 +1,16 @@
+// @ts-check
+
 import Configuration from "../Configuration"
 import IElement from "./IElement"
 import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
 
-/** @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate */
-
+/**
+ * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate
+ */
 export default class ISelectableDraggableElement extends IElement {
 
     constructor(...args) {
+        // @ts-expect-error
         super(...args)
         this.dragObject = null
         this.location = [0, 0]
@@ -28,6 +32,9 @@ export default 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, {

js/element/LinkElement.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../Configuration"
 import IElement from "./IElement"
 import LinkTemplate from "../template/LinkTemplate"
@@ -86,7 +88,7 @@ export default class LinkElement extends IElement {
     /**
      * @param {Number[]} location
      */
-    setSourceLocation(location) {
+    setSourceLocation(location = null) {
         if (location == null) {
             location = this.#source.template.getLinkLocation(this.#source)
         }
@@ -115,7 +117,7 @@ export default class LinkElement extends IElement {
     /**
      * @param {Number[]} location
      */
-    setDestinationLocation(location) {
+    setDestinationLocation(location = null) {
         if (location == null) {
             location = this.#destination.template.getLinkLocation(this.#destination)
         }

js/element/LinkMessageElement.js

@@ -1,10 +1,12 @@
+// @ts-check
+
 import IElement from "./IElement"
 import LinkMessageTemplate from "../template/LinkMessageTemplate"
 
 /**
  * @typedef {import("./PinElement").default} PinElement
  * @typedef {import("./LinkElement").default} LinkElement
- * @typedef {(sourcePin: PinElement, sourcePin: PinElement) => String} LinkRetrieval
+ * @typedef {(sourcePin: PinElement, destinationPin: PinElement) => String} LinkRetrieval
  */
 export default class LinkMessageElement extends IElement {
 

js/element/NodeElement.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../Configuration"
 import ISelectableDraggableElement from "./ISelectableDraggableElement"
 import NodeTemplate from "../template/NodeTemplate"

js/element/PinElement.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IElement from "./IElement"
 import MouseCreateLink from "../input/mouse/MouseCreateLink"
 import PinTemplate from "../template/PinTemplate"

js/element/SelectorElement.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import FastSelectionModel from "../selection/FastSelectionModel"
 import IElement from "./IElement"
 import SelectorTemplate from "../template/SelectorTemplate"

js/entity/FunctionReferenceEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IEntity from "./IEntity"
 import ObjectReferenceEntity from "./ObjectReferenceEntity"
 

js/entity/GuidEntity.js

@@ -1,5 +1,6 @@
-import IEntity from "./IEntity"
+// @ts-check
 
+import IEntity from "./IEntity"
 
 export default class GuidEntity extends IEntity {
 

js/entity/IEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import TypeInitialization from "./TypeInitialization"
 import Utility from "../Utility"
 

js/entity/IdentifierEntity.js

@@ -1,5 +1,6 @@
-import IEntity from "./IEntity"
+// @ts-check
 
+import IEntity from "./IEntity"
 
 export default class IdentifierEntity extends IEntity {
 

js/entity/IntegerEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IEntity from "./IEntity"
 
 export default class IntegerEntity extends IEntity {

js/entity/KeyBindingEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IdentifierEntity from "./IdentifierEntity"
 import IEntity from "./IEntity"
 

js/entity/LocalizedTextEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IEntity from "./IEntity"
 
 export default class LocalizedTextEntity extends IEntity {

js/entity/NaturalNumberEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IntegerEntity from "./IntegerEntity"
 import Utility from "../Utility"
 

js/entity/ObjectEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import FunctionReferenceEntity from "./FunctionReferenceEntity"
 import GuidEntity from "./GuidEntity"
 import IdentifierEntity from "./IdentifierEntity"

js/entity/ObjectReferenceEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IEntity from "./IEntity"
 
 export default class ObjectReferenceEntity extends IEntity {

js/entity/PathSymbolEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IEntity from "./IEntity"
 
 export default class PathSymbolEntity extends IEntity {

js/entity/PinEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import GuidEntity from "./GuidEntity"
 import IEntity from "./IEntity"
 import LocalizedTextEntity from "./LocalizedTextEntity"

js/entity/PinReferenceEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import GuidEntity from "./GuidEntity"
 import IEntity from "./IEntity"
 import PathSymbolEntity from "./PathSymbolEntity"

js/entity/TypeInitialization.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 export default class TypeInitialization {
 
     static sanitize(value) {
@@ -11,7 +13,7 @@ export default class TypeInitialization {
     }
 
     /**
-     * @param {typeof Object} type
+     * @param {Object} type
      * @param {boolean} showDefault
      * @param {*} value
      */

js/entity/VariableReferenceEntity.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IEntity from "./IEntity"
 import GuidEntity from "./GuidEntity"
 

js/export.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Blueprint from "./Blueprint"
 import Configuration from "./Configuration"
 import LinkElement from "./element/LinkElement"

js/input/IContext.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 export default class IContext {
 
     /** @type {HTMLElement} */

js/input/common/Copy.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IContext from "../IContext"
 import ObjectSerializer from "../../serialization/ObjectSerializer"
 

js/input/common/Paste.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IContext from "../IContext"
 import NodeElement from "../../element/NodeElement"
 import ObjectSerializer from "../../serialization/ObjectSerializer"

js/input/keybaord/IKeyboardShortcut.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../../Configuration"
 import IContext from "../IContext"
 import ISerializer from "../../serialization/ISerializer"

js/input/keybaord/KeyboardCanc.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../../Configuration"
 import IKeyboardShortcut from "./IKeyboardShortcut"
 

js/input/keybaord/KeyboardEnableZoom.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../../Configuration"
 import IKeyboardShortcut from "./IKeyboardShortcut"
 import Zoom from "../mouse/Zoom"
@@ -28,4 +30,4 @@ export default class KeyboardEnableZoom extends IKeyboardShortcut {
     unfire() {
         this.#zoomInputObject.enableZoonIn = false
     }
-}
+}

js/input/keybaord/KeyboardSelectAll.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../../Configuration"
 import IKeyboardShortcut from "./IKeyboardShortcut"
 
@@ -19,4 +21,4 @@ export default class KeyboardSelectAll extends IKeyboardShortcut {
     fire() {
         this.blueprint.selectAll()
     }
-}
+}

js/input/mouse/IMouseClickDrag.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../../Configuration"
 import IPointing from "./IPointing"
 

js/input/mouse/IMouseWheel.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IPointing from "./IPointing"
 
 export default class IMouseWheel extends IPointing {

js/input/mouse/IPointing.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IContext from "../IContext"
 import Utility from "../../Utility"
 

js/input/mouse/MouseCreateLink.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IMouseClickDrag from "./IMouseClickDrag"
 import LinkElement from "../../element/LinkElement"
 import LinkMessageElement from "../../element/LinkMessageElement"

js/input/mouse/MouseMoveNodes.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IMouseClickDrag from "./IMouseClickDrag"
 import Utility from "../../Utility"
 

js/input/mouse/MouseScrollGraph.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IMouseClickDrag from "./IMouseClickDrag"
 
 export default class MouseScrollGraph extends IMouseClickDrag {

js/input/mouse/MouseTracking.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../../Configuration"
 import IPointing from "./IPointing"
 

js/input/mouse/Select.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IMouseClickDrag from "./IMouseClickDrag"
 
 export default class Select extends IMouseClickDrag {

js/input/mouse/Unfocus.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IContext from "../IContext"
 
 export default class Unfocus extends IContext {

js/input/mouse/Zoom.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import IMouseWheel from "./IMouseWheel"
 
 export default class Zoom extends IMouseWheel {

js/selection/FastSelectionModel.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import OrderedIndexArray from "./OrderedIndexArray"
 
 /**

js/selection/OrderedIndexArray.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 export default class OrderedIndexArray {
 
     /**

js/selection/SimpleSelectionModel.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 export default class SimpleSelectionModel {
 
     /**

js/serialization/CustomSerializer.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import GeneralSerializer from "./GeneralSerializer"
 
 export default class CustomSerializer extends GeneralSerializer {

js/serialization/GeneralSerializer.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Grammar from "./Grammar"
 import ISerializer from "./ISerializer"
 

js/serialization/Grammar.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import FunctionReferenceEntity from "../entity/FunctionReferenceEntity"
 import GuidEntity from "../entity/GuidEntity"
 import IdentifierEntity from "../entity/IdentifierEntity"

js/serialization/ISerializer.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Grammar from "./Grammar"
 import IEntity from "../entity/IEntity"
 import Parsimmon from "parsimmon"

js/serialization/ObjectSerializer.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import ISerializer from "./ISerializer"
 import ObjectEntity from "../entity/ObjectEntity"
 import PinEntity from "../entity/PinEntity"

js/serialization/SerializerFactory.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Utility from "../Utility"
 
 export default class SerializerFactory {

js/serialization/ToStringSerializer.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import GeneralSerializer from "./GeneralSerializer"
 
 export default class ToStringSerializer extends GeneralSerializer {

js/serialization/initializeSerializerFactory.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import CustomSerializer from "./CustomSerializer"
 import FunctionReferenceEntity from "../entity/FunctionReferenceEntity"
 import GeneralSerializer from "./GeneralSerializer"

js/template/BlueprintTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import Configuration from "../Configuration"
 import html from "./html"
 import ITemplate from "./ITemplate"

js/template/ExecPinTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import html from "./html"
 import PinTemplate from "./PinTemplate"
 

js/template/ITemplate.js

@@ -1,4 +1,5 @@
 // @ts-check
+
 /**
  * @typedef {import("../element/IElement").default} IElement
  */

js/template/LinkMessageTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import html from "./html"
 import ITemplate from "./ITemplate"
 import LinkElement from "../element/LinkElement"
@@ -36,4 +38,4 @@ export default class LinkMessageTemplate extends ITemplate {
         }
     }
 
-}
+}

js/template/LinkTemplate.js

@@ -1,5 +1,6 @@
+// @ts-check
+
 import Configuration from "../Configuration"
-import Utility from "../Utility"
 import html from "./html"
 import ITemplate from "./ITemplate"
 import sanitizeText from "./sanitizeText"

js/template/NodeTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import html from "./html"
 import PinElement from "../element/PinElement"
 import sanitizeText from "./sanitizeText"

js/template/PinTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import html from "./html"
 import ITemplate from "./ITemplate"
 import LinkElement from "../element/LinkElement"

js/template/SelectableDraggableTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import ITemplate from "./ITemplate"
 import sanitizeText from "./sanitizeText"
 

js/template/SelectorTemplate.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 import ITemplate from "./ITemplate"
 import sanitizeText from "./sanitizeText"
 

js/template/StringPinTemplate.js

@@ -10,8 +10,13 @@ export default 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>
         `
     }
 }

js/template/html.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 /**
  * This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML()
  */

js/template/sanitizeText.js

@@ -1,3 +1,5 @@
+// @ts-check
+
 const div = document.createElement("div")
 
 const tagReplacement = {
@@ -15,4 +17,4 @@ function sanitizeText(value) {
     return value
 }
 
-export default sanitizeText
+export default sanitizeText