buildoz/bzGraflow-editor.js

/**
 *       _  ___   Another      
 *      / |/ (_)______ __ _____
 *     /    / / __(_-</ // (_-<
 *    /_/|_/_/\__/___/\_, /___/ 
 *                   /___/     
 *       production !
 * 
 * Licensed under the MIT License: 
 * This code is free to use and modify, 
 * as long as the copyright notice and license are kept.
 */
class BZgrafloweditor extends Buildoz{
    constructor(){
        super()
        this.defaultAttrs = {  }
    }
    
    async connectedCallback() { 
        await customElements.whenDefined('bz-graflow')
        await customElements.whenDefined('bz-slidepane') 
        await customElements.whenDefined('bz-select') 
        super.connectedCallback()
        const nodesUrl = this.getBZAttribute('nodes')
        this.mainContainer  = document.createElement('div')
        this.mainContainer.classList.add('bzgfe-main-container')
        this.nodesContainer = document.createElement('div')
        this.nodesContainer.classList.add('bzgfe-nodes-container')
        this.mainContainer.append(this.nodesContainer)
        this.slidePane = document.createElement('bz-slidepane')
        this.slidePane.setAttribute('side', 'right')
        this.slidePane.setAttribute('data-output', 'console')
        this.slidePane.setAttribute('maxwidth', '350')
        this.slidePane.setAttribute('minwidth', '200')
        this.fillconsole()
        //this.mainContainer.append(this.slidePane)
        this.graflow = document.createElement('bz-graflow')
        this.graflow.setAttribute('nodes', nodesUrl)
        this.graflow.setAttribute('edit', "nodesmove,editwires,dropnodes")
        this.graflow.setAttribute('align', "center")
        this.graflow.setAttribute('wiretype', "bezier")
        this.graflow.setAttribute('tension', "30")
        this.graflow.setAttribute('gapx', "80")
        this.graflow.setAttribute('gapy', "80")
        this.graflow.addEventListener('bz:graflow:domConnected', this.setupDropZone.bind(this))
        this.graflow.append(this.slidePane)
        this.mainContainer.append(this.graflow)
        this.append(this.mainContainer)        
        document.querySelector('[data-trigger="onAutoplace1H"]').addEventListener('click',
            (evt) => { this.graflow.autoPlace('horizontal', null, null, 1000, null) }
        )
        document.querySelector('[data-trigger="onAutoplace1V"]').addEventListener('click',
            (evt) => { this.graflow.autoPlace('vertical', null, null, 1000, null) }
        )
        document.querySelector('input[name="tension"]').addEventListener('change',
            (evt) => { this.graflow.setAttribute('tension', evt.target.value); this.graflow.refresh() }
        )
        document.querySelector('input[name="gapx"]').addEventListener('change',
            (evt) => { this.graflow.setAttribute('gapx', evt.target.value); this.graflow.refresh() }
        )
        document.querySelector('input[name="gapy"]').addEventListener('change',
            (evt) => { this.graflow.setAttribute('gapy', evt.target.value); this.graflow.refresh() }
        )
        document.querySelector('bz-select[name="wiretype"]').addEventListener('change',
            (evt) => { this.graflow.setAttribute('wiretype', evt.target.value); this.graflow.refresh() }
        )
        document.querySelector('bz-select[name="align"]').addEventListener('change',
            (evt) => { this.graflow.setAttribute('align', evt.target.value); this.graflow.refresh() }
        )
        this.graflow.addEventListener('bz:graflow:nodesLoaded', this.refreshNodes.bind(this))
        this.graflow.loadNodes(nodesUrl)
    }

    fillconsole(){
        this.slidePane.innerHTML = `
            <div class="inner-console">
                <button data-trigger="onAutoplace1H">Auto-place Horizontal</button>
                <button data-trigger="onAutoplace1V">Auto-place Vertical</button>
                <div class="cols-2"><label>GapX</label><input name="gapx" type="number" size="2" value="80"></div>
                <div class="cols-2"><label>GapY</label><input name="gapy" type="number" size="2" value="80"></div>
                <div class="cols-2">
                    <label>Alignment</label>
                    <bz-select name="align">
                        <option value="center" selected>Center</option>
                        <option value="first">First</option>
                        <option value="last">Last</option>
                        <option value="parent">Parent</option>
                    </bz-select>
                </div>
                <div class="cols-2">
                    <label>Wire Type</label>
                    <bz-select name="wiretype">
                        <option value="ortho">Ortho</option>
                        <option value="straight">Straight</option>
                        <option value="bezier" selected>Bezier</option>
                    </bz-select>
                </div>
                <div class="cols-2"><label>Tension</label><input name="tension" type="number" size="2" value="30"></div>
            </div>
        `
    }

    refreshNodes(e){
        for(const nodeType in this.graflow.nodesRegistry){
            const nodeDef = this.graflow.nodesRegistry[nodeType]
            if(nodeDef.dataset.editor=='exclude') continue
            const node = nodeDef.cloneNode(true)
            this.makeNodeDraggable(node)
            this.nodesContainer.append(node)
        }
    }

    makeNodeDraggable(node){
        node.draggable = true
        node.style.cursor = 'pointer'
        node.addEventListener('dragstart', (evt) => {
            evt.dataTransfer.setData('text/plain', node.dataset.nodetype)
            evt.dataTransfer.effectAllowed = 'copy'
            evt.dataTransfer.setDragImage(node, evt.offsetX, evt.offsetY)
        })
    }

    onNodeDragEnd(evt){
        console.log('drag end', evt)
        evt.dataTransfer.clearData()
    }

    setupDropZone(){
        const dropZone = this.graflow.wiresContainer
        const nodesContainer = this.graflow.nodesContainer
        dropZone.addEventListener('dragover', (evt) => {
            evt.preventDefault()
            evt.dataTransfer.dropEffect = 'copy'
        })
        dropZone.addEventListener('drop', (evt) => {
            evt.preventDefault()
            const nodeType = evt.dataTransfer.getData('text/plain')
            if(!nodeType || !(nodeType in this.graflow.nodesRegistry)) return
            const rect = nodesContainer.getBoundingClientRect()
            const x = evt.clientX - rect.left + nodesContainer.scrollLeft
            const y = evt.clientY - rect.top + nodesContainer.scrollTop
            const id = 'n' + crypto.randomUUID().replace(/-/g, '').slice(0, 8)
            this.graflow.addNode({ id, nodeType, coords: { x, y } })
            for(const node of this.graflow.flow.nodes){
                if(node.id == id){
                    node.coords.x = x
                    node.coords.y = y
                    break
                }
            }            
            this.graflow.refresh()
        })
    }
}
Buildoz.define('grafloweditor', BZgrafloweditor)