93 lines
2.3 KiB
JavaScript
93 lines
2.3 KiB
JavaScript
import { SVG } from './DOM.js'
|
|
import { makeDraggable } from './Draggable.js'
|
|
import { Group } from './Group.js'
|
|
|
|
const Box = ( title, inputs, outputs )=> {
|
|
let $dom = makeDraggable( Group('Box') ), $fo, $box
|
|
|
|
$dom.append(
|
|
$fo = SVG`<foreignObject width="180" height="100">
|
|
<box xmlns="http://www.w3.org/1999/xhtml">
|
|
<header>${title}</header>
|
|
${outputs.map( str=> `<socket output>${str}</socket>`).join('')}
|
|
${inputs.map( str=> `<socket input>${str}</socket>`).join('')}
|
|
</box>
|
|
</foreignObject>`[0]
|
|
)
|
|
$box = $fo.$`box`
|
|
$dom.resize = ({ width, height })=> {
|
|
width && $fo.setAttribute('width', width )
|
|
height && $fo.setAttribute('height', height )
|
|
$dom.updateAnchors()
|
|
}
|
|
|
|
let heightInvalidated = false
|
|
$dom.invalidateHeight = ()=> {
|
|
heightInvalidated = true
|
|
requestAnimationFrame( ()=> $dom.resize({height: $box.offsetHeight }) )
|
|
}
|
|
let widthInvalidated = false
|
|
$dom.invalidateWidth = ()=> {
|
|
widthInvalidated = true
|
|
requestAnimationFrame( ()=> $dom.resize({width: $box.offsetWidth }) )
|
|
}
|
|
|
|
setTimeout( $dom.invalidateHeight, 1000 )
|
|
|
|
|
|
// Draw anchors
|
|
$box.$$`socket`.map( sock=> sock.anchor = SVG`<circle class="anchor"/>`[0] )
|
|
.map( a=> $dom.append(a) )
|
|
|
|
$dom.updateAnchors = ()=>
|
|
$box.$$`socket`
|
|
.map( sock=>
|
|
sock.anchor.moveTo({
|
|
x: sock.hasAttribute('output')
|
|
? $box.offsetWidth
|
|
: 0
|
|
, y: sock.offsetTop + ( sock.offsetHeight / 2 ) + 1
|
|
})
|
|
)
|
|
|
|
$dom.on`contextmenu`( e=> e.menu = Object.assign(e.menu || {}, {
|
|
'Box': {
|
|
'Debug': e=> console.log($dom)
|
|
, 'Convert to >': {
|
|
ZigZag: e=> $box.style.setProperty('background','orange')
|
|
, Flat: e=> $dom.style.setProperty('--wave-color','var(--fl-color)')
|
|
, Impulsive: e=> $dom.style.setProperty('--wave-color','var(--im-color)')
|
|
}
|
|
// 'Convert to ZZ':e=> $dom.style.setProperty('--wave-color','var(--zz-color)')
|
|
// , ...( $dom.fibos ? {['Toggle fibos']: $dom.toggleFibos} : {} )
|
|
// , ...( w.isEmpty ? {['Subdivise']: $dom.subdivise} : {} )
|
|
}
|
|
}) , {capture:true} )
|
|
|
|
return $dom
|
|
}
|
|
|
|
|
|
|
|
// class Box extends HTMLElement {
|
|
|
|
// static styles = CSS`
|
|
|
|
// `
|
|
|
|
// constructor()
|
|
// {
|
|
// super()
|
|
// this.$svg =
|
|
// this.addListeners()
|
|
|
|
// }
|
|
|
|
// addListeners()
|
|
// {
|
|
|
|
// }
|
|
// }
|
|
// customElements.define( 'vp-box', Box )
|
|
|
|
export { Box } |