From c33e36ffe13e0e36ae3aaad9b2aa733161faf7af Mon Sep 17 00:00:00 2001 From: barsdeveloper Date: Mon, 7 Feb 2022 22:41:49 +0100 Subject: [PATCH] Various fixes --- dist/css/ueblueprint-style.css | 2 +- dist/css/ueblueprint-style.css.map | 2 +- dist/ueblueprint.js | 284 +++++++++-------- js/Blueprint.js | 1 + js/Configuration.js | 15 +- js/Utility.js | 6 + js/graph/GraphLink.js | 11 +- js/graph/GraphSelector.js | 2 - js/input/common/Paste.js | 2 +- js/input/mouse/Pointing.js | 5 +- js/template/BlueprintTemplate.js | 16 +- js/template/LinkTemplate.js | 24 +- js/template/PinTemplate.js | 4 +- js/template/SelectorTemplate.js | 4 +- scss/ueblueprint-style.css | 472 ----------------------------- scss/ueblueprint-style.scss | 456 ++++++++++++++++++++++++++++ 16 files changed, 684 insertions(+), 622 deletions(-) delete mode 100755 scss/ueblueprint-style.css create mode 100644 scss/ueblueprint-style.scss diff --git a/dist/css/ueblueprint-style.css b/dist/css/ueblueprint-style.css index b6b9a2d..11ad466 100755 --- a/dist/css/ueblueprint-style.css +++ b/dist/css/ueblueprint-style.css @@ -1 +1 @@ -@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}: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-grid[data-drag-scrolling=true]{cursor:grabbing}.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-grid[data-drag-scrolling=false] 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:.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-grid[data-drag-scrolling=false]{cursor:default}.ueb-grid[data-drag-scrolling=false] ueb-selector[data-selecting=false]~ueb-node ueb-pin:hover{background:var(--ueb-node-value-background);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-positioned{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y))}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[data-selecting=true]{visibility:visible;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>*{visibility:visible}ueb-link{--ueb-width-threshold: 50;display:block;position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-from-x)*1px);width:calc(max(var(--ueb-to-x) - var(--ueb-from-x),var(--ueb-width-threshold))*1px);height:calc(var(--ueb-computed-height)*1px);border:1px solid red}ueb-link svg{width:100%;height:100%;transform:scaleY(clamp(-1, var(--ueb-to-y) - var(--ueb-from-y), 1));overflow:visible}ueb-link svg path{--ueb-width-below-threshold: clamp( /* min */ 0, /* input */ calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))), /* max */ 1);transform:skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad));transform-origin:0 0}/*# sourceMappingURL=ueblueprint-style.css.map */ +@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{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;overflow:hidden}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}.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 #000,1px 4px 6px 0 rgba(0,0,0,.3);will-change:transform}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{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 #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-pin{display:block;padding:1px 2px}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node ueb-pin:hover{background:var(--ueb-node-value-background);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-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-width-threshold: 50;display:block;border:1px solid red}ueb-link svg{width:100%;height:100%;transform:scaleY(clamp(-1, var(--ueb-to-y) - var(--ueb-from-y), 1));overflow:visible}ueb-link svg path{--ueb-width-below-threshold: clamp( /* min */ 0, /* input */ calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))), /* max */ 1);transform:skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad));transform-origin:0 0;stroke-width:2;transition:stroke-width .5s}ueb-link svg path:hover{stroke-width:5}/*# sourceMappingURL=ueblueprint-style.css.map */ diff --git a/dist/css/ueblueprint-style.css.map b/dist/css/ueblueprint-style.css.map index a02007f..78dcf7a 100755 --- a/dist/css/ueblueprint-style.css.map +++ b/dist/css/ueblueprint-style.css.map @@ -1 +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,oCACI,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,iFACI,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,qCACI,eAGJ,+FACI,4CACA,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,gBACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,kCACI,mBACA,wCACA,yCACA,0CACA,4CAGJ,eACI,mBAGJ,SACI,0BACA,cACA,kBACA,wCACA,iCACA,oFAKA,4CACA,qBAGJ,aACI,WACA,YACA,oEACA,iBAGJ,kBAEI,oJAOA,uFACA","file":"ueblueprint-style.css"} \ No newline at end of file +{"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,gBAGJ,kDACI,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,uDACA,sBAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,cACI,UAGJ,+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,QACI,cACA,gBAGJ,mDACI,eAGJ,sFACI,4CACA,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,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,0BACA,cACA,qBAGJ,aACI,WACA,YACA,oEACA,iBAGJ,kBAEI,oJAOA,uFACA,qBACA,eACA,4BAGJ,wBACI","file":"ueblueprint-style.css"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 9cbba82..fdc9ae1 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -1,3 +1,113 @@ +class Configuration { + static fontSize = "13px" + static gridSize = "16" + static gridLineWidth = "2px" + static gridLineColor = "#353535" + static gridSet = "8" + static gridSetLineColor = "#161616" + static gridAxisLineColor = "black" + static gridSnap = "16px" + static nodeRadius = "8px" + static deleteNodesKeyboardKey = "Delete" + static expandGridSize = 400 + static selectAllKeyboardKey = "Ctrl+A" + static keysSeparator = "+" + static linkMinWidth = "20px" + static linkRightSVGPath = (c1, c2) => `M 0 0 C ${c1} 0, ${c2} 0, 50 50 S ${100 - c1} 100, 100 100` + static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100" + static ModifierKeys = [ + "Ctrl", + "Shift", + "Alt", + "Meta" + ] + static Keys = { + /* UE name: JS name */ + "Backspace": "Backspace", + "Tab": "Tab", + "Enter": "Enter", + "Pause": "Pause", + "CapsLock": "CapsLock", + "Escape": "Escape", + "Space": "Space", + "PageUp": "PageUp", + "PageDown": "PageDown", + "End": "End", + "Home": "Home", + "ArrowLeft": "ArrowLeft", + "ArrowUp": "ArrowUp", + "ArrowRight": "ArrowRight", + "ArrowDown": "ArrowDown", + "PrintScreen": "PrintScreen", + "Insert": "Insert", + "Delete": "Delete", + "Digit0": "Digit0", + "Digit1": "Digit1", + "Digit2": "Digit2", + "Digit3": "Digit3", + "Digit4": "Digit4", + "Digit5": "Digit5", + "Digit6": "Digit6", + "Digit7": "Digit7", + "Digit8": "Digit8", + "Digit9": "Digit9", + "A": "KeyA", + "B": "KeyB", + "C": "KeyC", + "D": "KeyD", + "E": "KeyE", + "F": "KeyF", + "G": "KeyG", + "H": "KeyH", + "I": "KeyI", + "K": "KeyK", + "L": "KeyL", + "M": "KeyM", + "N": "KeyN", + "O": "KeyO", + "P": "KeyP", + "Q": "KeyQ", + "R": "KeyR", + "S": "KeyS", + "T": "KeyT", + "U": "KeyU", + "V": "KeyV", + "W": "KeyW", + "X": "KeyX", + "Y": "KeyY", + "Z": "KeyZ", + "Numpad0": "Numpad0", + "Numpad1": "Numpad1", + "Numpad2": "Numpad2", + "Numpad3": "Numpad3", + "Numpad4": "Numpad4", + "Numpad5": "Numpad5", + "Numpad6": "Numpad6", + "Numpad7": "Numpad7", + "Numpad8": "Numpad8", + "Numpad9": "Numpad9", + "NumpadMultiply": "NumpadMultiply", + "NumpadAdd": "NumpadAdd", + "NumpadSubtract": "NumpadSubtract", + "NumpadDecimal": "NumpadDecimal", + "NumpadDivide": "NumpadDivide", + "F1": "F1", + "F2": "F2", + "F3": "F3", + "F4": "F4", + "F5": "F5", + "F6": "F6", + "F7": "F7", + "F8": "F8", + "F9": "F9", + "F10": "F10", + "F11": "F11", + "F12": "F12", + "NumLock": "NumLock", + "ScrollLock": "ScrollLock", + } +} + class OrderedIndexArray { /** @@ -414,7 +524,7 @@ class SelectorTemplate extends Template { // Final position coincide with the initial position, at the beginning of selection selector.style.setProperty("--ueb-to-x", sanitizeText(initialPosition[0])); selector.style.setProperty("--ueb-to-y", sanitizeText(initialPosition[1])); - selector.dataset.selecting = "true"; + selector.blueprint.dataset.selecting = "true"; } /** @@ -431,7 +541,7 @@ class SelectorTemplate extends Template { * @param {GraphSelector} selector Selector element */ applyFinishSelecting(selector) { - selector.dataset.selecting = "false"; + selector.blueprint.dataset.selecting = "false"; } } @@ -449,7 +559,6 @@ class GraphSelector extends GraphElement { * @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element) */ startSelecting(initialPosition) { - initialPosition = this.blueprint.compensateTranslation(initialPosition); this.template.applyStartSelecting(this, initialPosition); this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction); } @@ -459,7 +568,6 @@ class GraphSelector extends GraphElement { * @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element) */ doSelecting(finalPosition) { - finalPosition = this.blueprint.compensateTranslation(finalPosition); this.template.applyDoSelecting(this, finalPosition); this.selectionModel.selectTo(finalPosition); } @@ -534,6 +642,17 @@ class BlueprintTemplate extends Template { apply(blueprint) { super.apply(blueprint); blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`); + Object.entries({ + "--ueb-font-size": sanitizeText(Configuration.fontSize), + "--ueb-grid-size": `calc(${sanitizeText(Configuration.gridSize)} * 1px)`, + "--ueb-grid-line-width": sanitizeText(Configuration.gridLineWidth), + "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor), + "--ueb-grid-set": sanitizeText(Configuration.gridSet), + "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor), + "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor), + "--ueb-grid-snap": sanitizeText(Configuration.gridSnap), + "--ueb-node-radius": sanitizeText(Configuration.nodeRadius) + }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1])); blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header'); blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay'); blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body'); @@ -576,7 +695,7 @@ class BlueprintTemplate extends Template { * @param {Blueprint} blueprint The blueprint element */ applyStartDragScrolling(blueprint) { - blueprint.gridElement.dataset.dragScrolling = true; + blueprint.dataset.dragScrolling = true; } /** @@ -584,106 +703,7 @@ class BlueprintTemplate extends Template { * @param {Blueprint} blueprint The blueprint element */ applyEndDragScrolling(blueprint) { - blueprint.gridElement.dataset.dragScrolling = false; - } -} - -class Configuration { - - static deleteNodesKeyboardKey = "Delete" - static expandGridSize = 400 - static gridSize = 16 - static selectAllKeyboardKey = "Ctrl+A" - static keysSeparator = "+" - static ModifierKeys = [ - "Ctrl", - "Shift", - "Alt", - "Meta" - ] - static Keys = { - "Backspace": "Backspace", - "Tab": "Tab", - "Enter": "Enter", - "Pause": "Pause", - "CapsLock": "CapsLock", - "Escape": "Escape", - "Space": "Space", - "PageUp": "PageUp", - "PageDown": "PageDown", - "End": "End", - "Home": "Home", - "ArrowLeft": "ArrowLeft", - "ArrowUp": "ArrowUp", - "ArrowRight": "ArrowRight", - "ArrowDown": "ArrowDown", - "PrintScreen": "PrintScreen", - "Insert": "Insert", - "Delete": "Delete", - "Digit0": "Digit0", - "Digit1": "Digit1", - "Digit2": "Digit2", - "Digit3": "Digit3", - "Digit4": "Digit4", - "Digit5": "Digit5", - "Digit6": "Digit6", - "Digit7": "Digit7", - "Digit8": "Digit8", - "Digit9": "Digit9", - "A": "KeyA", - "B": "KeyB", - "C": "KeyC", - "D": "KeyD", - "E": "KeyE", - "F": "KeyF", - "G": "KeyG", - "H": "KeyH", - "I": "KeyI", - "K": "KeyK", - "L": "KeyL", - "M": "KeyM", - "N": "KeyN", - "O": "KeyO", - "P": "KeyP", - "Q": "KeyQ", - "R": "KeyR", - "S": "KeyS", - "T": "KeyT", - "U": "KeyU", - "V": "KeyV", - "W": "KeyW", - "X": "KeyX", - "Y": "KeyY", - "Z": "KeyZ", - "Numpad0": "Numpad0", - "Numpad1": "Numpad1", - "Numpad2": "Numpad2", - "Numpad3": "Numpad3", - "Numpad4": "Numpad4", - "Numpad5": "Numpad5", - "Numpad6": "Numpad6", - "Numpad7": "Numpad7", - "Numpad8": "Numpad8", - "Numpad9": "Numpad9", - "NumpadMultiply": "NumpadMultiply", - "NumpadAdd": "NumpadAdd", - "NumpadSubtract": "NumpadSubtract", - "NumpadDecimal": "NumpadDecimal", - "NumpadDivide": "NumpadDivide", - "F1": "F1", - "F2": "F2", - "F3": "F3", - "F4": "F4", - "F5": "F5", - "F6": "F6", - "F7": "F7", - "F8": "F8", - "F9": "F9", - "F10": "F10", - "F11": "F11", - "F12": "F12", - "NumLock": "NumLock", - "ScrollLock": "ScrollLock", + blueprint.dataset.dragScrolling = false; } } @@ -756,6 +776,12 @@ class Utility { return getComputedStyle(element).getPropertyValue("--ueb-scale") } + /** + * + * @param {Number[]} viewportLocation + * @param {HTMLElement} movementElement + * @returns + */ static convertLocation(viewportLocation, movementElement) { const scaleCorrection = 1 / Utility.getScale(movementElement); const targetOffset = movementElement.getBoundingClientRect(); @@ -1132,7 +1158,7 @@ function getDefaultExportFromCjs (x) { var parsimmon_umd_min = {exports: {}}; (function (module, exports) { -!function(n,t){module.exports=t();}("undefined"!=typeof self?self:commonjsGlobal,function(){return function(n){var t={};function r(e){if(t[e])return t[e].exports;var u=t[e]={i:e,l:!1,exports:{}};return n[e].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=n,r.c=t,r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e});},r.r=function(n){Object.defineProperty(n,"__esModule",{value:!0});},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},r.p="",r(r.s=0)}([function(n,t,r){function e(n){if(!(this instanceof e))return new e(n);this._=n;}var u=e.prototype;function o(n,t){for(var r=0;r>7),buf:function(n){var t=i(function(n,t,r,e){return n.concat(r===e.length-1?Buffer.from([t,0]).readUInt16BE(0):e.readUInt16BE(r))},[],n);return Buffer.from(f(function(n){return (n<<1&65535)>>8},t))}(r.buf)};}),r}function c(){return "undefined"!=typeof Buffer}function s(){if(!c())throw new Error("Buffer global does not exist; please use webpack if you need to parse Buffers in the browser.")}function l(n){s();var t=i(function(n,t){return n+t},0,n);if(t%8!=0)throw new Error("The bits ["+n.join(", ")+"] add up to "+t+" which is not an even number of bytes; the total should be divisible by 8");var r,u=t/8,o=(r=function(n){return n>48},i(function(n,t){return n||(r(t)?t:n)},null,n));if(o)throw new Error(o+" bit range requested exceeds 48 bit (6 byte) Number max.");return new e(function(t,r){var e=u+r;return e>t.length?x(r,u.toString()+" bytes"):b(e,i(function(n,t){var r=a(t,n.buf);return {coll:n.coll.concat(r.v),buf:r.buf}},{coll:[],buf:t.slice(r,e)},n).coll)})}function p(n,t){return new e(function(r,e){return s(),e+t>r.length?x(e,t+" bytes for "+n):b(e+t,r.slice(e,e+t))})}function h(n,t){if("number"!=typeof(r=t)||Math.floor(r)!==r||t<0||t>6)throw new Error(n+" requires integer length in range [0, 6].");var r;}function d(n){return h("uintBE",n),p("uintBE("+n+")",n).map(function(t){return t.readUIntBE(0,n)})}function v(n){return h("uintLE",n),p("uintLE("+n+")",n).map(function(t){return t.readUIntLE(0,n)})}function g(n){return h("intBE",n),p("intBE("+n+")",n).map(function(t){return t.readIntBE(0,n)})}function m(n){return h("intLE",n),p("intLE("+n+")",n).map(function(t){return t.readIntLE(0,n)})}function y(n){return n instanceof e}function E(n){return "[object Array]"==={}.toString.call(n)}function w(n){return c()&&Buffer.isBuffer(n)}function b(n,t){return {status:!0,index:n,value:t,furthest:-1,expected:[]}}function x(n,t){return E(t)||(t=[t]),{status:!1,index:-1,value:null,furthest:n,expected:t}}function B(n,t){if(!t)return n;if(n.furthest>t.furthest)return n;var r=n.furthest===t.furthest?function(n,t){if(function(){if(void 0!==e._supportsSet)return e._supportsSet;var n="undefined"!=typeof Set;return e._supportsSet=n,n}()&&Array.from){for(var r=new Set(n),u=0;u=0;){if(i in r){e=r[i].line,0===o&&(o=r[i].lineStart);break}"\n"===n.charAt(i)&&(u++,0===o&&(o=i+1)),i--;}var f=e+u,a=t-o;return r[t]={line:f,lineStart:o},{offset:t,line:f+1,column:a+1}}function _(n){if(!y(n))throw new Error("not a parser: "+n)}function L(n,t){return "string"==typeof n?n.charAt(t):n[t]}function O(n){if("number"!=typeof n)throw new Error("not a number: "+n)}function k(n){if("function"!=typeof n)throw new Error("not a function: "+n)}function P(n){if("string"!=typeof n)throw new Error("not a string: "+n)}var q=2,A=3,I=8,F=5*I,M=4*I,z=" ";function R(n,t){return new Array(t+1).join(n)}function U(n,t,r){var e=t-n.length;return e<=0?n:R(r,e)+n}function W(n,t,r,e){return {from:n-t>0?n-t:0,to:n+r>e?e:n+r}}function D(n,t){var r,e,u,o,a,c=t.index,s=c.offset,l=1;if(s===n.length)return "Got the end of the input";if(w(n)){var p=s-s%I,h=s-p,d=W(p,F,M+I,n.length),v=f(function(n){return f(function(n){return U(n.toString(16),2,"0")},n)},function(n,t){var r=n.length,e=[],u=0;if(r<=t)return [n.slice()];for(var o=0;o=4&&(r+=1),l=2,u=f(function(n){return n.length<=4?n.join(" "):n.slice(0,4).join(" ")+" "+n.slice(4).join(" ")},v),(a=(8*(o.to>0?o.to-1:o.to)).toString(16).length)<2&&(a=2);}else {var g=n.split(/\r\n|[\n\r\u2028\u2029]/);r=c.column-1,e=c.line-1,o=W(e,q,A,g.length),u=g.slice(o.from,o.to),a=o.to.toString().length;}var m=e-o.from;return w(n)&&(a=(8*(o.to>0?o.to-1:o.to)).toString(16).length)<2&&(a=2),i(function(t,e,u){var i,f=u===m,c=f?"> ":z;return i=w(n)?U((8*(o.from+u)).toString(16),a,"0"):U((o.from+u+1).toString(),a," "),[].concat(t,[c+i+" | "+e],f?[z+R(" ",a)+" | "+U("",r," ")+R("^",l)]:[])},[],u).join("\n")}function N(n,t){return ["\n","-- PARSING FAILED "+R("-",50),"\n\n",D(n,t),"\n\n",(r=t.expected,1===r.length?"Expected:\n\n"+r[0]:"Expected one of the following: \n\n"+r.join(", ")),"\n"].join("");var r;}function G(n){return void 0!==n.flags?n.flags:[n.global?"g":"",n.ignoreCase?"i":"",n.multiline?"m":"",n.unicode?"u":"",n.sticky?"y":""].join("")}function C(){for(var n=[].slice.call(arguments),t=n.length,r=0;r=2?O(t):t=0;var r=function(n){return RegExp("^(?:"+n.source+")",G(n))}(n),u=""+n;return e(function(n,e){var o=r.exec(n.slice(e));if(o){if(0<=t&&t<=o.length){var i=o[0],f=o[t];return b(e+i.length,f)}return x(e,"valid match group (0 to "+o.length+") in "+u)}return x(e,u)})}function X(n){return e(function(t,r){return b(r,n)})}function Y(n){return e(function(t,r){return x(r,n)})}function Z(n){if(y(n))return e(function(t,r){var e=n._(t,r);return e.index=r,e.value="",e});if("string"==typeof n)return Z(K(n));if(n instanceof RegExp)return Z(Q(n));throw new Error("not a string, regexp, or parser: "+n)}function $(n){return _(n),e(function(t,r){var e=n._(t,r),u=t.slice(r,e.index);return e.status?x(r,'not "'+u+'"'):b(r,null)})}function nn(n){return k(n),e(function(t,r){var e=L(t,r);return r=n.length?x(t,"any character/byte"):b(t+1,L(n,t))}),on=e(function(n,t){return b(n.length,n.slice(t))}),fn=e(function(n,t){return t=0}).desc(t)},e.optWhitespace=pn,e.Parser=e,e.range=function(n,t){return nn(function(r){return n<=r&&r<=t}).desc(n+"-"+t)},e.regex=Q,e.regexp=Q,e.sepBy=V,e.sepBy1=H,e.seq=C,e.seqMap=J,e.seqObj=function(){for(var n,t={},r=0,u=(n=arguments,Array.prototype.slice.call(n)),o=u.length,i=0;i255)throw new Error("Value specified to byte constructor ("+n+"=0x"+n.toString(16)+") is larger in value than a single byte.");var t=(n>15?"0x":"0x0")+n.toString(16);return e(function(r,e){var u=L(r,e);return u===n?b(e+1,u):x(e,t)})},buffer:function(n){return p("buffer",n).map(function(n){return Buffer.from(n)})},encodedString:function(n,t){return p("string",t).map(function(t){return t.toString(n)})},uintBE:d,uint8BE:d(1),uint16BE:d(2),uint32BE:d(4),uintLE:v,uint8LE:v(1),uint16LE:v(2),uint32LE:v(4),intBE:g,int8BE:g(1),int16BE:g(2),int32BE:g(4),intLE:m,int8LE:m(1),int16LE:m(2),int32LE:m(4),floatBE:p("floatBE",4).map(function(n){return n.readFloatBE(0)}),floatLE:p("floatLE",4).map(function(n){return n.readFloatLE(0)}),doubleBE:p("doubleBE",8).map(function(n){return n.readDoubleBE(0)}),doubleLE:p("doubleLE",8).map(function(n){return n.readDoubleLE(0)})},n.exports=e;}])}); +!function(n,t){module.exports=t();}("undefined"!=typeof self?self:commonjsGlobal,function(){return function(n){var t={};function r(e){if(t[e])return t[e].exports;var u=t[e]={i:e,l:!1,exports:{}};return n[e].call(u.exports,u,u.exports,r),u.l=!0,u.exports}return r.m=n,r.c=t,r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e});},r.r=function(n){Object.defineProperty(n,"__esModule",{value:!0});},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},r.p="",r(r.s=0)}([function(n,t,r){function e(n){if(!(this instanceof e))return new e(n);this._=n;}var u=e.prototype;function o(n,t){for(var r=0;r>7),buf:function(n){var t=i(function(n,t,r,e){return n.concat(r===e.length-1?Buffer.from([t,0]).readUInt16BE(0):e.readUInt16BE(r))},[],n);return Buffer.from(a(function(n){return (n<<1&65535)>>8},t))}(r.buf)};}),r}function c(){return "undefined"!=typeof Buffer}function s(){if(!c())throw new Error("Buffer global does not exist; please use webpack if you need to parse Buffers in the browser.")}function l(n){s();var t=i(function(n,t){return n+t},0,n);if(t%8!=0)throw new Error("The bits ["+n.join(", ")+"] add up to "+t+" which is not an even number of bytes; the total should be divisible by 8");var r,u=t/8,o=(r=function(n){return n>48},i(function(n,t){return n||(r(t)?t:n)},null,n));if(o)throw new Error(o+" bit range requested exceeds 48 bit (6 byte) Number max.");return new e(function(t,r){var e=u+r;return e>t.length?x(r,u.toString()+" bytes"):b(e,i(function(n,t){var r=f(t,n.buf);return {coll:n.coll.concat(r.v),buf:r.buf}},{coll:[],buf:t.slice(r,e)},n).coll)})}function h(n,t){return new e(function(r,e){return s(),e+t>r.length?x(e,t+" bytes for "+n):b(e+t,r.slice(e,e+t))})}function p(n,t){if("number"!=typeof(r=t)||Math.floor(r)!==r||t<0||t>6)throw new Error(n+" requires integer length in range [0, 6].");var r;}function d(n){return p("uintBE",n),h("uintBE("+n+")",n).map(function(t){return t.readUIntBE(0,n)})}function v(n){return p("uintLE",n),h("uintLE("+n+")",n).map(function(t){return t.readUIntLE(0,n)})}function g(n){return p("intBE",n),h("intBE("+n+")",n).map(function(t){return t.readIntBE(0,n)})}function m(n){return p("intLE",n),h("intLE("+n+")",n).map(function(t){return t.readIntLE(0,n)})}function y(n){return n instanceof e}function E(n){return "[object Array]"==={}.toString.call(n)}function w(n){return c()&&Buffer.isBuffer(n)}function b(n,t){return {status:!0,index:n,value:t,furthest:-1,expected:[]}}function x(n,t){return E(t)||(t=[t]),{status:!1,index:-1,value:null,furthest:n,expected:t}}function B(n,t){if(!t)return n;if(n.furthest>t.furthest)return n;var r=n.furthest===t.furthest?function(n,t){if(function(){if(void 0!==e._supportsSet)return e._supportsSet;var n="undefined"!=typeof Set;return e._supportsSet=n,n}()&&Array.from){for(var r=new Set(n),u=0;u=0;){if(i in r){e=r[i].line,0===o&&(o=r[i].lineStart);break}("\n"===n.charAt(i)||"\r"===n.charAt(i)&&"\n"!==n.charAt(i+1))&&(u++,0===o&&(o=i+1)),i--;}var a=e+u,f=t-o;return r[t]={line:a,lineStart:o},{offset:t,line:a+1,column:f+1}}function _(n){if(!y(n))throw new Error("not a parser: "+n)}function L(n,t){return "string"==typeof n?n.charAt(t):n[t]}function O(n){if("number"!=typeof n)throw new Error("not a number: "+n)}function k(n){if("function"!=typeof n)throw new Error("not a function: "+n)}function P(n){if("string"!=typeof n)throw new Error("not a string: "+n)}var q=2,A=3,I=8,F=5*I,M=4*I,z=" ";function R(n,t){return new Array(t+1).join(n)}function U(n,t,r){var e=t-n.length;return e<=0?n:R(r,e)+n}function W(n,t,r,e){return {from:n-t>0?n-t:0,to:n+r>e?e:n+r}}function D(n,t){var r,e,u,o,f,c=t.index,s=c.offset,l=1;if(s===n.length)return "Got the end of the input";if(w(n)){var h=s-s%I,p=s-h,d=W(h,F,M+I,n.length),v=a(function(n){return a(function(n){return U(n.toString(16),2,"0")},n)},function(n,t){var r=n.length,e=[],u=0;if(r<=t)return [n.slice()];for(var o=0;o=4&&(r+=1),l=2,u=a(function(n){return n.length<=4?n.join(" "):n.slice(0,4).join(" ")+" "+n.slice(4).join(" ")},v),(f=(8*(o.to>0?o.to-1:o.to)).toString(16).length)<2&&(f=2);}else {var g=n.split(/\r\n|[\n\r\u2028\u2029]/);r=c.column-1,e=c.line-1,o=W(e,q,A,g.length),u=g.slice(o.from,o.to),f=o.to.toString().length;}var m=e-o.from;return w(n)&&(f=(8*(o.to>0?o.to-1:o.to)).toString(16).length)<2&&(f=2),i(function(t,e,u){var i,a=u===m,c=a?"> ":z;return i=w(n)?U((8*(o.from+u)).toString(16),f,"0"):U((o.from+u+1).toString(),f," "),[].concat(t,[c+i+" | "+e],a?[z+R(" ",f)+" | "+U("",r," ")+R("^",l)]:[])},[],u).join("\n")}function N(n,t){return ["\n","-- PARSING FAILED "+R("-",50),"\n\n",D(n,t),"\n\n",(r=t.expected,1===r.length?"Expected:\n\n"+r[0]:"Expected one of the following: \n\n"+r.join(", ")),"\n"].join("");var r;}function G(n){return void 0!==n.flags?n.flags:[n.global?"g":"",n.ignoreCase?"i":"",n.multiline?"m":"",n.unicode?"u":"",n.sticky?"y":""].join("")}function C(){for(var n=[].slice.call(arguments),t=n.length,r=0;r=2?O(t):t=0;var r=function(n){return RegExp("^(?:"+n.source+")",G(n))}(n),u=""+n;return e(function(n,e){var o=r.exec(n.slice(e));if(o){if(0<=t&&t<=o.length){var i=o[0],a=o[t];return b(e+i.length,a)}return x(e,"valid match group (0 to "+o.length+") in "+u)}return x(e,u)})}function X(n){return e(function(t,r){return b(r,n)})}function Y(n){return e(function(t,r){return x(r,n)})}function Z(n){if(y(n))return e(function(t,r){var e=n._(t,r);return e.index=r,e.value="",e});if("string"==typeof n)return Z(K(n));if(n instanceof RegExp)return Z(Q(n));throw new Error("not a string, regexp, or parser: "+n)}function $(n){return _(n),e(function(t,r){var e=n._(t,r),u=t.slice(r,e.index);return e.status?x(r,'not "'+u+'"'):b(r,null)})}function nn(n){return k(n),e(function(t,r){var e=L(t,r);return r=n.length?x(t,"any character/byte"):b(t+1,L(n,t))}),on=e(function(n,t){return b(n.length,n.slice(t))}),an=e(function(n,t){return t=0}).desc(t)},e.optWhitespace=hn,e.Parser=e,e.range=function(n,t){return nn(function(r){return n<=r&&r<=t}).desc(n+"-"+t)},e.regex=Q,e.regexp=Q,e.sepBy=V,e.sepBy1=H,e.seq=C,e.seqMap=J,e.seqObj=function(){for(var n,t={},r=0,u=(n=arguments,Array.prototype.slice.call(n)),o=u.length,i=0;i255)throw new Error("Value specified to byte constructor ("+n+"=0x"+n.toString(16)+") is larger in value than a single byte.");var t=(n>15?"0x":"0x0")+n.toString(16);return e(function(r,e){var u=L(r,e);return u===n?b(e+1,u):x(e,t)})},buffer:function(n){return h("buffer",n).map(function(n){return Buffer.from(n)})},encodedString:function(n,t){return h("string",t).map(function(t){return t.toString(n)})},uintBE:d,uint8BE:d(1),uint16BE:d(2),uint32BE:d(4),uintLE:v,uint8LE:v(1),uint16LE:v(2),uint32LE:v(4),intBE:g,int8BE:g(1),int16BE:g(2),int32BE:g(4),intLE:m,int8LE:m(1),int16LE:m(2),int32LE:m(4),floatBE:h("floatBE",4).map(function(n){return n.readFloatBE(0)}),floatLE:h("floatLE",4).map(function(n){return n.readFloatLE(0)}),doubleBE:h("doubleBE",8).map(function(n){return n.readDoubleBE(0)}),doubleLE:h("doubleLE",8).map(function(n){return n.readDoubleLE(0)})},n.exports=e;}])}); }(parsimmon_umd_min)); var Parsimmon = /*@__PURE__*/getDefaultExportFromCjs(parsimmon_umd_min.exports); @@ -1484,7 +1510,7 @@ class LinkTemplate extends Template { render(link) { return html` - + ` } @@ -1496,29 +1522,32 @@ class LinkTemplate extends Template { apply(link) { super.apply(link); link.classList.add("ueb-positioned"); + link.pathElement = link.querySelector("path"); } /** * Applies the style relative to the source pin location. * @param {GraphLink} link Link element */ - applySourceLocation(link, initialPosition) { + applySourceLocation(link) { link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0"); // Set initial position - link.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0])); - link.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1])); + link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0])); + link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1])); } /** * Applies the style relative to the destination pin location. * @param {GraphLink} link Link element */ - applyDestinationLocation(link, finalPosition) { - link.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0])); - link.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1])); - const height = Math.abs(link.style.getPropertyValue("--ueb-from-y") - finalPosition[1]); - let skew = Math.atan(height / (finalPosition[0] - link.style.getPropertyValue("--ueb-from-x"))) - Math.PI / 2; - link.style.setProperty("--ueb-link-skew", skew); + applyDestinationLocation(link) { + link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0])); + link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1])); + const r = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1) + / Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1); + const d = Configuration.linkRightSVGPath(20, Math.max(40 / r, 30)); + // TODO move to CSS when Firefox will support property d + link.pathElement.setAttribute("d", d); } } @@ -1526,7 +1555,6 @@ class LinkTemplate extends Template { * @typedef {import("./GraphPin").default} GraphPin */ class GraphLink extends GraphElement { - /** @type {GraphPin} */ #source /** @type {GraphPin} */ @@ -1543,7 +1571,11 @@ class GraphLink extends GraphElement { super({}, new LinkTemplate()); /** @type {import("../template/LinkTemplate").default} */ this.template; + /** @type {SVGPathElement} */ + this.pathElement = null; this.originatesFromInput = false; + this.sourceLocation = [0, 0]; + this.destinationLocation = [0, 0]; this.setSourcePin(source); this.setDestinationPin(destination); } @@ -1552,14 +1584,16 @@ class GraphLink extends GraphElement { if (location == null) { location = this.#source.template.getLinkLocation(this.#source); } - this.template.applySourceLocation(this, location); + this.sourceLocation = location; + this.template.applySourceLocation(this); } setDestinationLocation(location) { if (location == null) { location = this.#destination.template.getLinkLocation(this.#destination); } - this.template.applyDestinationLocation(this, location); + this.destinationLocation = location; + this.template.applyDestinationLocation(this); } @@ -1641,9 +1675,9 @@ class PinTemplate extends Template { */ getLinkLocation(pin) { const rect = pin.querySelector(".ueb-node-value-icon").getBoundingClientRect(); - return Utility.convertLocation( + return pin.blueprint.compensateTranslation(Utility.convertLocation( [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2], - pin.blueprint.gridElement) + pin.blueprint.gridElement)) } } @@ -1660,7 +1694,10 @@ class Pointing extends Context { * @returns */ locationFromEvent(mouseEvent) { - return Utility.convertLocation([mouseEvent.clientX, mouseEvent.clientY], this.movementSpace) + return this.blueprint.compensateTranslation( + Utility.convertLocation( + [mouseEvent.clientX, mouseEvent.clientY], + this.movementSpace)) } } @@ -2357,7 +2394,7 @@ class Paste extends Context { mousePosition[0] - left, mousePosition[1] - top, ]; - node.addLocation(this.blueprint.compensateTranslation(locationOffset)); + node.addLocation(locationOffset); node.setSelected(true); node.snapToGrid(); }); @@ -2563,6 +2600,7 @@ class Blueprint extends GraphElement { new Select(this.getGridDOMElement(), this, { clickButton: 0, exitAnyButton: true, + looseTarget: true, moveEverywhere: true, }), new MouseScrollGraph(this.getGridDOMElement(), this, { diff --git a/js/Blueprint.js b/js/Blueprint.js index 080195a..c35d66b 100755 --- a/js/Blueprint.js +++ b/js/Blueprint.js @@ -104,6 +104,7 @@ export default class Blueprint extends GraphElement { new Select(this.getGridDOMElement(), this, { clickButton: 0, exitAnyButton: true, + looseTarget: true, moveEverywhere: true, }), new MouseScrollGraph(this.getGridDOMElement(), this, { diff --git a/js/Configuration.js b/js/Configuration.js index 4094053..0b06d17 100755 --- a/js/Configuration.js +++ b/js/Configuration.js @@ -1,10 +1,20 @@ export default class Configuration { - + static fontSize = "13px" + static gridSize = "16" + static gridLineWidth = "2px" + static gridLineColor = "#353535" + static gridSet = "8" + static gridSetLineColor = "#161616" + static gridAxisLineColor = "black" + static gridSnap = "16px" + static nodeRadius = "8px" static deleteNodesKeyboardKey = "Delete" static expandGridSize = 400 - static gridSize = 16 static selectAllKeyboardKey = "Ctrl+A" static keysSeparator = "+" + static linkMinWidth = "20px" + static linkRightSVGPath = (c1, c2) => `M 0 0 C ${c1} 0, ${c2} 0, 50 50 S ${100 - c1} 100, 100 100` + static linkLeftSVGPath = "M 100 0 c 20 0, 30 0, 50 50 S 70 100, 100 100" static ModifierKeys = [ "Ctrl", "Shift", @@ -12,6 +22,7 @@ export default class Configuration { "Meta" ] static Keys = { + /* UE name: JS name */ "Backspace": "Backspace", "Tab": "Tab", "Enter": "Enter", diff --git a/js/Utility.js b/js/Utility.js index dd53a4a..67251e2 100755 --- a/js/Utility.js +++ b/js/Utility.js @@ -10,6 +10,12 @@ export default class Utility { return getComputedStyle(element).getPropertyValue("--ueb-scale") } + /** + * + * @param {Number[]} viewportLocation + * @param {HTMLElement} movementElement + * @returns + */ static convertLocation(viewportLocation, movementElement) { const scaleCorrection = 1 / Utility.getScale(movementElement) const targetOffset = movementElement.getBoundingClientRect() diff --git a/js/graph/GraphLink.js b/js/graph/GraphLink.js index 911339c..f33638a 100755 --- a/js/graph/GraphLink.js +++ b/js/graph/GraphLink.js @@ -6,7 +6,6 @@ import LinkTemplate from "../template/LinkTemplate" * @typedef {import("./GraphPin").default} GraphPin */ export default class GraphLink extends GraphElement { - /** @type {GraphPin} */ #source /** @type {GraphPin} */ @@ -23,7 +22,11 @@ export default class GraphLink extends GraphElement { super({}, new LinkTemplate()) /** @type {import("../template/LinkTemplate").default} */ this.template + /** @type {SVGPathElement} */ + this.pathElement = null this.originatesFromInput = false + this.sourceLocation = [0, 0] + this.destinationLocation = [0, 0] this.setSourcePin(source) this.setDestinationPin(destination) } @@ -32,14 +35,16 @@ export default class GraphLink extends GraphElement { if (location == null) { location = this.#source.template.getLinkLocation(this.#source) } - this.template.applySourceLocation(this, location) + this.sourceLocation = location + this.template.applySourceLocation(this) } setDestinationLocation(location) { if (location == null) { location = this.#destination.template.getLinkLocation(this.#destination) } - this.template.applyDestinationLocation(this, location) + this.destinationLocation = location + this.template.applyDestinationLocation(this) } diff --git a/js/graph/GraphSelector.js b/js/graph/GraphSelector.js index 4e8fa7d..7b4b547 100755 --- a/js/graph/GraphSelector.js +++ b/js/graph/GraphSelector.js @@ -16,7 +16,6 @@ export default class GraphSelector extends GraphElement { * @param {number[]} initialPosition - Selection rectangle initial position (relative to the .ueb-grid element) */ startSelecting(initialPosition) { - initialPosition = this.blueprint.compensateTranslation(initialPosition) this.template.applyStartSelecting(this, initialPosition) this.selectionModel = new FastSelectionModel(initialPosition, this.blueprint.getNodes(), this.blueprint.nodeBoundariesSupplier, this.blueprint.nodeSelectToggleFunction) } @@ -26,7 +25,6 @@ export default class GraphSelector extends GraphElement { * @param {number[]} finalPosition - Selection rectangle final position (relative to the .ueb-grid element) */ doSelecting(finalPosition) { - finalPosition = this.blueprint.compensateTranslation(finalPosition) this.template.applyDoSelecting(this, finalPosition) this.selectionModel.selectTo(finalPosition) } diff --git a/js/input/common/Paste.js b/js/input/common/Paste.js index 04781c6..cbc8236 100755 --- a/js/input/common/Paste.js +++ b/js/input/common/Paste.js @@ -43,7 +43,7 @@ export default class Paste extends Context { mousePosition[0] - left, mousePosition[1] - top, ] - node.addLocation(this.blueprint.compensateTranslation(locationOffset)) + node.addLocation(locationOffset) node.setSelected(true) node.snapToGrid() }) diff --git a/js/input/mouse/Pointing.js b/js/input/mouse/Pointing.js index 2d15d70..616c1c4 100755 --- a/js/input/mouse/Pointing.js +++ b/js/input/mouse/Pointing.js @@ -14,6 +14,9 @@ export default class Pointing extends Context { * @returns */ locationFromEvent(mouseEvent) { - return Utility.convertLocation([mouseEvent.clientX, mouseEvent.clientY], this.movementSpace) + return this.blueprint.compensateTranslation( + Utility.convertLocation( + [mouseEvent.clientX, mouseEvent.clientY], + this.movementSpace)) } } diff --git a/js/template/BlueprintTemplate.js b/js/template/BlueprintTemplate.js index 40ff9fe..687cdd4 100755 --- a/js/template/BlueprintTemplate.js +++ b/js/template/BlueprintTemplate.js @@ -1,3 +1,4 @@ +import Configuration from "../Configuration" import GraphSelector from "../graph/GraphSelector" import html from "./html" import sanitizeText from "./sanitizeText" @@ -60,6 +61,17 @@ export default class BlueprintTemplate extends Template { apply(blueprint) { super.apply(blueprint) blueprint.classList.add("ueb", `ueb-zoom-${blueprint.zoom}`) + Object.entries({ + "--ueb-font-size": sanitizeText(Configuration.fontSize), + "--ueb-grid-size": `calc(${sanitizeText(Configuration.gridSize)} * 1px)`, + "--ueb-grid-line-width": sanitizeText(Configuration.gridLineWidth), + "--ueb-grid-line-color": sanitizeText(Configuration.gridLineColor), + "--ueb-grid-set": sanitizeText(Configuration.gridSet), + "--ueb-grid-set-line-color": sanitizeText(Configuration.gridSetLineColor), + "--ueb-grid-axis-line-color": sanitizeText(Configuration.gridAxisLineColor), + "--ueb-grid-snap": sanitizeText(Configuration.gridSnap), + "--ueb-node-radius": sanitizeText(Configuration.nodeRadius) + }).forEach(entry => blueprint.style.setProperty(entry[0], entry[1])) blueprint.headerElement = blueprint.querySelector('.ueb-viewport-header') blueprint.overlayElement = blueprint.querySelector('.ueb-viewport-overlay') blueprint.viewportElement = blueprint.querySelector('.ueb-viewport-body') @@ -102,7 +114,7 @@ export default class BlueprintTemplate extends Template { * @param {Blueprint} blueprint The blueprint element */ applyStartDragScrolling(blueprint) { - blueprint.gridElement.dataset.dragScrolling = true + blueprint.dataset.dragScrolling = true } /** @@ -110,6 +122,6 @@ export default class BlueprintTemplate extends Template { * @param {Blueprint} blueprint The blueprint element */ applyEndDragScrolling(blueprint) { - blueprint.gridElement.dataset.dragScrolling = false + blueprint.dataset.dragScrolling = false } } diff --git a/js/template/LinkTemplate.js b/js/template/LinkTemplate.js index bdfc203..c7bfff4 100755 --- a/js/template/LinkTemplate.js +++ b/js/template/LinkTemplate.js @@ -1,6 +1,7 @@ import html from "./html" import sanitizeText from "./sanitizeText" import Template from "./Template" +import Configuration from "../Configuration" /** * @typedef {import("../graph/GraphLink").default} GraphLink @@ -15,7 +16,7 @@ export default class LinkTemplate extends Template { render(link) { return html` - + ` } @@ -27,28 +28,31 @@ export default class LinkTemplate extends Template { apply(link) { super.apply(link) link.classList.add("ueb-positioned") + link.pathElement = link.querySelector("path") } /** * Applies the style relative to the source pin location. * @param {GraphLink} link Link element */ - applySourceLocation(link, initialPosition) { + applySourceLocation(link) { link.style.setProperty("--ueb-from-input", link.originatesFromInput ? "1" : "0") // Set initial position - link.style.setProperty("--ueb-from-x", sanitizeText(initialPosition[0])) - link.style.setProperty("--ueb-from-y", sanitizeText(initialPosition[1])) + link.style.setProperty("--ueb-from-x", sanitizeText(link.sourceLocation[0])) + link.style.setProperty("--ueb-from-y", sanitizeText(link.sourceLocation[1])) } /** * Applies the style relative to the destination pin location. * @param {GraphLink} link Link element */ - applyDestinationLocation(link, finalPosition) { - link.style.setProperty("--ueb-to-x", sanitizeText(finalPosition[0])) - link.style.setProperty("--ueb-to-y", sanitizeText(finalPosition[1])) - const height = Math.abs(link.style.getPropertyValue("--ueb-from-y") - finalPosition[1]) - let skew = Math.atan(height / (finalPosition[0] - link.style.getPropertyValue("--ueb-from-x"))) - Math.PI / 2 - link.style.setProperty("--ueb-link-skew", skew) + applyDestinationLocation(link) { + link.style.setProperty("--ueb-to-x", sanitizeText(link.destinationLocation[0])) + link.style.setProperty("--ueb-to-y", sanitizeText(link.destinationLocation[1])) + const r = Math.max(Math.abs(link.sourceLocation[0] - link.destinationLocation[0]), 1) + / Math.max(Math.abs(link.sourceLocation[1] - link.destinationLocation[1]), 1) + const d = Configuration.linkRightSVGPath(20, Math.max(40 / r, 30)) + // TODO move to CSS when Firefox will support property d + link.pathElement.setAttribute("d", d) } } diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js index 9fe33fb..3ee5a05 100755 --- a/js/template/PinTemplate.js +++ b/js/template/PinTemplate.js @@ -45,8 +45,8 @@ export default class PinTemplate extends Template { */ getLinkLocation(pin) { const rect = pin.querySelector(".ueb-node-value-icon").getBoundingClientRect() - return Utility.convertLocation( + return pin.blueprint.compensateTranslation(Utility.convertLocation( [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2], - pin.blueprint.gridElement) + pin.blueprint.gridElement)) } } diff --git a/js/template/SelectorTemplate.js b/js/template/SelectorTemplate.js index abbb4af..e264f0f 100755 --- a/js/template/SelectorTemplate.js +++ b/js/template/SelectorTemplate.js @@ -27,7 +27,7 @@ export default class SelectorTemplate extends Template { // Final position coincide with the initial position, at the beginning of selection selector.style.setProperty("--ueb-to-x", sanitizeText(initialPosition[0])) selector.style.setProperty("--ueb-to-y", sanitizeText(initialPosition[1])) - selector.dataset.selecting = "true" + selector.blueprint.dataset.selecting = "true" } /** @@ -44,6 +44,6 @@ export default class SelectorTemplate extends Template { * @param {GraphSelector} selector Selector element */ applyFinishSelecting(selector) { - selector.dataset.selecting = "false" + selector.blueprint.dataset.selecting = "false" } } diff --git a/scss/ueblueprint-style.css b/scss/ueblueprint-style.css deleted file mode 100755 index c4c8ce4..0000000 --- a/scss/ueblueprint-style.css +++ /dev/null @@ -1,472 +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"); -} - -: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-grid[data-drag-scrolling="true"] { - cursor : grabbing; -} - -.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-grid[data-drag-scrolling="false"] 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-grid[data-drag-scrolling="false"] { - cursor : default; -} - -.ueb-grid[data-drag-scrolling="false"] ueb-selector[data-selecting="false"]~ueb-node ueb-pin:hover { - background : var(--ueb-node-value-background); - 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-positioned { - --ueb-computed-min-x : min(var(--ueb-from-x), var(--ueb-to-x)); - --ueb-computed-max-x : max(var(--ueb-from-x), var(--ueb-to-x)); - --ueb-computed-min-y : min(var(--ueb-from-y), var(--ueb-to-y)); - --ueb-computed-max-y : max(var(--ueb-from-y), var(--ueb-to-y)); - --ueb-computed-width : max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x)); - --ueb-computed-height : max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y)); -} - -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[data-selecting="true"] { - visibility : visible; - 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>* { - visibility : visible; -} - -ueb-link { - --ueb-width-threshold : 50; - display : block; - position : absolute; - top : calc(var(--ueb-computed-min-y) * 1px); - left : calc(var(--ueb-from-x) * 1px); - width : calc(max( - /* 1 */ - var(--ueb-to-x) - var(--ueb-from-x), - /* 3 */ - var(--ueb-width-threshold)) * 1px); - height : calc(var(--ueb-computed-height) * 1px); - border : 1px solid red; -} - -ueb-link svg { - width : 100%; - height : 100%; - transform : scaleY(clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1)); - overflow : visible; -} - -ueb-link svg path { - /* flag stating whether or not the width of the link is below threshold or not */ - --ueb-width-below-threshold : clamp( - /* min */ - 0, - /* input */ - calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))), - /* max */ - 1); - transform : skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad)); - transform-origin : 0 0; -} \ No newline at end of file diff --git a/scss/ueblueprint-style.scss b/scss/ueblueprint-style.scss new file mode 100644 index 0000000..e86080a --- /dev/null +++ b/scss/ueblueprint-style.scss @@ -0,0 +1,456 @@ +@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, 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 : + /* 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-blueprint[data-drag-scrolling="true"] .ueb-grid { + cursor: grabbing; +} + +.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-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 { + 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-blueprint[data-drag-scrolling="false"] .ueb-grid { + cursor: default; +} + +ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node ueb-pin:hover { + background: var(--ueb-node-value-background); + 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-positioned { + --ueb-computed-min-x : min(var(--ueb-from-x), var(--ueb-to-x)); + --ueb-computed-max-x : max(var(--ueb-from-x), var(--ueb-to-x)); + --ueb-computed-min-y : min(var(--ueb-from-y), var(--ueb-to-y)); + --ueb-computed-max-y : max(var(--ueb-from-y), var(--ueb-to-y)); + --ueb-computed-width : max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x)); + --ueb-computed-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: + /* 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-blueprint[data-selecting="true"] ueb-selector { + visibility: visible; + @extend .ueb-positioned; +} + +ueb-selector>* { + visibility: visible; +} + +ueb-link { + --ueb-width-threshold: 50; + display : block; + border : 1px solid red; +} + +ueb-link svg { + width : 100%; + height : 100%; + transform: scaleY(clamp(-1, calc(var(--ueb-to-y) - var(--ueb-from-y)), 1)); + overflow : visible; +} + +ueb-link svg path { + /* flag stating whether or not the width of the link is below threshold or not */ + --ueb-width-below-threshold: clamp( + /* min */ + 0, + /* input */ + calc(var(--ueb-width-threshold) - (var(--ueb-to-x) - var(--ueb-from-x))), + /* max */ + 1); + transform : skewX(calc(var(--ueb-width-below-threshold) * var(--ueb-link-skew) * -1rad)); + transform-origin: 0 0; + stroke-width : 2; + transition : stroke-width 0.5s; +} + +ueb-link svg path:hover { + stroke-width: 5; +} \ No newline at end of file