Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-04 08:50:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Link path fixed

Browse Source
This commit is contained in:
barsdeveloper
2022-02-13 00:54:02 +01:00
parent 785f9d1846
commit 7cf556d89d
8 changed files with 62 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/ueblueprint-style.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueblueprint-style.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,aACA,gBACA,qBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,sBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,mDACI,eAGJ,sFACI,4CACA,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBAGJ,SACI,+DACA,cACA,8CAIJ,aACI,0DACA,kBACA,MACA,OACA,WACA,YACA,iGAKA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI","file":"ueblueprint-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,aACA,gBACA,qBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,sBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,mDACI,eAGJ,sFACI,4CACA,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBAGJ,SACI,+DACA,cACA,8CACA,qBAGJ,aACI,yDACA,kBACA,MACA,OACA,WACA,YACA,iGAKA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI","file":"ueblueprint-style.css"}

44
dist/ueblueprint.js vendored
View File

@@ -9,8 +9,9 @@ class Configuration {
static gridSetLineColor = "#161616"
static gridSize = 16 // in pixel
static keysSeparator = "+"
static linkCurveOffset = 20
static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100"
static linkMinWidth = 128 // in pixel
static linkMinWidth = 100 // in pixel
static linkRightSVGPath = (start, c1, c2) => {
const endPoint = 100 - start;
return `M ${start} 0 C ${c1} 0, ${c2} 0, 50 50 S ${endPoint - c1 + start} 100, ${endPoint} 100`
@@ -770,6 +771,11 @@ class TypeInitialization {
}
class Utility {
static sigmoid(x, curvature = 1.7) {
return 1 / (1 + (x / Math.pow(1 - x, -curvature)))
}
static clamp(val, min, max) {
return Math.min(Math.max(val, min), max)
}
@@ -1512,7 +1518,7 @@ 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 stroke="black" fill="none" vector-effect="non-scaling-stroke" />
<path stroke="green" fill="none" vector-effect="non-scaling-stroke" />
</svg>
`
}
@@ -1532,7 +1538,7 @@ class LinkTemplate extends Template {
* @param {GraphLink} link Link element
*/
applySourceLocation(link) {
link.style.setProperty("--ueb-from-output", link.originatesFromOutput ? "0" : "1");
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "0" : "1");
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]));
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]));
}
@@ -1542,24 +1548,28 @@ class LinkTemplate extends Template {
* @param {GraphLink} link Link element
*/
applyDestinationLocation(link) {
const dx = Math.abs(link.sourceLocation[0] - link.destinationLocation[0]);
const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1);
const width = Math.max(dx, Configuration.linkMinWidth);
const height = Math.abs(link.sourceLocation[1] - link.destinationLocation[1]);
const ratio = Math.max(width, 1) / Math.max(height, 1);
let start = dx < width ? (width - dx) / width * 100 / 2 : 0;
const fillRatio = dx / width;
const aspectRatio = Math.max(width, 1) / Math.max(height, 1);
let start = dx < width
? (width - dx) / width * 100 / 2
: 0;
link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]));
link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]));
link.style.setProperty("margin-left", `-${start}px`);
const xInverted = link.destinationLocation[0] < link.sourceLocation[0];
if (xInverted) {
if (dx < width) {
start = start + dx / width * 100;
} else {
start = 100;
}
let c1 = 20;
const xInverted = link.originatesFromInput
? link.sourceLocation[0] < link.destinationLocation[0]
: link.destinationLocation[0] < link.sourceLocation[0];
if (!xInverted) {
c1 = start + c1 * fillRatio;
} else {
start = start + fillRatio * 100;
c1 = start + c1 * fillRatio * 100 / width;
}
const c1 = start + 20;
const c2 = Math.max(40 / ratio, 30) + start * 1.5;
const c2 = Math.max(40 / aspectRatio, 30) + start * 1.5;
const d = Configuration.linkRightSVGPath(start, c1, c2);
// TODO move to CSS when Firefox will support property d
link.pathElement.setAttribute("d", d);
@@ -1588,7 +1598,7 @@ class GraphLink extends GraphElement {
this.template;
/** @type {SVGPathElement} */
this.pathElement = null;
this.originatesFromOutput = false;
this.originatesFromInput = false;
this.sourceLocation = [0, 0];
this.destinationLocation = [0, 0];
this.setSourcePin(source);
@@ -1623,7 +1633,7 @@ class GraphLink extends GraphElement {
this.#source?.removeEventListener("ueb-node-delete", this.#nodeDeleteHandler);
this.#source?.removeEventListener("ueb-node-drag", this.#nodeDragSourceHandler);
this.#source = graphPin;
this.originatesFromOutput = graphPin.isInput();
this.originatesFromInput = graphPin.isInput();
this.#source?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler);
this.#source?.addEventListener("ueb-node-drag", this.#nodeDragSourceHandler);
this.setSourceLocation();

3
js/Configuration.js
View File

@@ -9,8 +9,9 @@ export default class Configuration {
static gridSetLineColor = "#161616"
static gridSize = 16 // in pixel
static keysSeparator = "+"
static linkCurveOffset = 20
static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100"
static linkMinWidth = 128 // in pixel
static linkMinWidth = 100 // in pixel
static linkRightSVGPath = (start, c1, c2) => {
const endPoint = 100 - start
return `M ${start} 0 C ${c1} 0, ${c2} 0, 50 50 S ${endPoint - c1 + start} 100, ${endPoint} 100`

5
js/Utility.js
View File

@@ -2,6 +2,11 @@ import Configuration from "./Configuration"
import TypeInitialization from "./entity/TypeInitialization"
export default class Utility {
static sigmoid(x, curvature = 1.7) {
return 1 / (1 + (x / Math.pow(1 - x, -curvature)))
}
static clamp(val, min, max) {
return Math.min(Math.max(val, min), max)
}

4
js/graph/GraphLink.js
View File

@@ -24,7 +24,7 @@ export default class GraphLink extends GraphElement {
this.template
/** @type {SVGPathElement} */
this.pathElement = null
this.originatesFromOutput = false
this.originatesFromInput = false
this.sourceLocation = [0, 0]
this.destinationLocation = [0, 0]
this.setSourcePin(source)
@@ -59,7 +59,7 @@ 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.originatesFromOutput = graphPin.isInput()
this.originatesFromInput = graphPin.isInput()
this.#source?.addEventListener("ueb-node-delete", this.#nodeDeleteHandler)
this.#source?.addEventListener("ueb-node-drag", this.#nodeDragSourceHandler)
this.setSourceLocation()

33
js/template/LinkTemplate.js
View File

@@ -2,6 +2,7 @@ import html from "./html"
import sanitizeText from "./sanitizeText"
import Template from "./Template"
import Configuration from "../Configuration"
import Utility from "../Utility"
/**
* @typedef {import("../graph/GraphLink").default} GraphLink
@@ -16,7 +17,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 stroke="black" fill="none" vector-effect="non-scaling-stroke" />
<path stroke="green" fill="none" vector-effect="non-scaling-stroke" />
</svg>
`
}
@@ -36,7 +37,7 @@ export default class LinkTemplate extends Template {
* @param {GraphLink} link Link element
*/
applySourceLocation(link) {
link.style.setProperty("--ueb-from-output", link.originatesFromOutput ? "0" : "1")
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "0" : "1")
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
}
@@ -46,24 +47,28 @@ export default class LinkTemplate extends Template {
* @param {GraphLink} link Link element
*/
applyDestinationLocation(link) {
const dx = Math.abs(link.sourceLocation[0] - link.destinationLocation[0])
const dx = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1)
const width = Math.max(dx, Configuration.linkMinWidth)
const height = Math.abs(link.sourceLocation[1] - link.destinationLocation[1])
const ratio = Math.max(width, 1) / Math.max(height, 1)
let start = dx < width ? (width - dx) / width * 100 / 2 : 0
const fillRatio = dx / width
const aspectRatio = Math.max(width, 1) / Math.max(height, 1)
let start = dx < width
? (width - dx) / width * 100 / 2
: 0
link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0]))
link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1]))
link.style.setProperty("margin-left", `-${start}px`)
const xInverted = link.destinationLocation[0] < link.sourceLocation[0]
if (xInverted) {
if (dx < width) {
start = start + dx / width * 100
} else {
start = 100
}
let c1 = 20
const xInverted = link.originatesFromInput
? link.sourceLocation[0] < link.destinationLocation[0]
: link.destinationLocation[0] < link.sourceLocation[0]
if (!xInverted) {
c1 = start + c1 * fillRatio
} else {
start = start + fillRatio * 100
c1 = start + c1 * fillRatio * 100 / width
}
const c1 = start + 20
const c2 = Math.max(40 / ratio, 30) + start * 1.5
const c2 = Math.max(40 / aspectRatio, 30) + start * 1.5
const d = Configuration.linkRightSVGPath(start, c1, c2)
// TODO move to CSS when Firefox will support property d
link.pathElement.setAttribute("d", d)

10
scss/ueblueprint-style.scss
View File

@@ -424,14 +424,14 @@ ueb-selector>* {
}
ueb-link {
--ueb-computed-width-px : calc(var(--ueb-computed-width) * 1px);
display : block;
min-width : calc(var(--ueb-link-min-width) * 1px);
// border : 1px solid red;
--ueb-computed-width-px: calc(var(--ueb-computed-width) * 1px);
display : block;
min-width : calc(var(--ueb-link-min-width) * 1px);
border : 1px solid red;
}
ueb-link svg {
--ueb-output-invert: calc(2 * var(--ueb-from-output) - 1);
--ueb-output-invert: calc(2 * var(--ueb-from-input) - 1);
position : absolute;
top : 0;
left : 0;