Vector2D support

cypress.config.js

@@ -6,4 +6,5 @@ module.exports = defineConfig({
       // implement node event listeners here
     },
   },
+  experimentalStudio: true,
 });

cypress/e2e/color_picker.cy.js

@@ -1,5 +1,10 @@
 describe('empty spec', () => {
   it('passes', () => {
     cy.visit('http://127.0.0.1:8080/')
+    /* ==== Generated with Cypress Studio ==== */
+    cy.get('.ueb-grid').click();
+    cy.get('.ueb-grid').click();
+    cy.get('[data-nodes=""]').click();
+    /* ==== End Cypress Studio ==== */
   })
 })

dist/ueblueprint.js

@@ -1503,6 +1503,23 @@ class RotatorEntity extends IEntity {
 class SimpleSerializationRotatorEntity extends RotatorEntity {
 }
 
+class Vector2DEntity extends IEntity {
+
+    static attributes = {
+        X: Number,
+        Y: Number,
+    }
+
+    constructor(values) {
+        super(values);
+        /** @type {Number} */ this.X;
+        /** @type {Number} */ this.Y;
+    }
+}
+
+class SimpleSerializationVector2DEntity extends Vector2DEntity {
+}
+
 class VectorEntity extends IEntity {
 
     static attributes = {
@@ -1530,6 +1547,7 @@ class PinEntity extends IEntity {
     static #typeEntityMap = {
         "/Script/CoreUObject.LinearColor": LinearColorEntity,
         "/Script/CoreUObject.Rotator": RotatorEntity,
+        "/Script/CoreUObject.Vector2D": Vector2DEntity,
         "/Script/CoreUObject.Vector": VectorEntity,
         "bool": Boolean,
         "exec": String,
@@ -1539,6 +1557,7 @@ class PinEntity extends IEntity {
         "string": String,
     }
     static #alternativeTypeEntityMap = {
+        "/Script/CoreUObject.Vector2D": SimpleSerializationVector2DEntity,
         "/Script/CoreUObject.Vector": SimpleSerializationVectorEntity,
         "/Script/CoreUObject.Rotator": SimpleSerializationRotatorEntity,
     }
@@ -2018,6 +2037,8 @@ class Grammar {
                 return r.Rotator
             case SimpleSerializationRotatorEntity:
                 return r.SimpleSerializationRotator
+            case SimpleSerializationVector2DEntity:
+                return r.SimpleSerializationVector2D
             case SimpleSerializationVectorEntity:
                 return r.SimpleSerializationVector
             case String:
@@ -2032,6 +2053,8 @@ class Grammar {
                         : accum.or(cur))
             case VariableReferenceEntity:
                 return r.VariableReference
+            case Vector2DEntity:
+                return r.Vector2D
             case VectorEntity:
                 return r.Vector
             default:
@@ -2237,6 +2260,7 @@ class Grammar {
         r.LocalizedText,
         r.InvariantText,
         r.PinReference,
+        Grammar.createEntityGrammar(r, Vector2DEntity, true),
         Grammar.createEntityGrammar(r, VectorEntity, true),
         Grammar.createEntityGrammar(r, LinearColorEntity, true),
         r.UnknownKeys,
@@ -2255,6 +2279,9 @@ class Grammar {
         })
     )
 
+    /** @param {Grammar} r */
+    Vector2D = r => Grammar.createEntityGrammar(r, Vector2DEntity)
+
     /** @param {Grammar} r */
     Vector = r => Grammar.createEntityGrammar(r, VectorEntity)
 
@@ -2275,6 +2302,17 @@ class Grammar {
         })
     )
 
+    /** @param {Grammar} r */
+    SimpleSerializationVector2D = r => P.seqMap(
+        r.Number,
+        P.string(",").trim(P.optWhitespace),
+        r.Number,
+        (x, _1, y) => new SimpleSerializationVector2DEntity({
+            X: x,
+            Y: y,
+        })
+    )
+
     /** @param {Grammar} r */
     SimpleSerializationVector = r => P.seqMap(
         r.Number,
@@ -5191,8 +5229,8 @@ class CommentNodeTemplate extends IResizeableTemplate {
             );
         }
         element.classList.add("ueb-node-style-comment", "ueb-node-resizeable");
-        element.sizeX ??= 25 * Configuration.gridSize;
-        element.sizeY ??= 6 * Configuration.gridSize;
+        element.sizeX = 25 * Configuration.gridSize;
+        element.sizeY = 6 * Configuration.gridSize;
         super.initialize(element); // Keep it at the end because it calls this.getColor() where this.#color must be initialized
     }
 
@@ -5539,7 +5577,7 @@ class PinTemplate extends ITemplate {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties);
         this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.getPinColor(this.element).cssText);
-        this.#iconElement = this.element.querySelector(".ueb-pin-icon") ?? this.element;
+        this.#iconElement = this.element.querySelector(".ueb-pin-icon svg") ?? this.element;
     }
 
     getLinkLocation() {
@@ -6848,7 +6886,7 @@ class ColorHandlerElement extends IDraggableControlElement {
     }
 
     initialize() {
-        // It is initialized in the constructor
+        // Initialized in the constructor, this method does nothing
     }
 }
 
@@ -7782,7 +7820,7 @@ class StringInputPinTemplate extends IInputPinTemplate {
 /** @typedef {import("../../entity/LinearColorEntity").default} LinearColorEntity */
 
 /**
- * @extends INumericPinTemplate<VectorEntity>
+ * @extends INumericPinTemplate<Vector2DEntity>
  */
 class VectorInputPinTemplate extends INumericPinTemplate {
 
@@ -7794,6 +7832,51 @@ class VectorInputPinTemplate extends INumericPinTemplate {
         return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.Y ?? 0))
     }
 
+    /**
+     * @param {Number[]} values
+     * @param {String[]} rawValues
+     */
+    setDefaultValue(values, rawValues) {
+        const vector = this.element.getDefaultValue(true);
+        if (!(vector instanceof Vector2DEntity)) {
+            throw new TypeError("Expected DefaultValue to be a Vector2DEntity")
+        }
+        vector.X = values[0];
+        vector.Y = values[1];
+        this.element.requestUpdate("DefaultValue", vector);
+    }
+
+    renderInput() {
+        return y`
+            <div class="ueb-pin-input-wrapper">
+                <span class="ueb-pin-input-label">X</span>
+                <div class="ueb-pin-input">
+                    <ueb-input .singleLine="${true}" .innerText="${this.#getX()}"></ueb-input>
+                </div>
+                <span class="ueb-pin-input-label">Y</span>
+                <div class="ueb-pin-input">
+                    <ueb-input .singleLine="${true}" .innerText="${this.#getY()}"></ueb-input>
+                </div>
+            </div>
+        `
+    }
+}
+
+/** @typedef {import("../../entity/LinearColorEntity").default} LinearColorEntity */
+
+/**
+ * @extends INumericPinTemplate<VectorEntity>
+ */
+class VectorPinTemplate extends INumericPinTemplate {
+
+    #getX() {
+        return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.X ?? 0))
+    }
+
+    #getY() {
+        return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.Y ?? 0))
+    }
+
     #getZ() {
         return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.Z ?? 0))
     }
@@ -7851,7 +7934,8 @@ class PinElement extends IElement {
     static #inputPinTemplates = {
         "/Script/CoreUObject.LinearColor": LinearColorInputPinTemplate,
         "/Script/CoreUObject.Rotator": RotatorInputPinTemplate,
-        "/Script/CoreUObject.Vector": VectorInputPinTemplate,
+        "/Script/CoreUObject.Vector2D": VectorInputPinTemplate,
+        "/Script/CoreUObject.Vector": VectorPinTemplate,
         "bool": BoolInputPinTemplate,
         "int": IntInputPinTemplate,
         "MUTABLE_REFERENCE": ReferencePinTemplate,
@@ -8417,6 +8501,14 @@ function initializeSerializerFactory() {
         )
     );
 
+    SerializerFactory.registerSerializer(
+        SimpleSerializationVector2DEntity,
+        new CustomSerializer(
+            (value, insideString) => `${value.X}, ${value.Y}`,
+            SimpleSerializationVector2DEntity
+        )
+    );
+
     SerializerFactory.registerSerializer(
         SimpleSerializationVectorEntity,
         new CustomSerializer(
@@ -8440,6 +8532,11 @@ function initializeSerializerFactory() {
         new GeneralSerializer(bracketsWrapped, VariableReferenceEntity)
     );
 
+    SerializerFactory.registerSerializer(
+        Vector2DEntity,
+        new GeneralSerializer(bracketsWrapped, Vector2DEntity)
+    );
+
     SerializerFactory.registerSerializer(
         VectorEntity,
         new GeneralSerializer(bracketsWrapped, VectorEntity)

js/element/PinElement.js

@@ -16,7 +16,8 @@ import ReferencePinTemplate from "../template/pin/ReferencePinTemplate"
 import RotatorInputPinTemplate from "../template/pin/RotatorInputPinTemplate"
 import StringInputPinTemplate from "../template/pin/StringInputPinTemplate"
 import Utility from "../Utility"
-import VectorInputPinTemplate from "../template/pin/VectorInputPinTemplate"
+import Vector2DPinTemplate from "../template/pin/Vector2DPinTemplate"
+import VectorPinTemplate from "../template/pin/VectorPinTemplate"
 
 /**
  * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
@@ -36,7 +37,8 @@ export default class PinElement extends IElement {
     static #inputPinTemplates = {
         "/Script/CoreUObject.LinearColor": LinearColorInputPinTemplate,
         "/Script/CoreUObject.Rotator": RotatorInputPinTemplate,
-        "/Script/CoreUObject.Vector": VectorInputPinTemplate,
+        "/Script/CoreUObject.Vector2D": Vector2DPinTemplate,
+        "/Script/CoreUObject.Vector": VectorPinTemplate,
         "bool": BoolInputPinTemplate,
         "int": IntInputPinTemplate,
         "MUTABLE_REFERENCE": ReferencePinTemplate,

js/entity/PinEntity.js

@@ -8,10 +8,12 @@ import ObjectReferenceEntity from "./ObjectReferenceEntity"
 import PinReferenceEntity from "./PinReferenceEntity"
 import RotatorEntity from "./RotatorEntity"
 import SimpleSerializationRotatorEntity from "./SimpleSerializationRotatorEntity"
+import SimpleSerializationVector2DEntity from "./SimpleSerializationVector2DEntity"
 import SimpleSerializationVectorEntity from "./SimpleSerializationVectorEntity"
 import TypeInitialization from "./TypeInitialization"
 import UnionType from "./UnionType"
 import Utility from "../Utility"
+import Vector2DEntity from "./Vector2DEntity"
 import VectorEntity from "./VectorEntity"
 
 /** @typedef {import("./TypeInitialization").AnyValue} AnyValue */
@@ -22,6 +24,7 @@ export default class PinEntity extends IEntity {
     static #typeEntityMap = {
         "/Script/CoreUObject.LinearColor": LinearColorEntity,
         "/Script/CoreUObject.Rotator": RotatorEntity,
+        "/Script/CoreUObject.Vector2D": Vector2DEntity,
         "/Script/CoreUObject.Vector": VectorEntity,
         "bool": Boolean,
         "exec": String,
@@ -31,6 +34,7 @@ export default class PinEntity extends IEntity {
         "string": String,
     }
     static #alternativeTypeEntityMap = {
+        "/Script/CoreUObject.Vector2D": SimpleSerializationVector2DEntity,
         "/Script/CoreUObject.Vector": SimpleSerializationVectorEntity,
         "/Script/CoreUObject.Rotator": SimpleSerializationRotatorEntity,
     }

js/entity/SimpleSerializationVector2DEntity.js

@@ -0,0 +1,4 @@
+import Vector2DEntity from "./Vector2DEntity"
+
+export default class SimpleSerializationVector2DEntity extends Vector2DEntity {
+}

js/entity/Vector2DEntity.js

@@ -0,0 +1,15 @@
+import IEntity from "./IEntity"
+
+export default class Vector2DEntity extends IEntity {
+
+    static attributes = {
+        X: Number,
+        Y: Number,
+    }
+
+    constructor(values) {
+        super(values)
+        /** @type {Number} */ this.X
+        /** @type {Number} */ this.Y
+    }
+}

js/serialization/Grammar.js

@@ -24,7 +24,9 @@ import UnionType from "../entity/UnionType"
 import UnknownKeysEntity from "../entity/UnknownKeysEntity"
 import Utility from "../Utility"
 import VariableReferenceEntity from "../entity/VariableReferenceEntity"
+import Vector2DEntity from "../entity/Vector2DEntity"
 import VectorEntity from "../entity/VectorEntity"
+import SimpleSerializationVector2DEntity from "../entity/SimpleSerializationVector2DEntity"
 
 let P = Parsimmon
 
@@ -89,6 +91,8 @@ export default class Grammar {
                 return r.Rotator
             case SimpleSerializationRotatorEntity:
                 return r.SimpleSerializationRotator
+            case SimpleSerializationVector2DEntity:
+                return r.SimpleSerializationVector2D
             case SimpleSerializationVectorEntity:
                 return r.SimpleSerializationVector
             case String:
@@ -103,6 +107,8 @@ export default class Grammar {
                         : accum.or(cur))
             case VariableReferenceEntity:
                 return r.VariableReference
+            case Vector2DEntity:
+                return r.Vector2D
             case VectorEntity:
                 return r.Vector
             default:
@@ -308,6 +314,7 @@ export default class Grammar {
         r.LocalizedText,
         r.InvariantText,
         r.PinReference,
+        Grammar.createEntityGrammar(r, Vector2DEntity, true),
         Grammar.createEntityGrammar(r, VectorEntity, true),
         Grammar.createEntityGrammar(r, LinearColorEntity, true),
         r.UnknownKeys,
@@ -326,6 +333,9 @@ export default class Grammar {
         })
     )
 
+    /** @param {Grammar} r */
+    Vector2D = r => Grammar.createEntityGrammar(r, Vector2DEntity)
+
     /** @param {Grammar} r */
     Vector = r => Grammar.createEntityGrammar(r, VectorEntity)
 
@@ -346,6 +356,17 @@ export default class Grammar {
         })
     )
 
+    /** @param {Grammar} r */
+    SimpleSerializationVector2D = r => P.seqMap(
+        r.Number,
+        P.string(",").trim(P.optWhitespace),
+        r.Number,
+        (x, _1, y) => new SimpleSerializationVector2DEntity({
+            X: x,
+            Y: y,
+        })
+    )
+
     /** @param {Grammar} r */
     SimpleSerializationVector = r => P.seqMap(
         r.Number,

js/serialization/initializeSerializerFactory.js

@@ -25,7 +25,9 @@ import ToStringSerializer from "./ToStringSerializer"
 import UnknownKeysEntity from "../entity/UnknownKeysEntity"
 import Utility from "../Utility"
 import VariableReferenceEntity from "../entity/VariableReferenceEntity"
+import Vector2DEntity from "../entity/Vector2DEntity"
 import VectorEntity from "../entity/VectorEntity"
+import SimpleSerializationVector2DEntity from "../entity/SimpleSerializationVector2DEntity"
 
 export default function initializeSerializerFactory() {
 
@@ -186,6 +188,14 @@ export default function initializeSerializerFactory() {
         )
     )
 
+    SerializerFactory.registerSerializer(
+        SimpleSerializationVector2DEntity,
+        new CustomSerializer(
+            (value, insideString) => `${value.X}, ${value.Y}`,
+            SimpleSerializationVector2DEntity
+        )
+    )
+
     SerializerFactory.registerSerializer(
         SimpleSerializationVectorEntity,
         new CustomSerializer(
@@ -209,6 +219,11 @@ export default function initializeSerializerFactory() {
         new GeneralSerializer(bracketsWrapped, VariableReferenceEntity)
     )
 
+    SerializerFactory.registerSerializer(
+        Vector2DEntity,
+        new GeneralSerializer(bracketsWrapped, Vector2DEntity)
+    )
+
     SerializerFactory.registerSerializer(
         VectorEntity,
         new GeneralSerializer(bracketsWrapped, VectorEntity)

js/template/node/CommentNodeTemplate.js

@@ -25,8 +25,8 @@ export default class CommentNodeTemplate extends IResizeableTemplate {
             )
         }
         element.classList.add("ueb-node-style-comment", "ueb-node-resizeable")
-        element.sizeX ??= 25 * Configuration.gridSize
-        element.sizeY ??= 6 * Configuration.gridSize
+        element.sizeX = 25 * Configuration.gridSize
+        element.sizeY = 6 * Configuration.gridSize
         super.initialize(element) // Keep it at the end because it calls this.getColor() where this.#color must be initialized
     }
 

js/template/pin/PinTemplate.js

@@ -84,7 +84,7 @@ export default class PinTemplate extends ITemplate {
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
         this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.getPinColor(this.element).cssText)
-        this.#iconElement = this.element.querySelector(".ueb-pin-icon") ?? this.element
+        this.#iconElement = this.element.querySelector(".ueb-pin-icon svg") ?? this.element
     }
 
     getLinkLocation() {

js/template/pin/Vector2DPinTemplate.js

@@ -0,0 +1,50 @@
+import { html } from "lit"
+import IInputPinTemplate from "./IInputPinTemplate"
+import INumericPinTemplate from "./INumericInputPinTemplate"
+import Utility from "../../Utility"
+import Vector2DEntity from "../../entity/Vector2DEntity"
+
+/** @typedef {import("../../entity/LinearColorEntity").default} LinearColorEntity */
+
+/**
+ * @extends INumericPinTemplate<Vector2DEntity>
+ */
+export default class VectorInputPinTemplate extends INumericPinTemplate {
+
+    #getX() {
+        return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.X ?? 0))
+    }
+
+    #getY() {
+        return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.Y ?? 0))
+    }
+
+    /**
+     * @param {Number[]} values
+     * @param {String[]} rawValues
+     */
+    setDefaultValue(values, rawValues) {
+        const vector = this.element.getDefaultValue(true)
+        if (!(vector instanceof Vector2DEntity)) {
+            throw new TypeError("Expected DefaultValue to be a Vector2DEntity")
+        }
+        vector.X = values[0]
+        vector.Y = values[1]
+        this.element.requestUpdate("DefaultValue", vector)
+    }
+
+    renderInput() {
+        return html`
+            <div class="ueb-pin-input-wrapper">
+                <span class="ueb-pin-input-label">X</span>
+                <div class="ueb-pin-input">
+                    <ueb-input .singleLine="${true}" .innerText="${this.#getX()}"></ueb-input>
+                </div>
+                <span class="ueb-pin-input-label">Y</span>
+                <div class="ueb-pin-input">
+                    <ueb-input .singleLine="${true}" .innerText="${this.#getY()}"></ueb-input>
+                </div>
+            </div>
+        `
+    }
+}

js/template/pin/VectorPinTemplate.js

@@ -9,7 +9,7 @@ import VectorEntity from "../../entity/VectorEntity"
 /**
  * @extends INumericPinTemplate<VectorEntity>
  */
-export default class VectorInputPinTemplate extends INumericPinTemplate {
+export default class VectorPinTemplate extends INumericPinTemplate {
 
     #getX() {
         return IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.getDefaultValue()?.X ?? 0))