Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-16 02:10:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix input node, pin colors simplified

Browse Source
This commit is contained in:
barsdeveloper
2022-11-12 17:47:39 +01:00
parent 054793b7b9
commit 8e665569c5
23 changed files with 233 additions and 376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
js/template/BlueprintTemplate.js
View File

@@ -34,14 +34,6 @@ export default class BlueprintTemplate extends ITemplate {
"--ueb-grid-size": `${Configuration.gridSize}px`,
"--ueb-link-min-width": `${Configuration.linkMinWidth}`,
"--ueb-node-radius": `${Configuration.nodeRadius}px`,
...Object.entries(Configuration.pinColor)
.map(([k, v]) => ({
[`--ueb-pin-color-${Utility.getIdFromReference(k)}`]: v.toString()
}))
.reduce((acc, cur) => ({
...acc,
...cur,
}), {}),
}
/** @param {Blueprint} element */

9
js/template/BoolPinTemplate.js
View File

@@ -32,11 +32,8 @@ export default class BoolPinTemplate extends PinTemplate {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
return html`
<input type="checkbox" class="ueb-pin-input" ?checked="${this.element.defaultValue}" />
`
}
return super.renderInput()
return html`
<input type="checkbox" class="ueb-pin-input" ?checked="${this.element.defaultValue}" />
`
}
}

27
js/template/IInputPinTemplate.js
View File

@@ -1,4 +1,4 @@
import { html, nothing } from "lit"
import { html } from "lit"
import MouseIgnore from "../input/mouse/MouseIgnore"
import PinTemplate from "./PinTemplate"
import Utility from "../Utility"
@@ -96,19 +96,16 @@ export default class IInputPinTemplate extends PinTemplate {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
// @ts-expect-error
const singleLine = this.constructor.singleLineInput
// @ts-expect-error
const selectOnFocus = this.constructor.selectOnFocus
return html`
<div class="ueb-pin-input">
<ueb-input .singleLine="${singleLine}" .selectOnFocus="${selectOnFocus}"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}">
</ueb-input>
</div>
`
}
return nothing
// @ts-expect-error
const singleLine = this.constructor.singleLineInput
// @ts-expect-error
const selectOnFocus = this.constructor.selectOnFocus
return html`
<div class="ueb-pin-input">
<ueb-input .singleLine="${singleLine}" .selectOnFocus="${selectOnFocus}"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.DefaultValue.toString())}">
</ueb-input>
</div>
`
}
}

17
js/template/IntPinTemplate.js
View File

@@ -1,4 +1,4 @@
import { html, nothing } from "lit"
import { html } from "lit"
import INumericPinTemplate from "./INumericPinTemplate"
/** @typedef {import("../entity/IntegerEntity").default} IntEntity */
@@ -11,14 +11,11 @@ export default class IntPinTemplate extends INumericPinTemplate {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
return html`
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}" .innerText="${this.element.entity.DefaultValue.toString()}">
</ueb-input>
</div>
`
}
return nothing
return html`
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}" .innerText="${this.element.entity.DefaultValue.toString()}">
</ueb-input>
</div>
`
}
}

15
js/template/LinearColorPinTemplate.js
View File

@@ -53,14 +53,11 @@ export default class LinearColorPinTemplate extends PinTemplate {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
return html`
<span class="ueb-pin-input" data-linear-color="${this.element.defaultValue.toString()}"
@click="${this.#launchColorPickerWindow}"
style="--ueb-linear-color: rgba(${this.element.defaultValue.toString()})">
</span>
`
}
return super.renderInput()
return html`
<span class="ueb-pin-input" data-linear-color="${this.element.defaultValue.toString()}"
@click="${this.#launchColorPickerWindow}"
style="--ueb-linear-color: rgba(${this.element.defaultValue.toString()})">
</span>
`
}
}

19
js/template/PinTemplate.js
View File

@@ -1,4 +1,5 @@
import { html, nothing } from "lit"
import Configuration from "../Configuration"
import ITemplate from "./ITemplate"
import MouseCreateLink from "../input/mouse/MouseCreateLink"
import Utility from "../Utility"
@@ -47,7 +48,7 @@ export default class PinTemplate extends ITemplate {
const content = html`
<div class="ueb-pin-content">
<span class="ueb-pin-name ">${this.element.getPinDisplayName()}</span>
${this.renderInput()}
${this.element.isInput() ? this.renderInput() : nothing}
</div>
`
return html`
@@ -72,6 +73,22 @@ export default class PinTemplate extends ITemplate {
return nothing
}
/** @param {Map} changedProperties */
updated(changedProperties) {
if (this.element.isInput() && changedProperties.has("isLinked")) {
// When connected, an input may drop its input fields which means the node has to reflow
const node = this.element.nodeElement
node.addNextUpdatedCallbacks(() => node.dispatchReflowEvent())
node.requestUpdate()
}
}
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.pinColor[this.element.pinType])
}
getLinkLocation() {
const rect = this.element.querySelector(".ueb-pin-icon").getBoundingClientRect()
const location = Utility.convertLocation(

17
js/template/RealPinTemplate.js
View File

@@ -14,15 +14,12 @@ export default class RealPinTemplate extends INumericPinTemplate {
}
renderInput() {
if (this.element.isInput() && !this.element.isLinked) {
return html`
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}"
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))}">
</ueb-input>
</div>
`
}
return nothing
return html`
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}"
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.DefaultValue))}">
</ueb-input>
</div>
`
}
}

39
js/template/RotatorPinTemplate.js
View File

@@ -19,27 +19,24 @@ export default class RotatorPinTemplate extends INumericPinTemplate {
}
renderInput() {
if (this.element.isInput()) {
return html`
<div class="ueb-pin-input-wrapper">
<span class="ueb-pin-input-label">X</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().R.toString())}"></span>
</div>
<span class="ueb-pin-input-label">Y</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().P.toString())}"></span>
</div>
<span class="ueb-pin-input-label">Z</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().Y.toString())}"></span>
</div>
return html`
<div class="ueb-pin-input-wrapper">
<span class="ueb-pin-input-label">X</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-x" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().R.toString())}"></span>
</div>
`
}
return html``
<span class="ueb-pin-input-label">Y</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-y" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().P.toString())}"></span>
</div>
<span class="ueb-pin-input-label">Z</span>
<div class="ueb-pin-input">
<span class="ueb-pin-input-content ueb-pin-input-z" role="textbox" contenteditable="true"
.innerText="${IInputPinTemplate.stringFromUEToInput(this.element.entity.getDefaultValue().Y.toString())}"></span>
</div>
</div>
`
}
}

45
js/template/VectorPinTemplate.js
View File

@@ -27,30 +27,27 @@ export default class VectorPinTemplate extends INumericPinTemplate {
}
renderInput() {
if (this.element.isInput()) {
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="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().X))}">
</ueb-input>
</div>
<span class="ueb-pin-input-label">Y</span>
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}"
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Y))}">
</ueb-input>
</div>
<span class="ueb-pin-input-label">Z</span>
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}"
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Z))}">
</ueb-input>
</div>
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="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().X))}">
</ueb-input>
</div>
`
}
return html``
<span class="ueb-pin-input-label">Y</span>
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}"
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Y))}">
</ueb-input>
</div>
<span class="ueb-pin-input-label">Z</span>
<div class="ueb-pin-input">
<ueb-input .singleLine="${true}"
.innerText="${IInputPinTemplate.stringFromUEToInput(Utility.minDecimals(this.element.entity.getDefaultValue().Z))}">
</ueb-input>
</div>
</div>
`
}
}