tangle-attempt

nb.py

import anywidget
import traitlets

class TangleWidget(anywidget.AnyWidget):
    _esm = """
    export default { render };

    function render({ model, el }) {
        const input = document.createElement('span');
        input.style.borderBottom = '1px dashed #3498db';
        input.style.cursor = 'ew-resize';
        input.style.color = '#3498db';
        input.style.position = 'relative';
        input.style.opacity = 0.9;

        el.appendChild(input);

        function updateValue(value) {
            model.set('val', value);
            model.save_changes();
        }

        function onMouseDown(event) {
            event.preventDefault();
            const startX = event.clientX;
            const startValue = model.get('val');
            const min = model.get('min');
            const max = model.get('max');

            function onMouseMove(event) {
                const dx = event.clientX - startX;
                let newValue = startValue + Math.round(dx / 10);
                newValue = Math.max(min, Math.min(max, newValue));
                if (newValue !== model.get('val')) {
                    updateValue(newValue);
                }
            }

            function onMouseUp() {
                document.removeEventListener('mousemove', onMouseMove);
                document.removeEventListener('mouseup', onMouseUp);
            }

            document.addEventListener('mousemove', onMouseMove);
            document.addEventListener('mouseup', onMouseUp);
        }

        input.addEventListener('mousedown', onMouseDown);

        model.on('change:val', () => {
            input.textContent = value;
        });

        updateValue(model.get("val));

        return () => {
            input.removeEventListener('mousedown', onMouseDown);
        };
    }
    """

    _css = """
    .widget-tangle:hover span {
        opacity: 1 !important;
    }
    """

    val = traitlets.Int().tag(sync=True)
    min = traitlets.Int().tag(sync=False)
    max = traitlets.Int().tag(sync=False)

    def __init__(self, min=0, max=100, value=50):
        super().__init__()
        self.val = value
        self.min = min
        self.max = max