From 9b0f344dccfc2ee0ad5fdfc9262f5eb174a4e6cc Mon Sep 17 00:00:00 2001 From: barsdeveloper Date: Thu, 14 Apr 2022 21:25:36 +0200 Subject: [PATCH] Minor formatting and refactoring --- dist/css/ueb-style.css | 2 +- dist/css/ueb-style.css.map | 2 +- dist/ueblueprint.js | 14 ---- js/Blueprint.js | 1 - js/Utility.js | 2 - js/entity/IdentifierEntity.js | 6 -- js/entity/IntegerEntity.js | 5 -- scss/style.scss | 118 +++++++++++++++++----------------- scss/ueb-link.scss | 50 +++++++------- scss/ueb-node.scss | 52 +++++++-------- scss/ueb-pin.scss | 89 +++++++++++++------------ scss/ueb-type-color.scss | 28 ++++---- 12 files changed, 170 insertions(+), 199 deletions(-) diff --git a/dist/css/ueb-style.css b/dist/css/ueb-style.css index 2d6d3d4..7022395 100644 --- a/dist/css/ueb-style.css +++ b/dist/css/ueb-style.css @@ -1 +1 @@ -@font-face{font-family:"Roboto";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:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;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;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:#4d4d4db7;font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.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:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),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}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--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)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{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 #000,1px 4px 6px 0 rgba(0,0,0,.3)}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),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-position:top,right,bottom,left;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 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-header{padding:.3em .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:silver;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:.1em 1.6em}.ueb-node-body{display:flex;padding:1px 0;color:#fff;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}.ueb-node-expand{display:none}ueb-node[data-advanced-display] .ueb-node-expand{display:block}ueb-pin{display:block;margin:6px 0;padding:2px 2px}ueb-pin>*{display:inline-block;vertical-align:middle}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-pin:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:1em;height:1em;vertical-align:baseline;margin:0 .4em -1px .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);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-content>span{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{display:inline-block;vertical-align:middle;margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 0 0 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:#ffffff46;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;max-height:16em;background:none;color:inherit;cursor:text;overflow:auto}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}ueb-link{--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);--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);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}ueb-link svg path{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 .8s}ueb-link-message{display:block;visibility:visible;position:absolute;top:calc(100%*(1 - var(--ueb-y-opposite)) + 22px);left:calc((1 - var(--ueb-from-input))*100% + (var(--ueb-from-input-coefficient))*var(--ueb-start-percentage) + 15px);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}.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueb-style.css.map */ +@font-face{font-family:"Roboto";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:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;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;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:#4d4d4db7;font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.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:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),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}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--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)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{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 #000,1px 4px 6px 0 rgba(0,0,0,.3)}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),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-position:top,right,bottom,left;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 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-header{padding:.3em .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:silver;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:.1em 1.6em}.ueb-node-body{display:flex;padding:1px 0;color:#fff;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}.ueb-node-expand{display:none}ueb-node[data-advanced-display] .ueb-node-expand{display:block}ueb-pin{display:block;margin:6px 0;padding:2px 2px}ueb-pin>*{display:inline-block;vertical-align:middle}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-pin:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:1em;height:1em;vertical-align:baseline;margin:0 .4em -1px .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);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-content>span{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{display:inline-block;vertical-align:middle;margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 3px 1px 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:#ffffff46;outline:none}.ueb-pin-input-content{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}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}ueb-link{--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);--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);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}ueb-link svg path{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 .8s}ueb-link-message{display:block;visibility:visible;position:absolute;top:calc(100%*(1 - var(--ueb-y-opposite)) + 22px);left:calc((1 - var(--ueb-from-input))*100% + (var(--ueb-from-input-coefficient))*var(--ueb-start-percentage) + 15px);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}.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueb-style.css.map */ diff --git a/dist/css/ueb-style.css.map b/dist/css/ueb-style.css.map index e5d2a73..b074f85 100644 --- a/dist/css/ueb-style.css.map +++ b/dist/css/ueb-style.css.map @@ -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"} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 81635ec..30a6ec9 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -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) diff --git a/js/Blueprint.js b/js/Blueprint.js index 15f2427..fe38d5e 100755 --- a/js/Blueprint.js +++ b/js/Blueprint.js @@ -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) diff --git a/js/Utility.js b/js/Utility.js index ea66b67..c0e1194 100755 --- a/js/Utility.js +++ b/js/Utility.js @@ -139,6 +139,4 @@ export default class Utility { } return [...(new Set(result.concat(...a, ...b)))] } - - } diff --git a/js/entity/IdentifierEntity.js b/js/entity/IdentifierEntity.js index 3406452..5e9ed31 100644 --- a/js/entity/IdentifierEntity.js +++ b/js/entity/IdentifierEntity.js @@ -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 } diff --git a/js/entity/IntegerEntity.js b/js/entity/IntegerEntity.js index ea1cb5e..49b6bb1 100755 --- a/js/entity/IntegerEntity.js +++ b/js/entity/IntegerEntity.js @@ -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) } diff --git a/scss/style.scss b/scss/style.scss index e436b3a..95700da 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -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, diff --git a/scss/ueb-link.scss b/scss/ueb-link.scss index da2d54b..49ae6a0 100644 --- a/scss/ueb-link.scss +++ b/scss/ueb-link.scss @@ -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; } \ No newline at end of file diff --git a/scss/ueb-node.scss b/scss/ueb-node.scss index dd6bb3b..67b01b8 100644 --- a/scss/ueb-node.scss +++ b/scss/ueb-node.scss @@ -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; } diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss index bd6660c..e67aca9 100644 --- a/scss/ueb-pin.scss +++ b/scss/ueb-pin.scss @@ -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; } } \ No newline at end of file diff --git a/scss/ueb-type-color.scss b/scss/ueb-type-color.scss index ea3b0de..7989383 100644 --- a/scss/ueb-type-color.scss +++ b/scss/ueb-type-color.scss @@ -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}; } \ No newline at end of file