Nodes style fixes, blueprint code inside element

js/Blueprint.js

@@ -81,6 +81,8 @@ export default class Blueprint extends IElement {
 
     /** @type {Map<String, Number>} */
     #nodeNameCounter = new Map()
+    #xScrollingAnimationId = 0
+    #yScrollingAnimationId = 0
     /** @type {NodeElement[]}" */
     nodes = []
     /** @type {LinkElement[]}" */
@@ -126,14 +128,32 @@ export default class Blueprint extends IElement {
     scrollDelta(x = 0, y = 0, smooth = false, scrollTime = Configuration.smoothScrollTime) {
         if (smooth) {
             let previousScrollDelta = [0, 0]
-            Utility.animate(0, x, scrollTime, x => {
-                this.scrollDelta(x - previousScrollDelta[0], 0, false)
-                previousScrollDelta[0] = x
-            })
-            Utility.animate(0, y, scrollTime, y => {
-                this.scrollDelta(0, y - previousScrollDelta[1], false)
-                previousScrollDelta[1] = y
-            })
+            if (this.#xScrollingAnimationId) {
+                cancelAnimationFrame(this.#xScrollingAnimationId)
+            }
+            if (this.#yScrollingAnimationId) {
+                cancelAnimationFrame(this.#yScrollingAnimationId)
+            }
+            Utility.animate(
+                0,
+                x,
+                scrollTime,
+                x => {
+                    this.scrollDelta(x - previousScrollDelta[0], 0, false)
+                    previousScrollDelta[0] = x
+                },
+                id => this.#xScrollingAnimationId = id
+            )
+            Utility.animate(
+                0,
+                y,
+                scrollTime,
+                y => {
+                    this.scrollDelta(0, y - previousScrollDelta[1], false)
+                    previousScrollDelta[1] = y
+                },
+                id => this.#yScrollingAnimationId = id
+            )
         } else {
             const maxScroll = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize]
             let currentScroll = this.getScroll()

js/Utility.js

@@ -257,8 +257,8 @@ export default class Utility {
             return [x, y]
         }
         return [
-            gridSize * Math.round(x / gridSize),
-            gridSize * Math.round(y / gridSize)
+            gridSize * Math.floor(x / gridSize),
+            gridSize * Math.floor(y / gridSize)
         ]
     }
 
@@ -424,10 +424,17 @@ export default class Utility {
         blueprint.dispatchEvent(event)
     }
 
-    static animate(from, to, intervalSeconds, callback, timingFunction = x => {
-        const v = x ** 3.5
-        return v / (v + ((1 - x) ** 3.5))
-    }) {
+    static animate(
+        from,
+        to,
+        intervalSeconds,
+        callback,
+        acknowledgeRequestAnimationId = id => { },
+        timingFunction = x => {
+            const v = x ** 3.5
+            return v / (v + ((1 - x) ** 3.5))
+        }
+    ) {
         let startTimestamp
         const doAnimation = currentTimestamp => {
             if (startTimestamp === undefined) {
@@ -437,11 +444,11 @@ export default class Utility {
             if (Utility.approximatelyEqual(delta, 1) || delta > 1) {
                 delta = 1
             } else {
-                requestAnimationFrame(doAnimation)
+                acknowledgeRequestAnimationId(requestAnimationFrame(doAnimation))
             }
             const currentValue = from + (to - from) * timingFunction(delta)
             callback(currentValue)
         }
-        requestAnimationFrame(doAnimation)
+        acknowledgeRequestAnimationId(requestAnimationFrame(doAnimation))
     }
 }

js/entity/ObjectEntity.js

@@ -15,6 +15,7 @@ import UnionType from "./UnionType.js"
 import UnknownPinEntity from "./UnknownPinEntity.js"
 import Utility from "../Utility.js"
 import VariableReferenceEntity from "./VariableReferenceEntity.js"
+import MirroredEntity from "./MirroredEntity.js"
 
 export default class ObjectEntity extends IEntity {
 

js/template/BlueprintTemplate.js

@@ -62,6 +62,13 @@ export default class BlueprintTemplate extends ITemplate {
         super.initialize(element)
         this.element.style.cssText = Object.entries(BlueprintTemplate.styleVariables)
             .map(([k, v]) => `${k}:${v};`).join("")
+        const htmlTemplate =  /** @type {HTMLTemplateElement} */(
+            this.element.querySelector(":scope > template")
+        )?.content.textContent
+        if (htmlTemplate) {
+            this.element.requestUpdate()
+            this.element.updateComplete.then(() => this.getPasteInputObject().pasted(htmlTemplate))
+        }
     }
 
     setup() {

js/template/node/CommentNodeTemplate.js

@@ -76,7 +76,7 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
     /** @param {Number} value */
     setSizeX(value) {
         value = Math.round(value)
-        if (value >= Configuration.gridSet * Configuration.gridSize) {
+        if (value >= 2 * Configuration.gridSize) {
             this.element.setNodeWidth(value)
             return true
         }
@@ -86,7 +86,7 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
     /** @param {Number} value */
     setSizeY(value) {
         value = Math.round(value)
-        if (value >= 3 * Configuration.gridSize) {
+        if (value >= 2 * Configuration.gridSize) {
             this.element.setNodeHeight(value)
             return true
         }