} PinElement
@@ -39,15 +41,17 @@ export default class IInputPinTemplate extends PinTemplate {
#onFocusOutHandler = () => this.setInputs(this.getInputs(), true)
- /** @param {Map} changedProperties */
+ /** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.#inputContentElements = /** @type {HTMLElement[]} */([...this.element.querySelectorAll("ueb-input")])
- if (this.#inputContentElements.length) {
- this.#inputContentElements.forEach(element => {
- element.addEventListener("focusout", this.#onFocusOutHandler)
- })
- }
+ }
+
+ setup() {
+ super.setup()
+ this.#inputContentElements.forEach(element => {
+ element.addEventListener("focusout", this.#onFocusOutHandler)
+ })
}
cleanup() {
@@ -75,10 +79,9 @@ export default class IInputPinTemplate extends PinTemplate {
)
}
- /** @param {String[]?} values */
+ /** @param {String[]} values */
setInputs(values = [], updateDefaultValue = true) {
- // @ts-expect-error
- this.#inputContentElements.forEach(this.constructor.singleLineInput
+ this.#inputContentElements.forEach(/** @type {typeof IInputPinTemplate } */(this.constructor).singleLineInput
? (elem, i) => elem.innerText = values[i]
: (elem, i) => elem.innerText = values[i].replaceAll("\n", "")
)
@@ -96,10 +99,8 @@ export default class IInputPinTemplate extends PinTemplate {
}
renderInput() {
- // @ts-expect-error
- const singleLine = this.constructor.singleLineInput
- // @ts-expect-error
- const selectOnFocus = this.constructor.selectOnFocus
+ const singleLine = /** @type {typeof IInputPinTemplate} */(this.constructor).singleLineInput
+ const selectOnFocus = /** @type {typeof IInputPinTemplate} */(this.constructor).selectOnFocus
return html`
{
if (e.code == "Enter" && !e.shiftKey) {
- /** @type {HTMLElement} */(e.target).blur()
+ /** @type {HTMLElement} */(e.target).blur()
}
}
/** @param {InputElement} element */
- constructed(element) {
- super.constructed(element)
+ initialize(element) {
+ super.initialize(element)
this.element.classList.add("ueb-pin-input-content")
this.element.setAttribute("role", "textbox")
this.element.contentEditable = "true"
}
- connectedCallback() {
+ setup() {
+ super.setup()
this.element.addEventListener("focus", this.#focusHandler)
this.element.addEventListener("focusout", this.#focusoutHandler)
if (this.element.singleLine) {
@@ -46,13 +47,10 @@ export default class InputTemplate extends ITemplate {
}
cleanup() {
+ super.cleanup()
this.element.removeEventListener("focus", this.#focusHandler)
this.element.removeEventListener("focusout", this.#focusoutHandler)
- if (this.element.singleLine) {
- this.element.removeEventListener("input", this.#inputSingleLineHandler)
- }
- if (this.element.blurOnEnter) {
- this.element.removeEventListener("keydown", this.#onKeydownBlurOnEnterHandler)
- }
+ this.element.removeEventListener("input", this.#inputSingleLineHandler)
+ this.element.removeEventListener("keydown", this.#onKeydownBlurOnEnterHandler)
}
}
diff --git a/js/template/pin/LinearColorPinTemplate.js b/js/template/pin/LinearColorPinTemplate.js
index a2820ab..15b7630 100644
--- a/js/template/pin/LinearColorPinTemplate.js
+++ b/js/template/pin/LinearColorPinTemplate.js
@@ -6,6 +6,7 @@ import PinTemplate from "./PinTemplate"
/**
* @typedef {import("../../element/WindowElement").default} WindowElement
+ * @typedef {import("../../element/WindowElement").WindowElementConstructor} WindowElementConstructor
* @typedef {import("../../entity/LinearColorEntity").default} LinearColorEntity
*/
@@ -19,9 +20,10 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
#launchColorPickerWindow = e => {
e.preventDefault()
this.element.blueprint.setFocused(true)
- this.#window = /** @type {WindowElement} */ (
- new (ElementFactory.getConstructor("ueb-window"))({
- type: ColorPickerWindowTemplate,
+ /** @type {WindowElement} */
+ this.#window = /** @type {WindowElementConstructor} */(ElementFactory.getConstructor("ueb-window"))
+ .newObject({
+ type: new ColorPickerWindowTemplate(),
windowOptions: {
// The created window will use the following functions to get and set the color
getPinColor: () => this.element.defaultValue,
@@ -29,7 +31,6 @@ export default class LinearColorInputPinTemplate extends PinTemplate {
setPinColor: color => this.element.setDefaultValue(color),
},
})
- )
this.element.blueprint.append(this.#window)
const windowApplyHandler = () => {
this.element.setDefaultValue(
diff --git a/js/template/pin/PinTemplate.js b/js/template/pin/PinTemplate.js
index 38900c3..1986b2c 100755
--- a/js/template/pin/PinTemplate.js
+++ b/js/template/pin/PinTemplate.js
@@ -5,7 +5,10 @@ import MouseCreateLink from "../../input/mouse/MouseCreateLink"
import SVGIcon from "../../SVGIcon"
import Utility from "../../Utility"
-/** @typedef {import("../../input/IInput").default} IInput */
+/**
+ * @typedef {import("../../input/IInput").default} IInput
+ * @typedef {import("lit").PropertyValues} PropertyValues
+ */
/**
* @template T
* @typedef {import("../../element/PinElement").default} PinElement
@@ -23,8 +26,8 @@ export default class PinTemplate extends ITemplate {
return this.#iconElement
}
- connectedCallback() {
- super.connectedCallback()
+ setup() {
+ super.setup()
this.element.nodeElement = this.element.closest("ueb-node")
}
@@ -66,7 +69,7 @@ export default class PinTemplate extends ITemplate {
return html``
}
- /** @param {Map} changedProperties */
+ /** @param {PropertyValues} changedProperties */
updated(changedProperties) {
super.updated(changedProperties)
if (this.element.isInput() && changedProperties.has("isLinked")) {
@@ -77,8 +80,7 @@ export default class PinTemplate extends ITemplate {
}
}
-
- /** @param {Map} changedProperties */
+ /** @param {PropertyValues} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.element.style.setProperty("--ueb-pin-color-rgb", Configuration.getPinColor(this.element).cssText)
diff --git a/package.json b/package.json
index 2eddfa7..a04b360 100755
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
"@rollup/plugin-commonjs": "^21.1.0",
"@rollup/plugin-node-resolve": "^13.3.0",
"@rollup/plugin-terser": "^0.1.0",
+ "cypress": "^12.1.0",
"minify-html-literals": "^1.3.5",
"rollup": "^2.75.5",
"rollup-plugin-copy": "^3.4.0",
diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss
index faea2a9..a611720 100644
--- a/scss/ueb-pin.scss
+++ b/scss/ueb-pin.scss
@@ -168,10 +168,14 @@ ueb-pin[data-type="/Script/CoreUObject.LinearColor"] .ueb-pin-input {
}
&::-webkit-scrollbar-thumb {
- background: #575757;
+ background: transparent;
border-radius: 10px;
margin: 4px;
}
+
+ &:hover::-webkit-scrollbar-thumb {
+ background: #575757;
+ }
}
ueb-blueprint[data-scrolling="false"][data-selecting="false"] .ueb-node-wrapper {