@@ -4568,106 +4635,47 @@ 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}"]`
- )
+ ))
}
}
-// @ts-check
-
/**
* @typedef {import("./element/PinElement").default} PinElement
* @typedef {import("./entity/GuidEntity").default} GuidEntity
@@ -4679,27 +4687,60 @@ class BlueprintTemplate extends ITemplate {
*/
class Blueprint extends IElement {
- /** @type {Number[]} */
- #additional
- get additional() {
- return this.#additional
- }
- set additional(value) {
- value[0] = Math.abs(value[0]);
- value[1] = Math.abs(value[1]);
- }
- /** @type {Number[]} */
- #translateValue
- get translateValue() {
- return this.#translateValue
- }
- set translateValue(value) {
- this.#translateValue = value;
+ static properties = {
+ selecting: {
+ type: Boolean,
+ attribute: "data-selecting",
+ reflect: true,
+ converter: Utility.booleanConverter,
+ },
+ scrolling: {
+ type: Boolean,
+ attribute: "data-scrolling",
+ reflect: true,
+ converter: Utility.booleanConverter,
+ },
+ focused: {
+ type: Boolean,
+ attribute: "data-focused",
+ reflect: true,
+ converter: Utility.booleanConverter,
+ },
+ zoom: {
+ type: Number,
+ attribute: "data-zoom",
+ reflect: true,
+ },
+ scrollX: {
+ type: Number,
+ attribute: false,
+ },
+ scrollY: {
+ type: Number,
+ attribute: false,
+ },
+ additionalX: {
+ type: Number,
+ attribute: false,
+ },
+ additionalY: {
+ type: Number,
+ attribute: false,
+ },
+ translateX: {
+ type: Number,
+ attribute: false,
+ },
+ translateY: {
+ type: Number,
+ attribute: false,
+ },
}
+
+ static styles = BlueprintTemplate.styles
+
/** @type {Map
} */
#nodeNameCounter = new Map()
- /** @type {Number} */
- gridSize
/** @type {NodeElement[]}" */
nodes = []
/** @type {LinkElement[]}" */
@@ -4707,21 +4748,19 @@ class Blueprint extends IElement {
/** @type {Number[]} */
mousePosition = [0, 0]
/** @type {HTMLElement} */
- gridElement = null
+ gridElement
/** @type {HTMLElement} */
- viewportElement = null
+ viewportElement
/** @type {HTMLElement} */
- overlayElement = null
+ overlayElement
/** @type {SelectorElement} */
- selectorElement = null
+ selectorElement
/** @type {HTMLElement} */
- linksContainerElement = null
+ linksContainerElement
/** @type {HTMLElement} */
- nodesContainerElement = null
- /** @type {Number} */
- zoom = 0
+ nodesContainerElement
/** @type {HTMLElement} */
- headerElement = null
+ headerElement
focused = false
nodeBoundariesSupplier = node => {
let rect = node.getBoundingClientRect();
@@ -4745,36 +4784,14 @@ class Blueprint extends IElement {
*/
constructor(settings = new Configuration()) {
super({}, new BlueprintTemplate());
- /** @type {Number} */
- this.gridSize = Configuration.gridSize;
- /** @type {Number[]} */
- this.#additional = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize];
- /** @type {Number[]} */
- this.#translateValue = [Configuration.expandGridSize, Configuration.expandGridSize];
- }
-
- /**
- * @param {Number} x
- * @param {Number} y
- */
- #expand(x, y) {
- x = Math.round(x);
- y = Math.round(y);
- this.additional[0] += x;
- this.additional[1] += y;
- this.template.applyExpand(this);
- }
-
- /**
- * @param {Number} x
- * @param {Number} y
- */
- #translate(x, y) {
- x = Math.round(x);
- y = Math.round(y);
- this.translateValue[0] += x;
- this.translateValue[1] += y;
- this.template.applyTranlate(this);
+ this.selecting = false;
+ this.scrolling = false;
+ this.focused = false;
+ this.zoom = 0;
+ this.scrollX = Configuration.expandGridSize;
+ this.scrollY = Configuration.expandGridSize;
+ this.translateX = Configuration.expandGridSize;
+ this.translateY = Configuration.expandGridSize;
}
getGridDOMElement() {
@@ -4786,57 +4803,34 @@ class Blueprint extends IElement {
}
getScroll() {
- return [this.viewportElement.scrollLeft, this.viewportElement.scrollTop]
+ return [this.scrollX, this.scrollY]
}
- setScroll(value, smooth = false) {
- this.scroll = value;
- if (!smooth) {
- this.viewportElement.scroll(value[0], value[1]);
- } else {
- this.viewportElement.scroll({
- left: value[0],
- top: value[1],
- behavior: "smooth"
- });
- }
+ setScroll([x, y], smooth = false) {
+ this.scrollX = x;
+ this.scrollY = y;
}
scrollDelta(delta, smooth = false) {
- const maxScroll = this.getScrollMax();
+ const maxScroll = [2 * Configuration.expandGridSize, 2 * Configuration.expandGridSize];
let currentScroll = this.getScroll();
let finalScroll = [
currentScroll[0] + delta[0],
currentScroll[1] + delta[1]
];
let expand = [0, 0];
- let shrink = [0, 0];
- let direction = [0, 0];
for (let i = 0; i < 2; ++i) {
if (delta[i] < 0 && finalScroll[i] < Configuration.gridExpandThreshold * Configuration.expandGridSize) {
// Expand left/top
- expand[i] = Configuration.expandGridSize;
- direction[i] = -1;
- if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * Configuration.expandGridSize) {
- shrink[i] = -Configuration.expandGridSize;
- }
+ expand[i] = -1;
} else if (delta[i] > 0 && finalScroll[i]
> maxScroll[i] - Configuration.gridExpandThreshold * Configuration.expandGridSize) {
// Expand right/bottom
- expand[i] = Configuration.expandGridSize;
- direction[i] = 1;
- if (finalScroll[i] > Configuration.gridShrinkThreshold * Configuration.expandGridSize) {
- shrink[i] = -Configuration.expandGridSize;
- }
+ expand[i] = 1;
}
}
if (expand[0] != 0 || expand[1] != 0) {
- this.seamlessExpand(expand, direction);
- direction = [
- -direction[0],
- -direction[1]
- ];
- this.seamlessExpand(shrink, direction);
+ this.seamlessExpand(expand);
}
currentScroll = this.getScroll();
finalScroll = [
@@ -4849,8 +4843,8 @@ class Blueprint extends IElement {
scrollCenter() {
const scroll = this.getScroll();
const offset = [
- this.translateValue[0] - scroll[0],
- this.translateValue[1] - scroll[1]
+ this.translateX - scroll[0],
+ this.translateY - scroll[1]
];
const targetOffset = this.getViewportSize().map(size => size / 2);
const deltaOffset = [
@@ -4860,10 +4854,6 @@ class Blueprint extends IElement {
this.scrollDelta(deltaOffset, true);
}
- getExpandGridSize() {
- return Configuration.expandGridSize
- }
-
getViewportSize() {
return [
this.viewportElement.clientWidth,
@@ -4883,41 +4873,30 @@ class Blueprint extends IElement {
}
snapToGrid(location) {
- return Utility.snapToGrid(location, this.gridSize)
+ return Utility.snapToGrid(location, Configuration.gridSize)
}
/**
- * @param {Number} x - Horizontal
- * @param {Number} y - Vertical expand value (negative means top, positive means bottom)
- * @param {Number} factor - Either 1 (expand) or -1 (shrink)
+ * @param {Number[]} param0
*/
-
- /**
- * Expand or shrink the grind indefinitely, the content will remain into position
- * @param {Number[]} param0 - Expand value (negative means shrink, positive means expand)
- * @param {Number[]} param1 - Direction of expansion (negative: left/top, position: right/bottom)
- */
- seamlessExpand([x, y], [directionX, directionY] = [1, 1]) {
- [
- this.viewportElement.scrollLeft,
- this.viewportElement.scrollTop
- ];
+ seamlessExpand([x, y]) {
+ x = Math.round(x);
+ y = Math.round(y);
let scale = this.getScale();
- let scaledX = x / scale;
- let scaledY = y / scale;
- // First expand the grid to contain the additional space
- this.#expand(scaledX, scaledY);
- // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
- const translate = [0, 0];
- if (directionX < 0) {
- this.viewportElement.scrollLeft += x;
- translate[0] = scaledX;
+ {
+ // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly
+ [x, y] = [-x * Configuration.expandGridSize, -y * Configuration.expandGridSize];
+ if (x != 0) {
+ this.scrollX += x;
+ x /= scale;
+ }
+ if (y != 0) {
+ this.scrollY += y;
+ y /= scale;
+ }
}
- if (directionY < 0) {
- this.viewportElement.scrollTop += y;
- translate[1] = scaledY;
- }
- this.#translate(translate[0], translate[1]);
+ this.translateX += x;
+ this.translateY += y;
}
progressiveSnapToGrid(x) {
@@ -4934,21 +4913,22 @@ class Blueprint extends IElement {
return
}
let initialScale = this.getScale();
- this.template.applyZoom(this, zoom);
this.zoom = zoom;
if (center) {
- center[0] += this.translateValue[0];
- center[1] += this.translateValue[1];
- let relativeScale = this.getScale() / initialScale;
- let newCenter = [
- relativeScale * center[0],
- relativeScale * center[1]
- ];
- this.scrollDelta([
- (newCenter[0] - center[0]) * initialScale,
- (newCenter[1] - center[1]) * initialScale
- ]);
+ requestAnimationFrame(_ => {
+ center[0] += this.translateX;
+ center[1] += this.translateY;
+ let relativeScale = this.getScale() / initialScale;
+ let newCenter = [
+ relativeScale * center[0],
+ relativeScale * center[1]
+ ];
+ this.scrollDelta([
+ (newCenter[0] - center[0]) * initialScale,
+ (newCenter[1] - center[1]) * initialScale
+ ]);
+ });
}
}
@@ -4957,12 +4937,12 @@ class Blueprint extends IElement {
}
/**
- * @param {Number[]} position
+ * @param {Number[]} param0
*/
- compensateTranslation(position) {
- position[0] -= this.translateValue[0];
- position[1] -= this.translateValue[1];
- return position
+ compensateTranslation([x, y]) {
+ x -= this.translateX;
+ y -= this.translateY;
+ return [x, y]
}
/**
@@ -4982,7 +4962,15 @@ class Blueprint extends IElement {
* @param {PinReferenceEntity} pinReference
*/
getPin(pinReference) {
- return this.template.getPin(this, pinReference)
+ /*let result = this.template.getPin(this, pinReference)
+ if (result) {
+ return result
+ }*/
+ return [... this.nodes
+ //.filter(n => !n.parentNode)
+ .find(n => pinReference.objectName.toString() == n.getNodeName())
+ ?.getPinElements() ?? []]
+ .find(p => pinReference.pinGuid.toString() == p.GetPinIdValue())
}
/**
@@ -4997,7 +4985,8 @@ class Blueprint extends IElement {
if (a != null && b != null) {
return this.links.filter(link =>
link.sourcePin == a && link.destinationPin == b
- || link.sourcePin == b && link.destinationPin == a)
+ || link.sourcePin == b && link.destinationPin == a
+ )
}
return this.links
}
@@ -5032,6 +5021,7 @@ class Blueprint extends IElement {
*/
addGraphElement(...graphElements) {
for (let element of graphElements) {
+ element.blueprint = this;
if (element instanceof NodeElement && !this.nodes.includes(element)) {
const nodeName = element.entity.getObjectName();
const homonymNode = this.nodes.find(node => node.entity.getObjectName() == nodeName);
@@ -5050,7 +5040,9 @@ class Blueprint extends IElement {
this.nodesContainerElement?.appendChild(element);
} else if (element instanceof LinkElement && !this.links.includes(element)) {
this.links.push(element);
- this.linksContainerElement?.appendChild(element);
+ if (this.linksContainerElement && !this.linksContainerElement.contains(element)) {
+ this.linksContainerElement.appendChild(element);
+ }
}
}
graphElements.filter(element => element instanceof NodeElement).forEach(
@@ -5084,7 +5076,6 @@ class Blueprint extends IElement {
}
let event = new CustomEvent(value ? "blueprint-focus" : "blueprint-unfocus");
this.focused = value;
- this.dataset.focused = this.focused ? "true" : "false";
if (!this.focused) {
this.unselectAll();
}
@@ -5103,8 +5094,6 @@ class Blueprint extends IElement {
customElements.define("ueb-blueprint", Blueprint);
-// @ts-check
-
/**
* @typedef {import("../entity/IEntity").default} IEntity
*/
@@ -5147,8 +5136,6 @@ class GeneralSerializer extends ISerializer {
}
}
-// @ts-check
-
/**
* @typedef {import("../entity/IEntity").default} IEntity
*/
@@ -5177,8 +5164,6 @@ class CustomSerializer extends GeneralSerializer {
}
}
-// @ts-check
-
class PinSerializer extends GeneralSerializer {
constructor() {
@@ -5191,15 +5176,12 @@ class PinSerializer extends GeneralSerializer {
*/
writeValue(value, fullKey, insideString) {
if (value?.constructor === String && fullKey.length == 1 && fullKey[0] == "DefaultValue") {
- // @ts-expect-error
return `"${Utility.encodeInputString(value)}"`
}
return super.writeValue(value, fullKey, insideString)
}
}
-// @ts-check
-
/**
* @typedef {import("../entity/IEntity").default} IEntity
*/
@@ -5228,50 +5210,44 @@ class ToStringSerializer extends GeneralSerializer {
}
}
-// @ts-check
-
function initializeSerializerFactory() {
const bracketsWrapped = v => `(${v})`;
- SerializerFactory.registerSerializer(
- LinearColorEntity,
- new GeneralSerializer(bracketsWrapped, LinearColorEntity)
- );
-
- SerializerFactory.registerSerializer(
- ObjectEntity,
- new ObjectSerializer()
- );
-
- SerializerFactory.registerSerializer(
- PinEntity,
- new PinSerializer()
- );
-
SerializerFactory.registerSerializer(
FunctionReferenceEntity,
new GeneralSerializer(bracketsWrapped, FunctionReferenceEntity)
);
+ SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity));
+
+ SerializerFactory.registerSerializer(IdentifierEntity, new ToStringSerializer(IdentifierEntity));
+
+ SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity));
+
+ SerializerFactory.registerSerializer(
+ InvariantTextEntity,
+ new GeneralSerializer(v => `${InvariantTextEntity.lookbehind}(${v})`, InvariantTextEntity, "", ", ", false, "", _ => "")
+ );
+
SerializerFactory.registerSerializer(
KeyBindingEntity,
new GeneralSerializer(bracketsWrapped, KeyBindingEntity)
);
+ SerializerFactory.registerSerializer(
+ LinearColorEntity,
+ new GeneralSerializer(bracketsWrapped, LinearColorEntity)
+ );
+
SerializerFactory.registerSerializer(
LocalizedTextEntity,
new GeneralSerializer(v => `${LocalizedTextEntity.lookbehind}(${v})`, LocalizedTextEntity, "", ", ", false, "", _ => "")
);
SerializerFactory.registerSerializer(
- InvariantTextEntity,
- new GeneralSerializer(v => `${InvariantTextEntity.lookbehind}(${v})`, InvariantTextEntity, "", ", ", false, "", _ => "")
- );
-
- SerializerFactory.registerSerializer(
- PinReferenceEntity,
- new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "")
+ ObjectEntity,
+ new ObjectSerializer()
);
SerializerFactory.registerSerializer(
@@ -5287,17 +5263,19 @@ function initializeSerializerFactory() {
)
);
- SerializerFactory.registerSerializer(IdentifierEntity, new ToStringSerializer(IdentifierEntity));
-
SerializerFactory.registerSerializer(PathSymbolEntity, new ToStringSerializer(PathSymbolEntity));
- SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity));
+ SerializerFactory.registerSerializer(
+ PinReferenceEntity,
+ new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "")
+ );
- SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity));
+ SerializerFactory.registerSerializer(
+ PinEntity,
+ new PinSerializer()
+ );
}
-// @ts-check
-
initializeSerializerFactory();
export { Blueprint, Configuration, LinkElement, NodeElement };
diff --git a/dist/ueblueprint.min.js b/dist/ueblueprint.min.js
index 4b61731..17a4bbe 100644
--- a/dist/ueblueprint.min.js
+++ b/dist/ueblueprint.min.js
@@ -1 +1,23 @@
-class e{static deleteNodesKeyboardKey="Delete";static editTextEventName={begin:"ueb-edit-text-begin",end:"ueb-edit-text-end"};static enableZoomIn=["LeftControl","RightControl"];static expandGridSize=400;static focusEventName={begin:"blueprint-focus",end:"blueprint-unfocus"};static fontSize="12.5px";static gridAxisLineColor="black";static gridExpandThreshold=.25;static gridLineColor="#353535";static gridLineWidth=1;static gridSet=8;static gridSetLineColor="#161616";static gridShrinkThreshold=4;static gridSize=16;static keysSeparator="+";static linkCurveHeight=15;static linkCurveWidth=80;static linkMinWidth=100;static linkRightSVGPath=(e,t,n)=>{let i=100-e;return`M ${e} 0 C ${t} 0, ${n} 0, 50 50 S ${i-t+e} 100, ${i} 100`};static maxZoom=7;static minZoom=-12;static nodeDeleteEventName="ueb-node-delete";static nodeDragEventName="ueb-node-drag";static nodeDragLocalEventName="ueb-node-drag-local";static nodeName=(e,t)=>`${e}_${t}`;static nodeRadius=8;static selectAllKeyboardKey="(bCtrl=True,Key=A)";static trackingMouseEventName={begin:"ueb-tracking-mouse-begin",end:"ueb-tracking-mouse-end"};static ModifierKeys=["Ctrl","Shift","Alt","Meta"];static Keys={Backspace:"Backspace",Tab:"Tab",LeftControl:"ControlLeft",RightControl:"ControlRight",LeftShift:"ShiftLeft",RightShift:"ShiftRight",LeftAlt:"AltLeft",RightAlt:"AltRight",Enter:"Enter",Pause:"Pause",CapsLock:"CapsLock",Escape:"Escape",Space:"Space",PageUp:"PageUp",PageDown:"PageDown",End:"End",Home:"Home",ArrowLeft:"Left",ArrowUp:"Up",ArrowRight:"Right",ArrowDown:"Down",PrintScreen:"PrintScreen",Insert:"Insert",Delete:"Delete",Zero:"Digit0",One:"Digit1",Two:"Digit2",Three:"Digit3",Four:"Digit4",Five:"Digit5",Six:"Digit6",Seven:"Digit7",Eight:"Digit8",Nine:"Digit9",A:"KeyA",B:"KeyB",C:"KeyC",D:"KeyD",E:"KeyE",F:"KeyF",G:"KeyG",H:"KeyH",I:"KeyI",K:"KeyK",L:"KeyL",M:"KeyM",N:"KeyN",O:"KeyO",P:"KeyP",Q:"KeyQ",R:"KeyR",S:"KeyS",T:"KeyT",U:"KeyU",V:"KeyV",W:"KeyW",X:"KeyX",Y:"KeyY",Z:"KeyZ",NumPadZero:"Numpad0",NumPadOne:"Numpad1",NumPadTwo:"Numpad2",NumPadThree:"Numpad3",NumPadFour:"Numpad4",NumPadFive:"Numpad5",NumPadSix:"Numpad6",NumPadSeven:"Numpad7",NumPadEight:"Numpad8",NumPadNine:"Numpad9",Multiply:"NumpadMultiply",Add:"NumpadAdd",Subtract:"NumpadSubtract",Decimal:"NumpadDecimal",Divide:"NumpadDivide",F1:"F1",F2:"F2",F3:"F3",F4:"F4",F5:"F5",F6:"F6",F7:"F7",F8:"F8",F9:"F9",F10:"F10",F11:"F11",F12:"F12",NumLock:"NumLock",ScrollLock:"ScrollLock"}}class t{#e;get target(){return this.#e}#t;get blueprint(){return this.#t}options;constructor(t,n,i){this.#e=t,this.#t=n,i.consumeEvent??=!1,i.listenOnFocus??=!1,i.unlistenOnTextEdit??=!1,this.options=i;let r=this;this.listenHandler=e=>r.listenEvents(),this.unlistenHandler=e=>r.unlistenEvents(),this.options.listenOnFocus&&(this.blueprint.addEventListener(e.focusEventName.begin,this.listenHandler),this.blueprint.addEventListener(e.focusEventName.end,this.unlistenHandler)),this.options.unlistenOnTextEdit&&(this.blueprint.addEventListener(e.editTextEventName.begin,this.unlistenHandler),this.blueprint.addEventListener(e.editTextEventName.end,this.listenHandler))}unlistenDOMElement(){this.unlistenEvents(),this.blueprint.removeEventListener(e.focusEventName.begin,this.listenHandler),this.blueprint.removeEventListener(e.focusEventName.end,this.unlistenHandler),this.blueprint.removeEventListener(e.editTextEventName.begin,this.unlistenHandler),this.blueprint.removeEventListener(e.editTextEventName.end,this.listenHandler)}listenEvents(){}unlistenEvents(){}}class n{#n;get types(){return this.#n}set types(e){this.#n=e}constructor(...e){this.#n=e}}class i{#i;get type(){return this.#i}set type(e){this.#i=e}#r=!0;get showDefault(){return this.#r}set showDefault(e){this.#r=e}#s;get value(){return this.#s}set value(e){this.#s=e}static sanitize(e,t){return void 0===t&&(t=e?.constructor),t&&t!==n&&!(e?.constructor===t||e instanceof t)&&(e=new t(e)),(e instanceof Boolean||e instanceof Number||e instanceof String)&&(e=e.valueOf()),e}constructor(e,t=!0,r){void 0===r&&(r=e instanceof Array?[]:e instanceof n?"":i.sanitize(new e)),this.#r=t,this.#i=e}}class r{static sigmoid(e,t=1.7){return 1/(1+e/(1-e)**-t)}static clamp(e,t,n){return Math.min(Math.max(e,t),n)}static getScale(e){return Number(getComputedStyle(e).getPropertyValue("--ueb-scale"))}static minDecimals(e,t=1){const n=e*10**t;return Math.abs(n%1)>Number.EPSILON?e.toString():e.toFixed(t)}static convertLocation(e,t){const n=1/r.getScale(t),i=t.getBoundingClientRect();return[Math.round((e[0]-i.x)*n),Math.round((e[1]-i.y)*n)]}static objectGet(e,t,n){if(void 0!==e){if(!(t instanceof Array))throw new TypeError("Expected keys to be an array.");return 0!=t.length&&t[0]in e&&void 0!==e[t[0]]?1==t.length?e[t[0]]:r.objectGet(e[t[0]],t.slice(1),n):n}}static objectSet(e,t,n,i=!1,s=Object){if(!(t instanceof Array))throw new TypeError("Expected keys to be an array.");if(1==t.length){if(i||t[0]in e||void 0===e[t[0]])return e[t[0]]=n,!0}else if(t.length>0)return!i||e[t[0]]instanceof Object||(e[t[0]]=new s),r.objectSet(e[t[0]],t.slice(1),n,i,s);return!1}static equals(e,t){return(e=i.sanitize(e))===(t=i.sanitize(t))||(e instanceof Array&&t instanceof Array?e.length==t.length&&!e.find(((e,n)=>!r.equals(e,t[n]))):void 0)}static FirstCapital(e){return e.charAt(0).toUpperCase()+e.substring(1)}static getType(e){let t=e?.constructor;switch(t){case i:return r.getType(e.type);case Function:return e;default:return t}}static snapToGrid(e,t){return 1===t?e:[t*Math.round(e[0]/t),t*Math.round(e[1]/t)]}static mergeArrays(e=[],t=[]){let n=[];for(let i=0;i{for(let o of r.mergeArrays(Object.getOwnPropertyNames(n),Object.getOwnPropertyNames(s??{}))){let l=n[o];const u=r.getType(l);if(o in n?null==l||l instanceof i&&!l.showDefault||o in s||console.warn(`${this.constructor.name} adds property ${a}${o} not defined in the serialized data`):console.warn(`Property ${a}${o} is not defined in ${this.constructor.name}`),u===Object){e[o]={},t(e[o],n[o],s[o],o+".");continue}const c=r.objectGet(s,[o]);if(void 0===c){if(l instanceof i){if(!l.showDefault){e[o]=void 0;continue}l=l.value}l instanceof Array?e[o]=[]:(l instanceof Function&&(l=i.sanitize(new l,u)),e[o]=i.sanitize(l,u))}else e[o]=i.sanitize(c,u)}},n=this.constructor.attributes;e.constructor!==Object&&1==Object.getOwnPropertyNames(n).length&&(e={[Object.getOwnPropertyNames(n)[0]]:e}),t(this,n,e)}}class a extends s{static attributes={type:String,path:String};constructor(e={}){super(e),this.type,this.path}}class o extends s{static attributes={MemberParent:a,MemberName:""};constructor(e={}){super(e),this.MemberParent,this.MemberName}}class l extends s{static attributes={value:String};static generateGuid(e=!0){let t=new Uint32Array(4);!0===e&&crypto.getRandomValues(t);let n="";return t.forEach((e=>{n+=("0".repeat(8)+e.toString(16).toUpperCase()).slice(-8)})),new l({value:n})}constructor(e={}){super(e),this.value}valueOf(){return this.value}toString(){return this.value}}class u extends s{static attributes={value:String};constructor(e={}){super(e),this.value}valueOf(){return this.value}toString(){return this.value}}class c extends s{static attributes={value:Number};constructor(e=0){super(e),this.value=Math.round(this.value)}valueOf(){return this.value}toString(){return this.value.toString()}}class d extends s{static lookbehind="INVTEXT";static attributes={value:String};constructor(e={}){super(e),this.value}}class h extends s{static attributes={ActionName:"",bShift:!1,bCtrl:!1,bAlt:!1,bCmd:!1,Key:u};constructor(e={}){e.ActionName=e.ActionName??"",e.bShift=e.bShift??!1,e.bCtrl=e.bCtrl??!1,e.bAlt=e.bAlt??!1,e.bCmd=e.bCmd??!1,super(e),this.ActionName,this.bShift,this.bCtrl,this.bAlt,this.bCmd,this.Key}}class p extends s{static attributes={R:Number,G:Number,B:Number,A:Number};constructor(e={}){super(e),this.R,this.G,this.B,this.A}static numberToString(e){return Math.round(255*e).toString(16)}static fromString(e){return new p({R:parseInt(e.substr(0,2),16)/255,G:parseInt(e.substr(2,2),16)/255,B:parseInt(e.substr(4,2),16)/255,A:parseInt(e.substr(6,2),16)/255})}toString(){return"#"+p.numberToString(this.R)+p.numberToString(this.G)+p.numberToString(this.B)+p.numberToString(this.A)}}class m extends s{static lookbehind="NSLOCTEXT";static attributes={namespace:String,key:String,value:String};constructor(e={}){super(e),this.namespace,this.key,this.value}}class g extends s{static attributes={value:String};constructor(e={}){super(e),this.value}valueOf(){return this.value}toString(){return this.value}}class f extends s{static attributes={objectName:g,pinGuid:l};constructor(e={}){super(e),this.objectName,this.pinGuid}}class y extends s{static lookbehind="Pin";static attributes={PinId:l,PinName:"",PinFriendlyName:new i(m,!1,null),PinToolTip:"",Direction:new i(String,!1,""),PinType:{PinCategory:"",PinSubCategory:"",PinSubCategoryObject:a,PinSubCategoryMemberReference:null,PinValueType:null,ContainerType:a,bIsReference:!1,bIsConst:!1,bIsWeakPointer:!1,bIsUObjectWrapper:!1,bSerializeAsSinglePrecisionFloat:!1},LinkedTo:new i([f],!1),DefaultValue:new i(new n(p,String),!1),AutogeneratedDefaultValue:new i(String,!1),DefaultObject:new i(a,!1,null),PersistentGuid:l,bHidden:!1,bNotConnectable:!1,bDefaultValueIsReadOnly:!1,bDefaultValueIsIgnored:!1,bAdvancedView:!1,bOrphanedPin:!1};constructor(e={}){super(e),this.PinId,this.PinName,this.PinFriendlyName,this.PinToolTip,this.Direction,this.PinType,this.LinkedTo,this.DefaultValue,this.AutogeneratedDefaultValue,this.DefaultObject,this.PersistentGuid,this.bHidden,this.bNotConnectable,this.bDefaultValueIsReadOnly,this.bDefaultValueIsIgnored,this.bAdvancedView,this.bOrphanedPin}getDefaultValue(){return this.DefaultValue??""}isInput(){return!this.bHidden&&"EGPD_Output"!=this.Direction}isOutput(){return!this.bHidden&&"EGPD_Output"==this.Direction}isLinked(){return this.LinkedTo?.length>0??!1}linkTo(e,t){this.LinkedTo;const n=this.LinkedTo?.find((n=>n.objectName==e&&n.pinGuid.valueOf()==t.PinId.valueOf()));return!n&&((this.LinkedTo??(this.LinkedTo=[])).push(new f({objectName:e,pinGuid:t.PinId})),!0)}unlinkFrom(e,t){this.LinkedTo;const n=this.LinkedTo.findIndex((n=>n.objectName==e&&n.pinGuid==t.PinId));return n>=0&&(1==this.LinkedTo.length?this.LinkedTo=void 0:this.LinkedTo.splice(n,1),!0)}getType(){return this.PinType.PinCategory}getSubCategory(){return this.PinType.PinSubCategoryObject.path}getColorValue(){this.PinType.PinSubCategoryObject.path}}class b extends s{static attributes={MemberName:String,MemberGuid:l,bSelfContext:!1};constructor(e={}){super(e),this.MemberName,this.MemberGuid,this.bSelfContext}}class v extends s{static attributes={Class:a,Name:"",bIsPureFunc:new i(Boolean,!1,!1),VariableReference:new i(b,!1,null),FunctionReference:new i(o,!1,null),EventReference:new i(o,!1,null),TargetType:new i(a,!1,null),NodePosX:c,NodePosY:c,AdvancedPinDisplay:new i(u,!1,null),EnabledState:new i(u,!1,null),NodeGuid:l,ErrorType:new i(c,!1),ErrorMsg:new i(String,!1,""),CustomProperties:[y]};static nameRegex=/(\w+)_(\d+)/;constructor(e={}){super(e),this.Class,this.Name,this.bIsPureFunc,this.VariableReference,this.FunctionReference,this.EventReference,this.TargetType,this.NodePosX,this.NodePosY,this.AdvancedPinDisplay,this.EnabledState,this.NodeGuid,this.ErrorType,this.ErrorMsg,this.CustomProperties}getObjectName(e=!1){return e?this.getNameAndCounter()[0]:this.Name}getNameAndCounter(){const e=this.getObjectName(!1).match(v.nameRegex);if(e&&3==e.length)return[e[1],parseInt(e[2])]}getDisplayName(){let e=this.FunctionReference?.MemberName;return e?(e=r.formatStringName(e),e):(e=r.formatStringName(this.getNameAndCounter()[0]),e)}getCounter(){return this.getNameAndCounter()[1]}}"undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self&&self;function E(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var S={exports:{}};"undefined"!=typeof self&&self;var w=E(S.exports=function(e){var t={};function n(i){if(t[i])return t[i].exports;var r=t[i]={i:i,l:!1,exports:{}};return e[i].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{configurable:!1,enumerable:!0,get:i})},n.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){function i(e){if(!(this instanceof i))return new i(e);this._=e}var r=i.prototype;function s(e,t){for(var n=0;n>7),buf:function(e){var t=a((function(e,t,n,i){return e.concat(n===i.length-1?Buffer.from([t,0]).readUInt16BE(0):i.readUInt16BE(n))}),[],e);return Buffer.from(o((function(e){return(e<<1&65535)>>8}),t))}(n.buf)}})),n}function u(){return"undefined"!=typeof Buffer}function c(){if(!u())throw new Error("Buffer global does not exist; please use webpack if you need to parse Buffers in the browser.")}function d(e){c();var t=a((function(e,t){return e+t}),0,e);if(t%8!=0)throw new Error("The bits ["+e.join(", ")+"] add up to "+t+" which is not an even number of bytes; the total should be divisible by 8");var n,r=t/8,s=(n=function(e){return e>48},a((function(e,t){return e||(n(t)?t:e)}),null,e));if(s)throw new Error(s+" bit range requested exceeds 48 bit (6 byte) Number max.");return new i((function(t,n){var i=r+n;return i>t.length?w(n,r.toString()+" bytes"):S(i,a((function(e,t){var n=l(t,e.buf);return{coll:e.coll.concat(n.v),buf:n.buf}}),{coll:[],buf:t.slice(n,i)},e).coll)}))}function h(e,t){return new i((function(n,i){return c(),i+t>n.length?w(i,t+" bytes for "+e):S(i+t,n.slice(i,i+t))}))}function p(e,t){if("number"!=typeof(n=t)||Math.floor(n)!==n||t<0||t>6)throw new Error(e+" requires integer length in range [0, 6].");var n}function m(e){return p("uintBE",e),h("uintBE("+e+")",e).map((function(t){return t.readUIntBE(0,e)}))}function g(e){return p("uintLE",e),h("uintLE("+e+")",e).map((function(t){return t.readUIntLE(0,e)}))}function f(e){return p("intBE",e),h("intBE("+e+")",e).map((function(t){return t.readIntBE(0,e)}))}function y(e){return p("intLE",e),h("intLE("+e+")",e).map((function(t){return t.readIntLE(0,e)}))}function b(e){return e instanceof i}function v(e){return"[object Array]"==={}.toString.call(e)}function E(e){return u()&&Buffer.isBuffer(e)}function S(e,t){return{status:!0,index:e,value:t,furthest:-1,expected:[]}}function w(e,t){return v(t)||(t=[t]),{status:!1,index:-1,value:null,furthest:e,expected:t}}function P(e,t){if(!t)return e;if(e.furthest>t.furthest)return e;var n=e.furthest===t.furthest?function(e,t){if(function(){if(void 0!==i._supportsSet)return i._supportsSet;var e="undefined"!=typeof Set;return i._supportsSet=e,e}()&&Array.from){for(var n=new Set(e),r=0;r=0;){if(a in n){i=n[a].line,0===s&&(s=n[a].lineStart);break}("\n"===e.charAt(a)||"\r"===e.charAt(a)&&"\n"!==e.charAt(a+1))&&(r++,0===s&&(s=a+1)),a--}var o=i+r,l=t-s;return n[t]={line:o,lineStart:s},{offset:t,line:o+1,column:l+1}}function x(e){if(!b(e))throw new Error("not a parser: "+e)}function N(e,t){return"string"==typeof e?e.charAt(t):e[t]}function D(e){if("number"!=typeof e)throw new Error("not a number: "+e)}function T(e){if("function"!=typeof e)throw new Error("not a function: "+e)}function O(e){if("string"!=typeof e)throw new Error("not a string: "+e)}var M=2,A=3,C=8,I=5*C,H=4*C,j=" ";function F(e,t){return new Array(t+1).join(e)}function z(e,t,n){var i=t-e.length;return i<=0?e:F(n,i)+e}function G(e,t,n,i){return{from:e-t>0?e-t:0,to:e+n>i?i:e+n}}function B(e,t){var n,i,r,s,l,u=t.index,c=u.offset,d=1;if(c===e.length)return"Got the end of the input";if(E(e)){var h=c-c%C,p=c-h,m=G(h,I,H+C,e.length),g=o((function(e){return o((function(e){return z(e.toString(16),2,"0")}),e)}),function(e,t){var n=e.length,i=[],r=0;if(n<=t)return[e.slice()];for(var s=0;s=4&&(n+=1),d=2,r=o((function(e){return e.length<=4?e.join(" "):e.slice(0,4).join(" ")+" "+e.slice(4).join(" ")}),g),(l=(8*(s.to>0?s.to-1:s.to)).toString(16).length)<2&&(l=2)}else{var f=e.split(/\r\n|[\n\r\u2028\u2029]/);n=u.column-1,i=u.line-1,s=G(i,M,A,f.length),r=f.slice(s.from,s.to),l=s.to.toString().length}var y=i-s.from;return E(e)&&(l=(8*(s.to>0?s.to-1:s.to)).toString(16).length)<2&&(l=2),a((function(t,i,r){var a,o=r===y,u=o?"> ":j;return a=E(e)?z((8*(s.from+r)).toString(16),l,"0"):z((s.from+r+1).toString(),l," "),[].concat(t,[u+a+" | "+i],o?[j+F(" ",l)+" | "+z("",n," ")+F("^",d)]:[])}),[],r).join("\n")}function V(e,t){return["\n","-- PARSING FAILED "+F("-",50),"\n\n",B(e,t),"\n\n",(n=t.expected,1===n.length?"Expected:\n\n"+n[0]:"Expected one of the following: \n\n"+n.join(", ")),"\n"].join("");var n}function K(e){return void 0!==e.flags?e.flags:[e.global?"g":"",e.ignoreCase?"i":"",e.multiline?"m":"",e.unicode?"u":"",e.sticky?"y":""].join("")}function $(){for(var e=[].slice.call(arguments),t=e.length,n=0;n=2?D(t):t=0;var n=function(e){return RegExp("^(?:"+e.source+")",K(e))}(e),r=""+e;return i((function(e,i){var s=n.exec(e.slice(i));if(s){if(0<=t&&t<=s.length){var a=s[0],o=s[t];return S(i+a.length,o)}return w(i,"valid match group (0 to "+s.length+") in "+r)}return w(i,r)}))}function X(e){return i((function(t,n){return S(n,e)}))}function Y(e){return i((function(t,n){return w(n,e)}))}function Q(e){if(b(e))return i((function(t,n){var i=e._(t,n);return i.index=n,i.value="",i}));if("string"==typeof e)return Q(Z(e));if(e instanceof RegExp)return Q(U(e));throw new Error("not a string, regexp, or parser: "+e)}function J(e){return x(e),i((function(t,n){var i=e._(t,n),r=t.slice(n,i.index);return i.status?w(n,'not "'+r+'"'):S(n,null)}))}function ee(e){return T(e),i((function(t,n){var i=N(t,n);return n=e.length?w(t,"any character/byte"):S(t+1,N(e,t))})),se=i((function(e,t){return S(e.length,e.slice(t))})),ae=i((function(e,t){return t=0})).desc(t)},i.optWhitespace=de,i.Parser=i,i.range=function(e,t){return ee((function(n){return e<=n&&n<=t})).desc(e+"-"+t)},i.regex=U,i.regexp=U,i.sepBy=q,i.sepBy1=_,i.seq=$,i.seqMap=R,i.seqObj=function(){for(var e,t={},n=0,r=(e=arguments,Array.prototype.slice.call(e)),s=r.length,a=0;a255)throw new Error("Value specified to byte constructor ("+e+"=0x"+e.toString(16)+") is larger in value than a single byte.");var t=(e>15?"0x":"0x0")+e.toString(16);return i((function(n,i){var r=N(n,i);return r===e?S(i+1,r):w(i,t)}))},buffer:function(e){return h("buffer",e).map((function(e){return Buffer.from(e)}))},encodedString:function(e,t){return h("string",t).map((function(t){return t.toString(e)}))},uintBE:m,uint8BE:m(1),uint16BE:m(2),uint32BE:m(4),uintLE:g,uint8LE:g(1),uint16LE:g(2),uint32LE:g(4),intBE:f,int8BE:f(1),int16BE:f(2),int32BE:f(4),intLE:y,int8LE:y(1),int16LE:y(2),int32LE:y(4),floatBE:h("floatBE",4).map((function(e){return e.readFloatBE(0)})),floatLE:h("floatLE",4).map((function(e){return e.readFloatLE(0)})),doubleBE:h("doubleBE",8).map((function(e){return e.readDoubleBE(0)})),doubleLE:h("doubleLE",8).map((function(e){return e.readDoubleLE(0)}))},e.exports=i}]));let P=w;class k{static getGrammarForType(e,t,s){if(t instanceof i)return t=t.type,k.getGrammarForType(e,t,s);if(t instanceof n){const n=t.types.filter((e=>e!==String));let i=P.alt(...n.map((t=>k.getGrammarForType(e,t).wrap(P.string('"'),P.string('"')).map((e=>(e.setShowAsString(!0),e))))));return n.lengthk.getGrammarForType(e,r.getType(t)))).reduce(((t,n)=>n&&t!==e.AttributeAnyValue?t.or(n):e.AttributeAnyValue)).trim(P.optWhitespace).sepBy(P.string(",")).skip(P.regex(/,?\s*/)),P.string(")"),((e,t,n)=>t));default:return s}}static createAttributeGrammar=(e,t,n=P.string("=").trim(P.optWhitespace))=>e.AttributeName.skip(n).chain((n=>{const i=n.split("."),s=r.objectGet(t.attributes,i);return k.getGrammarForType(e,s,e.AttributeAnyValue).map((e=>t=>r.objectSet(t,i,e,!0)))}));static createMultiAttributeGrammar=(e,t)=>P.seqMap(t.lookbehind?P.seq(P.string(t.lookbehind),P.optWhitespace,P.string("(")):P.string("("),k.createAttributeGrammar(e,t).trim(P.optWhitespace).sepBy(P.string(",")).skip(P.regex(/,?/).then(P.optWhitespace)),P.string(")"),((e,n,i)=>{let r={};return n.forEach((e=>e(r))),new t(r)}));InlineWhitespace=e=>P.regex(/[^\S\n]+/).desc("inline whitespace");InlineOptWhitespace=e=>P.regex(/[^\S\n]*/).desc("inline optional whitespace");MultilineWhitespace=e=>P.regex(/[^\S\n]*\n\s*/).desc("whitespace with at least a newline");Null=e=>P.seq(P.string("("),e.InlineOptWhitespace,P.string(")")).map((e=>null)).desc("null: ()");Boolean=e=>P.alt(P.string("True"),P.string("False")).map((e=>"True"===e)).desc("either True or False");Number=e=>P.regex(/[\-\+]?[0-9]+(?:\.[0-9]+)?/).map(Number).desc("a number");Word=e=>P.regex(/[a-zA-Z]+/).desc("a word");String=e=>P.regex(/(?:[^"\\]|\\.)*/).wrap(P.string('"'),P.string('"')).map(r.decodeString).desc('string (with possibility to escape the quote using ")');ReferencePath=e=>P.seq(P.string("/"),e.PathSymbol.map((e=>e.toString())).sepBy1(P.string(".")).tieWith(".")).tie().atLeast(2).tie().desc('a path (words with possibly underscore, separated by ".", separated by "/")');AttributeName=e=>e.Word.sepBy1(P.string(".")).tieWith(".").desc('words separated by ""');None=e=>P.string("None").map((e=>new a({type:"None",path:""}))).desc("none");Integer=e=>P.regex(/[\-\+]?[0-9]+/).map((e=>new c(e))).desc("an integer");Guid=e=>P.regex(/[0-9a-zA-Z]{32}/).map((e=>new l({value:e}))).desc("32 digit hexadecimal (accepts all the letters for safety) value");Identifier=e=>P.regex(/\w+/).map((e=>new u(e)));PathSymbol=e=>P.regex(/[0-9\w]+/).map((e=>new g({value:e})));Reference=e=>P.alt(e.None,...[e.ReferencePath.map((e=>new a({type:"",path:e})))].flatMap((e=>[e,e.trim(P.string('"'))])),P.seqMap(e.Word,P.optWhitespace,P.alt(...[e.ReferencePath].flatMap((e=>[e.wrap(P.string('"'),P.string('"')),e.wrap(P.string("'\""),P.string("\"'"))]))),((e,t,n)=>new a({type:e,path:n}))),e.Word.map((e=>new a({type:e,path:""}))));LocalizedText=e=>P.seqMap(P.string(m.lookbehind).skip(P.optWhitespace).skip(P.string("(")),e.String.trim(P.optWhitespace),P.string(","),e.String.trim(P.optWhitespace),P.string(","),e.String.trim(P.optWhitespace),P.string(")"),((e,t,n,i,r,s,a)=>new m({namespace:t,key:i,value:s})));InvariantText=e=>e.String.trim(P.optWhitespace).wrap(P.string(d.lookbehind).skip(P.optWhitespace).skip(P.string("(")),P.string(")")).map((e=>new d({value:e})));AttributeAnyValue=e=>P.alt(e.Null,e.None,e.Boolean,e.Number,e.Integer,e.String,e.Guid,e.LocalizedText,e.InvariantText,e.Reference);PinReference=e=>P.seqMap(e.PathSymbol,P.whitespace,e.Guid,((e,t,n)=>new f({objectName:e,pinGuid:n})));LinearColor=e=>k.createMultiAttributeGrammar(e,p);FunctionReference=e=>k.createMultiAttributeGrammar(e,o);KeyBinding=e=>P.alt(e.Identifier.map((e=>new h({Key:e}))),k.createMultiAttributeGrammar(e,h));Pin=e=>k.createMultiAttributeGrammar(e,y);CustomProperties=e=>P.string("CustomProperties").then(P.whitespace).then(e.Pin).map((e=>t=>{let n=r.objectGet(t,["CustomProperties"],[]);n.push(e),r.objectSet(t,["CustomProperties"],n,!0)}));Object=e=>P.seqMap(P.seq(P.string("Begin"),P.whitespace,P.string("Object"),P.whitespace),P.alt(e.CustomProperties,k.createAttributeGrammar(e,v)).sepBy1(P.whitespace),P.seq(e.MultilineWhitespace,P.string("End"),P.whitespace,P.string("Object")),((e,t,n)=>{let i={};return t.forEach((e=>e(i))),new v(i)}));MultipleObject=e=>e.Object.sepBy1(P.whitespace).trim(P.optWhitespace)}class L{static#o=new Map;static registerSerializer(e,t){L.#o.set(e,t)}static getSerializer(e){return L.#o.get(r.getType(e))}}class x{static grammar=w.createLanguage(new k);constructor(e,t,n,i,r,s){this.entityType=e,this.prefix=t??"",this.separator=n??",",this.trailingSeparator=i??!1,this.attributeValueConjunctionSign=r??"=",this.attributeKeyPrinter=s??(e=>e.join("."))}deserialize(e){return this.read(e)}serialize(e,t){t||=e.isShownAsString();let n=this.write(e,t);return e.isShownAsString()&&(n=`"${n}"`),n}read(e){throw new Error("Not implemented")}write(e,t){throw new Error("Not implemented")}writeValue(e,t,n){if(null===e)return"()";const i=e=>L.getSerializer(r.getType(e)).serialize(e);switch(e?.constructor){case Function:return this.writeValue(e(),t,n);case Boolean:return r.FirstCapital(e.toString());case Number:return e.toString();case String:return n?`\\"${r.encodeString(e)}\\"`:`"${r.encodeString(e)}"`}return e instanceof Array?`(${e.map((e=>i(e)+",")).join("")})`:e instanceof s?i(e):void 0}subWrite(e,t,n){let i="",r=e.concat("");const s=r.length-1;for(const e of Object.getOwnPropertyNames(t)){r[s]=e;const a=t[e];a?.constructor===Object?i+=(i.length?this.separator:"")+this.subWrite(r,a,n):void 0!==a&&this.showProperty(t,r,a)&&(i+=(i.length?this.separator:"")+this.prefix+this.attributeKeyPrinter(r)+this.attributeValueConjunctionSign+this.writeValue(a,r,n))}return this.trailingSeparator&&i.length&&1===r.length&&(i+=this.separator),i}showProperty(e,t,n){const s=this.entityType.attributes,a=r.objectGet(s,t);return!(a instanceof i)||(!r.equals(a.value,n)||a.showDefault)}}class N extends x{constructor(){super(v," ","\n",!1)}showProperty(e,t,n){switch(t.toString()){case"Class":case"Name":case"CustomProperties":return!1}return super.showProperty(e,t,n)}read(e){const t=x.grammar.Object.parse(e);if(!t.status)throw new Error("Error when trying to parse the object.");return t.value}readMultiple(e){const t=x.grammar.MultipleObject.parse(e);if(!t.status)throw new Error("Error when trying to parse the object.");return t.value}write(e,t){return`Begin Object Class=${e.Class.path} Name=${this.writeValue(e.Name,["Name"],t)}\n${this.subWrite([],e,t)+e.CustomProperties.map((e=>this.separator+this.prefix+"CustomProperties "+L.getSerializer(y).serialize(e))).join("")}\nEnd Object\n`}}class D extends t{#l;constructor(e,t,n={}){n.listenOnFocus=!0,n.unlistenOnTextEdit=!0,super(e,t,n),this.serializer=new N;let i=this;this.#l=e=>i.copied()}listenEvents(){document.body.addEventListener("copy",this.#l)}unlistenEvents(){document.body.removeEventListener("copy",this.#l)}copied(){const e=this.blueprint.getNodes(!0).map((e=>this.serializer.serialize(e.entity,!1))).join("\n");navigator.clipboard.writeText(e)}}const T=String.raw;class O{#u=[];get inputObjects(){return this.#u}render(e){return""}setup(e){e.innerHTML=this.render(e)}inputSetup(e){this.#u=this.createInputObjects(e)}cleanup(e){this.#u.forEach((e=>e.unlistenDOMElement()))}createInputObjects(e){return[]}}class M extends t{#c;constructor(t,n,i={}){i.activateAnyKey??=!1,i.activationKeys??=[],i.listenOnFocus??=!0,i.unlistenOnTextEdit??=!0,i.activationKeys instanceof Array||(i.activationKeys=[i.activationKeys]),i.activationKeys=i.activationKeys.map((e=>{if(e instanceof h)return e;if(e.constructor===String){const t=x.grammar.KeyBinding.parse(e);if(t.status)return t.value}throw new Error("Unexpected key value")})),super(t,n,i),this.#c=this.options.activationKeys??[];let r=this;this.keyDownHandler=t=>{(this.options.activateAnyKey||r.#c.some((n=>(e=>e.bShift||"LeftShift"==e.Key||"RightShift"==e.Key)(n)==t.shiftKey&&(e=>e.bCtrl||"LeftControl"==e.Key||"RightControl"==e.Key)(n)==t.ctrlKey&&(e=>e.bAlt||"LeftAlt"==e.Key||"RightAlt"==e.Key)(n)==t.altKey&&e.Keys[n.Key]==t.code)))&&(i.consumeEvent&&t.stopImmediatePropagation(),r.fire(),document.removeEventListener("keydown",r.keyDownHandler),document.addEventListener("keyup",r.keyUpHandler))},this.keyUpHandler=t=>{(this.options.activateAnyKey||r.#c.some((n=>n.bShift&&"Shift"==t.key||n.bCtrl&&"Control"==t.key||n.bAlt&&"Alt"==t.key||n.bCmd&&"Meta"==t.key||e.Keys[n.Key]==t.code)))&&(i.consumeEvent&&t.stopImmediatePropagation(),r.unfire(),document.removeEventListener("keyup",this.keyUpHandler),document.addEventListener("keydown",this.keyDownHandler))}}listenEvents(){document.addEventListener("keydown",this.keyDownHandler)}unlistenEvents(){document.removeEventListener("keydown",this.keyDownHandler)}fire(){}unfire(){}}class A extends M{constructor(t,n,i={}){i.activationKeys=e.deleteNodesKeyboardKey,super(t,n,i)}fire(){this.blueprint.removeGraphElement(...this.blueprint.getNodes(!0))}}class C extends t{constructor(e,t,n){super(e,t,n),this.movementSpace=this.blueprint?.getGridDOMElement()??document.documentElement}locationFromEvent(e){return this.blueprint.compensateTranslation(r.convertLocation([e.clientX,e.clientY],this.movementSpace))}}class I extends C{#d;#h;constructor(e,t,n){n.listenOnFocus=!0,super(e,t,n),this.looseTarget=n?.looseTarget??!0;let i=this;this.#d=e=>{e.preventDefault();const t=i.locationFromEvent(e);i.wheel(Math.sign(e.deltaY),t)},this.#h=e=>e.preventDefault(),this.blueprint.focused&&this.movementSpace.addEventListener("wheel",this.#d,!1)}listenEvents(){this.movementSpace.addEventListener("wheel",this.#d,!1),this.movementSpace.parentElement?.addEventListener("wheel",this.#h)}unlistenEvents(){this.movementSpace.removeEventListener("wheel",this.#d,!1),this.movementSpace.parentElement?.removeEventListener("wheel",this.#h)}wheel(e,t){}}class H extends I{#p=!1;get enableZoonIn(){return this.#p}set enableZoonIn(e){(e=Boolean(e))!=this.#p&&(this.#p=e)}wheel(e,t){let n=this.blueprint.getZoom();e=-e,!this.enableZoonIn&&0==n&&e>0||(n+=e,this.blueprint.setZoom(n,t))}}class j extends M{#m;constructor(t,n,i={}){i.activationKeys=e.enableZoomIn,super(t,n,i)}fire(){this.#m=this.blueprint.getInputObject(H),this.#m.enableZoonIn=!0}unfire(){this.#m.enableZoonIn=!1}}class F extends M{constructor(t,n,i={}){i.activationKeys=e.selectAllKeyboardKey,super(t,n,i)}fire(){this.blueprint.selectAll()}}class z extends C{#g;#f;#y;#b;#v=!1;started=!1;constructor(t,n,i={}){i.clickButton??=0,i.consumeEvent??=!0,i.exitAnyButton??=!0,i.looseTarget??=!1,i.moveEverywhere??=!1,super(t,n,i),this.clickedPosition=[0,0];const r=this.options.moveEverywhere?document.documentElement:this.movementSpace;let s=this;this.#g=e=>{if(this.blueprint.setFocused(!0),e.button===s.options.clickButton)(s.options.looseTarget||e.target==e.currentTarget)&&(this.options.consumeEvent&&e.stopImmediatePropagation(),r.addEventListener("mousemove",s.#f),document.addEventListener("mouseup",s.#b),s.clickedPosition=s.locationFromEvent(e),s.clicked(s.clickedPosition));else s.options.exitAnyButton||s.#b(e)},this.#f=t=>{this.options.consumeEvent&&t.stopImmediatePropagation(),r.removeEventListener("mousemove",s.#f),r.addEventListener("mousemove",s.#y);const n=s.getEvent(e.trackingMouseEventName.begin);s.#v=0==this.target.dispatchEvent(n),s.startDrag(),s.started=!0},this.#y=e=>{this.options.consumeEvent&&e.stopImmediatePropagation();const t=s.locationFromEvent(e),n=[e.movementX,e.movementY];s.dragTo(t,n),s.#v&&(s.blueprint.mousePosition=s.locationFromEvent(e))},this.#b=t=>{if(!s.options.exitAnyButton||t.button==s.options.clickButton){if(this.options.consumeEvent&&t.stopImmediatePropagation(),r.removeEventListener("mousemove",s.#f),r.removeEventListener("mousemove",s.#y),document.removeEventListener("mouseup",s.#b),s.started&&s.endDrag(),s.unclicked(),s.#v){const t=s.getEvent(e.trackingMouseEventName.end);this.target.dispatchEvent(t),s.#v=!1}s.started=!1}},this.listenEvents()}listenEvents(){this.target.addEventListener("mousedown",this.#g),2==this.options.clickButton&&this.target.addEventListener("contextmenu",(e=>e.preventDefault()))}unlistenEvents(){this.target.removeEventListener("mousedown",this.#g)}getEvent(e){return new CustomEvent(e,{detail:{tracker:this},bubbles:!0,cancelable:!0})}clicked(e){}startDrag(e){}dragTo(e,t){}endDrag(){}unclicked(e){}}class G extends z{startDrag(){this.blueprint.template.applyStartDragScrolling(this.blueprint)}dragTo(e,t){this.blueprint.scrollDelta([-t[0],-t[1]])}endDrag(){this.blueprint.template.applyEndDragScrolling(this.blueprint)}}class B extends C{#E=null;#S;#w;#P;constructor(e,t,n={}){n.listenOnFocus=!0,super(e,t,n);let i=this;this.#S=e=>{e.preventDefault(),i.blueprint.mousePosition=i.locationFromEvent(e)},this.#w=e=>{i.#E||(e.preventDefault(),this.#E=e.detail.tracker,i.unlistenMouseMove())},this.#P=e=>{i.#E==e.detail.tracker&&(e.preventDefault(),i.#E=null,i.listenMouseMove())}}listenMouseMove(){this.target.addEventListener("mousemove",this.#S)}unlistenMouseMove(){this.target.removeEventListener("mousemove",this.#S)}listenEvents(){this.listenMouseMove(),this.blueprint.addEventListener(e.trackingMouseEventName.begin,this.#w),this.blueprint.addEventListener(e.trackingMouseEventName.end,this.#P)}unlistenEvents(){this.unlistenMouseMove(),this.blueprint.removeEventListener(e.trackingMouseEventName.begin,this.#w),this.blueprint.removeEventListener(e.trackingMouseEventName.end,this.#P)}}class V extends HTMLElement{#t;get blueprint(){return this.#t}set blueprint(e){this.#t=e}#k;get entity(){return this.#k}set entity(e){this.#k=e}#L;get template(){return this.#L}set template(e){this.#L=e}inputObjects=[];constructor(e,t){super(),this.#k=e,this.#L=t,this.inputObjects=[]}getTemplate(){return this.template}connectedCallback(){this.#t=this.closest("ueb-blueprint"),this.template.setup(this),this.template.inputSetup(this)}disconnectedCallback(){this.template.cleanup(this)}isSameGraph(e){return this.#t&&this.#t==e?.blueprint}getInputObject(e){return this.template.inputObjects.find((t=>t.constructor==e))}createInputObjects(){return[]}}class K extends V{constructor(...e){super(...e),this.dragObject=null,this.location=[0,0],this.selected=!1;let t=this;this.dragHandler=e=>t.addLocation(e.detail.value)}#x(t=!0){this.selected=t,this.blueprint&&(this.selected?this.blueprint.addEventListener(e.nodeDragEventName,this.dragHandler):this.blueprint.removeEventListener(e.nodeDragEventName,this.dragHandler)),this.template.applySelected(this)}connectedCallback(){super.connectedCallback(),this.#x(this.selected)}setLocation(t=[0,0]){const n=[t[0]-this.location[0],t[1]-this.location[1]];if(this.location=t,this.template.applyLocation(this),this.blueprint){const t=new CustomEvent(e.nodeDragLocalEventName,{detail:{value:n},bubbles:!1,cancelable:!0});this.dispatchEvent(t)}}addLocation(e){this.setLocation([this.location[0]+e[0],this.location[1]+e[1]])}setSelected(e=!0){this.selected!=e&&this.#x(e)}dispatchDragEvent(t){const n=new CustomEvent(e.nodeDragEventName,{detail:{value:t},bubbles:!0,cancelable:!0});this.dispatchEvent(n)}snapToGrid(){let t=r.snapToGrid(this.location,e.gridSize);this.location[0]==t[0]&&this.location[1]==t[1]||this.setLocation(t)}}class $ extends z{constructor(e,t,n={}){n.consumeEvent=!0,super(e,t,n)}}document.createElement("div");const R={"&":"&","<":"<",">":">","'":"'",'"':"""};function W(e){return e.toString().replace(/[&<>'"]/g,(e=>R[e]))}class q extends O{static decreasingValue(e,t){const n=-e*t[0]**2,i=t[1]-n/t[0];return e=>n/e+i}static clampedLine(e,t){if(e[0]>t[0]){const n=e;e=t,t=n}const n=(t[1]-e[1])/(t[0]-e[0]),i=e[1]-n*e[0];return r=>rt[0]?t[1]:n*r+i}static c1DecreasingValue=q.decreasingValue(-.1,[100,15]);static c2DecreasingValue=q.decreasingValue(-.06,[500,130]);static c2Clamped=q.clampedLine([0,100],[200,30]);render(e){const t="ueb-id-"+Math.floor(1e12*Math.random());return T``}setup(e){super.setup(e),e.linkMessageElement&&e.appendChild(e.linkMessageElement),e.classList.add("ueb-positioned"),e.pathElement=e.querySelector("path");const t=e.sourcePin??e.destinationPin;t&&e.style.setProperty("--ueb-pin-color",t.getColor()),this.applyPins(e),e.sourcePin&&e.destinationPin&&this.applyFullLocation(e)}applyPins(e){e.sourcePin&&(e.dataset.source=e.sourcePin.GetPinId().toString()),e.destinationPin&&(e.dataset.destination=e.destinationPin.GetPinId().toString())}applyStartDragging(e){e.blueprint.dataset.creatingLink="true",e.classList.add("ueb-link-dragging")}applyFinishDragging(e){e.blueprint.dataset.creatingLink="false",e.classList.remove("ueb-link-dragging")}applySourceLocation(e){e.style.setProperty("--ueb-from-input",e.originatesFromInput?"1":"0"),e.style.setProperty("--ueb-from-x",W(e.sourceLocation[0])),e.style.setProperty("--ueb-from-y",W(e.sourceLocation[1]))}applyFullLocation(t){const n=Math.max(Math.abs(t.sourceLocation[0]-t.destinationLocation[0]),1),i=Math.max(n,e.linkMinWidth);Math.max(Math.abs(t.sourceLocation[1]-t.destinationLocation[1]),1);const r=n/i,s=t.originatesFromInput?t.sourceLocation[0]e.remove())),e.appendChild(t),e.linkMessageElement=t}}class _ extends V{#N;get sourcePin(){return this.#N}set sourcePin(t){if(this.#N!=t){if(this.#N){const t=this.#N.getNodeElement();t.removeEventListener(e.nodeDeleteEventName,this.#D),t.removeEventListener(e.nodeDragLocalEventName,this.#T),this.#O&&this.#M()}if(this.#N=t,this.#N){const n=this.#N.getNodeElement();this.originatesFromInput=t.isInput(),n.addEventListener(e.nodeDeleteEventName,this.#D),n.addEventListener(e.nodeDragLocalEventName,this.#T),this.setSourceLocation(),this.#O&&this.#A()}this.template.applyPins(this)}}#O;get destinationPin(){return this.#O}set destinationPin(t){if(this.#O!=t){if(this.#O){const t=this.#O.getNodeElement();t.removeEventListener(e.nodeDeleteEventName,this.#D),t.removeEventListener(e.nodeDragLocalEventName,this.#C),this.#N&&this.#M()}if(this.#O=t,this.#O){const t=this.#O.getNodeElement();t.addEventListener(e.nodeDeleteEventName,this.#D),t.addEventListener(e.nodeDragLocalEventName,this.#C),this.setDestinationLocation(),this.#N&&this.#A()}this.template.applyPins(this)}}#D;#T;#C;sourceLocation=[0,0];pathElement;linkMessageElement;originatesFromInput=!1;destinationLocation=[0,0];constructor(e,t){super({},new q);const n=this;this.#D=e=>n.remove(),this.#T=e=>n.addSourceLocation(e.detail.value),this.#C=e=>n.addDestinationLocation(e.detail.value),e&&(this.sourcePin=e),t&&(this.destinationPin=t),e&&t&&this.#A()}#A(){this.#N.linkTo(this.#O),this.#O.linkTo(this.#N)}#M(){this.#N&&this.#O&&(this.#N.unlinkFrom(this.#O),this.#O.unlinkFrom(this.#N))}disconnectedCallback(){super.disconnectedCallback(),this.#M()}getSourceLocation(){return this.sourceLocation}addSourceLocation(e){const t=[this.sourceLocation[0]+e[0],this.sourceLocation[1]+e[1]];this.sourceLocation=t,this.template.applyFullLocation(this)}setSourceLocation(e=null){null==e&&(e=this.#N.template.getLinkLocation(this.#N)),this.sourceLocation=e,this.template.applySourceLocation(this)}getDestinationLocation(){return this.destinationLocation}addDestinationLocation(e){const t=[this.destinationLocation[0]+e[0],this.destinationLocation[1]+e[1]];this.setDestinationLocation(t)}setDestinationLocation(e=null){null==e&&(e=this.#O.template.getLinkLocation(this.#O)),this.destinationLocation=e,this.template.applyFullLocation(this)}setLinkMessage(e){e?this.template.applyLinkMessage(this,e):this.linkMessageElement&&(this.linkMessageElement.remove(),this.linkMessageElement=null)}startDragging(){this.template.applyStartDragging(this)}finishDragging(){this.template.applyFinishDragging(this)}}customElements.define("ueb-link",_);class Z extends O{render(e){return T` `}setup(e){super.setup(e);const t=t=>e.querySelector(".ueb-link-message").innerText=e.message(e.linkElement.sourcePin,e.linkElement.destinationPin);e.linkElement=e.closest("ueb-link"),e.linkElement?t():window.customElements.whenDefined("ueb-link-message").then(t)}}class U extends V{static convertType=e=>new U("ueb-icon-conver-type",((e,t)=>`Convert ${e.getType()} to ${t.getType()}.`));static correct=e=>new U("ueb-icon-correct",((e,t)=>""));static directionsIncompatible=e=>new U("ueb-icon-directions-incompatible",((e,t)=>"Directions are not compatbile."));static placeNode=e=>new U("ueb-icon-place-node",((e,t)=>"Place a new node."));static replaceLink=e=>new U("ueb-icon-replace-link",((e,t)=>"Replace existing input connections."));static sameNode=e=>new U("ueb-icon-same-node",((e,t)=>"Both are on the same node."));static typesIncompatible=e=>new U("ueb-icon-types-incompatible",((e,t)=>`${e.getType()} is not compatible with ${t.getType()}.`));icon;message;linkElement;constructor(e,t){super({},new Z),this.icon=e,this.message=t}}customElements.define("ueb-link-message",U);class X extends z{#I;#H;#j;link;enteredPin;linkValid=!1;constructor(e,t,n){super(e,t,n);let i=this;this.#H=e=>{if(!i.enteredPin){i.linkValid=!1,i.enteredPin=e.target;const t=i.enteredPin,n=i.target;t.getNodeElement()==n.getNodeElement()?this.setLinkMessage(U.sameNode()):t.isOutput()==n.isOutput()||t.isOutput()==n.isOutput()?this.setLinkMessage(U.directionsIncompatible()):i.blueprint.getLinks([t,n]).length?(this.setLinkMessage(U.replaceLink()),i.linkValid=!0):(this.setLinkMessage(U.correct()),i.linkValid=!0)}},this.#j=e=>{i.enteredPin==e.target&&(i.enteredPin=null,i.linkValid=!1,this.setLinkMessage(U.placeNode()))}}startDrag(){this.link=new _(this.target,null),this.blueprint.nodesContainerElement.prepend(this.link),this.setLinkMessage(U.placeNode()),this.#I=this.blueprint.querySelectorAll("ueb-pin"),this.#I.forEach((e=>{e!=this.target&&(e.getClickableElement().addEventListener("mouseenter",this.#H),e.getClickableElement().addEventListener("mouseleave",this.#j))})),this.link.startDragging(),this.link.setDestinationLocation(this.clickedPosition)}dragTo(e,t){this.link.setDestinationLocation(e)}endDrag(){this.#I.forEach((e=>{e.removeEventListener("mouseenter",this.#H),e.removeEventListener("mouseleave",this.#j)})),this.enteredPin&&this.linkValid?(this.blueprint.addGraphElement(this.link),this.link.destinationPin=this.enteredPin,this.link.setLinkMessage(null),this.link.finishDragging()):(this.link.finishDragging(),this.link.remove()),this.enteredPin=null,this.link=null,this.#I=null}setLinkMessage(e){this.link.setLinkMessage(e)}}class Y extends O{createInputObjects(e){return[new X(e.clickableElement,e.blueprint,{moveEverywhere:!0,looseTarget:!0})]}render(e){const t=T`${this.renderIcon(e)}
`,n=T`${W(e.getPinDisplayName())} ${this.renderInput(e)}
`;return T`${e.isInput()?t+n:n+t}
`}renderIcon(e){return''}renderInput(e){return""}setup(e){super.setup(e),e.classList.add("ueb-node-"+(e.isInput()?"input":e.isOutput()?"output":"hidden"),"ueb-pin-type-"+W(e.getType())),e.dataset.id=e.GetPinIdValue(),e.entity.bAdvancedView&&(e.dataset.advancedView="true"),e.clickableElement=e,e.nodeElement=e.closest("ueb-node")}applyConnected(e){e.isLinked()?e.classList.add("ueb-pin-fill"):e.classList.remove("ueb-pin-fill")}getLinkLocation(e){const t=e.querySelector(".ueb-pin-icon").getBoundingClientRect();return e.blueprint.compensateTranslation(r.convertLocation([(t.left+t.right)/2,(t.top+t.bottom)/2],e.blueprint.gridElement))}}class Q extends Y{#F;get inputContentElements(){return this.#F}setup(e){if(super.setup(e),this.#F=[...e.querySelectorAll(".ueb-pin-input-content")],this.#F.length){this.setInputs(e,[r.decodeInputString(e.entity.DefaultValue)]);let t=this;this.onFocusHandler=t=>e.blueprint.dispatchEditTextEvent(!0),this.onFocusOutHandler=n=>{n.preventDefault(),document.getSelection().removeAllRanges(),t.setInputs(e,this.getInputs(e)),e.blueprint.dispatchEditTextEvent(!1)},this.#F.forEach((e=>{e.addEventListener("focus",this.onFocusHandler),e.addEventListener("focusout",this.onFocusOutHandler)}))}}cleanup(e){super.cleanup(e),this.#F.forEach((e=>{e.removeEventListener("focus",this.onFocusHandler),e.removeEventListener("focusout",this.onFocusOutHandler)}))}createInputObjects(e){return[...super.createInputObjects(e),...this.#F.map((t=>new $(t,e.blueprint)))]}getInput(e){return this.getInputs(e).reduce(((e,t)=>e+t),"")}getInputs(e){return this.#F.map((e=>e.innerHTML.replaceAll("
","\n")))}setInputs(e,t=[],n=!0){this.#F.forEach(((e,n)=>e.innerText=t[n])),n&&(e.entity.DefaultValue=this.getInput(e))}renderInput(e){return e.isInput()?T`
`:""}}class J extends Q{#z;setup(e){super.setup(e),this.#z=e.querySelector(".ueb-pin-input");let t=this;this.onChangeHandler=n=>e.entity.DefaultValue=t.#z.checked?"true":"false",this.#z.addEventListener("change",this.onChangeHandler)}cleanup(e){super.cleanup(e),this.#z.removeEventListener("change",this.onChangeHandler)}getInputs(e){return[this.#z.checked?"true":"false"]}setInputs(e,t=[]){e.entity.DefaultValue=t.length?t[0]:this.getInput(e),this.#z.checked="true"==e.entity.DefaultValue}renderInput(e){return e.isInput()?T``:super.renderInput(e)}}class ee extends Y{renderIcon(e){return T``}}class te extends Q{#z;setup(e){super.setup(e),this.#z=e.querySelector(".ueb-pin-input"),this.#z.dataset.linearColor=e.entity.DefaultValue.toString()}getInputs(e){return[this.#z.dataset.linearColor]}setInputs(e,t=[]){}renderInput(e){return e.isInput()?T``:super.renderInput(e)}}class ne extends Q{onInputHandler;setup(e){super.setup(e),this.onInputHandler=e=>{e.stopPropagation(),("insertParagraph"==e.inputType||"insertLineBreak"==e.inputType||"insertFromPaste"==e.inputType&&e.target.innerText.includes("\n"))&&(e.target.blur(),this.inputContentElements.forEach((e=>e.innerText=e.innerText.replaceAll("\n",""))))},this.inputContentElements.forEach((e=>{e.addEventListener("input",this.onInputHandler)}))}cleanup(e){super.cleanup(e),this.inputContentElements.forEach((e=>{e.removeEventListener("input",this.onInputHandler)}))}getInputs(e){return this.inputContentElements.map((e=>e.textContent))}setInputs(e,t=[],n=!0){t=t.map((e=>e.replaceAll("\n",""))),super.setInputs(e,t,n)}}class ie extends Q{setInputs(e,t=[]){let n=parseFloat(t.length?t[0]:this.getInput(e)),i=!0;isNaN(n)&&(n=parseFloat(""!=e.entity.DefaultValue?e.entity.DefaultValue:e.entity.AutogeneratedDefaultValue)),isNaN(n)&&(n=0,i=!1),t[0]=r.minDecimals(n),super.setInputs(e,t,i)}}class re extends Q{setup(e){super.setup(e)}}class se extends V{static#G={bool:J,exec:ee,name:ne,real:ie,string:re,struct:{"/Script/CoreUObject.LinearColor":te}};static getTypeTemplate(e){let t=se.#G[e.getType()];return t.constructor===Object&&(t=t[e.getSubCategory()]),t??Y}#B="";nodeElement;clickableElement;connections=0;constructor(e){super(e,new(se.getTypeTemplate(e)))}connectedCallback(){super.connectedCallback(),this.#B=window.getComputedStyle(this).getPropertyValue("--ueb-pin-color")}GetPinId(){return this.entity.PinId}GetPinIdValue(){return this.GetPinId().value}getPinName(){return this.entity.PinName}getPinDisplayName(){let e=null;return this.entity.PinToolTip&&(e=this.entity.PinToolTip.match(/\s*(.+?(?=\n)|.+\S)\s*/))?r.formatStringName(e[1]):r.formatStringName(this.entity.PinName)}isInput(){return this.entity.isInput()}isOutput(){return this.entity.isOutput()}isLinked(){return this.entity.isLinked()}getType(){return this.entity.getType()}getClickableElement(){return this.clickableElement}getColor(){return this.#B}getLinkLocation(){return this.template.getLinkLocation(this)}getNodeElement(){return this.closest("ueb-node")}getLinks(){return this.entity.LinkedTo??[]}sanitizeLinks(){this.entity.LinkedTo=this.getLinks().filter((e=>{let t=this.blueprint.getPin(e);if(t){this.blueprint.getLink(this,t,!0)||this.blueprint.addGraphElement(new _(this,t))}return t}))}linkTo(e){this.entity.linkTo(e.nodeElement.getNodeName(),e.entity),this.template.applyConnected(this)}unlinkFrom(e){this.entity.unlinkFrom(e.nodeElement.getNodeName(),e.entity),this.template.applyConnected(this)}redirectLink(e,t){const n=this.entity.LinkedTo.findIndex((t=>t.objectName.toString()==e.getPinName()&&t.pinGuid==e.entity.PinId));return n>=0&&(this.entity.LinkedTo[n]=t,!0)}}customElements.define("ueb-pin",se);class ae extends z{constructor(e,t,n){super(e,t,n),this.stepSize=parseInt(n?.stepSize??this.blueprint.gridSize),this.mouseLocation=[0,0]}startDrag(){this.mouseLocation=r.snapToGrid(this.clickedPosition,this.stepSize),this.target.selected||(this.blueprint.unselectAll(),this.target.setSelected(!0))}dragTo(e,t){const[n,i]=this.stepSize>1?[r.snapToGrid(e,this.stepSize),r.snapToGrid(this.target.location,this.stepSize)]:[e,this.target.location],s=[n[0]-this.mouseLocation[0],n[1]-this.mouseLocation[1]];0==s[0]&&0==s[1]||(s[0]+=i[0]-this.target.location[0],s[1]+=i[1]-this.target.location[1],this.target.dispatchDragEvent(s),this.mouseLocation=n)}unclicked(){this.started||(this.blueprint.unselectAll(),this.target.setSelected(!0))}}class oe extends O{createInputObjects(e){return[...super.createInputObjects(e),new ae(e,e.blueprint,{looseTarget:!0})]}applyLocation(e){e.style.setProperty("--ueb-position-x",W(e.location[0])),e.style.setProperty("--ueb-position-y",W(e.location[1]))}applySelected(e){e.selected?e.classList.add("ueb-selected"):e.classList.remove("ueb-selected")}}class le extends oe{toggleAdvancedDisplayHandler;render(e){return T` ${W(e.getNodeDisplayName())}
${"DevelopmentOnly"==e.entity.EnabledState?.toString()?T`
Development Only
`:""} ${e.entity.AdvancedPinDisplay?T`
`:""}
${e.linkMessageText}
`:O``}`}}class Ue extends ze{static properties={...super.properties,source:{type:String,reflect:!0},destination:{type:String,reflect:!0},dragging:{type:Boolean,attribute:"data-dragging",converter:ne.booleanConverter,reflect:!0},originatesFromInput:{type:Boolean,attribute:!1},svgPathD:{type:String,attribute:!1},linkMessageIcon:{type:String,attribute:!1},linkMessageText:{type:String,attribute:!1}};#$;get sourcePin(){return this.#$}set sourcePin(e){this.#C(e,!1)}#L;get destinationPin(){return this.#L}set destinationPin(e){this.#C(e,!0)}#O;#D;#T;#M;#_;pathElement;constructor(e,t){super({},new Re);const n=this;this.#O=()=>n.remove(),this.#D=e=>n.addSourceLocation(e.detail.value),this.#T=e=>n.addDestinationLocation(e.detail.value),this.#M=e=>n.setSourceLocation(),this.#_=e=>n.setDestinationLocation(),this.source=null,this.destination=null,this.dragging=!1,this.originatesFromInput=!1,this.startPercentage=0,this.svgPathD="",this.startPixels=0,this.linkMessageIcon="",this.linkMessageText="",e&&(this.sourcePin=e,t||(this.finaPositionX=this.initialPositionX,this.finaPositionY=this.initialPositionY)),t&&(this.destinationPin=t,e||(this.initialPositionX=this.finaPositionX,this.initialPositionY=this.finaPositionY)),this.#I()}#C(e,t){const n=()=>t?this.destinationPin:this.sourcePin;if(n()!=e){if(n()){const e=n().getNodeElement();e.removeEventListener(J.nodeDeleteEventName,this.#O),e.removeEventListener(J.nodeDragLocalEventName,t?this.#T:this.#D),e.removeEventListener(J.nodeReflowEventName,t?this.#_:this.#M),this.#H()}if(t?this.#L=e:this.#$=e,n()){const e=n().getNodeElement();e.addEventListener(J.nodeDeleteEventName,this.#O),e.addEventListener(J.nodeDragLocalEventName,t?this.#T:this.#D),e.addEventListener(J.nodeReflowEventName,t?this.#_:this.#M),t?this.setDestinationLocation():(this.setSourceLocation(),this.originatesFromInput=this.sourcePin.isInput()),this.#I()}}}#I(){this.sourcePin&&this.destinationPin&&(this.sourcePin.linkTo(this.destinationPin),this.destinationPin.linkTo(this.sourcePin))}#H(){this.sourcePin&&this.destinationPin&&(this.sourcePin.unlinkFrom(this.destinationPin),this.destinationPin.unlinkFrom(this.sourcePin))}disconnectedCallback(){super.disconnectedCallback(),this.#H(),this.sourcePin=null,this.destinationPin=null}setSourceLocation(e=null){if(null==e){const t=this;if(!this.hasUpdated||!this.sourcePin.hasUpdated)return void Promise.all([this.updateComplete,this.sourcePin.updateComplete]).then((()=>t.setSourceLocation()));e=this.sourcePin.template.getLinkLocation(this.sourcePin)}const[t,n]=e;this.initialPositionX=t,this.initialPositionY=n}setDestinationLocation(e=null){if(null==e){const t=this;if(!this.hasUpdated||!this.destinationPin.hasUpdated)return void Promise.all([this.updateComplete,this.destinationPin.updateComplete]).then((()=>t.setDestinationLocation()));e=this.destinationPin.template.getLinkLocation(this.destinationPin)}this.finaPositionX=e[0],this.finaPositionY=e[1]}startDragging(){this.dragging=!0}finishDragging(){this.dragging=!1}removeMessage(){this.linkMessageIcon="",this.linkMessageText=""}setMessageConvertType(){this.linkMessageIcon="ueb-icon-conver-type",this.linkMessageText=`Convert ${this.sourcePin.pinType} to ${this.destinationPin.pinType}.`}setMessageCorrect(){this.linkMessageIcon="ueb-icon-correct",this.linkMessageText=""}setMessageDirectionsIncompatible(){this.linkMessageIcon="ueb-icon-directions-incompatible",this.linkMessageText="Directions are not compatbile."}setMessagePlaceNode(){this.linkMessageIcon="ueb-icon-place-node",this.linkMessageText="Place a new node."}setMessageReplaceLink(){this.linkMessageIcon="ueb-icon-replace-link",this.linkMessageText="Replace existing input connections."}setMessageSameNode(){this.linkMessageIcon="ueb-icon-same-node",this.linkMessageText="Both are on the same node."}setMEssagetypesIncompatible(){this.linkMessageIcon="ueb-icon-types-incompatible",this.linkMessageText=`${this.sourcePin.pinType} is not compatible with ${this.destinationPin.pinType}.`}}customElements.define("ueb-link",Ue);class Ve extends _e{#j;#B;#F;link;enteredPin;linkValid=!1;constructor(e,t,n){super(e,t,n);let i=this;this.#B=e=>{if(!i.enteredPin){i.linkValid=!1,i.enteredPin=e.target;const t=i.enteredPin,n=i.target;t.getNodeElement()==n.getNodeElement()?i.link.setMessageSameNode():t.isOutput()==n.isOutput()||t.isOutput()==n.isOutput()?i.link.setMessageDirectionsIncompatible():i.blueprint.getLinks([t,n]).length?(i.link.setMessageReplaceLink(),i.linkValid=!0):(i.link.setMessageCorrect(),i.linkValid=!0)}},this.#F=e=>{i.enteredPin==e.target&&(i.enteredPin=null,i.linkValid=!1,i.link?.setMessagePlaceNode())}}startDrag(e){this.link=new Ue(this.target,null),this.blueprint.linksContainerElement.prepend(this.link),this.link.setMessagePlaceNode(),this.#j=this.blueprint.querySelectorAll("ueb-pin"),this.#j.forEach((e=>{e!=this.target&&(e.getClickableElement().addEventListener("mouseenter",this.#B),e.getClickableElement().addEventListener("mouseleave",this.#F))})),this.link.startDragging(),this.link.setDestinationLocation(e)}dragTo(e,t){this.link.setDestinationLocation(e)}endDrag(){this.#j.forEach((e=>{e.removeEventListener("mouseenter",this.#B),e.removeEventListener("mouseleave",this.#F)})),this.enteredPin&&this.linkValid?(this.blueprint.addGraphElement(this.link),this.link.destinationPin=this.enteredPin,this.link.removeMessage(),this.link.finishDragging()):(this.link.finishDragging(),this.link.remove()),this.enteredPin=null,this.link=null,this.#j=null}}class Ke extends Ne{static styles=r``;connectedCallback(e){super.connectedCallback(e),e.nodeElement=e.closest("ueb-node")}createInputObjects(e){return[new Ve(e.clickableElement,e.blueprint,{moveEverywhere:!0,looseTarget:!0})]}render(e){const t=O`${this.renderIcon(e)}
`,n=O`${e.getPinDisplayName()} ${this.renderInput(e)}
`;return O`${e.isInput()?O`${t}${n}`:O`${n}${t}`}
`}renderIcon(e){return O``}renderInput(e){return O``}firstUpdated(e,t){super.firstUpdated(e,t),e.dataset.id=e.GetPinIdValue(),e.clickableElement=e}getLinkLocation(e){const t=e.querySelector(".ueb-pin-icon").getBoundingClientRect(),n=ne.convertLocation([(t.left+t.right)/2,(t.top+t.bottom)/2],e.blueprint.gridElement);return e.blueprint.compensateTranslation(n)}}class We extends Ke{#z;get inputContentElements(){return this.#z}firstUpdated(e,t){if(super.firstUpdated(e,t),this.#z=[...e.querySelectorAll(".ueb-pin-input-content")],this.#z.length){this.setInputs(e,this.getInputs(e));let t=this;this.onFocusHandler=t=>e.blueprint.dispatchEditTextEvent(!0),this.onFocusOutHandler=n=>{n.preventDefault(),document.getSelection()?.removeAllRanges(),t.setInputs(e,this.getInputs(e)),e.blueprint.dispatchEditTextEvent(!1)},this.#z.forEach((e=>{e.addEventListener("focus",this.onFocusHandler),e.addEventListener("focusout",this.onFocusOutHandler)}))}}cleanup(e){super.cleanup(e),this.#z.forEach((e=>{e.removeEventListener("focus",this.onFocusHandler),e.removeEventListener("focusout",this.onFocusOutHandler)}))}createInputObjects(e){return[...super.createInputObjects(e),...this.#z.map((t=>new Fe(t,e.blueprint)))]}getInput(e){return this.getInputs(e).reduce(((e,t)=>e+t),"")}getInputs(e){return ne.decodeInputString(e.entity.DefaultValue),this.#z.map((e=>e.innerHTML.replaceAll("
","\n")))}setInputs(e,t=[],n=!0){this.#z.forEach(((e,n)=>e.innerText=t[n])),n&&e.setDefaultValue(t.reduce(((e,t)=>e+t),""))}renderInput(e){return e.isInput()?O`
`:O``}}class Xe extends We{#G;firstUpdated(e,t){super.firstUpdated(e,t),this.#G=e.querySelector(".ueb-pin-input");let n=this;this.onChangeHandler=t=>e.entity.DefaultValue=n.#G.checked?"true":"false",this.#G.addEventListener("change",this.onChangeHandler)}cleanup(e){super.cleanup(e),this.#G.removeEventListener("change",this.onChangeHandler)}getInputs(e){return[this.#G.checked?"true":"false"]}renderInput(e){return e.isInput()?O``:super.renderInput(e)}}class Ye extends Ke{renderIcon(e){return O``}}class qe extends We{#G;firstUpdated(e,t){super.firstUpdated(e,t),this.#G=e.querySelector(".ueb-pin-input")}getInputs(e){return[this.#G.dataset.linearColor]}setInputs(e,t=[]){}renderInput(e){return e.isInput()?O``:super.renderInput(e)}}class Ze extends We{onInputHandler;firstUpdated(e,t){super.firstUpdated(e,t),this.onInputHandler=e=>{e.stopPropagation(),("insertParagraph"==e.inputType||"insertLineBreak"==e.inputType||"insertFromPaste"==e.inputType&&e.target.innerText.includes("\n"))&&(e.target.blur(),this.inputContentElements.forEach((e=>e.innerText=e.innerText.replaceAll("\n",""))))},this.inputContentElements.forEach((e=>{e.addEventListener("input",this.onInputHandler)}))}cleanup(e){super.cleanup(e),this.inputContentElements.forEach((e=>{e.removeEventListener("input",this.onInputHandler)}))}getInputs(e){return this.inputContentElements.map((e=>e.textContent))}setInputs(e,t=[],n=!0){t=t.map((e=>e.replaceAll("\n",""))),super.setInputs(e,t,n)}}class Je extends We{setInputs(e,t=[]){let n=parseFloat(t.length?t[0]:this.getInput(e)),i=!0;isNaN(n)&&(n=parseFloat(""!=e.entity.DefaultValue?e.entity.DefaultValue:e.entity.AutogeneratedDefaultValue)),isNaN(n)&&(n=0,i=!1),t[0]=ne.minDecimals(n),super.setInputs(e,t,i)}}class Qe extends We{firstUpdated(e,t){super.firstUpdated(e,t)}}class et extends je{static#R={bool:Xe,exec:Ye,name:Ze,real:Je,string:Qe,struct:{"/Script/CoreUObject.LinearColor":qe}};static properties={advancedView:{type:String,attribute:"data-advanced-view",reflect:!0},color:{type:de,converter:{fromAttribute:(e,t)=>ke.grammar.LinearColorFromAnyColor.parse(e).value,toAttribute:(e,t)=>ne.printLinearColor(e)},reflect:!0},defaultValue:{type:String,attribute:!1},isLinked:{type:Boolean,converter:ne.booleanConverter,attribute:"data-linked",reflect:!0},pinType:{type:String,attribute:"data-type",reflect:!0},pinDirection:{type:String,attribute:"data-direction",reflect:!0}};static getTypeTemplate(e){let t=et.#R[e.getType()];return t.constructor===Object&&(t=t[e.getSubCategory()]),t??Ke}nodeElement;clickableElement;connections=0;get defaultValue(){return this.unreactiveDefaultValue}set defaultValue(e){let t=this.unreactiveDefaultValue;this.unreactiveDefaultValue=e,this.requestUpdate("defaultValue",t)}constructor(e){super(e,new(et.getTypeTemplate(e))),this.advancedView=e.bAdvancedView,this.unreactiveDefaultValue=e.getDefaultValue(),this.pinType=this.entity.getType(),this.color=this.constructor.properties.color.converter.fromAttribute(J.pinColor[this.pinType].toString()),this.isLinked=!1,this.pinDirection=e.isInput()?"input":e.isOutput()?"output":"hidden",this.entity.subscribe("DefaultValue",(e=>this.defaultValue=e.toString())),this.entity.subscribe("PinToolTip",(e=>{let t=e.match(/\s*(.+?(?=\n)|.+\S)\s*/);return t?ne.formatStringName(t[1]):ne.formatStringName(this.entity.PinName)}))}connectedCallback(){super.connectedCallback()}GetPinId(){return this.entity.PinId}GetPinIdValue(){return this.GetPinId().value}getPinName(){return this.entity.PinName}getPinDisplayName(){let e=null;return this.entity.PinToolTip&&(e=this.entity.PinToolTip.match(/\s*(.+?(?=\n)|.+\S)\s*/))?ne.formatStringName(e[1]):ne.formatStringName(this.entity.PinName)}isInput(){return this.entity.isInput()}isOutput(){return this.entity.isOutput()}getClickableElement(){return this.clickableElement}getLinkLocation(){return this.template.getLinkLocation(this)}getNodeElement(){return this.nodeElement}getLinks(){return this.entity.LinkedTo??[]}setDefaultValue(e){this.entity.DefaultValue=e}sanitizeLinks(){this.entity.LinkedTo=this.getLinks().filter((e=>{let t=this.blueprint.getPin(e);if(t){this.blueprint.getLink(this,t,!0)||this.blueprint.addGraphElement(new Ue(this,t))}return t}))}linkTo(e){this.entity.linkTo(e.getNodeElement().getNodeName(),e.entity),this.isLinked=this.entity.isLinked()}unlinkFrom(e){this.entity.unlinkFrom(e.getNodeElement().getNodeName(),e.entity),this.isLinked=this.entity.isLinked()}redirectLink(e,t){const n=this.entity.LinkedTo.findIndex((t=>t.objectName.toString()==e.getNodeElement().getNodeName()&&t.pinGuid.valueOf()==e.entity.PinId.valueOf()));return n>=0&&(this.entity.LinkedTo[n]=t,!0)}}customElements.define("ueb-pin",et);class tt extends _e{constructor(e,t,n){super(e,t,n),this.stepSize=parseInt(n?.stepSize??J.gridSize),this.mouseLocation=[0,0]}startDrag(){this.mouseLocation=ne.snapToGrid(this.clickedPosition,this.stepSize),this.target.selected||(this.blueprint.unselectAll(),this.target.setSelected(!0))}dragTo(e,t){const n=[this.target.locationX,this.target.locationY],[i,r]=this.stepSize>1?[ne.snapToGrid(e,this.stepSize),ne.snapToGrid(n,this.stepSize)]:[e,n],s=[i[0]-this.mouseLocation[0],i[1]-this.mouseLocation[1]];0==s[0]&&0==s[1]||(s[0]+=r[0]-this.target.locationX,s[1]+=r[1]-this.target.locationY,this.target.dispatchDragEvent(s),this.mouseLocation=i)}unclicked(){this.started||(this.blueprint.unselectAll(),this.target.setSelected(!0))}}class nt extends Ne{createInputObjects(e){return[...super.createInputObjects(e),new tt(e,e.blueprint,{looseTarget:!0})]}update(e,t){super.update(e,t),t.has("locationX")&&e.style.setProperty("--ueb-position-x",`${e.locationX}`),t.has("locationY")&&e.style.setProperty("--ueb-position-y",`${e.locationY}`)}firstUpdated(e,t){super.firstUpdated(e,t),e.selected&&!e.listeningDrag&&e.setSelected(!0)}}class it extends nt{toggleAdvancedDisplayHandler;render(e){return O`${"DevelopmentOnly"==e.enabledState?.toString()?O`
Development Only
`:O``} ${e.advancedPinDisplay?O`
`:O``}
@@ -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}"]`
- )
+ ))
}
}
diff --git a/js/template/BoolPinTemplate.js b/js/template/BoolPinTemplate.js
index f00b0d4..892717b 100644
--- a/js/template/BoolPinTemplate.js
+++ b/js/template/BoolPinTemplate.js
@@ -1,6 +1,4 @@
-// @ts-check
-
-import html from "./html"
+import { html } from "lit"
import IInputPinTemplate from "./IInputPinTemplate"
/**
@@ -14,9 +12,10 @@ export default class BoolPinTemplate extends IInputPinTemplate {
/**
* @param {PinElement} pin
+ * @param {Map} changedProperties
*/
- setup(pin) {
- super.setup(pin)
+ firstUpdated(pin, changedProperties) {
+ super.firstUpdated(pin, changedProperties)
this.#input = pin.querySelector(".ueb-pin-input")
let self = this
this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false"
@@ -38,22 +37,13 @@ export default class BoolPinTemplate extends IInputPinTemplate {
return [this.#input.checked ? "true" : "false"]
}
- /**
- * @param {PinElement} pin
- * @param {String[]?} value
- */
- setInputs(pin, value = []) {
- pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin)
- this.#input.checked = pin.entity.DefaultValue == "true"
- }
-
/**
* @param {PinElement} pin
*/
renderInput(pin) {
if (pin.isInput()) {
return html`
-
+
`
}
return super.renderInput(pin)
diff --git a/js/template/ExecPinTemplate.js b/js/template/ExecPinTemplate.js
index 8dd0e9c..ba070f1 100644
--- a/js/template/ExecPinTemplate.js
+++ b/js/template/ExecPinTemplate.js
@@ -1,6 +1,4 @@
-// @ts-check
-
-import html from "./html"
+import { html } from "lit"
import PinTemplate from "./PinTemplate"
/**
@@ -15,19 +13,9 @@ export default class ExecPinTemplate extends PinTemplate {
renderIcon(pin) {
return html`
`
}
diff --git a/js/template/IFromToPositionedTemplate.js b/js/template/IFromToPositionedTemplate.js
new file mode 100755
index 0000000..26cb270
--- /dev/null
+++ b/js/template/IFromToPositionedTemplate.js
@@ -0,0 +1,33 @@
+import ITemplate from "./ITemplate"
+
+/**
+ * @typedef {import("../element/IFromToPositionedElement").default} IFromToPositionedElement
+ */
+
+/**
+ * @template {IFromToPositionedElement} T
+ * @extends {ITemplate
}
+ */
+export default class IFromToPositionedTemplate extends ITemplate {
+
+ /**
+ * @param {T} selector
+ * @param {Map} changedProperties
+ */
+ update(selector, changedProperties) {
+ super.update(selector, changedProperties)
+ if (changedProperties.has("initialPositionX")) {
+ selector.style.setProperty("--ueb-from-x", `${selector.initialPositionX}`)
+ }
+ if (changedProperties.has("initialPositionY")) {
+ selector.style.setProperty("--ueb-from-y", `${selector.initialPositionY}`)
+ }
+ if (changedProperties.has("finaPositionX")) {
+ selector.style.setProperty("--ueb-to-x", `${selector.finaPositionX}`)
+ }
+ if (changedProperties.has("finaPositionY")) {
+ selector.style.setProperty("--ueb-to-y", `${selector.finaPositionY}`)
+ }
+ }
+
+}
diff --git a/js/template/IInputPinTemplate.js b/js/template/IInputPinTemplate.js
index b071a2d..5df2f24 100644
--- a/js/template/IInputPinTemplate.js
+++ b/js/template/IInputPinTemplate.js
@@ -1,6 +1,4 @@
-// @ts-check
-
-import html from "./html"
+import { html } from "lit"
import MouseIgnore from "../input/mouse/MouseIgnore"
import PinTemplate from "./PinTemplate"
import Utility from "../Utility"
@@ -19,21 +17,18 @@ export default class IInputPinTemplate extends PinTemplate {
/**
* @param {PinElement} pin
+ * @param {Map} changedProperties
*/
- setup(pin) {
- super.setup(pin)
- this.#inputContentElements = /** @type {HTMLElement[]} */(
- [...pin.querySelectorAll(".ueb-pin-input-content")]
- )
+ firstUpdated(pin, changedProperties) {
+ super.firstUpdated(pin, changedProperties)
+ this.#inputContentElements = [...pin.querySelectorAll(".ueb-pin-input-content")]
if (this.#inputContentElements.length) {
- this.setInputs(pin, [
- Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue))
- ])
+ this.setInputs(pin, this.getInputs(pin))
let self = this
this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true)
this.onFocusOutHandler = e => {
e.preventDefault()
- document.getSelection().removeAllRanges() // Deselect text inside the input
+ document.getSelection()?.removeAllRanges() // Deselect text inside the input
self.setInputs(pin, this.getInputs(pin))
pin.blueprint.dispatchEditTextEvent(false)
}
@@ -76,6 +71,7 @@ export default class IInputPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
getInputs(pin) {
+ Utility.decodeInputString(pin.entity.DefaultValue)
return this.#inputContentElements.map(element =>
// Faster than innerText which causes reflow
element.innerHTML.replaceAll("
", "\n"))
@@ -88,7 +84,7 @@ export default class IInputPinTemplate extends PinTemplate {
setInputs(pin, values = [], updateDefaultValue = true) {
this.#inputContentElements.forEach((element, i) => element.innerText = values[i])
if (updateDefaultValue) {
- pin.entity.DefaultValue = this.getInput(pin)
+ pin.setDefaultValue(values.reduce((acc, cur) => acc + cur, ""))
}
}
@@ -99,10 +95,10 @@ export default class IInputPinTemplate extends PinTemplate {
if (pin.isInput()) {
return html`
-
+
`
}
- return ""
+ return html``
}
}
diff --git a/js/template/ITemplate.js b/js/template/ITemplate.js
index 2224fc9..485f2fc 100644
--- a/js/template/ITemplate.js
+++ b/js/template/ITemplate.js
@@ -1,8 +1,8 @@
-// @ts-check
+import { css, html } from "lit"
/**
* @typedef {import("../element/IElement").default} IElement
- * @typedef {import("../input/IInput").default} IInput")}
+ * @typedef {import("../input/IInput").default} IInput
*/
/**
@@ -10,26 +10,59 @@
*/
export default class ITemplate {
+ static styles = css``
+
/** @type {IInput[]} */
#inputObjects = []
-
get inputObjects() {
return this.#inputObjects
}
/**
- * @param {T} entity
+ * @param {T} element
*/
- render(entity) {
- return ""
+ constructed(element) {
}
/**
* @param {T} element
*/
- setup(element) {
- // TODO replace with the safer element.setHTML(...) when it will be availableBreack
- element.innerHTML = this.render(element)
+ connectedCallback(element) {
+ }
+
+ /**
+ * @param {T} element
+ * @param {Map} changedProperties
+ */
+ willUpdate(element, changedProperties) {
+ }
+
+ /**
+ * @param {T} element
+ * @param {Map} changedProperties
+ */
+ update(element, changedProperties) {
+ }
+
+ /**
+ * @param {T} element
+ */
+ render(element) {
+ return html``
+ }
+
+ /**
+ * @param {T} element
+ * @param {Map} changedProperties
+ */
+ firstUpdated(element, changedProperties) {
+ }
+
+ /**
+ * @param {T} element
+ * @param {Map} changedProperties
+ */
+ updated(element, changedProperties) {
}
/**
diff --git a/js/template/LinearColorPinTemplate.js b/js/template/LinearColorPinTemplate.js
index 2191be2..8bcc44b 100644
--- a/js/template/LinearColorPinTemplate.js
+++ b/js/template/LinearColorPinTemplate.js
@@ -1,11 +1,9 @@
-// @ts-check
-
-import html from "./html"
+import { html } from "lit"
import IInputPinTemplate from "./IInputPinTemplate"
/**
* @typedef {import("../element/PinElement").default} PinElement
- * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)}
+ * @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity}
*/
export default class LinearColorPinTemplate extends IInputPinTemplate {
@@ -15,12 +13,11 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
/**
* @param {PinElement} pin
+ * @param {Map} changedProperties
*/
- setup(pin) {
- super.setup(pin)
+ firstUpdated(pin, changedProperties) {
+ super.firstUpdated(pin, changedProperties)
this.#input = pin.querySelector(".ueb-pin-input")
- this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString()
- let self = this
}
/**
@@ -32,7 +29,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
/**
* @param {PinElement} pin
- * @param {String[]?} value
+ * @param {String[]} value
*/
setInputs(pin, value = []) {
}
@@ -43,7 +40,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
renderInput(pin) {
if (pin.isInput()) {
return html`
-
+
`
}
return super.renderInput(pin)
diff --git a/js/template/LinkMessageTemplate.js b/js/template/LinkMessageTemplate.js
deleted file mode 100644
index cec5336..0000000
--- a/js/template/LinkMessageTemplate.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// @ts-check
-
-import html from "./html"
-import ITemplate from "./ITemplate"
-import sanitizeText from "./sanitizeText"
-
-/**
- * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
- */
-
-export default class LinkMessageTemplate extends ITemplate {
-
- /**
- * @param {LinkMessageElement} linkMessage
- */
- render(linkMessage) {
- return html`
-
-
- `
- }
-
- /**
- * Applies the style to the element.
- * @param {LinkMessageElement} linkMessage
- */
- setup(linkMessage) {
- const a = super.setup(linkMessage)
- const linkMessageSetup = _ =>
- /** @type {HTMLElement} */(linkMessage.querySelector(".ueb-link-message")).innerText = linkMessage.message(
- linkMessage.linkElement.sourcePin,
- linkMessage.linkElement.destinationPin
- )
- linkMessage.linkElement = linkMessage.closest("ueb-link")
- if (linkMessage.linkElement) {
- linkMessageSetup()
- } else {
- window.customElements.whenDefined("ueb-link-message").then(linkMessageSetup)
- }
- }
-
-}
diff --git a/js/template/LinkTemplate.js b/js/template/LinkTemplate.js
index a2b2b9a..f7166f5 100755
--- a/js/template/LinkTemplate.js
+++ b/js/template/LinkTemplate.js
@@ -1,16 +1,17 @@
-// @ts-check
-
+import { css, html } from "lit"
import Configuration from "../Configuration"
-import html from "./html"
-import ITemplate from "./ITemplate"
-import sanitizeText from "./sanitizeText"
+import Utility from "../Utility"
+import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
/**
* @typedef {import("../element/LinkElement").default} LinkElement
- * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
*/
-export default class LinkTemplate extends ITemplate {
+
+/**
+ * @extends {IFromToPositionedTemplate}
+ */
+export default class LinkTemplate extends IFromToPositionedTemplate {
/**
* Returns a function performing the inverse multiplication y = a / x + q. The value of a and q are calculated using
@@ -53,12 +54,59 @@ export default class LinkTemplate extends ITemplate {
: m * x + q
}
- static c1DecreasingValue = LinkTemplate.decreasingValue(-0.1, [100, 15])
+ static c1DecreasingValue = LinkTemplate.decreasingValue(-0.15, [100, 15])
static c2DecreasingValue = LinkTemplate.decreasingValue(-0.06, [500, 130])
static c2Clamped = LinkTemplate.clampedLine([0, 100], [200, 30])
+ /**
+ * @param {LinkElement} link
+ * @param {Map} changedProperties
+ */
+ willUpdate(link, changedProperties) {
+ super.willUpdate(link, changedProperties)
+ const dx = Math.max(Math.abs(link.initialPositionX - link.finaPositionX), 1)
+ const width = Math.max(dx, Configuration.linkMinWidth)
+ // const height = Math.max(Math.abs(link.initialPositionY - link.finaPositionY), 1)
+ const fillRatio = dx / width
+ // const aspectRatio = width / height
+ const xInverted = link.originatesFromInput
+ ? link.initialPositionX < link.finaPositionX
+ : link.finaPositionX < link.initialPositionX
+ link.startPixels = dx < width // If under minimum width
+ ? (width - dx) / 2 // Start from half the empty space
+ : 0 // Otherwise start from the beginning
+ link.startPercentage = xInverted ? link.startPixels + fillRatio * 100 : link.startPixels
+ const c1
+ = link.startPercentage
+ + (xInverted
+ ? LinkTemplate.c1DecreasingValue(width)
+ : 10
+ )
+ * fillRatio
+ let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + link.startPercentage
+ c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width))
+ link.svgPathD = Configuration.linkRightSVGPath(link.startPercentage, c1, c2)
+ }
+
+ /**
+ * @param {LinkElement} link
+ * @param {Map} changedProperties
+ */
+ update(link, changedProperties) {
+ super.update(link, changedProperties)
+ if (changedProperties.has("originatesFromInput")) {
+ link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
+ }
+ const referencePin = link.sourcePin ?? link.destinationPin
+ if (referencePin) {
+ link.style.setProperty("--ueb-link-color-rgb", Utility.printLinearColor(referencePin.color))
+ }
+ link.style.setProperty("--ueb-link-start", `${Math.round(link.startPixels)}`)
+ link.style.setProperty("--ueb-start-percentage", `${Math.round(link.startPercentage)}%`)
+ }
+
/**
* @param {LinkElement} link
*/
@@ -67,116 +115,16 @@ export default class LinkTemplate extends ITemplate {
return html`
+ ${link.linkMessageIcon != "" || link.linkMessageText != "" ? html`
+
+
+ ${link.linkMessageText}
+
+ ` : html``}
`
}
-
- /**
- * @param {LinkElement} link
- */
- setup(link) {
- super.setup(link)
- if (link.linkMessageElement) {
- link.appendChild(link.linkMessageElement)
- }
- link.classList.add("ueb-positioned")
- link.pathElement = link.querySelector("path")
- const referencePin = link.sourcePin ?? link.destinationPin
- if (referencePin) {
- link.style.setProperty("--ueb-pin-color", referencePin.getColor())
- }
- this.applyPins(link)
- if (link.sourcePin && link.destinationPin) {
- this.applyFullLocation(link)
- }
- }
-
- /**
- * @param {LinkElement} link
- */
- applyPins(link) {
- if (link.sourcePin) {
- link.dataset.source = link.sourcePin.GetPinId().toString()
- }
- if (link.destinationPin) {
- link.dataset.destination = link.destinationPin.GetPinId().toString()
- }
- }
-
- /**
- * @param {LinkElement} link
- */
- applyStartDragging(link) {
- link.blueprint.dataset.creatingLink = "true"
- link.classList.add("ueb-link-dragging")
- }
-
- /**
- * @param {LinkElement} link
- */
- applyFinishDragging(link) {
- link.blueprint.dataset.creatingLink = "false"
- link.classList.remove("ueb-link-dragging")
- }
-
- /**
- * @param {LinkElement} link
- */
- applySourceLocation(link) {
- link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
- link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
- link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
- }
-
- /**
- * @param {LinkElement} link
- */
- applyFullLocation(link) {
- const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
- const width = Math.max(dx, Configuration.linkMinWidth)
- const height = Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
- const fillRatio = dx / width
- const aspectRatio = width / height
- const xInverted = link.originatesFromInput
- ? link.sourceLocation[0] < link.destinationLocation[0]
- : link.destinationLocation[0] < link.sourceLocation[0]
- let start = dx < width // If under minimum width
- ? (width - dx) / 2 // Start from half the empty space
- : 0 // Otherwise start from the beginning
-
- link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
- link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
- link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]))
- link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]))
- link.style.setProperty("margin-left", `-${start}px`)
- if (xInverted) {
- start += fillRatio * 100
- }
- link.style.setProperty("--ueb-start-percentage", `${start}%`)
- const c1
- = start
- + (xInverted
- ? LinkTemplate.c1DecreasingValue(width)
- : 10
- )
- * fillRatio
- let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + start
- c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width))
- const d = Configuration.linkRightSVGPath(start, c1, c2)
- // TODO move to CSS when Firefox will support property d and css will have enough functions
- link.pathElement?.setAttribute("d", d)
- }
-
- /**
- * @param {LinkElement} link
- * @param {LinkMessageElement} linkMessage
- */
- applyLinkMessage(link, linkMessage) {
- link.querySelectorAll("ueb-link-message").forEach(element => element.remove())
- link.appendChild(linkMessage)
- link.linkMessageElement = linkMessage
- }
}
diff --git a/js/template/NamePinTemplate.js b/js/template/NamePinTemplate.js
index ed463f1..bb8f3ad 100644
--- a/js/template/NamePinTemplate.js
+++ b/js/template/NamePinTemplate.js
@@ -1,5 +1,3 @@
-// @ts-check
-
import IInputPinTemplate from "./IInputPinTemplate"
/**
@@ -13,9 +11,10 @@ export default class NamePinTemplate extends IInputPinTemplate {
/**
* @param {PinElement} pin
+ * @param {Map} changedProperties
*/
- setup(pin) {
- super.setup(pin)
+ firstUpdated(pin, changedProperties) {
+ super.firstUpdated(pin, changedProperties)
this.onInputHandler = e => {
e.stopPropagation()
if (
diff --git a/js/template/NodeTemplate.js b/js/template/NodeTemplate.js
index 08fe01f..822f64c 100755
--- a/js/template/NodeTemplate.js
+++ b/js/template/NodeTemplate.js
@@ -1,8 +1,5 @@
-// @ts-check
-
-import html from "./html"
+import { html } from "lit"
import PinElement from "../element/PinElement"
-import sanitizeText from "./sanitizeText"
import SelectableDraggableTemplate from "./SelectableDraggableTemplate"
/**
@@ -14,9 +11,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
toggleAdvancedDisplayHandler
/**
- * Computes the html content of the target element.
- * @param {NodeElement} node Graph node element
- * @returns The result html
+ * @param {NodeElement} node
*/
render(node) {
return html`
@@ -26,7 +21,7 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
- ${sanitizeText(node.getNodeDisplayName())}
+ ${node.nodeDisplayName}
@@ -34,11 +29,11 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
- ${node.entity.EnabledState?.toString() == "DevelopmentOnly" ? html`
+ ${node.enabledState?.toString() == "DevelopmentOnly" ? html`
Development Only
- ` : ""}
- ${node.entity.AdvancedPinDisplay ? html`
-
+ ` : html``}
+ ${node.advancedPinDisplay ? html`
+
- ` : ""}
+ ` : html``}
`
@@ -66,52 +53,25 @@ export default class NodeTemplate extends SelectableDraggableTemplate {
/**
* @param {NodeElement} node
+ * @param {Map} changedProperties
*/
- setup(node) {
- super.setup(node)
- node.dataset.name = sanitizeText(node.entity.getObjectName())
- if (node.entity.EnabledState) {
- node.dataset.enabledState = node.entity.EnabledState.toString()
- }
- if (node.selected) {
- node.classList.add("ueb-selected")
- }
- this.applyAdvancedPinDisplay(node)
- node.style.setProperty("--ueb-position-x", sanitizeText(node.location[0]))
- node.style.setProperty("--ueb-position-y", sanitizeText(node.location[1]))
- /** @type {HTMLElement} */
- let inputContainer = node.querySelector(".ueb-node-inputs")
- /** @type {HTMLElement} */
- let outputContainer = node.querySelector(".ueb-node-outputs")
- let pins = node.getPinEntities()
- pins.filter(v => v.isInput()).forEach(v => inputContainer.appendChild(new PinElement(v)))
- pins.filter(v => v.isOutput()).forEach(v => outputContainer.appendChild(new PinElement(v)))
- let self = this
+ async firstUpdated(node, changedProperties) {
+ super.firstUpdated(node, changedProperties)
+ const inputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-inputs"))
+ const outputContainer = /** @type {HTMLElement} */(node.querySelector(".ueb-node-outputs"))
+ Promise.all(node.getPinElements().map(n => n.updateComplete)).then(() => node.dispatchReflowEvent())
+ node.getPinElements().forEach(p => {
+ if (p.isInput()) {
+ inputContainer.appendChild(p)
+ } else if (p.isOutput()) {
+ outputContainer.appendChild(p)
+ }
+ })
this.toggleAdvancedDisplayHandler = _ => {
node.toggleShowAdvancedPinDisplay()
+ node.addNextUpdatedCallbacks(() => node.dispatchReflowEvent(), true)
}
- if (node.entity.AdvancedPinDisplay) {
- node.querySelector(".ueb-node-expansion").addEventListener("click", this.toggleAdvancedDisplayHandler)
- }
- }
-
- /**
- * @param {NodeElement} node
- */
- applyAdvancedPinDisplay(node) {
- if (node.entity.AdvancedPinDisplay) {
- node.dataset.advancedDisplay = node.entity.AdvancedPinDisplay.toString()
- }
- }
-
- /**
- * @param {NodeElement} node
- */
- applyRename(node) {
- const nodeName = node.entity.getObjectName()
- node.dataset.name = sanitizeText(nodeName)
- // @ts-expect-error
- node.querySelector(".ueb-node-name-text").innerText = sanitizeText(node.getNodeDisplayName())
+ node.nodeNameElement = /** @type {HTMLElement} */(node.querySelector(".ueb-node-name-text"))
}
/**
diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js
index 9243cfc..a091e47 100755
--- a/js/template/PinTemplate.js
+++ b/js/template/PinTemplate.js
@@ -1,19 +1,26 @@
-// @ts-check
-
-import html from "./html"
+import { css, html } from "lit"
import ITemplate from "./ITemplate"
import MouseCreateLink from "../input/mouse/MouseCreateLink"
-import sanitizeText from "./sanitizeText"
import Utility from "../Utility"
/**
- * @typedef {import ("../input/IInput").default} IInput
+ * @typedef {import("../input/IInput").default} IInput
* @typedef {import("../element/NodeElement").default} NodeElement
* @typedef {import("../element/PinElement").default} PinElement
*/
export default class PinTemplate extends ITemplate {
+ static styles = css``
+
+ /**
+ * @param {PinElement} pin
+ */
+ connectedCallback(pin) {
+ super.connectedCallback(pin)
+ pin.nodeElement = pin.closest("ueb-node")
+ }
+
/**
* @param {PinElement} pin
* @returns {IInput[]}
@@ -38,13 +45,13 @@ export default class PinTemplate extends ITemplate {
`
const content = html`
- ${sanitizeText(pin.getPinDisplayName())}
+ ${pin.getPinDisplayName()}
${this.renderInput(pin)}
`
return html`
- ${pin.isInput() ? icon + content : content + icon}
+ ${pin.isInput() ? html`${icon}${content}` : html`${content}${icon}`}
`
}
@@ -53,42 +60,24 @@ export default class PinTemplate extends ITemplate {
* @param {PinElement} pin
*/
renderIcon(pin) {
- return ''
+ return html``
}
/**
* @param {PinElement} pin
*/
renderInput(pin) {
- return ""
+ return html``
}
/**
* @param {PinElement} pin
+ * @param {Map} changedProperties
*/
- setup(pin) {
- super.setup(pin)
- pin.classList.add(
- "ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"),
- "ueb-pin-type-" + sanitizeText(pin.getType())
- )
+ firstUpdated(pin, changedProperties) {
+ super.firstUpdated(pin, changedProperties)
pin.dataset.id = pin.GetPinIdValue()
- if (pin.entity.bAdvancedView) {
- pin.dataset.advancedView = "true"
- }
pin.clickableElement = pin
- pin.nodeElement = pin.closest("ueb-node")
- }
-
- /**
- * @param {PinElement} pin
- */
- applyConnected(pin) {
- if (pin.isLinked()) {
- pin.classList.add("ueb-pin-fill")
- } else {
- pin.classList.remove("ueb-pin-fill")
- }
}
/**
@@ -96,8 +85,10 @@ export default class PinTemplate extends ITemplate {
*/
getLinkLocation(pin) {
const rect = pin.querySelector(".ueb-pin-icon").getBoundingClientRect()
- return pin.blueprint.compensateTranslation(Utility.convertLocation(
+ const location = Utility.convertLocation(
[(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2],
- pin.blueprint.gridElement))
+ pin.blueprint.gridElement
+ )
+ return pin.blueprint.compensateTranslation(location)
}
}
diff --git a/js/template/RealPinTemplate.js b/js/template/RealPinTemplate.js
index 3302136..4bfe905 100644
--- a/js/template/RealPinTemplate.js
+++ b/js/template/RealPinTemplate.js
@@ -1,7 +1,5 @@
-// @ts-check
-
-import Utility from "../Utility"
import IInputPinTemplate from "./IInputPinTemplate"
+import Utility from "../Utility"
/**
* @typedef {import("../element/PinElement").default} PinElement
@@ -18,7 +16,7 @@ export default class RealPinTemplate extends IInputPinTemplate {
let updateDefaultValue = true
if (isNaN(num)) {
num = parseFloat(pin.entity.DefaultValue != ""
- ? pin.entity.DefaultValue
+ ? /** @type {String} */(pin.entity.DefaultValue)
: pin.entity.AutogeneratedDefaultValue)
}
if (isNaN(num)) {
diff --git a/js/template/SelectableDraggableTemplate.js b/js/template/SelectableDraggableTemplate.js
index 92d5004..a5f6d10 100755
--- a/js/template/SelectableDraggableTemplate.js
+++ b/js/template/SelectableDraggableTemplate.js
@@ -1,20 +1,18 @@
-// @ts-check
-
import ITemplate from "./ITemplate"
import MouseMoveNodes from "../input/mouse/MouseMoveNodes"
-import sanitizeText from "./sanitizeText"
/**
* @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement
*/
/**
- * @extends {ITemplate}
+ * @template {ISelectableDraggableElement} T
+ * @extends {ITemplate}
*/
export default class SelectableDraggableTemplate extends ITemplate {
/**
- * @param {ISelectableDraggableElement} element
+ * @param {T} element
*/
createInputObjects(element) {
return [
@@ -26,21 +24,27 @@ export default class SelectableDraggableTemplate extends ITemplate {
}
/**
- * @param {ISelectableDraggableElement} element
+ * @param {T} element
+ * @param {Map} changedProperties
*/
- applyLocation(element) {
- element.style.setProperty("--ueb-position-x", sanitizeText(element.location[0]))
- element.style.setProperty("--ueb-position-y", sanitizeText(element.location[1]))
+ update(element, changedProperties) {
+ super.update(element, changedProperties)
+ if (changedProperties.has("locationX")) {
+ element.style.setProperty("--ueb-position-x", `${element.locationX}`)
+ }
+ if (changedProperties.has("locationY")) {
+ element.style.setProperty("--ueb-position-y", `${element.locationY}`)
+ }
}
/**
- * @param {ISelectableDraggableElement} element
+ * @param {T} element
+ * @param {Map} changedProperties
*/
- applySelected(element) {
- if (element.selected) {
- element.classList.add("ueb-selected")
- } else {
- element.classList.remove("ueb-selected")
+ firstUpdated(element, changedProperties) {
+ super.firstUpdated(element, changedProperties)
+ if (element.selected && !element.listeningDrag) {
+ element.setSelected(true)
}
}
}
diff --git a/js/template/SelectorTemplate.js b/js/template/SelectorTemplate.js
index 3b9ff60..eb4c040 100755
--- a/js/template/SelectorTemplate.js
+++ b/js/template/SelectorTemplate.js
@@ -1,51 +1,9 @@
-// @ts-check
-
-import ITemplate from "./ITemplate"
-import sanitizeText from "./sanitizeText"
+import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
/**
* @typedef {import("../element/SelectorElement").default} SelectorElement
*/
-export default class SelectorTemplate extends ITemplate {
+export default class SelectorTemplate extends IFromToPositionedTemplate {
- /**
- * Applies the style to the element.
- * @param {SelectorElement} selector Selector element
- */
- setup(selector) {
- super.setup(selector)
- this.applyFinishSelecting(selector)
- }
-
- /**
- * Applies the style relative to selection beginning.
- * @param {SelectorElement} selector Selector element
- */
- applyStartSelecting(selector, initialPosition) {
- // Set initial position
- selector.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0]))
- selector.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1]))
- // Final position coincide with the initial position, at the beginning of selection
- selector.style.setProperty("--ueb-to-x", sanitizeText(initialPosition[0]))
- selector.style.setProperty("--ueb-to-y", sanitizeText(initialPosition[1]))
- selector.blueprint.dataset.selecting = "true"
- }
-
- /**
- * Applies the style relative to selection.
- * @param {SelectorElement} selector Selector element
- */
- applyDoSelecting(selector, finalPosition) {
- selector.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0]))
- selector.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1]))
- }
-
- /**
- * Applies the style relative to selection finishing.
- * @param {SelectorElement} selector Selector element
- */
- applyFinishSelecting(selector) {
- selector.blueprint.dataset.selecting = "false"
- }
}
diff --git a/js/template/StringPinTemplate.js b/js/template/StringPinTemplate.js
index e222ff3..1d04f09 100644
--- a/js/template/StringPinTemplate.js
+++ b/js/template/StringPinTemplate.js
@@ -1,5 +1,3 @@
-// @ts-check
-
import IInputPinTemplate from "./IInputPinTemplate"
/**
@@ -10,8 +8,9 @@ export default class StringPinTemplate extends IInputPinTemplate {
/**
* @param {PinElement} pin
+ * @param {Map} changedProperties
*/
- setup(pin) {
- super.setup(pin)
+ firstUpdated(pin, changedProperties) {
+ super.firstUpdated(pin, changedProperties)
}
}
diff --git a/js/template/VariadicNodeTemplate.js b/js/template/VariadicNodeTemplate.js
index dad2bbb..82480b5 100644
--- a/js/template/VariadicNodeTemplate.js
+++ b/js/template/VariadicNodeTemplate.js
@@ -1,5 +1,3 @@
-// @ts-check
-
import NodeTemplate from "./NodeTemplate"
export default class VariadicNodeTemplate extends NodeTemplate {
diff --git a/js/template/html.js b/js/template/html.js
deleted file mode 100755
index 7cb9f0d..0000000
--- a/js/template/html.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// @ts-check
-
-/**
- * This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML()
- */
-const html = String.raw
-export default html
diff --git a/js/template/sanitizeText.js b/js/template/sanitizeText.js
deleted file mode 100755
index c52446f..0000000
--- a/js/template/sanitizeText.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @ts-check
-
-const div = document.createElement("div")
-
-const tagReplacement = {
- '&': '&',
- '<': '<',
- '>': '>',
- "'": ''',
- '"': '"'
-}
-
-function sanitizeText(value) {
- return value.toString().replace(/[&<>'"]/g, tag => tagReplacement[tag])
-}
-
-export default sanitizeText
diff --git a/package.json b/package.json
index 406e8e3..0c739a9 100755
--- a/package.json
+++ b/package.json
@@ -22,17 +22,20 @@
},
"homepage": "https://github.com/barsdeveloper/ueblueprint#readme",
"devDependencies": {
- "@rollup/plugin-commonjs": "^21.0.0",
- "@rollup/plugin-node-resolve": "^13.0.5",
- "rollup": "^2.58.0",
+ "@rollup/plugin-commonjs": "^21.1.0",
+ "@rollup/plugin-node-resolve": "^13.3.0",
+ "minify-html-literals": "^1.3.5",
+ "rollup": "^2.75.5",
"rollup-plugin-copy": "^3.4.0",
- "rollup-plugin-minify-html-template-literals": "^1.2.0",
+ "rollup-plugin-minify-html-literals": "^1.2.6",
"rollup-plugin-terser": "^7.0.2",
- "sass": "^1.45.1",
- "terser": "^5.9.0"
+ "sass": "^1.52.2",
+ "terser": "^5.14.0"
},
"dependencies": {
"@easylogic/colorpicker": "^1.10.11",
- "parsimmon": "^1.18.0"
+ "lit": "^2.2.4",
+ "parsimmon": "^1.18.0",
+ "rollup-plugin-html-literals": "^1.1.5"
}
-}
\ No newline at end of file
+}
diff --git a/rollup.config.js b/rollup.config.js
index 567fece..12688d3 100755
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,8 +1,8 @@
-import { nodeResolve } from "@rollup/plugin-node-resolve"
-import minifyHTML from "rollup-plugin-minify-html-template-literals"
-import commonjs from "@rollup/plugin-commonjs"
import { terser } from "rollup-plugin-terser"
+import commonjs from "@rollup/plugin-commonjs"
import copy from "rollup-plugin-copy"
+import minifyHTML from "rollup-plugin-minify-html-literals"
+import resolve from "@rollup/plugin-node-resolve"
export default [
{
@@ -12,15 +12,13 @@ export default [
format: 'es'
},
plugins: [
- nodeResolve({ browser: true }),
+ resolve({ browser: true }),
commonjs(),
copy({
- targets: [
- {
- src: ["assets/fonts/*"],
- dest: "dist/font"
- }
- ]
+ targets: [{
+ src: ["assets/fonts/*"],
+ dest: "dist/font"
+ }]
})
]
},
@@ -31,18 +29,18 @@ export default [
format: 'es'
},
plugins: [
- nodeResolve({ browser: true }),
+ resolve({ browser: true }),
commonjs(),
- minifyHTML(),
+ minifyHTML({
+ minifyCSS: true,
+ }),
terser(),
copy({
- targets: [
- {
- src: ["assets/fonts/*"],
- dest: "dist/font"
- }
- ]
+ targets: [{
+ src: ["assets/fonts/*"],
+ dest: "dist/font"
+ }]
})
]
}
-]
\ No newline at end of file
+]
diff --git a/scss/export.scss b/scss/export.scss
index d915981..ac36438 100644
--- a/scss/export.scss
+++ b/scss/export.scss
@@ -2,4 +2,4 @@
@use "ueb-node.scss";
@use "ueb-pin.scss";
@use "ueb-link.scss";
-@use "ueb-type-color.scss";
\ No newline at end of file
+@use "ueb-type-color.scss";
diff --git a/scss/style.scss b/scss/style.scss
index 7a0d4c8..a883a9b 100644
--- a/scss/style.scss
+++ b/scss/style.scss
@@ -15,6 +15,8 @@
}
ueb-blueprint {
+ --ueb-scale: 1;
+ --ueb-grid-actual-size: var(--ueb-grid-size);
display: block;
position: relative;
font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
@@ -60,8 +62,8 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
position: absolute;
min-width: 100%;
min-height: 100%;
- width: calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale));
- height: calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale));
+ width: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale));
+ height: calc((100% + 2 * var(--ueb-grid-expand)) / var(--ueb-scale));
background-color: #262626;
background-image:
/* Axis lines */
@@ -108,101 +110,95 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
overflow: hidden;
}
-ueb-blueprint[data-drag-scrolling="true"] .ueb-grid {
+ueb-blueprint[data-scrolling="true"] .ueb-grid {
cursor: grabbing;
}
-ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
+ueb-blueprint[data-scrolling="false"] .ueb-grid {
cursor: default;
}
-.ueb-zoom--.ueb,
-.ueb {
- --ueb-scale: 1;
- --ueb-grid-actual-size: var(--ueb-grid-size);
-}
-
-.ueb-zoom-7.ueb {
+ueb-blueprint[data-zoom="7"] {
--ueb-scale: 2;
}
-.ueb-zoom-6.ueb {
+ueb-blueprint[data-zoom="6"] {
--ueb-scale: 1.875;
}
-.ueb-zoom-5.ueb {
+ueb-blueprint[data-zoom="5"] {
--ueb-scale: 1.75;
}
-.ueb-zoom-4.ueb {
+ueb-blueprint[data-zoom="4"] {
--ueb-scale: 1.675;
}
-.ueb-zoom-3.ueb {
+ueb-blueprint[data-zoom="3"] {
--ueb-scale: 1.5;
}
-.ueb-zoom-2.ueb {
+ueb-blueprint[data-zoom="2"] {
--ueb-scale: 1.375;
}
-.ueb-zoom-1.ueb {
+ueb-blueprint[data-zoom="1"] {
--ueb-scale: 1.25;
}
-.ueb-zoom--1.ueb {
+ueb-blueprint[data-zoom="-1"] {
--ueb-scale: 0.875;
}
-.ueb-zoom--2.ueb {
+ueb-blueprint[data-zoom="-2"] {
--ueb-scale: 0.75;
}
-.ueb-zoom--3.ueb {
+ueb-blueprint[data-zoom="-3"] {
--ueb-scale: 0.675;
}
-.ueb-zoom--4.ueb {
+ueb-blueprint[data-zoom="-4"] {
--ueb-scale: 0.5;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
-.ueb-zoom--5.ueb {
+ueb-blueprint[data-zoom="-5"] {
--ueb-scale: 0.375;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
-.ueb-zoom--6.ueb {
+ueb-blueprint[data-zoom="-6"] {
--ueb-scale: 0.333333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
-.ueb-zoom--7.ueb {
+ueb-blueprint[data-zoom="-7"] {
--ueb-scale: 0.3;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
-.ueb-zoom--8.ueb {
+ueb-blueprint[data-zoom="-8"] {
--ueb-scale: 0.266666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
-.ueb-zoom--9.ueb {
+ueb-blueprint[data-zoom="-9"] {
--ueb-scale: 0.233333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
-.ueb-zoom--10.ueb {
+ueb-blueprint[data-zoom="-10"] {
--ueb-scale: 0.2;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
-.ueb-zoom--11.ueb {
+ueb-blueprint[data-zoom="-11"] {
--ueb-scale: 0.166666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
-.ueb-zoom--12.ueb {
+ueb-blueprint[data-zoom="-12"] {
--ueb-scale: 0.133333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
diff --git a/scss/ueb-link.scss b/scss/ueb-link.scss
index 5a32b27..e9fb6cb 100644
--- a/scss/ueb-link.scss
+++ b/scss/ueb-link.scss
@@ -1,14 +1,18 @@
+@use "style.scss";
+
ueb-link {
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
/* when from-y > to-y */
--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
display: block;
+ margin-left: calc(var(--ueb-link-start) * -1px);
min-width: calc(var(--ueb-link-min-width) * 1px);
/*
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
* their hover behavior correctly firing.
*/
visibility: hidden;
+ @extend .ueb-positioned;
}
ueb-link svg {
@@ -24,17 +28,17 @@ ueb-link svg {
ueb-link svg path {
visibility: visible;
- stroke: var(--ueb-pin-color);
+ stroke: var(--ueb-link-color);
stroke-width: 1;
}
-ueb-link.ueb-link-dragging svg path,
+ueb-link[data-dragging="true"] svg path,
ueb-link svg g:hover path {
stroke-width: 5;
transition: stroke-width 0.8s;
}
-ueb-link-message {
+.ueb-link-message {
display: block;
visibility: visible;
position: absolute;
diff --git a/scss/ueb-node.scss b/scss/ueb-node.scss
index 1223771..e11743b 100644
--- a/scss/ueb-node.scss
+++ b/scss/ueb-node.scss
@@ -7,7 +7,7 @@ ueb-node {
font-weight: lighter;
}
-ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
+ueb-blueprint[data-scrolling="false"][data-selecting="false"] ueb-node {
cursor: move;
}
@@ -17,7 +17,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
border-radius: calc(var(--ueb-node-radius) * 1.4);
}
-.ueb-selected>.ueb-node-border {
+ueb-node[data-selected="true"]>.ueb-node-border {
background-image:
linear-gradient(to right, #f1b000 0%, #f1b000 100%),
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),
@@ -41,7 +41,8 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
.ueb-node-top {
padding: 0.3em 0.7em;
- box-shadow: inset 5px 1px 5px -3px #83b37b,
+ box-shadow:
+ inset 5px 1px 5px -3px #83b37b,
inset 0 1px 0 0 #111311,
inset 0 2px 0 0 #83b37b;
border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
@@ -108,7 +109,7 @@ ueb-node[data-enabled-state="DevelopmentOnly"] .ueb-node-developmentonly {
vertical-align: middle;
}
-ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-node-expansion:hover {
+ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-node-expansion:hover {
background-color: #656765;
cursor: pointer;
}
diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss
index cb85be6..b4023dd 100644
--- a/scss/ueb-pin.scss
+++ b/scss/ueb-pin.scss
@@ -8,7 +8,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
.ueb-pin-wrapper {
display: inline-block;
- margin: 6px 0 0 0;
+ margin: 5px 0 0 0;
padding: 2px 2px;
&>* {
@@ -17,7 +17,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
}
}
-ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover {
+ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-pin-wrapper:hover {
background: var(--ueb-pin-background);
cursor: crosshair;
}
@@ -52,11 +52,11 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] .ueb-pin-wrap
border-radius: 50%;
}
-ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
+ueb-pin[data-linked="true"] .ueb-pin-icon-value::before {
background: var(--ueb-pin-color);
}
-ueb-pin.ueb-pin-fill .ueb-pin-tofill {
+ueb-pin[data-linked="true"] .ueb-pin-tofill {
fill: currentColor;
}
@@ -78,7 +78,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
vertical-align: middle;
}
-.ueb-pin-exec .ueb-pin-name {
+ueb-pin[data-type="exec"] .ueb-pin-name {
display: none;
}
@@ -100,7 +100,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
}
}
-.ueb-pin-type-bool .ueb-pin-input {
+ueb-pin[data-type="bool"] .ueb-pin-input {
appearance: none;
padding: 0;
height: 18px;
@@ -109,7 +109,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
color: var(--ueb-pin-color);
}
-.ueb-pin-type-bool .ueb-pin-input:checked {
+ueb-pin[data-type="bool"] .ueb-pin-input:checked {
background-image: url('data:image/svg+xml,');
}
diff --git a/scss/ueb-type-color.scss b/scss/ueb-type-color.scss
index 792811f..b821f0b 100644
--- a/scss/ueb-type-color.scss
+++ b/scss/ueb-type-color.scss
@@ -1,60 +1,61 @@
-@mixin pin-style($color) {
- --ueb-pin-color : #{$color};
+ueb-blueprint {
+ --ueb-pin-dim-color: #afafaf;
+}
+
+ueb-link {
+ --ueb-link-color: rgb(var(--ueb-link-color-rgb));
+}
+
+ueb-pin {
--ueb-pin-background: linear-gradient(90deg,
- #{transparentize($color, 0.85)},
- #{transparentize($color, 0.2)} 15%,
- #{transparentize($color, 0.5)} 60%,
- #{transparentize($color, 0.65)} 95%,
- transparent);
+ rgba(var(--ueb-pin-color-rgb), 0.15),
+ rgba(var(--ueb-pin-color-rgb), 0.8) 15%,
+ rgba(var(--ueb-pin-color-rgb), 0.5) 60%,
+ rgba(var(--ueb-pin-color-rgb), 0.35) 95%,
+ transparent);
+ --ueb-pin-color: rgb(var(--ueb-pin-color-rgb));
}
-.ueb {
- $ueb-pin-color: white;
- $ueb-pin-dim-color: #afafaf;
- --ueb-pin-color : #{$ueb-pin-color};
- --ueb-pin-dim-color: #{$ueb-pin-dim-color};
+ueb-pin[data-type="bool"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-bool-color);
}
-.ueb-pin-type-bool {
- @include pin-style(#750000);
+ueb-pin[data-type="class"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-class-color);
}
-.ueb-pin-type-class {
- @include pin-style(#5800bb);
+ueb-pin[data-type="exec"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-exec-color);
}
-.ueb-pin-type-exec {
- @include pin-style(#a7a7a7);
+ueb-pin[data-type="int"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-int-color);
}
-.ueb-pin-type-int {
- @include pin-style(#1fe0ad);
+ueb-pin[data-type="name"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-name-color);
}
-.ueb-pin-type-name {
- @include pin-style(#cb81fc);
+ueb-pin[data-type="object"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-object-color);
}
-.ueb-pin-type-object {
- @include pin-style(#00a8f2);
+ueb-pin[data-type="real"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-real-color);
}
-.ueb-pin-type-real {
- @include pin-style(#32bb00);
+ueb-pin[data-type="rotator"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-rotator-color);
}
-.ueb-pin-type-rotator {
- @include pin-style(#9eb1fc);
+ueb-pin[data-type="string"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-string-color);
}
-.ueb-pin-type-string {
- @include pin-style(#d500b1);
+ueb-pin[data-type="struct"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-struct-color);
}
-.ueb-pin-type-struct {
- @include pin-style(#034ca8);
-}
-
-.ueb-pin-type-vector {
- @include pin-style(#fcc823);
+ueb-pin[data-type="vector"] {
+ --ueb-pin-color-rgb: var(--ueb-pin-vector-color);
}
\ No newline at end of file