mirror of
https://github.com/barsdeveloper/ueblueprint.git
synced 2026-02-04 08:50:33 +08:00
Adapt input interface for multiple fields
This commit is contained in:
barsdeveloper
2
dist/css/ueb-style.css
vendored
2
dist/css/ueb-style.css
vendored
File diff suppressed because one or more lines are too long
2
dist/css/ueb-style.css.map
vendored
2
dist/css/ueb-style.css.map
vendored
@@ -1 +1 @@
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
|
||||
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"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","file":"ueb-style.css"}
|
||||
293
dist/ueblueprint.js
vendored
293
dist/ueblueprint.js
vendored
@@ -2148,9 +2148,7 @@ class ISelectableDraggableElement extends IElement {
|
||||
this.selected = false;
|
||||
|
||||
let self = this;
|
||||
this.dragHandler = (e) => {
|
||||
self.addLocation(e.detail.value);
|
||||
};
|
||||
this.dragHandler = e => self.addLocation(e.detail.value);
|
||||
}
|
||||
|
||||
#setSelected(value = true) {
|
||||
@@ -2218,6 +2216,21 @@ class ISelectableDraggableElement extends IElement {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {import("../../element/PinElement").default} PinElement
|
||||
*/
|
||||
|
||||
/**
|
||||
* @extends IMouseClickDrag<PinElement>
|
||||
*/
|
||||
class MouseIgnore extends IMouseClickDrag {
|
||||
|
||||
constructor(target, blueprint, options = {}) {
|
||||
options.consumeEvent = true;
|
||||
super(target, blueprint, options);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-check
|
||||
|
||||
document.createElement("div");
|
||||
@@ -2924,6 +2937,161 @@ class PinTemplate extends ITemplate {
|
||||
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* @typedef {import("../element/PinElement").default} PinElement
|
||||
*/
|
||||
|
||||
class IInputPinTemplate extends PinTemplate {
|
||||
|
||||
/** @type {HTMLElement[]} */
|
||||
#inputContentElements
|
||||
hasInput = true
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
setup(pin) {
|
||||
super.setup(pin);
|
||||
this.#inputContentElements = /** @type {HTMLElement[]} */(
|
||||
[...pin.querySelectorAll(".ueb-pin-input-content")]
|
||||
);
|
||||
if (this.#inputContentElements.length) {
|
||||
this.setInputs(pin, [pin.entity.DefaultValue]);
|
||||
let self = this;
|
||||
this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true);
|
||||
this.onFocusOutHandler = e => {
|
||||
e.preventDefault();
|
||||
document.getSelection().removeAllRanges(); // Deselect text inside the input
|
||||
self.setInputs(pin, this.getInputs(pin));
|
||||
pin.blueprint.dispatchEditTextEvent(false);
|
||||
};
|
||||
this.#inputContentElements.forEach(element => {
|
||||
element.addEventListener("focus", this.onFocusHandler);
|
||||
element.addEventListener("focusout", this.onFocusOutHandler);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
cleanup(pin) {
|
||||
super.cleanup(pin);
|
||||
this.#inputContentElements.forEach(element => {
|
||||
element.removeEventListener("focus", this.onFocusHandler);
|
||||
element.removeEventListener("focusout", this.onFocusOutHandler);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
createInputObjects(pin) {
|
||||
return [
|
||||
...super.createInputObjects(pin),
|
||||
...this.#inputContentElements.map(element => new MouseIgnore(element, pin.blueprint))
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
getInput(pin) {
|
||||
return this.getInputs(pin).reduce((acc, cur) => acc + cur, "")
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
getInputs(pin) {
|
||||
return this.#inputContentElements.map(element => Utility.encodeInputString(element.innerText))
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String[]?} values
|
||||
*/
|
||||
setInputs(pin, values = []) {
|
||||
pin.entity.DefaultValue = this.getInput(pin);
|
||||
this.#inputContentElements.forEach((element, i) => element.innerText = Utility.decodeInputString(values[i]));
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
renderInput(pin) {
|
||||
if (pin.isInput()) {
|
||||
return html`
|
||||
<div class="ueb-pin-input">
|
||||
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* @typedef {import("../element/PinElement").default} PinElement
|
||||
*/
|
||||
|
||||
class BoolPinTemplate extends IInputPinTemplate {
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
#input
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
setup(pin) {
|
||||
super.setup(pin);
|
||||
this.#input = pin.querySelector(".ueb-pin-input");
|
||||
let self = this;
|
||||
this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false";
|
||||
this.#input.addEventListener("change", this.onChangeHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
cleanup(pin) {
|
||||
super.cleanup(pin);
|
||||
this.#input.removeEventListener("change", this.onChangeHandler);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
getInputs(pin) {
|
||||
return [this.#input.checked ? "true" : "false"]
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String[]?} value
|
||||
*/
|
||||
setInputs(pin, value = []) {
|
||||
pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin);
|
||||
this.#input.checked = pin.entity.DefaultValue == "true";
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
renderInput(pin) {
|
||||
if (pin.isInput()) {
|
||||
return html`
|
||||
<input type="checkbox" class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""} />
|
||||
`
|
||||
}
|
||||
return super.renderInput(pin)
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* @typedef {import("../element/PinElement").default} PinElement
|
||||
*/
|
||||
@@ -2954,114 +3122,6 @@ class ExecPinTemplate extends PinTemplate {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {import("../../element/PinElement").default} PinElement
|
||||
*/
|
||||
|
||||
/**
|
||||
* @extends IMouseClickDrag<PinElement>
|
||||
*/
|
||||
class MouseIgnore extends IMouseClickDrag {
|
||||
|
||||
constructor(target, blueprint, options = {}) {
|
||||
options.consumeEvent = true;
|
||||
super(target, blueprint, options);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
* @typedef {import("../element/PinElement").default} PinElement
|
||||
*/
|
||||
|
||||
class IInputPinTemplate extends PinTemplate {
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
input = null
|
||||
hasInput = true
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
setup(pin) {
|
||||
super.setup(pin);
|
||||
if (this.input = pin.querySelector(".ueb-pin-input-content")) {
|
||||
this.setInput(pin, pin.entity.DefaultValue);
|
||||
let self = this;
|
||||
this.onFocusHandler = (e) => {
|
||||
pin.blueprint.dispatchEditTextEvent(true);
|
||||
};
|
||||
this.onFocusOutHandler = (e) => {
|
||||
e.preventDefault();
|
||||
document.getSelection().removeAllRanges(); // Deselect text inside the input
|
||||
self.setInput(pin, this.getInput(pin));
|
||||
pin.blueprint.dispatchEditTextEvent(false);
|
||||
};
|
||||
this.input.addEventListener("focus", this.onFocusHandler);
|
||||
this.input.addEventListener("focusout", this.onFocusOutHandler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
cleanup(pin) {
|
||||
super.cleanup(pin);
|
||||
if (this.input) {
|
||||
this.input.removeEventListener("focus", this.onFocusHandler);
|
||||
this.input.removeEventListener("focusout", this.onFocusOutHandler);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
createInputObjects(pin) {
|
||||
if (pin.isInput()) {
|
||||
return [
|
||||
...super.createInputObjects(pin),
|
||||
new MouseIgnore(pin.querySelector(".ueb-pin-input-content"), pin.blueprint),
|
||||
]
|
||||
}
|
||||
return super.createInputObjects(pin)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
getInput(pin) {
|
||||
return Utility.encodeInputString(
|
||||
/** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String} value
|
||||
*/
|
||||
setInput(pin, value) {
|
||||
pin.entity.DefaultValue = this.getInput(pin);
|
||||
pin.querySelector(".ueb-pin-input-content")
|
||||
// @ts-expect-error
|
||||
.innerText = Utility.decodeInputString(value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
renderInput(pin) {
|
||||
if (pin.isInput()) {
|
||||
return html`
|
||||
<div class="ueb-pin-input">
|
||||
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
return ""
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-check
|
||||
|
||||
/**
|
||||
@@ -3072,15 +3132,15 @@ class RealPinTemplate extends IInputPinTemplate {
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String} value
|
||||
* @param {String[]?} values
|
||||
*/
|
||||
setInput(pin, value) {
|
||||
let num = parseFloat(this.getInput(pin));
|
||||
setInputs(pin, values = []) {
|
||||
let num = parseFloat(values.length ? values[0] : this.getInput(pin));
|
||||
if (isNaN(num)) {
|
||||
num = parseFloat(pin.entity.AutogeneratedDefaultValue);
|
||||
}
|
||||
value = Utility.minDecimals(num);
|
||||
super.setInput(pin, value);
|
||||
values[0] = Utility.minDecimals(num);
|
||||
super.setInputs(pin, values);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3115,6 +3175,7 @@ class StringPinTemplate extends IInputPinTemplate {
|
||||
class PinElement extends IElement {
|
||||
|
||||
static #typeTemplateMap = {
|
||||
"bool": BoolPinTemplate,
|
||||
"exec": ExecPinTemplate,
|
||||
"real": RealPinTemplate,
|
||||
"string": StringPinTemplate,
|
||||
|
||||
@@ -24,9 +24,7 @@ export default class ISelectableDraggableElement extends IElement {
|
||||
this.selected = false
|
||||
|
||||
let self = this
|
||||
this.dragHandler = (e) => {
|
||||
self.addLocation(e.detail.value)
|
||||
}
|
||||
this.dragHandler = e => self.addLocation(e.detail.value)
|
||||
}
|
||||
|
||||
#setSelected(value = true) {
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// @ts-check
|
||||
|
||||
import BoolPinTemplate from "../template/BoolPinTemplate"
|
||||
import ExecPinTemplate from "../template/ExecPinTemplate"
|
||||
import IElement from "./IElement"
|
||||
import LinkElement from "./LinkElement"
|
||||
@@ -21,6 +22,7 @@ import Utility from "../Utility"
|
||||
export default class PinElement extends IElement {
|
||||
|
||||
static #typeTemplateMap = {
|
||||
"bool": BoolPinTemplate,
|
||||
"exec": ExecPinTemplate,
|
||||
"real": RealPinTemplate,
|
||||
"string": StringPinTemplate,
|
||||
|
||||
61
js/template/BoolPinTemplate.js
Normal file
61
js/template/BoolPinTemplate.js
Normal file
@@ -0,0 +1,61 @@
|
||||
// @ts-check
|
||||
|
||||
import html from "./html"
|
||||
import IInputPinTemplate from "./IInputPinTemplate"
|
||||
|
||||
/**
|
||||
* @typedef {import("../element/PinElement").default} PinElement
|
||||
*/
|
||||
|
||||
export default class BoolPinTemplate extends IInputPinTemplate {
|
||||
|
||||
/** @type {HTMLInputElement} */
|
||||
#input
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
setup(pin) {
|
||||
super.setup(pin)
|
||||
this.#input = pin.querySelector(".ueb-pin-input")
|
||||
let self = this
|
||||
this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false"
|
||||
this.#input.addEventListener("change", this.onChangeHandler)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
cleanup(pin) {
|
||||
super.cleanup(pin)
|
||||
this.#input.removeEventListener("change", this.onChangeHandler)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
getInputs(pin) {
|
||||
return [this.#input.checked ? "true" : "false"]
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String[]?} value
|
||||
*/
|
||||
setInputs(pin, value = []) {
|
||||
pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin)
|
||||
this.#input.checked = pin.entity.DefaultValue == "true"
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
renderInput(pin) {
|
||||
if (pin.isInput()) {
|
||||
return html`
|
||||
<input type="checkbox" class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""} />
|
||||
`
|
||||
}
|
||||
return super.renderInput(pin)
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,6 @@
|
||||
import html from "./html"
|
||||
import MouseIgnore from "../input/mouse/MouseIgnore"
|
||||
import PinTemplate from "./PinTemplate"
|
||||
import sanitizeText from "./sanitizeText"
|
||||
import Utility from "../Utility"
|
||||
|
||||
/**
|
||||
@@ -12,8 +11,8 @@ import Utility from "../Utility"
|
||||
|
||||
export default class IInputPinTemplate extends PinTemplate {
|
||||
|
||||
/** @type {HTMLElement} */
|
||||
input = null
|
||||
/** @type {HTMLElement[]} */
|
||||
#inputContentElements
|
||||
hasInput = true
|
||||
|
||||
/**
|
||||
@@ -21,20 +20,23 @@ export default class IInputPinTemplate extends PinTemplate {
|
||||
*/
|
||||
setup(pin) {
|
||||
super.setup(pin)
|
||||
if (this.input = pin.querySelector(".ueb-pin-input-content")) {
|
||||
this.setInput(pin, pin.entity.DefaultValue)
|
||||
this.#inputContentElements = /** @type {HTMLElement[]} */(
|
||||
[...pin.querySelectorAll(".ueb-pin-input-content")]
|
||||
)
|
||||
if (this.#inputContentElements.length) {
|
||||
this.setInputs(pin, [pin.entity.DefaultValue])
|
||||
let self = this
|
||||
this.onFocusHandler = (e) => {
|
||||
pin.blueprint.dispatchEditTextEvent(true)
|
||||
}
|
||||
this.onFocusOutHandler = (e) => {
|
||||
this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true)
|
||||
this.onFocusOutHandler = e => {
|
||||
e.preventDefault()
|
||||
document.getSelection().removeAllRanges() // Deselect text inside the input
|
||||
self.setInput(pin, this.getInput(pin))
|
||||
self.setInputs(pin, this.getInputs(pin))
|
||||
pin.blueprint.dispatchEditTextEvent(false)
|
||||
}
|
||||
this.input.addEventListener("focus", this.onFocusHandler)
|
||||
this.input.addEventListener("focusout", this.onFocusOutHandler)
|
||||
this.#inputContentElements.forEach(element => {
|
||||
element.addEventListener("focus", this.onFocusHandler)
|
||||
element.addEventListener("focusout", this.onFocusOutHandler)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
@@ -43,43 +45,43 @@ export default class IInputPinTemplate extends PinTemplate {
|
||||
*/
|
||||
cleanup(pin) {
|
||||
super.cleanup(pin)
|
||||
if (this.input) {
|
||||
this.input.removeEventListener("focus", this.onFocusHandler)
|
||||
this.input.removeEventListener("focusout", this.onFocusOutHandler)
|
||||
}
|
||||
this.#inputContentElements.forEach(element => {
|
||||
element.removeEventListener("focus", this.onFocusHandler)
|
||||
element.removeEventListener("focusout", this.onFocusOutHandler)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
createInputObjects(pin) {
|
||||
if (pin.isInput()) {
|
||||
return [
|
||||
...super.createInputObjects(pin),
|
||||
new MouseIgnore(pin.querySelector(".ueb-pin-input-content"), pin.blueprint),
|
||||
]
|
||||
}
|
||||
return super.createInputObjects(pin)
|
||||
return [
|
||||
...super.createInputObjects(pin),
|
||||
...this.#inputContentElements.map(element => new MouseIgnore(element, pin.blueprint))
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
*/
|
||||
getInput(pin) {
|
||||
return Utility.encodeInputString(
|
||||
/** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText
|
||||
)
|
||||
return this.getInputs(pin).reduce((acc, cur) => acc + cur, "")
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String} value
|
||||
*/
|
||||
setInput(pin, value) {
|
||||
getInputs(pin) {
|
||||
return this.#inputContentElements.map(element => Utility.encodeInputString(element.innerText))
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String[]?} values
|
||||
*/
|
||||
setInputs(pin, values = []) {
|
||||
pin.entity.DefaultValue = this.getInput(pin)
|
||||
pin.querySelector(".ueb-pin-input-content")
|
||||
// @ts-expect-error
|
||||
.innerText = Utility.decodeInputString(value)
|
||||
this.#inputContentElements.forEach((element, i) => element.innerText = Utility.decodeInputString(values[i]))
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -11,14 +11,14 @@ export default class RealPinTemplate extends IInputPinTemplate {
|
||||
|
||||
/**
|
||||
* @param {PinElement} pin
|
||||
* @param {String} value
|
||||
* @param {String[]?} values
|
||||
*/
|
||||
setInput(pin, value) {
|
||||
let num = parseFloat(this.getInput(pin))
|
||||
setInputs(pin, values = []) {
|
||||
let num = parseFloat(values.length ? values[0] : this.getInput(pin))
|
||||
if (isNaN(num)) {
|
||||
num = parseFloat(pin.entity.AutogeneratedDefaultValue)
|
||||
}
|
||||
value = Utility.minDecimals(num)
|
||||
super.setInput(pin, value)
|
||||
values[0] = Utility.minDecimals(num)
|
||||
super.setInputs(pin, values)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -100,6 +100,19 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill {
|
||||
}
|
||||
}
|
||||
|
||||
.ueb-pin-type-bool .ueb-pin-input {
|
||||
appearance: none;
|
||||
padding: 0;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
background: #0f0f0f;
|
||||
color: var(--ueb-pin-color);
|
||||
}
|
||||
|
||||
.ueb-pin-type-bool .ueb-pin-input:checked {
|
||||
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="none" stroke="%230070e0" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M 5 10 l 3 3 l 6 -6" /></svg>');
|
||||
}
|
||||
|
||||
.ueb-pin-input-content {
|
||||
display: block;
|
||||
outline: none;
|
||||
|
||||
Reference in New Issue
Block a user