Performance improvement

This commit is contained in:
barsdeveloper
2022-10-17 22:32:25 +02:00
parent 192f2a4c11
commit e8a35c81d0
17 changed files with 215 additions and 47 deletions

View File

@@ -56,7 +56,7 @@ export default class Configuration {
"/Script/CoreUObject.Vector": css`215, 202, 11`,
"bool": css`117, 0, 0`,
"default": css`167, 167, 167`,
"exec": css`167, 167, 167`,
"exec": css`240, 240, 240`,
"name": css`203, 129, 252`,
"real": css`50, 187, 0`,
"string": css`213, 0, 176`,

View File

@@ -262,4 +262,8 @@ export default class Utility {
r * Math.sin(theta)
]
}
static range(begin, end, step = 1) {
return Array.from({ length: Math.ceil((end - begin) / step) }, (_, i) => begin + (i * step))
}
}

View File

@@ -20,6 +20,7 @@ import Zoom from "../input/mouse/Zoom"
* @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
*/
/** @extends ITemplate<Blueprint> */
export default class BlueprintTemplate extends ITemplate {
static styleVariables = {
@@ -76,12 +77,12 @@ export default class BlueprintTemplate extends ITemplate {
render() {
return html`
<div class="ueb-viewport-header">
<div class="ueb-viewport-zoom">1:1</div>
<div class="ueb-viewport-zoom">${this.element.zoom == 0 ? "1:1" : this.element.zoom}</div>
</div>
<div class="ueb-viewport-overlay"></div>
<div class="ueb-viewport-body">
<div class="ueb-grid"
style="--ueb-additional-x: ${this.element}; --ueb-additional-y: ${this.element.translateY}; --ueb-translate-x: ${this.element.translateX}; --ueb-translate-y: ${this.element.translateY};">
style="--ueb-additional-x: ${Math.round(this.element.translateX)}; --ueb-additional-y: ${Math.round(this.element.translateY)}; --ueb-translate-x: ${Math.round(this.element.translateX)}; --ueb-translate-y: ${Math.round(this.element.translateY)};">
<div class="ueb-grid-content">
<div data-links></div>
<div data-nodes></div>
@@ -114,6 +115,20 @@ export default class BlueprintTemplate extends ITemplate {
if (changedProperties.has("scrollX") || changedProperties.has("scrollY")) {
this.element.viewportElement.scroll(this.element.scrollX, this.element.scrollY)
}
if (changedProperties.has("zoom")) {
const previousZoom = changedProperties.get("zoom")
const minZoom = Math.min(previousZoom, this.element.zoom)
const maxZoom = Math.max(previousZoom, this.element.zoom)
const classes = Utility.range(minZoom, maxZoom)
const getClassName = v => `ueb-zoom-${v}`
if (previousZoom < this.element.zoom) {
this.element.classList.remove(...classes.filter(v => v < 0).map(getClassName))
this.element.classList.add(...classes.filter(v => v > 0).map(getClassName))
} else {
this.element.classList.remove(...classes.filter(v => v > 0).map(getClassName))
this.element.classList.add(...classes.filter(v => v < 0).map(getClassName))
}
}
}
/** @param {PinReferenceEntity} pinReference */

View File

@@ -33,10 +33,10 @@ export default class IDraggableTemplate extends ITemplate {
update(changedProperties) {
super.update(changedProperties)
if (changedProperties.has("locationX")) {
this.element.style.setProperty("--ueb-position-x", `${this.element.locationX}`)
this.element.style.left = `${this.element.locationX}px`
}
if (changedProperties.has("locationY")) {
this.element.style.setProperty("--ueb-position-y", `${this.element.locationY}`)
this.element.style.top = `${this.element.locationY}px`
}
}
}

View File

@@ -12,16 +12,16 @@ export default class IFromToPositionedTemplate extends ITemplate {
update(changedProperties) {
super.update(changedProperties)
if (changedProperties.has("initialPositionX")) {
this.element.style.setProperty("--ueb-from-x", `${this.element.initialPositionX}`)
this.element.style.setProperty("--ueb-from-x", `${Math.round(this.element.initialPositionX)}`)
}
if (changedProperties.has("initialPositionY")) {
this.element.style.setProperty("--ueb-from-y", `${this.element.initialPositionY}`)
this.element.style.setProperty("--ueb-from-y", `${Math.round(this.element.initialPositionY)}`)
}
if (changedProperties.has("finaPositionX")) {
this.element.style.setProperty("--ueb-to-x", `${this.element.finaPositionX}`)
this.element.style.setProperty("--ueb-to-x", `${Math.round(this.element.finaPositionX)}`)
}
if (changedProperties.has("finaPositionY")) {
this.element.style.setProperty("--ueb-to-y", `${this.element.finaPositionY}`)
this.element.style.setProperty("--ueb-to-y", `${Math.round(this.element.finaPositionY)}`)
}
}

View File

@@ -107,7 +107,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
<svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<g>
<path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" d="${this.element.svgPathD}" />
<use href="#${uniqueId}" pointer-events="stroke" stroke-width="10" />
<use href="#${uniqueId}" pointer-events="stroke" stroke-width="15" />
</g>
</svg>
${this.element.linkMessageIcon != "" || this.element.linkMessageText != "" ? html`

View File

@@ -31,7 +31,9 @@ export default class NodeTemplate extends ISelectableDraggableTemplate {
<div class="ueb-node-outputs"></div>
</div>
${this.element.enabledState?.toString() == "DevelopmentOnly" ? html`
<div class="ueb-node-developmentonly">Development Only</div>
<div class="ueb-node-developmentonly">
<span class="ueb-node-developmentonly-text">Development Only</span>
</div>
` : nothing}
${this.element.advancedPinDisplay ? html`
<div class="ueb-node-expansion" @click="${this.toggleAdvancedDisplayHandler}">