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

Link hover width fixed

Browse Source
This commit is contained in:
barsdeveloper
2022-03-01 21:43:53 +01:00
parent 979e4bbd10
commit 3fd95a8854
9 changed files with 679 additions and 586 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,8CACA,qBAGJ,aACI,yDACA,kBACA,MACA,OACA,WACA,YACA,iGAKA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI,eAGJ,iBACI,cACA,kBACA,8CACA,aACA,sBACA,gBACA,kBACA,4EACA,sCACA","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,kBACI,mCAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,kBACA,8CACA,aACA,sBACA,gBACA,kBACA,4EACA,sCACA,mBACA","file":"ueblueprint-style.css"}

1168
dist/ueblueprint.js vendored
View File

File diff suppressed because it is too large Load Diff

8
js/element/LinkElement.js
View File

@@ -175,6 +175,14 @@ export default class LinkElement extends IElement {
this.linkMessageElement = null
}
}
startDragging() {
this.template.applyStartDragging(this)
}
finishDragging() {
this.template.applyFinishDragging(this)
}
}
customElements.define(LinkElement.tagName, LinkElement)

17
js/element/PinElement.js
View File

@@ -6,14 +6,23 @@ export default class PinElement extends IElement {
static tagName = "ueb-pin"
/** @type {HTMLElement} */
clickableElement
/** @type {String} */
#color
constructor(entity) {
super(entity, new PinTemplate())
/** @type {import("../entity/PinEntity").default} */
this.entity
/** @type {PinTemplate} */
this.template
/** @type {HTMLElement} */
this.clickableElement = null
}
connectedCallback() {
super.connectedCallback()
this.#color = window.getComputedStyle(this).getPropertyValue("--ueb-node-value-color")
}
createInputObjects() {
@@ -57,6 +66,10 @@ export default class PinElement extends IElement {
return this.clickableElement
}
getColor() {
return this.#color
}
/**
* Returns The exact location where the link originates from or arrives at.
* @returns {Number[]} The location array

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

@@ -42,7 +42,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
startDrag() {
this.link = new LinkElement(this.target, null)
this.link.setLinkMessage(LinkMessageElement.placeNode())
this.blueprint.nodesContainerElement.insertBefore(this.link, this.blueprint.selectorElement.nextElementSibling)
this.blueprint.nodesContainerElement.prepend(this.link)
this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName)
this.#listenedPins.forEach(pin => {
if (pin != this.target) {
@@ -50,6 +50,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
pin.getClickableElement().addEventListener("mouseleave", this.#mouseleaveHandler)
}
})
this.link.startDragging()
}
dragTo(location, movement) {
@@ -66,10 +67,12 @@ export default class MouseCreateLink extends IMouseClickDrag {
link.getSourcePin() == this.target && link.getDestinationPin() == this.enteredPin
|| link.getSourcePin() == this.enteredPin && link.getDestinationPin() == this.target
)) {
this.blueprint.addGraphElement(this.link)
this.link.setDestinationPin(this.enteredPin)
this.link.setLinkMessage(null)
this.blueprint.addGraphElement(this.link)
this.link.finishDragging()
} else {
this.link.finishDragging()
this.link.remove()
}
this.link = null

3
js/template/LinkMessageTemplate.js
View File

@@ -1,6 +1,7 @@
import html from "./html"
import ITemplate from "./ITemplate"
import LinkElement from "../element/LinkElement"
import sanitizeText from "./sanitizeText"
/**
* @typedef {import("../element/LinkMessageElement").default} LinkMessageElement
@@ -14,7 +15,7 @@ export default class LinkMessageTemplate extends ITemplate {
*/
render(linkMessage) {
return html`
<span class="${linkMessage.icon}"></span>
<span class="${sanitizeText(linkMessage.icon)}"></span>
<span class="ueb-link-message"></span>
`
}

40
js/template/LinkTemplate.js
View File

@@ -23,9 +23,13 @@ export default class LinkTemplate extends ITemplate {
* @returns The result html
*/
render(link) {
const uniqueId = crypto.randomUUID()
return html`
<svg version="1.2" baseProfile="tiny" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<path stroke="green" fill="none" vector-effect="non-scaling-stroke" />
<g>
<path id="${uniqueId}" fill="none" vector-effect="non-scaling-stroke" />
<use href="#${uniqueId}" pointer-events="stroke" stroke-width="10" />
</g>
</svg>
`
}
@@ -35,17 +39,39 @@ export default class LinkTemplate extends ITemplate {
* @param {LinkElement} link Element of the graph
*/
apply(link) {
super.apply(link)
link.classList.add("ueb-positioned")
link.pathElement = link.querySelector("path")
if (link.linkMessageElement) {
link.appendChild(link.linkMessageElement)
}
super.apply(link)
link.classList.add("ueb-positioned")
link.pathElement = link.querySelector("path")
}
/**
*
* @param {LinkElement} link element
*/
applyStartDragging(link) {
link.blueprint.dataset.creatingLink = true
const referencePin = link.getSourcePin() ?? link.getDestinationPin()
if (referencePin) {
link.style.setProperty("--ueb-node-value-color", referencePin.getColor())
}
link.classList.add("ueb-link-dragging")
}
/**
*
* @param {LinkElement} link element
*/
applyFinishDragging(link) {
link.blueprint.dataset.creatingLink = false
link.classList.remove("ueb-link-dragging")
}
/**
* Applies the style relative to the source pin location.
* @param {LinkElement} link Link element
* @param {LinkElement} link element
*/
applySourceLocation(link) {
link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "0" : "1")
@@ -88,8 +114,8 @@ export default class LinkTemplate extends ITemplate {
const q = p[1] - a / p[0]
return x => a / x + q
}
const controlPoint = [500, 140]
c2 = Math.min(c2, getMaxC2(c2Decreasing, controlPoint)(width))
const controlPointC2 = [500, 140]
c2 = Math.min(c2, getMaxC2(c2Decreasing, controlPointC2)(width))
const d = Configuration.linkRightSVGPath(start, c1, c2)
// TODO move to CSS when Firefox will support property d
link.pathElement.setAttribute("d", d)

18
scss/ueblueprint-style.scss
View File

@@ -446,22 +446,13 @@ ueb-link svg {
}
ueb-link svg path {
/* flag stating whether or not the width of the link is below threshold or not */
--ueb-width-below-threshold: clamp(
/* min */
0,
/* input */
calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))),
/* max */
1);
transform : skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad));
transform-origin: 0 0;
stroke-width : 2;
transition : stroke-width 0.5s;
stroke: var(--ueb-node-value-color);
}
ueb-link svg path:hover {
ueb-link.ueb-link-dragging svg path,
ueb-link svg g:hover path {
stroke-width: 5;
transition : stroke-width 0.8s;
}
ueb-link-message {
@@ -475,4 +466,5 @@ ueb-link-message {
background : linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
color : var(--ueb-node-value-dim-color);
white-space : nowrap;
z-index : 1000000;
}