diff --git a/dist/css/ueb-style.css b/dist/css/ueb-style.css index 51e0163..5bffc6e 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);color:#fff;user-select:none}ueb-blueprint svg{overflow:visible}.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-grid-content>div{width:0;height:0}.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);font-weight:lighter}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-wrapper{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-top{padding:.3em .7em;box-shadow:inset 5px 1px 5px -3px #83b37b,inset 0 1px 0 0 #111311,inset 0 2px 0 0 #83b37b;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:900;white-space:nowrap}.ueb-node-name{background:radial-gradient(ellipse 100% 100% at 30% 50%, rgba(0, 0, 0, 0.45) 20%, transparent 50%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-content{display:flex;padding:1px 0;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:20px;padding-left:8px}.ueb-node-outputs{margin-left:auto;padding-right:8px}.ueb-node-developmentonly{display:none;margin-top:8px;background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);text-align:center;padding:2px;letter-spacing:.06em;text-shadow:1px 1px 1px #000}ueb-node[data-enabled-state=DevelopmentOnly] .ueb-node-developmentonly{display:block}.ueb-node-expansion{display:none;text-align:center}.ueb-node-expansion-icon{vertical-align:middle}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-node-expansion:hover{background-color:#656765;cursor:pointer}ueb-node[data-advanced-display] .ueb-node-expansion{display:block}ueb-node[data-advanced-display=Shown] .ueb-node-expansion-icon{transform:scaleY(-1)}ueb-pin{display:block}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}.ueb-pin-wrapper{display:inline-block;margin:6px 0 0 0;padding:2px 2px}.ueb-pin-wrapper>*{display:inline-block;vertical-align:middle}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-pin-wrapper: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:12px;height:12px;vertical-align:baseline;margin:0 .5em -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.ueb-pin-fill .ueb-pin-tofill{fill:currentColor}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:3px;left:13px;width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-name{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:0 3px 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;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)))}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-type-bool{--ueb-pin-color: #750000;--ueb-pin-background: linear-gradient(90deg, rgba(117, 0, 0, 0.15), rgba(117, 0, 0, 0.8) 15%, rgba(117, 0, 0, 0.5) 60%, rgba(117, 0, 0, 0.35) 95%, transparent)}.ueb-pin-type-class{--ueb-pin-color: #5800bb;--ueb-pin-background: linear-gradient(90deg, rgba(88, 0, 187, 0.15), rgba(88, 0, 187, 0.8) 15%, rgba(88, 0, 187, 0.5) 60%, rgba(88, 0, 187, 0.35) 95%, transparent)}.ueb-pin-type-exec{--ueb-pin-color: #a7a7a7;--ueb-pin-background: linear-gradient(90deg, rgba(167, 167, 167, 0.15), rgba(167, 167, 167, 0.8) 15%, rgba(167, 167, 167, 0.5) 60%, rgba(167, 167, 167, 0.35) 95%, transparent)}.ueb-pin-type-int{--ueb-pin-color: #1fe0ad;--ueb-pin-background: linear-gradient(90deg, rgba(31, 224, 173, 0.15), rgba(31, 224, 173, 0.8) 15%, rgba(31, 224, 173, 0.5) 60%, rgba(31, 224, 173, 0.35) 95%, transparent)}.ueb-pin-type-name{--ueb-pin-color: #cb81fc;--ueb-pin-background: linear-gradient(90deg, rgba(203, 129, 252, 0.15), rgba(203, 129, 252, 0.8) 15%, rgba(203, 129, 252, 0.5) 60%, rgba(203, 129, 252, 0.35) 95%, transparent)}.ueb-pin-type-object{--ueb-pin-color: #00a8f2;--ueb-pin-background: linear-gradient(90deg, rgba(0, 168, 242, 0.15), rgba(0, 168, 242, 0.8) 15%, rgba(0, 168, 242, 0.5) 60%, rgba(0, 168, 242, 0.35) 95%, transparent)}.ueb-pin-type-real{--ueb-pin-color: #32bb00;--ueb-pin-background: linear-gradient(90deg, rgba(50, 187, 0, 0.15), rgba(50, 187, 0, 0.8) 15%, rgba(50, 187, 0, 0.5) 60%, rgba(50, 187, 0, 0.35) 95%, transparent)}.ueb-pin-type-rotator{--ueb-pin-color: #9eb1fc;--ueb-pin-background: linear-gradient(90deg, rgba(158, 177, 252, 0.15), rgba(158, 177, 252, 0.8) 15%, rgba(158, 177, 252, 0.5) 60%, rgba(158, 177, 252, 0.35) 95%, transparent)}.ueb-pin-type-string{--ueb-pin-color: #d500b1;--ueb-pin-background: linear-gradient(90deg, rgba(213, 0, 177, 0.15), rgba(213, 0, 177, 0.8) 15%, rgba(213, 0, 177, 0.5) 60%, rgba(213, 0, 177, 0.35) 95%, transparent)}.ueb-pin-type-struct{--ueb-pin-color: #034ca8;--ueb-pin-background: linear-gradient(90deg, rgba(3, 76, 168, 0.15), rgba(3, 76, 168, 0.8) 15%, rgba(3, 76, 168, 0.5) 60%, rgba(3, 76, 168, 0.35) 95%, transparent)}.ueb-pin-type-vector{--ueb-pin-color: #fcc823;--ueb-pin-background: linear-gradient(90deg, rgba(252, 200, 35, 0.15), rgba(252, 200, 35, 0.8) 15%, rgba(252, 200, 35, 0.5) 60%, rgba(252, 200, 35, 0.35) 95%, transparent)}/*# 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);color:#fff;user-select:none}ueb-blueprint svg{overflow:visible}.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-grid-content>div{width:0;height:0}.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);font-weight:lighter}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-wrapper{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-top{padding:.3em .7em;box-shadow:inset 5px 1px 5px -3px #83b37b,inset 0 1px 0 0 #111311,inset 0 2px 0 0 #83b37b;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:900;white-space:nowrap}.ueb-node-name{background:radial-gradient(ellipse 100% 100% at 30% 50%, rgba(0, 0, 0, 0.45) 20%, transparent 50%);margin:-0.1em -1.6em;padding:.1em 1.6em}.ueb-node-content{display:flex;padding:1px 0;font-weight:100;white-space:nowrap}.ueb-node-inputs{margin-right:20px;padding-left:8px}.ueb-node-outputs{margin-left:auto;padding-right:8px}.ueb-node-developmentonly{display:none;margin-top:8px;background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);background:repeating-linear-gradient(-45deg, transparent 0, #57590a 1px, #57590a 11px, transparent 12px, transparent 24px);text-align:center;padding:2px;letter-spacing:.06em;text-shadow:1px 1px 1px #000}ueb-node[data-enabled-state=DevelopmentOnly] .ueb-node-developmentonly{display:block}.ueb-node-expansion{display:none;text-align:center}.ueb-node-expansion-icon{vertical-align:middle}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-node-expansion:hover{background-color:#656765;cursor:pointer}ueb-node[data-advanced-display] .ueb-node-expansion{display:block}ueb-node[data-advanced-display=Shown] .ueb-node-expansion-icon{transform:scaleY(-1)}ueb-pin{display:block}ueb-node[data-advanced-display=Hidden] ueb-pin[data-advanced-view=true]{display:none}.ueb-pin-wrapper{display:inline-block;margin:6px 0 0 0;padding:2px 2px}.ueb-pin-wrapper>*{display:inline-block;vertical-align:middle}ueb-blueprint[data-drag-scrolling=false][data-selecting=false] .ueb-pin-wrapper: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:12px;height:12px;vertical-align:baseline;margin:0 .5em -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.ueb-pin-fill .ueb-pin-tofill{fill:currentColor}.ueb-pin-icon-value::after{content:"";display:block;position:absolute;top:3px;left:13px;width:0;height:0;border-top:.3em solid transparent;border-bottom:.3em solid transparent;border-left:.3em solid var(--ueb-pin-color)}.ueb-pin-name{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:0 3px 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-type-bool .ueb-pin-input{appearance:none;padding:0;height:18px;width:18px;background:#0f0f0f;color:var(--ueb-pin-color)}.ueb-pin-type-bool .ueb-pin-input:checked{background:url('data:image/svg+xml,')}.ueb-pin-input-content{display:block;outline:none;border:none;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)))}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-type-bool{--ueb-pin-color: #750000;--ueb-pin-background: linear-gradient(90deg, rgba(117, 0, 0, 0.15), rgba(117, 0, 0, 0.8) 15%, rgba(117, 0, 0, 0.5) 60%, rgba(117, 0, 0, 0.35) 95%, transparent)}.ueb-pin-type-class{--ueb-pin-color: #5800bb;--ueb-pin-background: linear-gradient(90deg, rgba(88, 0, 187, 0.15), rgba(88, 0, 187, 0.8) 15%, rgba(88, 0, 187, 0.5) 60%, rgba(88, 0, 187, 0.35) 95%, transparent)}.ueb-pin-type-exec{--ueb-pin-color: #a7a7a7;--ueb-pin-background: linear-gradient(90deg, rgba(167, 167, 167, 0.15), rgba(167, 167, 167, 0.8) 15%, rgba(167, 167, 167, 0.5) 60%, rgba(167, 167, 167, 0.35) 95%, transparent)}.ueb-pin-type-int{--ueb-pin-color: #1fe0ad;--ueb-pin-background: linear-gradient(90deg, rgba(31, 224, 173, 0.15), rgba(31, 224, 173, 0.8) 15%, rgba(31, 224, 173, 0.5) 60%, rgba(31, 224, 173, 0.35) 95%, transparent)}.ueb-pin-type-name{--ueb-pin-color: #cb81fc;--ueb-pin-background: linear-gradient(90deg, rgba(203, 129, 252, 0.15), rgba(203, 129, 252, 0.8) 15%, rgba(203, 129, 252, 0.5) 60%, rgba(203, 129, 252, 0.35) 95%, transparent)}.ueb-pin-type-object{--ueb-pin-color: #00a8f2;--ueb-pin-background: linear-gradient(90deg, rgba(0, 168, 242, 0.15), rgba(0, 168, 242, 0.8) 15%, rgba(0, 168, 242, 0.5) 60%, rgba(0, 168, 242, 0.35) 95%, transparent)}.ueb-pin-type-real{--ueb-pin-color: #32bb00;--ueb-pin-background: linear-gradient(90deg, rgba(50, 187, 0, 0.15), rgba(50, 187, 0, 0.8) 15%, rgba(50, 187, 0, 0.5) 60%, rgba(50, 187, 0, 0.35) 95%, transparent)}.ueb-pin-type-rotator{--ueb-pin-color: #9eb1fc;--ueb-pin-background: linear-gradient(90deg, rgba(158, 177, 252, 0.15), rgba(158, 177, 252, 0.8) 15%, rgba(158, 177, 252, 0.5) 60%, rgba(158, 177, 252, 0.35) 95%, transparent)}.ueb-pin-type-string{--ueb-pin-color: #d500b1;--ueb-pin-background: linear-gradient(90deg, rgba(213, 0, 177, 0.15), rgba(213, 0, 177, 0.8) 15%, rgba(213, 0, 177, 0.5) 60%, rgba(213, 0, 177, 0.35) 95%, transparent)}.ueb-pin-type-struct{--ueb-pin-color: #034ca8;--ueb-pin-background: linear-gradient(90deg, rgba(3, 76, 168, 0.15), rgba(3, 76, 168, 0.8) 15%, rgba(3, 76, 168, 0.5) 60%, rgba(3, 76, 168, 0.35) 95%, transparent)}.ueb-pin-type-vector{--ueb-pin-color: #fcc823;--ueb-pin-background: linear-gradient(90deg, rgba(252, 200, 35, 0.15), rgba(252, 200, 35, 0.8) 15%, rgba(252, 200, 35, 0.5) 60%, rgba(252, 200, 35, 0.35) 95%, transparent)}/*# sourceMappingURL=ueb-style.css.map */ diff --git a/dist/css/ueb-style.css.map b/dist/css/ueb-style.css.map index 3cae292..f34c07a 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":"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","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":"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","file":"ueb-style.css"} \ No newline at end of file diff --git a/dist/ueblueprint.js b/dist/ueblueprint.js index 64d513b..bd68457 100755 --- a/dist/ueblueprint.js +++ b/dist/ueblueprint.js @@ -2148,9 +2148,7 @@ class ISelectableDraggableElement extends IElement { this.selected = false; let self = this; - this.dragHandler = (e) => { - self.addLocation(e.detail.value); - }; + this.dragHandler = e => self.addLocation(e.detail.value); } #setSelected(value = true) { @@ -2218,6 +2216,21 @@ class ISelectableDraggableElement extends IElement { } } +/** + * @typedef {import("../../element/PinElement").default} PinElement + */ + +/** + * @extends IMouseClickDrag + */ +class MouseIgnore extends IMouseClickDrag { + + constructor(target, blueprint, options = {}) { + options.consumeEvent = true; + super(target, blueprint, options); + } +} + // @ts-check document.createElement("div"); @@ -2924,6 +2937,161 @@ class PinTemplate extends ITemplate { // @ts-check +/** + * @typedef {import("../element/PinElement").default} PinElement + */ + +class IInputPinTemplate extends PinTemplate { + + /** @type {HTMLElement[]} */ + #inputContentElements + hasInput = true + + /** + * @param {PinElement} pin + */ + setup(pin) { + super.setup(pin); + this.#inputContentElements = /** @type {HTMLElement[]} */( + [...pin.querySelectorAll(".ueb-pin-input-content")] + ); + if (this.#inputContentElements.length) { + this.setInputs(pin, [pin.entity.DefaultValue]); + let self = this; + this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true); + this.onFocusOutHandler = e => { + e.preventDefault(); + document.getSelection().removeAllRanges(); // Deselect text inside the input + self.setInputs(pin, this.getInputs(pin)); + pin.blueprint.dispatchEditTextEvent(false); + }; + this.#inputContentElements.forEach(element => { + element.addEventListener("focus", this.onFocusHandler); + element.addEventListener("focusout", this.onFocusOutHandler); + }); + } + } + + /** + * @param {PinElement} pin + */ + cleanup(pin) { + super.cleanup(pin); + this.#inputContentElements.forEach(element => { + element.removeEventListener("focus", this.onFocusHandler); + element.removeEventListener("focusout", this.onFocusOutHandler); + }); + } + + /** + * @param {PinElement} pin + */ + createInputObjects(pin) { + return [ + ...super.createInputObjects(pin), + ...this.#inputContentElements.map(element => new MouseIgnore(element, pin.blueprint)) + ] + } + + /** + * @param {PinElement} pin + */ + getInput(pin) { + return this.getInputs(pin).reduce((acc, cur) => acc + cur, "") + } + + /** + * @param {PinElement} pin + */ + getInputs(pin) { + return this.#inputContentElements.map(element => Utility.encodeInputString(element.innerText)) + } + + /** + * @param {PinElement} pin + * @param {String[]?} values + */ + setInputs(pin, values = []) { + pin.entity.DefaultValue = this.getInput(pin); + this.#inputContentElements.forEach((element, i) => element.innerText = Utility.decodeInputString(values[i])); + } + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + if (pin.isInput()) { + return html` +
+
+
+ ` + } + return "" + } +} + +// @ts-check + +/** + * @typedef {import("../element/PinElement").default} PinElement + */ + +class BoolPinTemplate extends IInputPinTemplate { + + /** @type {HTMLInputElement} */ + #input + + /** + * @param {PinElement} pin + */ + setup(pin) { + super.setup(pin); + this.#input = pin.querySelector(".ueb-pin-input"); + let self = this; + this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false"; + this.#input.addEventListener("change", this.onChangeHandler); + } + + /** + * @param {PinElement} pin + */ + cleanup(pin) { + super.cleanup(pin); + this.#input.removeEventListener("change", this.onChangeHandler); + } + + /** + * @param {PinElement} pin + */ + getInputs(pin) { + return [this.#input.checked ? "true" : "false"] + } + + /** + * @param {PinElement} pin + * @param {String[]?} value + */ + setInputs(pin, value = []) { + pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin); + this.#input.checked = pin.entity.DefaultValue == "true"; + } + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + if (pin.isInput()) { + return html` + + ` + } + return super.renderInput(pin) + } +} + +// @ts-check + /** * @typedef {import("../element/PinElement").default} PinElement */ @@ -2954,114 +3122,6 @@ class ExecPinTemplate extends PinTemplate { } } -/** - * @typedef {import("../../element/PinElement").default} PinElement - */ - -/** - * @extends IMouseClickDrag - */ -class MouseIgnore extends IMouseClickDrag { - - constructor(target, blueprint, options = {}) { - options.consumeEvent = true; - super(target, blueprint, options); - } -} - -// @ts-check - -/** - * @typedef {import("../element/PinElement").default} PinElement - */ - -class IInputPinTemplate extends PinTemplate { - - /** @type {HTMLElement} */ - input = null - hasInput = true - - /** - * @param {PinElement} pin - */ - setup(pin) { - super.setup(pin); - if (this.input = pin.querySelector(".ueb-pin-input-content")) { - this.setInput(pin, pin.entity.DefaultValue); - let self = this; - this.onFocusHandler = (e) => { - pin.blueprint.dispatchEditTextEvent(true); - }; - this.onFocusOutHandler = (e) => { - e.preventDefault(); - document.getSelection().removeAllRanges(); // Deselect text inside the input - self.setInput(pin, this.getInput(pin)); - pin.blueprint.dispatchEditTextEvent(false); - }; - this.input.addEventListener("focus", this.onFocusHandler); - this.input.addEventListener("focusout", this.onFocusOutHandler); - } - } - - /** - * @param {PinElement} pin - */ - cleanup(pin) { - super.cleanup(pin); - if (this.input) { - this.input.removeEventListener("focus", this.onFocusHandler); - this.input.removeEventListener("focusout", this.onFocusOutHandler); - } - } - - /** - * @param {PinElement} pin - */ - createInputObjects(pin) { - if (pin.isInput()) { - return [ - ...super.createInputObjects(pin), - new MouseIgnore(pin.querySelector(".ueb-pin-input-content"), pin.blueprint), - ] - } - return super.createInputObjects(pin) - } - - /** - * @param {PinElement} pin - */ - getInput(pin) { - return Utility.encodeInputString( - /** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText - ) - } - - /** - * @param {PinElement} pin - * @param {String} value - */ - setInput(pin, value) { - pin.entity.DefaultValue = this.getInput(pin); - pin.querySelector(".ueb-pin-input-content") - // @ts-expect-error - .innerText = Utility.decodeInputString(value); - } - - /** - * @param {PinElement} pin - */ - renderInput(pin) { - if (pin.isInput()) { - return html` -
-
-
- ` - } - return "" - } -} - // @ts-check /** @@ -3072,15 +3132,15 @@ class RealPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin - * @param {String} value + * @param {String[]?} values */ - setInput(pin, value) { - let num = parseFloat(this.getInput(pin)); + setInputs(pin, values = []) { + let num = parseFloat(values.length ? values[0] : this.getInput(pin)); if (isNaN(num)) { num = parseFloat(pin.entity.AutogeneratedDefaultValue); } - value = Utility.minDecimals(num); - super.setInput(pin, value); + values[0] = Utility.minDecimals(num); + super.setInputs(pin, values); } } @@ -3115,6 +3175,7 @@ class StringPinTemplate extends IInputPinTemplate { class PinElement extends IElement { static #typeTemplateMap = { + "bool": BoolPinTemplate, "exec": ExecPinTemplate, "real": RealPinTemplate, "string": StringPinTemplate, diff --git a/js/element/ISelectableDraggableElement.js b/js/element/ISelectableDraggableElement.js index 225ccd3..ed49eb3 100644 --- a/js/element/ISelectableDraggableElement.js +++ b/js/element/ISelectableDraggableElement.js @@ -24,9 +24,7 @@ export default class ISelectableDraggableElement extends IElement { this.selected = false let self = this - this.dragHandler = (e) => { - self.addLocation(e.detail.value) - } + this.dragHandler = e => self.addLocation(e.detail.value) } #setSelected(value = true) { diff --git a/js/element/PinElement.js b/js/element/PinElement.js index a4cf5fc..a134e44 100644 --- a/js/element/PinElement.js +++ b/js/element/PinElement.js @@ -1,5 +1,6 @@ // @ts-check +import BoolPinTemplate from "../template/BoolPinTemplate" import ExecPinTemplate from "../template/ExecPinTemplate" import IElement from "./IElement" import LinkElement from "./LinkElement" @@ -21,6 +22,7 @@ import Utility from "../Utility" export default class PinElement extends IElement { static #typeTemplateMap = { + "bool": BoolPinTemplate, "exec": ExecPinTemplate, "real": RealPinTemplate, "string": StringPinTemplate, diff --git a/js/template/BoolPinTemplate.js b/js/template/BoolPinTemplate.js new file mode 100644 index 0000000..f00b0d4 --- /dev/null +++ b/js/template/BoolPinTemplate.js @@ -0,0 +1,61 @@ +// @ts-check + +import html from "./html" +import IInputPinTemplate from "./IInputPinTemplate" + +/** + * @typedef {import("../element/PinElement").default} PinElement + */ + +export default class BoolPinTemplate extends IInputPinTemplate { + + /** @type {HTMLInputElement} */ + #input + + /** + * @param {PinElement} pin + */ + setup(pin) { + super.setup(pin) + this.#input = pin.querySelector(".ueb-pin-input") + let self = this + this.onChangeHandler = _ => pin.entity.DefaultValue = self.#input.checked ? "true" : "false" + this.#input.addEventListener("change", this.onChangeHandler) + } + + /** + * @param {PinElement} pin + */ + cleanup(pin) { + super.cleanup(pin) + this.#input.removeEventListener("change", this.onChangeHandler) + } + + /** + * @param {PinElement} pin + */ + getInputs(pin) { + return [this.#input.checked ? "true" : "false"] + } + + /** + * @param {PinElement} pin + * @param {String[]?} value + */ + setInputs(pin, value = []) { + pin.entity.DefaultValue = value.length ? value[0] : this.getInput(pin) + this.#input.checked = pin.entity.DefaultValue == "true" + } + + /** + * @param {PinElement} pin + */ + renderInput(pin) { + if (pin.isInput()) { + return html` + + ` + } + return super.renderInput(pin) + } +} diff --git a/js/template/IInputPinTemplate.js b/js/template/IInputPinTemplate.js index 62ebe19..2a5ce27 100644 --- a/js/template/IInputPinTemplate.js +++ b/js/template/IInputPinTemplate.js @@ -3,7 +3,6 @@ import html from "./html" import MouseIgnore from "../input/mouse/MouseIgnore" import PinTemplate from "./PinTemplate" -import sanitizeText from "./sanitizeText" import Utility from "../Utility" /** @@ -12,8 +11,8 @@ import Utility from "../Utility" export default class IInputPinTemplate extends PinTemplate { - /** @type {HTMLElement} */ - input = null + /** @type {HTMLElement[]} */ + #inputContentElements hasInput = true /** @@ -21,20 +20,23 @@ export default class IInputPinTemplate extends PinTemplate { */ setup(pin) { super.setup(pin) - if (this.input = pin.querySelector(".ueb-pin-input-content")) { - this.setInput(pin, pin.entity.DefaultValue) + this.#inputContentElements = /** @type {HTMLElement[]} */( + [...pin.querySelectorAll(".ueb-pin-input-content")] + ) + if (this.#inputContentElements.length) { + this.setInputs(pin, [pin.entity.DefaultValue]) let self = this - this.onFocusHandler = (e) => { - pin.blueprint.dispatchEditTextEvent(true) - } - this.onFocusOutHandler = (e) => { + this.onFocusHandler = _ => pin.blueprint.dispatchEditTextEvent(true) + this.onFocusOutHandler = e => { e.preventDefault() document.getSelection().removeAllRanges() // Deselect text inside the input - self.setInput(pin, this.getInput(pin)) + self.setInputs(pin, this.getInputs(pin)) pin.blueprint.dispatchEditTextEvent(false) } - this.input.addEventListener("focus", this.onFocusHandler) - this.input.addEventListener("focusout", this.onFocusOutHandler) + this.#inputContentElements.forEach(element => { + element.addEventListener("focus", this.onFocusHandler) + element.addEventListener("focusout", this.onFocusOutHandler) + }) } } @@ -43,43 +45,43 @@ export default class IInputPinTemplate extends PinTemplate { */ cleanup(pin) { super.cleanup(pin) - if (this.input) { - this.input.removeEventListener("focus", this.onFocusHandler) - this.input.removeEventListener("focusout", this.onFocusOutHandler) - } + this.#inputContentElements.forEach(element => { + element.removeEventListener("focus", this.onFocusHandler) + element.removeEventListener("focusout", this.onFocusOutHandler) + }) } /** * @param {PinElement} pin */ createInputObjects(pin) { - if (pin.isInput()) { - return [ - ...super.createInputObjects(pin), - new MouseIgnore(pin.querySelector(".ueb-pin-input-content"), pin.blueprint), - ] - } - return super.createInputObjects(pin) + return [ + ...super.createInputObjects(pin), + ...this.#inputContentElements.map(element => new MouseIgnore(element, pin.blueprint)) + ] } /** * @param {PinElement} pin */ getInput(pin) { - return Utility.encodeInputString( - /** @type {HTMLElement} */(pin.querySelector(".ueb-pin-input-content")).innerText - ) + return this.getInputs(pin).reduce((acc, cur) => acc + cur, "") } /** * @param {PinElement} pin - * @param {String} value */ - setInput(pin, value) { + getInputs(pin) { + return this.#inputContentElements.map(element => Utility.encodeInputString(element.innerText)) + } + + /** + * @param {PinElement} pin + * @param {String[]?} values + */ + setInputs(pin, values = []) { pin.entity.DefaultValue = this.getInput(pin) - pin.querySelector(".ueb-pin-input-content") - // @ts-expect-error - .innerText = Utility.decodeInputString(value) + this.#inputContentElements.forEach((element, i) => element.innerText = Utility.decodeInputString(values[i])) } /** diff --git a/js/template/RealPinTemplate.js b/js/template/RealPinTemplate.js index 0a50852..0d01a11 100644 --- a/js/template/RealPinTemplate.js +++ b/js/template/RealPinTemplate.js @@ -11,14 +11,14 @@ export default class RealPinTemplate extends IInputPinTemplate { /** * @param {PinElement} pin - * @param {String} value + * @param {String[]?} values */ - setInput(pin, value) { - let num = parseFloat(this.getInput(pin)) + setInputs(pin, values = []) { + let num = parseFloat(values.length ? values[0] : this.getInput(pin)) if (isNaN(num)) { num = parseFloat(pin.entity.AutogeneratedDefaultValue) } - value = Utility.minDecimals(num) - super.setInput(pin, value) + values[0] = Utility.minDecimals(num) + super.setInputs(pin, values) } } diff --git a/scss/ueb-pin.scss b/scss/ueb-pin.scss index f27f9da..37234d9 100644 --- a/scss/ueb-pin.scss +++ b/scss/ueb-pin.scss @@ -100,6 +100,19 @@ ueb-pin.ueb-pin-fill .ueb-pin-tofill { } } +.ueb-pin-type-bool .ueb-pin-input { + appearance: none; + padding: 0; + height: 18px; + width: 18px; + background: #0f0f0f; + color: var(--ueb-pin-color); +} + +.ueb-pin-type-bool .ueb-pin-input:checked { + background: url('data:image/svg+xml,'); +} + .ueb-pin-input-content { display: block; outline: none;