Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-03-13 03:37:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Initialize events handler in class

Browse Source
This commit is contained in:
barsdeveloper
2022-11-12 11:46:22 +01:00
parent c3743572fc
commit cd911b0d0c
14 changed files with 760 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
js/template/LinearColorPinTemplate.js
View File

@@ -2,7 +2,6 @@ import { html } from "lit"
import ColorPickerWindowTemplate from "./ColorPickerWindowTemplate"
import Configuration from "../Configuration"
import IInputPinTemplate from "./IInputPinTemplate"
import MouseClickAction from "../input/mouse/MouseClickAction"
import WindowElement from "../element/WindowElement"
/**
@@ -19,44 +18,40 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
/** @type {WindowElement} */
#window
#launchColorPickerWindow =
/** @param {MouseEvent} e */
e => {
//e.preventDefault()
this.#window = new WindowElement({
type: ColorPickerWindowTemplate,
windowOptions: {
// The created window will use the following functions to get and set the color
getPinColor: () => this.element.defaultValue,
/** @param {LinearColorEntity} color */
setPinColor: color => this.element.setDefaultValue(color),
},
})
this.element.blueprint.append(this.#window)
const windowApplyHandler = () => {
this.element.setDefaultValue(
/** @type {ColorPickerWindowTemplate} */(this.#window.template).color
)
}
const windowCloseHandler = () => {
this.#window.removeEventListener(Configuration.windowApplyEventName, windowApplyHandler)
this.#window.removeEventListener(Configuration.windowCloseEventName, windowCloseHandler)
this.#window = null
}
this.#window.addEventListener(Configuration.windowApplyEventName, windowApplyHandler)
this.#window.addEventListener(Configuration.windowCloseEventName, windowCloseHandler)
}
/** @param {Map} changedProperties */
firstUpdated(changedProperties) {
super.firstUpdated(changedProperties)
this.#input = this.element.querySelector(".ueb-pin-input")
}
createInputObjects() {
return [
...super.createInputObjects(),
new MouseClickAction(this.#input, this.element.blueprint, undefined,
inputInstance => {
this.#window = new WindowElement({
type: ColorPickerWindowTemplate,
windowOptions: {
// The created window will use the following functions to get and set the color
getPinColor: () => this.element.defaultValue,
/** @param {LinearColorEntity} color */
setPinColor: color => this.element.setDefaultValue(color),
},
})
this.element.blueprint.append(this.#window)
const windowApplyHandler = () => {
this.element.setDefaultValue(
/** @type {ColorPickerWindowTemplate} */(this.#window.template).color
)
}
const windowCloseHandler = () => {
this.#window.removeEventListener(Configuration.windowApplyEventName, windowApplyHandler)
this.#window.removeEventListener(Configuration.windowCloseEventName, windowCloseHandler)
this.#window = null
}
this.#window.addEventListener(Configuration.windowApplyEventName, windowApplyHandler)
this.#window.addEventListener(Configuration.windowCloseEventName, windowCloseHandler)
},
),
]
}
getInputs() {
return [this.#input.dataset.linearColor]
}
@@ -69,6 +64,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
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>
`