diff --git a/dist/css/ueb-style.css b/dist/css/ueb-style.css index 35ac31c..b2358f8 100644 --- a/dist/css/ueb-style.css +++ b/dist/css/ueb-style.css @@ -1 +1 @@ -@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:#4d4d4db7;font-size:20px}.ueb-viewport-body{position:relative;height:30rem;overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-computed-min-x)*1px);width:calc(var(--ueb-computed-width)*1px);height:calc(var(--ueb-computed-height)*1px)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 #000,1px 4px 6px 0 rgba(0,0,0,.3)}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-content{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 #000;border-radius:var(--ueb-node-radius);background:rgba(0,0,0,.7);overflow:hidden}.ueb-node-header{padding:.2em .7em;box-shadow:inset 0 1px 2px 0 #313631,inset 0 2px 0 0 #92c381;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:600;white-space:nowrap}.ueb-node-name{background:radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-body{display:flex;padding:3px 0;color:#fff;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}.ueb-node-expand{display:none}ueb-node[data-advanced-display] .ueb-node-expand{display:block}ueb-pin{display:block;margin:5px 0;padding:2px 2px}ueb-pin>*{display:inline-block;vertical-align:middle}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-pin:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:.85em;height:.85em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-pin-icon-value::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-pin-color);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-content>span{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 4px;min-width:10px;max-width:400px;max-height:14em;background:none;color:silver;cursor:text;overflow:auto}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus{background:#505250;outline:none}.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueb-style.css.map */ +@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:#4d4d4db7;font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-computed-min-x)*1px);width:calc(var(--ueb-computed-width)*1px);height:calc(var(--ueb-computed-height)*1px)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 #000,1px 4px 6px 0 rgba(0,0,0,.3)}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-content{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-header{padding:.3em .7em;box-shadow:inset 0 1px 2px 0 #313631,inset 0 2px 0 0 #92c381;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:600;white-space:nowrap}.ueb-node-name{background:radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-body{display:flex;padding:1px 0;color:#fff;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}.ueb-node-expand{display:none}ueb-node[data-advanced-display] .ueb-node-expand{display:block}ueb-pin{display:block;margin:6px 0;padding:2px 2px}ueb-pin>*{display:inline-block;vertical-align:middle}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-pin:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:1em;height:1em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-pin-icon-value::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-pin-color);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-content>span{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 0 0 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:#ffffff46;outline:none}.ueb-pin-input-content{display:block;outline:none;border:none;margin:0 3px 1px 0;padding:0;min-width:10px;max-width:400px;max-height:16em;background:none;cursor:text;overflow:auto}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueb-style.css.map */ diff --git a/dist/css/ueb-style.css.map b/dist/css/ueb-style.css.map index 3f25646..210c565 100644 --- a/dist/css/ueb-style.css.map +++ b/dist/css/ueb-style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,aACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,0BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,YACA,aACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,gBACA,eACA,gBACA,gBACA,gBACA,aACA,YACA,cAEA,gEAGI,mBACA,aC7FR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCjHR,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 2fb3e4e..cfd7af9 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -4,6 +4,8 @@ class Configuration { static expandGridSize = 400 static fontSize = "12px" static gridAxisLineColor = "black" + static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event + static gridShrinkThreshold = 2 // exceding size factor threshold to cause a shrink event static gridLineColor = "#353535" static gridLineWidth = 1 // pixel static gridSet = 8 @@ -133,12 +135,15 @@ class Configuration { } } +// @ts-check + /** * This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML() */ const html = String.raw; // @ts-check + /** * @typedef {import("../element/IElement").default} IElement */ @@ -160,6 +165,8 @@ class ITemplate { } } +// @ts-check + document.createElement("div"); const tagReplacement = { @@ -177,6 +184,8 @@ function sanitizeText(value) { return value } +// @ts-check + class OrderedIndexArray { /** @@ -317,6 +326,8 @@ class OrderedIndexArray { } } +// @ts-check + /** * @typedef {{ * primaryInf: number, @@ -481,6 +492,8 @@ class FastSelectionModel { } +// @ts-check + /** * @typedef {import("../Blueprint").default} Blueprint * @typedef {import("../entity/IEntity").default} IEntity @@ -536,12 +549,12 @@ class IElement extends HTMLElement { } /** - * @template {} T - * @param {new () => T} type + * @template {IContext} T + * @param {new (...args: any[]) => T} type * @returns {T} */ getInputObject(type) { - return this.inputObjects.find(object => object.constructor == type) + return /** @type {T} */ (this.inputObjects.find(object => object.constructor == type)) } // Subclasses will want to override @@ -550,6 +563,8 @@ class IElement extends HTMLElement { } } +// @ts-check + /** * @typedef {import("../element/SelectorElement").default} SelectorElement */ @@ -596,6 +611,8 @@ class SelectorTemplate extends ITemplate { } } +// @ts-check + class SelectorElement extends IElement { static tagName = "ueb-selector" @@ -633,6 +650,8 @@ class SelectorElement extends IElement { customElements.define(SelectorElement.tagName, SelectorElement); +// @ts-check + /** * @typedef {import("../Blueprint").default} Blueprint * @typedef {import("../entity/PinReferenceEntity").default} PinReferenceEntity @@ -769,6 +788,8 @@ class BlueprintTemplate extends ITemplate { } } +// @ts-check + class IContext { /** @type {HTMLElement} */ @@ -822,6 +843,8 @@ class IContext { } } +// @ts-check + class TypeInitialization { static sanitize(value) { @@ -849,6 +872,8 @@ class TypeInitialization { } } +// @ts-check + class Utility { static sigmoid(x, curvature = 1.7) { @@ -964,6 +989,8 @@ class Utility { } } +// @ts-check + class IEntity { constructor(options = {}) { @@ -1017,6 +1044,8 @@ class IEntity { } } +// @ts-check + class ObjectReferenceEntity extends IEntity { static attributes = { @@ -1025,6 +1054,8 @@ class ObjectReferenceEntity extends IEntity { } } +// @ts-check + class FunctionReferenceEntity extends IEntity { static attributes = { @@ -1033,6 +1064,8 @@ class FunctionReferenceEntity extends IEntity { } } +// @ts-check + class GuidEntity extends IEntity { static attributes = { @@ -1060,6 +1093,8 @@ class GuidEntity extends IEntity { } } +// @ts-check + class IdentifierEntity extends IEntity { static attributes = { @@ -1085,6 +1120,8 @@ class IdentifierEntity extends IEntity { } } +// @ts-check + class IntegerEntity extends IEntity { static attributes = { @@ -1110,6 +1147,8 @@ class IntegerEntity extends IEntity { } } +// @ts-check + class KeyBindingEntity extends IEntity { static attributes = { @@ -1125,6 +1164,8 @@ class KeyBindingEntity extends IEntity { } } +// @ts-check + class LocalizedTextEntity extends IEntity { static lookbehind = "NSLOCTEXT" @@ -1135,6 +1176,8 @@ class LocalizedTextEntity extends IEntity { } } +// @ts-check + class PathSymbolEntity extends IEntity { static attributes = { @@ -1146,6 +1189,8 @@ class PathSymbolEntity extends IEntity { } } +// @ts-check + class PinReferenceEntity extends IEntity { static attributes = { @@ -1154,6 +1199,8 @@ class PinReferenceEntity extends IEntity { } } +// @ts-check + /** * @typedef {{ * PinCategory: String, @@ -1262,6 +1309,8 @@ class PinEntity extends IEntity { } } +// @ts-check + class VariableReferenceEntity extends IEntity { static attributes = { @@ -1271,6 +1320,8 @@ class VariableReferenceEntity extends IEntity { } } +// @ts-check + class ObjectEntity extends IEntity { static attributes = { @@ -1312,6 +1363,8 @@ var parsimmon_umd_min = {exports: {}}; var Parsimmon = /*@__PURE__*/getDefaultExportFromCjs(parsimmon_umd_min.exports); +// @ts-check + let P = Parsimmon; class Grammar { @@ -1566,6 +1619,8 @@ class Grammar { MultipleObject = r => r.Object.sepBy1(P.whitespace).trim(P.optWhitespace) } +// @ts-check + class SerializerFactory { static #serializers = new Map() @@ -1579,6 +1634,8 @@ class SerializerFactory { } } +// @ts-check + class ISerializer { static grammar = Parsimmon.createLanguage(new Grammar()) @@ -1657,6 +1714,8 @@ class ISerializer { } } +// @ts-check + class ObjectSerializer extends ISerializer { constructor() { @@ -1715,6 +1774,8 @@ End Object\n`; } } +// @ts-check + class Copy extends IContext { #copyHandler @@ -1741,6 +1802,7 @@ class Copy extends IContext { } } +// @ts-check class IKeyboardShortcut extends IContext { /** @type {KeyBindingEntity} */ @@ -1825,6 +1887,8 @@ class IKeyboardShortcut extends IContext { } } +// @ts-check + class KeyboardCanc extends IKeyboardShortcut { /** @@ -1845,6 +1909,8 @@ class KeyboardCanc extends IKeyboardShortcut { } } +// @ts-check + class IPointing extends IContext { constructor(target, blueprint, options) { @@ -1863,6 +1929,8 @@ class IPointing extends IContext { } } +// @ts-check + class IMouseWheel extends IPointing { /** @type {(e: WheelEvent) => void} */ @@ -1908,6 +1976,8 @@ class IMouseWheel extends IPointing { } } +// @ts-check + class Zoom extends IMouseWheel { #enableZoonIn = false @@ -1935,6 +2005,8 @@ class Zoom extends IMouseWheel { } } +// @ts-check + class KeyboardEnableZoom extends IKeyboardShortcut { /** @type {} */ @@ -1963,6 +2035,8 @@ class KeyboardEnableZoom extends IKeyboardShortcut { } } +// @ts-check + class KeyboardSelectAll extends IKeyboardShortcut { /** @@ -1983,6 +2057,8 @@ class KeyboardSelectAll extends IKeyboardShortcut { } } +// @ts-check + /** * @typedef {import("../element/LinkElement").default} LinkElement * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement @@ -2146,6 +2222,8 @@ class LinkTemplate extends ITemplate { } } +// @ts-check + /** * @typedef {import("./PinElement").default} PinElement * @typedef {import("./LinkMessageElement").default} LinkMessageElement @@ -2230,7 +2308,7 @@ class LinkElement extends IElement { /** * @param {Number[]} location */ - setSourceLocation(location) { + setSourceLocation(location = null) { if (location == null) { location = this.#source.template.getLinkLocation(this.#source); } @@ -2259,7 +2337,7 @@ class LinkElement extends IElement { /** * @param {Number[]} location */ - setDestinationLocation(location) { + setDestinationLocation(location = null) { if (location == null) { location = this.#destination.template.getLinkLocation(this.#destination); } @@ -2353,6 +2431,8 @@ class LinkElement extends IElement { customElements.define(LinkElement.tagName, LinkElement); +// @ts-check + /** * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses. */ @@ -2498,6 +2578,8 @@ class IMouseClickDrag extends IPointing { } } +// @ts-check + class MouseScrollGraph extends IMouseClickDrag { startDrag() { @@ -2513,6 +2595,8 @@ class MouseScrollGraph extends IMouseClickDrag { } } +// @ts-check + class MouseTracking extends IPointing { /** @type {IPointing} */ @@ -2573,6 +2657,8 @@ class MouseTracking extends IPointing { } } +// @ts-check + /** * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement */ @@ -2620,11 +2706,15 @@ class MouseMoveNodes extends IMouseClickDrag { } } -/** @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate */ +// @ts-check +/** + * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate + */ class ISelectableDraggableElement extends IElement { constructor(...args) { + // @ts-expect-error super(...args); this.dragObject = null; this.location = [0, 0]; @@ -2646,6 +2736,9 @@ class ISelectableDraggableElement extends IElement { ] } + /** + * @param {Number[]} value + */ setLocation(value = [0, 0]) { const d = [value[0] - this.location[0], value[1] - this.location[1]]; const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, { @@ -2700,6 +2793,8 @@ class ISelectableDraggableElement extends IElement { } } +// @ts-check + /** * @typedef {import("../element/LinkMessageElement").default} LinkMessageElement */ @@ -2735,6 +2830,8 @@ class LinkMessageTemplate extends ITemplate { } +// @ts-check + /** * @typedef {import("./PinElement").default} PinElement * @typedef {import("./LinkElement").default} LinkElement @@ -2796,6 +2893,8 @@ class LinkMessageElement extends IElement { customElements.define(LinkMessageElement.tagName, LinkMessageElement); +// @ts-check + /** * @typedef {import("../../element/LinkElement").default} LinkElement * @typedef {import("../../element/PinElement").default} PinElement @@ -2897,6 +2996,8 @@ class MouseCreateLink extends IMouseClickDrag { } } +// @ts-check + /** * @typedef {import("../element/NodeElement").default} NodeElement * @typedef {import("../element/PinElement").default} PinElement @@ -2991,6 +3092,8 @@ class PinTemplate extends ITemplate { } } +// @ts-check + /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -3017,12 +3120,19 @@ class StringPinTemplate extends PinTemplate { * @param {PinElement} pin */ renderInput(pin) { + const stopEventPropagation = "e => stopPropagation()"; return html` - + + + ` } } +// @ts-check + /** * @typedef {import("./NodeElement").default} NodeElement * @typedef {import("../entity/GuidEntity").default} GuidEntity @@ -3160,6 +3270,8 @@ class PinElement extends IElement { customElements.define(PinElement.tagName, PinElement); +// @ts-check + /** * @typedef {import("../element/ISelectableDraggableElement").default} ISelectableDraggableElement */ @@ -3187,6 +3299,8 @@ class SelectableDraggableTemplate extends ITemplate { } } +// @ts-check + /** * @typedef {import("../element/NodeElement").default} NodeElement */ @@ -3252,6 +3366,8 @@ class NodeTemplate extends SelectableDraggableTemplate { } } +// @ts-check + class NodeElement extends ISelectableDraggableElement { static tagName = "ueb-node" @@ -3317,6 +3433,8 @@ class NodeElement extends ISelectableDraggableElement { customElements.define(NodeElement.tagName, NodeElement); +// @ts-check + class Paste extends IContext { #pasteHandle @@ -3368,6 +3486,8 @@ class Paste extends IContext { } } +// @ts-check + class Select extends IMouseClickDrag { constructor(target, blueprint, options) { @@ -3396,6 +3516,8 @@ class Select extends IMouseClickDrag { } } +// @ts-check + class Unfocus extends IContext { /** @type {(e: WheelEvent) => void} */ @@ -3447,9 +3569,9 @@ class Blueprint extends IElement { links = [] expandGridSize = Configuration.expandGridSize /** @type {number[]} */ - additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0] + additional = [2 * this.expandGridSize, 2 * this.expandGridSize] /** @type {number[]} */ - translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0] + translateValue = [this.expandGridSize, this.expandGridSize] /** @type {number[]} */ mousePosition = [0, 0] /** @type {HTMLElement} */ @@ -3492,21 +3614,17 @@ class Blueprint extends IElement { } /** - * Expand the grid, considers the absolute value of params - * @param {number} x - Horizontal expansion value - * @param {number} y - Vertical expansion value + * @param {number} x + * @param {number} y */ #expand(x, y) { - x = Math.round(Math.abs(x)); - y = Math.round(Math.abs(y)); this.additional = [this.additional[0] + x, this.additional[1] + y]; this.template.applyExpand(this); } /** - * Moves the content of the grid according to the coordinates - * @param {number} x - Horizontal translation value - * @param {number} y - Vertical translation value + * @param {number} x + * @param {number} y */ #translate(x, y) { x = Math.round(x); @@ -3569,38 +3687,46 @@ class Blueprint extends IElement { } scrollDelta(delta, smooth = false) { - const scrollMax = this.getScrollMax(); + const maxScroll = this.getScrollMax(); let currentScroll = this.getScroll(); let finalScroll = [ currentScroll[0] + delta[0], currentScroll[1] + delta[1] ]; let expand = [0, 0]; + let shrink = [0, 0]; + let direction = [0, 0]; for (let i = 0; i < 2; ++i) { - if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) { - // Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step - expand[i] = finalScroll[i]; - if (expand[i] > 0) { - // Final scroll is still in rage (more than zero) but we want to expand to negative (left or top) - expand[i] = -this.expandGridSize; + if (delta[i] < 0 && finalScroll[i] < Configuration.gridExpandThreshold * this.expandGridSize) { + // Expand left/top + expand[i] = this.expandGridSize; + direction[i] = -1; + if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) { + shrink[i] = -this.expandGridSize; } - } else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) { - // Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step - expand[i] = finalScroll[i] - scrollMax[i]; - if (expand[i] < 0) { - // Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom) - expand[i] = this.expandGridSize; + } else if (delta[i] > 0 && finalScroll[i] + > maxScroll[i] - Configuration.gridExpandThreshold * this.expandGridSize) { + // Expand right/bottom + expand[i] = this.expandGridSize; + direction[i] = 1; + if (finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) { + shrink[i] = -this.expandGridSize; } } } if (expand[0] != 0 || expand[1] != 0) { - this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1])); - currentScroll = this.getScroll(); - finalScroll = [ - currentScroll[0] + delta[0], - currentScroll[1] + delta[1] + this.seamlessExpand(expand, direction); + direction = [ + -direction[0], + -direction[1] ]; + this.seamlessExpand(shrink, direction); } + currentScroll = this.getScroll(); + finalScroll = [ + currentScroll[0] + delta[0], + currentScroll[1] + delta[1] + ]; this.setScroll(finalScroll, smooth); } @@ -3631,7 +3757,7 @@ class Blueprint extends IElement { /** * Get the scroll limits - * @return {array} The horizonal and vertical maximum scroll limits + * @return {Array} The horizonal and vertical maximum scroll limits */ getScrollMax() { return [ @@ -3645,24 +3771,35 @@ class Blueprint extends IElement { } /** - * Expand the grind indefinitely, the content will remain into position - * @param {number} x - Horizontal expand value (negative means left, positive means right) - * @param {number} y - Vertical expand value (negative means top, positive means bottom) + * @param {Number} x - Horizontal + * @param {Number} y - Vertical expand value (negative means top, positive means bottom) + * @param {Number} factor - Either 1 (expand) or -1 (shrink) */ - seamlessExpand(x, y) { + + + /** + * Expand or shrink the grind indefinitely, the content will remain into position + * @param {Number[]} param0 - Expand value (negative means shrink, positive means expand) + * @param {Number[]} param1 - Direction of expansion (negative: left/top, position: right/bottom) + */ + seamlessExpand([x, y], [directionX, directionY] = [1, 1]) { + const initialScroll = [ + this.viewportElement.scrollLeft, + this.viewportElement.scrollTop + ]; let scale = this.getScale(); let scaledX = x / scale; let scaledY = y / scale; // First expand the grid to contain the additional space this.#expand(scaledX, scaledY); // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly - this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0); - if (x < 0) { - this.viewportElement.scrollLeft -= x; - } - if (y < 0) { - this.viewportElement.scrollTop -= y; - } + const translate = [ + directionX < 0 ? scaledX : 0, + directionY < 0 ? scaledY : 0 + ]; + this.#translate(translate[0], translate[1]); + this.viewportElement.scrollLeft = initialScroll[0] + translate[0]; + this.viewportElement.scrollTop = initialScroll[1] + translate[1]; } progressiveSnapToGrid(x) { @@ -3824,6 +3961,8 @@ class Blueprint extends IElement { customElements.define(Blueprint.tagName, Blueprint); +// @ts-check + class GeneralSerializer extends ISerializer { constructor(wrap, entityType, prefix, separator, trailingSeparator, attributeValueConjunctionSign, attributeKeyPrinter) { @@ -3848,6 +3987,8 @@ class GeneralSerializer extends ISerializer { } } +// @ts-check + class CustomSerializer extends GeneralSerializer { constructor(objectWriter, entityType) { @@ -3861,6 +4002,8 @@ class CustomSerializer extends GeneralSerializer { } } +// @ts-check + class ToStringSerializer extends GeneralSerializer { constructor(entityType) { @@ -3873,6 +4016,8 @@ class ToStringSerializer extends GeneralSerializer { } } +// @ts-check + function initializeSerializerFactory() { SerializerFactory.registerSerializer( @@ -3925,6 +4070,8 @@ function initializeSerializerFactory() { SerializerFactory.registerSerializer(IntegerEntity, new ToStringSerializer(IntegerEntity)); } +// @ts-check + initializeSerializerFactory(); export { Blueprint, Configuration, LinkElement, NodeElement }; diff --git a/index.html b/index.html index 0b70655..7ae0b48 100755 --- a/index.html +++ b/index.html @@ -4,11 +4,16 @@ - - + Unreal Engine Blueprint + diff --git a/js/Blueprint.js b/js/Blueprint.js index 9ec75dc..33a8d3a 100755 --- a/js/Blueprint.js +++ b/js/Blueprint.js @@ -32,9 +32,9 @@ export default class Blueprint extends IElement { links = [] expandGridSize = Configuration.expandGridSize /** @type {number[]} */ - additional = /*[2 * this.expandGridSize, 2 * this.expandGridSize]*/[0, 0] + additional = [2 * this.expandGridSize, 2 * this.expandGridSize] /** @type {number[]} */ - translateValue = /*[this.expandGridSize, this.expandGridSize]*/[0, 0] + translateValue = [this.expandGridSize, this.expandGridSize] /** @type {number[]} */ mousePosition = [0, 0] /** @type {HTMLElement} */ @@ -77,21 +77,17 @@ export default class Blueprint extends IElement { } /** - * Expand the grid, considers the absolute value of params - * @param {number} x - Horizontal expansion value - * @param {number} y - Vertical expansion value + * @param {number} x + * @param {number} y */ #expand(x, y) { - x = Math.round(Math.abs(x)) - y = Math.round(Math.abs(y)) this.additional = [this.additional[0] + x, this.additional[1] + y] this.template.applyExpand(this) } /** - * Moves the content of the grid according to the coordinates - * @param {number} x - Horizontal translation value - * @param {number} y - Vertical translation value + * @param {number} x + * @param {number} y */ #translate(x, y) { x = Math.round(x) @@ -154,38 +150,46 @@ export default class Blueprint extends IElement { } scrollDelta(delta, smooth = false) { - const scrollMax = this.getScrollMax() + const maxScroll = this.getScrollMax() let currentScroll = this.getScroll() let finalScroll = [ currentScroll[0] + delta[0], currentScroll[1] + delta[1] ] let expand = [0, 0] + let shrink = [0, 0] + let direction = [0, 0] for (let i = 0; i < 2; ++i) { - if (delta[i] < 0 && finalScroll[i] < 0.25 * this.expandGridSize) { - // Expand if scrolling is diminishing and the remainig space is less that a quarter of an expansion step - expand[i] = finalScroll[i] - if (expand[i] > 0) { - // Final scroll is still in rage (more than zero) but we want to expand to negative (left or top) - expand[i] = -this.expandGridSize + if (delta[i] < 0 && finalScroll[i] < Configuration.gridExpandThreshold * this.expandGridSize) { + // Expand left/top + expand[i] = this.expandGridSize + direction[i] = -1 + if (maxScroll[i] - finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) { + shrink[i] = -this.expandGridSize } - } else if (delta[i] > 0 && finalScroll[i] > scrollMax[i] - 0.25 * this.expandGridSize) { - // Expand if scrolling is increasing and the remainig space is less that a quarter of an expansion step - expand[i] = finalScroll[i] - scrollMax[i] - if (expand[i] < 0) { - // Final scroll is still in rage (less than the maximum scroll) but we want to expand to positive (right or bottom) - expand[i] = this.expandGridSize + } else if (delta[i] > 0 && finalScroll[i] + > maxScroll[i] - Configuration.gridExpandThreshold * this.expandGridSize) { + // Expand right/bottom + expand[i] = this.expandGridSize + direction[i] = 1 + if (finalScroll[i] > Configuration.gridShrinkThreshold * this.expandGridSize) { + shrink[i] = -this.expandGridSize } } } if (expand[0] != 0 || expand[1] != 0) { - this.seamlessExpand(this.progressiveSnapToGrid(expand[0]), this.progressiveSnapToGrid(expand[1])) - currentScroll = this.getScroll() - finalScroll = [ - currentScroll[0] + delta[0], - currentScroll[1] + delta[1] + this.seamlessExpand(expand, direction) + direction = [ + -direction[0], + -direction[1] ] + this.seamlessExpand(shrink, direction) } + currentScroll = this.getScroll() + finalScroll = [ + currentScroll[0] + delta[0], + currentScroll[1] + delta[1] + ] this.setScroll(finalScroll, smooth) } @@ -216,7 +220,7 @@ export default class Blueprint extends IElement { /** * Get the scroll limits - * @return {array} The horizonal and vertical maximum scroll limits + * @return {Array} The horizonal and vertical maximum scroll limits */ getScrollMax() { return [ @@ -230,24 +234,35 @@ export default class Blueprint extends IElement { } /** - * Expand the grind indefinitely, the content will remain into position - * @param {number} x - Horizontal expand value (negative means left, positive means right) - * @param {number} y - Vertical expand value (negative means top, positive means bottom) + * @param {Number} x - Horizontal + * @param {Number} y - Vertical expand value (negative means top, positive means bottom) + * @param {Number} factor - Either 1 (expand) or -1 (shrink) */ - seamlessExpand(x, y) { + + + /** + * Expand or shrink the grind indefinitely, the content will remain into position + * @param {Number[]} param0 - Expand value (negative means shrink, positive means expand) + * @param {Number[]} param1 - Direction of expansion (negative: left/top, position: right/bottom) + */ + seamlessExpand([x, y], [directionX, directionY] = [1, 1]) { + const initialScroll = [ + this.viewportElement.scrollLeft, + this.viewportElement.scrollTop + ] let scale = this.getScale() let scaledX = x / scale let scaledY = y / scale // First expand the grid to contain the additional space this.#expand(scaledX, scaledY) // If the expansion is towards the left or top, then scroll back to give the illusion that the content is in the same position and translate it accordingly - this.#translate(scaledX < 0 ? -scaledX : 0, scaledY < 0 ? -scaledY : 0) - if (x < 0) { - this.viewportElement.scrollLeft -= x - } - if (y < 0) { - this.viewportElement.scrollTop -= y - } + const translate = [ + directionX < 0 ? scaledX : 0, + directionY < 0 ? scaledY : 0 + ] + this.#translate(translate[0], translate[1]) + this.viewportElement.scrollLeft = initialScroll[0] + translate[0] + this.viewportElement.scrollTop = initialScroll[1] + translate[1] } progressiveSnapToGrid(x) { diff --git a/js/Configuration.js b/js/Configuration.js index f96a805..26c2438 100755 --- a/js/Configuration.js +++ b/js/Configuration.js @@ -4,6 +4,8 @@ export default class Configuration { static expandGridSize = 400 static fontSize = "12px" static gridAxisLineColor = "black" + static gridExpandThreshold = 0.25 // remaining size factor threshold to cause an expansion event + static gridShrinkThreshold = 2 // exceding size factor threshold to cause a shrink event static gridLineColor = "#353535" static gridLineWidth = 1 // pixel static gridSet = 8 diff --git a/js/Utility.js b/js/Utility.js index 128fdca..2027caf 100755 --- a/js/Utility.js +++ b/js/Utility.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "./Configuration" import TypeInitialization from "./entity/TypeInitialization" diff --git a/js/element/IElement.js b/js/element/IElement.js index b062e85..8db0c9b 100644 --- a/js/element/IElement.js +++ b/js/element/IElement.js @@ -1,3 +1,5 @@ +// @ts-check + /** * @typedef {import("../Blueprint").default} Blueprint * @typedef {import("../entity/IEntity").default} IEntity @@ -53,12 +55,12 @@ export default class IElement extends HTMLElement { } /** - * @template {} T - * @param {new () => T} type + * @template {IContext} T + * @param {new (...args: any[]) => T} type * @returns {T} */ getInputObject(type) { - return this.inputObjects.find(object => object.constructor == type) + return /** @type {T} */ (this.inputObjects.find(object => object.constructor == type)) } // Subclasses will want to override diff --git a/js/element/ISelectableDraggableElement.js b/js/element/ISelectableDraggableElement.js index d3b6c4c..ef1b214 100644 --- a/js/element/ISelectableDraggableElement.js +++ b/js/element/ISelectableDraggableElement.js @@ -1,12 +1,16 @@ +// @ts-check + import Configuration from "../Configuration" import IElement from "./IElement" import MouseMoveNodes from "../input/mouse/MouseMoveNodes" -/** @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate */ - +/** + * @typedef {import("../template/SelectableDraggableTemplate").default} SelectableDraggableTemplate + */ export default class ISelectableDraggableElement extends IElement { constructor(...args) { + // @ts-expect-error super(...args) this.dragObject = null this.location = [0, 0] @@ -28,6 +32,9 @@ export default class ISelectableDraggableElement extends IElement { ] } + /** + * @param {Number[]} value + */ setLocation(value = [0, 0]) { const d = [value[0] - this.location[0], value[1] - this.location[1]] const dragLocalEvent = new CustomEvent(Configuration.nodeDragLocalEventName, { diff --git a/js/element/LinkElement.js b/js/element/LinkElement.js index 61418b7..7293ecf 100644 --- a/js/element/LinkElement.js +++ b/js/element/LinkElement.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../Configuration" import IElement from "./IElement" import LinkTemplate from "../template/LinkTemplate" @@ -86,7 +88,7 @@ export default class LinkElement extends IElement { /** * @param {Number[]} location */ - setSourceLocation(location) { + setSourceLocation(location = null) { if (location == null) { location = this.#source.template.getLinkLocation(this.#source) } @@ -115,7 +117,7 @@ export default class LinkElement extends IElement { /** * @param {Number[]} location */ - setDestinationLocation(location) { + setDestinationLocation(location = null) { if (location == null) { location = this.#destination.template.getLinkLocation(this.#destination) } diff --git a/js/element/LinkMessageElement.js b/js/element/LinkMessageElement.js index db9d4bb..129f376 100644 --- a/js/element/LinkMessageElement.js +++ b/js/element/LinkMessageElement.js @@ -1,10 +1,12 @@ +// @ts-check + import IElement from "./IElement" import LinkMessageTemplate from "../template/LinkMessageTemplate" /** * @typedef {import("./PinElement").default} PinElement * @typedef {import("./LinkElement").default} LinkElement - * @typedef {(sourcePin: PinElement, sourcePin: PinElement) => String} LinkRetrieval + * @typedef {(sourcePin: PinElement, destinationPin: PinElement) => String} LinkRetrieval */ export default class LinkMessageElement extends IElement { diff --git a/js/element/NodeElement.js b/js/element/NodeElement.js index 37f7d72..819b049 100644 --- a/js/element/NodeElement.js +++ b/js/element/NodeElement.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../Configuration" import ISelectableDraggableElement from "./ISelectableDraggableElement" import NodeTemplate from "../template/NodeTemplate" diff --git a/js/element/PinElement.js b/js/element/PinElement.js index 08b97b5..7fb0b12 100644 --- a/js/element/PinElement.js +++ b/js/element/PinElement.js @@ -1,3 +1,5 @@ +// @ts-check + import IElement from "./IElement" import MouseCreateLink from "../input/mouse/MouseCreateLink" import PinTemplate from "../template/PinTemplate" diff --git a/js/element/SelectorElement.js b/js/element/SelectorElement.js index dd7c909..6f74cd3 100644 --- a/js/element/SelectorElement.js +++ b/js/element/SelectorElement.js @@ -1,3 +1,5 @@ +// @ts-check + import FastSelectionModel from "../selection/FastSelectionModel" import IElement from "./IElement" import SelectorTemplate from "../template/SelectorTemplate" diff --git a/js/entity/FunctionReferenceEntity.js b/js/entity/FunctionReferenceEntity.js index d7524fc..b42478d 100755 --- a/js/entity/FunctionReferenceEntity.js +++ b/js/entity/FunctionReferenceEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IEntity from "./IEntity" import ObjectReferenceEntity from "./ObjectReferenceEntity" diff --git a/js/entity/GuidEntity.js b/js/entity/GuidEntity.js index ab4de12..77d60f8 100755 --- a/js/entity/GuidEntity.js +++ b/js/entity/GuidEntity.js @@ -1,5 +1,6 @@ -import IEntity from "./IEntity" +// @ts-check +import IEntity from "./IEntity" export default class GuidEntity extends IEntity { diff --git a/js/entity/IEntity.js b/js/entity/IEntity.js index bdd94d1..9cd29c9 100644 --- a/js/entity/IEntity.js +++ b/js/entity/IEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import TypeInitialization from "./TypeInitialization" import Utility from "../Utility" diff --git a/js/entity/IdentifierEntity.js b/js/entity/IdentifierEntity.js index 77cf068..0f497a1 100644 --- a/js/entity/IdentifierEntity.js +++ b/js/entity/IdentifierEntity.js @@ -1,5 +1,6 @@ -import IEntity from "./IEntity" +// @ts-check +import IEntity from "./IEntity" export default class IdentifierEntity extends IEntity { diff --git a/js/entity/IntegerEntity.js b/js/entity/IntegerEntity.js index 5e20d03..31a6d89 100755 --- a/js/entity/IntegerEntity.js +++ b/js/entity/IntegerEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IEntity from "./IEntity" export default class IntegerEntity extends IEntity { diff --git a/js/entity/KeyBindingEntity.js b/js/entity/KeyBindingEntity.js index 1d5ee24..9d27404 100644 --- a/js/entity/KeyBindingEntity.js +++ b/js/entity/KeyBindingEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IdentifierEntity from "./IdentifierEntity" import IEntity from "./IEntity" diff --git a/js/entity/LocalizedTextEntity.js b/js/entity/LocalizedTextEntity.js index 3d1cd59..9971580 100755 --- a/js/entity/LocalizedTextEntity.js +++ b/js/entity/LocalizedTextEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IEntity from "./IEntity" export default class LocalizedTextEntity extends IEntity { diff --git a/js/entity/NaturalNumberEntity.js b/js/entity/NaturalNumberEntity.js index 9221f3b..67b436b 100755 --- a/js/entity/NaturalNumberEntity.js +++ b/js/entity/NaturalNumberEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IntegerEntity from "./IntegerEntity" import Utility from "../Utility" diff --git a/js/entity/ObjectEntity.js b/js/entity/ObjectEntity.js index 17e2b39..6e2883c 100755 --- a/js/entity/ObjectEntity.js +++ b/js/entity/ObjectEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import FunctionReferenceEntity from "./FunctionReferenceEntity" import GuidEntity from "./GuidEntity" import IdentifierEntity from "./IdentifierEntity" diff --git a/js/entity/ObjectReferenceEntity.js b/js/entity/ObjectReferenceEntity.js index 3458f11..5bd1541 100755 --- a/js/entity/ObjectReferenceEntity.js +++ b/js/entity/ObjectReferenceEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IEntity from "./IEntity" export default class ObjectReferenceEntity extends IEntity { diff --git a/js/entity/PathSymbolEntity.js b/js/entity/PathSymbolEntity.js index ea6d518..2625c76 100755 --- a/js/entity/PathSymbolEntity.js +++ b/js/entity/PathSymbolEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IEntity from "./IEntity" export default class PathSymbolEntity extends IEntity { diff --git a/js/entity/PinEntity.js b/js/entity/PinEntity.js index b3f9569..84fb7e4 100755 --- a/js/entity/PinEntity.js +++ b/js/entity/PinEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import GuidEntity from "./GuidEntity" import IEntity from "./IEntity" import LocalizedTextEntity from "./LocalizedTextEntity" diff --git a/js/entity/PinReferenceEntity.js b/js/entity/PinReferenceEntity.js index 3c4770e..219670c 100755 --- a/js/entity/PinReferenceEntity.js +++ b/js/entity/PinReferenceEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import GuidEntity from "./GuidEntity" import IEntity from "./IEntity" import PathSymbolEntity from "./PathSymbolEntity" diff --git a/js/entity/TypeInitialization.js b/js/entity/TypeInitialization.js index 28fdd43..c11d6f1 100755 --- a/js/entity/TypeInitialization.js +++ b/js/entity/TypeInitialization.js @@ -1,3 +1,5 @@ +// @ts-check + export default class TypeInitialization { static sanitize(value) { @@ -11,7 +13,7 @@ export default class TypeInitialization { } /** - * @param {typeof Object} type + * @param {Object} type * @param {boolean} showDefault * @param {*} value */ diff --git a/js/entity/VariableReferenceEntity.js b/js/entity/VariableReferenceEntity.js index 9a538eb..f1baee4 100755 --- a/js/entity/VariableReferenceEntity.js +++ b/js/entity/VariableReferenceEntity.js @@ -1,3 +1,5 @@ +// @ts-check + import IEntity from "./IEntity" import GuidEntity from "./GuidEntity" diff --git a/js/export.js b/js/export.js index c097a30..d7e83a2 100755 --- a/js/export.js +++ b/js/export.js @@ -1,3 +1,5 @@ +// @ts-check + import Blueprint from "./Blueprint" import Configuration from "./Configuration" import LinkElement from "./element/LinkElement" diff --git a/js/input/IContext.js b/js/input/IContext.js index 91b7625..f63d6c3 100644 --- a/js/input/IContext.js +++ b/js/input/IContext.js @@ -1,3 +1,5 @@ +// @ts-check + export default class IContext { /** @type {HTMLElement} */ diff --git a/js/input/common/Copy.js b/js/input/common/Copy.js index c4910d5..c98be1d 100755 --- a/js/input/common/Copy.js +++ b/js/input/common/Copy.js @@ -1,3 +1,5 @@ +// @ts-check + import IContext from "../IContext" import ObjectSerializer from "../../serialization/ObjectSerializer" diff --git a/js/input/common/Paste.js b/js/input/common/Paste.js index 7fa67a0..f98617f 100755 --- a/js/input/common/Paste.js +++ b/js/input/common/Paste.js @@ -1,3 +1,5 @@ +// @ts-check + import IContext from "../IContext" import NodeElement from "../../element/NodeElement" import ObjectSerializer from "../../serialization/ObjectSerializer" diff --git a/js/input/keybaord/IKeyboardShortcut.js b/js/input/keybaord/IKeyboardShortcut.js index 4d674ec..14d7be2 100644 --- a/js/input/keybaord/IKeyboardShortcut.js +++ b/js/input/keybaord/IKeyboardShortcut.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../../Configuration" import IContext from "../IContext" import ISerializer from "../../serialization/ISerializer" diff --git a/js/input/keybaord/KeyboardCanc.js b/js/input/keybaord/KeyboardCanc.js index 575c1c3..4947d8e 100755 --- a/js/input/keybaord/KeyboardCanc.js +++ b/js/input/keybaord/KeyboardCanc.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../../Configuration" import IKeyboardShortcut from "./IKeyboardShortcut" diff --git a/js/input/keybaord/KeyboardEnableZoom.js b/js/input/keybaord/KeyboardEnableZoom.js index ea57bfc..1377c4f 100644 --- a/js/input/keybaord/KeyboardEnableZoom.js +++ b/js/input/keybaord/KeyboardEnableZoom.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../../Configuration" import IKeyboardShortcut from "./IKeyboardShortcut" import Zoom from "../mouse/Zoom" @@ -28,4 +30,4 @@ export default class KeyboardEnableZoom extends IKeyboardShortcut { unfire() { this.#zoomInputObject.enableZoonIn = false } -} \ No newline at end of file +} diff --git a/js/input/keybaord/KeyboardSelectAll.js b/js/input/keybaord/KeyboardSelectAll.js index 3d43315..370af08 100755 --- a/js/input/keybaord/KeyboardSelectAll.js +++ b/js/input/keybaord/KeyboardSelectAll.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../../Configuration" import IKeyboardShortcut from "./IKeyboardShortcut" @@ -19,4 +21,4 @@ export default class KeyboardSelectAll extends IKeyboardShortcut { fire() { this.blueprint.selectAll() } -} \ No newline at end of file +} diff --git a/js/input/mouse/IMouseClickDrag.js b/js/input/mouse/IMouseClickDrag.js index 111465c..ad2d549 100644 --- a/js/input/mouse/IMouseClickDrag.js +++ b/js/input/mouse/IMouseClickDrag.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../../Configuration" import IPointing from "./IPointing" diff --git a/js/input/mouse/IMouseWheel.js b/js/input/mouse/IMouseWheel.js index e0348dc..f1bc693 100644 --- a/js/input/mouse/IMouseWheel.js +++ b/js/input/mouse/IMouseWheel.js @@ -1,3 +1,5 @@ +// @ts-check + import IPointing from "./IPointing" export default class IMouseWheel extends IPointing { diff --git a/js/input/mouse/IPointing.js b/js/input/mouse/IPointing.js index 07041bd..b202db5 100644 --- a/js/input/mouse/IPointing.js +++ b/js/input/mouse/IPointing.js @@ -1,3 +1,5 @@ +// @ts-check + import IContext from "../IContext" import Utility from "../../Utility" diff --git a/js/input/mouse/MouseCreateLink.js b/js/input/mouse/MouseCreateLink.js index df717c1..f9a7eb6 100755 --- a/js/input/mouse/MouseCreateLink.js +++ b/js/input/mouse/MouseCreateLink.js @@ -1,3 +1,5 @@ +// @ts-check + import IMouseClickDrag from "./IMouseClickDrag" import LinkElement from "../../element/LinkElement" import LinkMessageElement from "../../element/LinkMessageElement" diff --git a/js/input/mouse/MouseMoveNodes.js b/js/input/mouse/MouseMoveNodes.js index d68170a..700eddf 100755 --- a/js/input/mouse/MouseMoveNodes.js +++ b/js/input/mouse/MouseMoveNodes.js @@ -1,3 +1,5 @@ +// @ts-check + import IMouseClickDrag from "./IMouseClickDrag" import Utility from "../../Utility" diff --git a/js/input/mouse/MouseScrollGraph.js b/js/input/mouse/MouseScrollGraph.js index 8a7320b..1dc63f1 100755 --- a/js/input/mouse/MouseScrollGraph.js +++ b/js/input/mouse/MouseScrollGraph.js @@ -1,3 +1,5 @@ +// @ts-check + import IMouseClickDrag from "./IMouseClickDrag" export default class MouseScrollGraph extends IMouseClickDrag { diff --git a/js/input/mouse/MouseTracking.js b/js/input/mouse/MouseTracking.js index 2f0bd14..3617316 100755 --- a/js/input/mouse/MouseTracking.js +++ b/js/input/mouse/MouseTracking.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../../Configuration" import IPointing from "./IPointing" diff --git a/js/input/mouse/Select.js b/js/input/mouse/Select.js index a59eaec..22cec47 100755 --- a/js/input/mouse/Select.js +++ b/js/input/mouse/Select.js @@ -1,3 +1,5 @@ +// @ts-check + import IMouseClickDrag from "./IMouseClickDrag" export default class Select extends IMouseClickDrag { diff --git a/js/input/mouse/Unfocus.js b/js/input/mouse/Unfocus.js index 5655413..d26a0ed 100755 --- a/js/input/mouse/Unfocus.js +++ b/js/input/mouse/Unfocus.js @@ -1,3 +1,5 @@ +// @ts-check + import IContext from "../IContext" export default class Unfocus extends IContext { diff --git a/js/input/mouse/Zoom.js b/js/input/mouse/Zoom.js index 37df9f9..14d6124 100755 --- a/js/input/mouse/Zoom.js +++ b/js/input/mouse/Zoom.js @@ -1,3 +1,5 @@ +// @ts-check + import IMouseWheel from "./IMouseWheel" export default class Zoom extends IMouseWheel { diff --git a/js/selection/FastSelectionModel.js b/js/selection/FastSelectionModel.js index ecf0a00..40135ee 100755 --- a/js/selection/FastSelectionModel.js +++ b/js/selection/FastSelectionModel.js @@ -1,3 +1,5 @@ +// @ts-check + import OrderedIndexArray from "./OrderedIndexArray" /** diff --git a/js/selection/OrderedIndexArray.js b/js/selection/OrderedIndexArray.js index ad13695..e532889 100755 --- a/js/selection/OrderedIndexArray.js +++ b/js/selection/OrderedIndexArray.js @@ -1,3 +1,5 @@ +// @ts-check + export default class OrderedIndexArray { /** diff --git a/js/selection/SimpleSelectionModel.js b/js/selection/SimpleSelectionModel.js index a8ea3ad..ea438a3 100755 --- a/js/selection/SimpleSelectionModel.js +++ b/js/selection/SimpleSelectionModel.js @@ -1,3 +1,5 @@ +// @ts-check + export default class SimpleSelectionModel { /** diff --git a/js/serialization/CustomSerializer.js b/js/serialization/CustomSerializer.js index ca242a9..d59d02d 100755 --- a/js/serialization/CustomSerializer.js +++ b/js/serialization/CustomSerializer.js @@ -1,3 +1,5 @@ +// @ts-check + import GeneralSerializer from "./GeneralSerializer" export default class CustomSerializer extends GeneralSerializer { diff --git a/js/serialization/GeneralSerializer.js b/js/serialization/GeneralSerializer.js index 7cd0b0a..a9b4ae8 100755 --- a/js/serialization/GeneralSerializer.js +++ b/js/serialization/GeneralSerializer.js @@ -1,3 +1,5 @@ +// @ts-check + import Grammar from "./Grammar" import ISerializer from "./ISerializer" diff --git a/js/serialization/Grammar.js b/js/serialization/Grammar.js index e40b27c..d72c1be 100755 --- a/js/serialization/Grammar.js +++ b/js/serialization/Grammar.js @@ -1,3 +1,5 @@ +// @ts-check + import FunctionReferenceEntity from "../entity/FunctionReferenceEntity" import GuidEntity from "../entity/GuidEntity" import IdentifierEntity from "../entity/IdentifierEntity" diff --git a/js/serialization/ISerializer.js b/js/serialization/ISerializer.js index 261a578..266eee4 100644 --- a/js/serialization/ISerializer.js +++ b/js/serialization/ISerializer.js @@ -1,3 +1,5 @@ +// @ts-check + import Grammar from "./Grammar" import IEntity from "../entity/IEntity" import Parsimmon from "parsimmon" diff --git a/js/serialization/ObjectSerializer.js b/js/serialization/ObjectSerializer.js index d780016..45954a3 100755 --- a/js/serialization/ObjectSerializer.js +++ b/js/serialization/ObjectSerializer.js @@ -1,3 +1,5 @@ +// @ts-check + import ISerializer from "./ISerializer" import ObjectEntity from "../entity/ObjectEntity" import PinEntity from "../entity/PinEntity" diff --git a/js/serialization/SerializerFactory.js b/js/serialization/SerializerFactory.js index 78a4319..d540512 100755 --- a/js/serialization/SerializerFactory.js +++ b/js/serialization/SerializerFactory.js @@ -1,3 +1,5 @@ +// @ts-check + import Utility from "../Utility" export default class SerializerFactory { diff --git a/js/serialization/ToStringSerializer.js b/js/serialization/ToStringSerializer.js index 560500e..330f336 100755 --- a/js/serialization/ToStringSerializer.js +++ b/js/serialization/ToStringSerializer.js @@ -1,3 +1,5 @@ +// @ts-check + import GeneralSerializer from "./GeneralSerializer" export default class ToStringSerializer extends GeneralSerializer { diff --git a/js/serialization/initializeSerializerFactory.js b/js/serialization/initializeSerializerFactory.js index c89b121..e72562a 100755 --- a/js/serialization/initializeSerializerFactory.js +++ b/js/serialization/initializeSerializerFactory.js @@ -1,3 +1,5 @@ +// @ts-check + import CustomSerializer from "./CustomSerializer" import FunctionReferenceEntity from "../entity/FunctionReferenceEntity" import GeneralSerializer from "./GeneralSerializer" diff --git a/js/template/BlueprintTemplate.js b/js/template/BlueprintTemplate.js index 049fbf3..b3ca30d 100755 --- a/js/template/BlueprintTemplate.js +++ b/js/template/BlueprintTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import Configuration from "../Configuration" import html from "./html" import ITemplate from "./ITemplate" diff --git a/js/template/ExecPinTemplate.js b/js/template/ExecPinTemplate.js index c584134..bf4a65c 100644 --- a/js/template/ExecPinTemplate.js +++ b/js/template/ExecPinTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import html from "./html" import PinTemplate from "./PinTemplate" diff --git a/js/template/ITemplate.js b/js/template/ITemplate.js index 558bee7..8c37131 100644 --- a/js/template/ITemplate.js +++ b/js/template/ITemplate.js @@ -1,4 +1,5 @@ // @ts-check + /** * @typedef {import("../element/IElement").default} IElement */ diff --git a/js/template/LinkMessageTemplate.js b/js/template/LinkMessageTemplate.js index 578f866..48ca258 100644 --- a/js/template/LinkMessageTemplate.js +++ b/js/template/LinkMessageTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import html from "./html" import ITemplate from "./ITemplate" import LinkElement from "../element/LinkElement" @@ -36,4 +38,4 @@ export default class LinkMessageTemplate extends ITemplate { } } -} \ No newline at end of file +} diff --git a/js/template/LinkTemplate.js b/js/template/LinkTemplate.js index 25e27f2..3f78f9e 100755 --- a/js/template/LinkTemplate.js +++ b/js/template/LinkTemplate.js @@ -1,5 +1,6 @@ +// @ts-check + import Configuration from "../Configuration" -import Utility from "../Utility" import html from "./html" import ITemplate from "./ITemplate" import sanitizeText from "./sanitizeText" diff --git a/js/template/NodeTemplate.js b/js/template/NodeTemplate.js index 50506fa..516f2bb 100755 --- a/js/template/NodeTemplate.js +++ b/js/template/NodeTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import html from "./html" import PinElement from "../element/PinElement" import sanitizeText from "./sanitizeText" diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js index 5cdf5f7..f3579f5 100755 --- a/js/template/PinTemplate.js +++ b/js/template/PinTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import html from "./html" import ITemplate from "./ITemplate" import LinkElement from "../element/LinkElement" diff --git a/js/template/SelectableDraggableTemplate.js b/js/template/SelectableDraggableTemplate.js index e869367..bdb66d8 100755 --- a/js/template/SelectableDraggableTemplate.js +++ b/js/template/SelectableDraggableTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import ITemplate from "./ITemplate" import sanitizeText from "./sanitizeText" diff --git a/js/template/SelectorTemplate.js b/js/template/SelectorTemplate.js index fea3157..b415b8c 100755 --- a/js/template/SelectorTemplate.js +++ b/js/template/SelectorTemplate.js @@ -1,3 +1,5 @@ +// @ts-check + import ITemplate from "./ITemplate" import sanitizeText from "./sanitizeText" diff --git a/js/template/StringPinTemplate.js b/js/template/StringPinTemplate.js index 5a67759..2ecd35d 100644 --- a/js/template/StringPinTemplate.js +++ b/js/template/StringPinTemplate.js @@ -10,8 +10,13 @@ export default class StringPinTemplate extends PinTemplate { * @param {PinElement} pin */ renderInput(pin) { + const stopEventPropagation = "e => stopPropagation()" return html` - + + + ` } } diff --git a/js/template/html.js b/js/template/html.js index d24bfd1..7cb9f0d 100755 --- a/js/template/html.js +++ b/js/template/html.js @@ -1,3 +1,5 @@ +// @ts-check + /** * This solves the sole purpose of providing compression capability for html inside template literals strings. Check rollup.config.js function minifyHTML() */ diff --git a/js/template/sanitizeText.js b/js/template/sanitizeText.js index 2802629..f61eb01 100755 --- a/js/template/sanitizeText.js +++ b/js/template/sanitizeText.js @@ -1,3 +1,5 @@ +// @ts-check + const div = document.createElement("div") const tagReplacement = { @@ -15,4 +17,4 @@ function sanitizeText(value) { return value } -export default sanitizeText \ No newline at end of file +export default sanitizeText diff --git a/scss/style.scss b/scss/style.scss index 18e1e51..e436b3a 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -41,7 +41,7 @@ ueb-blueprint { .ueb-viewport-body { position : relative; - height : 30rem; + height : var(--ueb-height, 30rem); overflow : hidden; scrollbar-width: 0; } diff --git a/scss/ueb-node.scss b/scss/ueb-node.scss index 11839b5..dd6bb3b 100644 --- a/scss/ueb-node.scss +++ b/scss/ueb-node.scss @@ -34,12 +34,12 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node { padding : 1px; box-shadow : inset 0 0 2px 0 black; border-radius: var(--ueb-node-radius); - background : rgba(0, 0, 0, 0.7); + background : rgba(10, 10, 10, 0.8); overflow : hidden; } .ueb-node-header { - padding : 0.2em 0.7em; + padding : 0.3em 0.7em; box-shadow : inset 0 1px 2px 0 #313631, inset 0 2px 0 0 #92c381; border-radius: var(--ueb-node-radius) var(--ueb-node-radius) 0 0; background : linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%); @@ -56,7 +56,7 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-node { .ueb-node-body { display : flex; - padding : 3px 0; + padding : 1px 0; color : white; font-weight: 100; white-space: nowrap; diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss index 2214323..9299b7c 100644 --- a/scss/ueb-pin.scss +++ b/scss/ueb-pin.scss @@ -1,6 +1,6 @@ ueb-pin { display: block; - margin : 5px 0; + margin : 6px 0; padding: 2px 2px; &>* { @@ -30,8 +30,8 @@ ueb-blueprint[data-drag-scrolling="false"][data-selecting="false"] ueb-pin:hover .ueb-pin-icon-value { display : inline-block; position : relative; - width : 0.85em; - height : 0.85em; + width : 1em; + height : 1em; vertical-align: baseline; margin : 0 0.4em -1px 0.1em; } @@ -78,19 +78,39 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before { margin-left : 3px; border : 1px solid #a0a0a0; border-radius: 3px; - padding : 1px 4px; - min-width : 10px; - max-width : 400px; - max-height : 14em; - background : none; + padding : 1px 0 0 3px; color : #c0c0c0; - cursor : text; - overflow : auto; &:hover, &:active, - &:focus { - background: #505250; + &:focus, + &:focus-within { + background: #ffffff46; outline : none; } +} + +.ueb-pin-input-content { + display : block; + outline : none; + border : none; + margin : 0 3px 1px 0; + padding : 0; + min-width : 10px; + max-width : 400px; + max-height: 16em; + background: none; + cursor : text; + overflow : auto; + + &::-webkit-scrollbar { + width : 10px; + height: 10px; + } + + &::-webkit-scrollbar-thumb { + background : #575757; + border-radius: 10px; + margin : 4px; + } } \ No newline at end of file