diff --git a/dist/css/ueb-style.css b/dist/css/ueb-style.css index aaacaa6..2d6d3d4 100644 --- a/dist/css/ueb-style.css +++ b/dist/css/ueb-style.css @@ -1 +1 @@ -@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:#4d4d4db7;font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-computed-min-x)*1px);width:calc(var(--ueb-computed-width)*1px);height:calc(var(--ueb-computed-height)*1px)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 #000,1px 4px 6px 0 rgba(0,0,0,.3)}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-content{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-header{padding:.3em .7em;box-shadow:inset 0 1px 2px 0 #313631,inset 0 2px 0 0 #92c381;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:600;white-space:nowrap}.ueb-node-name{background:radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-body{display:flex;padding:1px 0;color:#fff;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}.ueb-node-expand{display:none}ueb-node[data-advanced-display] .ueb-node-expand{display:block}ueb-pin{display:block;margin:6px 0;padding:2px 2px}ueb-pin>*{display:inline-block;vertical-align:middle}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-pin:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:1em;height:1em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-pin-icon-value::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-pin-color);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-content>span{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 0 0 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:#ffffff46;outline:none}.ueb-pin-input-content{display:block;outline:none;border:none;margin:0 3px 1px 0;padding:0;min-width:10px;max-width:400px;max-height:16em;background:none;color:inherit;cursor:text;overflow:auto}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}ueb-link{--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);display:block;min-width:calc(var(--ueb-link-min-width)*1px);visibility:hidden}ueb-link svg{--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);position:absolute;top:0;left:0;width:100%;height:100%;min-height:1px;transform:scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));overflow:visible}ueb-link svg path{visibility:visible;stroke:var(--ueb-pin-color);stroke-width:1}ueb-link.ueb-link-dragging svg path,ueb-link svg g:hover path{stroke-width:5;transition:stroke-width .8s}ueb-link-message{display:block;visibility:visible;position:absolute;top:calc(100%*(1 - var(--ueb-y-opposite)) + 22px);left:calc((1 - var(--ueb-from-input))*100% + (var(--ueb-from-input-coefficient))*var(--ueb-start-percentage) + 15px);border:1px solid #000;padding:4px 8px;border-radius:2px;background:linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);color:var(--ueb-pin-dim-color);white-space:nowrap;z-index:1000000}.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueb-style.css.map */ +@font-face{font-family:"Roboto";font-style:light;src:url("../font/roboto-light.woff2") format("woff2"),url("../font/roboto-light.woff") format("woff")}@font-face{font-family:"Roboto";font-style:regular;src:url("../font/roboto-regular.woff2") format("woff2"),url("../font/roboto-regular.woff") format("woff")}ueb-blueprint{display:block;position:relative;font-family:Roboto,Noto,Oxygen,Ubuntu,"Open Sans","Helvetica Neue",sans-serif;font-size:var(--ueb-font-size);user-select:none}.ueb-viewport-header{display:flex;position:absolute;top:0;right:0;left:0;height:1.5em;background:rgba(0,0,0,.5);z-index:1}.ueb-viewport-zoom{margin-left:auto;color:#4d4d4db7;font-size:20px}.ueb-viewport-body{position:relative;height:var(--ueb-height, 30rem);overflow:hidden;scrollbar-width:0}ueb-blueprint[data-focused=true] .ueb-viewport-body{overflow:scroll}.ueb-grid{--ueb-grid-line-actual-width: calc(var(--ueb-grid-line-width) / var(--ueb-scale));position:absolute;min-width:100%;min-height:100%;width:calc((100% + var(--ueb-additional-x)*1px)/var(--ueb-scale));height:calc((100% + var(--ueb-additional-y)*1px)/var(--ueb-scale));background-color:#262626;background-image:linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(var(--ueb-grid-axis-line-color), var(--ueb-grid-axis-line-color)),linear-gradient(to right, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-set-line-color), var(--ueb-grid-set-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to right, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent),linear-gradient(to bottom, var(--ueb-grid-line-color), var(--ueb-grid-line-color) var(--ueb-grid-line-actual-width), transparent var(--ueb-grid-line-actual-width), transparent);background-size:100% var(--ueb-grid-line-actual-width),var(--ueb-grid-line-actual-width) 100%,calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)) calc(var(--ueb-grid-set)*var(--ueb-grid-actual-size)),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size),var(--ueb-grid-actual-size) var(--ueb-grid-actual-size);background-position:calc(var(--ueb-translate-x)*1px) calc(var(--ueb-translate-y)*1px);background-repeat:repeat-x,repeat-y,repeat,repeat,repeat,repeat;transform:scale(var(--ueb-scale), var(--ueb-scale));transform-origin:0 0;overflow:hidden}ueb-blueprint[data-drag-scrolling=true] .ueb-grid{cursor:grabbing}ueb-blueprint[data-drag-scrolling=false] .ueb-grid{cursor:default}.ueb-zoom--.ueb,.ueb{--ueb-scale: 1;--ueb-grid-actual-size: var(--ueb-grid-size)}.ueb-zoom-7.ueb{--ueb-scale: 2}.ueb-zoom-6.ueb{--ueb-scale: 1.875}.ueb-zoom-5.ueb{--ueb-scale: 1.75}.ueb-zoom-4.ueb{--ueb-scale: 1.675}.ueb-zoom-3.ueb{--ueb-scale: 1.5}.ueb-zoom-2.ueb{--ueb-scale: 1.375}.ueb-zoom-1.ueb{--ueb-scale: 1.25}.ueb-zoom--1.ueb{--ueb-scale: 0.875}.ueb-zoom--2.ueb{--ueb-scale: 0.75}.ueb-zoom--3.ueb{--ueb-scale: 0.675}.ueb-zoom--4.ueb{--ueb-scale: 0.5;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--5.ueb{--ueb-scale: 0.375;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 2)}.ueb-zoom--6.ueb{--ueb-scale: 0.333333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--7.ueb{--ueb-scale: 0.3;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--8.ueb{--ueb-scale: 0.266666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--9.ueb{--ueb-scale: 0.233333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--10.ueb{--ueb-scale: 0.2;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 3)}.ueb-zoom--11.ueb{--ueb-scale: 0.166666;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-zoom--12.ueb{--ueb-scale: 0.133333;--ueb-grid-actual-size: calc(var(--ueb-grid-size) * 6)}.ueb-grid-content{position:relative;width:0;height:0;transform:translateX(calc(var(--ueb-translate-x) * 1px)) translateY(calc(var(--ueb-translate-y) * 1px))}.ueb-positioned,ueb-blueprint[data-selecting=true] ueb-selector{--ueb-computed-min-x: min(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-max-x: max(var(--ueb-from-x), var(--ueb-to-x));--ueb-computed-min-y: min(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-max-y: max(var(--ueb-from-y), var(--ueb-to-y));--ueb-computed-width: max(var(--ueb-from-x) - var(--ueb-to-x), var(--ueb-to-x) - var(--ueb-from-x));--ueb-computed-height: max(var(--ueb-from-y) - var(--ueb-to-y), var(--ueb-to-y) - var(--ueb-from-y));position:absolute;top:calc(var(--ueb-computed-min-y)*1px);left:calc(var(--ueb-computed-min-x)*1px);width:calc(var(--ueb-computed-width)*1px);height:calc(var(--ueb-computed-height)*1px)}ueb-selector{display:block;position:absolute;visibility:hidden;top:0;left:0;width:0;height:0;background-image:repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(90deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(1px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(180deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, transparent, transparent calc(1px / var(--ueb-scale)), white calc(2px / var(--ueb-scale)), white calc(7px / var(--ueb-scale)), transparent calc(7px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale))),repeating-linear-gradient(0deg, black, black calc(8px / var(--ueb-scale)), transparent calc(9px / var(--ueb-scale)), transparent calc(11px / var(--ueb-scale)));background-size:100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),100% calc(1px/var(--ueb-scale)),100% calc(3px/var(--ueb-scale)),calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%,calc(1px/var(--ueb-scale)) 100%,calc(3px/var(--ueb-scale)) 100%;background-position:0 calc(1px/var(--ueb-scale)),0 0,0 calc(100% - 1px/var(--ueb-scale)),0 100%,calc(1px/var(--ueb-scale)) 0,0 0,calc(100% - 1px/var(--ueb-scale)) 0,100% 0;background-repeat:no-repeat}ueb-blueprint[data-selecting=true] ueb-selector{visibility:visible}ueb-selector>*{visibility:visible}ueb-node{display:block;position:absolute;transform:translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));border-radius:var(--ueb-node-radius);box-shadow:0 0 1px 0 #000,1px 4px 6px 0 rgba(0,0,0,.3)}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-node{cursor:move}.ueb-node-border{margin:-3px;padding:3px;border-radius:calc(var(--ueb-node-radius)*1.4)}.ueb-selected>.ueb-node-border{background-image:linear-gradient(to right, #f1b000 0%, #f1b000 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%),linear-gradient(to right, #cc6700 0%, #cc6700 100%),linear-gradient(to bottom, #f1b000 0%, #cc6700 100%);background-size:100% 7px,7px 100%,100% 7px,7px 100%;background-position:top,right,bottom,left;background-repeat:repeat-x,repeat-y,repeat-x,repeat-y;outline:3px solid #cc6700;outline-offset:-6px}.ueb-node-content{position:relative;padding:1px;box-shadow:inset 0 0 2px 0 #000;border-radius:var(--ueb-node-radius);background:rgba(10,10,10,.8);overflow:hidden}.ueb-node-header{padding:.3em .7em;box-shadow:inset 0 1px 2px 0 #313631,inset 0 2px 0 0 #92c381;border-radius:var(--ueb-node-radius) var(--ueb-node-radius) 0 0;background:linear-gradient(170deg, #5f815a 0%, #5f815a 50%, transparent 100%);color:silver;font-weight:600;white-space:nowrap}.ueb-node-name{background:radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 0%, transparent 90%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-body{display:flex;padding:1px 0;color:#fff;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:auto;padding-left:8px}.ueb-node-outputs{padding-right:8px}.ueb-node-expand{display:none}ueb-node[data-advanced-display] .ueb-node-expand{display:block}ueb-pin{display:block;margin:6px 0;padding:2px 2px}ueb-pin>*{display:inline-block;vertical-align:middle}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] ueb-pin:hover{background:var(--ueb-pin-background);cursor:crosshair}.ueb-node-outputs ueb-pin{text-align:right}.ueb-pin-icon-exec{display:inline-block;vertical-align:text-top}.ueb-pin-icon-value{display:inline-block;position:relative;width:1em;height:1em;vertical-align:baseline;margin:0 .4em -1px .1em}.ueb-pin-icon-value::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;border:2px solid var(--ueb-pin-color);border-radius:50%}ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before{background:var(--ueb-pin-color)}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:calc(50% - .3em);left:calc(100% + 1px);width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-content>span{display:inline-block;vertical-align:middle}.ueb-pin-exec .ueb-pin-name{display:none}.ueb-pin-input{display:inline-block;vertical-align:middle;margin-left:3px;border:1px solid #a0a0a0;border-radius:3px;padding:1px 0 0 3px;color:silver}.ueb-pin-input:hover,.ueb-pin-input:active,.ueb-pin-input:focus,.ueb-pin-input:focus-within{background:#ffffff46;outline:none}.ueb-pin-input-content{display:block;outline:none;border:none;margin:0 3px 1px 0;padding:0;min-width:10px;max-width:400px;max-height:16em;background:none;color:inherit;cursor:text;overflow:auto}.ueb-pin-input-content::-webkit-scrollbar{width:10px;height:10px}.ueb-pin-input-content::-webkit-scrollbar-thumb{background:#575757;border-radius:10px;margin:4px}ueb-link{--ueb-from-input-coefficient: calc(2 * var(--ueb-from-input) - 1);--ueb-y-opposite: clamp(0, var(--ueb-from-y) - var(--ueb-to-y) - 1, 1);display:block;min-width:calc(var(--ueb-link-min-width)*1px);visibility:hidden}ueb-link svg{--ueb-y-opposite-coefficient: calc(2* var(--ueb-y-opposite) - 1);position:absolute;top:0;left:0;width:100%;height:100%;min-height:1px;transform:scaleY(calc(var(--ueb-y-opposite-coefficient) * var(--ueb-from-input-coefficient)));overflow:visible}ueb-link svg path{visibility:visible;stroke:var(--ueb-pin-color);stroke-width:1}ueb-link.ueb-link-dragging svg path,ueb-link svg g:hover path{stroke-width:5;transition:stroke-width .8s}ueb-link-message{display:block;visibility:visible;position:absolute;top:calc(100%*(1 - var(--ueb-y-opposite)) + 22px);left:calc((1 - var(--ueb-from-input))*100% + (var(--ueb-from-input-coefficient))*var(--ueb-start-percentage) + 15px);border:1px solid #000;padding:4px 8px;border-radius:2px;background:linear-gradient(to bottom, #2a2a2a 0, #151515 50%, #2a2a2a 100%);color:var(--ueb-pin-dim-color);white-space:nowrap;z-index:1000000}.ueb{--ueb-pin-color: white;--ueb-pin-dim-color: #afafaf}.ueb-pin-boolean{--ueb-pin-color: #4d0000}.ueb-pin-class{--ueb-pin-color: #5800bb}.ueb-pin-float{--ueb-pin-color: #9ffb44}.ueb-pin-int{--ueb-pin-color: #1fe0ad}.ueb-pin-name{--ueb-pin-color: #cb81fc}.ueb-pin-object{--ueb-pin-color: #006603}.ueb-pin-rotator{--ueb-pin-color: #9eb1fc}.ueb-pin-string{--ueb-pin-color: #fc00d2;--ueb-pin-background: linear-gradient(90deg, #fc00d220, #fc00d280 15%, #fc00d250 85%, transparent)}.ueb-pin-vector{--ueb-pin-color: #fcc823}/*# sourceMappingURL=ueb-style.css.map */ diff --git a/dist/css/ueb-style.css.map b/dist/css/ueb-style.css.map index 453b71d..e5d2a73 100644 --- a/dist/css/ueb-style.css.map +++ b/dist/css/ueb-style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WClHR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCvDJ,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../scss/style.scss","../../scss/ueb-node.scss","../../scss/ueb-pin.scss","../../scss/ueb-link.scss","../../scss/ueb-type-color.scss"],"names":[],"mappings":"AAAA,WACI,qBACA,iBACA,IACI,kGAIR,WACI,qBACA,mBACA,IACI,sGAIR,cACI,cACA,kBACA,8EACA,+BACA,iBAGJ,qBACI,aACA,kBACA,MACA,QACA,OACA,aACA,0BACA,UAGJ,mBACI,iBACA,gBACA,eAGJ,mBACI,kBACA,gCACA,gBACA,kBAGJ,oDACI,gBAGJ,UACI,kFACA,kBACA,eACA,gBACA,kEACA,mEACA,yBACA,iBAEI,s3BA0BJ,gBAEI,sZAQJ,sFACA,gEACA,oDACA,qBACA,gBAGJ,kDACI,gBAGJ,mDACI,eAGJ,qBAEI,eACA,6CAGJ,gBACI,eAGJ,gBACI,mBAGJ,gBACI,kBAGJ,gBACI,mBAGJ,gBACI,iBAGJ,gBACI,mBAGJ,gBACI,kBAGJ,iBACI,mBAGJ,iBACI,kBAGJ,iBACI,mBAGJ,iBACI,iBACA,uDAGJ,iBACI,mBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,iBACA,uDAGJ,iBACI,sBACA,uDAGJ,iBACI,sBACA,uDAGJ,kBACI,iBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,sBACA,uDAGJ,kBACI,kBACA,QACA,SACA,wGAGJ,gEACI,8DACA,8DACA,8DACA,8DACA,oGACA,qGACA,kBACA,wCACA,yCACA,0CACA,4CAGJ,aACI,cACA,kBACA,kBACA,MACA,OACA,QACA,SACA,iBAEI,wlDAmDJ,gBAEI,gQAWJ,oBAEI,wJAOJ,4BAGJ,gDACI,mBAIJ,eACI,mBC7TJ,SACI,cACA,kBACA,sGACA,qCACA,uDAGJ,wEACI,YAGJ,iBACI,YACA,YACA,+CAGJ,+BACI,iBACI,kNAIJ,oDACA,0CACA,sDACA,0BACA,oBAGJ,kBACI,kBACA,YACA,gCACA,qCACA,6BACA,gBAGJ,iBACI,kBACA,6DACA,gEACA,8EACA,aACA,gBACA,mBAGJ,eACI,iFACA,qBACA,mBAGJ,eACI,aACA,cACA,WACA,gBACA,mBAGJ,iBACI,kBACA,iBAGJ,kBACI,kBAGJ,iBACI,aAGJ,iDACI,cC9EJ,QACI,cACA,aACA,gBAEA,UACI,qBACA,sBAIR,wEACI,aAGJ,6EACI,qCACA,iBAGJ,0BACI,iBAGJ,mBACI,qBACA,wBAGJ,oBACI,qBACA,kBACA,UACA,WACA,wBACA,wBAGJ,4BACI,WACA,cACA,kBACA,MACA,QACA,SACA,OACA,sCACA,kBAGJ,iDACI,gCAGJ,2BACI,WACA,cACA,kBACA,qBACA,sBACA,QACA,SACA,kCACA,qCACA,4CAGJ,sBACI,qBACA,sBAGJ,4BACI,aAGJ,eACI,qBACA,sBACA,gBACA,yBACA,kBACA,oBACA,aAEA,4FAII,qBACA,aAIR,uBACI,cACA,aACA,YACA,mBACA,UACA,eACA,gBACA,gBACA,gBACA,cACA,YACA,cAEA,0CACI,WACA,YAGJ,gDACI,mBACA,mBACA,WCpHR,SACI,kEAEA,uEACA,cACA,8CAKA,kBAGJ,aACI,iEACA,kBACA,MACA,OACA,WACA,YACA,eACA,8FACA,iBAGJ,kBACI,mBACA,4BACA,eAGJ,8DAEI,eACA,4BAGJ,iBACI,cACA,mBACA,kBACA,kDACA,qHAOA,sBACA,gBACA,kBACA,4EACA,+BACA,mBACA,gBCvDJ,KAGI,uBACA,6BAGJ,iBAEI,yBAGJ,eAEI,yBAGJ,eAEI,yBAGJ,aAEI,yBAGJ,cAEI,yBAGJ,gBAGI,yBAGJ,iBAEI,yBAGJ,gBAEI,yBACA,mGAGJ,gBAEI","file":"ueb-style.css"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 23eef2f..305a8cb 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -803,9 +803,13 @@ class Configuration { /** * @typedef {import("../Blueprint").default} Blueprint */ + +/** + * @template {HTMLElement} T + */ class IContext { - /** @type {HTMLElement} */ + /** @type {T} */ #target get target() { return this.#target @@ -821,7 +825,7 @@ class IContext { options /** - * @param {HTMLElement} target + * @param {T} target * @param {Blueprint} blueprint * @param {Object} options */ @@ -830,7 +834,7 @@ class IContext { this.#blueprint = blueprint; this.options = options; this.options.listenOnFocus = this.options?.listenOnFocus ?? false; - this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? false; + this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? true; let self = this; this.listenHandler = _ => self.listenEvents(); this.unlistenHandler = _ => self.unlistenEvents(); @@ -1895,7 +1899,6 @@ class Copy extends IContext { constructor(target, blueprint, options = {}) { options.listenOnFocus = true; - options.unlistenOnTextEdit = true; super(target, blueprint, options); this.serializer = new ObjectSerializer(); let self = this; @@ -2032,8 +2035,21 @@ class KeyboardCanc extends IKeyboardShortcut { // @ts-check +/** + * @typedef {import("../../Blueprint").default} Blueprint + */ + +/** + * @template {HTMLElement} T + * @extends {IContext} + */ class IPointing extends IContext { + /** + * @param {T} target + * @param {Blueprint} blueprint + * @param {Object} options + */ constructor(target, blueprint, options) { super(target, blueprint, options); this.movementSpace = this.blueprint?.getGridDOMElement() ?? document.documentElement; @@ -2046,7 +2062,9 @@ class IPointing extends IContext { return this.blueprint.compensateTranslation( Utility.convertLocation( [mouseEvent.clientX, mouseEvent.clientY], - this.movementSpace)) + this.movementSpace + ) + ) } } @@ -2561,8 +2579,14 @@ customElements.define(LinkElement.tagName, LinkElement); // @ts-check +/** + * @typedef {import("../../Blueprint").default} Blueprint + */ + /** * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses. + * @template {HTMLElement} T + * @extends {IPointing} */ class IMouseClickDrag extends IPointing { @@ -2582,6 +2606,11 @@ class IMouseClickDrag extends IPointing { started = false + /** + * @param {T} target + * @param {Blueprint} blueprint + * @param {Object} options + */ constructor(target, blueprint, options) { super(target, blueprint, options); this.clickButton = options?.clickButton ?? 0; @@ -2800,21 +2829,21 @@ class MouseTracking extends IPointing { // @ts-check /** + * @typedef {import("../../Blueprint").default} Blueprint * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement + * @extends {IMouseClickDrag} */ class MouseMoveNodes extends IMouseClickDrag { /** * @param {ISelectableDraggableElement} target - * @param {*} blueprint - * @param {*} options + * @param {Blueprint} blueprint + * @param {Object} options */ constructor(target, blueprint, options) { super(target, blueprint, options); this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize); this.mouseLocation = [0, 0]; - /** @type {ISelectableDraggableElement} */ - this.target; } startDrag() { @@ -3038,9 +3067,12 @@ customElements.define(LinkMessageElement.tagName, LinkMessageElement); // @ts-check /** - * @typedef {import("../../element/LinkElement").default} LinkElement * @typedef {import("../../element/PinElement").default} PinElement */ + +/** + * @extends IMouseClickDrag + */ class MouseCreateLink extends IMouseClickDrag { /** @type {NodeListOf} */ @@ -3062,14 +3094,12 @@ class MouseCreateLink extends IMouseClickDrag { constructor(target, blueprint, options) { super(target, blueprint, options); - /** @type {PinElement} */ - this.target; let self = this; this.#mouseenterHandler = e => { if (!self.enteredPin) { self.linkValid = false; - self.enteredPin = e.target; + self.enteredPin = /** @type {PinElement} */ (e.target); const a = self.enteredPin, b = self.target; if (a.getNodeElement() == b.getNodeElement()) { this.setLinkMessage(LinkMessageElement.sameNode()); @@ -3099,7 +3129,7 @@ class MouseCreateLink extends IMouseClickDrag { this.link = new LinkElement(this.target, null); this.blueprint.nodesContainerElement.prepend(this.link); this.setLinkMessage(LinkMessageElement.placeNode()); - this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName); + this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin"); this.#listenedPins.forEach(pin => { if (pin != this.target) { pin.getClickableElement().addEventListener("mouseenter", this.#mouseenterHandler); @@ -3158,20 +3188,20 @@ class PinTemplate extends ITemplate { render(pin) { if (pin.isInput()) { return html` - +
${this.renderIcon(pin)} - - +
+
${sanitizeText(pin.getPinDisplayName())} ${this.renderInput(pin)} - +
` } else { return html` - ${sanitizeText(pin.getPinDisplayName())} - +
${sanitizeText(pin.getPinDisplayName())}
+
${this.renderIcon(pin)} - +
` } } @@ -3205,7 +3235,7 @@ class PinTemplate extends ITemplate { pin.dataset.advancedView = "true"; } pin.clickableElement = pin; - window.customElements.whenDefined("ueb-node").then(pin.nodeElement = pin.closest("ueb-node")); + window.customElements.whenDefined("ueb-node").then(_ => pin.nodeElement = pin.closest("ueb-node")); pin.getLinks().forEach(pinReference => { const targetPin = pin.blueprint.getPin(pinReference); if (targetPin) { @@ -3275,12 +3305,15 @@ class StringPinTemplate extends PinTemplate { */ renderInput(pin) { return html` - - +
- + onfocusout=" + this.closest('ueb-blueprint')?.dispatchEditTextEvent(false) + document.getSelection().removeAllRanges() + " + >
+ ` } } @@ -3599,7 +3632,6 @@ class Paste extends IContext { constructor(target, blueprint, options = {}) { options.listenOnFocus = true; - options.unlistenOnTextEdit = true; super(target, blueprint, options); this.serializer = new ObjectSerializer(); let self = this; diff --git a/js/input/IContext.js b/js/input/IContext.js index 8e0404a..774526b 100644 --- a/js/input/IContext.js +++ b/js/input/IContext.js @@ -3,9 +3,13 @@ /** * @typedef {import("../Blueprint").default} Blueprint */ + +/** + * @template {HTMLElement} T + */ export default class IContext { - /** @type {HTMLElement} */ + /** @type {T} */ #target get target() { return this.#target @@ -21,7 +25,7 @@ export default class IContext { options /** - * @param {HTMLElement} target + * @param {T} target * @param {Blueprint} blueprint * @param {Object} options */ @@ -30,7 +34,7 @@ export default class IContext { this.#blueprint = blueprint this.options = options this.options.listenOnFocus = this.options?.listenOnFocus ?? false - this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? false + this.options.unlistenOnTextEdit = this.options?.unlistenOnTextEdit ?? true let self = this this.listenHandler = _ => self.listenEvents() this.unlistenHandler = _ => self.unlistenEvents() diff --git a/js/input/common/Copy.js b/js/input/common/Copy.js index 402a5df..c3f9d85 100755 --- a/js/input/common/Copy.js +++ b/js/input/common/Copy.js @@ -10,7 +10,6 @@ export default class Copy extends IContext { constructor(target, blueprint, options = {}) { options.listenOnFocus = true - options.unlistenOnTextEdit = true super(target, blueprint, options) this.serializer = new ObjectSerializer() let self = this diff --git a/js/input/common/Paste.js b/js/input/common/Paste.js index c38304b..cb686dd 100755 --- a/js/input/common/Paste.js +++ b/js/input/common/Paste.js @@ -11,7 +11,6 @@ export default class Paste extends IContext { constructor(target, blueprint, options = {}) { options.listenOnFocus = true - options.unlistenOnTextEdit = true super(target, blueprint, options) this.serializer = new ObjectSerializer() let self = this diff --git a/js/input/mouse/IMouseClickDrag.js b/js/input/mouse/IMouseClickDrag.js index bace2ce..d91bf85 100644 --- a/js/input/mouse/IMouseClickDrag.js +++ b/js/input/mouse/IMouseClickDrag.js @@ -2,8 +2,14 @@ import IPointing from "./IPointing" +/** + * @typedef {import("../../Blueprint").default} Blueprint + */ + /** * This class manages the ui gesture of mouse click and drag. Tha actual operations are implemented by the subclasses. + * @template {HTMLElement} T + * @extends {IPointing} */ export default class IMouseClickDrag extends IPointing { diff --git a/js/input/mouse/IPointing.js b/js/input/mouse/IPointing.js index b202db5..2b4627f 100644 --- a/js/input/mouse/IPointing.js +++ b/js/input/mouse/IPointing.js @@ -3,6 +3,14 @@ import IContext from "../IContext" import Utility from "../../Utility" +/** + * @typedef {import("../../Blueprint").default} Blueprint + */ + +/** + * @template {HTMLElement} T + * @extends {IContext} + */ export default class IPointing extends IContext { constructor(target, blueprint, options) { @@ -17,6 +25,8 @@ export default class IPointing extends IContext { return this.blueprint.compensateTranslation( Utility.convertLocation( [mouseEvent.clientX, mouseEvent.clientY], - this.movementSpace)) + this.movementSpace + ) + ) } } diff --git a/js/input/mouse/MouseCreateLink.js b/js/input/mouse/MouseCreateLink.js index f9a7eb6..747f0d9 100755 --- a/js/input/mouse/MouseCreateLink.js +++ b/js/input/mouse/MouseCreateLink.js @@ -5,9 +5,12 @@ import LinkElement from "../../element/LinkElement" import LinkMessageElement from "../../element/LinkMessageElement" /** - * @typedef {import("../../element/LinkElement").default} LinkElement * @typedef {import("../../element/PinElement").default} PinElement */ + +/** + * @extends IMouseClickDrag + */ export default class MouseCreateLink extends IMouseClickDrag { /** @type {NodeListOf} */ @@ -29,14 +32,12 @@ export default class MouseCreateLink extends IMouseClickDrag { constructor(target, blueprint, options) { super(target, blueprint, options) - /** @type {PinElement} */ - this.target let self = this this.#mouseenterHandler = e => { if (!self.enteredPin) { self.linkValid = false - self.enteredPin = e.target + self.enteredPin = /** @type {PinElement} */ (e.target) const a = self.enteredPin, b = self.target if (a.getNodeElement() == b.getNodeElement()) { this.setLinkMessage(LinkMessageElement.sameNode()) @@ -66,7 +67,7 @@ export default class MouseCreateLink extends IMouseClickDrag { this.link = new LinkElement(this.target, null) this.blueprint.nodesContainerElement.prepend(this.link) this.setLinkMessage(LinkMessageElement.placeNode()) - this.#listenedPins = this.blueprint.querySelectorAll(this.target.constructor.tagName) + this.#listenedPins = this.blueprint.querySelectorAll("ueb-pin") this.#listenedPins.forEach(pin => { if (pin != this.target) { pin.getClickableElement().addEventListener("mouseenter", this.#mouseenterHandler) diff --git a/js/input/mouse/MouseMoveNodes.js b/js/input/mouse/MouseMoveNodes.js index 700eddf..9573333 100755 --- a/js/input/mouse/MouseMoveNodes.js +++ b/js/input/mouse/MouseMoveNodes.js @@ -4,21 +4,19 @@ import IMouseClickDrag from "./IMouseClickDrag" import Utility from "../../Utility" /** + * @typedef {import("../../Blueprint").default} Blueprint * @typedef {import("../../element/ISelectableDraggableElement").default} ISelectableDraggableElement */ + +/** + * @extends {IMouseClickDrag} + */ export default class MouseMoveNodes extends IMouseClickDrag { - /** - * @param {ISelectableDraggableElement} target - * @param {*} blueprint - * @param {*} options - */ constructor(target, blueprint, options) { super(target, blueprint, options) this.stepSize = parseInt(options?.stepSize ?? this.blueprint.gridSize) this.mouseLocation = [0, 0] - /** @type {ISelectableDraggableElement} */ - this.target } startDrag() { diff --git a/js/template/PinTemplate.js b/js/template/PinTemplate.js index dae6d17..9d13672 100755 --- a/js/template/PinTemplate.js +++ b/js/template/PinTemplate.js @@ -24,20 +24,20 @@ export default class PinTemplate extends ITemplate { render(pin) { if (pin.isInput()) { return html` - +
${this.renderIcon(pin)} - - +
+
${sanitizeText(pin.getPinDisplayName())} ${this.renderInput(pin)} - +
` } else { return html` - ${sanitizeText(pin.getPinDisplayName())} - +
${sanitizeText(pin.getPinDisplayName())}
+
${this.renderIcon(pin)} - +
` } } @@ -71,7 +71,7 @@ export default class PinTemplate extends ITemplate { pin.dataset.advancedView = "true" } pin.clickableElement = pin - window.customElements.whenDefined("ueb-node").then(pin.nodeElement = pin.closest("ueb-node")) + window.customElements.whenDefined("ueb-node").then(_ => pin.nodeElement = pin.closest("ueb-node")) pin.getLinks().forEach(pinReference => { const targetPin = pin.blueprint.getPin(pinReference) if (targetPin) { diff --git a/js/template/StringPinTemplate.js b/js/template/StringPinTemplate.js index 3f5816f..75aa260 100644 --- a/js/template/StringPinTemplate.js +++ b/js/template/StringPinTemplate.js @@ -16,14 +16,16 @@ export default class StringPinTemplate extends PinTemplate { * @param {PinElement} pin */ renderInput(pin) { - const stopEventPropagation = "e => stopPropagation()" return html` - - +
- + onfocusout=" + this.closest('ueb-blueprint')?.dispatchEditTextEvent(false) + document.getSelection().removeAllRanges() + " + >
+ ` } } diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss index 49ec64b..bd6660c 100644 --- a/scss/ueb-pin.scss +++ b/scss/ueb-pin.scss @@ -75,6 +75,8 @@ ueb-pin.ueb-pin-fill .ueb-pin-icon-value::before { } .ueb-pin-input { + display: inline-block; + vertical-align: middle; margin-left : 3px; border : 1px solid #a0a0a0; border-radius: 3px;