Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-05-14 07:47:29 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Move style related actions to templates

Browse Source
This commit is contained in:
barsdeveloper
2021-12-10 21:05:44 +01:00
parent 7bc0f4e2f2
commit 6b02ab7e08
19 changed files with 2693 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
js/template/BlueprintTemplate.js
View File

@@ -1,6 +1,10 @@
import Blueprint from "../Blueprint"
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
import GraphSelector from "../graph/GraphSelector"
/** @typedef {import("../Blueprint").default} Blueprint */
export default class BlueprintTemplate extends Template {
header(element) {
return html`
@@ -18,14 +22,19 @@ export default class BlueprintTemplate extends Template {
/**
*
* @param {import("../Blueprint").Blueprint} element
* @param {Blueprint} element
* @returns
*/
viewport(element) {
return html`
<div class="ueb-viewport-body">
<div class="ueb-grid"
style="--ueb-additional-x:${element.additional[0]}; --ueb-additional-y:${element.additional[1]}; --ueb-translate-x:${element.translateValue[0]}; --ueb-translate-y:${element.translateValue[1]}">
style="
--ueb-additional-x:${sanitizeText(element.additional[0])};
--ueb-additional-y:${sanitizeText(element.additional[1])};
--ueb-translate-x:${sanitizeText(element.translateValue[0])};
--ueb-translate-y:${sanitizeText(element.translateValue[1])};
">
<div class="ueb-grid-content" data-nodes></div>
</div>
</div>
@@ -44,4 +53,47 @@ export default class BlueprintTemplate extends Template {
${this.viewport(element)}
`
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
apply(blueprint) {
super.apply(blueprint)
blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body')
blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
blueprint.selectorElement = new GraphSelector()
blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.nodes)
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
applyZoom(blueprint, newZoom) {
blueprint.classList.remove(`ueb-zoom-${blueprint.zoom}`)
blueprint.classList.add(`ueb-zoom-${newZoom}`)
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
applyExpand(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-additional-x", blueprint.additional[0])
blueprint.gridElement.style.setProperty("--ueb-additional-y", blueprint.additional[1])
}
/**
* Applies the style to the element.
* @param {Blueprint} brueprint The blueprint element
*/
applyTranlate(blueprint) {
blueprint.gridElement.style.setProperty("--ueb-translate-x", blueprint.translateValue[0])
blueprint.gridElement.style.setProperty("--ueb-translate-y", blueprint.translateValue[1])
}
}