Some performance improvement

This commit is contained in:
barsdeveloper
2022-05-12 22:09:17 +02:00
parent ddb8138cd4
commit 4a6b021e0c
8 changed files with 87 additions and 46 deletions

66
dist/ueblueprint.js vendored
View File

@@ -785,6 +785,29 @@ class LinearColorEntity extends IEntity {
/** @type {Number} */ this.B;
/** @type {Number} */ this.A;
}
/**
* @param {Number} number
*/
static numberToString(number) {
return Math.round(number * 255).toString(16)
}
static fromString(value) {
return new LinearColorEntity({
R: parseInt(value.substr(0, 2), 16) / 255,
G: parseInt(value.substr(2, 2), 16) / 255,
B: parseInt(value.substr(4, 2), 16) / 255,
A: parseInt(value.substr(6, 2), 16) / 255,
})
}
toString() {
return "#" + LinearColorEntity.numberToString(this.R)
+ LinearColorEntity.numberToString(this.G)
+ LinearColorEntity.numberToString(this.B)
+ LinearColorEntity.numberToString(this.A)
}
}
// @ts-check
@@ -903,7 +926,7 @@ class PinEntity extends IEntity {
* }}
*/ this.PinType;
/** @type {PinReferenceEntity[]} */ this.LinkedTo;
/** @type {String} */ this.DefaultValue;
/** @type {String | LinearColorEntity} */ this.DefaultValue;
/** @type {String} */ this.AutogeneratedDefaultValue;
/** @type {ObjectReferenceEntity} */ this.DefaultObject;
/** @type {GuidEntity} */ this.PersistentGuid;
@@ -3005,8 +3028,6 @@ class MouseCreateLink extends IMouseClickDrag {
class PinTemplate extends ITemplate {
hasInput = false
/**
* @param {PinElement} pin
* @returns {IInput[]}
@@ -3108,7 +3129,6 @@ class IInputPinTemplate extends PinTemplate {
get inputContentElements() {
return this.#inputContentElements
}
hasInput = true
/**
* @param {PinElement} pin
@@ -3119,7 +3139,9 @@ class IInputPinTemplate extends PinTemplate {
[...pin.querySelectorAll(".ueb-pin-input-content")]
);
if (this.#inputContentElements.length) {
this.setInputs(pin, [Utility.decodeInputString(pin.entity.DefaultValue)]);
this.setInputs(pin, [
Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue))
]);
let self = this;
this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true);
this.onFocusOutHandler = e => {
@@ -3167,7 +3189,9 @@ class IInputPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
getInputs(pin) {
return this.#inputContentElements.map(element => element.innerText)
return this.#inputContentElements.map(element =>
// Faster than innerText which causes reflow
element.innerHTML.replaceAll("<br>", "\n"))
}
/**
@@ -3188,7 +3212,7 @@ class IInputPinTemplate extends PinTemplate {
if (pin.isInput()) {
return html`
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"></span>
</div>
`
}
@@ -3291,6 +3315,7 @@ class ExecPinTemplate extends PinTemplate {
/**
* @typedef {import("../element/PinElement").default} PinElement
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)}
*/
class LinearColorPinTemplate extends IInputPinTemplate {
@@ -3304,24 +3329,14 @@ class LinearColorPinTemplate extends IInputPinTemplate {
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);
this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString();
}
/**
* @param {PinElement} pin
*/
getInputs(pin) {
return [this.#input.checked ? "true" : "false"]
return [this.#input.dataset.linearColor]
}
/**
@@ -3329,8 +3344,6 @@ class LinearColorPinTemplate extends IInputPinTemplate {
* @param {String[]?} value
*/
setInputs(pin, value = []) {
pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin);
this.#input.checked = pin.entity.DefaultValue == "true";
}
/**
@@ -3339,7 +3352,7 @@ class LinearColorPinTemplate extends IInputPinTemplate {
renderInput(pin) {
if (pin.isInput()) {
return html`
<span class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""}></span>
<span class="ueb-pin-input"></span>
`
}
return super.renderInput(pin)
@@ -3388,12 +3401,19 @@ class NamePinTemplate extends IInputPinTemplate {
});
}
/**
* @param {PinElement} pin
*/
getInputs(pin) {
return this.inputContentElements.map(element => element.textContent) // textContent for performance reason
}
/**
* @param {PinElement} pin
* @param {String[]?} values
*/
setInputs(pin, values = [], updateDefaultValue = true) {
values = values.map(value => value.replaceAll("\n", ""));
values = values.map(value => value.replaceAll("\n", "")); // get rid of the new lines
super.setInputs(pin, values, updateDefaultValue);
}
}

File diff suppressed because one or more lines are too long

View File

@@ -18,4 +18,27 @@ export default class LinearColorEntity extends IEntity {
/** @type {Number} */ this.B
/** @type {Number} */ this.A
}
/**
* @param {Number} number
*/
static numberToString(number) {
return Math.round(number * 255).toString(16)
}
static fromString(value) {
return new LinearColorEntity({
R: parseInt(value.substr(0, 2), 16) / 255,
G: parseInt(value.substr(2, 2), 16) / 255,
B: parseInt(value.substr(4, 2), 16) / 255,
A: parseInt(value.substr(6, 2), 16) / 255,
})
}
toString() {
return "#" + LinearColorEntity.numberToString(this.R)
+ LinearColorEntity.numberToString(this.G)
+ LinearColorEntity.numberToString(this.B)
+ LinearColorEntity.numberToString(this.A)
}
}

View File

@@ -66,7 +66,7 @@ export default class PinEntity extends IEntity {
* }}
*/ this.PinType
/** @type {PinReferenceEntity[]} */ this.LinkedTo
/** @type {String} */ this.DefaultValue
/** @type {String | LinearColorEntity} */ this.DefaultValue
/** @type {String} */ this.AutogeneratedDefaultValue
/** @type {ObjectReferenceEntity} */ this.DefaultObject
/** @type {GuidEntity} */ this.PersistentGuid

View File

@@ -16,7 +16,6 @@ export default class IInputPinTemplate extends PinTemplate {
get inputContentElements() {
return this.#inputContentElements
}
hasInput = true
/**
* @param {PinElement} pin
@@ -27,7 +26,9 @@ export default class IInputPinTemplate extends PinTemplate {
[...pin.querySelectorAll(".ueb-pin-input-content")]
)
if (this.#inputContentElements.length) {
this.setInputs(pin, [Utility.decodeInputString(pin.entity.DefaultValue)])
this.setInputs(pin, [
Utility.decodeInputString(/** @type {String} */(pin.entity.DefaultValue))
])
let self = this
this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true)
this.onFocusOutHandler = e => {
@@ -75,7 +76,9 @@ export default class IInputPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
getInputs(pin) {
return this.#inputContentElements.map(element => element.innerText)
return this.#inputContentElements.map(element =>
// Faster than innerText which causes reflow
element.innerHTML.replaceAll("<br>", "\n"))
}
/**
@@ -96,7 +99,7 @@ export default class IInputPinTemplate extends PinTemplate {
if (pin.isInput()) {
return html`
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
<span class="ueb-pin-input-content" role="textbox" contenteditable="true"></span>
</div>
`
}

View File

@@ -5,6 +5,7 @@ import IInputPinTemplate from "./IInputPinTemplate"
/**
* @typedef {import("../element/PinElement").default} PinElement
* @typedef {import("../entity/LinearColorEntity").default} LinearColorEntity)}
*/
export default class LinearColorPinTemplate extends IInputPinTemplate {
@@ -18,24 +19,15 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
setup(pin) {
super.setup(pin)
this.#input = pin.querySelector(".ueb-pin-input")
this.#input.dataset.linearColor = /** @type {LinearColorEntity} */(pin.entity.DefaultValue).toString()
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"]
return [this.#input.dataset.linearColor]
}
/**
@@ -43,8 +35,6 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
* @param {String[]?} value
*/
setInputs(pin, value = []) {
pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin)
this.#input.checked = pin.entity.DefaultValue == "true"
}
/**
@@ -53,7 +43,7 @@ export default class LinearColorPinTemplate extends IInputPinTemplate {
renderInput(pin) {
if (pin.isInput()) {
return html`
<span class="ueb-pin-input" ${pin.entity.DefaultValue == "true" ? "checked" : ""}></span>
<span class="ueb-pin-input"></span>
`
}
return super.renderInput(pin)

View File

@@ -42,12 +42,19 @@ export default class NamePinTemplate extends IInputPinTemplate {
})
}
/**
* @param {PinElement} pin
*/
getInputs(pin) {
return this.inputContentElements.map(element => element.textContent) // textContent for performance reason
}
/**
* @param {PinElement} pin
* @param {String[]?} values
*/
setInputs(pin, values = [], updateDefaultValue = true) {
values = values.map(value => value.replaceAll("\n", ""))
values = values.map(value => value.replaceAll("\n", "")) // get rid of the new lines
super.setInputs(pin, values, updateDefaultValue)
}
}

View File

@@ -14,8 +14,6 @@ import Utility from "../Utility"
export default class PinTemplate extends ITemplate {
hasInput = false
/**
* @param {PinElement} pin
* @returns {IInput[]}