Refactoring

js/template/LinkTemplate.js

@@ -1,49 +1,49 @@
-import html from "./html"
-import Template from "./Template"
-
-/**
- * @typedef {import("../graph/GraphLink").default} GraphLink
- */
-export default class LinkTemplate extends Template {
-
-    /**
-     * Computes the html content of the target element.
-     * @param {GraphLink} link Link connecting two graph nodes 
-     * @returns The result html 
-     */
-    render(link) {
-        return html`
-            <svg viewBox="0 0 100 100">
-                <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
-            </svg>
-        `
-    }
-
-    /**
-     * Applies the style to the element.
-     * @param {GraphLink} link Element of the graph
-     */
-    apply(link) {
-        super.apply(link)
-
-    }
-
-    /**
-     * Applies the style relative to the source pin location.
-     * @param {GraphLink} link Link element
-     */
-    applySourceLocation(link, initialPosition) {
-        // Set initial position
-        link.style.setProperty("--ueb-link-from-x", sanitizeText(initialPosition[0]))
-        link.style.setProperty("--ueb-link-from-y", sanitizeText(initialPosition[1]))
-    }
-
-    /**
-     * Applies the style relative to the destination pin location.
-     * @param {GraphLink} link Link element
-     */
-    applyDestinationLocation(link, finalPosition) {
-        link.style.setProperty("--ueb-link-to-x", sanitizeText(finalPosition[0]))
-        link.style.setProperty("--ueb-link-to-y", sanitizeText(finalPosition[1]))
-    }
-}
+import html from "./html"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/GraphLink").default} GraphLink
+ */
+export default class LinkTemplate extends Template {
+
+    /**
+     * Computes the html content of the target element.
+     * @param {GraphLink} link Link connecting two graph nodes 
+     * @returns The result html 
+     */
+    render(link) {
+        return html`
+            <svg viewBox="0 0 100 100">
+                <line x1="0" y1="80" x2="100" y2="20" stroke="black" />
+            </svg>
+        `
+    }
+
+    /**
+     * Applies the style to the element.
+     * @param {GraphLink} link Element of the graph
+     */
+    apply(link) {
+        super.apply(link)
+
+    }
+
+    /**
+     * Applies the style relative to the source pin location.
+     * @param {GraphLink} link Link element
+     */
+    applySourceLocation(link, initialPosition) {
+        // Set initial position
+        link.style.setProperty("--ueb-link-from-x", sanitizeText(initialPosition[0]))
+        link.style.setProperty("--ueb-link-from-y", sanitizeText(initialPosition[1]))
+    }
+
+    /**
+     * Applies the style relative to the destination pin location.
+     * @param {GraphLink} link Link element
+     */
+    applyDestinationLocation(link, finalPosition) {
+        link.style.setProperty("--ueb-link-to-x", sanitizeText(finalPosition[0]))
+        link.style.setProperty("--ueb-link-to-y", sanitizeText(finalPosition[1]))
+    }
+}

js/template/PinTemplate.js

@@ -1,38 +1,38 @@
-import html from "./html"
-import sanitizeText from "./sanitizeText"
-import Template from "./Template"
-
-/**
- * @typedef {import("../graph/GraphPin").default} GraphPin
- */
-export default class PinTemplate extends Template {
-
-    /**
-     * Computes the html content of the pin.
-     * @param {GraphPin} pin Pin entity 
-     * @returns The result html 
-     */
-    render(pin) {
-        if (pin.isInput()) {
-            return html`
-                <span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
-                ${sanitizeText(pin.getPinDisplayName())}
-            `
-        } else {
-            return html`
-                ${sanitizeText(pin.getPinDisplayName())}
-                <span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
-            `
-        }
-    }
-
-    /**
-     * Applies the style to the element.
-     * @param {GraphPin} pin Element of the graph
-     */
-    apply(pin) {
-        super.apply(pin)
-        pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText(pin.getType()))
-        pin.clickableElement = pin.querySelector(".ueb-node-value-icon")
-    }
+import html from "./html"
+import sanitizeText from "./sanitizeText"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/GraphPin").default} GraphPin
+ */
+export default class PinTemplate extends Template {
+
+    /**
+     * Computes the html content of the pin.
+     * @param {GraphPin} pin Pin entity 
+     * @returns The result html 
+     */
+    render(pin) {
+        if (pin.isInput()) {
+            return html`
+                <span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
+                ${sanitizeText(pin.getPinDisplayName())}
+            `
+        } else {
+            return html`
+                ${sanitizeText(pin.getPinDisplayName())}
+                <span class="ueb-node-value-icon ${pin.isConnected() ? 'ueb-node-value-fill' : ''}"></span>
+            `
+        }
+    }
+
+    /**
+     * Applies the style to the element.
+     * @param {GraphPin} pin Element of the graph
+     */
+    apply(pin) {
+        super.apply(pin)
+        pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText(pin.getType()))
+        pin.clickableElement = pin.querySelector(".ueb-node-value-icon")
+    }
 }

js/template/SelectableDraggableTemplate.js

@@ -1,29 +1,29 @@
-import sanitizeText from "./sanitizeText"
-import Template from "./Template"
-
-/**
- * @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable
- */
-export default class SelectableDraggableTemplate extends Template {
-
-    /**
-     * Returns the html elements rendered from this template.
-     * @param {SelectableDraggable} element Element of the graph
-     */
-    applyLocation(element) {
-        element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0]))
-        element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1]))
-    }
-
-    /**
-     * Returns the html elements rendered from this template.
-     * @param {SelectableDraggable} element Element of the graph
-     */
-    applySelected(element) {
-        if (element.selected) {
-            element.classList.add("ueb-selected")
-        } else {
-            element.classList.remove("ueb-selected")
-        }
-    }
-}
+import sanitizeText from "./sanitizeText"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable
+ */
+export default class SelectableDraggableTemplate extends Template {
+
+    /**
+     * Returns the html elements rendered from this template.
+     * @param {SelectableDraggable} element Element of the graph
+     */
+    applyLocation(element) {
+        element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0]))
+        element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1]))
+    }
+
+    /**
+     * Returns the html elements rendered from this template.
+     * @param {SelectableDraggable} element Element of the graph
+     */
+    applySelected(element) {
+        if (element.selected) {
+            element.classList.add("ueb-selected")
+        } else {
+            element.classList.remove("ueb-selected")
+        }
+    }
+}

js/template/SelectorTemplate.js

@@ -1,49 +1,49 @@
-import sanitizeText from "./sanitizeText"
-import Template from "./Template"
-
-/**
- * @typedef {import("../graph/GraphSelector").default} GraphSelector
- */
-export default class SelectorTemplate extends Template {
-
-    /**
-     * Applies the style to the element.
-     * @param {GraphSelector} selector Selector element
-     */
-    apply(selector) {
-        super.apply(selector)
-        selector.classList.add("ueb-selector")
-        this.applyFinishSelecting(selector)
-    }
-
-    /**
-     * Applies the style relative to selection beginning.
-     * @param {GraphSelector} selector Selector element
-     */
-    applyStartSelecting(selector, initialPosition) {
-        // Set initial position
-        selector.style.setProperty("--ueb-select-from-x", sanitizeText(initialPosition[0]))
-        selector.style.setProperty("--ueb-select-from-y", sanitizeText(initialPosition[1]))
-        // Final position coincide with the initial position, at the beginning of selection
-        selector.style.setProperty("--ueb-select-to-x", sanitizeText(initialPosition[0]))
-        selector.style.setProperty("--ueb-select-to-y", sanitizeText(initialPosition[1]))
-        selector.dataset.selecting = "true"
-    }
-
-    /**
-     * Applies the style relative to selection.
-     * @param {GraphSelector} selector Selector element
-     */
-    applyDoSelecting(selector, finalPosition) {
-        selector.style.setProperty("--ueb-select-to-x", sanitizeText(finalPosition[0]))
-        selector.style.setProperty("--ueb-select-to-y", sanitizeText(finalPosition[1]))
-    }
-
-    /**
-     * Applies the style relative to selection finishing.
-     * @param {GraphSelector} selector Selector element
-     */
-    applyFinishSelecting(selector) {
-        selector.dataset.selecting = "false"
-    }
-}
+import sanitizeText from "./sanitizeText"
+import Template from "./Template"
+
+/**
+ * @typedef {import("../graph/GraphSelector").default} GraphSelector
+ */
+export default class SelectorTemplate extends Template {
+
+    /**
+     * Applies the style to the element.
+     * @param {GraphSelector} selector Selector element
+     */
+    apply(selector) {
+        super.apply(selector)
+        selector.classList.add("ueb-selector")
+        this.applyFinishSelecting(selector)
+    }
+
+    /**
+     * Applies the style relative to selection beginning.
+     * @param {GraphSelector} selector Selector element
+     */
+    applyStartSelecting(selector, initialPosition) {
+        // Set initial position
+        selector.style.setProperty("--ueb-select-from-x", sanitizeText(initialPosition[0]))
+        selector.style.setProperty("--ueb-select-from-y", sanitizeText(initialPosition[1]))
+        // Final position coincide with the initial position, at the beginning of selection
+        selector.style.setProperty("--ueb-select-to-x", sanitizeText(initialPosition[0]))
+        selector.style.setProperty("--ueb-select-to-y", sanitizeText(initialPosition[1]))
+        selector.dataset.selecting = "true"
+    }
+
+    /**
+     * Applies the style relative to selection.
+     * @param {GraphSelector} selector Selector element
+     */
+    applyDoSelecting(selector, finalPosition) {
+        selector.style.setProperty("--ueb-select-to-x", sanitizeText(finalPosition[0]))
+        selector.style.setProperty("--ueb-select-to-y", sanitizeText(finalPosition[1]))
+    }
+
+    /**
+     * Applies the style relative to selection finishing.
+     * @param {GraphSelector} selector Selector element
+     */
+    applyFinishSelecting(selector) {
+        selector.dataset.selecting = "false"
+    }
+}

js/template/html.js

@@ -1,2 +1,2 @@
-const html = String.raw
-export default html
+const html = String.raw
+export default html

js/template/sanitizeText.js

@@ -1,18 +1,18 @@
-const div = document.createElement("div")
-
-const tagReplacement = {
-    '&': '&',
-    '<': '&lt;',
-    '>': '&gt;',
-    "'": '&#39;',
-    '"': '&quot;'
-}
-
-function sanitizeText(value) {
-    if (value.constructor === String) {
-        return value.replace(/[&<>'"]/g, tag => tagReplacement[tag])
-    }
-    return value
-}
-
+const div = document.createElement("div")
+
+const tagReplacement = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    "'": '&#39;',
+    '"': '&quot;'
+}
+
+function sanitizeText(value) {
+    if (value.constructor === String) {
+        return value.replace(/[&<>'"]/g, tag => tagReplacement[tag])
+    }
+    return value
+}
+
 export default sanitizeText