
<dial>
    <vbox>
        <div class="ml-4">
            <hstack>
                <div id={"knob" + props.ti}></div>
                <div class="mt-1" style="height: 22px" id={"knob-value" + props.ti}></div>
                <span class="cursor-pointer" id={"sample" + this.props.ti} onclick={remove(this.props.ti -1)}>(x)</span>
            </hstack>
        </div>
    </vbox>

    <script>

this.props = opts;

remove(index) {
    return () => {
        this.props.rmdial(index);
    }
}

this.on("mount", () => {
    if (opts.v) {

        Nexus.colors.accent = "#000000"
        Nexus.colors.fill = "#ffffff"

        var cell = window.cellx.cellx(0.5);
        var dial = new Nexus.Dial('#knob' + this.props.ti, {
            'size': [45, 45],
            'value': 0.5
        });
        cell.onChange(evt => {
            if (evt.data.prevValue !== evt.data.value) {
                dial.value = evt.data.value;
            }
        });
        dial.colorize("accent","#000")
        dial.on('change', (val) => {
            val = window.roundTo(val, 4);
            $('#knob-value' + this.props.ti).html(val);
            cell(val);
        });
       this.props.v["cell"] = cell;
    }
});
   </script>

</dial>
