super-three 0.136.0 → 0.141.0

package/examples/jsm/libs/flow.module.js

@@ -12,11 +12,11 @@ function __flow__addCSS( css ) {
 		style.innerHTML = css;
 		document.head.appendChild( style );
 
-	} catch( e ) {}
+	} catch ( e ) {}
 
 }
 
-__flow__addCSS( `@keyframes f-animation-open { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; }}f-canvas,f-canvas canvas { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-touch-callout: none; }f-canvas { overflow: auto; cursor: grab;}f-canvas canvas.front { z-index: 10;}body.dragging f-canvas,body.connecting f-canvas { overflow: hidden !important;}body.dragging *:not(.drag) { pointer-events: none !important;}f-canvas.grabbing * { cursor: grabbing; user-select: none;}f-canvas canvas { position: fixed; overflow: hidden; pointer-events: none;}f-canvas::-webkit-scrollbar { width: 8px; height: 8px;}f-canvas::-webkit-scrollbar-thumb:hover{ background: #014fc5;}f-canvas::-webkit-scrollbar-track { background: #363636;}f-canvas::-webkit-scrollbar-thumb { background-color: #666666; border-radius: 10px; border: 0;}f-canvas f-content,f-canvas f-area { position: absolute; display: block;}f-node { position: absolute; margin: 0; padding: 0; user-select: none; width: 320px; z-index: 1; cursor: auto; filter: drop-shadow(0 0 10px #00000061); backdrop-filter: blur(4px);}f-node.selected { z-index: 2;}f-node.selected,f-canvas.dragging-rio f-node:hover,f-canvas.dragging-lio f-node:hover { filter: drop-shadow(0 0 10px #00000061) drop-shadow(0 0 8px #4444dd);}f-node.closed f-element:not(:first-child) { display: none;}f-node.center { top: 50%; left: 50%; transform: translate( -50%, -50% );}f-node.top-right { top: 0; right: 0;}f-node.top-center { top: 0; left: 50%; transform: translateX( -50% );}f-node.top-left { top: 0; left: 0;}f-node { transition: filter 0.2s ease;}f-node { animation: .2s f-animation-open 1 alternate ease-out;}f-drop,f-menu,f-menu button,f-element,f-element input,f-element select,f-element button,f-element textarea { font-family: 'Open Sans', sans-serif; font-size: 13px; text-transform: capitalize; color: #eeeeee; outline: solid 0px #000; letter-spacing: .2px; margin: 0; padding: 0; border: 0; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease;}f-element input { transition: background 0.1s ease;}f-element input,f-element select,f-element button,f-element textarea { background-color: #242427;}f-element { position: relative; width: calc( 100% - 14px ); background: rgba(45, 45, 48, 0.95); pointer-events: auto; border-bottom: 2px solid #232323; display: flex; padding-left: 7px; padding-right: 7px; padding-top: 2px; padding-bottom: 2px;}f-element { height: 24px;}f-element input { margin-top: 2px; margin-bottom: 2px; box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%); margin-left: 2px; margin-right: 2px; width: 100%; padding-left: 4px; padding-right: 4px;}f-element input.number { cursor: col-resize;}f-element input:focus[type='text'], f-element input:focus[type='range'], f-element input:focus[type='color'] { background: rgba( 0, 0, 0, 0.6 ); outline: solid 1px rgba( 0, 80, 200, 0.98 );}f-element input[type='color'] { appearance: none; padding: 0; margin-left: 2px; margin-right: 2px; height: calc( 100% - 4px ); margin-top: 2px; border: none; }f-element input[type='color']::-webkit-color-swatch-wrapper { padding: 2px;}f-element input[type='color']::-webkit-color-swatch { border: none; cursor: alias;}f-element input[type='range'] { appearance: none; width: 100%; overflow: hidden; padding: 0; cursor: ew-resize;}f-element input[type='range']::-webkit-slider-runnable-track { appearance: none; height: 10px; color: #13bba4; margin: 0;}f-element input[type='range']::-webkit-slider-thumb { appearance: none; width: 0; background: #434343; box-shadow: -500px 0 0 500px rgba( 0, 120, 255, 0.98 ); border-radius: 50%; border: 0 !important;}f-element input[type='range']::-webkit-slider-runnable-track { margin-left: -4px; margin-right: -5px;}f-element input[type='checkbox'] { appearance: none; cursor: pointer;}f-element input[type='checkbox'].toggle { height: 20px; width: 45px; border-radius: 16px; display: inline-block; position: relative; margin: 0; margin-top: 2px; background: linear-gradient( 0deg, #292929 0%, #0a0a0ac2 100% ); transition: all 0.2s ease;}f-element input[type='checkbox'].toggle:after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2); transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}f-element input[type='checkbox'].toggle:checked { background: linear-gradient( 0deg, #0177fb 0%, #0177fb 100% );}f-element input[type='checkbox'].toggle:checked:after { transform: translatex(25px);}f-element.auto-height { display: table;}f-element textarea { width: calc( 100% - 18px ); padding-top: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 8px; margin-top: 2px; margin-left: 2px; height: calc( 100% - 8px ); max-height: 300px; border-radius: 2px; resize: none; box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%);}f-element.auto-height textarea { resize: auto;}f-element select { width: 100%; margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px; padding-left: 5px; cursor: pointer; box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%);}f-element f-toolbar { position: absolute; display: flex; top: 0; width: 100%; height: 100%; align-content: space-around;}f-element.output-right f-toolbar { right: 7px; float: right; justify-content: end;}f-element f-toolbar { margin-top: auto; margin-bottom: auto; margin-left: 3px; margin-right: 3px; font-size: 18px; line-height: 18px;}f-element f-toolbar button { opacity: .7; cursor: pointer; font-size: 14px; width: unset; height: unset; border-radius: unset; border: unset; outline: 0; background-color: unset; box-shadow: unset;}f-element f-toolbar button:hover,f-element f-toolbar button:active { opacity: 1; border: 0; background-color: unset;}f-element input.range-value { width: 60px; text-align: center;}f-menu.context button,f-element button { width: 100%; height: calc( 100% - 4px ); margin-left: 2px; margin-right: 2px; margin-top: 2px; border-radius: 3px; cursor: pointer;}f-element button { box-shadow: inset 1px 1px 1px 0 rgb(255 255 255 / 17%), inset -2px -2px 2px 0 rgb(0 0 0 / 26%);}f-element button:hover { color: #fff; background-color: #2a2a2a;}f-element button:active { border: 1px solid rgba( 0, 120, 255, 0.98 );}f-element f-inputs,f-element f-subinputs { display: flex; width: 100%;}f-element f-inputs { left: 100px; top: 50%; transform: translateY(-50%); position: absolute; width: calc( 100% - 106px ); height: calc( 100% - 4px ); z-index: 1;}f-element.inputs-disable f-inputs { filter: grayscale(100%); opacity: .5;}f-element.inputs-disable f-inputs input { pointer-events: none;}f-element f-label,f-element span { margin: auto; text-shadow: 1px 1px 0px #0007;}f-element f-label { padding-left: 4px; white-space: nowrap; position: absolute; top: 50%; transform: translateY(-50%); width: calc( 100% - 20px );}f-element.right f-label { text-align: right;}f-element f-label i { float: left; font-size: 18px; margin-right: 6px;}f-element f-label.center { width: 100%; text-align: center; display: block;}f-element.title { height: 29px; background-color: #3a3a3ab0; background-color: #3b3b43ed; cursor: all-scroll; border-top-left-radius: 6px; border-top-right-radius: 6px;}f-element.blue { background-color: #014fc5;}f-element.red { background-color: #bd0b0b;}f-element.green { background-color: #148d05;}f-element.yellow { background-color: #d6b100;}f-element.title.left { text-align: left; display: inline-grid; justify-content: start;}f-element.title span { text-align: center; font-size: 15px; padding-top: 2px;}f-element.title i { font-size: 18px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .5;}f-element.output-right.title i { left: 10px; right: unset;}f-element.title.left span { text-align: left;}f-element f-io { border: 2px solid #dadada; width: 7px; height: 7px; position: absolute; background: #242427; border-radius: 8px; float: left; left: -7px; top: calc( 50% - 5px ); cursor: alias; box-shadow: 0 0 3px 2px #0000005e; z-index: 1;}f-element f-io.connect,f-canvas.dragging-rio f-element:hover f-io.lio,f-canvas.dragging-lio f-element:hover f-io.rio { border: 2px solid #0177fb; zoom: 1.4;}f-node.io-connect f-io:not(.connect) { border: 2px solid #dadada !important; zoom: 1 !important;}f-element f-io.rio { float: right; right: -7px; left: unset;}f-element f-disconnect { position: absolute; left: -35px; top: 50%; font-size: 22px; transform: translateY( -50% ); filter: drop-shadow(0 0 5px #000); text-shadow: 0px 0px 5px black; cursor: pointer;}f-element.output-right f-disconnect { right: -35px; left: unset;}f-element f-disconnect:hover { color: #ff3300;}f-element textarea::-webkit-scrollbar { width: 6px;}f-element textarea::-webkit-scrollbar-track { background: #111; } f-element textarea::-webkit-scrollbar-thumb { background: #0177fb; }f-element textarea::-webkit-scrollbar-thumb:hover { background: #1187ff; }f-element.small { height: 18px;}f-element.large { height: 36px;}body.connecting f-node:not(.io-connect) f-element:hover,f-element.select { background-color: rgba(61, 70, 82, 0.98);}f-drop { width: 100%; height: 100%; position: sticky; left: 0; top: 0; background: #02358417; text-align: center; justify-content: center; align-items: center; display: flex; box-shadow: inset 0 0 20px 10px #464ace17; pointer-events: none; transition: all .07s; opacity: 0; visibility: hidden;}f-drop.visible { visibility: unset; opacity: unset; transition: all .23s;}f-drop span { opacity: .5; font-size: 40px; text-shadow: 0px 0px 5px #000; font-weight: bold;}f-tooltip { pointer-events: none;}f-tooltip { position: absolute; left: 0; top: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(4px); font-size: 14px; padding: 7px; border-radius: 10px; top: 50%; transform: translateY(-50%); visibility: hidden; pointer-events: none; opacity: 0; transition: all 0.3s ease; z-index: 150; white-space: nowrap;}f-menu.context { position: absolute; width: 170px; padding: 2px; margin: 0; background: #17171794; z-index: 110; font-size: 12px; border-radius: 6px; backdrop-filter: blur(6px); border: 1px solid #7e7e7e45; box-shadow: 3px 3px 6px rgba(0,0,0,.2); transition: opacity 0.2s ease, transform 0.1s ease;}f-menu.context.hidden { visibility: hidden; opacity: 0;}f-menu.context f-item { display: block; position: relative; margin: 0; padding: 0; white-space: nowrap;}f-menu.context f-item.submenu::after { content: ""; position: absolute; right: 6px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 5px solid transparent; border-left-color: #808080;}f-menu.context f-item:hover > f-menu,f-menu.context f-item.active > f-menu { visibility: unset; transform: unset; opacity: unset;}f-menu.context f-menu { top: 0px; left: calc( 100% - 4px );}f-menu.context f-item button { overflow: visible; display: block; width: calc( 100% - 6px ); text-align: left; cursor: pointer; white-space: nowrap; padding: 6px 8px; border-radius: 3px; background: #2d2d32; border: 0; color: #ddd; margin: 3px; text-shadow: 1px 1px 0px #0007;}f-menu.context f-item button i { float: left; font-size: 16px;}f-menu.context f-item button span { margin-left: 6px;}f-menu.context f-item:hover > button,f-menu.context f-item.active > button { color: #fff; background: #313136;}f-menu.context f-item button:active { outline: solid 1px rgba( 0, 80, 200, 0.98 );}f-menu.context f-item f-tooltip { margin-left: 120px;}f-menu.circle { position: absolute; left: 30px; top: 30px; z-index: 100;}f-menu.circle f-item { display: flex; justify-content: end; align-content: space-around; margin-bottom: 12px;}f-menu.circle f-item button { width: 50px; height: 50px; font-size: 26px; background: #17171794; border-radius: 50%; backdrop-filter: blur(6px); border: 1px solid #7e7e7e45; line-height: 100%; cursor: pointer; box-shadow: 3px 3px 6px rgba(0,0,0,.2);}f-menu.circle f-item f-tooltip { margin-left: 50px;}.f-rounded f-node f-element,.f-rounded f-node f-element.title.left { border-radius: 10px 5px 10px 5px;}.f-rounded f-node f-element input, .f-rounded f-node f-element select,.f-rounded f-node f-element button,.f-rounded f-node f-element textarea,.f-rounded f-node f-element input[type='checkbox'].toggle,.f-rounded f-node f-element input[type='checkbox'].toggle:after { border-radius: 20px 10px;}.f-rounded f-node f-element input { padding-left: 7px; padding-right: 7px;}.f-rounded f-menu.context,.f-rounded f-menu.context f-item button { border-radius: 20px 10px;}@media (hover: hover) and (pointer: fine) { f-node:not(.selected):hover { filter: drop-shadow(0 0 6px #66666630); } f-element f-toolbar { visibility: hidden; opacity: 0; transition: opacity 0.2s ease; } f-node:hover > f-element f-toolbar { visibility: visible; opacity: 1; } f-element f-io:hover { border: 2px solid #0177fb; zoom: 1.4; } f-menu.circle f-item button:hover { background-color: #2a2a2a; } f-menu.circle f-item button:hover > f-tooltip, f-menu.context f-item button:hover > f-tooltip { visibility: visible; transform: translate(10px, -50%); opacity: 1; } f-menu.circle f-item button:focus > f-tooltip, f-menu.context f-item button:focus > f-tooltip { visibility: hidden; opacity: 0; }}f-canvas { will-change: top, left;}f-node { will-change: transform !important;}` );
+__flow__addCSS( `@keyframes f-animation-open { 0% { transform: scale(.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; }}f-canvas,f-canvas canvas { position: absolute; top: 0; left: 0; margin: 0; padding: 0; width: 100%; height: 100%; -webkit-touch-callout: none; }f-canvas { overflow: auto; cursor: grab;}f-canvas canvas.front { z-index: 10;}body.dragging *:not(.drag) { pointer-events: none !important;}f-canvas.grabbing * { cursor: grabbing; user-select: none;}f-canvas canvas { position: fixed; overflow: hidden; pointer-events: none;}f-canvas::-webkit-scrollbar { width: 8px; height: 8px;}f-canvas::-webkit-scrollbar-thumb:hover{ background: #014fc5;}f-canvas::-webkit-scrollbar-track { background: #363636;}f-canvas::-webkit-scrollbar-thumb { background-color: #666666; border-radius: 10px; border: 0;}f-canvas f-content,f-canvas f-area { position: absolute; display: block;}f-node { position: absolute; margin: 0; padding: 0; user-select: none; width: 320px; z-index: 1; cursor: auto; filter: drop-shadow(0 0 10px #00000061); backdrop-filter: blur(4px);}f-node.selected { z-index: 2;}f-node.selected,f-canvas.dragging-rio f-node:hover,f-canvas.dragging-lio f-node:hover { filter: drop-shadow(0 0 10px #00000061) drop-shadow(0 0 8px #4444dd);}f-node.closed f-element:not(:first-child) { display: none;}f-node.center { top: 50%; left: 50%; transform: translate( -50%, -50% );}f-node.top-right { top: 0; right: 0;}f-node.top-center { top: 0; left: 50%; transform: translateX( -50% );}f-node.top-left { top: 0; left: 0;}f-node { transition: filter 0.2s ease;}f-node { animation: .2s f-animation-open 1 alternate ease-out;}f-tips,f-drop,f-menu,f-menu input,f-menu button,f-element,f-element input,f-element select,f-element button,f-element textarea { font-family: 'Open Sans', sans-serif; font-size: 13px; text-transform: capitalize; color: #eeeeee; outline: solid 0px #000; margin: 0; padding: 0; border: 0; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 0.2s ease, filter 0.2s ease;}f-element input:read-only { color: #666;}f-element input,f-element textarea { text-transform: initial;}f-element input { transition: background 0.1s ease;}f-element input,f-element select,f-element button,f-element textarea { background-color: #232324d1;}f-element { position: relative; width: calc( 100% - 14px ); background: rgba(45, 45, 48, 0.95); pointer-events: auto; border-bottom: 2px solid #232323; display: flex; padding-left: 7px; padding-right: 7px; padding-top: 2px; padding-bottom: 2px;}f-element:after,f-element:before { transition: opacity .17s; opacity: 0; content: '';}f-element[tooltip]:hover:after,f-element[tooltip]:focus-within:after { font-size: 14px !important; display: flex; justify-content: center; position: fixed; margin-left: -7px; width: calc( 100% ); background: #1d1d1de8; border: 1px solid #444444a1; border-radius: 6px; color: #dadada; content: attr( tooltip ); margin-top: -41px; font-size: 16px; padding-top: 3px; padding-bottom: 3px; z-index: 10; opacity: 1; backdrop-filter: blur(4px); white-space: nowrap; overflow: hidden; text-shadow: 1px 1px 0px #0007;}f-element[tooltip]:hover:before,f-element[tooltip]:focus-within:before { border: solid; border-color: #1d1d1de8 transparent; border-width: 12px 6px 0 6px; left: calc( 50% - 6px ); bottom: 30px; position: absolute; opacity: 1; z-index: 11;}f-element[error] { background-color: #ff0000;}f-element[error]:hover:after,f-element[error]:focus-within:after { border: none; background-color: #ff0000bb; filter: drop-shadow( 2px 2px 5px #000 ); color: #fff;}f-element[error]:hover:before,f-element[error]:focus-within:before { border-color: #ff0000bb transparent;}f-element { height: 24px;}f-element input { margin-top: 2px; margin-bottom: 2px; box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%); margin-left: 2px; margin-right: 2px; width: 100%; padding-left: 4px; padding-right: 4px;}f-element input.number { cursor: col-resize;}f-element input:focus[type='text'], f-element input:focus[type='range'], f-element input:focus[type='color'] { background: rgba( 0, 0, 0, 0.6 ); outline: solid 1px rgba( 0, 80, 200, 0.98 );}f-element input[type='color'] { appearance: none; padding: 0; margin-left: 2px; margin-right: 2px; height: calc( 100% - 4px ); margin-top: 2px; border: none;}f-element input[type='color']::-webkit-color-swatch-wrapper { padding: 2px;}f-element input[type='color']::-webkit-color-swatch { border: none; cursor: alias;}f-element input[type='range'] { appearance: none; width: 100%; overflow: hidden; padding: 0; cursor: ew-resize;}f-element input[type='range']::-webkit-slider-runnable-track { appearance: none; height: 10px; color: #13bba4; margin: 0;}f-element input[type='range']::-webkit-slider-thumb { appearance: none; width: 0; background: #434343; box-shadow: -500px 0 0 500px rgba( 0, 120, 255, 0.98 ); border-radius: 50%; border: 0 !important;}f-element input[type='range']::-webkit-slider-runnable-track { margin-left: -4px; margin-right: -5px;}f-element input[type='checkbox'] { appearance: none; cursor: pointer;}f-element input[type='checkbox'].toggle { height: 20px; width: 45px; border-radius: 16px; display: inline-block; position: relative; margin: 0; margin-top: 2px; background: linear-gradient( 0deg, #292929 0%, #0a0a0ac2 100% ); transition: all 0.2s ease;}f-element input[type='checkbox'].toggle:after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(44, 44, 44, 0.2); transition: all 0.2s cubic-bezier(0.5, 0.1, 0.75, 1.35);}f-element input[type='checkbox'].toggle:checked { background: linear-gradient( 0deg, #0177fb 0%, #0177fb 100% );}f-element input[type='checkbox'].toggle:checked:after { transform: translatex(25px);}f-element.auto-height { display: table;}f-element textarea { width: calc( 100% - 18px ); padding-top: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 8px; margin-top: 2px; margin-left: 2px; height: calc( 100% - 8px ); max-height: 300px; border-radius: 2px; resize: none; box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%);}f-element.auto-height textarea { resize: auto;}f-element select { width: 100%; margin-top: 2px; margin-bottom: 2px; margin-left: 2px; margin-right: 2px; cursor: pointer; box-shadow: inset 0px 1px 1px rgb(0 0 0 / 20%), 0px 1px 0px rgb(255 255 255 / 5%);}f-element f-toolbar { position: absolute; display: flex; top: 0; width: 100%; height: 100%; align-content: space-around;}f-element.input-right f-toolbar { right: 7px; float: right; justify-content: end;}f-element f-toolbar { margin-top: auto; margin-bottom: auto; margin-left: 3px; margin-right: 3px; font-size: 18px; line-height: 18px;}f-element f-toolbar button { opacity: .7; cursor: pointer; font-size: 14px; width: unset; height: unset; border-radius: unset; border: unset; outline: 0; background-color: unset; box-shadow: unset;}f-element f-toolbar button:hover,f-element f-toolbar button:active { opacity: 1; border: 0; background-color: unset;}f-element input.range-value { width: 60px; text-align: center;}f-menu.context button,f-element button { width: 100%; height: calc( 100% - 4px ); margin-left: 2px; margin-right: 2px; margin-top: 2px; border-radius: 3px; cursor: pointer;}f-element button { box-shadow: inset 1px 1px 1px 0 rgb(255 255 255 / 17%), inset -2px -2px 2px 0 rgb(0 0 0 / 26%);}f-element button:hover { color: #fff; background-color: #2a2a2a;}f-element button:active { border: 1px solid rgba( 0, 120, 255, 0.98 );}f-element f-inputs,f-element f-subinputs { display: flex; justify-content: flex-end; width: 100%;}f-element f-inputs { left: 100px; top: 50%; transform: translateY(-50%); position: absolute; width: calc( 100% - 106px ); height: calc( 100% - 4px ); z-index: 1;}f-element.inputs-disable f-inputs { filter: grayscale(100%); opacity: .5;}f-element.inputs-disable f-inputs input { pointer-events: none;}f-element f-label,f-element span { margin: auto; text-shadow: 1px 1px 0px #0007;}f-element f-label { padding-left: 4px; white-space: nowrap; position: absolute; top: 50%; transform: translateY(-50%); width: calc( 100% - 20px );}f-element.right f-label { text-align: right;}f-element.center f-label { text-align: center;}f-element f-label i { float: left; font-size: 18px; margin-right: 6px;}f-element f-label.center { width: 100%; text-align: center; display: block;}f-element.title { height: 29px; background-color: #3a3a3ab0; background-color: #3b3b43ed; cursor: all-scroll; border-top-left-radius: 6px; border-top-right-radius: 6px;}f-element.blue { background-color: #014fc5;}f-element.red { background-color: #bd0b0b;}f-element.green { background-color: #148d05;}f-element.yellow { background-color: #d6b100;}f-element.title.left { text-align: left; display: inline-grid; justify-content: start;}f-element.title span { text-align: center; font-size: 15px; padding-top: 2px;}f-element.title i { font-size: 18px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); opacity: .5;}f-element.title f-toolbar i { font-size: 20px; right: unset; left: 0px;}f-element.input-right.title i { left: 10px; right: unset;}f-element.title.left span { text-align: left;}f-element f-io { border: 2px solid #dadada; width: 7px; height: 7px; position: absolute; background: #242427; border-radius: 8px; float: left; left: -7px; top: calc( 50% - 5px ); cursor: alias; box-shadow: 0 0 3px 2px #0000005e; z-index: 1;}f-element f-io.connect,f-canvas.dragging-rio f-element:hover f-io.lio,f-canvas.dragging-lio f-element:hover f-io.rio { zoom: 1.4;}f-node.io-connect f-io:not(.connect) { border: 2px solid #dadada !important; zoom: 1 !important;}f-element f-io.rio { float: right; right: -7px; left: unset;}f-element f-disconnect { position: absolute; left: -35px; top: 50%; font-size: 22px; transform: translateY( -50% ); filter: drop-shadow(0 0 5px #000); text-shadow: 0px 0px 5px black; cursor: pointer; transition: all .2s;}f-element.input-right f-disconnect { right: -35px; left: unset;}f-element f-disconnect:hover { color: #ff3300;}f-element textarea::-webkit-scrollbar { width: 6px;}f-element textarea::-webkit-scrollbar-track { background: #111; } f-element textarea::-webkit-scrollbar-thumb { background: #0177fb; }f-element textarea::-webkit-scrollbar-thumb:hover { background: #1187ff; }f-element.small { height: 18px;}f-element.large { height: 36px;}body.connecting f-node:not(.io-connect) f-element:hover,f-element.select { background-color: rgba(61, 70, 82, 0.98);}f-element.invalid > f-io { zoom: 1 !important;}f-element.invalid::after { font-size: 14px !important; display: flex; justify-content: center; align-items:center; margin: auto; position: absolute; width: 100%; height: 100%; background: #bd0b0b77; vertical-align: middle; color: #fff; content: 'Not Compatible'; opacity: .95; backdrop-filter: grayscale(100%); white-space: nowrap; overflow: hidden; left: 0; top: 0; text-transform: initial;}f-element.invalid > f-inputs,f-element.invalid > f-label { opacity: .1;}f-drop { width: 100%; height: 100%; position: sticky; left: 0; top: 0; background: #02358417; text-align: center; justify-content: center; align-items: center; display: flex; box-shadow: inset 0 0 20px 10px #464ace17; pointer-events: none; transition: all .07s; opacity: 0; visibility: hidden;}f-drop.visible { visibility: unset; opacity: unset; transition: all .23s;}f-drop span { opacity: .5; font-size: 40px; text-shadow: 0px 0px 5px #000; font-weight: bold;}f-tooltip { pointer-events: none;}f-tooltip { position: absolute; left: 0; top: 0; background: rgba(0,0,0,.8); backdrop-filter: blur(4px); font-size: 14px; padding: 7px; left: 50%; border-radius: 10px; transform: translateX(-50%); visibility: hidden; pointer-events: none; opacity: 0; transition: all 0.3s ease; z-index: 150; white-space: nowrap;}f-menu.context,f-menu.search { position: absolute;}f-menu.context { width: 170px; z-index: 110;}f-menu.search { bottom: 85px; left: 50%; transform: translateX(-50%); z-index: 10; width: 300px;}f-menu.context f-list { display: block; margin: 0; background: #171717e6; font-size: 12px; border-radius: 6px; backdrop-filter: blur(6px); border: 1px solid #7e7e7e45; box-shadow: 3px 3px 6px rgba(0,0,0,.2); transition: opacity 0.2s ease, transform 0.1s ease;}f-menu.search f-list { margin: 0 6px 0 6px; display: flex; flex-direction: column-reverse; margin-bottom: 5px;}f-menu.context.hidden { visibility: hidden; opacity: 0;}f-menu.context f-item,f-menu.search f-item { display: block; position: relative; margin: 0; padding: 0; white-space: nowrap;}f-menu.search f-item { opacity: 0;}f-menu.context f-item.submenu::after { content: ""; position: absolute; right: 6px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); border: 5px solid transparent; border-left-color: #808080;}f-menu.context f-item:hover > f-menu,f-menu.context f-item.active > f-menu { visibility: unset; transform: unset; opacity: unset;}f-menu.context f-menu { top: 0px; left: calc( 100% - 4px );}f-menu.context f-item button,f-menu.search f-item button { overflow: visible; display: block; width: calc( 100% - 6px ); text-align: left; cursor: pointer; white-space: nowrap; padding: 6px 8px; border-radius: 3px; background: rgba(45, 45, 48, 0.95); border: 0; color: #ddd; margin: 3px; text-shadow: 1px 1px 0px #0007;}f-menu.context f-item button i,f-menu.search f-item button i { float: left; font-size: 16px;}f-menu.context f-item button span,f-menu.search f-item button span { margin-left: 6px;}f-menu.context f-item:hover > button,f-menu.search f-item:hover > button,f-menu.search f-item.active > button { color: #fff; background-color: rgba(61, 70, 82, 0.98);}f-menu.search f-item:hover,f-menu.search f-item.active { opacity: 1 !important;}f-menu.context f-item button:active { outline: solid 1px rgba( 0, 80, 200, 0.98 );}f-menu.context f-item f-tooltip { margin-left: 85px; top: -50px;}f-menu.search f-item { display: none;}f-menu.search f-item:nth-child(1) { opacity: 1; display: unset;}f-menu.search f-item:nth-child(2) { opacity: .8; display: unset;}f-menu.search f-item:nth-child(3) { opacity: .6; display: unset;}f-menu.search f-item:nth-child(4) { opacity: .4; display: unset;}f-menu.search f-item button { border-radius: 14px;}f-tips { right: 10px; top: 10px; position: absolute; z-index: 100; pointer-events: none; display: flex; flex-direction: column;}f-tips f-tip { width: 450px; font-size: 13px; border-radius: 6px; text-align: center; display: block; height: auto; color: #ffffffe0; margin: 4px; padding: 4px; background: #17171794; border: 1px solid #7e7e7e38; line-height: 100%; backdrop-filter: blur(6px); transition: all 0.2s ease; text-transform: initial; opacity: 0;}f-tips f-tip:nth-child(1) { opacity: 1;}f-tips f-tip:nth-child(2) { opacity: .75;}f-tips f-tip:nth-child(3) { opacity: .25;}f-tips f-tip:nth-child(4) { opacity: .1;}f-tips f-tip.error { background: #b900005e;}f-menu.search input { width: calc( 100% - 28px ); height: 41px; position: absolute; z-index: 10; border-radius: 20px; padding-left: 14px; padding-right: 14px; font-size: 15px; background-color: #17171794; border: 1px solid #7e7e7e45; backdrop-filter: blur(6px); box-shadow: 3px 3px 6px rgb(0 0 0 / 20%); text-transform: initial;}f-menu.circle { position: absolute; left: 40px; bottom: 40px; z-index: 100;}f-menu.circle f-item { align-content: space-around; margin-right: 20px;}f-menu.circle f-item button { width: 47px; height: 47px; font-size: 22px; background: #17171794; border-radius: 50%; backdrop-filter: blur(6px); border: 1px solid #7e7e7e45; line-height: 100%; cursor: pointer; box-shadow: 3px 3px 6px rgba(0,0,0,.2);}f-menu.circle f-item f-tooltip { margin-top: -60px;}.f-rounded f-node f-element,.f-rounded f-node f-element.title.left { border-radius: 10px 5px 10px 5px;}.f-rounded f-node f-element input, .f-rounded f-node f-element select,.f-rounded f-node f-element button,.f-rounded f-node f-element textarea,.f-rounded f-node f-element input[type='checkbox'].toggle,.f-rounded f-node f-element input[type='checkbox'].toggle:after { border-radius: 20px 10px;}.f-rounded f-node f-element input { padding-left: 7px; padding-right: 7px;}.f-rounded f-menu.context,.f-rounded f-menu.context f-item button { border-radius: 20px 10px;}@media (hover: hover) and (pointer: fine) { f-node:not(.selected):hover { filter: drop-shadow(0 0 6px #66666630); } f-element f-toolbar { visibility: hidden; opacity: 0; transition: opacity 0.2s ease; } f-node:hover > f-element f-toolbar { visibility: visible; opacity: 1; } f-element f-io:hover { zoom: 1.4; } f-menu.circle f-item button:hover { background-color: #2a2a2a; } f-menu.search input:hover, f-menu.search input:focus { background-color: #1a1a1a; filter: drop-shadow(0 0 6px #66666630); } f-menu.search input:focus { filter: drop-shadow(0 0 8px #4444dd); } f-menu.circle f-item button:hover > f-tooltip, f-menu.context f-item button:hover > f-tooltip { visibility: visible; opacity: 1; } f-menu.circle f-item button:hover > f-tooltip { margin-top: -50px; } f-menu.context f-item button:hover > f-tooltip { top: -30px; } f-menu.circle f-item button:focus > f-tooltip, f-menu.context f-item button:focus > f-tooltip { visibility: hidden; opacity: 0; }}@media (hover: none) and (pointer: coarse) { body.dragging f-canvas, body.connecting f-canvas { overflow: hidden !important; }}f-canvas { will-change: top, left;}f-node { will-change: transform !important;}` );
 
 const REVISION = '1';
 
@@ -114,6 +114,50 @@ class Serializer extends EventTarget {
 
 }
 
+class PointerMonitor {
+
+	started = false;
+
+	constructor() {
+
+		this.x = 0;
+		this.y = 0;
+
+		this._onMoveEvent = ( e ) => {
+
+			const event = e.touches ? e.touches[ 0 ] : e;
+
+			this.x = event.x;
+			this.y = event.y;
+
+		};
+
+	}
+
+	start() {
+
+		if ( this.started ) return;
+
+		this.started = true;
+
+		window.addEventListener( 'wheel', this._onMoveEvent, true );
+
+		window.addEventListener( 'mousedown', this._onMoveEvent, true );
+		window.addEventListener( 'touchstart', this._onMoveEvent, true );
+
+		window.addEventListener( 'mousemove', this._onMoveEvent, true );
+		window.addEventListener( 'touchmove', this._onMoveEvent, true );
+
+		window.addEventListener( 'dragover', this._onMoveEvent, true );
+
+		return this;
+
+	}
+
+}
+
+const pointer = new PointerMonitor().start();
+
 const draggableDOM = ( dom, callback = null, className = 'dragging' ) => {
 
 	let dragData = null;
@@ -259,10 +303,16 @@ const dispatchEventList = ( list, ...params ) => {
 
 	for ( const callback of list ) {
 
-		callback( ...params );
+		if ( callback( ...params ) === false ) {
+
+			return false;
+
+		}
 
 	}
 
+	return true;
+
 };
 
 const toPX = ( val ) => {
@@ -289,13 +339,14 @@ const toHex = ( val ) => {
 
 };
 
-var Utils = /*#__PURE__*/Object.freeze({
+var Utils = /*#__PURE__*/Object.freeze( {
 	__proto__: null,
+	pointer: pointer,
 	draggableDOM: draggableDOM,
 	dispatchEventList: dispatchEventList,
 	toPX: toPX,
 	toHex: toHex
-});
+} );
 
 class Link {
 
@@ -347,6 +398,8 @@ class Element extends Serializer {
 
 		super();
 
+		this.isElement = true;
+
 		const dom = document.createElement( 'f-element' );
 		dom.element = this;
 
@@ -370,7 +423,17 @@ class Element extends Serializer {
 
 			}
 
-			selected = element;
+			const type = e.type;
+
+			if ( ( type === 'mouseout' ) && selected === element ) {
+
+				selected = null;
+
+			} else {
+
+				selected = element;
+
+			}
 
 		};
 
@@ -385,6 +448,9 @@ class Element extends Serializer {
 		}
 
 		dom.addEventListener( 'mouseup', onSelect, true );
+		dom.addEventListener( 'mouseover', onSelect );
+		dom.addEventListener( 'mouseout', onSelect );
+		dom.addEventListener( 'touchmove', onSelect );
 		dom.addEventListener( 'touchend', onSelect );
 
 		this.inputs = [];
@@ -398,14 +464,15 @@ class Element extends Serializer {
 
 		this.events = {
 			'connect': [],
-			'connectChildren': []
+			'connectChildren': [],
+			'valid': []
 		};
 
 		this.node = null;
 
 		this.style = '';
 
-		this.extra = null;
+		this.objectCallback = null;
 
 		this.enabledInputs = true;
 
@@ -418,10 +485,10 @@ class Element extends Serializer {
 		this.lioDOM = this._createIO( 'lio' );
 		this.rioDOM = this._createIO( 'rio' );
 
-		this.dom.classList.add( `output-${ Link.InputDirection }` );
+		this.dom.classList.add( `input-${ Link.InputDirection }` );
 
-		this.dom.appendChild( this.lioDOM );
-		this.dom.appendChild( this.rioDOM );
+		this.dom.append( this.lioDOM );
+		this.dom.append( this.rioDOM );
 
 		this.addEventListener( 'connect', ( ) => {
 
@@ -437,6 +504,22 @@ class Element extends Serializer {
 
 	}
 
+	setAttribute( name, value ) {
+
+		this.dom.setAttribute( name, value );
+
+		return this;
+
+	}
+
+	onValid( callback ) {
+
+		this.events.valid.push( callback );
+
+		return this;
+
+	}
+
 	onConnect( callback, childrens = false ) {
 
 		this.events.connect.push( callback );
@@ -451,17 +534,17 @@ class Element extends Serializer {
 
 	}
 
-	setExtra( value ) {
+	setObjectCallback( callback ) {
 
-		this.extra = value;
+		this.objectCallback = callback;
 
 		return this;
 
 	}
 
-	getExtra() {
+	getObject( output = null ) {
 
-		return this.extra;
+		return this.objectCallback ? this.objectCallback( output ) : null;
 
 	}
 
@@ -485,9 +568,9 @@ class Element extends Serializer {
 
 		const dom = this.dom;
 
-		if ( !this.enabledInputs ) dom.classList.remove( 'inputs-disable');
+		if ( ! this.enabledInputs ) dom.classList.remove( 'inputs-disable' );
 
-		if ( !value ) dom.classList.add( 'inputs-disable' );
+		if ( ! value ) dom.classList.add( 'inputs-disable' );
 
 		this.enabledInputs = value;
 
@@ -501,6 +584,14 @@ class Element extends Serializer {
 
 	}
 
+	setColor( color ) {
+
+		this.dom.style[ 'background-color' ] = toHex( color );
+
+		return this;
+
+	}
+
 	setStyle( style ) {
 
 		const dom = this.dom;
@@ -529,6 +620,20 @@ class Element extends Serializer {
 
 	}
 
+	setInputColor( color ) {
+
+		if ( Link.InputDirection === 'left' ) {
+
+			return this.setLIOColor( color );
+
+		} else {
+
+			return this.setRIOColor( color );
+
+		}
+
+	}
+
 	setOutput( length ) {
 
 		if ( Link.InputDirection === 'left' ) {
@@ -543,6 +648,20 @@ class Element extends Serializer {
 
 	}
 
+	setOutputColor( color ) {
+
+		if ( Link.InputDirection === 'left' ) {
+
+			return this.setRIOColor( color );
+
+		} else {
+
+			return this.setLIOColor( color );
+
+		}
+
+	}
+
 	get inputLength() {
 
 		if ( Link.InputDirection === 'left' ) {
@@ -571,6 +690,14 @@ class Element extends Serializer {
 
 	}
 
+	setLIOColor( color ) {
+
+		this.lioDOM.style[ 'border-color' ] = toHex( color );
+
+		return this;
+
+	}
+
 	setLIO( length ) {
 
 		this.lioLength = length;
@@ -581,6 +708,26 @@ class Element extends Serializer {
 
 	}
 
+	getLIOColor() {
+
+		return this.lioDOM.style[ 'border-color' ];
+
+	}
+
+	setRIOColor( color ) {
+
+		this.rioDOM.style[ 'border-color' ] = toHex( color );
+
+		return this;
+
+	}
+
+	getRIOColor() {
+
+		return this.rioDOM.style[ 'border-color' ];
+
+	}
+
 	setRIO( length ) {
 
 		this.rioLength = length;
@@ -597,7 +744,7 @@ class Element extends Serializer {
 
 		input.element = this;
 
-		this.inputsDOM.appendChild( input.dom );
+		this.inputsDOM.append( input.dom );
 
 		return this;
 
@@ -629,6 +776,12 @@ class Element extends Serializer {
 
 		if ( element !== null ) {
 
+			if ( dispatchEventList( this.events.valid, this, element, 'connect' ) === false ) {
+
+				return false;
+
+			}
+
 			const link = new Link( this, element );
 
 			this.links.push( link );
@@ -638,7 +791,7 @@ class Element extends Serializer {
 				this.disconnectDOM = document.createElement( 'f-disconnect' );
 				this.disconnectDOM.innerHTML = Styles.icons.unlink ? `<i class='${ Styles.icons.unlink }'></i>` : '✖';
 
-				this.dom.appendChild( this.disconnectDOM );
+				this.dom.append( this.disconnectDOM );
 
 				const onDisconnect = () => {
 
@@ -659,7 +812,7 @@ class Element extends Serializer {
 
 				};
 
-				const onConnect = ( e ) => {
+				const onConnect = () => {
 
 					this.dispatchEvent( new Event( 'connectChildren' ) );
 
@@ -682,6 +835,7 @@ class Element extends Serializer {
 				this.disconnectDOM.addEventListener( 'mousedown', onClick, true );
 				this.disconnectDOM.addEventListener( 'touchstart', onClick, true );
 				this.disconnectDOM.addEventListener( 'disconnect', onDisconnect, true );
+
 				element.addEventListener( 'connect', onConnect );
 				element.addEventListener( 'connectChildren', onConnect );
 				element.addEventListener( 'nodeConnect', onConnect );
@@ -694,7 +848,7 @@ class Element extends Serializer {
 
 		this.dispatchEvent( new Event( 'connect' ) );
 
-		return this;
+		return true;
 
 	}
 
@@ -802,23 +956,23 @@ class Element extends Serializer {
 
 	}
 
-	get linkedExtra() {
+	getLinkedObject( output = null ) {
 
-		const linkedElement = this.linkedElement;
+		const linkedElement = this.getLinkedElement();
 
-		return linkedElement ? linkedElement.getExtra() : null;
+		return linkedElement ? linkedElement.getObject( output ) : null;
 
 	}
 
-	get linkedElement() {
+	getLinkedElement() {
 
-		const link = this.link;
+		const link = this.getLink();
 
 		return link ? link.outputElement : null;
 
 	}
 
-	get link() {
+	getLink() {
 
 		return this.links[ 0 ];
 
@@ -850,31 +1004,66 @@ class Element extends Serializer {
 			const defaultOutput = Link.InputDirection === 'left' ? 'lio' : 'rio';
 
 			const link = type === defaultOutput ? new Link( this ) : new Link( null, this );
+			const previewLink = new Link( link.inputElement, link.outputElement );
 
 			this.links.push( link );
 
 			draggableDOM( e, ( data ) => {
 
-				if ( data.dragging === false ) {
+				if ( previewLink.outputElement )
+					previewLink.outputElement.dom.classList.remove( 'invalid' );
 
-					nodeDOM.classList.remove( 'io-connect' );
+				if ( previewLink.inputElement )
+					previewLink.inputElement.dom.classList.remove( 'invalid' );
 
-					ioDOM.classList.remove( 'connect' );
-					dom.classList.remove( 'select' );
+				previewLink.inputElement = link.inputElement;
+				previewLink.outputElement = link.outputElement;
 
-					this.links.splice( this.links.indexOf( link ), 1 );
+				if ( type === defaultOutput ) {
+
+					previewLink.outputElement = selected;
 
-					if ( selected !== null ) {
+				} else {
 
-						if ( type === defaultOutput ) {
+					previewLink.inputElement = selected;
 
-							link.outputElement = selected;
+				}
 
-						} else {
+				const isInvalid = previewLink.inputElement !== null && previewLink.outputElement !== null &&
+					previewLink.inputElement.inputLength > 0 && previewLink.outputElement.outputLength > 0 &&
+					dispatchEventList( previewLink.inputElement.events.valid, previewLink.inputElement, previewLink.outputElement, data.dragging ? 'dragging' : 'dragged' ) === false;
 
-							link.inputElement = selected;
+				if ( data.dragging && isInvalid ) {
 
-						}
+					if ( type === defaultOutput ) {
+
+						if ( previewLink.outputElement )
+							previewLink.outputElement.dom.classList.add( 'invalid' );
+
+					} else {
+
+						if ( previewLink.inputElement )
+							previewLink.inputElement.dom.classList.add( 'invalid' );
+
+					}
+
+					return;
+
+				}
+
+				if ( ! data.dragging ) {
+
+					nodeDOM.classList.remove( 'io-connect' );
+
+					ioDOM.classList.remove( 'connect' );
+					dom.classList.remove( 'select' );
+
+					this.links.splice( this.links.indexOf( link ), 1 );
+
+					if ( selected !== null && ! isInvalid ) {
+
+						link.inputElement = previewLink.inputElement;
+						link.outputElement = previewLink.outputElement;
 
 						// check if is an is circular link
 
@@ -909,20 +1098,22 @@ class Element extends Serializer {
 
 }
 
-Element.prototype.isElement = true;
-
 class Input extends Serializer {
 
 	constructor( dom ) {
 
 		super();
 
+		this.isInput = true;
+
 		this.dom = dom;
 
 		this.element = null;
 
 		this.extra = null;
 
+		this.tagColor = null;
+
 		this.events = {
 			'change': [],
 			'click': []
@@ -956,12 +1147,28 @@ class Input extends Serializer {
 
 	}
 
+	setTagColor( color ) {
+
+		this.tagColor = color;
+
+		this.dom.style[ 'border-left' ] = `2px solid ${color}`;
+
+		return this;
+
+	}
+
+	getTagColor() {
+
+		return this.tagColor;
+
+	}
+
 	setToolTip( text ) {
 
 		const div = document.createElement( 'f-tooltip' );
 		div.innerText = text;
 
-		this.dom.appendChild( div );
+		this.dom.append( div );
 
 		return this;
 
@@ -983,6 +1190,20 @@ class Input extends Serializer {
 
 	}
 
+	setReadOnly( value ) {
+
+		this.dom.readOnly = value;
+
+		return this;
+
+	}
+
+	getReadOnly() {
+
+		return this.dom.readOnly;
+
+	}
+
 	setValue( value, dispatch = true ) {
 
 		this.dom.value = value;
@@ -1013,14 +1234,14 @@ class Input extends Serializer {
 
 }
 
-Input.prototype.isInput = true;
-
 class Node extends Serializer {
 
 	constructor() {
 
 		super();
 
+		this.isNode = true;
+
 		const dom = document.createElement( 'f-node' );
 
 		const onDown = () => {
@@ -1161,7 +1382,7 @@ class Node extends Serializer {
 		element.addEventListener( 'connect', this._onConnect );
 		element.addEventListener( 'connectChildren', this._onConnectChildren );
 
-		this.dom.appendChild( element.dom );
+		this.dom.append( element.dom );
 
 		return this;
 
@@ -1233,7 +1454,7 @@ class Node extends Serializer {
 
 	serialize( data ) {
 
-		const { x, y, style } = this.getPosition();
+		const { x, y } = this.getPosition();
 
 		const elements = [];
 
@@ -1248,9 +1469,9 @@ class Node extends Serializer {
 		data.width = this.getWidth();
 		data.elements = elements;
 
-		if ( style !== '' ) {
+		if ( this.style !== '' ) {
 
-			data.style = style;
+			data.style = this.style;
 
 		}
 
@@ -1293,8 +1514,6 @@ class Node extends Serializer {
 
 }
 
-Node.prototype.isNode = true;
-
 class DraggableElement extends Element {
 
 	constructor( draggable = true ) {
@@ -1347,9 +1566,9 @@ class TitleElement extends DraggableElement {
 		this.iconDOM = iconDOM;
 		this.toolbarDOM = toolbarDOM;
 
-		dom.appendChild( spanDOM );
-		dom.appendChild( iconDOM );
-		dom.appendChild( toolbarDOM );
+		dom.append( spanDOM );
+		dom.append( iconDOM );
+		dom.append( toolbarDOM );
 
 	}
 
@@ -1385,7 +1604,7 @@ class TitleElement extends DraggableElement {
 
 		this.buttons.push( button );
 
-		this.toolbarDOM.appendChild( button.dom );
+		this.toolbarDOM.append( button.dom );
 
 		return this;
 
@@ -1424,9 +1643,11 @@ class TitleElement extends DraggableElement {
 
 }
 
-const drawLine = ( p1x, p1y, p2x, p2y, invert, size, color, ctx ) => {
+const drawLine = ( p1x, p1y, p2x, p2y, invert, size, colorA, ctx, colorB = null ) => {
 
-	const offset = 100 * ( invert ? - 1 : 1 );
+	const dx = p2x - p1x;
+	const dy = p2y - p1y;
+	const offset = Math.sqrt( ( dx * dx ) + ( dy * dy ) ) * ( invert ? - .3 : .3 );
 
 	ctx.beginPath();
 
@@ -1438,8 +1659,21 @@ const drawLine = ( p1x, p1y, p2x, p2y, invert, size, color, ctx ) => {
 		p2x, p2y
 	);
 
+	if ( colorB !== null && colorA !== colorB ) {
+
+		const gradient = ctx.createLinearGradient( p1x, p1y, p2x, p2y );
+		gradient.addColorStop( 0, colorA );
+		gradient.addColorStop( 1, colorB );
+
+		ctx.strokeStyle = gradient;
+
+	} else {
+
+		ctx.strokeStyle = colorA;
+
+	}
+
 	ctx.lineWidth = size;
-	ctx.strokeStyle = color;
 	ctx.stroke();
 
 };
@@ -1514,11 +1748,11 @@ class Canvas extends Serializer {
 
 		dropDOM.innerHTML = '<span>drop your file</span>';
 
-		dom.appendChild( dropDOM );
-		dom.appendChild( canvas );
-		dom.appendChild( frontCanvas );
-		dom.appendChild( contentDOM );
-		dom.appendChild( areaDOM );
+		dom.append( dropDOM );
+		dom.append( canvas );
+		dom.append( frontCanvas );
+		dom.append( contentDOM );
+		dom.append( areaDOM );
 		/*
 		let zoomTouchData = null;
 
@@ -1790,11 +2024,13 @@ class Canvas extends Serializer {
 
 	add( node ) {
 
+		if ( node.canvas === this ) return;
+
 		this.nodes.push( node );
 
 		node.canvas = this;
 
-		this.contentDOM.appendChild( node.dom );
+		this.contentDOM.append( node.dom );
 
 		return this;
 
@@ -1818,6 +2054,8 @@ class Canvas extends Serializer {
 
 		this.contentDOM.removeChild( node.dom );
 
+		node.dispatchEvent( new Event( 'remove' ) );
+
 		return this;
 
 	}
@@ -1842,9 +2080,17 @@ class Canvas extends Serializer {
 
 		for ( const link of links ) {
 
-			if ( link.outputElement && link.outputElement.node === node ) {
+			if ( link.inputElement && link.outputElement ) {
+
+				if ( link.inputElement.node === node ) {
+
+					link.inputElement.connect();
+
+				} else if ( link.outputElement.node === node ) {
 
-				link.inputElement.connect();
+					link.inputElement.connect();
+
+				}
 
 			}
 
@@ -1989,24 +2235,36 @@ class Canvas extends Serializer {
 
 			if ( draggingLink || length === 1 ) {
 
+				let colorA = null,
+					colorB = null;
+
 				if ( draggingLink === 'rio' ) {
 
+					colorA = colorB = lioElement.getRIOColor();
+
 					aPos.x += offsetIORadius;
 					bPos.x /= zoom;
 					bPos.y /= zoom;
 
 				} else if ( draggingLink === 'lio' ) {
 
+					colorA = colorB = rioElement.getLIOColor();
+
 					bPos.x -= offsetIORadius;
 					aPos.x /= zoom;
 					aPos.y /= zoom;
 
+				} else {
+
+					colorA = lioElement.getRIOColor();
+					colorB = rioElement.getLIOColor();
+
 				}
 
 				drawLine(
 					aPos.x * zoom, aPos.y * zoom,
 					bPos.x * zoom, bPos.y * zoom,
-					false, 2, '#ffffff', drawContext
+					false, 2, colorA || '#ffffff', drawContext, colorB || '#ffffff'
 				);
 
 			} else {
@@ -2022,19 +2280,22 @@ class Canvas extends Serializer {
 					const rioLength = Math.min( lioElement.rioLength, length );
 					const lioLength = Math.min( rioElement.lioLength, length );
 
+					const colorA = lioElement.getRIOColor() || color;
+					const colorB = rioElement.getLIOColor() || color;
+
 					const aCenterY = ( ( rioLength * marginY ) * .5 ) - ( marginY / 2 );
 					const bCenterY = ( ( lioLength * marginY ) * .5 ) - ( marginY / 2 );
 
 					const aIndex = Math.min( i, rioLength - 1 );
 					const bIndex = Math.min( i, lioLength - 1 );
 
-					const aPosY = aIndex * marginY;
-					const bPosY = bIndex * marginY;
+					const aPosY = ( aIndex * marginY ) - 1;
+					const bPosY = ( bIndex * marginY ) - 1;
 
 					drawLine(
 						aPos.x * zoom, ( ( aPos.y + aPosY ) - aCenterY ) * zoom,
 						bPos.x * zoom, ( ( bPos.y + bPosY ) - bCenterY ) * zoom,
-						false, 2, color, drawContext
+						false, 2, colorA, drawContext, colorB
 					);
 
 				}
@@ -2093,10 +2354,10 @@ class ButtonInput extends Input {
 		const dom = document.createElement( 'button' );
 
 		const spanDOM = document.createElement( 'span' );
-		dom.appendChild( spanDOM );
+		dom.append( spanDOM );
 
 		const iconDOM = document.createElement( 'i' );
-		dom.appendChild( iconDOM );
+		dom.append( iconDOM );
 
 		super( dom );
 
@@ -2149,14 +2410,15 @@ class ButtonInput extends Input {
 
 class ObjectNode extends Node {
 
-	constructor( name, inputLength, extra = null, width = 300 ) {
+	constructor( name, inputLength, callback = null, width = 300 ) {
 
 		super();
 
 		this.setWidth( width );
 
 		const title = new TitleElement( name )
-			.setExtra( extra )
+			.setObjectCallback( callback )
+			.setSerializable( false )
 			.setOutput( inputLength );
 
 		const closeButton = new ButtonInput( Styles.icons.close || '✕' ).onClick( () => {
@@ -2174,17 +2436,43 @@ class ObjectNode extends Node {
 
 	}
 
-	setExtra( value ) {
+	setName( value ) {
+
+		this.title.setTitle( value );
+
+		return this;
 
-		this.title.setExtra( value );
+	}
+
+	getName() {
+
+		return this.title.getTitle();
+
+	}
+
+	setObjectCallback( callback ) {
+
+		this.title.setObjectCallback( callback );
 
 		return this;
 
 	}
 
-	getExtra( value ) {
+	getObject( callback ) {
+
+		return this.title.getObject( callback );
+
+	}
+
+	setColor( color ) {
+
+		return this.title.setColor( color );
+
+	}
+
+	setOutputColor( color ) {
 
-		return this.title.getExtra();
+		return this.title.setOutputColor( color );
 
 	}
 
@@ -2327,6 +2615,14 @@ class NumberInput extends Input {
 
 	}
 
+	setStep( step ) {
+
+		this.step = step;
+
+		return this;
+
+	}
+
 	setRange( min, max, step ) {
 
 		this.min = min;
@@ -2393,7 +2689,7 @@ class NumberInput extends Input {
 
 	_getString( value ) {
 
-		let num = Math.min( Math.max( Number( value ), this.min ), this.max );
+		const num = Math.min( Math.max( Number( value ), this.min ), this.max );
 
 		if ( this.integer === true ) {
 
@@ -2452,8 +2748,8 @@ class SliderInput extends Input {
 
 		} );
 
-		dom.appendChild( rangeDOM );
-		dom.appendChild( field.dom );
+		dom.append( rangeDOM );
+		dom.append( field.dom );
 
 		this.rangeDOM = rangeDOM;
 		this.field = field;
@@ -2577,7 +2873,7 @@ class ColorInput extends Input {
 
 	getValue() {
 
-		return parseInt( super.getValue().substr( 1 ), 16 );
+		return parseInt( super.getValue().slice( 1 ), 16 );
 
 	}
 
@@ -2625,11 +2921,13 @@ class LabelElement extends Element {
 		this.spanDOM = spanDOM;
 		this.iconDOM = iconDOM;
 
-		this.labelDOM.appendChild( this.spanDOM );
-		this.labelDOM.appendChild( this.iconDOM );
+		this.labelDOM.append( this.spanDOM );
+		this.labelDOM.append( this.iconDOM );
 
-		this.dom.appendChild( this.labelDOM );
-		this.dom.appendChild( this.inputsDOM );
+		this.dom.append( this.labelDOM );
+		this.dom.append( this.inputsDOM );
+
+		this.serializeLabel = false;
 
 		this.setLabel( label );
 		this.setAlign( align );
@@ -2672,14 +2970,18 @@ class LabelElement extends Element {
 
 		super.serialize( data );
 
-		const label = this.getLabel();
-		const icon = this.getIcon();
+		if ( this.serializeLabel ) {
 
-		data.label = label;
+			const label = this.getLabel();
+			const icon = this.getIcon();
 
-		if ( icon !== '' ) {
+			data.label = label;
 
-			data.icon = icon;
+			if ( icon !== '' ) {
+
+				data.icon = icon;
+
+			}
 
 		}
 
@@ -2689,11 +2991,15 @@ class LabelElement extends Element {
 
 		super.deserialize( data );
 
-		this.setLabel( data.label );
+		if ( this.serializeLabel ) {
 
-		if ( data.icon !== undefined ) {
+			this.setLabel( data.label );
 
-			this.setIcon( data.icon );
+			if ( data.icon !== undefined ) {
+
+				this.setIcon( data.icon );
+
+			}
 
 		}
 
@@ -2824,51 +3130,151 @@ class PanelNode extends Node {
 
 class Menu extends EventTarget {
 
-	constructor( className, target = null ) {
+	constructor( className ) {
 
 		super();
 
 		const dom = document.createElement( 'f-menu' );
 		dom.className = className + ' hidden';
 
+		const listDOM = document.createElement( 'f-list' );
+
+		dom.append( listDOM );
+
 		this.dom = dom;
+		this.listDOM = listDOM;
 
 		this.visible = false;
 
 		this.subMenus = new WeakMap();
 		this.domButtons = new WeakMap();
 
-		this.events = {
-			'context': []
-		};
+		this.buttons = [];
 
-		this.addEventListener( 'context', ( ) => {
+		this.events = {};
 
-			dispatchEventList( this.events.context, this );
+	}
 
-		} );
+	onContext( callback ) {
 
-		this._lastButtonClick = null;
+		this.events.context.push( callback );
 
-		this._onButtonClick = ( e = null ) => {
+		return this;
 
-			const button = e ? e.target : null;
+	}
 
-			if ( this._lastButtonClick ) {
+	show() {
 
-				this._lastButtonClick.dom.parentElement.classList.remove( 'active' );
+		this.dom.classList.remove( 'hidden' );
 
-			}
+		this.visible = true;
 
-			this._lastButtonClick = button;
+		this.dispatchEvent( new Event( 'show' ) );
 
-			if ( button ) {
+		return this;
 
-				if ( this.subMenus.has( button ) ) {
+	}
 
-					this.subMenus.get( button )._onButtonClick();
+	hide() {
 
-				}
+		this.dom.classList.add( 'hidden' );
+
+		this.dispatchEvent( new Event( 'hide' ) );
+
+		this.visible = false;
+
+	}
+
+	add( button, submenu = null ) {
+
+		const liDOM = document.createElement( 'f-item' );
+
+		if ( submenu !== null ) {
+
+			liDOM.classList.add( 'submenu' );
+
+			liDOM.append( submenu.dom );
+
+			this.subMenus.set( button, submenu );
+
+			button.dom.addEventListener( 'mouseover', () => submenu.show() );
+			button.dom.addEventListener( 'mouseout', () => submenu.hide() );
+
+		}
+
+		liDOM.append( button.dom );
+
+		this.buttons.push( button );
+
+		this.listDOM.append( liDOM );
+
+		this.domButtons.set( button, liDOM );
+
+		return this;
+
+	}
+
+	clear() {
+
+		this.buttons = [];
+
+		this.subMenus = new WeakMap();
+		this.domButtons = new WeakMap();
+
+		while ( this.listDOM.firstChild ) {
+
+			this.listDOM.firstChild.remove();
+
+		}
+
+	}
+
+}
+
+let lastContext = null;
+
+const onCloseLastContext = ( e ) => {
+
+	if ( lastContext && lastContext.visible === true && e.target.closest( 'f-menu.context' ) === null ) {
+
+		lastContext.hide();
+
+	}
+
+};
+
+document.body.addEventListener( 'mousedown', onCloseLastContext, true );
+document.body.addEventListener( 'touchstart', onCloseLastContext, true );
+
+class ContextMenu extends Menu {
+
+	constructor( target = null ) {
+
+		super( 'context', target );
+
+		this.events.context = [];
+
+		this._lastButtonClick = null;
+
+		this._onButtonClick = ( e = null ) => {
+
+			const button = e ? e.target : null;
+
+			if ( this._lastButtonClick ) {
+
+				this._lastButtonClick.dom.parentElement.classList.remove( 'active' );
+
+			}
+
+			this._lastButtonClick = button;
+
+			if ( button ) {
+
+				if ( this.subMenus.has( button ) ) {
+
+					this.subMenus.get( button )._onButtonClick();
+
+				}
 
 				button.dom.parentElement.classList.add( 'active' );
 
@@ -2888,45 +3294,50 @@ class Menu extends EventTarget {
 
 		};
 
+		this.addEventListener( 'context', ( ) => {
+
+			dispatchEventList( this.events.context, this );
+
+		} );
+
 		this.setTarget( target );
 
 	}
 
-	onContext( callback ) {
+	openFrom( dom ) {
 
-		this.events.context.push( callback );
+		const rect = dom.getBoundingClientRect();
 
-		return this;
+		return this.open( rect.x + ( rect.width / 2 ), rect.y + ( rect.height / 2 ) );
 
 	}
 
-	show( x = null, y = null ) {
+	open( x = pointer.x, y = pointer.y ) {
 
-		this._onButtonClick();
-
-		if ( x !== null && y !== null ) {
+		if ( lastContext !== null ) {
 
-			this.setPosition( x, y );
+			lastContext.hide();
 
 		}
 
-		this.dom.classList.remove( 'hidden' );
+		lastContext = this;
 
-		this.visible = true;
+		this.setPosition( x, y );
 
-		this.dispatchEvent( new Event( 'show' ) );
+		document.body.append( this.dom );
 
-		return this;
+		return this.show();
 
 	}
 
-	hide() {
+	setPosition( x, y ) {
 
-		this.dom.classList.add( 'hidden' );
+		const dom = this.dom;
 
-		this.dispatchEvent( new Event( 'hide' ) );
+		dom.style.left = toPX( x );
+		dom.style.top = toPX( y );
 
-		this.visible = false;
+		return this;
 
 	}
 
@@ -2940,72 +3351,143 @@ class Menu extends EventTarget {
 
 				if ( e.pointerType !== 'mouse' || ( e.pageX === 0 && e.pageY === 0 ) ) return;
 
-				const rect = this.target.getBoundingClientRect();
-
 				this.dispatchEvent( new Event( 'context' ) );
 
-				this.show( e.pageX - rect.left, e.pageY - rect.top );
+				this.open();
 
 			};
 
-			const onDown = ( e ) => {
-
-				if ( this.visible === true && e.target.closest( 'f-menu' ) === null ) {
+			this.target = target;
 
-					this.hide();
+			target.addEventListener( 'contextmenu', onContextMenu, false );
 
-				}
+		}
 
-			};
+		return this;
 
-			this.target = target;
+	}
 
-			target.addEventListener( 'mousedown', onDown, true );
-			target.addEventListener( 'touchstart', onDown, true );
+	show() {
 
-			target.addEventListener( 'contextmenu', onContextMenu, false );
+		if ( ! this.opened ) {
 
-			target.appendChild( this.dom );
+			this.dom.style.left = '';
+			this.dom.style.transform = '';
 
 		}
 
-		return this;
+		const domRect = this.dom.getBoundingClientRect();
 
-	}
+		let offsetX = Math.min( window.innerWidth - ( domRect.x + domRect.width + 10 ), 0 );
+		let offsetY = Math.min( window.innerHeight - ( domRect.y + domRect.height + 10 ), 0 );
 
-	add( button, submenu = null ) {
+		if ( this.opened ) {
 
-		const liDOM = document.createElement( 'f-item' );
+			if ( offsetX < 0 ) offsetX = - domRect.width;
+			if ( offsetY < 0 ) offsetY = - domRect.height;
 
-		if ( submenu !== null ) {
+			this.setPosition( domRect.x + offsetX, domRect.y + offsetY );
 
-			liDOM.classList.add( 'submenu' );
+		} else {
 
-			liDOM.appendChild( submenu.dom );
+			// flip submenus
 
-			this.subMenus.set( button, submenu );
+			if ( offsetX < 0 ) this.dom.style.left = '-100%';
+			if ( offsetY < 0 ) this.dom.style.transform = 'translateY( calc( 32px - 100% ) )';
+
+		}
+
+		return super.show();
+
+	}
+
+	hide() {
+
+		if ( this.opened ) {
+
+			lastContext = null;
 
 		}
 
-		liDOM.appendChild( button.dom );
+		return super.hide();
+
+	}
+
+	add( button, submenu = null ) {
 
 		button.addEventListener( 'click', this._onButtonClick );
 		button.addEventListener( 'mouseover', this._onButtonMouseOver );
 
-		this.dom.appendChild( liDOM );
+		return super.add( button, submenu );
 
-		this.domButtons.set( liDOM, button );
+	}
 
-		return this;
+	get opened() {
+
+		return lastContext === this;
 
 	}
 
-	setPosition( x, y ) {
+}
 
-		const dom = this.dom;
+class CircleMenu extends Menu {
 
-		dom.style.left = toPX( x );
-		dom.style.top = toPX( y );
+	constructor( target = null ) {
+
+		super( 'circle', target );
+
+	}
+
+}
+
+class Tips extends EventTarget {
+
+	constructor() {
+
+		super();
+
+		const dom = document.createElement( 'f-tips' );
+
+		this.dom = dom;
+
+		this.time = 0;
+		this.duration = 3000;
+
+	}
+
+	message( str ) {
+
+		return this.tip( str );
+
+	}
+
+	error( str ) {
+
+		return this.tip( str, 'error' );
+
+	}
+
+	tip( html, className = '' ) {
+
+		const dom = document.createElement( 'f-tip' );
+		dom.className = className;
+		dom.innerHTML = html;
+
+		this.dom.prepend( dom );
+
+		//requestAnimationFrame( () => dom.style.opacity = 1 );
+
+		this.time = Math.min( this.time + this.duration, this.duration );
+
+		setTimeout( () => {
+
+			this.time -= this.duration;
+
+			dom.style.opacity = 0;
+
+			setTimeout( () => dom.remove(), 250 );
+
+		}, this.time );
 
 		return this;
 
@@ -3013,57 +3495,312 @@ class Menu extends EventTarget {
 
 }
 
-let lastContext = null;
+const filterString = ( str ) => {
 
-class ContextMenu extends Menu {
+	return str.trim().toLowerCase().replace( /\s\s+/g, ' ' );
 
-	constructor( target = null ) {
+};
 
-		super( 'context', target );
+class Search extends Menu {
+
+	constructor() {
+
+		super( 'search' );
+
+		this.events.submit = [];
+		this.events.filter = [];
+
+		const inputDOM = document.createElement( 'input' );
+		inputDOM.placeholder = 'Type here';
+
+		let filter = true;
+		let filterNeedUpdate = true;
+
+		inputDOM.addEventListener( 'focusout', () => {
+
+			filterNeedUpdate = true;
+
+			this.setValue( '' );
+
+		} );
+
+		inputDOM.onkeydown = ( e ) => {
+
+			const keyCode = e.keyCode;
+
+			if ( keyCode === 38 ) {
+
+				const index = this.filteredIndex;
+
+				if ( this.forceAutoComplete ) {
+
+					this.filteredIndex = index !== null ? ( index + 1 ) % ( this.filtered.length || 1 ) : 0;
+
+				} else {
+
+					this.filteredIndex = index !== null ? Math.min( index + 1, this.filtered.length - 1 ) : 0;
+
+				}
+
+				e.preventDefault();
+
+				filter = false;
+
+			} else if ( keyCode === 40 ) {
+
+				const index = this.filteredIndex;
+
+				if ( this.forceAutoComplete ) {
+
+					this.filteredIndex = index - 1;
+
+					if ( this.filteredIndex === null ) this.filteredIndex = this.filtered.length - 1;
+
+				} else {
+
+					this.filteredIndex = index !== null ? index - 1 : null;
+
+				}
+
+				e.preventDefault();
+
+				filter = false;
+
+			} else if ( keyCode === 13 ) {
+
+				this.value = this.currentFiltered ? this.currentFiltered.button.getValue() : inputDOM.value;
+
+				this.submit();
+
+				e.preventDefault();
+
+				filter = false;
+
+			} else {
+
+				filter = true;
+
+			}
+
+		};
+
+		inputDOM.onkeyup = () => {
+
+			if ( filter ) {
+
+				if ( filterNeedUpdate ) {
+
+					this.dispatchEvent( new Event( 'filter' ) );
+
+					filterNeedUpdate = false;
+
+				}
+
+				this.filter( inputDOM.value );
+
+			}
+
+		};
+
+		this.filtered = [];
+		this.currentFiltered = null;
+
+		this.value = '';
+
+		this.forceAutoComplete = false;
+
+		this.dom.append( inputDOM );
+
+		this.inputDOM = inputDOM;
+
+		this.addEventListener( 'filter', ( ) => {
+
+			dispatchEventList( this.events.filter, this );
+
+		} );
+
+		this.addEventListener( 'submit', ( ) => {
+
+			dispatchEventList( this.events.submit, this );
+
+		} );
 
 	}
 
-	show( x, y ) {
+	submit() {
 
-		if ( lastContext !== null ) {
+		this.dispatchEvent( new Event( 'submit' ) );
 
-			lastContext.hide();
+		return this.setValue( '' );
+
+	}
+
+	setValue( value ) {
+
+		this.inputDOM.value = value;
+
+		this.filter( value );
+
+		return this;
+
+	}
+
+	getValue() {
+
+		return this.value;
+
+	}
+
+	onFilter( callback ) {
+
+		this.events.filter.push( callback );
+
+		return this;
+
+	}
+
+	onSubmit( callback ) {
+
+		this.events.submit.push( callback );
+
+		return this;
+
+	}
+
+	getFilterByButton( button ) {
+
+		for ( const filter of this.filtered ) {
+
+			if ( filter.button === button ) {
+
+				return filter;
+
+			}
 
 		}
 
-		lastContext = this;
+		return null;
+
+	}
+
+	add( button ) {
+
+		super.add( button );
+
+		const onDown = () => {
 
-		return super.show( x, y );
+			const filter = this.getFilterByButton( button );
+
+			this.filteredIndex = this.filtered.indexOf( filter );
+			this.value = button.getValue();
+
+			this.submit();
+
+		};
+
+		button.dom.addEventListener( 'mousedown', onDown );
+		button.dom.addEventListener( 'touchstart', onDown );
+
+		this.domButtons.get( button ).remove();
+
+		return this;
 
 	}
 
-	hide() {
+	set filteredIndex( index ) {
 
-		if ( lastContext === this ) {
+		if ( this.currentFiltered ) {
 
-			lastContext = null;
+			const buttonDOM = this.domButtons.get( this.currentFiltered.button );
+
+			buttonDOM.classList.remove( 'active' );
+
+			this.currentFiltered = null;
 
 		}
 
-		return super.hide();
+		const filteredItem = this.filtered[ index ];
+
+		if ( filteredItem ) {
+
+			const buttonDOM = this.domButtons.get( filteredItem.button );
+
+			buttonDOM.classList.add( 'active' );
+
+			this.currentFiltered = filteredItem;
+
+		}
+
+		this.updateFilter();
 
 	}
 
-}
+	get filteredIndex() {
 
-class CircleMenu extends Menu {
+		return this.currentFiltered ? this.filtered.indexOf( this.currentFiltered ) : null;
 
-	constructor( target = null ) {
+	}
 
-		super( 'circle', target );
+	filter( text ) {
+
+		text = filterString( text );
+
+		const filtered = [];
+
+		for ( const button of this.buttons ) {
+
+			const buttonDOM = this.domButtons.get( button );
+
+			buttonDOM.remove();
+
+			const label = filterString( button.getValue() );
+
+			if ( text && label.includes( text ) === true ) {
+
+				const score = text.length / label.length;
+
+				filtered.push( {
+					button,
+					score
+				} );
+
+			}
+
+		}
+
+		filtered.sort( ( a, b ) => b.score - a.score );
+
+		this.filtered = filtered;
+		this.filteredIndex = this.forceAutoComplete ? 0 : null;
 
 	}
-	
+
+	updateFilter() {
+
+		const filteredIndex = Math.min( this.filteredIndex, this.filteredIndex - 3 );
+
+		for ( let i = 0; i < this.filtered.length; i ++ ) {
+
+			const button = this.filtered[ i ].button;
+			const buttonDOM = this.domButtons.get( button );
+
+			buttonDOM.remove();
+
+			if ( i >= filteredIndex ) {
+
+				this.listDOM.append( buttonDOM );
+
+			}
+
+		}
+
+	}
+
 }
 
 class SelectInput extends Input {
 
-	constructor( options = [] ) {
+	constructor( options = [], value = null ) {
 
 		const dom = document.createElement( 'select' );
 		super( dom );
@@ -3074,16 +3811,24 @@ class SelectInput extends Input {
 
 		};
 
-		this.setOptions( options );
+		dom.onmousedown = dom.ontouchstart = () => {
+
+			this.dispatchEvent( new Event( 'click' ) );
+
+		};
+
+		this.setOptions( options, value );
 
 	}
 
-	setOptions( options ) {
+	setOptions( options, value = null ) {
 
 		const dom = this.dom;
+		const defaultValue = dom.value;
 
-		this.options = options;
+		let containsDefaultValue = false;
 
+		this.options = options;
 		dom.innerHTML = '';
 
 		for ( let index = 0; index < options.length; index ++ ) {
@@ -3100,10 +3845,18 @@ class SelectInput extends Input {
 			option.innerText = opt.name;
 			option.value = opt.value;
 
-			dom.appendChild( option );
+			if ( containsDefaultValue === false && defaultValue === opt.value ) {
+
+				containsDefaultValue = true;
+
+			}
+
+			dom.append( option );
 
 		}
 
+		dom.value = value !== null ? value : containsDefaultValue ? defaultValue : '';
+
 		return this;
 
 	}
@@ -3126,7 +3879,7 @@ class SelectInput extends Input {
 
 		const currentOptions = this.options;
 
-		if ( currentOptions.length > 0 ) {
+		if ( currentOptions.length === 0 ) {
 
 			this.setOptions( data.options );
 
@@ -3149,6 +3902,9 @@ class ToggleInput extends Input {
 		dom.className = 'toggle';
 		dom.checked = value;
 
+		dom.onclick = () => this.dispatchEvent( new Event( 'click' ) );
+		dom.onchange = () => this.dispatchEvent( new Event( 'change' ) );
+
 	}
 
 	setValue( val ) {
@@ -3169,7 +3925,7 @@ class ToggleInput extends Input {
 
 }
 
-var Flow = /*#__PURE__*/Object.freeze({
+var Flow = /*#__PURE__*/Object.freeze( {
 	__proto__: null,
 	Element: Element,
 	Input: Input,
@@ -3182,6 +3938,8 @@ var Flow = /*#__PURE__*/Object.freeze({
 	Menu: Menu,
 	ContextMenu: ContextMenu,
 	CircleMenu: CircleMenu,
+	Tips: Tips,
+	Search: Search,
 	DraggableElement: DraggableElement,
 	LabelElement: LabelElement,
 	TitleElement: TitleElement,
@@ -3193,7 +3951,7 @@ var Flow = /*#__PURE__*/Object.freeze({
 	StringInput: StringInput,
 	TextInput: TextInput,
 	ToggleInput: ToggleInput
-});
+} );
 
 class Loader extends EventTarget {
 
@@ -3291,6 +4049,12 @@ class Loader extends EventTarget {
 
 			const Class = lib && lib[ obj.type ] ? lib[ obj.type ] : Flow[ obj.type ];
 
+			if ( ! Class ) {
+
+				console.error( `Class "${ obj.type }" not found!` );
+
+			}
+
 			objects[ id ] = new Class();
 
 		}
@@ -3335,4 +4099,4 @@ class Loader extends EventTarget {
 Loader.DEFAULT = 'default';
 Loader.OBJECTS = 'objects';
 
-export { ButtonInput, Canvas, CircleMenu, ColorInput, ContextMenu, DraggableElement, Element, Input, LabelElement, Loader, Menu, Node, NumberInput, ObjectNode, PanelNode, REVISION, SelectInput, Serializer, SliderInput, StringInput, Styles, TextInput, TitleElement, ToggleInput, Utils };
+export { ButtonInput, Canvas, CircleMenu, ColorInput, ContextMenu, DraggableElement, Element, Input, LabelElement, Loader, Menu, Node, NumberInput, ObjectNode, PanelNode, REVISION, Search, SelectInput, Serializer, SliderInput, StringInput, Styles, TextInput, Tips, TitleElement, ToggleInput, Utils };