Configuration dependant on blueprint, refactoring

This commit is contained in:
barsdeveloper
2022-03-31 23:31:11 +02:00
parent 90400110e2
commit efb3fc6a6a
15 changed files with 297 additions and 221 deletions

View File

@@ -11,6 +11,10 @@ import SelectorElement from "../element/SelectorElement"
* @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity
*/
export default class BlueprintTemplate extends ITemplate {
/**
* @param {Blueprint} element
*/
header(element) {
return html`
<div class="ueb-viewport-header">
@@ -19,7 +23,10 @@ export default class BlueprintTemplate extends ITemplate {
`
}
overlay() {
/**
* @param {Blueprint} element
*/
overlay(element) {
return html`
<div class="ueb-viewport-overlay"></div>
`
@@ -27,7 +34,6 @@ export default class BlueprintTemplate extends ITemplate {
/**
* @param {Blueprint} element
* @returns
*/
viewport(element) {
return html`
@@ -47,7 +53,7 @@ export default class BlueprintTemplate extends ITemplate {
/**
* Computes the html content of the target element.
* @param {HTMLElement} element Target element
* @param {Blueprint} element Target element
* @returns The computed html
*/
render(element) {
@@ -66,15 +72,15 @@ export default class BlueprintTemplate extends ITemplate {
super.apply(blueprint)
blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
Object.entries({
"--ueb-font-size": sanitizeText(Configuration.fontSize),
"--ueb-grid-size": `${sanitizeText(Configuration.gridSize)}px`,
"--ueb-grid-line-width": `${sanitizeText(Configuration.gridLineWidth)}px`,
"--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor),
"--ueb-grid-set": sanitizeText(Configuration.gridSet),
"--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor),
"--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor),
"--ueb-node-radius": `${sanitizeText(Configuration.nodeRadius)}px`,
"--ueb-link-min-width": sanitizeText(Configuration.linkMinWidth)
"--ueb-font-size": sanitizeText(blueprint.settings.fontSize),
"--ueb-grid-size": `${sanitizeText(blueprint.settings.gridSize)}px`,
"--ueb-grid-line-width": `${sanitizeText(blueprint.settings.gridLineWidth)}px`,
"--ueb-grid-line-color": sanitizeText(blueprint.settings.gridLineColor),
"--ueb-grid-set": sanitizeText(blueprint.settings.gridSet),
"--ueb-grid-set-line-color": sanitizeText(blueprint.settings.gridSetLineColor),
"--ueb-grid-axis-line-color": sanitizeText(blueprint.settings.gridAxisLineColor),
"--ueb-node-radius": `${sanitizeText(blueprint.settings.nodeRadius)}px`,
"--ueb-link-min-width": sanitizeText(blueprint.settings.linkMinWidth)
}).forEach(entry => blueprint.style.setProperty(entry[0], entry[1]))
blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
@@ -118,7 +124,7 @@ export default class BlueprintTemplate extends ITemplate {
* @param {Blueprint} blueprint The blueprint element
*/
applyStartDragScrolling(blueprint) {
blueprint.dataset.dragScrolling = true
blueprint.dataset.dragScrolling = "true"
}
/**
@@ -126,7 +132,7 @@ export default class BlueprintTemplate extends ITemplate {
* @param {Blueprint} blueprint The blueprint element
*/
applyEndDragScrolling(blueprint) {
blueprint.dataset.dragScrolling = false
blueprint.dataset.dragScrolling = "false"
}
/**

View File

@@ -92,7 +92,7 @@ export default class LinkTemplate extends ITemplate {
* @param {LinkElement} link element
*/
applyStartDragging(link) {
link.blueprint.dataset.creatingLink = true
link.blueprint.dataset.creatingLink = "true"
const referencePin = link.getSourcePin() ?? link.getDestinationPin()
if (referencePin) {
link.style.setProperty("--ueb-pin-color", referencePin.getColor())
@@ -104,7 +104,7 @@ export default class LinkTemplate extends ITemplate {
* @param {LinkElement} link element
*/
applyFinishDragging(link) {
link.blueprint.dataset.creatingLink = false
link.blueprint.dataset.creatingLink = "false"
link.classList.remove("ueb-link-dragging")
}
@@ -124,7 +124,7 @@ export default class LinkTemplate extends ITemplate {
*/
applyFullLocation(link) {
const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
const width = Math.max(dx, Configuration.linkMinWidth)
const width = Math.max(dx, link.blueprint.settings.linkMinWidth)
const height = Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
const fillRatio = dx / width
const aspectRatio = width / height
@@ -153,7 +153,7 @@ export default class LinkTemplate extends ITemplate {
* fillRatio
let c2 = LinkTemplate.c2Clamped(xInverted ? -dx : dx) + start
c2 = Math.min(c2, LinkTemplate.c2DecreasingValue(width))
const d = Configuration.linkRightSVGPath(start, c1, c2)
const d = link.blueprint.settings.linkRightSVGPath(start, c1, c2)
// TODO move to CSS when Firefox will support property d and css will have enough functions
link.pathElement?.setAttribute("d", d)
}
@@ -163,6 +163,7 @@ export default class LinkTemplate extends ITemplate {
* @param {LinkMessageElement} linkMessage
*/
applyLinkMessage(link, linkMessage) {
// @ts-expect-error
link.querySelectorAll(linkMessage.constructor.tagName).forEach(element => element.remove())
link.appendChild(linkMessage)
link.linkMessageElement = linkMessage