Fix scrolling scale, other knot style fixes

js/Blueprint.js

@@ -264,6 +264,16 @@ export default class Blueprint extends IElement {
         return Configuration.scale[this.getZoom()]
     }
 
+    /** @param {Number} value */
+    scaleCorrect(value) {
+        return value / this.getScale()
+    }
+
+    /** @param {Number} value */
+    scaleCorrectReverse(value) {
+        return value * this.getScale()
+    }
+
     /**
      * @param {Number} x
      * @param {Number} y

js/element/NodeElement.js

@@ -170,7 +170,7 @@ export default class NodeElement extends ISelectableDraggableElement {
         this.nodeDisplayName = this.getNodeDisplayName()
         this.pureFunction = this.entity.bIsPureFunc
         this.dragLinkObjects = []
-        super.setLocation(this.entity.NodePosX.value, this.entity.NodePosY.value)
+        super.setLocation(this.entity.getNodePosX(), this.entity.getNodePosY())
         if (this.entity.NodeWidth && this.entity.NodeHeight) {
             this.sizeX = this.entity.NodeWidth.value
             this.sizeY = this.entity.NodeHeight.value
@@ -270,8 +270,8 @@ export default class NodeElement extends ISelectableDraggableElement {
     }
 
     setLocation(x = 0, y = 0, acknowledge = true) {
-        this.entity.NodePosX.value = x
-        this.entity.NodePosY.value = y
+        this.entity.setNodePosX(x)
+        this.entity.setNodePosY(y)
         super.setLocation(x, y, acknowledge)
     }
 

js/entity/ObjectEntity.js

@@ -79,9 +79,11 @@ export default class ObjectEntity extends IEntity {
         },
         NodePosX: {
             type: IntegerEntity,
+            showDefault: false,
         },
         NodePosY: {
             type: IntegerEntity,
+            showDefault: false,
         },
         NodeWidth: {
             type: IntegerEntity,
@@ -230,4 +232,28 @@ export default class ObjectEntity extends IEntity {
         }
         this.NodeHeight.value = value
     }
+
+    getNodePosX() {
+        return this.NodePosX?.value ?? 0
+    }
+
+    /** @param {Number} value */
+    setNodePosX(value) {
+        if (!this.NodePosX) {
+            this.NodePosX = new IntegerEntity()
+        }
+        this.NodePosX.value = value
+    }
+
+    getNodePosY() {
+        return this.NodePosY?.value ?? 0
+    }
+
+    /** @param {Number} value */
+    setNodePosY(value) {
+        if (!this.NodePosY) {
+            this.NodePosY = new IntegerEntity()
+        }
+        this.NodePosY.value = value
+    }
 }

js/template/BlueprintTemplate.js

@@ -195,27 +195,28 @@ export default class BlueprintTemplate extends ITemplate {
     }
 
     gridTopVisibilityBoundary() {
-        return this.blueprint.scrollY - this.blueprint.translateY
+        return this.blueprint.scaleCorrect(this.blueprint.scrollY) - this.blueprint.translateY
     }
 
     gridRightVisibilityBoundary() {
-        return this.gridLeftVisibilityBoundary() + this.viewportSize[0]
+        this.blueprint
+        return this.gridLeftVisibilityBoundary() + this.blueprint.scaleCorrect(this.viewportSize[0])
     }
 
     gridBottomVisibilityBoundary() {
-        return this.gridTopVisibilityBoundary() + this.viewportSize[1]
+        return this.gridTopVisibilityBoundary() + this.blueprint.scaleCorrect(this.viewportSize[1])
     }
 
     gridLeftVisibilityBoundary() {
-        return this.blueprint.scrollX - this.blueprint.translateX
+        return this.blueprint.scaleCorrect(this.blueprint.scrollX) - this.blueprint.translateX
     }
 
     centerViewport(x = 0, y = 0, smooth = true) {
-        const centerX = this.gridLeftVisibilityBoundary() + this.viewportSize[0] / 2
-        const centerY = this.gridTopVisibilityBoundary() + this.viewportSize[1] / 2
+        const centerX = this.gridLeftVisibilityBoundary() + this.blueprint.scaleCorrect(this.viewportSize[0] / 2)
+        const centerY = this.gridTopVisibilityBoundary() + this.blueprint.scaleCorrect(this.viewportSize[1] / 2)
         this.blueprint.scrollDelta(
-            x - centerX,
-            y - centerY,
+            this.blueprint.scaleCorrectReverse(x - centerX),
+            this.blueprint.scaleCorrectReverse(y - centerY),
             smooth
         )
     }

js/template/node/NodeTemplate.js

@@ -102,13 +102,23 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         const inputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-inputs"))
         const outputContainer = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-outputs"))
         this.element.nodeNameElement = /** @type {HTMLElement} */(this.element.querySelector(".ueb-node-name-text"))
+        let hasInput = false
+        let hasOutput = false
         this.element.getPinElements().forEach(p => {
             if (p.isInput()) {
                 inputContainer.appendChild(p)
+                hasInput = true
             } else if (p.isOutput()) {
                 outputContainer.appendChild(p)
+                hasOutput = true
             }
         })
+        if (hasInput) {
+            this.element.classList.add("ueb-node-has-inputs")
+        }
+        if (hasOutput) {
+            this.element.classList.add("ueb-node-has-outputs")
+        }
     }
 
     createPinElements() {

js/template/pin/MinimalPinTemplate.js

@@ -13,6 +13,10 @@ import PinTemplate from "./PinTemplate"
 export default class MinimalPinTemplate extends PinTemplate {
 
     render() {
-        return html`<div class="ueb-pin-icon">${this.renderIcon()}</div>`
+        return html`
+            <div class="ueb-pin-wrapper">
+                <div class="ueb-pin-icon">${this.renderIcon()}</div>
+            </div>
+        `
     }
 }