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

Fix links message position

Browse Source
This commit is contained in:
barsdeveloper
2022-03-05 22:19:42 +01:00
parent db57e05dc7
commit 08f13748b7
7 changed files with 47 additions and 43 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,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"}
{"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,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,mCACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,sCACA,mBACA","file":"ueblueprint-style.css"}

27
dist/ueblueprint.js vendored
View File

@@ -1722,7 +1722,7 @@ class LinkTemplate extends ITemplate {
* @param {LinkElement} link element
*/
applySourceLocation(link) {
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "0" : "1");
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0");
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]));
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]));
}
@@ -1743,17 +1743,16 @@ class LinkTemplate extends ITemplate {
let start = dx < width // If under minimum width
? (width - dx) / 2 // Start from half the empty space
: 0; // Otherwise start from the beginning
{
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]));
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]));
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`);
}
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]));
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]));
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`);
if (xInverted) {
start += fillRatio * 100;
}
link.style.setProperty("--ueb-start-percentage", `${100 - start}%`);
link.style.setProperty("--ueb-start-percentage", `${start}%`);
const c1
= start
+ (xInverted
@@ -2058,13 +2057,12 @@ class IMouseClickDrag extends IPointing {
// Delegate from now on to self.#mouseMoveHandler
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler);
movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler);
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin);
self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false;
// Do actual actions
self.startDrag();
self.started = true;
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin);
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false;
};
this.#mouseMoveHandler = e => {
@@ -2121,7 +2119,7 @@ class IMouseClickDrag extends IPointing {
clicked(location) {
}
startDrag() {
startDrag(location) {
}
dragTo(location, movement) {
@@ -2503,6 +2501,7 @@ class MouseCreateLink extends IMouseClickDrag {
}
});
this.link.startDragging();
this.link.setDestinationLocation(this.clickedPosition);
}
dragTo(location, movement) {

9
js/input/mouse/IMouseClickDrag.js
View File

@@ -65,13 +65,12 @@ export default class IMouseClickDrag extends IPointing {
// Delegate from now on to self.#mouseMoveHandler
movementListenedElement.removeEventListener("mousemove", self.#mouseStartedMovingHandler)
movementListenedElement.addEventListener("mousemove", self.#mouseMoveHandler)
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin)
self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false
// Do actual actions
self.startDrag()
self.started = true
const dragEvent = self.getEvent(Configuration.trackingMouseEventName.begin)
// Handler calls e.preventDefault() when it receives the event, this means dispatchEvent returns false
self.#trackingMouse = this.target.dispatchEvent(dragEvent) == false
}
this.#mouseMoveHandler = e => {
@@ -128,7 +127,7 @@ export default class IMouseClickDrag extends IPointing {
clicked(location) {
}
startDrag() {
startDrag(location) {
}
dragTo(location, movement) {

1
js/input/mouse/MouseCreateLink.js
View File

@@ -71,6 +71,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
}
})
this.link.startDragging()
this.link.setDestinationLocation(this.clickedPosition)
}
dragTo(location, movement) {

17
js/template/LinkTemplate.js
View File

@@ -86,7 +86,7 @@ export default class LinkTemplate extends ITemplate {
* @param {LinkElement} link element
*/
applySourceLocation(link) {
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "0" : "1")
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0")
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
}
@@ -107,17 +107,16 @@ export default class LinkTemplate extends ITemplate {
let start = dx < width // If under minimum width
? (width - dx) / 2 // Start from half the empty space
: 0 // Otherwise start from the beginning
{
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
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`)
}
link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0]))
link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1]))
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`)
if (xInverted) {
start += fillRatio * 100
}
link.style.setProperty("--ueb-start-percentage", `${100 - start}%`)
link.style.setProperty("--ueb-start-percentage", `${start}%`)
const c1
= start
+ (xInverted

32
scss/ueblueprint-style.scss
View File

@@ -424,27 +424,27 @@ ueb-selector>* {
}
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);
display : block;
min-width : calc(var(--ueb-link-min-width) * 1px);
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
/* when from-y > to-y */
--ueb-y-opposite : clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);
display : block;
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;
visibility : hidden;
}
ueb-link svg {
--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);
--ueb-y-direct-coefficient : calc(2* var(--ueb-y-direct) - 1);
--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100%;
min-height : 1px;
transform : scaleY(calc(var(--ueb-y-direct-coefficient) * var(--ueb-from-input-coefficient)));
transform : scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
overflow : visible;
}
@@ -461,11 +461,17 @@ ueb-link svg g:hover path {
}
ueb-link-message {
display : block;
visibility : visible;
position : absolute;
top : calc(100% * var(--ueb-y-direct) + 22px);
left : calc(var(--ueb-start-percentage) + 15px);
display : block;
visibility: visible;
position : absolute;
top : calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
left : calc(
/* If originates from an output pin, start with 100% */
(1 - var(--ueb-from-input)) * 100%
/* If originates from an input pin, then sum, otherwise subtract */
+ (var(--ueb-from-input-coefficient)) * var(--ueb-start-percentage)
/* Fixed offset */
+ 15px);
border : 1px solid #000;
padding : 4px 8px;
border-radius: 2px;