super-three 0.135.0 → 0.136.0

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

@@ -16,10 +16,17 @@ function __flow__addCSS( css ) {
 
 }
 
-__flow__addCSS( `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;}@keyframes f-open { 0% { transform: scale(.5); filter: blur(30px); } 100% { transform: scale(1); filter: unset }}f-node { animation: .2s f-open 1 alternate ease-out;}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 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-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-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 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;}` );
 
 const REVISION = '1';
 
+const Styles = {
+	icons: {
+		close: '',
+		unlink: ''
+	}
+};
+
 let _id = 0;
 
 class Serializer extends EventTarget {
@@ -400,6 +407,8 @@ class Element extends Serializer {
 
 		this.extra = null;
 
+		this.enabledInputs = true;
+
 		this.visible = true;
 
 		this.inputsDOM = dom;
@@ -472,6 +481,26 @@ class Element extends Serializer {
 
 	}
 
+	setEnabledInputs( value ) {
+
+		const dom = this.dom;
+
+		if ( !this.enabledInputs ) dom.classList.remove( 'inputs-disable');
+
+		if ( !value ) dom.classList.add( 'inputs-disable' );
+
+		this.enabledInputs = value;
+
+		return this;
+
+	}
+
+	getEnabledInputs() {
+
+		return this.enabledInputs;
+
+	}
+
 	setStyle( style ) {
 
 		const dom = this.dom;
@@ -607,7 +636,8 @@ class Element extends Serializer {
 			if ( this.disconnectDOM === null ) {
 
 				this.disconnectDOM = document.createElement( 'f-disconnect' );
-				this.disconnectDOM.innerText = '✖';
+				this.disconnectDOM.innerHTML = Styles.icons.unlink ? `<i class='${ Styles.icons.unlink }'></i>` : '✖';
+
 				this.dom.appendChild( this.disconnectDOM );
 
 				const onDisconnect = () => {
@@ -618,6 +648,7 @@ class Element extends Serializer {
 					this.disconnectDOM.removeEventListener( 'mousedown', onClick, true );
 					this.disconnectDOM.removeEventListener( 'touchstart', onClick, true );
 					this.disconnectDOM.removeEventListener( 'disconnect', onDisconnect, true );
+
 					element.removeEventListener( 'connect', onConnect );
 					element.removeEventListener( 'connectChildren', onConnect );
 					element.removeEventListener( 'nodeConnect', onConnect );
@@ -1052,7 +1083,7 @@ class Node extends Serializer {
 			'blur': []
 		};
 
-		this.setPosition( 0, 0 );
+		this.setWidth( 300 ).setPosition( 0, 0 );
 
 	}
 
@@ -1118,7 +1149,7 @@ class Node extends Serializer {
 
 	getWidth() {
 
-		return this.dom.style.width;
+		return parseInt( this.dom.style.width );
 
 	}
 
@@ -1264,6 +1295,135 @@ class Node extends Serializer {
 
 Node.prototype.isNode = true;
 
+class DraggableElement extends Element {
+
+	constructor( draggable = true ) {
+
+		super( true );
+
+		this.draggable = draggable;
+
+		const onDrag = ( e ) => {
+
+			e.preventDefault();
+
+			if ( this.draggable === true ) {
+
+				draggableDOM( this.node.dom );
+
+			}
+
+		};
+
+		const { dom } = this;
+
+		dom.addEventListener( 'mousedown', onDrag, true );
+		dom.addEventListener( 'touchstart', onDrag, true );
+
+	}
+
+}
+
+class TitleElement extends DraggableElement {
+
+	constructor( title, draggable = true ) {
+
+		super( draggable );
+
+		const { dom } = this;
+
+		dom.className = 'title';
+
+		const spanDOM = document.createElement( 'span' );
+		spanDOM.innerText = title;
+
+		const iconDOM = document.createElement( 'i' );
+
+		const toolbarDOM = document.createElement( 'f-toolbar' );
+
+		this.buttons = [];
+
+		this.spanDOM = spanDOM;
+		this.iconDOM = iconDOM;
+		this.toolbarDOM = toolbarDOM;
+
+		dom.appendChild( spanDOM );
+		dom.appendChild( iconDOM );
+		dom.appendChild( toolbarDOM );
+
+	}
+
+	setIcon( value ) {
+
+		this.iconDOM.className = value;
+
+		return this;
+
+	}
+
+	getIcon() {
+
+		return this.iconDOM.className;
+
+	}
+
+	setTitle( value ) {
+
+		this.spanDOM.innerText = value;
+
+		return this;
+
+	}
+
+	getTitle() {
+
+		return this.spanDOM.innerText;
+
+	}
+
+	addButton( button ) {
+
+		this.buttons.push( button );
+
+		this.toolbarDOM.appendChild( button.dom );
+
+		return this;
+
+	}
+
+	serialize( data ) {
+
+		super.serialize( data );
+
+		const title = this.getTitle();
+		const icon = this.getIcon();
+
+		data.title = title;
+
+		if ( icon !== '' ) {
+
+			data.icon = icon;
+
+		}
+
+	}
+
+	deserialize( data ) {
+
+		super.deserialize( data );
+
+		this.setTitle( data.title );
+
+		if ( data.icon !== undefined ) {
+
+			this.setIcon( data.icon );
+
+		}
+
+	}
+
+}
+
 const drawLine = ( p1x, p1y, p2x, p2y, invert, size, color, ctx ) => {
 
 	const offset = 100 * ( invert ? - 1 : 1 );
@@ -1290,6 +1450,8 @@ const colors = [
 	'#4444ff'
 ];
 
+const dropNode = new Node().add( new TitleElement( 'File' ) ).setWidth( 250 );
+
 class Canvas extends Serializer {
 
 	constructor() {
@@ -1299,6 +1461,8 @@ class Canvas extends Serializer {
 		const dom = document.createElement( 'f-canvas' );
 		const contentDOM = document.createElement( 'f-content' );
 		const areaDOM = document.createElement( 'f-area' );
+		const dropDOM = document.createElement( 'f-drop' );
+
 		const canvas = document.createElement( 'canvas' );
 		const frontCanvas = document.createElement( 'canvas' );
 
@@ -1309,6 +1473,7 @@ class Canvas extends Serializer {
 
 		this.contentDOM = contentDOM;
 		this.areaDOM = areaDOM;
+		this.dropDOM = dropDOM;
 
 		this.canvas = canvas;
 		this.frontCanvas = frontCanvas;
@@ -1333,6 +1498,12 @@ class Canvas extends Serializer {
 
 		this.updating = false;
 
+		this.droppedItems = [];
+
+		this.events = {
+			'drop': []
+		};
+
 		frontCanvas.className = 'front';
 
 		contentDOM.style.left = toPX( this.centerX );
@@ -1341,6 +1512,9 @@ class Canvas extends Serializer {
 		areaDOM.style.width = `calc( 100% + ${ this.width }px )`;
 		areaDOM.style.height = `calc( 100% + ${ this.height }px )`;
 
+		dropDOM.innerHTML = '<span>drop your file</span>';
+
+		dom.appendChild( dropDOM );
 		dom.appendChild( canvas );
 		dom.appendChild( frontCanvas );
 		dom.appendChild( contentDOM );
@@ -1417,6 +1591,68 @@ class Canvas extends Serializer {
 		dom.addEventListener( 'touchmove', onZoom );
 		//dom.addEventListener( 'touchstart', onZoomStart );
 
+		let dropEnterCount = 0;
+
+		const dragState = ( enter ) => {
+
+			if ( enter ) {
+
+				if ( dropEnterCount ++ === 0 ) {
+
+					this.droppedItems = [];
+
+					dropDOM.classList.add( 'visible' );
+
+					this.add( dropNode );
+
+				}
+
+			} else if ( -- dropEnterCount === 0 ) {
+
+				dropDOM.classList.remove( 'visible' );
+
+				this.remove( dropNode );
+
+			}
+
+		};
+
+		dom.addEventListener( 'dragenter', () => {
+
+ 			dragState( true );
+
+		} );
+
+		dom.addEventListener( 'dragleave', () => {
+
+			dragState( false );
+
+		} );
+
+		dom.addEventListener( 'dragover', ( e ) => {
+
+			e.preventDefault();
+
+			const { relativeClientX, relativeClientY } = this;
+
+			const centerNodeX = dropNode.getWidth() / 2;
+
+			dropNode.setPosition( relativeClientX - centerNodeX, relativeClientY - 20 );
+
+		} );
+
+		dom.addEventListener( 'drop', ( e ) => {
+
+			e.preventDefault();
+
+			dragState( false );
+
+			this.droppedItems = e.dataTransfer.items;
+
+			dispatchEventList( this.events.drop, this );
+
+		} );
+
 		draggableDOM( dom, ( data ) => {
 
 			const { delta, isTouch } = data;
@@ -1506,6 +1742,14 @@ class Canvas extends Serializer {
 
 	}
 
+	onDrop( callback ) {
+
+		this.events.drop.push( callback );
+
+		return this;
+
+	}
+
 	start() {
 
 		this.updating = true;
@@ -1518,6 +1762,8 @@ class Canvas extends Serializer {
 		document.addEventListener( 'mousemove', this._onMoveEvent, true );
 		document.addEventListener( 'touchmove', this._onMoveEvent, true );
 
+		document.addEventListener( 'dragover', this._onMoveEvent, true );
+
 		document.addEventListener( 'DOMContentLoaded', this._onContentLoaded );
 
 		requestAnimationFrame( this._onUpdate );
@@ -1536,6 +1782,8 @@ class Canvas extends Serializer {
 		document.removeEventListener( 'mousemove', this._onMoveEvent, true );
 		document.removeEventListener( 'touchmove', this._onMoveEvent, true );
 
+		document.removeEventListener( 'dragover', this._onMoveEvent, true );
+
 		document.removeEventListener( 'DOMContentLoaded', this._onContentLoaded );
 
 	}
@@ -1899,135 +2147,6 @@ class ButtonInput extends Input {
 
 }
 
-class DraggableElement extends Element {
-
-	constructor( draggable = true ) {
-
-		super( true );
-
-		this.draggable = draggable;
-
-		const onDrag = ( e ) => {
-
-			e.preventDefault();
-
-			if ( this.draggable === true ) {
-
-				draggableDOM( this.node.dom );
-
-			}
-
-		};
-
-		const { dom } = this;
-
-		dom.addEventListener( 'mousedown', onDrag, true );
-		dom.addEventListener( 'touchstart', onDrag, true );
-
-	}
-
-}
-
-class TitleElement extends DraggableElement {
-
-	constructor( title, draggable = true ) {
-
-		super( draggable );
-
-		const { dom } = this;
-
-		dom.className = 'title';
-
-		const spanDOM = document.createElement( 'span' );
-		spanDOM.innerText = title;
-
-		const iconDOM = document.createElement( 'i' );
-
-		const toolbarDOM = document.createElement( 'f-toolbar' );
-
-		this.buttons = [];
-
-		this.spanDOM = spanDOM;
-		this.iconDOM = iconDOM;
-		this.toolbarDOM = toolbarDOM;
-
-		dom.appendChild( spanDOM );
-		dom.appendChild( iconDOM );
-		dom.appendChild( toolbarDOM );
-
-	}
-
-	setIcon( value ) {
-
-		this.iconDOM.className = value;
-
-		return this;
-
-	}
-
-	getIcon() {
-
-		return this.iconDOM.className;
-
-	}
-
-	setTitle( value ) {
-
-		this.spanDOM.innerText = value;
-
-		return this;
-
-	}
-
-	getTitle() {
-
-		return this.spanDOM.innerText;
-
-	}
-
-	addButton( button ) {
-
-		this.buttons.push( button );
-
-		this.toolbarDOM.appendChild( button.dom );
-
-		return this;
-
-	}
-
-	serialize( data ) {
-
-		super.serialize( data );
-
-		const title = this.getTitle();
-		const icon = this.getIcon();
-
-		data.title = title;
-
-		if ( icon !== '' ) {
-
-			data.icon = icon;
-
-		}
-
-	}
-
-	deserialize( data ) {
-
-		super.deserialize( data );
-
-		this.setTitle( data.title );
-
-		if ( data.icon !== undefined ) {
-
-			this.setIcon( data.icon );
-
-		}
-
-	}
-
-}
-
 class ObjectNode extends Node {
 
 	constructor( name, inputLength, extra = null, width = 300 ) {
@@ -2040,11 +2159,11 @@ class ObjectNode extends Node {
 			.setExtra( extra )
 			.setOutput( inputLength );
 
-		const closeButton = new ButtonInput( '✖' ).onClick( () => {
+		const closeButton = new ButtonInput( Styles.icons.close || '✕' ).onClick( () => {
 
 			this.dispose();
 
-		} );
+		} ).setIcon( Styles.icons.close );
 
 		title.addButton( closeButton );
 
@@ -3057,6 +3176,7 @@ var Flow = /*#__PURE__*/Object.freeze({
 	Node: Node,
 	Canvas: Canvas,
 	Serializer: Serializer,
+	Styles: Styles,
 	ObjectNode: ObjectNode,
 	PanelNode: PanelNode,
 	Menu: Menu,
@@ -3215,4 +3335,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, TextInput, TitleElement, ToggleInput, Utils };
+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 };

package/examples/jsm/lights/RectAreaLightUniformsLib.js

@@ -46,6 +46,9 @@ class RectAreaLightUniformsLib {
 		UniformsLib.LTC_FLOAT_1 = new DataTexture( ltc_float_1, 64, 64, RGBAFormat, FloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 		UniformsLib.LTC_FLOAT_2 = new DataTexture( ltc_float_2, 64, 64, RGBAFormat, FloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 
+		UniformsLib.LTC_FLOAT_1.needsUpdate = true;
+		UniformsLib.LTC_FLOAT_2.needsUpdate = true;
+
 		const ltc_half_1 = new Uint16Array( LTC_MAT_1.length );
 
 		LTC_MAT_1.forEach( function ( x, index ) {
@@ -65,6 +68,10 @@ class RectAreaLightUniformsLib {
 		UniformsLib.LTC_HALF_1 = new DataTexture( ltc_half_1, 64, 64, RGBAFormat, HalfFloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 		UniformsLib.LTC_HALF_2 = new DataTexture( ltc_half_2, 64, 64, RGBAFormat, HalfFloatType, UVMapping, ClampToEdgeWrapping, ClampToEdgeWrapping, LinearFilter, NearestFilter, 1 );
 
+		UniformsLib.LTC_HALF_1.needsUpdate = true;
+		UniformsLib.LTC_HALF_2.needsUpdate = true;
+
+
 	}
 
 }

package/examples/jsm/loaders/AMFLoader.js

@@ -15,8 +15,6 @@ import * as fflate from '../libs/fflate.module.js';
  * Description: Early release of an AMF Loader following the pattern of the
  * example loaders in the three.js project.
  *
- * More information about the AMF format: http://amf.wikispaces.com
- *
  * Usage:
  *	const loader = new AMFLoader();
  *	loader.load('/path/to/project.amf', function(objecttree) {

package/examples/jsm/loaders/ColladaLoader.js

@@ -1276,7 +1276,7 @@ class ColladaLoader extends Loader {
 						break;
 					case 'transparent':
 						data[ child.nodeName ] = {
-							opaque: child.getAttribute( 'opaque' ),
+							opaque: child.hasAttribute( 'opaque' ) ? child.getAttribute( 'opaque' ) : 'A_ONE',
 							data: parseEffectParameter( child )
 						};
 						break;
@@ -1737,7 +1737,6 @@ class ColladaLoader extends Loader {
 							material.opacity = color[ 0 ] * transparency.float;
 							break;
 						default:
-							material.opacity = 1 - transparency.float;
 							console.warn( 'THREE.ColladaLoader: Invalid opaque type "%s" of transparent tag.', transparent.opaque );
 
 					}