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

Minor formatting and refactoring

Browse Source
This commit is contained in:
barsdeveloper
2022-04-14 21:25:36 +02:00
parent f29119809f
commit 9b0f344dcc
12 changed files with 170 additions and 199 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,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCpHR,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,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"}

14
dist/ueblueprint.js vendored
View File

@@ -1067,8 +1067,6 @@ class Utility {
}
return [...(new Set(result.concat(...a, ...b)))]
}
}
// @ts-check
@@ -1219,12 +1217,6 @@ class IdentifierEntity extends IEntity {
}
constructor(options = {}) {
// Not instanceof to pick also primitive string
if (options.constructor === String) {
options = {
value: options
};
}
super(options);
/** @type {String} */ this.value;
}
@@ -1250,11 +1242,6 @@ class IntegerEntity extends IEntity {
* @param {Object | Number | String} options
*/
constructor(options = 0) {
if (options.constructor == Number || options.constructor == String) {
options = {
value: options,
};
}
super(options);
this.value = Math.round(this.value);
}
@@ -4150,7 +4137,6 @@ class Blueprint extends IElement {
* @param {Number} factor - Either 1 (expand) or -1 (shrink)
*/
/**
* Expand or shrink the grind indefinitely, the content will remain into position
* @param {Number[]} param0 - Expand value (negative means shrink, positive means expand)

1
js/Blueprint.js
View File

@@ -268,7 +268,6 @@ export default class Blueprint extends IElement {
* @param {Number} factor - Either 1 (expand) or -1 (shrink)
*/
/**
* Expand or shrink the grind indefinitely, the content will remain into position
* @param {Number[]} param0 - Expand value (negative means shrink, positive means expand)

2
js/Utility.js
View File

@@ -139,6 +139,4 @@ export default class Utility {
}
return [...(new Set(result.concat(...a, ...b)))]
}
}

6
js/entity/IdentifierEntity.js
View File

@@ -9,12 +9,6 @@ export default class IdentifierEntity extends IEntity {
}
constructor(options = {}) {
// Not instanceof to pick also primitive string
if (options.constructor === String) {
options = {
value: options
}
}
super(options)
/** @type {String} */ this.value
}

5
js/entity/IntegerEntity.js
View File

@@ -12,11 +12,6 @@ export default class IntegerEntity extends IEntity {
* @param {Object | Number | String} options
*/
constructor(options = 0) {
if (options.constructor == Number || options.constructor == String) {
options = {
value: options,
}
}
super(options)
this.value = Math.round(this.value)
}

118
scss/style.scss
View File

@@ -1,48 +1,48 @@
@font-face {
font-family: "Roboto";
font-style : light;
src :
font-style: light;
src:
url("../font/roboto-light.woff2") format("woff2"),
url("../font/roboto-light.woff") format("woff");
}
@font-face {
font-family: "Roboto";
font-style : regular;
src :
font-style: regular;
src:
url("../font/roboto-regular.woff2") format("woff2"),
url("../font/roboto-regular.woff") format("woff");
}
ueb-blueprint {
display : block;
position : relative;
display: block;
position: relative;
font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif;
font-size : var(--ueb-font-size);
font-size: var(--ueb-font-size);
user-select: none;
}
.ueb-viewport-header {
display : flex;
position : absolute;
top : 0;
right : 0;
left : 0;
height : 1.5em;
display: flex;
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1.5em;
background: rgba(0, 0, 0, 0.5);
z-index : 1;
z-index: 1;
}
.ueb-viewport-zoom {
margin-left: auto;
color : #4d4d4db7;
font-size : 20px;
color: #4d4d4db7;
font-size: 20px;
}
.ueb-viewport-body {
position : relative;
height : var(--ueb-height, 30rem);
overflow : hidden;
position: relative;
height: var(--ueb-height, 30rem);
overflow: hidden;
scrollbar-width: 0;
}
@@ -52,13 +52,13 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
.ueb-grid {
--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));
position : absolute;
min-width : 100%;
min-height : 100%;
width : calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale));
height : calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale));
background-color : #262626;
background-image :
position: absolute;
min-width: 100%;
min-height: 100%;
width: calc((100% + var(--ueb-additional-x) * 1px) / var(--ueb-scale));
height: calc((100% + var(--ueb-additional-y) * 1px) / var(--ueb-scale));
background-color: #262626;
background-image:
/* Axis lines */
linear-gradient(var(--ueb-grid-axis-line-color),
var(--ueb-grid-axis-line-color)),
@@ -97,10 +97,10 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body {
var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),
var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);
background-position: calc(var(--ueb-translate-x) * 1px) calc(var(--ueb-translate-y) * 1px);
background-repeat : repeat-x, repeat-y, repeat, repeat, repeat, repeat;
transform : scale(var(--ueb-scale), var(--ueb-scale));
transform-origin : 0 0;
overflow : hidden;
background-repeat: repeat-x, repeat-y, repeat, repeat, repeat, repeat;
transform: scale(var(--ueb-scale), var(--ueb-scale));
transform-origin: 0 0;
overflow: hidden;
}
ueb-blueprint[data-drag-scrolling="true"] .ueb-grid {
@@ -113,7 +113,7 @@ ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
.ueb-zoom--.ueb,
.ueb {
--ueb-scale : 1;
--ueb-scale: 1;
--ueb-grid-actual-size: var(--ueb-grid-size);
}
@@ -158,79 +158,79 @@ ueb-blueprint[data-drag-scrolling="false"] .ueb-grid {
}
.ueb-zoom--4.ueb {
--ueb-scale : 0.5;
--ueb-scale: 0.5;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
.ueb-zoom--5.ueb {
--ueb-scale : 0.375;
--ueb-scale: 0.375;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2);
}
.ueb-zoom--6.ueb {
--ueb-scale : 0.333333;
--ueb-scale: 0.333333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--7.ueb {
--ueb-scale : 0.3;
--ueb-scale: 0.3;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--8.ueb {
--ueb-scale : 0.266666;
--ueb-scale: 0.266666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--9.ueb {
--ueb-scale : 0.233333;
--ueb-scale: 0.233333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--10.ueb {
--ueb-scale : 0.2;
--ueb-scale: 0.2;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3);
}
.ueb-zoom--11.ueb {
--ueb-scale : 0.166666;
--ueb-scale: 0.166666;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
.ueb-zoom--12.ueb {
--ueb-scale : 0.133333;
--ueb-scale: 0.133333;
--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6);
}
.ueb-grid-content {
position : relative;
width : 0;
height : 0;
position: relative;
width: 0;
height: 0;
transform: translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px));
}
.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));
--ueb-computed-min-y : min(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-max-y : max(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-width : max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));
--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));
--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));
--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));
--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));
position : absolute;
top : calc(var(--ueb-computed-min-y) * 1px);
left : calc(var(--ueb-computed-min-x) * 1px);
width : calc(var(--ueb-computed-width) * 1px);
height : calc(var(--ueb-computed-height) * 1px);
position: absolute;
top: calc(var(--ueb-computed-min-y) * 1px);
left: calc(var(--ueb-computed-min-x) * 1px);
width: calc(var(--ueb-computed-width) * 1px);
height: calc(var(--ueb-computed-height) * 1px);
}
ueb-selector {
display : block;
position : absolute;
display: block;
position: absolute;
visibility: hidden;
top : 0;
left : 0;
width : 0;
height : 0;
top: 0;
left: 0;
width: 0;
height: 0;
background-image:
/* Top */
repeating-linear-gradient(90deg,

50
scss/ueb-link.scss
View File

@@ -1,57 +1,57 @@
ueb-link {
--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);
--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-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-opposite-coefficient) * var(--ueb-from-input-coefficient)));
overflow : visible;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 1px;
transform: scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));
overflow: visible;
}
ueb-link svg path {
visibility : visible;
stroke : var(--ueb-pin-color);
visibility: visible;
stroke: var(--ueb-pin-color);
stroke-width: 1;
}
ueb-link.ueb-link-dragging svg path,
ueb-link svg g:hover path {
stroke-width: 5;
transition : stroke-width 0.8s;
transition: stroke-width 0.8s;
}
ueb-link-message {
display : block;
display: block;
visibility: visible;
position : absolute;
top : calc(100% * (1 - var(--ueb-y-opposite)) + 22px);
left : calc(
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: 1px solid #000;
padding: 4px 8px;
border-radius: 2px;
background : linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
color : var(--ueb-pin-dim-color);
white-space : nowrap;
z-index : 1000000;
background: linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);
color: var(--ueb-pin-dim-color);
white-space: nowrap;
z-index: 1000000;
}

52
scss/ueb-node.scss
View File

@@ -1,9 +1,9 @@
ueb-node {
display : block;
position : absolute;
transform : translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
display: block;
position: absolute;
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);
box-shadow: 0 0 1px 0 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3);
}
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
@@ -11,8 +11,8 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
}
.ueb-node-border {
margin : -3px;
padding : 3px;
margin: -3px;
padding: 3px;
border-radius: calc(var(--ueb-node-radius) * 1.4);
}
@@ -22,42 +22,42 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node {
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),
linear-gradient(to right, #cc6700 0%, #cc6700 100%),
linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);
background-size : 100% 7px, 7px 100%, 100% 7px, 7px 100%;
background-size: 100% 7px, 7px 100%, 100% 7px, 7px 100%;
background-position: top, right, bottom, left;
background-repeat : repeat-x, repeat-y, repeat-x, repeat-y;
outline : 3px solid #cc6700;
outline-offset : -6px;
background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
outline: 3px solid #cc6700;
outline-offset: -6px;
}
.ueb-node-content {
position : relative;
padding : 1px;
box-shadow : inset 0 0 2px 0 black;
position: relative;
padding: 1px;
box-shadow: inset 0 0 2px 0 black;
border-radius: var(--ueb-node-radius);
background : rgba(10, 10, 10, 0.8);
overflow : hidden;
background: rgba(10, 10, 10, 0.8);
overflow: hidden;
}
.ueb-node-header {
padding : 0.3em 0.7em;
box-shadow : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381;
padding: 0.3em 0.7em;
box-shadow: 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;
font-weight : 600;
white-space : nowrap;
background: linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);
color: #c0c0c0;
font-weight: 600;
white-space: nowrap;
}
.ueb-node-name {
background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);
margin : -0.1em -1.6em;
padding : 0.1em 1.6em;
margin: -0.1em -1.6em;
padding: 0.1em 1.6em;
}
.ueb-node-body {
display : flex;
padding : 1px 0;
color : white;
display: flex;
padding: 1px 0;
color: white;
font-weight: 100;
white-space: nowrap;
}

89
scss/ueb-pin.scss
View File

@@ -1,10 +1,10 @@
ueb-pin {
display: block;
margin : 6px 0;
margin: 6px 0;
padding: 2px 2px;
&>* {
display : inline-block;
display: inline-block;
vertical-align: middle;
}
}
@@ -15,7 +15,7 @@ ueb-node[data-advanced-display="Hidden"] ueb-pin[data-advanced-view="true"] {
ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover {
background: var(--ueb-pin-background);
cursor : crosshair;
cursor: crosshair;
}
.ueb-node-outputs ueb-pin {
@@ -23,28 +23,28 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover
}
.ueb-pin-icon-exec {
display : inline-block;
display: inline-block;
vertical-align: text-top;
}
.ueb-pin-icon-value {
display : inline-block;
position : relative;
width : 1em;
height : 1em;
display: inline-block;
position: relative;
width: 1em;
height: 1em;
vertical-align: baseline;
margin : 0 0.4em -1px 0.1em;
margin: 0 0.4em -1px 0.1em;
}
.ueb-pin-icon-value::before {
content : "";
display : block;
position : absolute;
top : 0;
right : 0;
bottom : 0;
left : 0;
border : 2px solid var(--ueb-pin-color);
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border: 2px solid var(--ueb-pin-color);
border-radius: 50%;
}
@@ -53,20 +53,20 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
}
.ueb-pin-icon-value::after {
content : "";
display : block;
position : absolute;
top : calc(50% - 0.3em);
left : calc(100% + 1px);
width : 0;
height : 0;
border-top : 0.3em solid transparent;
content: "";
display: block;
position: absolute;
top: calc(50% - 0.3em);
left: calc(100% + 1px);
width: 0;
height: 0;
border-top: 0.3em solid transparent;
border-bottom: 0.3em solid transparent;
border-left : 0.3em solid var(--ueb-pin-color);
border-left: 0.3em solid var(--ueb-pin-color);
}
.ueb-pin-content>span {
display : inline-block;
display: inline-block;
vertical-align: middle;
}
@@ -77,43 +77,42 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before {
.ueb-pin-input {
display: inline-block;
vertical-align: middle;
margin-left : 3px;
border : 1px solid #a0a0a0;
margin-left: 3px;
border: 1px solid #a0a0a0;
border-radius: 3px;
padding : 1px 0 0 3px;
color : #c0c0c0;
padding: 1px 3px 1px 3px;
color: #c0c0c0;
&:hover,
&:active,
&:focus,
&:focus-within {
background: #ffffff46;
outline : none;
outline: none;
}
}
.ueb-pin-input-content {
display : block;
outline : none;
border : none;
margin : 0 3px 1px 0;
padding : 0;
min-width : 10px;
max-width : 400px;
display: block;
outline: none;
border: none;
padding: 0;
min-width: 10px;
max-width: 400px;
max-height: 16em;
background: none;
color : inherit;
cursor : text;
overflow : auto;
color: inherit;
cursor: text;
overflow: auto;
&::-webkit-scrollbar {
width : 10px;
width: 10px;
height: 10px;
}
&::-webkit-scrollbar-thumb {
background : #575757;
background: #575757;
border-radius: 10px;
margin : 4px;
margin: 4px;
}
}

28
scss/ueb-type-color.scss
View File

@@ -1,53 +1,53 @@
.ueb {
$ueb-pin-color : white;
$ueb-pin-dim-color : #afafaf;
--ueb-pin-color : #{$ueb-pin-color};
$ueb-pin-color: white;
$ueb-pin-dim-color: #afafaf;
--ueb-pin-color : #{$ueb-pin-color};
--ueb-pin-dim-color: #{$ueb-pin-dim-color};
}
.ueb-pin-boolean {
$ueb-pin-color : rgb(30%, 0, 0);
$ueb-pin-color: rgb(30%, 0, 0);
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-class {
$ueb-pin-color : #5800bb;
$ueb-pin-color: #5800bb;
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-float {
$ueb-pin-color : #9ffb44;
$ueb-pin-color: #9ffb44;
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-int {
$ueb-pin-color : #1fe0ad;
$ueb-pin-color: #1fe0ad;
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-name {
$ueb-pin-color : #cb81fc;
$ueb-pin-color: #cb81fc;
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-object {
$ueb-pin-color : #00a8f2;
$ueb-pin-color : rgba(0%, 40%, 01%);
$ueb-pin-color: #00a8f2;
$ueb-pin-color: rgba(0%, 40%, 01%);
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-rotator {
$ueb-pin-color : #9eb1fc;
$ueb-pin-color: #9eb1fc;
--ueb-pin-color: #{$ueb-pin-color};
}
.ueb-pin-string {
$ueb-pin-color : #fc00d2;
--ueb-pin-color : #{$ueb-pin-color};
$ueb-pin-color: #fc00d2;
--ueb-pin-color : #{$ueb-pin-color};
--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent);
}
.ueb-pin-vector {
$ueb-pin-color : #fcc823;
$ueb-pin-color: #fcc823;
--ueb-pin-color: #{$ueb-pin-color};
}