Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-27 18:54:44 +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

1
js/Blueprint.js
View File

@@ -104,6 +104,7 @@ export default class Blueprint extends GraphElement {
new Select(this.getGridDOMElement(), this, {
clickButton: 0,
exitAnyButton: true,
looseTarget: true,
moveEverywhere: true,
}),
new MouseScrollGraph(this.getGridDOMElement(), this, {

15
js/Configuration.js
View File

@@ -1,10 +1,20 @@
export default class Configuration {
static fontSize = "13px"
static gridSize = "16"
static gridLineWidth = "2px"
static gridLineColor = "#353535"
static gridSet = "8"
static gridSetLineColor = "#161616"
static gridAxisLineColor = "black"
static gridSnap = "16px"
static nodeRadius = "8px"
static deleteNodesKeyboardKey = "Delete"
static expandGridSize = 400
static gridSize = 16
static selectAllKeyboardKey = "Ctrl+A"
static keysSeparator = "+"
static linkMinWidth = "20px"
static linkRightSVGPath = (c1, c2) => `M 0 0 C ${c1} 0, ${c2} 0, 50 50 S ${100 - c1} 100, 100 100`
static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100"
static ModifierKeys = [
"Ctrl",
"Shift",
@@ -12,6 +22,7 @@ export default class Configuration {
"Meta"
]
static Keys = {
/* UE name: JS name */
"Backspace": "Backspace",
"Tab": "Tab",
"Enter": "Enter",

6
js/Utility.js
View File

@@ -10,6 +10,12 @@ export default class Utility {
return getComputedStyle(element).getPropertyValue("--ueb-scale")
}
/**
*
* @param {Number[]} viewportLocation
* @param {HTMLElement} movementElement
* @returns
*/
static convertLocation(viewportLocation, movementElement) {
const scaleCorrection = 1 / Utility.getScale(movementElement)
const targetOffset = movementElement.getBoundingClientRect()

11
js/graph/GraphLink.js
View File

@@ -6,7 +6,6 @@ import LinkTemplate from "../template/LinkTemplate"
* @typedef {import("./GraphPin").default} GraphPin
*/
export default class GraphLink extends GraphElement {
/** @type {GraphPin} */
#source
/** @type {GraphPin} */
@@ -23,7 +22,11 @@ export default class GraphLink extends GraphElement {
super({}, new LinkTemplate())
/** @type {import("../template/LinkTemplate").default} */
this.template
/** @type {SVGPathElement} */
this.pathElement = null
this.originatesFromInput = false
this.sourceLocation = [0, 0]
this.destinationLocation = [0, 0]
this.setSourcePin(source)
this.setDestinationPin(destination)
}
@@ -32,14 +35,16 @@ export default class GraphLink extends GraphElement {
if (location == null) {
location = this.#source.template.getLinkLocation(this.#source)
}
this.template.applySourceLocation(this, location)
this.sourceLocation = location
this.template.applySourceLocation(this)
}
setDestinationLocation(location) {
if (location == null) {
location = this.#destination.template.getLinkLocation(this.#destination)
}
this.template.applyDestinationLocation(this, location)
this.destinationLocation = location
this.template.applyDestinationLocation(this)
}

2
js/graph/GraphSelector.js
View File

@@ -16,7 +16,6 @@ export default class GraphSelector extends GraphElement {
* @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element)
*/
startSelecting(initialPosition) {
initialPosition = this.blueprint.compensateTranslation(initialPosition)
this.template.applyStartSelecting(this, initialPosition)
this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction)
}
@@ -26,7 +25,6 @@ export default class GraphSelector extends GraphElement {
* @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element)
*/
doSelecting(finalPosition) {
finalPosition = this.blueprint.compensateTranslation(finalPosition)
this.template.applyDoSelecting(this, finalPosition)
this.selectionModel.selectTo(finalPosition)
}

2
js/input/common/Paste.js
View File

@@ -43,7 +43,7 @@ export default class Paste extends Context {
mousePosition[0] - left,
mousePosition[1] - top,
]
node.addLocation(this.blueprint.compensateTranslation(locationOffset))
node.addLocation(locationOffset)
node.setSelected(true)
node.snapToGrid()
})

5
js/input/mouse/Pointing.js
View File

@@ -14,6 +14,9 @@ export default class Pointing extends Context {
* @returns
*/
locationFromEvent(mouseEvent) {
return Utility.convertLocation([mouseEvent.clientX, mouseEvent.clientY], this.movementSpace)
return this.blueprint.compensateTranslation(
Utility.convertLocation(
[mouseEvent.clientX, mouseEvent.clientY],
this.movementSpace))
}
}

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"
}
}