Simplify layout using grid (#7)

* Various style fix WIP

* Removing pin wrapper WIP

* Restore pin wrapper

* WIP

* Several style fixes

* Fix dropdown resizing

* Minor style adjustment, dorpdown bug fix

* Pins sizing

* Additional tests and style fixes

* More size tests and fixes

* More robust styling

* Small format fix

js/element/DropdownElement.js

@@ -9,7 +9,7 @@ export default class DropdownElement extends IElement {
         options: {
             type: Object,
         },
-        selected: {
+        selectedOption: {
             type: String,
         },
     }
@@ -18,7 +18,7 @@ export default class DropdownElement extends IElement {
         super()
         super.initialize({}, new DropdownTemplate())
         this.options = /** @type {[String, String][]} */([])
-        this.selected = ""
+        this.selectedOption = ""
     }
 
     /** @param {[String, String][]} options */

js/element/PinElement.js

@@ -120,6 +120,9 @@ export default class PinElement extends IElement {
      * @return {new () => PinTemplate}
      */
     static getTypeTemplate(pinEntity) {
+        if (pinEntity.PinType.ContainerType?.toString() === "Array") {
+            return PinTemplate
+        }
         if (pinEntity.PinType.bIsReference && !pinEntity.PinType.bIsConst) {
             return PinElement.#inputPinTemplates["MUTABLE_REFERENCE"]
         }

js/entity/ObjectEntity.js

@@ -872,6 +872,11 @@ export default class ObjectEntity extends IEntity {
                         break
                 }
                 break
+            case Configuration.paths.multiGate:
+                pinEntities ??= () => this.getPinEntities().filter(pinEntity => pinEntity.isOutput())
+                pinIndexFromEntity ??= pinEntity => Number(pinEntity.PinName.match(/^\s*Out[_\s]+(\d+)\s*$/i)?.[1])
+                pinNameFromIndex ??= (index, min = -1, max = -1) => `Out ${index >= 0 ? index : min > 0 ? "Out 0" : max + 1}`
+                break
             case Configuration.paths.switchInteger:
                 pinEntities ??= () => this.getPinEntities().filter(pinEntity => pinEntity.isOutput())
                 pinIndexFromEntity ??= pinEntity => Number(pinEntity.PinName.match(/^\s*(\d+)\s*$/)?.[1])
@@ -880,7 +885,7 @@ export default class ObjectEntity extends IEntity {
             case Configuration.paths.switchName:
             case Configuration.paths.switchString:
                 pinEntities ??= () => this.getPinEntities().filter(pinEntity => pinEntity.isOutput())
-                pinIndexFromEntity ??= pinEntity => Number(pinEntity.PinName.match(/^\s*Case_(\d+)\s*$/)?.[1])
+                pinIndexFromEntity ??= pinEntity => Number(pinEntity.PinName.match(/^\s*Case[_\s]+(\d+)\s*$/i)?.[1])
                 pinNameFromIndex ??= (index, min = -1, max = -1) => {
                     const result = `Case_${index >= 0 ? index : min > 0 ? "0" : max + 1}`
                     this.PinNames ??= []
@@ -894,20 +899,23 @@ export default class ObjectEntity extends IEntity {
                 let min = Number.MAX_SAFE_INTEGER
                 let max = Number.MIN_SAFE_INTEGER
                 let values = []
-                const modelPin = pinEntities().reduce((acc, cur) => {
-                    const value = pinIndexFromEntity(cur)
-                    if (!isNaN(value)) {
-                        values.push(value)
-                        min = Math.min(value, min)
-                        if (value > max) {
-                            max = value
+                const modelPin = pinEntities().reduce(
+                    (acc, cur) => {
+                        const value = pinIndexFromEntity(cur)
+                        if (!isNaN(value)) {
+                            values.push(value)
+                            min = Math.min(value, min)
+                            if (value > max) {
+                                max = value
+                                return cur
+                            }
+                        } else if (acc === undefined) {
                             return cur
                         }
-                    } else if (acc === undefined) {
-                        return cur
-                    }
-                    return acc
-                })
+                        return acc
+                    },
+                    undefined
+                )
                 if (min === Number.MAX_SAFE_INTEGER || max === Number.MIN_SAFE_INTEGER) {
                     min = undefined
                     max = undefined

js/template/node/NodeTemplate.js

@@ -79,15 +79,13 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
             <div class="ueb-node-border">
                 <div class="ueb-node-wrapper">
                     <div class="ueb-node-top">${this.renderTop()}</div>
-                    <div class="ueb-node-content">
-                        <div class="ueb-node-inputs"></div>
-                        <div class="ueb-node-outputs"></div>
-                        ${this.pinInserter ? html`
-                            <div class="ueb-node-variadic" @click="${this.addPinHandler}">
-                                Add pin ${SVGIcon.plusCircle}
-                            </div>
-                        `: nothing}
-                    </div>
+                    <div class="ueb-node-inputs"></div>
+                    <div class="ueb-node-outputs"></div>
+                    ${this.pinInserter ? html`
+                        <div class="ueb-node-variadic" @click="${this.addPinHandler}">
+                            Add pin ${SVGIcon.plusCircle}
+                        </div>
+                    `: nothing}
                     ${this.element.entity.isDevelopmentOnly() ? html`
                         <div class="ueb-node-developmentonly">
                             <span class="ueb-node-developmentonly-text">Development Only</span>

js/template/node/VariableMangementNodeTemplate.js

@@ -35,19 +35,17 @@ export default class VariableManagementNodeTemplate extends NodeTemplate {
                             </div>
                         </div>
                     ` : nothing}
-                    <div class="ueb-node-content">
-                        ${this.#hasInput ? html`
-                            <div class="ueb-node-inputs"></div>
-                        ` : nothing}
-                        ${this.#hasOutput ? html`
-                            <div class="ueb-node-outputs"></div>
-                        ` : nothing}
-                        ${this.pinInserter ? html`
-                            <div class="ueb-node-variadic" @click="${this.addPinHandler}">
-                                Add pin ${SVGIcon.plusCircle}
-                            </div>
-                        `: nothing}
-                    </div>
+                    ${this.#hasInput ? html`
+                        <div class="ueb-node-inputs"></div>
+                    ` : nothing}
+                    ${this.#hasOutput ? html`
+                        <div class="ueb-node-outputs"></div>
+                    ` : nothing}
+                    ${this.pinInserter ? html`
+                        <div class="ueb-node-variadic" @click="${this.addPinHandler}">
+                            Add pin ${SVGIcon.plusCircle}
+                        </div>
+                    `: nothing}
                 </div>
             </div>
         `

js/template/pin/DropdownTemplate.js

@@ -13,24 +13,42 @@ export default class DropdownTemplate extends ITemplate {
     /** @type {HTMLSelectElement} */
     #selectElement
 
+    /** @type {HTMLSelectElement} */
+    #referenceSelectElement
+
+    #changeHandler = e => this.element.selectedOption = /** @type {HTMLSelectElement} */(e.target)
+        .selectedOptions[0]
+        .value
+
     render() {
         return html`
-            <select class="ueb-pin-input-content">
+            <select class="ueb-pin-input-content" @change="${this.#changeHandler}">
                 ${this.element.options.map(([k, v]) => html`
-                    <option value="${k}" ?selected="${k === this.element.selected}">${v}</option>
+                    <option value="${k}" ?selected="${k === this.element.selectedOption}">${v}</option>
                 `)}
             </select>
+            <select style="visibility: hidden; position: fixed;">
+                <option>${this.element.selectedOption}</option>
+            </select>
         `
     }
 
     /** @param {PropertyValues} changedProperties */
     firstUpdated(changedProperties) {
         super.firstUpdated(changedProperties)
-        this.#selectElement = this.element.querySelector("select")
+        this.#selectElement = this.element.querySelector("select:first-child")
+        this.#referenceSelectElement = this.element.querySelector("select:last-child")
         const event = new Event("input", { bubbles: true })
         this.#selectElement.dispatchEvent(event)
     }
 
+    /** @param {PropertyValues} changedProperties */
+    updated(changedProperties) {
+        super.updated(changedProperties)
+        const bounding = this.#referenceSelectElement.getBoundingClientRect()
+        this.element.style.setProperty("--ueb-dropdown-width", bounding.width + "px")
+    }
+
     createInputObjects() {
         return [
             ...super.createInputObjects(),

js/template/pin/EnumPinTemplate.js

@@ -58,7 +58,7 @@ export default class EnumPinTemplate extends IInputPinTemplate {
             <ueb-dropdown
                 class="ueb-pin-input-wrapper ueb-pin-input"
                 .options="${this.#dropdownEntries}"
-                .selected="${this.element.defaultValue.value}"
+                .selectedOption="${this.element.defaultValue.value}"
             >
             </ueb-dropdown>
         `

js/template/pin/PinTemplate.js

@@ -55,7 +55,7 @@ export default class PinTemplate extends ITemplate {
         return [
             new MouseCreateLink(this.element, this.blueprint, {
                 moveEverywhere: true,
-                draggableElement: this.#wrapperElement,
+                draggableElement: this.getClickableElement(),
             })
         ]
     }