New icons and types

js/template/IntPinTemplate.js

@@ -1,4 +1,5 @@
 import { html } from "lit"
+import IntegerEntity from "../entity/IntegerEntity"
 import INumericPinTemplate from "./INumericPinTemplate"
 
 /** @typedef {import("../entity/IntegerEntity").default} IntEntity */
@@ -7,13 +8,13 @@ import INumericPinTemplate from "./INumericPinTemplate"
 export default class IntPinTemplate extends INumericPinTemplate {
 
     setDefaultValue(values = [], rawValues = values) {
-        this.element.setDefaultValue(values[0])
+        this.element.setDefaultValue(new IntegerEntity(values[0]))
     }
 
     renderInput() {
         return html`
             <div class="ueb-pin-input">
-                <ueb-input .singleLine="${true}" .innerText="${this.element.entity.DefaultValue.toString()}">
+                <ueb-input .singleLine="${true}" .innerText="${this.element.entity.DefaultValue?.toString() ?? "0"}">
                 </ueb-input>
             </div>
         `

js/template/KnotPinTemplate.js

@@ -1,13 +1,13 @@
 import { html } from "lit"
-import Utility from "../Utility"
 import PinTemplate from "./PinTemplate"
+import Utility from "../Utility"
 
 /** @typedef {import("./KnotNodeTemplate").default} KnotNodeTemplate */
 
 export default class KnotPinTemplate extends PinTemplate {
 
     render() {
-        return this.element.isOutput() ? this.renderIcon() : html``
+        return this.element.isOutput() ? html`<div class="ueb-pin-icon">${this.renderIcon()}</div>` : html``
     }
 
     getLinkLocation() {

js/template/LinearColorPinTemplate.js

@@ -22,7 +22,8 @@ export default class LinearColorPinTemplate extends PinTemplate {
     #launchColorPickerWindow =
         /** @param {MouseEvent} e */
         e => {
-            //e.preventDefault()
+            e.preventDefault()
+            this.element.blueprint.setFocused(true)
             this.#window = /** @type {WindowElement} */ (
                 new (ElementFactory.getConstructor("ueb-window"))({
                     type: ColorPickerWindowTemplate,

js/template/LinkTemplate.js

@@ -162,7 +162,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
                     <use href="#${uniqueId}" pointer-events="stroke" stroke-width="20" />
                 </g>
             </svg>
-            ${this.element.linkMessageIcon != "" || this.element.linkMessageText != "" ? html`
+            ${this.element.linkMessageIcon || this.element.linkMessageText ? html`
                 <div class="ueb-link-message">
                     <span class="ueb-link-message-icon">${this.element.linkMessageIcon}</span>
                     <span class="ueb-link-message-text">${this.element.linkMessageText}</span>

js/template/NodeTemplate.js

@@ -1,4 +1,5 @@
 import { html, nothing } from "lit"
+import Configuration from "../Configuration"
 import ElementFactory from "../element/ElementFactory"
 import ISelectableDraggableTemplate from "./ISelectableDraggableTemplate"
 import SVGIcon from "../SVGIcon"
@@ -11,6 +12,15 @@ import SVGIcon from "../SVGIcon"
 /** @extends {ISelectableDraggableTemplate<NodeElement>} */
 export default class NodeTemplate extends ISelectableDraggableTemplate {
 
+    static #nodeIcon = {
+        [Configuration.nodeType.callFunction]: SVGIcon.functionSymbol,
+        [Configuration.nodeType.forEachLoop]: SVGIcon.forEachLoop,
+        [Configuration.nodeType.forLoop]: SVGIcon.loopNode,
+        [Configuration.nodeType.ifThenElse]: SVGIcon.branchNode,
+        [Configuration.nodeType.whileLoop]: SVGIcon.loopNode,
+        default: SVGIcon.functionSymbol
+    }
+
     toggleAdvancedDisplayHandler = () => {
         this.element.toggleShowAdvancedPinDisplay()
         this.element.addNextUpdatedCallbacks(() => this.element.dispatchReflowEvent(), true)
@@ -27,7 +37,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
                 <div class="ueb-node-wrapper">
                     <div class="ueb-node-top">
                         <div class="ueb-node-name">
-                            <span class="ueb-node-name-symbol">${SVGIcon.functionSymbol}</span>
+                            <span class="ueb-node-name-symbol">${this.renderNodeIcon()}</span>
                             <span class="ueb-node-name-text ueb-ellipsis-nowrap-text">
                                 ${this.renderNodeName()}
                             </span>
@@ -52,6 +62,17 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
         `
     }
 
+    renderNodeIcon() {
+        let icon = NodeTemplate.#nodeIcon[this.element.getType()]
+        if (icon) {
+            return icon
+        }
+        if (this.element.entity.getClass() === Configuration.nodeType.macro) {
+            return SVGIcon.macro
+        }
+        return NodeTemplate.#nodeIcon.default
+    }
+
     renderNodeName() {
         return this.element.getNodeDisplayName()
     }

js/template/PinTemplate.js

@@ -38,7 +38,7 @@ export default class PinTemplate extends ITemplate {
     }
 
     render() {
-        const icon = this.renderIcon()
+        const icon = html`<div class="ueb-pin-icon">${this.renderIcon()}</div>`
         const content = html`
             <div class="ueb-pin-content">
                 ${this.renderName()}