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

Svg links implementation WIP

Browse Source
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
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.css"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,MACI,sBACA,6BACA,2BACA,sBACA,2BACA,+BACA,kBACA,mCACA,kCACA,sBACA,uBAGJ,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,8BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,kCACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,oCACI,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,4DACA,sBAGJ,iFACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,iCACA,qCACA,8BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,YACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,qCACI,eAGJ,+FACI,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,2CAEI,mBACA,mDACA,oDACA,6FACA,8FAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,eACI,mBAGJ,SACI,cACA,kBACA","file":"ueblueprint-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-style.css"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,MACI,sBACA,6BACA,2BACA,sBACA,2BACA,+BACA,kBACA,mCACA,kCACA,sBACA,uBAGJ,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,8BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,kCACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,oCACI,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,4DACA,sBAGJ,iFACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,iCACA,qCACA,8BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,YACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,qCACI,eAGJ,+FACI,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,2CAEI,mBACA,mDACA,oDACA,6FACA,8FAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,eACI,mBAGJ,SACI,cACA,kBACA,qBAGJ,aACI,WACA,YACA,sHAKA,iBAGJ,kBACI,6BAEA,2BACA,uEACA,sGACA,qIACA,4FACA","file":"ueblueprint-style.css"}

20
dist/ueblueprint.js vendored
View File

@@ -1062,15 +1062,11 @@ class PinEntity$1 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() {
@@ -1486,8 +1482,8 @@ 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>
`
}
@@ -1505,6 +1501,7 @@ 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]));
@@ -1541,6 +1538,7 @@ class GraphLink extends GraphElement {
super({}, new LinkTemplate());
/** @type {import("../template/LinkTemplate").default} */
this.template;
this.originatesFromInput = false;
this.setSourcePin(source);
this.setDestinationPin(destination);
}
@@ -1571,10 +1569,10 @@ 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() {
@@ -1591,7 +1589,6 @@ 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;
}
}
@@ -1627,7 +1624,8 @@ 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;
}

8
js/entity/PinEntity.js
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() {

4
js/graph/GraphLink.js
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
}
}

5
js/template/LinkTemplate.js
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]))

3
js/template/PinTemplate.js
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
}

23
scss/ueblueprint-style.css
View File

@@ -432,4 +432,27 @@ ueb-link {
display : block;
position : absolute;
border : 2px solid red;
}
ueb-link svg {
width : 100%;
height : 100%;
transform : scale(
/* x */
clamp(-1, calc(var(--ueb-to-x) - var(--ueb-from-x)), 1),
/* y */
clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1));
overflow : visible;
}
ueb-link svg path {
--value : clamp(0, calc(), 1);
/* Taylor expansion of arcsin around 0 */
--asin-term1 : var(--value);
--asin-term2 : calc(1 / 6 * var(--value) * var(--value) * var(--value));
--asin-term3 : calc(3 / 40 * var(--value) * var(--value) * var(--value) * var(--value) * var(--value));
--asin-term4 : calc(5 / 112 * var(--value) * var(--value) * var(--value) * var(--value) * var(--value) * var(--value) * var(--value));
--asin : calc(var(--asin-term1) + var(--asin-term2) + var(--asin-term3) + var(--asin-term4));
transform : skewX(calc(1rad * var(--asin)));
}