Svg links implementation WIP

This commit is contained in:
barsdeveloper
2022-01-23 15:41:56 +01:00
parent e90277826d
commit e4ff5efc80
8 changed files with 43 additions and 24 deletions

View File

@@ -43,15 +43,11 @@ export default class PinEntity extends Entity {
}
isInput() {
if (!this.bHidden && this.Direction !== "EGPD_Output") {
return true
}
return !this.bHidden && this.Direction !== "EGPD_Output"
}
isOutput() {
if (!this.bHidden && this.Direction === "EGPD_Output") {
return true
}
return !this.bHidden && this.Direction === "EGPD_Output"
}
isConnected() {

View File

@@ -23,6 +23,7 @@ export default class GraphLink extends GraphElement {
super({}, new LinkTemplate())
/** @type {import("../template/LinkTemplate").default} */
this.template
this.originatesFromInput = false
this.setSourcePin(source)
this.setDestinationPin(destination)
}
@@ -53,10 +54,10 @@ export default class GraphLink extends GraphElement {
this.#source?.removeEventListener("ueb-node-delete", this.#nodeDeleteHandler)
this.#source?.removeEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
this.#source = graphPin
this.originatesFromInput = graphPin.isInput()
this.#source?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler)
this.#source?.addEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
this.setSourceLocation()
this.originatesFromInput = this.#destination == null
}
getDestinationPin() {
@@ -73,7 +74,6 @@ export default class GraphLink extends GraphElement {
this.#destination = graphPin
this.#destination?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler)
this.#destination?.addEventListener("ueb-node-drag", this.#nodeDragDestinatonHandler)
this.originatesFromInput = false
}
}

View File

@@ -14,8 +14,8 @@ export default class LinkTemplate extends Template {
*/
render(link) {
return html`
<svg viewBox="0 0 100 100">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
<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" />
</svg>
`
}
@@ -33,6 +33,7 @@ export default class LinkTemplate extends Template {
* @param {GraphLink} link Link element
*/
applySourceLocation(link, initialPosition) {
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]))

View File

@@ -33,7 +33,8 @@ export default class PinTemplate extends Template {
*/
apply(pin) {
super.apply(pin)
pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText(pin.getType()))
pin.classList.add(
"ueb-node-" + (pin.isInput() ? "input" : pin.isOutput() ? "output" : "hidden"), "ueb-node-value-" + sanitizeText(pin.getType()))
pin.clickableElement = pin
}