Links various fixes

This commit is contained in:
barsdeveloper
2022-03-03 23:09:18 +01:00
parent 2d2af6f097
commit db57e05dc7
5 changed files with 40 additions and 28 deletions

File diff suppressed because one or more lines are too long

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,8CAGJ,aACI,yDACA,kBACA,MACA,OACA,WACA,YACA,iGAKA,iBAGJ,kBACI,mCAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,kBACA,8CACA,aACA,sBACA,gBACA,kBACA,4EACA,sCACA,mBACA","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,qEACA,+DACA,cACA,8CAKA,kBAGJ,aACI,kEACA,6DACA,kBACA,MACA,OACA,WACA,YACA,eACA,4FACA,iBAGJ,kBACI,mBACA,mCACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,0CACA,8CACA,sBACA,gBACA,kBACA,4EACA,sCACA,mBACA","file":"ueblueprint-style.css"}

22
dist/ueblueprint.js vendored
View File

@@ -2449,18 +2449,23 @@ class MouseCreateLink extends IMouseClickDrag {
/** @type {(e: MouseEvent) => void} */ /** @type {(e: MouseEvent) => void} */
#mouseleaveHandler #mouseleaveHandler
/** @type {LinkElement} */
link
/** @type {PinElement} */
enteredPin
linkValid = false
constructor(target, blueprint, options) { constructor(target, blueprint, options) {
super(target, blueprint, options); super(target, blueprint, options);
/** @type {PinElement} */ /** @type {PinElement} */
this.target; this.target;
/** @type {LinkElement} */
this.link;
/** @type {PinElement} */
this.enteredPin;
let self = this; let self = this;
this.#mouseenterHandler = e => { this.#mouseenterHandler = e => {
if (!self.enteredPin) { if (!self.enteredPin) {
self.linkValid = false;
self.enteredPin = e.target; self.enteredPin = e.target;
const a = self.enteredPin, b = self.target; const a = self.enteredPin, b = self.target;
if (a.getNodeElement() == b.getNodeElement()) { if (a.getNodeElement() == b.getNodeElement()) {
@@ -2471,14 +2476,17 @@ class MouseCreateLink extends IMouseClickDrag {
this.setLinkMessage(LinkMessageElement.directionsIncompatible()); this.setLinkMessage(LinkMessageElement.directionsIncompatible());
} else if (self.blueprint.getLinks([a, b]).length) { } else if (self.blueprint.getLinks([a, b]).length) {
this.setLinkMessage(LinkMessageElement.replaceLink()); this.setLinkMessage(LinkMessageElement.replaceLink());
self.linkValid = true;
} else { } else {
this.setLinkMessage(LinkMessageElement.correct()); this.setLinkMessage(LinkMessageElement.correct());
self.linkValid = true;
} }
} }
}; };
this.#mouseleaveHandler = e => { this.#mouseleaveHandler = e => {
if (self.enteredPin == e.target) { if (self.enteredPin == e.target) {
self.enteredPin = null; self.enteredPin = null;
self.linkValid = false;
this.setLinkMessage(LinkMessageElement.placeNode()); this.setLinkMessage(LinkMessageElement.placeNode());
} }
}; };
@@ -2506,11 +2514,7 @@ class MouseCreateLink extends IMouseClickDrag {
pin.removeEventListener("mouseenter", this.#mouseenterHandler); pin.removeEventListener("mouseenter", this.#mouseenterHandler);
pin.removeEventListener("mouseleave", this.#mouseleaveHandler); pin.removeEventListener("mouseleave", this.#mouseleaveHandler);
}); });
if (this.enteredPin && !this.blueprint.getLinks().find( if (this.enteredPin) {
link =>
link.getSourcePin() == this.target && link.getDestinationPin() == this.enteredPin
|| link.getSourcePin() == this.enteredPin && link.getDestinationPin() == this.target
)) {
this.blueprint.addGraphElement(this.link); this.blueprint.addGraphElement(this.link);
this.link.setDestinationPin(this.enteredPin); this.link.setDestinationPin(this.enteredPin);
this.link.setLinkMessage(null); this.link.setLinkMessage(null);

View File

@@ -33,7 +33,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
let self = this let self = this
this.#mouseenterHandler = e => { this.#mouseenterHandler = e => {
if (!self.enteredPin) { if (!self.enteredPin) {
linkValid = false self.linkValid = false
self.enteredPin = e.target self.enteredPin = e.target
const a = self.enteredPin, b = self.target const a = self.enteredPin, b = self.target
if (a.getNodeElement() == b.getNodeElement()) { if (a.getNodeElement() == b.getNodeElement()) {
@@ -44,16 +44,17 @@ export default class MouseCreateLink extends IMouseClickDrag {
this.setLinkMessage(LinkMessageElement.directionsIncompatible()) this.setLinkMessage(LinkMessageElement.directionsIncompatible())
} else if (self.blueprint.getLinks([a, b]).length) { } else if (self.blueprint.getLinks([a, b]).length) {
this.setLinkMessage(LinkMessageElement.replaceLink()) this.setLinkMessage(LinkMessageElement.replaceLink())
linkValid = true self.linkValid = true
} else { } else {
this.setLinkMessage(LinkMessageElement.correct()) this.setLinkMessage(LinkMessageElement.correct())
linkValid = true self.linkValid = true
} }
} }
} }
this.#mouseleaveHandler = e => { this.#mouseleaveHandler = e => {
if (self.enteredPin == e.target) { if (self.enteredPin == e.target) {
self.enteredPin = null self.enteredPin = null
self.linkValid = false
this.setLinkMessage(LinkMessageElement.placeNode()) this.setLinkMessage(LinkMessageElement.placeNode())
} }
} }

View File

@@ -424,28 +424,34 @@ ueb-selector>* {
} }
ueb-link { ueb-link {
--ueb-y-direct : clamp(0, var(--ueb-to-y) - var(--ueb-from-y) + 1, 1);
--ueb-computed-width-px: calc(var(--ueb-computed-width) * 1px); --ueb-computed-width-px: calc(var(--ueb-computed-width) * 1px);
display : block; display : block;
min-width : calc(var(--ueb-link-min-width) * 1px); min-width : calc(var(--ueb-link-min-width) * 1px);
/*
* This makes the element transparent to the hover events so that multiple path elements can stand nearby and have
* their hover behavior correctly firing.
*/
visibility : hidden;
} }
ueb-link svg { ueb-link svg {
--ueb-output-invert: calc(2 * var(--ueb-from-input) - 1); --ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
position : absolute; --ueb-y-direct-coefficient : calc(2* var(--ueb-y-direct) - 1);
top : 0; position : absolute;
left : 0; top : 0;
width : 100%; left : 0;
height : 100%; width : 100%;
transform : scaleY(clamp( height : 100%;
/* Mirror just when it starts from output */ min-height : 1px;
-1, transform : scaleY(calc(var(--ueb-y-direct-coefficient) * var(--ueb-from-input-coefficient)));
calc((var(--ueb-to-y) - var(--ueb-from-y)) * var(--ueb-output-invert)), overflow : visible;
1));
overflow: visible;
} }
ueb-link svg path { ueb-link svg path {
stroke: var(--ueb-node-value-color); visibility : visible;
stroke : var(--ueb-node-value-color);
stroke-width: 1;
} }
ueb-link.ueb-link-dragging svg path, ueb-link.ueb-link-dragging svg path,
@@ -456,9 +462,10 @@ ueb-link svg g:hover path {
ueb-link-message { ueb-link-message {
display : block; display : block;
visibility : visible;
position : absolute; position : absolute;
top : calc(100% * var(--ueb-y-direct) + 22px);
left : calc(var(--ueb-start-percentage) + 15px); left : calc(var(--ueb-start-percentage) + 15px);
bottom : -42px;
border : 1px solid #000; border : 1px solid #000;
padding : 4px 8px; padding : 4px 8px;
border-radius: 2px; border-radius: 2px;