From c5816f54d90c0a5f94a8a4ab0171cc05ecafaed9 Mon Sep 17 00:00:00 2001 From: barsdeveloper Date: Sun, 27 Mar 2022 13:42:20 +0200 Subject: [PATCH] Style files refactoring --- dist/css/ueb-style.css | 1 + dist/css/ueb-style.css.map | 1 + .../css/ueblueprint-node-value-type-color.css | 1 - .../ueblueprint-node-value-type-color.css.map | 1 - dist/css/ueblueprint-style.css | 1 - dist/css/ueblueprint-style.css.map | 1 - index.html | 2 +- package.json | 4 +- scss/export.scss | 4 + scss/{ueblueprint-style.scss => style.scss} | 202 +----------------- scss/ueb-link.scss | 57 +++++ scss/ueb-node.scss | 80 +++++++ scss/ueb-pin.scss | 97 +++++++++ ...ue-type-color.scss => ueb-type-color.scss} | 104 ++++----- 14 files changed, 299 insertions(+), 257 deletions(-) create mode 100644 dist/css/ueb-style.css create mode 100644 dist/css/ueb-style.css.map delete mode 100755 dist/css/ueblueprint-node-value-type-color.css delete mode 100755 dist/css/ueblueprint-node-value-type-color.css.map delete mode 100755 dist/css/ueblueprint-style.css delete mode 100755 dist/css/ueblueprint-style.css.map create mode 100644 scss/export.scss rename scss/{ueblueprint-style.scss => style.scss} (63%) create mode 100644 scss/ueb-link.scss create mode 100644 scss/ueb-node.scss create mode 100644 scss/ueb-pin.scss rename scss/{ueblueprint-node-value-type-color.scss => ueb-type-color.scss} (95%) mode change 100755 => 100644 diff --git a/dist/css/ueb-style.css b/dist/css/ueb-style.css new file mode 100644 index 0000000..5de9907 --- /dev/null +++ b/dist/css/ueb-style.css @@ -0,0 +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: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(0,0,0,.7);overflow:hidden}.ueb-node-header{padding:.2em .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:3px 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:5px 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:.85em;height:.85em;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{margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 4px;min-width:10px;max-width:400px;max-height:14em;background:none;color:#a0a0a0;cursor:text;overflow:auto;white-space:normal}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus{background:#505250;outline:none}.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 new file mode 100644 index 0000000..9fe5513 --- /dev/null +++ b/dist/css/ueb-style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.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,aACA,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,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,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,YACA,aACA,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,gBACA,yBACA,kBACA,gBACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cACA,mBAEA,gEAGI,mBACA,aC9FR,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/css/ueblueprint-node-value-type-color.css b/dist/css/ueblueprint-node-value-type-color.css deleted file mode 100755 index fc4d97b..0000000 --- a/dist/css/ueblueprint-node-value-type-color.css +++ /dev/null @@ -1 +0,0 @@ -.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=ueblueprint-node-value-type-color.css.map */ diff --git a/dist/css/ueblueprint-node-value-type-color.css.map b/dist/css/ueblueprint-node-value-type-color.css.map deleted file mode 100755 index 93535ee..0000000 --- a/dist/css/ueblueprint-node-value-type-color.css.map +++ /dev/null @@ -1 +0,0 @@ -{"version":3,"sourceRoot":"","sources":["../../scss/ueblueprint-node-value-type-color.scss"],"names":[],"mappings":"AAAA,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueblueprint-node-value-type-color.css"} \ No newline at end of file diff --git a/dist/css/ueblueprint-style.css b/dist/css/ueblueprint-style.css deleted file mode 100755 index e84a93a..0000000 --- a/dist/css/ueblueprint-style.css +++ /dev/null @@ -1 +0,0 @@ -@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{color:#4d4d4db7}.ueb-viewport-body{position:relative;height:30rem;overflow:hidden;scrollbar-width:none}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;backface-visibility:hidden;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-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(0,0,0,.7);overflow:hidden}.ueb-node-header{padding:.2em .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:6px 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;padding:1px 2px}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{display:inline-block;position:relative;width:.85em;height:.85em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-pin-icon::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::before{background:var(--ueb-pin-color)}.ueb-pin-icon::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-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-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}/*# sourceMappingURL=ueblueprint-style.css.map */ diff --git a/dist/css/ueblueprint-style.css.map b/dist/css/ueblueprint-style.css.map deleted file mode 100755 index 3a9cc2b..0000000 --- a/dist/css/ueblueprint-style.css.map +++ /dev/null @@ -1 +0,0 @@ -{"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,2BACA,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,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,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,iBACI,aAGJ,iDACI,cAGJ,QACI,cACA,gBAGJ,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,cACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,sBACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,2CACI,gCAGJ,qBACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,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,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","file":"ueblueprint-style.css"} \ No newline at end of file diff --git a/index.html b/index.html index c82be08..0b70655 100755 --- a/index.html +++ b/index.html @@ -8,7 +8,7 @@ - + diff --git a/package.json b/package.json index 064e9be..c91e39c 100755 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Unreal Engine's Blueprint visualisation library", "main": "ueblueprint.js", "scripts": { - "build": "rollup --config && sass scss:dist/css --style=compressed" + "build": "rollup --config && sass scss/export.scss:dist/css/ueb-style.css --style=compressed" }, "repository": { "type": "git", @@ -34,4 +34,4 @@ "dependencies": { "parsimmon": "^1.18.0" } -} +} \ No newline at end of file diff --git a/scss/export.scss b/scss/export.scss new file mode 100644 index 0000000..53f66e9 --- /dev/null +++ b/scss/export.scss @@ -0,0 +1,4 @@ +@use "style.scss"; +@use "ueb-node.scss"; +@use "ueb-pin.scss"; +@use "ueb-type-color.scss"; \ No newline at end of file diff --git a/scss/ueblueprint-style.scss b/scss/style.scss similarity index 63% rename from scss/ueblueprint-style.scss rename to scss/style.scss index c19d38b..18e1e51 100644 --- a/scss/ueblueprint-style.scss +++ b/scss/style.scss @@ -34,14 +34,16 @@ ueb-blueprint { } .ueb-viewport-zoom { - color: #4d4d4db7; + margin-left: auto; + color : #4d4d4db7; + font-size : 20px; } .ueb-viewport-body { position : relative; height : 30rem; overflow : hidden; - scrollbar-width: none; + scrollbar-width: 0; } ueb-blueprint[data-focused="true"] .ueb-viewport-body { @@ -98,7 +100,6 @@ ueb-blueprint[data-focused="true"] .ueb-viewport-body { background-repeat : repeat-x, repeat-y, repeat, repeat, repeat, repeat; transform : scale(var(--ueb-scale), var(--ueb-scale)); transform-origin : 0 0; - backface-visibility: hidden; overflow : hidden; } @@ -208,143 +209,6 @@ ueb-blueprint[data-drag-scrolling="false"] .ueb-grid { transform: translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px)); } -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 black, 1px 4px 6px 0 rgba(0, 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 black; - border-radius: var(--ueb-node-radius); - background : rgba(0, 0, 0, 0.7); - overflow : hidden; -} - -.ueb-node-header { - padding : 0.2em 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; -} - -.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; -} - -.ueb-node-body { - display : flex; - padding : 6px 0; - color : white; - 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; - padding: 1px 2px; -} - -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 { - display : inline-block; - position : relative; - width : 0.85em; - height : 0.85em; - vertical-align: baseline; - margin : 0 0.4em -1px 0.1em; -} - -.ueb-pin-icon::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::before { - background: var(--ueb-pin-color); -} - -.ueb-pin-icon::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; - border-bottom: 0.3em solid transparent; - border-left : 0.3em solid var(--ueb-pin-color); -} - .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)); @@ -452,62 +316,4 @@ ueb-blueprint[data-selecting="true"] ueb-selector { ueb-selector>* { visibility: visible; -} - -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); - /* - * 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; -} - -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 0.8s; -} - -ueb-link-message { - display : block; - visibility: visible; - 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-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; } \ No newline at end of file diff --git a/scss/ueb-link.scss b/scss/ueb-link.scss new file mode 100644 index 0000000..da2d54b --- /dev/null +++ b/scss/ueb-link.scss @@ -0,0 +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); + /* + * 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; +} + +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 0.8s; +} + +ueb-link-message { + display : block; + visibility: visible; + 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-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; +} \ No newline at end of file diff --git a/scss/ueb-node.scss b/scss/ueb-node.scss new file mode 100644 index 0000000..11839b5 --- /dev/null +++ b/scss/ueb-node.scss @@ -0,0 +1,80 @@ +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 black, 1px 4px 6px 0 rgba(0, 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 black; + border-radius: var(--ueb-node-radius); + background : rgba(0, 0, 0, 0.7); + overflow : hidden; +} + +.ueb-node-header { + padding : 0.2em 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; +} + +.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; +} + +.ueb-node-body { + display : flex; + padding : 3px 0; + color : white; + 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; +} \ No newline at end of file diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss new file mode 100644 index 0000000..74e74bb --- /dev/null +++ b/scss/ueb-pin.scss @@ -0,0 +1,97 @@ +ueb-pin { + display: block; + margin : 5px 0; + padding: 2px 2px; + + &>* { + 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 : 0.85em; + height : 0.85em; + vertical-align: baseline; + 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); + 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% - 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); +} + +.ueb-pin-content>span { + display : inline-block; + vertical-align: middle; +} + +.ueb-pin-exec .ueb-pin-name { + display: none; +} + +.ueb-pin-input { + margin-left : 3px; + border : 1px solid #a0a0a0; + border-radius: 3px; + padding : 1px 4px; + min-width : 10px; + max-width : 400px; + max-height : 14em; + background : none; + color : #a0a0a0; + cursor : text; + overflow : auto; + white-space : normal; + + &:hover, + &:active, + &:focus { + background: #505250; + outline : none; + } +} \ No newline at end of file diff --git a/scss/ueblueprint-node-value-type-color.scss b/scss/ueb-type-color.scss old mode 100755 new mode 100644 similarity index 95% rename from scss/ueblueprint-node-value-type-color.scss rename to scss/ueb-type-color.scss index a425d24..ea3b0de --- a/scss/ueblueprint-node-value-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-dim-color: #{$ueb-pin-dim-color}; -} - -.ueb-pin-boolean { - $ueb-pin-color : rgb(30%, 0, 0); - --ueb-pin-color: #{$ueb-pin-color}; -} - -.ueb-pin-class { - $ueb-pin-color : #5800bb; - --ueb-pin-color: #{$ueb-pin-color}; -} - -.ueb-pin-float { - $ueb-pin-color : #9ffb44; - --ueb-pin-color: #{$ueb-pin-color}; -} - -.ueb-pin-int { - $ueb-pin-color : #1fe0ad; - --ueb-pin-color: #{$ueb-pin-color}; -} - -.ueb-pin-name { - $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: #{$ueb-pin-color}; -} - -.ueb-pin-rotator { - $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-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent); -} - -.ueb-pin-vector { - $ueb-pin-color : #fcc823; - --ueb-pin-color: #{$ueb-pin-color}; +.ueb { + $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: #{$ueb-pin-color}; +} + +.ueb-pin-class { + $ueb-pin-color : #5800bb; + --ueb-pin-color: #{$ueb-pin-color}; +} + +.ueb-pin-float { + $ueb-pin-color : #9ffb44; + --ueb-pin-color: #{$ueb-pin-color}; +} + +.ueb-pin-int { + $ueb-pin-color : #1fe0ad; + --ueb-pin-color: #{$ueb-pin-color}; +} + +.ueb-pin-name { + $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: #{$ueb-pin-color}; +} + +.ueb-pin-rotator { + $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-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent); +} + +.ueb-pin-vector { + $ueb-pin-color : #fcc823; + --ueb-pin-color: #{$ueb-pin-color}; } \ No newline at end of file