Additional pin templates type

js/template/ExecPinTemplate.js

@@ -0,0 +1,19 @@
+import html from "./html"
+import PinTemplate from "./PinTemplate"
+
+/**
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+export default class ExecPinTemplate extends PinTemplate {
+
+    /**
+     * @param {PinElement} pin
+     */
+    renderIcon(pin) {
+        return html`
+            <svg class="ueb-pin-icon-exec" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                <path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h7.08a2 2 0 0 0 1.519-.698l4.843-5.651a1 1 0 0 0 0-1.302L10.6 1.7A2 2 0 0 0 9.08 1H2zm7.08 1a1 1 0 0 1 .76.35L14.682 8l-4.844 5.65a1 1 0 0 1-.759.35H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h7.08z"/>
+            </svg>
+        `
+    }
+}

js/template/ITemplate.js

@@ -1,23 +1,21 @@
+// @ts-check
 /**
  * @typedef {import("../element/IElement").default} IElement
  */
 export default class ITemplate {
 
     /**
-     * Computes the html content of the target element.
-     * @param {IElement} entity Element of the graph
-     * @returns The result html
+     * @param {IElement} entity
      */
     render(entity) {
         return ""
     }
 
     /**
-     * Applies the style to the element.
-     * @param {IElement} element Element of the graph
+     * @param {IElement} element
      */
     apply(element) {
-        // TODO replace with the safer element.setHTML(...) when it will be available
+        // TODO replace with the safer element.setHTML(...) when it will be availableBreack
         element.innerHTML = this.render(element)
     }
 }

js/template/LinkMessageTemplate.js

@@ -9,7 +9,6 @@ import sanitizeText from "./sanitizeText"
 export default class LinkMessageTemplate extends ITemplate {
 
     /**
-     * Computes the html content of the target element.
      * @param {LinkMessageElement} linkMessage
      */
     render(linkMessage) {
@@ -24,7 +23,7 @@ export default class LinkMessageTemplate extends ITemplate {
      * @param {LinkMessageElement} linkMessage
      */
     apply(linkMessage) {
-        super.apply(linkMessage)
+        const a = super.apply(linkMessage)
         const linkMessageSetup = _ => linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message(
             linkMessage.linkElement.getSourcePin(),
             linkMessage.linkElement.getDestinationPin()

js/template/PinTemplate.js

@@ -18,17 +18,38 @@ export default class PinTemplate extends ITemplate {
     render(pin) {
         if (pin.isInput()) {
             return html`
-                <span class="ueb-pin-icon"></span>
-                ${sanitizeText(pin.getPinDisplayName())}
+                <span class="ueb-pin-icon">
+                    ${this.renderIcon(pin)}
+                </span>
+                <span class="ueb-pin-content">
+                    <span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
+                    ${this.renderInput(pin)}
+                </span>
             `
         } else {
             return html`
-                ${sanitizeText(pin.getPinDisplayName())}
-                <span class="ueb-pin-icon"></span>
+                <span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
+                <span class="ueb-pin-icon">
+                    ${this.renderIcon(pin)}
+                </span>
             `
         }
     }
 
+    /**
+     * @param {PinElement} pin
+     */
+    renderIcon(pin) {
+        return '<span class="ueb-pin-icon-value"></span>'
+    }
+
+    /**
+     * @param {PinElement} pin
+     */
+    renderInput(pin) {
+        return ""
+    }
+
     /**
      * Applies the style to the element.
      * @param {PinElement} pin element of the graph

js/template/StringPinTemplate.js

@@ -0,0 +1,17 @@
+import html from "./html"
+import PinTemplate from "./PinTemplate"
+
+/**
+ * @typedef {import("../element/PinElement").default} PinElement
+ */
+export default class StringPinTemplate extends PinTemplate {
+
+    /**
+     * @param {PinElement} pin
+     */
+    renderInput(pin) {
+        return html`
+            <span class="ueb-pin-input" role="textbox" contenteditable="true"></span>
+        `
+    }
+}