@@ -87,6 +69,28 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
return this.element.getNodeDisplayName()
}
+ renderTop() {
+ const icon = this.renderNodeIcon()
+ const name = this.renderNodeName()
+ return html`
+
+ ${icon ? html`
+
${icon}
+ ` : nothing}
+ ${name ? html`
+
+ ${name}
+ ${this.hasSubtitle && this.element.entity.FunctionReference.MemberParent ? html`
+
+ Target is ${Utility.formatStringName(this.element.entity.FunctionReference.MemberParent.getName())}
+
+ `: nothing}
+
+ ` : nothing}
+
+ `
+ }
+
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
@@ -111,9 +115,7 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
return this.element.getPinEntities()
.filter(v => !v.isHidden())
.map(pinEntity => {
- if (!this.#hasTargetInputNode && pinEntity.getDisplayName() == "Target") {
- this.#hasTargetInputNode = true
- }
+ this.hasSubtitle = this.hasSubtitle || pinEntity.getDisplayName() === "Target"
let pinElement = /** @type {PinElementConstructor} */(ElementFactory.getConstructor("ueb-pin"))
.newObject(pinEntity, undefined, this.element)
return pinElement
diff --git a/js/template/pin/IInputPinTemplate.js b/js/template/pin/IInputPinTemplate.js
index 77daf67..019dcd6 100644
--- a/js/template/pin/IInputPinTemplate.js
+++ b/js/template/pin/IInputPinTemplate.js
@@ -49,16 +49,16 @@ export default class IInputPinTemplate extends PinTemplate {
setup() {
super.setup()
- this.#inputContentElements.forEach(element => {
+ this.#inputContentElements.forEach(element =>
element.addEventListener("focusout", this.#onFocusOutHandler)
- })
+ )
}
cleanup() {
super.cleanup()
- this.#inputContentElements.forEach(element => {
+ this.#inputContentElements.forEach(element =>
element.removeEventListener("focusout", this.#onFocusOutHandler)
- })
+ )
}
createInputObjects() {
diff --git a/js/template/pin/KnotPinTemplate.js b/js/template/pin/KnotPinTemplate.js
index 672edaa..888dac1 100644
--- a/js/template/pin/KnotPinTemplate.js
+++ b/js/template/pin/KnotPinTemplate.js
@@ -1,13 +1,13 @@
import { html } from "lit"
-import PinTemplate from "./PinTemplate"
+import MinimalPinTemplate from "./MinimalPinTemplate"
import Utility from "../../Utility"
/** @typedef {import("../node/KnotNodeTemplate").default} KnotNodeTemplate */
-export default class KnotPinTemplate extends PinTemplate {
+export default class KnotPinTemplate extends MinimalPinTemplate {
render() {
- return this.element.isOutput() ? html`
${this.renderIcon()}
` : html``
+ return this.element.isOutput() ? super.render() : html``
}
getLinkLocation() {
@@ -17,13 +17,8 @@ export default class KnotPinTemplate extends PinTemplate {
: this
)
.iconElement.getBoundingClientRect()
- const location = Utility.convertLocation(
- [
- this.element.isInput() ? rect.left + 1 : rect.right + 2,
- (rect.top + rect.bottom) / 2,
- ],
- this.blueprint.template.gridElement
- )
+ const boundingLocation = [this.element.isInput() ? rect.left : rect.right, (rect.top + rect.bottom) / 2]
+ const location = Utility.convertLocation(boundingLocation, this.blueprint.template.gridElement)
return this.blueprint.compensateTranslation(location[0], location[1])
}
}
diff --git a/js/template/pin/MinimalPinTemplate.js b/js/template/pin/MinimalPinTemplate.js
new file mode 100644
index 0000000..2925659
--- /dev/null
+++ b/js/template/pin/MinimalPinTemplate.js
@@ -0,0 +1,9 @@
+import { html } from "lit"
+import PinTemplate from "./PinTemplate"
+
+export default class MinimalPinTemplate extends PinTemplate {
+
+ render() {
+ return html`
${this.renderIcon()}
`
+ }
+}
diff --git a/js/template/pin/PinTemplate.js b/js/template/pin/PinTemplate.js
index 356b3c8..00a5d51 100755
--- a/js/template/pin/PinTemplate.js
+++ b/js/template/pin/PinTemplate.js
@@ -68,11 +68,13 @@ export default class PinTemplate extends ITemplate {
}
renderIcon() {
- if (this.element.entity.PinType.ContainerType.toString() == "Array") {
- return SVGIcon.array
+ switch (this.element.entity.PinType.ContainerType.toString()) {
+ case "Array": return SVGIcon.array
+ case "Set": return SVGIcon.set
+ case "Map": return SVGIcon.map
}
- if (this.element.entity.PinType.ContainerType.toString() == "Set") {
- return SVGIcon.set
+ if (this.element.entity.PinType.PinCategory === "delegate") {
+ return SVGIcon.delegate
}
return SVGIcon.genericPin
}
@@ -101,7 +103,7 @@ export default class PinTemplate extends ITemplate {
/** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
- this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.getPinColor(this.element).cssText)
+ this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.pinColor(this.element).cssText)
this.#iconElement = this.element.querySelector(".ueb-pin-icon svg") ?? this.element
}
diff --git a/scss/ueb-node.scss b/scss/ueb-node.scss
index e50f91d..8d62358 100644
--- a/scss/ueb-node.scss
+++ b/scss/ueb-node.scss
@@ -71,6 +71,13 @@ ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-node-wrapper
white-space: nowrap;
}
+ueb-node.ueb-node-style-event .ueb-node-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-right: 8px;
+}
+
.ueb-node-style-default .ueb-node-top {
padding: 3px 20px 2px 6px;
box-shadow:
diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss
index 09ea207..4d51e0d 100644
--- a/scss/ueb-pin.scss
+++ b/scss/ueb-pin.scss
@@ -17,6 +17,10 @@ ueb-pin {
min-height: 30px;
}
+.ueb-node-top ueb-pin {
+ min-height: 0;
+}
+
.ueb-zoom--10 ueb-pin {
visibility: hidden;
}