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

Various fixes to links

Browse Source
This commit is contained in:
barsdeveloper
2022-03-02 22:55:05 +01:00
parent 525b4188dc
commit 2d2af6f097
11 changed files with 115 additions and 35 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,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,+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"}

61
dist/ueblueprint.js vendored
View File

@@ -482,6 +482,8 @@ class FastSelectionModel {
class IElement extends HTMLElement {
static tagName = ""
/**
*
* @param {IEntity} entity The entity containing blueprint related data for this graph element
@@ -1643,10 +1645,10 @@ class KeyboardSelectAll extends IKeyboardShortcut {
*/
class LinkTemplate extends ITemplate {
static c1DecreasingSpeed = -0.15
static c1DecreasingSpeed = -0.1
static c1ControlPoint = [100, 15]
static c2DecreasingSpeed = -0.06
static c2ControlPoint = [500, 140]
static c2DecreasingSpeed = -0.07
static c2ControlPoint = [500, 130]
/**
* Returns the value of inverse multiplication function y = a / x + q. The value of a and q are calculated using
@@ -1685,10 +1687,10 @@ class LinkTemplate extends ITemplate {
* @param {LinkElement} link Element of the graph
*/
apply(link) {
super.apply(link);
if (link.linkMessageElement) {
link.appendChild(link.linkMessageElement);
}
super.apply(link);
link.classList.add("ueb-positioned");
link.pathElement = link.querySelector("path");
}
@@ -1762,13 +1764,13 @@ class LinkTemplate extends ITemplate {
: 15
)
* fillRatio;
let c2 = Math.max(40 / aspectRatio, 30) + start;
let c2 = Math.max(25 / aspectRatio, 30) + start;
c2 = Math.min(
c2,
LinkTemplate.decreasingValue(
LinkTemplate.c2DecreasingSpeed,
LinkTemplate.c2ControlPoint
)(width)
)(dx)
);
const d = Configuration.linkRightSVGPath(start, c1, c2);
// TODO move to CSS when Firefox will support property d
@@ -2357,11 +2359,16 @@ class LinkMessageTemplate extends ITemplate {
*/
apply(linkMessage) {
super.apply(linkMessage);
linkMessage.linkElement = linkMessage.closest(LinkElement.tagName);
linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message(
const linkMessageSetup = _ => linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message(
linkMessage.linkElement.getSourcePin(),
linkMessage.linkElement.getDestinationPin()
);
linkMessage.linkElement = linkMessage.closest(LinkElement.tagName);
if (linkMessage.linkElement) {
linkMessageSetup();
} else {
window.customElements.whenDefined(linkMessage.constructor.tagName).then(linkMessage);
}
}
}
@@ -2379,6 +2386,11 @@ class LinkMessageElement extends IElement {
/** @type {LinkRetrieval} */
(s, d) => `Convert ${s.getType()} to ${d.getType()}.`
)
static correct = _ => new LinkMessageElement(
"ueb-icon-correct",
/** @type {LinkRetrieval} */
(s, d) => ""
)
static directionsIncompatible = _ => new LinkMessageElement(
"ueb-icon-directions-incompatible",
/** @type {LinkRetrieval} */
@@ -2450,19 +2462,31 @@ class MouseCreateLink extends IMouseClickDrag {
this.#mouseenterHandler = e => {
if (!self.enteredPin) {
self.enteredPin = e.target;
const a = self.enteredPin, b = self.target;
if (a.getNodeElement() == b.getNodeElement()) {
this.setLinkMessage(LinkMessageElement.sameNode());
} else if (a.isOutput() == b.isOutput()) {
this.setLinkMessage(LinkMessageElement.directionsIncompatible());
} else if (a.isOutput() == b.isOutput()) {
this.setLinkMessage(LinkMessageElement.directionsIncompatible());
} else if (self.blueprint.getLinks([a, b]).length) {
this.setLinkMessage(LinkMessageElement.replaceLink());
} else {
this.setLinkMessage(LinkMessageElement.correct());
}
}
};
this.#mouseleaveHandler = e => {
if (self.enteredPin == e.target) {
self.enteredPin = null;
this.setLinkMessage(LinkMessageElement.placeNode());
}
};
}
startDrag() {
this.link = new LinkElement(this.target, null);
this.link.setLinkMessage(LinkMessageElement.placeNode());
this.blueprint.nodesContainerElement.prepend(this.link);
this.setLinkMessage(LinkMessageElement.placeNode());
this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName);
this.#listenedPins.forEach(pin => {
if (pin != this.target) {
@@ -2495,8 +2519,14 @@ class MouseCreateLink extends IMouseClickDrag {
this.link.finishDragging();
this.link.remove();
}
this.enteredPin = null;
this.link = null;
}
setLinkMessage(linkMessage) {
this.link.setLinkMessage(linkMessage);
this.blueprint.nodesContainerElement.prepend(this.link);
}
}
/**
@@ -3219,7 +3249,16 @@ class Blueprint extends IElement {
* Returns the list of links in this blueprint.
* @returns {LinkElement[]} Nodes
*/
getLinks() {
getLinks([a, b] = []) {
if (a == null != b == null) {
const pin = a ?? b;
return this.links.filter(link => link.getSourcePin() == pin || link.getDestinationPin() == pin)
}
if (a != null && b != null) {
return this.links.filter(link =>
link.getSourcePin() == a && link.getDestinationPin() == b
|| link.getSourcePin() == b && link.getDestinationPin() == a)
}
return this.links
}

2
index.html
View File

@@ -28,8 +28,8 @@
CustomProperties Pin (PinId=E9BBB3A54DE64C213F52B2AFC8197637,PinName="ReturnValue",PinToolTip="Return Value String A new string which is the concatenation of A+B",Direction="EGPD_Output",PinType.PinCategory="string",PinType.PinSubCategory="",PinType.PinSubCategoryObject=None,PinType.PinSubCategoryMemberReference=(),PinType.PinValueType=(),PinType.ContainerType=None,PinType.bIsReference=False,PinType.bIsConst=False,PinType.bIsWeakPointer=False,PinType.bIsUObjectWrapper=False,PersistentGuid=00000000000000000000000000000000,bHidden=False,bNotConnectable=False,bDefaultValueIsReadOnly=False,bDefaultValueIsIgnored=False,bAdvancedView=False,bOrphanedPin=False,)
End Object`)
let blueprint = new Blueprint()
blueprint.addGraphElement(node1)
document.querySelector('body').appendChild(blueprint)
blueprint.addGraphElement(node1)
</script>
<script type="module">
/*

11
js/Blueprint.js
View File

@@ -303,7 +303,16 @@ export default class Blueprint extends IElement {
* Returns the list of links in this blueprint.
* @returns {LinkElement[]} Nodes
*/
getLinks() {
getLinks([a, b] = []) {
if (a == null != b == null) {
const pin = a ?? b
return this.links.filter(link => link.getSourcePin() == pin || link.getDestinationPin() == pin)
}
if (a != null && b != null) {
return this.links.filter(link =>
link.getSourcePin() == a && link.getDestinationPin() == b
|| link.getSourcePin() == b && link.getDestinationPin() == a)
}
return this.links
}

2
js/element/IElement.js
View File

@@ -7,6 +7,8 @@
export default class IElement extends HTMLElement {
static tagName = ""
/**
*
* @param {IEntity} entity The entity containing blueprint related data for this graph element

5
js/element/LinkMessageElement.js
View File

@@ -14,6 +14,11 @@ export default class LinkMessageElement extends IElement {
/** @type {LinkRetrieval} */
(s, d) => `Convert ${s.getType()} to ${d.getType()}.`
)
static correct = _ => new LinkMessageElement(
"ueb-icon-correct",
/** @type {LinkRetrieval} */
(s, d) => ""
)
static directionsIncompatible = _ => new LinkMessageElement(
"ueb-icon-directions-incompatible",
/** @type {LinkRetrieval} */

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

@@ -17,32 +17,51 @@ export default class MouseCreateLink extends IMouseClickDrag {
/** @type {(e: MouseEvent) => void} */
#mouseleaveHandler
/** @type {LinkElement} */
link
/** @type {PinElement} */
enteredPin
linkValid = false
constructor(target, blueprint, options) {
super(target, blueprint, options)
/** @type {PinElement} */
this.target
/** @type {LinkElement} */
this.link
/** @type {PinElement} */
this.enteredPin
let self = this
this.#mouseenterHandler = e => {
if (!self.enteredPin) {
linkValid = false
self.enteredPin = e.target
const a = self.enteredPin, b = self.target
if (a.getNodeElement() == b.getNodeElement()) {
this.setLinkMessage(LinkMessageElement.sameNode())
} else if (a.isOutput() == b.isOutput()) {
this.setLinkMessage(LinkMessageElement.directionsIncompatible())
} else if (a.isOutput() == b.isOutput()) {
this.setLinkMessage(LinkMessageElement.directionsIncompatible())
} else if (self.blueprint.getLinks([a, b]).length) {
this.setLinkMessage(LinkMessageElement.replaceLink())
linkValid = true
} else {
this.setLinkMessage(LinkMessageElement.correct())
linkValid = true
}
}
}
this.#mouseleaveHandler = e => {
if (self.enteredPin == e.target) {
self.enteredPin = null
this.setLinkMessage(LinkMessageElement.placeNode())
}
}
}
startDrag() {
this.link = new LinkElement(this.target, null)
this.link.setLinkMessage(LinkMessageElement.placeNode())
this.blueprint.nodesContainerElement.prepend(this.link)
this.setLinkMessage(LinkMessageElement.placeNode())
this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName)
this.#listenedPins.forEach(pin => {
if (pin != this.target) {
@@ -62,11 +81,7 @@ export default class MouseCreateLink extends IMouseClickDrag {
pin.removeEventListener("mouseenter", this.#mouseenterHandler)
pin.removeEventListener("mouseleave", this.#mouseleaveHandler)
})
if (this.enteredPin && !this.blueprint.getLinks().find(
link =>
link.getSourcePin() == this.target && link.getDestinationPin() == this.enteredPin
|| link.getSourcePin() == this.enteredPin && link.getDestinationPin() == this.target
)) {
if (this.enteredPin) {
this.blueprint.addGraphElement(this.link)
this.link.setDestinationPin(this.enteredPin)
this.link.setLinkMessage(null)
@@ -75,6 +90,12 @@ export default class MouseCreateLink extends IMouseClickDrag {
this.link.finishDragging()
this.link.remove()
}
this.enteredPin = null
this.link = null
}
setLinkMessage(linkMessage) {
this.link.setLinkMessage(linkMessage)
this.blueprint.nodesContainerElement.prepend(this.link)
}
}

9
js/template/LinkMessageTemplate.js
View File

@@ -26,11 +26,16 @@ export default class LinkMessageTemplate extends ITemplate {
*/
apply(linkMessage) {
super.apply(linkMessage)
linkMessage.linkElement = linkMessage.closest(LinkElement.tagName)
linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message(
const linkMessageSetup = _ => linkMessage.querySelector(".ueb-link-message").innerText = linkMessage.message(
linkMessage.linkElement.getSourcePin(),
linkMessage.linkElement.getDestinationPin()
)
linkMessage.linkElement = linkMessage.closest(LinkElement.tagName)
if (linkMessage.linkElement) {
linkMessageSetup()
} else {
window.customElements.whenDefined(linkMessage.constructor.tagName).then(linkMessage)
}
}
}

12
js/template/LinkTemplate.js
View File

@@ -9,10 +9,10 @@ import sanitizeText from "./sanitizeText"
*/
export default class LinkTemplate extends ITemplate {
static c1DecreasingSpeed = -0.15
static c1DecreasingSpeed = -0.1
static c1ControlPoint = [100, 15]
static c2DecreasingSpeed = -0.06
static c2ControlPoint = [500, 140]
static c2DecreasingSpeed = -0.07
static c2ControlPoint = [500, 130]
/**
* Returns the value of inverse multiplication function y = a / x + q. The value of a and q are calculated using
@@ -51,10 +51,10 @@ export default class LinkTemplate extends ITemplate {
* @param {LinkElement} link Element of the graph
*/
apply(link) {
super.apply(link)
if (link.linkMessageElement) {
link.appendChild(link.linkMessageElement)
}
super.apply(link)
link.classList.add("ueb-positioned")
link.pathElement = link.querySelector("path")
}
@@ -128,13 +128,13 @@ export default class LinkTemplate extends ITemplate {
: 15
)
* fillRatio
let c2 = Math.max(40 / aspectRatio, 30) + start
let c2 = Math.max(25 / aspectRatio, 30) + start
c2 = Math.min(
c2,
LinkTemplate.decreasingValue(
LinkTemplate.c2DecreasingSpeed,
LinkTemplate.c2ControlPoint
)(width)
)(dx)
)
const d = Configuration.linkRightSVGPath(start, c1, c2)
// TODO move to CSS when Firefox will support property d

1
scss/ueblueprint-style.scss
View File

@@ -427,7 +427,6 @@ 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-link svg {