Mergin better performance branch

js/template/BlueprintTemplate.js

@@ -1,8 +1,6 @@
-// @ts-check
-
+import { html } from "lit"
 import Configuration from "../Configuration"
 import Copy from "../input/common/Copy"
-import html from "./html"
 import ITemplate from "./ITemplate"
 import KeyboardCanc from "../input/keybaord/KeyboardCanc"
 import KeyboardEnableZoom from "../input/keybaord/KeyboardEnableZoom"
@@ -10,7 +8,6 @@ import KeyboardSelectAll from "../input/keybaord/KeyboardSelectAll"
 import MouseScrollGraph from "../input/mouse/MouseScrollGraph"
 import MouseTracking from "../input/mouse/MouseTracking"
 import Paste from "../input/common/Paste"
-import sanitizeText from "./sanitizeText"
 import Select from "../input/mouse/Select"
 import SelectorElement from "../element/SelectorElement"
 import Unfocus from "../input/mouse/Unfocus"
@@ -24,6 +21,33 @@ import Zoom from "../input/mouse/Zoom"
 
 export default class BlueprintTemplate extends ITemplate {
 
+    static styleVariables = {
+        "--ueb-font-size": `${Configuration.fontSize}`,
+        "--ueb-grid-axis-line-color": `${Configuration.gridAxisLineColor}`,
+        "--ueb-grid-expand": `${Configuration.expandGridSize}px`,
+        "--ueb-grid-line-color": `${Configuration.gridLineColor}`,
+        "--ueb-grid-line-width": `${Configuration.gridLineWidth}px`,
+        "--ueb-grid-set-line-color": `${Configuration.gridSetLineColor}`,
+        "--ueb-grid-set": `${Configuration.gridSet}`,
+        "--ueb-grid-size": `${Configuration.gridSize}px`,
+        "--ueb-link-min-width": `${Configuration.linkMinWidth}`,
+        "--ueb-node-radius": `${Configuration.nodeRadius}px`,
+        "--ueb-pin-bool-color": `${Configuration.pinColor.bool}`,
+        "--ueb-pin-default-color": `${Configuration.pinColor.default}`,
+        "--ueb-pin-exec-color": `${Configuration.pinColor.exec}`,
+        "--ueb-pin-name-color": `${Configuration.pinColor.name}`,
+        "--ueb-pin-real-color": `${Configuration.pinColor.real}`,
+        "--ueb-pin-string-color": `${Configuration.pinColor.string}`,
+        "--ueb-pin-struct-color": `${Configuration.pinColor.struct}`,
+    }
+
+    /**
+    * @param {Blueprint} blueprint
+    */
+    constructed(blueprint) {
+        blueprint.style.cssText = Object.entries(BlueprintTemplate.styleVariables).map(([k, v]) => `${k}:${v};`).join("")
+    }
+
     /**
      * @param {Blueprint} blueprint
      */
@@ -55,36 +79,22 @@ export default class BlueprintTemplate extends ITemplate {
     }
 
     /**
-     * @param {Blueprint} element
+     * Computes the html content of the target element.
+     * @param {Blueprint} element Target element
+     * @returns The computed html
      */
-    header(element) {
+    render(element) {
         return html`
             <div class="ueb-viewport-header">
                 <div class="ueb-viewport-zoom">1:1</div>
             </div>
-        `
-    }
-
-    /**
-     * @param {Blueprint} element
-     */
-    overlay(element) {
-        return html`
             <div class="ueb-viewport-overlay"></div>
-        `
-    }
-
-    /**
-     * @param {Blueprint} element
-     */
-    viewport(element) {
-        return html`
             <div class="ueb-viewport-body">
                 <div class="ueb-grid" style="
-                    --ueb-additional-x:${sanitizeText(element.additional[0])};
-                    --ueb-additional-y:${sanitizeText(element.additional[1])};
-                    --ueb-translate-x:${sanitizeText(element.translateValue[0])};
-                    --ueb-translate-y:${sanitizeText(element.translateValue[1])};
+                    --ueb-additional-x: ${element};
+                    --ueb-additional-y: ${element.translateY};
+                    --ueb-translate-x: ${element.translateX};
+                    --ueb-translate-y: ${element.translateY};
                 ">
                     <div class="ueb-grid-content">
                         <div data-links></div>
@@ -96,100 +106,43 @@ export default class BlueprintTemplate extends ITemplate {
     }
 
     /**
-     * Computes the html content of the target element.
-     * @param {Blueprint} element Target element
-     * @returns The computed html
+     * @param {Blueprint} blueprint
+     * @param {Map} changedProperties
      */
-    render(element) {
-        return html`
-            ${this.header(element)}
-            ${this.overlay(element)}
-            ${this.viewport(element)}
-        `
-    }
-
-    /**
-     * Applies the style to the element.
-     * @param {Blueprint} blueprint The blueprint element
-     */
-    setup(blueprint) {
-        super.setup(blueprint)
-        blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
-        Object.entries({
-            "--ueb-font-size": sanitizeText(Configuration.fontSize),
-            "--ueb-grid-size": `${sanitizeText(Configuration.gridSize)}px`,
-            "--ueb-grid-line-width": `${sanitizeText(Configuration.gridLineWidth)}px`,
-            "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor),
-            "--ueb-grid-set": sanitizeText(Configuration.gridSet),
-            "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor),
-            "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor),
-            "--ueb-node-radius": `${sanitizeText(Configuration.nodeRadius)}px`,
-            "--ueb-link-min-width": sanitizeText(Configuration.linkMinWidth)
-        }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1]))
-        blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
-        blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
-        blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body')
+    firstUpdated(blueprint, changedProperties) {
+        super.firstUpdated(blueprint, changedProperties)
+        blueprint.headerElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-header'))
+        blueprint.overlayElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-overlay'))
+        blueprint.viewportElement = /** @type {HTMLElement} */(blueprint.querySelector('.ueb-viewport-body'))
         blueprint.selectorElement = new SelectorElement()
-        blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
-        blueprint.querySelector(".ueb-grid-content").append(blueprint.selectorElement)
-        blueprint.linksContainerElement = blueprint.querySelector("[data-links]")
+        blueprint.querySelector(".ueb-grid-content")?.append(blueprint.selectorElement)
+        blueprint.gridElement = /** @type {HTMLElement} */(blueprint.viewportElement.querySelector(".ueb-grid"))
+        blueprint.linksContainerElement = /** @type {HTMLElement} */(blueprint.querySelector("[data-links]"))
         blueprint.linksContainerElement.append(...blueprint.getLinks())
-        blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
+        blueprint.nodesContainerElement = /** @type {HTMLElement} */(blueprint.querySelector("[data-nodes]"))
         blueprint.nodesContainerElement.append(...blueprint.getNodes())
-        this.applyEndDragScrolling(blueprint)
+        blueprint.viewportElement.scroll(Configuration.expandGridSize, Configuration.expandGridSize)
     }
 
-    /**
-     * Applies the style to the element.
-     * @param {Blueprint} blueprint The blueprint element
-     */
-    applyZoom(blueprint, newZoom) {
-        blueprint.classList.remove("ueb-zoom-" + sanitizeText(blueprint.zoom))
-        blueprint.classList.add("ueb-zoom-" + sanitizeText(newZoom))
-    }
 
     /**
-     * Applies the style to the element.
-     * @param {Blueprint} blueprint The blueprint element
+     * @param {Blueprint} blueprint
+     * @param {Map} changedProperties
      */
-    applyExpand(blueprint) {
-        blueprint.gridElement.style.setProperty("--ueb-additional-x", sanitizeText(blueprint.additional[0]))
-        blueprint.gridElement.style.setProperty("--ueb-additional-y", sanitizeText(blueprint.additional[1]))
-    }
-
-    /**
-     * Applies the style to the element.
-     * @param {Blueprint} blueprint The blueprint element
-     */
-    applyTranlate(blueprint) {
-        blueprint.gridElement.style.setProperty("--ueb-translate-x", sanitizeText(blueprint.translateValue[0]))
-        blueprint.gridElement.style.setProperty("--ueb-translate-y", sanitizeText(blueprint.translateValue[1]))
-    }
-
-    /**
-     * Applies the style to the element.
-     * @param {Blueprint} blueprint The blueprint element
-     */
-    applyStartDragScrolling(blueprint) {
-        blueprint.dataset.dragScrolling = "true"
-    }
-
-    /**
-     * Applies the style to the element.
-     * @param {Blueprint} blueprint The blueprint element
-     */
-    applyEndDragScrolling(blueprint) {
-        blueprint.dataset.dragScrolling = "false"
+    updated(blueprint, changedProperties) {
+        super.updated(blueprint, changedProperties)
+        if (changedProperties.has("scrollX") || changedProperties.has("scrollY")) {
+            blueprint.viewportElement.scroll(blueprint.scrollX, blueprint.scrollY)
+        }
     }
 
     /**
      * @param {Blueprint} blueprint
      * @param {PinReferenceEntity} pinReference
-     * @returns {PinElement}
      */
     getPin(blueprint, pinReference) {
-        return blueprint.querySelector(
+        return /** @type {PinElement} */(blueprint.querySelector(
             `ueb-node[data-name="${pinReference.objectName}"] ueb-pin[data-id="${pinReference.pinGuid}"]`
-        )
+        ))
     }
 }