diff --git a/css/ueblueprint-draggable.css b/css/ueblueprint-draggable.css deleted file mode 100644 index 79342c8..0000000 --- a/css/ueblueprint-draggable.css +++ /dev/null @@ -1,8 +0,0 @@ -.ueb-draggable { - /* Indicate the element draggable */ - cursor: move; - /* It will be positioned absolutely */ - position: absolute; - /* Doesn't allow to select the content inside */ - user-select: none; -} diff --git a/css/ueblueprint-node-value-type-color.css b/css/ueblueprint-node-value-type-color.css index e6e8ff5..1c84734 100644 --- a/css/ueblueprint-node-value-type-color.css +++ b/css/ueblueprint-node-value-type-color.css @@ -1,35 +1 @@ -.ueb { - --ueb-node-value-color: white; -} - -.ueb-node-value-boolean { - --ueb-node-value-color: #930000; -} - -.ueb-node-value-integer { - --ueb-node-value-color: #1fe0ad; -} - -.ueb-node-value-float { - --ueb-node-value-color: #9ffb44; -} - -.ueb-node-value-vector { - --ueb-node-value-color: #fcc823; -} - -.ueb-node-value-rotator { - --ueb-node-value-color: #9eb1fc; -} - -.ueb-node-value-string { - --ueb-node-value-color: #fc00d2; -} - -.ueb-node-value-name { - --ueb-node-value-color: #cb81fc; -} - -.ueb-node-value-objectreference { - --ueb-node-value-color: #00a8f2; -} \ No newline at end of file +.ueb{--ueb-node-value-color: white}.ueb-node-value-boolean{--ueb-node-value-color: #930000}.ueb-node-value-integer{--ueb-node-value-color: #1fe0ad}.ueb-node-value-float{--ueb-node-value-color: #9ffb44}.ueb-node-value-vector{--ueb-node-value-color: #fcc823}.ueb-node-value-rotator{--ueb-node-value-color: #9eb1fc}.ueb-node-value-string{--ueb-node-value-color: #fc00d2;--ueb-node-value-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-node-value-name{--ueb-node-value-color: #cb81fc}.ueb-node-value-objectreference{--ueb-node-value-color: #00a8f2}/*# sourceMappingURL=ueblueprint-node-value-type-color.css.map */ diff --git a/css/ueblueprint-node-value-type-color.css.map b/css/ueblueprint-node-value-type-color.css.map new file mode 100644 index 0000000..4f41a79 --- /dev/null +++ b/css/ueblueprint-node-value-type-color.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/ueblueprint-node-value-type-color.scss"],"names":[],"mappings":"AAAA,KAEI,8BAGJ,wBAEI,gCAGJ,wBAEI,gCAGJ,sBAEI,gCAGJ,uBAEI,gCAGJ,wBAEI,gCAGJ,uBAEI,gCACA,0GAGJ,qBAEI,gCAGJ,gCAEI","file":"ueblueprint-node-value-type-color.css"} \ No newline at end of file diff --git a/css/ueblueprint-style.css b/css/ueblueprint-style.css index 07f9b65..eec447d 100644 --- a/css/ueblueprint-style.css +++ b/css/ueblueprint-style.css @@ -1,448 +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"); -} - -:root { - --ueb-fron-size: 13px; - --ueb-viewport-height: 30rem; - --ueb-viewport-width: 100%; - --ueb-grid-size: 16px; - --ueb-grid-line-width: 2px; - --ueb-grid-line-color: #353535; - --ueb-grid-set: 8; - --ueb-grid-set-line-color: #161616; - --ueb-grid-axis-line-color: black; - --ueb-grid-snap: 16px; - --ueb-node-radius: 7px; -} - -ueb-blueprint { - display: block; - position: relative; - font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", - sans-serif; - font-size: var(--ueb-fron-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, 0.5); - z-index: 1; -} - -.ueb-viewport-zoom { - color: #4d4d4db7; -} - -.ueb-viewport-body { - position: relative; - height: var(--ueb-viewport-height); - width: var(--ueb-viewport-width); - 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: - /* Axis lines */ 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) - ), - /* Dark bigger grid */ - 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 - ), - /* Light grid */ - 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: - /* Axis lines */ 100% - var(--ueb-grid-line-actual-width), - var(--ueb-grid-line-actual-width) 100%, - /* Dark bigger grid */ - 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)), - /* Light grid */ 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-zoom--.ueb, -.ueb { - /* 16/16 */ - --ueb-scale: 1; - --ueb-grid-actual-size: var(--ueb-grid-size); -} - -.ueb-zoom--1.ueb { - /* 14/16 */ - --ueb-scale: 0.875; -} - -.ueb-zoom--2.ueb { - /* 12/16 */ - --ueb-scale: 0.75; -} - -.ueb-zoom--3.ueb { - /* 10.8/16 */ - --ueb-scale: 0.675; -} - -.ueb-zoom--4.ueb { - /* 8/16 */ - --ueb-scale: 0.5; - --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); -} - -.ueb-zoom--5.ueb { - /* 6/16 */ - --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 { - /* 12/16 */ - --ueb-scale: 0.2; - --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); -} - -.ueb-zoom--11.ueb { - /* 12/16 */ - --ueb-scale: 0.166666; - --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); -} - -.ueb-zoom--12.ueb { - /* 12/16 */ - --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 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3); - will-change: transform; -} - -.ueb-node-border { - margin: -3px; - padding: 3px; - border-radius: calc(var(--ueb-node-radius) * 1.4); -} - -.ueb-selected { - z-index: 1; -} - -.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; -} - -.ueb-node-content { - 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; -} - -ueb-pin { - display: block; - padding: 4px 8px; -} - -ueb-selector[data-selecting="false"] ~ ueb-node ueb-pin { - cursor: pointer; -} - -.ueb-node-value-icon { - display: inline-block; - position: relative; - width: 0.85em; - height: 0.85em; - vertical-align: baseline; - margin: 0 0.4em -1px 0.3em; -} - -.ueb-node-value-icon::before { - content: ""; - display: block; - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 2px solid var(--ueb-node-value-color); - border-radius: 50%; -} - -.ueb-node-value-fill::before { - background: var(--ueb-node-value-color); -} - -.ueb-node-value-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-node-value-color); -} - -.ueb-selector { - display: block; - position: absolute; - visibility: hidden; - top: 0; - left: 0; - width: 0; - height: 0; - background-image: - /* Top */ 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)) - ), - /* Bottom */ - 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)) - ), - /* Left */ - 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)) - ), - /* Right */ - 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: - /* Top */ 100% calc(1px / var(--ueb-scale)), - 100% calc(3px / var(--ueb-scale)), - /* Bottom */ 100% calc(1px / var(--ueb-scale)), - 100% calc(3px / var(--ueb-scale)), - /* Left */ calc(1px / var(--ueb-scale)) 100%, - calc(3px / var(--ueb-scale)) 100%, - /* Right */ calc(1px / var(--ueb-scale)) 100%, - calc(3px / var(--ueb-scale)) 100%; - background-position: - /* Top */ 0 calc(1px / var(--ueb-scale)), 0 0, - /* Bottom */ 0 calc(100% - 1px / var(--ueb-scale)), 0 100%, - /* Left */ calc(1px / var(--ueb-scale)) 0, 0 0, - /* Right */ calc(100% - 1px / var(--ueb-scale)) 0, 100% 0; - background-repeat: no-repeat; -} - -.ueb-selector > * { - visibility: visible; -} - -.ueb-selector[data-selecting="true"] { - visibility: visible; - top: min(var(--ueb-select-from-y) * 1px, var(--ueb-select-to-y) * 1px); - left: min(var(--ueb-select-from-x) * 1px, var(--ueb-select-to-x) * 1px); - width: calc( - max( - var(--ueb-select-from-x) - var(--ueb-select-to-x), - var(--ueb-select-to-x) - var(--ueb-select-from-x) - ) * 1px - ); - height: calc( - max( - var(--ueb-select-from-y) - var(--ueb-select-to-y), - var(--ueb-select-to-y) - var(--ueb-select-from-y) - ) * 1px - ); -} +@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")}:root{--ueb-fron-size: 13px;--ueb-viewport-height: 30rem;--ueb-viewport-width: 100%;--ueb-grid-size: 16px;--ueb-grid-line-width: 2px;--ueb-grid-line-color: #353535;--ueb-grid-set: 8;--ueb-grid-set-line-color: #161616;--ueb-grid-axis-line-color: black;--ueb-grid-snap: 16px;--ueb-node-radius: 8px}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-fron-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, 0.5);z-index:1}.ueb-viewport-zoom{color:#4d4d4db7}.ueb-viewport-body{position:relative;height:var(--ueb-viewport-height);width:var(--ueb-viewport-width);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-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.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 black,1px 4px 6px 0 rgba(0, 0, 0, 0.3);will-change:transform}ueb-selector[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{z-index:1}.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:-7px}.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:.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:white;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}ueb-pin{display:block;padding:1px 2px}ueb-selector[data-selecting=false]~ueb-node ueb-pin:hover{background:var(--ueb-node-value-background)}ueb-selector[data-selecting=false]~ueb-node ueb-pin .ueb-node-value-icon{cursor:crosshair}.ueb-node-value-icon{display:inline-block;position:relative;width:.85em;height:.85em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-node-value-icon::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-node-value-color);border-radius:50%}.ueb-node-value-fill::before{background:var(--ueb-node-value-color)}.ueb-node-value-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-node-value-color)}.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-selector>*{visibility:visible}ueb-selector[data-selecting=true]{visibility:visible;top:min(var(--ueb-select-from-y)*1px,var(--ueb-select-to-y)*1px);left:min(var(--ueb-select-from-x)*1px,var(--ueb-select-to-x)*1px);width:calc(max(var(--ueb-select-from-x) - var(--ueb-select-to-x),var(--ueb-select-to-x) - var(--ueb-select-from-x))*1px);height:calc(max(var(--ueb-select-from-y) - var(--ueb-select-to-y),var(--ueb-select-to-y) - var(--ueb-select-from-y))*1px)}/*# sourceMappingURL=ueblueprint-style.css.map */ diff --git a/css/ueblueprint-style.css.map b/css/ueblueprint-style.css.map new file mode 100644 index 0000000..80438df --- /dev/null +++ b/css/ueblueprint-style.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["../scss/ueblueprint-style.css"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,MACI,sBACA,6BACA,2BACA,sBACA,2BACA,+BACA,kBACA,mCACA,kCACA,sBACA,uBAGJ,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,8BACA,UAGJ,mBACI,gBAGJ,mBACI,kBACA,kCACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,qBAGI,eACA,6CAGJ,iBAEI,mBAGJ,iBAEI,kBAGJ,iBAEI,mBAGJ,iBAEI,iBACA,uDAGJ,iBAEI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBAEI,iBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBAEI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,SACI,cACA,kBACA,sGACA,qCACA,4DACA,sBAGJ,4CACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,iCACA,qCACA,8BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,YACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,QACI,cACA,gBAGJ,0DACI,4CAGJ,yEACI,iBAGJ,qBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,6BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,6CACA,kBAGJ,6BACI,uCAGJ,4BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,mDAGJ,cACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,eACI,mBAGJ,kCACI,mBACA,iEACA,kEACA,yHACA","file":"ueblueprint-style.css"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 0c50009..5a3f06a 100644 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -327,21 +327,21 @@ class GraphElement extends HTMLElement { } } -document.createElement("div"); - -const tagReplacement = { - '&': '&', - '<': '<', - '>': '>', - "'": ''', - '"': '"' -}; - -function sanitizeText$1(value) { - if (value.constructor === String) { - return value.replace(/[&<>'"]/g, tag => tagReplacement[tag]) - } - return value +document.createElement("div"); + +const tagReplacement = { + '&': '&', + '<': '<', + '>': '>', + "'": ''', + '"': '"' +}; + +function sanitizeText$1(value) { + if (value.constructor === String) { + return value.replace(/[&<>'"]/g, tag => tagReplacement[tag]) + } + return value } /** @@ -368,51 +368,51 @@ class Template { } } -/** - * @typedef {import("../graph/GraphSelector").default} GraphSelector - */ -class SelectorTemplate extends Template { - - /** - * Applies the style to the element. - * @param {GraphSelector} selector Selector element - */ - apply(selector) { - super.apply(selector); - selector.classList.add("ueb-selector"); - selector.dataset.selecting = "false"; - } - - /** - * Applies the style relative to selection beginning. - * @param {GraphSelector} selector Selector element - */ - applyStartSelecting(selector, initialPosition) { - // Set initial position - selector.style.setProperty("--ueb-select-from-x", sanitizeText$1(initialPosition[0])); - selector.style.setProperty("--ueb-select-from-y", sanitizeText$1(initialPosition[1])); - // Final position coincide with the initial position, at the beginning of selection - selector.style.setProperty("--ueb-select-to-x", sanitizeText$1(initialPosition[0])); - selector.style.setProperty("--ueb-select-to-y", sanitizeText$1(initialPosition[1])); - selector.dataset.selecting = "true"; - } - - /** - * Applies the style relative to selection. - * @param {GraphSelector} selector Selector element - */ - applyDoSelecting(selector, finalPosition) { - selector.style.setProperty("--ueb-select-to-x", sanitizeText$1(finalPosition[0])); - selector.style.setProperty("--ueb-select-to-y", sanitizeText$1(finalPosition[1])); - } - - /** - * Applies the style relative to selection finishing. - * @param {GraphSelector} selector Selector element - */ - applyFinishSelecting(selector, finalPosition) { - selector.dataset.selecting = "false"; - } +/** + * @typedef {import("../graph/GraphSelector").default} GraphSelector + */ +class SelectorTemplate extends Template { + + /** + * Applies the style to the element. + * @param {GraphSelector} selector Selector element + */ + apply(selector) { + super.apply(selector); + selector.classList.add("ueb-selector"); + selector.dataset.selecting = "false"; + } + + /** + * Applies the style relative to selection beginning. + * @param {GraphSelector} selector Selector element + */ + applyStartSelecting(selector, initialPosition) { + // Set initial position + selector.style.setProperty("--ueb-select-from-x", sanitizeText$1(initialPosition[0])); + selector.style.setProperty("--ueb-select-from-y", sanitizeText$1(initialPosition[1])); + // Final position coincide with the initial position, at the beginning of selection + selector.style.setProperty("--ueb-select-to-x", sanitizeText$1(initialPosition[0])); + selector.style.setProperty("--ueb-select-to-y", sanitizeText$1(initialPosition[1])); + selector.dataset.selecting = "true"; + } + + /** + * Applies the style relative to selection. + * @param {GraphSelector} selector Selector element + */ + applyDoSelecting(selector, finalPosition) { + selector.style.setProperty("--ueb-select-to-x", sanitizeText$1(finalPosition[0])); + selector.style.setProperty("--ueb-select-to-y", sanitizeText$1(finalPosition[1])); + } + + /** + * Applies the style relative to selection finishing. + * @param {GraphSelector} selector Selector element + */ + applyFinishSelecting(selector, finalPosition) { + selector.dataset.selecting = "false"; + } } class GraphSelector extends GraphElement { @@ -548,36 +548,36 @@ class BlueprintTemplate extends Template { } } -class Context { - - constructor(target, blueprint, options) { - /** @type {HTMLElement} */ - this.target = target; - /** @type {import("../Blueprint").default}" */ - this.blueprint = blueprint; - this.options = options; - if (options?.wantsFocusCallback ?? false) { - let self = this; - this.blueprintfocusHandler = _ => self.blueprintFocused(); - this.blueprintunfocusHandler = _ => self.blueprintUnfocused(); - this.blueprint.addEventListener("blueprintfocus", this.blueprintfocusHandler); - this.blueprint.addEventListener("blueprintunfocus", this.blueprintunfocusHandler); - } - } - - unlistenDOMElement() { - this.blueprintUnfocused(); - this.blueprint.removeEventListener("blueprintfocus", this.blueprintfocusHandler); - this.blueprint.removeEventListener("blueprintunfocus", this.blueprintunfocusHandler); - } - - - /* Subclasses will probabily override the following methods */ - blueprintFocused() { - } - - blueprintUnfocused() { - } +class Context { + + constructor(target, blueprint, options) { + /** @type {HTMLElement} */ + this.target = target; + /** @type {import("../Blueprint").default}" */ + this.blueprint = blueprint; + this.options = options; + if (options?.wantsFocusCallback ?? false) { + let self = this; + this.blueprintfocusHandler = _ => self.blueprintFocused(); + this.blueprintunfocusHandler = _ => self.blueprintUnfocused(); + this.blueprint.addEventListener("blueprintfocus", this.blueprintfocusHandler); + this.blueprint.addEventListener("blueprintunfocus", this.blueprintunfocusHandler); + } + } + + unlistenDOMElement() { + this.blueprintUnfocused(); + this.blueprint.removeEventListener("blueprintfocus", this.blueprintfocusHandler); + this.blueprint.removeEventListener("blueprintunfocus", this.blueprintunfocusHandler); + } + + + /* Subclasses will probabily override the following methods */ + blueprintFocused() { + } + + blueprintUnfocused() { + } } class TypeInitialization { @@ -833,19 +833,19 @@ class LocalizedTextEntity extends Entity { } } -class PathSymbolEntity extends Entity { - - static attributes = { - value: String - } - - getAttributes() { - return PathSymbolEntity.attributes - } - - toString() { - return this.value - } +class PathSymbolEntity extends Entity { + + static attributes = { + value: String + } + + getAttributes() { + return PathSymbolEntity.attributes + } + + toString() { + return this.value + } } class PinReferenceEntity extends Entity { @@ -1289,28 +1289,28 @@ End Object`; } } -class Copy extends Context { - - constructor(target, blueprint, options = {}) { - options.wantsFocusCallback = true; - super(target, blueprint, options); - this.serializer = new ObjectSerializer(); - let self = this; - this.copyHandle = _ => self.copied(); - } - - blueprintFocused() { - document.body.addEventListener("copy", this.copyHandle); - } - - blueprintUnfocused() { - document.body.removeEventListener("copy", this.copyHandle); - } - - copied() { - const value = this.blueprint.getNodes(true).map(node => this.serializer.write(node.entity)).join("\n"); - navigator.clipboard.writeText(value); - } +class Copy extends Context { + + constructor(target, blueprint, options = {}) { + options.wantsFocusCallback = true; + super(target, blueprint, options); + this.serializer = new ObjectSerializer(); + let self = this; + this.copyHandle = _ => self.copied(); + } + + blueprintFocused() { + document.body.addEventListener("copy", this.copyHandle); + } + + blueprintUnfocused() { + document.body.removeEventListener("copy", this.copyHandle); + } + + copied() { + const value = this.blueprint.getNodes(true).map(node => this.serializer.write(node.entity)).join("\n"); + navigator.clipboard.writeText(value); + } } class Pointing extends Context { @@ -1447,132 +1447,132 @@ class DragScroll extends MouseClickDrag { } } -class KeyboardShortcut extends Context { - - constructor(target, blueprint, options = {}) { - options.wantsFocusCallback = true; - super(target, blueprint, options); - - /** @type {String[]} */ - this.key = this.options.key; - this.ctrlKey = options.ctrlKey ?? false; - this.shiftKey = options.shiftKey ?? false; - this.altKey = options.altKey ?? false; - this.metaKey = options.metaKey ?? false; - - let self = this; - this.keyDownHandler = e => { - if ( - e.code == self.key - && e.ctrlKey === self.ctrlKey - && e.shiftKey === self.shiftKey - && e.altKey === self.altKey - && e.metaKey === self.metaKey - ) { - self.fire(); - } - }; - } - - /** - * - * @param {String} keyString - * @returns {Object} - */ - static keyOptionsParse(options, keyString) { - options.key = keyString; - return options - } - - blueprintFocused() { - document.addEventListener("keydown", this.keyDownHandler); - } - - blueprintUnfocused() { - document.removeEventListener("keydown", this.keyDownHandler); - } - - fire() { - } +class KeyboardShortcut extends Context { + + constructor(target, blueprint, options = {}) { + options.wantsFocusCallback = true; + super(target, blueprint, options); + + /** @type {String[]} */ + this.key = this.options.key; + this.ctrlKey = options.ctrlKey ?? false; + this.shiftKey = options.shiftKey ?? false; + this.altKey = options.altKey ?? false; + this.metaKey = options.metaKey ?? false; + + let self = this; + this.keyDownHandler = e => { + if ( + e.code == self.key + && e.ctrlKey === self.ctrlKey + && e.shiftKey === self.shiftKey + && e.altKey === self.altKey + && e.metaKey === self.metaKey + ) { + self.fire(); + } + }; + } + + /** + * + * @param {String} keyString + * @returns {Object} + */ + static keyOptionsParse(options, keyString) { + options.key = keyString; + return options + } + + blueprintFocused() { + document.addEventListener("keydown", this.keyDownHandler); + } + + blueprintUnfocused() { + document.removeEventListener("keydown", this.keyDownHandler); + } + + fire() { + } } -class Configuration { - - static deleteNodesKeyboardKey = "Delete" +class Configuration { + + static deleteNodesKeyboardKey = "Delete" } -class KeyvoardCanc extends KeyboardShortcut { - - /** - * - * @param {HTMLElement} target - * @param {import("../Blueprint").default} blueprint - * @param {OBject} options - */ - constructor(target, blueprint, options = {}) { - options = KeyboardShortcut.keyOptionsParse(options, Configuration.deleteNodesKeyboardKey); - super(target, blueprint, options); - } - - fire() { - this.blueprint.removeGraphElement(...this.blueprint.getNodes(true)); - } +class KeyvoardCanc extends KeyboardShortcut { + + /** + * + * @param {HTMLElement} target + * @param {import("../Blueprint").default} blueprint + * @param {OBject} options + */ + constructor(target, blueprint, options = {}) { + options = KeyboardShortcut.keyOptionsParse(options, Configuration.deleteNodesKeyboardKey); + super(target, blueprint, options); + } + + fire() { + this.blueprint.removeGraphElement(...this.blueprint.getNodes(true)); + } } -class MouseTracking extends Pointing { - - constructor(target, blueprint, options = {}) { - options.wantsFocusCallback = true; - super(target, blueprint, options); - - let self = this; - this.mousemoveHandler = e => { - self.blueprint.entity.mousePosition = self.getLocation(e); - }; - } - - blueprintFocused() { - this.target.addEventListener("mousemove", this.mousemoveHandler); - } - - blueprintUnfocused() { - this.target.removeEventListener("mousemove", this.mousemoveHandler); - } +class MouseTracking extends Pointing { + + constructor(target, blueprint, options = {}) { + options.wantsFocusCallback = true; + super(target, blueprint, options); + + let self = this; + this.mousemoveHandler = e => { + self.blueprint.entity.mousePosition = self.getLocation(e); + }; + } + + blueprintFocused() { + this.target.addEventListener("mousemove", this.mousemoveHandler); + } + + blueprintUnfocused() { + this.target.removeEventListener("mousemove", this.mousemoveHandler); + } } -/** - * @typedef {import("../graph/GraphPin").default} GraphPin - */ -class PinTemplate extends Template { - - /** - * Computes the html content of the pin. - * @param {GraphPin} pin Pin entity - * @returns The result html - */ - render(pin) { - if (pin.isInput()) { - return html` - - ${sanitizeText$1(pin.getPinDisplayName())} - ` - } else { - return html` - ${sanitizeText$1(pin.getPinDisplayName())} - - ` - } - } - - /** - * Applies the style to the element. - * @param {GraphPin} pin Element of the graph - */ - apply(pin) { - super.apply(pin); - pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText$1(pin.getType())); - pin.clickableElement = pin.querySelector(".ueb-node-value-icon"); - } +/** + * @typedef {import("../graph/GraphPin").default} GraphPin + */ +class PinTemplate extends Template { + + /** + * Computes the html content of the pin. + * @param {GraphPin} pin Pin entity + * @returns The result html + */ + render(pin) { + if (pin.isInput()) { + return html` + + ${sanitizeText$1(pin.getPinDisplayName())} + ` + } else { + return html` + ${sanitizeText$1(pin.getPinDisplayName())} + + ` + } + } + + /** + * Applies the style to the element. + * @param {GraphPin} pin Element of the graph + */ + apply(pin) { + super.apply(pin); + pin.classList.add("ueb-node-" + pin.isInput() ? "input" : "output", "ueb-node-value-" + sanitizeText$1(pin.getType())); + pin.clickableElement = pin.querySelector(".ueb-node-value-icon"); + } } class DragLink extends MouseClickDrag { @@ -1599,51 +1599,51 @@ class DragLink extends MouseClickDrag { } } -/** - * @typedef {import("../graph/GraphLink").default} GraphLink - */ -class LinkTemplate extends Template { - - /** - * Computes the html content of the target element. - * @param {GraphLink} link Link connecting two graph nodes - * @returns The result html - */ - render(link) { - return html` - - - - ` - } - - /** - * Applies the style to the element. - * @param {GraphLink} link Element of the graph - */ - apply(link) { - super.apply(link); - - } - - /** - * Applies the style relative to the source pin location. - * @param {GraphLink} link Link element - */ - applySourceLocation(link, initialPosition) { - // Set initial position - link.style.setProperty("--ueb-link-from-x", sanitizeText(initialPosition[0])); - link.style.setProperty("--ueb-link-from-y", sanitizeText(initialPosition[1])); - } - - /** - * Applies the style relative to the destination pin location. - * @param {GraphLink} link Link element - */ - applyDestinationLocation(link, finalPosition) { - link.style.setProperty("--ueb-link-to-x", sanitizeText(finalPosition[0])); - link.style.setProperty("--ueb-link-to-y", sanitizeText(finalPosition[1])); - } +/** + * @typedef {import("../graph/GraphLink").default} GraphLink + */ +class LinkTemplate extends Template { + + /** + * Computes the html content of the target element. + * @param {GraphLink} link Link connecting two graph nodes + * @returns The result html + */ + render(link) { + return html` + + + + ` + } + + /** + * Applies the style to the element. + * @param {GraphLink} link Element of the graph + */ + apply(link) { + super.apply(link); + + } + + /** + * Applies the style relative to the source pin location. + * @param {GraphLink} link Link element + */ + applySourceLocation(link, initialPosition) { + // Set initial position + link.style.setProperty("--ueb-link-from-x", sanitizeText(initialPosition[0])); + link.style.setProperty("--ueb-link-from-y", sanitizeText(initialPosition[1])); + } + + /** + * Applies the style relative to the destination pin location. + * @param {GraphLink} link Link element + */ + applyDestinationLocation(link, finalPosition) { + link.style.setProperty("--ueb-link-to-x", sanitizeText(finalPosition[0])); + link.style.setProperty("--ueb-link-to-y", sanitizeText(finalPosition[1])); + } } /** @@ -1705,96 +1705,96 @@ class GraphLink extends GraphElement { customElements.define("ueb-link", GraphLink); -class GraphPin extends GraphElement { - - constructor(entity) { - super(entity, new PinTemplate()); - /** @type {import("../entity/PinEntity").default} */ - this.entity; - /** @type {HTMLElement} */ - this.clickableElement = null; - } - - connectedCallback() { - super.connectedCallback(); - new DragLink(this.clickableElement, this.blueprint, { - moveEverywhere: true - }); - } - - /** - * - * @returns {String} - */ - getPinDisplayName() { - return this.entity.PinName - } - - getAttributes() { - return PinEntity.attributes - } - - isInput() { - return this.entity.isInput() - } - - isOutput() { - return this.entity.isOutput() - } - - isConnected() { - return this.entity.isConnected() - } - - getType() { - return this.entity.getType() - } - - /** - * - * @returns {GraphLink} The link created - */ - dragLink() { - let link = new GraphLink(this); - return link - } - - /** - * Returns The exact location where the link originates from or arrives at. - * @returns {Number[]} The location array - */ - getLinkLocation() { - return [0, 0]; - } -} - +class GraphPin extends GraphElement { + + constructor(entity) { + super(entity, new PinTemplate()); + /** @type {import("../entity/PinEntity").default} */ + this.entity; + /** @type {HTMLElement} */ + this.clickableElement = null; + } + + connectedCallback() { + super.connectedCallback(); + new DragLink(this.clickableElement, this.blueprint, { + moveEverywhere: true + }); + } + + /** + * + * @returns {String} + */ + getPinDisplayName() { + return this.entity.PinName + } + + getAttributes() { + return PinEntity.attributes + } + + isInput() { + return this.entity.isInput() + } + + isOutput() { + return this.entity.isOutput() + } + + isConnected() { + return this.entity.isConnected() + } + + getType() { + return this.entity.getType() + } + + /** + * + * @returns {GraphLink} The link created + */ + dragLink() { + let link = new GraphLink(this); + return link + } + + /** + * Returns The exact location where the link originates from or arrives at. + * @returns {Number[]} The location array + */ + getLinkLocation() { + return [0, 0]; + } +} + customElements.define("ueb-pin", GraphPin); -/** - * @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable - */ -class SelectableDraggableTemplate extends Template { - - /** - * Returns the html elements rendered from this template. - * @param {SelectableDraggable} element Element of the graph - */ - applyLocation(element) { - element.style.setProperty("--ueb-position-x", sanitizeText$1(element.location[0])); - element.style.setProperty("--ueb-position-y", sanitizeText$1(element.location[1])); - } - - /** - * Returns the html elements rendered from this template. - * @param {SelectableDraggable} element Element of the graph - */ - applySelected(element) { - if (element.selected) { - element.classList.add("ueb-selected"); - } else { - element.classList.remove("ueb-selected"); - } - } +/** + * @typedef {import("../graph/SelectableDraggable").default} SelectableDraggable + */ +class SelectableDraggableTemplate extends Template { + + /** + * Returns the html elements rendered from this template. + * @param {SelectableDraggable} element Element of the graph + */ + applyLocation(element) { + element.style.setProperty("--ueb-position-x", sanitizeText$1(element.location[0])); + element.style.setProperty("--ueb-position-y", sanitizeText$1(element.location[1])); + } + + /** + * Returns the html elements rendered from this template. + * @param {SelectableDraggable} element Element of the graph + */ + applySelected(element) { + if (element.selected) { + element.classList.add("ueb-selected"); + } else { + element.classList.remove("ueb-selected"); + } + } } /** @@ -2036,47 +2036,47 @@ class GraphNode extends SelectableDraggable { customElements.define("ueb-node", GraphNode); -class Paste extends Context { - - constructor(target, blueprint, options = {}) { - options.wantsFocusCallback = true; - super(target, blueprint, options); - this.serializer = new ObjectSerializer(); - let self = this; - this.pasteHandle = e => self.pasted(e.clipboardData.getData("Text")); - } - - blueprintFocused() { - document.body.addEventListener("paste", this.pasteHandle); - } - - blueprintUnfocused() { - document.body.removeEventListener("paste", this.pasteHandle); - } - - pasted(value) { - let top = Number.MAX_SAFE_INTEGER; - let left = Number.MAX_SAFE_INTEGER; - let nodes = this.serializer.readMultiple(value).map(entity => { - let node = new GraphNode(entity); - top = Math.min(top, node.location[1]); - left = Math.min(left, node.location[0]); - return node - }); - if (nodes.length > 0) { - this.blueprint.unselectAll(); - } - let mousePosition = this.blueprint.entity.mousePosition; - this.blueprint.addGraphElement(...nodes); - nodes.forEach(node => { - const locationOffset = [ - mousePosition[0] - left, - mousePosition[1] - top, - ]; - node.addLocation(this.blueprint.compensateTranslation(locationOffset)); - node.setSelected(true); - }); - } +class Paste extends Context { + + constructor(target, blueprint, options = {}) { + options.wantsFocusCallback = true; + super(target, blueprint, options); + this.serializer = new ObjectSerializer(); + let self = this; + this.pasteHandle = e => self.pasted(e.clipboardData.getData("Text")); + } + + blueprintFocused() { + document.body.addEventListener("paste", this.pasteHandle); + } + + blueprintUnfocused() { + document.body.removeEventListener("paste", this.pasteHandle); + } + + pasted(value) { + let top = Number.MAX_SAFE_INTEGER; + let left = Number.MAX_SAFE_INTEGER; + let nodes = this.serializer.readMultiple(value).map(entity => { + let node = new GraphNode(entity); + top = Math.min(top, node.location[1]); + left = Math.min(left, node.location[0]); + return node + }); + if (nodes.length > 0) { + this.blueprint.unselectAll(); + } + let mousePosition = this.blueprint.entity.mousePosition; + this.blueprint.addGraphElement(...nodes); + nodes.forEach(node => { + const locationOffset = [ + mousePosition[0] - left, + mousePosition[1] - top, + ]; + node.addLocation(this.blueprint.compensateTranslation(locationOffset)); + node.setSelected(true); + }); + } } class Select extends MouseClickDrag { @@ -2103,38 +2103,38 @@ class Select extends MouseClickDrag { } } -class Unfocus extends Context { - - constructor(target, blueprint, options = {}) { - options.wantsFocusCallback = true; - super(target, blueprint, options); - - let self = this; - this.clickHandler = e => self.clickedSomewhere(e); - if (this.blueprint.focuse) { - document.addEventListener("click", this.clickHandler); - } - } - - /** - * - * @param {MouseEvent} e - */ - clickedSomewhere(e) { - // If target is inside the blueprint grid - if (e.target.closest("ueb-blueprint")) { - return - } - this.blueprint.setFocused(false); - } - - blueprintFocused() { - document.addEventListener("click", this.clickHandler); - } - - blueprintUnfocused() { - document.removeEventListener("click", this.clickHandler); - } +class Unfocus extends Context { + + constructor(target, blueprint, options = {}) { + options.wantsFocusCallback = true; + super(target, blueprint, options); + + let self = this; + this.clickHandler = e => self.clickedSomewhere(e); + if (this.blueprint.focuse) { + document.addEventListener("click", this.clickHandler); + } + } + + /** + * + * @param {MouseEvent} e + */ + clickedSomewhere(e) { + // If target is inside the blueprint grid + if (e.target.closest("ueb-blueprint")) { + return + } + this.blueprint.setFocused(false); + } + + blueprintFocused() { + document.addEventListener("click", this.clickHandler); + } + + blueprintUnfocused() { + document.removeEventListener("click", this.clickHandler); + } } class MouseWheel extends Pointing { @@ -2560,65 +2560,65 @@ class GeneralSerializer extends Serializer { } } -class CustomSerializer extends GeneralSerializer { - - constructor(objectWriter, entityType) { - super(undefined, entityType); - this.objectWriter = objectWriter; - } - - write(object) { - let result = this.objectWriter(object); - return result - } +class CustomSerializer extends GeneralSerializer { + + constructor(objectWriter, entityType) { + super(undefined, entityType); + this.objectWriter = objectWriter; + } + + write(object) { + let result = this.objectWriter(object); + return result + } } -class ToStringSerializer extends GeneralSerializer { - - constructor(entityType) { - super(undefined, entityType); - } - - write(object) { - let result = object.toString(); - return result - } +class ToStringSerializer extends GeneralSerializer { + + constructor(entityType) { + super(undefined, entityType); + } + + write(object) { + let result = object.toString(); + return result + } } -function initializeSerializerFactory() { - SerializerFactory.registerSerializer( - ObjectEntity, - new ObjectSerializer() - ); - SerializerFactory.registerSerializer( - PinEntity$1, - new GeneralSerializer(v => `Pin (${v})`, PinEntity$1, "", ",", true) - ); - SerializerFactory.registerSerializer( - FunctionReferenceEntity, - new GeneralSerializer(v => `(${v})`, FunctionReferenceEntity, "", ",", false) - ); - SerializerFactory.registerSerializer( - LocalizedTextEntity, - new GeneralSerializer(v => `NSLOCTEXT(${v})`, LocalizedTextEntity, "", ",", false, "", _ => "") - ); - SerializerFactory.registerSerializer( - PinReferenceEntity, - new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "") - ); - SerializerFactory.registerSerializer( - ObjectReferenceEntity, - new CustomSerializer( - /** @param {ObjectReferenceEntity} objectReference */ - objectReference => (objectReference.type ?? "") + ( - objectReference.path - ? objectReference.type ? `'"${objectReference.path}"'` : objectReference.path - : "" - )) - ); - SerializerFactory.registerSerializer(PathSymbolEntity, new ToStringSerializer(PathSymbolEntity)); - SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity)); - SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)); +function initializeSerializerFactory() { + SerializerFactory.registerSerializer( + ObjectEntity, + new ObjectSerializer() + ); + SerializerFactory.registerSerializer( + PinEntity$1, + new GeneralSerializer(v => `Pin (${v})`, PinEntity$1, "", ",", true) + ); + SerializerFactory.registerSerializer( + FunctionReferenceEntity, + new GeneralSerializer(v => `(${v})`, FunctionReferenceEntity, "", ",", false) + ); + SerializerFactory.registerSerializer( + LocalizedTextEntity, + new GeneralSerializer(v => `NSLOCTEXT(${v})`, LocalizedTextEntity, "", ",", false, "", _ => "") + ); + SerializerFactory.registerSerializer( + PinReferenceEntity, + new GeneralSerializer(v => v, PinReferenceEntity, "", " ", false, "", _ => "") + ); + SerializerFactory.registerSerializer( + ObjectReferenceEntity, + new CustomSerializer( + /** @param {ObjectReferenceEntity} objectReference */ + objectReference => (objectReference.type ?? "") + ( + objectReference.path + ? objectReference.type ? `'"${objectReference.path}"'` : objectReference.path + : "" + )) + ); + SerializerFactory.registerSerializer(PathSymbolEntity, new ToStringSerializer(PathSymbolEntity)); + SerializerFactory.registerSerializer(GuidEntity, new ToStringSerializer(GuidEntity)); + SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)); } initializeSerializerFactory(); diff --git a/package.json b/package.json index a20bcb6..53b9438 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "description": "Unreal Engine's Blueprint visualisation library", "main": "ueblueprint.js", "scripts": { - "build": "rollup --config" + "build": "rollup --config && sass scss:css --style=compressed" }, "repository": { "type": "git", @@ -27,9 +27,10 @@ "rollup": "^2.58.0", "rollup-plugin-minify-html-template-literals": "^1.2.0", "rollup-plugin-terser": "^7.0.2", + "sass": "^1.45.1", "terser": "^5.9.0" }, "dependencies": { "parsimmon": "^1.18.0" } -} +} \ No newline at end of file diff --git a/scss/ueblueprint-node-value-type-color.scss b/scss/ueblueprint-node-value-type-color.scss new file mode 100644 index 0000000..4f9aa69 --- /dev/null +++ b/scss/ueblueprint-node-value-type-color.scss @@ -0,0 +1,45 @@ +.ueb { + $ueb-node-value-color : white; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-boolean { + $ueb-node-value-color : #930000; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-integer { + $ueb-node-value-color : #1fe0ad; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-float { + $ueb-node-value-color : #9ffb44; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-vector { + $ueb-node-value-color : #fcc823; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-rotator { + $ueb-node-value-color : #9eb1fc; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-string { + $ueb-node-value-color : #fc00d2; + --ueb-node-value-color : #{$ueb-node-value-color}; + --ueb-node-value-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent); +} + +.ueb-node-value-name { + $ueb-node-value-color : #cb81fc; + --ueb-node-value-color: #{$ueb-node-value-color}; +} + +.ueb-node-value-objectreference { + $ueb-node-value-color : #00a8f2; + --ueb-node-value-color: #{$ueb-node-value-color}; +} \ No newline at end of file diff --git a/scss/ueblueprint-style.css b/scss/ueblueprint-style.css new file mode 100644 index 0000000..d79d31a --- /dev/null +++ b/scss/ueblueprint-style.css @@ -0,0 +1,423 @@ +@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"); +} + +:root { + --ueb-fron-size : 13px; + --ueb-viewport-height : 30rem; + --ueb-viewport-width : 100%; + --ueb-grid-size : 16px; + --ueb-grid-line-width : 2px; + --ueb-grid-line-color : #353535; + --ueb-grid-set : 8; + --ueb-grid-set-line-color : #161616; + --ueb-grid-axis-line-color: black; + --ueb-grid-snap : 16px; + --ueb-node-radius : 8px; +} + +ueb-blueprint { + display : block; + position : relative; + font-family: Roboto, Noto, Oxygen, Ubuntu, "Open Sans", "Helvetica Neue", sans-serif; + font-size : var(--ueb-fron-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, 0.5); + z-index : 1; +} + +.ueb-viewport-zoom { + color: #4d4d4db7; +} + +.ueb-viewport-body { + position : relative; + height : var(--ueb-viewport-height); + width : var(--ueb-viewport-width); + 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 : + /* Axis lines */ + 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)), + /* Dark bigger grid */ + 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), + /* Light grid */ + 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: + /* Axis lines */ + 100% var(--ueb-grid-line-actual-width), + var(--ueb-grid-line-actual-width) 100%, + /* Dark bigger grid */ + 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)), + /* Light grid */ + 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-zoom--.ueb, +.ueb { + /* 16/16 */ + --ueb-scale : 1; + --ueb-grid-actual-size: var(--ueb-grid-size); +} + +.ueb-zoom--1.ueb { + /* 14/16 */ + --ueb-scale: 0.875; +} + +.ueb-zoom--2.ueb { + /* 12/16 */ + --ueb-scale: 0.75; +} + +.ueb-zoom--3.ueb { + /* 10.8/16 */ + --ueb-scale: 0.675; +} + +.ueb-zoom--4.ueb { + /* 8/16 */ + --ueb-scale : 0.5; + --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2); +} + +.ueb-zoom--5.ueb { + /* 6/16 */ + --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 { + /* 12/16 */ + --ueb-scale : 0.2; + --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3); +} + +.ueb-zoom--11.ueb { + /* 12/16 */ + --ueb-scale : 0.166666; + --ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6); +} + +.ueb-zoom--12.ueb { + /* 12/16 */ + --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 black, 1px 4px 6px 0 rgba(0, 0, 0, 0.3); + will-change : transform; +} + +ueb-selector[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 { + z-index: 1; +} + +.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-pin { + display: block; + padding: 1px 2px; +} + +ueb-selector[data-selecting="false"]~ueb-node ueb-pin:hover { + background: var(--ueb-node-value-background); +} + +ueb-selector[data-selecting="false"]~ueb-node ueb-pin .ueb-node-value-icon { + cursor: crosshair; +} + +.ueb-node-value-icon { + display : inline-block; + position : relative; + width : 0.85em; + height : 0.85em; + vertical-align: baseline; + margin : 0 0.4em -1px 0.1em; +} + +.ueb-node-value-icon::before { + content : ""; + display : block; + position : absolute; + top : 0; + right : 0; + bottom : 0; + left : 0; + border : 2px solid var(--ueb-node-value-color); + border-radius: 50%; +} + +.ueb-node-value-fill::before { + background: var(--ueb-node-value-color); +} + +.ueb-node-value-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-node-value-color); +} + +.ueb-selector { + display : block; + position : absolute; + visibility: hidden; + top : 0; + left : 0; + width : 0; + height : 0; + background-image: + /* Top */ + 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))), + /* Bottom */ + 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))), + /* Left */ + 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))), + /* Right */ + 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: + /* Top */ + 100% calc(1px / var(--ueb-scale)), + 100% calc(3px / var(--ueb-scale)), + /* Bottom */ + 100% calc(1px / var(--ueb-scale)), + 100% calc(3px / var(--ueb-scale)), + /* Left */ + calc(1px / var(--ueb-scale)) 100%, + calc(3px / var(--ueb-scale)) 100%, + /* Right */ + calc(1px / var(--ueb-scale)) 100%, + calc(3px / var(--ueb-scale)) 100%; + background-position: + /* Top */ + 0 calc(1px / var(--ueb-scale)), 0 0, + /* Bottom */ + 0 calc(100% - 1px / var(--ueb-scale)), 0 100%, + /* Left */ + calc(1px / var(--ueb-scale)) 0, 0 0, + /* Right */ + calc(100% - 1px / var(--ueb-scale)) 0, 100% 0; + background-repeat: no-repeat; +} + +ueb-selector>* { + visibility: visible; +} + +ueb-selector[data-selecting="true"] { + visibility: visible; + top : min(var(--ueb-select-from-y) * 1px, var(--ueb-select-to-y) * 1px); + left : min(var(--ueb-select-from-x) * 1px, var(--ueb-select-to-x) * 1px); + width : calc(max(var(--ueb-select-from-x) - var(--ueb-select-to-x), var(--ueb-select-to-x) - var(--ueb-select-from-x)) * 1px); + height : calc(max(var(--ueb-select-from-y) - var(--ueb-select-to-y), var(--ueb-select-to-y) - var(--ueb-select-from-y)) * 1px); +} \ No newline at end of file