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

Various fixes

Browse Source
This commit is contained in:
barsdeveloper
2022-02-07 22:41:49 +01:00
parent b2c3ba14f3
commit c33e36ffe1
16 changed files with 684 additions and 622 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
js/template/BlueprintTemplate.js
View File

@@ -1,3 +1,4 @@
import Configuration from "../Configuration"
import GraphSelector from "../graph/GraphSelector"
import html from "./html"
import sanitizeText from "./sanitizeText"
@@ -60,6 +61,17 @@ export default class BlueprintTemplate extends Template {
apply(blueprint) {
super.apply(blueprint)
blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`)
Object.entries({
"--ueb-font-size": sanitizeText(Configuration.fontSize),
"--ueb-grid-size": `calc(${sanitizeText(Configuration.gridSize)} * 1px)`,
"--ueb-grid-line-width": sanitizeText(Configuration.gridLineWidth),
"--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-grid-snap": sanitizeText(Configuration.gridSnap),
"--ueb-node-radius": sanitizeText(Configuration.nodeRadius)
}).forEach(entry => blueprint.style.setProperty(entry[0], entry[1]))
blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body')
@@ -102,7 +114,7 @@ export default class BlueprintTemplate extends Template {
* @param {Blueprint} blueprint The blueprint element
*/
applyStartDragScrolling(blueprint) {
blueprint.gridElement.dataset.dragScrolling = true
blueprint.dataset.dragScrolling = true
}
/**
@@ -110,6 +122,6 @@ export default class BlueprintTemplate extends Template {
* @param {Blueprint} blueprint The blueprint element
*/
applyEndDragScrolling(blueprint) {
blueprint.gridElement.dataset.dragScrolling = false
blueprint.dataset.dragScrolling = false
}
}

24
js/template/LinkTemplate.js
View File

@@ -1,6 +1,7 @@
import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
import Configuration from "../Configuration"
/**
* @typedef {import("../graph/GraphLink").default} GraphLink
@@ -15,7 +16,7 @@ export default class LinkTemplate extends Template {
render(link) {
return html`
<svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path d="M 0 0 C 20 0, 30 0, 50 50 S 70 100, 100 100" stroke="black" stroke-width="2" fill="none" vector-effect="non-scaling-stroke" />
<path stroke="black" fill="none" vector-effect="non-scaling-stroke" />
</svg>
`
}
@@ -27,28 +28,31 @@ export default class LinkTemplate extends Template {
apply(link) {
super.apply(link)
link.classList.add("ueb-positioned")
link.pathElement = link.querySelector("path")
}
/**
* Applies the style relative to the source pin location.
* @param {GraphLink} link Link element
*/
applySourceLocation(link, initialPosition) {
applySourceLocation(link) {
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
// Set initial position
link.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1]))
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
}
/**
* Applies the style relative to the destination pin location.
* @param {GraphLink} link Link element
*/
applyDestinationLocation(link, finalPosition) {
link.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0]))
link.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1]))
const height = Math.abs(link.style.getPropertyValue("--ueb-from-y") - finalPosition[1])
let skew = Math.atan(height / (finalPosition[0] - link.style.getPropertyValue("--ueb-from-x"))) - Math.PI / 2
link.style.setProperty("--ueb-link-skew", skew)
applyDestinationLocation(link) {
link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]))
link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]))
const r = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
/ Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1)
const d = Configuration.linkRightSVGPath(20, Math.max(40 / r, 30))
// TODO move to CSS when Firefox will support property d
link.pathElement.setAttribute("d", d)
}
}

4
js/template/PinTemplate.js
View File

@@ -45,8 +45,8 @@ export default class PinTemplate extends Template {
*/
getLinkLocation(pin) {
const rect = pin.querySelector(".ueb-node-value-icon").getBoundingClientRect()
return Utility.convertLocation(
return pin.blueprint.compensateTranslation(Utility.convertLocation(
[(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2],
pin.blueprint.gridElement)
pin.blueprint.gridElement))
}
}

4
js/template/SelectorTemplate.js
View File

@@ -27,7 +27,7 @@ export default class SelectorTemplate extends Template {
// Final position coincide with the initial position, at the beginning of selection
selector.style.setProperty("--ueb-to-x", sanitizeText(initialPosition[0]))
selector.style.setProperty("--ueb-to-y", sanitizeText(initialPosition[1]))
selector.dataset.selecting = "true"
selector.blueprint.dataset.selecting = "true"
}
/**
@@ -44,6 +44,6 @@ export default class SelectorTemplate extends Template {
* @param {GraphSelector} selector Selector element
*/
applyFinishSelecting(selector) {
selector.dataset.selecting = "false"
selector.blueprint.dataset.selecting = "false"
}
}