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

Small refactoring

Browse Source
This commit is contained in:
barsdeveloper
2022-04-20 22:22:25 +02:00
parent 377320181f
commit 5c9c0c66ca
10 changed files with 93 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/ueb-style.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/ueb-style.css.map vendored
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.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,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,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,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,wBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCnHR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCvDJ,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}
{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.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,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,sBACI,QACA,SAGJ,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,mBClUJ,SACI,cACA,kBACA,sGACA,qCACA,uDACA,oBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,4FACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,qBACA,cACA,+FACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cCjFJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,cACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,wBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCnHR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCvDJ,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"}

72
dist/ueblueprint.js vendored
View File

@@ -2738,23 +2738,21 @@ class PinTemplate extends ITemplate {
* @param {PinElement} pin
*/
render(pin) {
const icon = html`
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</div>
`;
const content = html`
<div class="ueb-pin-content">
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
${this.renderInput(pin)}
</div>
`;
if (pin.isInput()) {
return html`
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</div>
<div class="ueb-pin-content">
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
${this.renderInput(pin)}
</div>
`
return icon + content
} else {
return html`
<div class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</div>
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</div>
`
return content + icon
}
}
@@ -2865,11 +2863,14 @@ class StringPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
renderInput(pin) {
return html`
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
</div>
`
if (pin.isInput()) {
return html`
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
</div>
`
}
return ""
}
/**
@@ -3922,14 +3923,16 @@ class BlueprintTemplate extends ITemplate {
viewport(element) {
return html`
<div class="ueb-viewport-body">
<div class="ueb-grid"
style="
--ueb-additional-x:${sanitizeText(element.additional[0])};
--ueb-additional-y:${sanitizeText(element.additional[1])};
--ueb-translate-x:${sanitizeText(element.translateValue[0])};
--ueb-translate-y:${sanitizeText(element.translateValue[1])};
">
<div class="ueb-grid-content" data-nodes></div>
<div class="ueb-grid" style="
--ueb-additional-x:${sanitizeText(element.additional[0])};
--ueb-additional-y:${sanitizeText(element.additional[1])};
--ueb-translate-x:${sanitizeText(element.translateValue[0])};
--ueb-translate-y:${sanitizeText(element.translateValue[1])};
">
<div class="ueb-grid-content">
<div data-links></div>
<div data-nodes></div>
</div>
</div>
</div>
`
@@ -3969,10 +3972,13 @@ class BlueprintTemplate extends ITemplate {
blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header');
blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay');
blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body');
blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid");
blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]");
blueprint.selectorElement = new SelectorElement();
blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.getNodes());
blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid");
blueprint.querySelector(".ueb-grid-content").append(blueprint.selectorElement);
blueprint.linksContainerElement = blueprint.querySelector("[data-links]");
blueprint.linksContainerElement.append(...blueprint.getLinks());
blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]");
blueprint.nodesContainerElement.append(...blueprint.getNodes());
this.applyEndDragScrolling(blueprint);
}
@@ -4081,6 +4087,8 @@ class Blueprint extends IElement {
/** @type {SelectorElement} */
selectorElement = null
/** @type {HTMLElement} */
linksContainerElement = null
/** @type {HTMLElement} */
nodesContainerElement = null
/** @type {Number} */
zoom = 0
@@ -4415,7 +4423,7 @@ class Blueprint extends IElement {
this.nodesContainerElement?.appendChild(element);
} else if (element instanceof LinkElement && !this.links.includes(element)) {
this.links.push(element);
this.nodesContainerElement?.appendChild(element);
this.linksContainerElement?.appendChild(element);
}
}
graphElements.filter(element => element instanceof NodeElement).forEach(

4
js/Blueprint.js
View File

@@ -55,6 +55,8 @@ export default class Blueprint extends IElement {
/** @type {SelectorElement} */
selectorElement = null
/** @type {HTMLElement} */
linksContainerElement = null
/** @type {HTMLElement} */
nodesContainerElement = null
/** @type {Number} */
zoom = 0
@@ -391,7 +393,7 @@ export default class Blueprint extends IElement {
this.nodesContainerElement?.appendChild(element)
} else if (element instanceof LinkElement && !this.links.includes(element)) {
this.links.push(element)
this.nodesContainerElement?.appendChild(element)
this.linksContainerElement?.appendChild(element)
}
}
graphElements.filter(element => element instanceof NodeElement).forEach(

27
js/template/BlueprintTemplate.js
View File

@@ -80,14 +80,16 @@ export default class BlueprintTemplate extends ITemplate {
viewport(element) {
return html`
<div class="ueb-viewport-body">
<div class="ueb-grid"
style="
--ueb-additional-x:${sanitizeText(element.additional[0])};
--ueb-additional-y:${sanitizeText(element.additional[1])};
--ueb-translate-x:${sanitizeText(element.translateValue[0])};
--ueb-translate-y:${sanitizeText(element.translateValue[1])};
">
<div class="ueb-grid-content" data-nodes></div>
<div class="ueb-grid" style="
--ueb-additional-x:${sanitizeText(element.additional[0])};
--ueb-additional-y:${sanitizeText(element.additional[1])};
--ueb-translate-x:${sanitizeText(element.translateValue[0])};
--ueb-translate-y:${sanitizeText(element.translateValue[1])};
">
<div class="ueb-grid-content">
<div data-links></div>
<div data-nodes></div>
</div>
</div>
</div>
`
@@ -127,10 +129,13 @@ export default class BlueprintTemplate extends ITemplate {
blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header')
blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay')
blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body')
blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
blueprint.selectorElement = new SelectorElement()
blueprint.nodesContainerElement.append(blueprint.selectorElement, ...blueprint.getNodes())
blueprint.gridElement = blueprint.viewportElement.querySelector(".ueb-grid")
blueprint.querySelector(".ueb-grid-content").append(blueprint.selectorElement)
blueprint.linksContainerElement = blueprint.querySelector("[data-links]")
blueprint.linksContainerElement.append(...blueprint.getLinks())
blueprint.nodesContainerElement = blueprint.querySelector("[data-nodes]")
blueprint.nodesContainerElement.append(...blueprint.getNodes())
this.applyEndDragScrolling(blueprint)
}

28
js/template/PinTemplate.js
View File

@@ -35,23 +35,21 @@ export default class PinTemplate extends ITemplate {
* @param {PinElement} pin
*/
render(pin) {
const icon = html`
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</div>
`
const content = html`
<div class="ueb-pin-content">
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
${this.renderInput(pin)}
</div>
`
if (pin.isInput()) {
return html`
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</div>
<div class="ueb-pin-content">
<span class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</span>
${this.renderInput(pin)}
</div>
`
return icon + content
} else {
return html`
<div class="ueb-pin-name">${sanitizeText(pin.getPinDisplayName())}</div>
<div class="ueb-pin-icon">
${this.renderIcon(pin)}
</div>
`
return content + icon
}
}

13
js/template/StringPinTemplate.js
View File

@@ -21,11 +21,14 @@ export default class StringPinTemplate extends PinTemplate {
* @param {PinElement} pin
*/
renderInput(pin) {
return html`
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
</div>
`
if (pin.isInput()) {
return html`
<div class="ueb-pin-input">
<div class="ueb-pin-input-content" role="textbox" contenteditable="true"></div>
</div>
`
}
return ""
}
/**

5
scss/style.scss
View File

@@ -209,6 +209,11 @@ ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
transform: translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px));
}
.ueb-grid-content>div {
width: 0;
height: 0;
}
.ueb-positioned {
--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));
--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));

7
scss/ueb-node.scss
View File

@@ -4,6 +4,7 @@ ueb-node {
transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
border-radius: var(--ueb-node-radius);
box-shadow: 0 0 1px 0 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3);
font-weight: lighter;
}
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
@@ -40,7 +41,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
.ueb-node-header {
padding: 0.3em 0.7em;
box-shadow: inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
box-shadow: inset 5px 1px 5px -3px #92c381, inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0;
background: linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
color: #c0c0c0;
@@ -49,7 +50,9 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
}
.ueb-node-name {
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
display: inline-block;
min-width: 80%;
background: radial-gradient(ellipse 95% 60% at 20% 50%, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
margin: -0.1em -1.6em;
padding: 0.1em 1.6em;
}

2
scss/ueb-pin.scss
View File

@@ -65,7 +65,7 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
border-left: 0.3em solid var(--ueb-pin-color);
}
.ueb-pin-content>span {
.ueb-pin-name {
display: inline-block;
vertical-align: middle;
}