Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-25 09:14:41 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Simplify positioned style computation

Browse Source
This commit is contained in:
barsdeveloper
2022-10-18 20:25:42 +02:00
parent e8a35c81d0
commit 14d376d447
13 changed files with 127 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
js/template/IFromToPositionedTemplate.js
View File

@@ -11,17 +11,25 @@ export default class IFromToPositionedTemplate extends ITemplate {
/** @param {Map} changedProperties */
update(changedProperties) {
super.update(changedProperties)
if (changedProperties.has("initialPositionX")) {
this.element.style.setProperty("--ueb-from-x", `${Math.round(this.element.initialPositionX)}`)
const [fromX, fromY, toX, toY] = [
Math.round(this.element.fromX),
Math.round(this.element.fromY),
Math.round(this.element.toX),
Math.round(this.element.toY),
]
const [left, top, width, height] = [
Math.min(fromX, toX),
Math.min(fromY, toY),
Math.abs(fromX - toX),
Math.abs(fromY - toY),
]
if (changedProperties.has("fromX") || changedProperties.has("toX")) {
this.element.style.left = `${left}px`
this.element.style.width = `${width}px`
}
if (changedProperties.has("initialPositionY")) {
this.element.style.setProperty("--ueb-from-y", `${Math.round(this.element.initialPositionY)}`)
}
if (changedProperties.has("finaPositionX")) {
this.element.style.setProperty("--ueb-to-x", `${Math.round(this.element.finaPositionX)}`)
}
if (changedProperties.has("finaPositionY")) {
this.element.style.setProperty("--ueb-to-y", `${Math.round(this.element.finaPositionY)}`)
if (changedProperties.has("fromY") || changedProperties.has("toY")) {
this.element.style.top = `${top}px`
this.element.style.height = `${height}px`
}
}

15
js/template/LinkTemplate.js
View File

@@ -1,4 +1,4 @@
import { css, html } from "lit"
import { css, html, nothing } from "lit"
import Configuration from "../Configuration"
import Utility from "../Utility"
import IFromToPositionedTemplate from "./IFromToPositionedTemplate"
@@ -61,14 +61,14 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
*/
willUpdate(changedProperties) {
super.willUpdate(changedProperties)
const dx = Math.max(Math.abs(this.element.initialPositionX - this.element.finaPositionX), 1)
const dx = Math.max(Math.abs(this.element.fromX - this.element.toX), 1)
const width = Math.max(dx, Configuration.linkMinWidth)
// const height = Math.max(Math.abs(link.initialPositionY - link.finaPositionY), 1)
// const height = Math.max(Math.abs(link.fromY - link.toY), 1)
const fillRatio = dx / width
// const aspectRatio = width / height
const xInverted = this.element.originatesFromInput
? this.element.initialPositionX < this.element.finaPositionX
: this.element.finaPositionX < this.element.initialPositionX
? this.element.fromX < this.element.toX
: this.element.toX < this.element.fromX
this.element.startPixels = dx < width // If under minimum width
? (width - dx) / 2 // Start from half the empty space
: 0 // Otherwise start from the beginning
@@ -97,8 +97,9 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
if (referencePin) {
this.element.style.setProperty("--ueb-link-color-rgb", Utility.printLinearColor(referencePin.color))
}
this.element.style.setProperty("--ueb-link-start", `${Math.round(this.element.startPixels)}`)
this.element.style.setProperty("--ueb-y-reflected", `${this.element.fromY > this.element.toY ? 1 : 0}`)
this.element.style.setProperty("--ueb-start-percentage", `${Math.round(this.element.startPercentage)}%`)
this.element.style.setProperty("--ueb-link-start", `${Math.round(this.element.startPixels)}`)
}
render() {
@@ -115,7 +116,7 @@ export default class LinkTemplate extends IFromToPositionedTemplate {
<span class="${this.element.linkMessageIcon}"></span>
<span class="ueb-link-message-text">${this.element.linkMessageText}</span>
</div>
` : html``}
` : nothing}
`
}
}