@antv/x6/es/addon/knob/index.js

JavaScript diagramming library that uses SVG and HTML for rendering.

import { Widget } from '../common';
import { Dom } from '../../util';
export class Knob extends Widget {
    get node() {
        return this.cell;
    }
    get metadata() {
        return this.cell.prop('knob');
    }
    init(options) {
        this.options = Object.assign({}, options);
        this.render();
        this.startListening();
    }
    startListening() {
        this.delegateEvents({
            mousedown: 'onMouseDown',
            touchstart: 'onMouseDown',
        });
        this.model.on('*', this.update, this);
        this.graph.on('scale', this.update, this);
        this.graph.on('translate', this.update, this);
        this.model.on('reseted', this.remove, this);
        this.node.on('removed', this.remove, this);
        this.view.on('node:resize', this.onTransform, this);
        this.view.on('node:rotate', this.onTransform, this);
        this.view.on('node:resized', this.onTransformed, this);
        this.view.on('node:rotated', this.onTransformed, this);
        super.startListening();
    }
    stopListening() {
        this.undelegateEvents();
        this.model.off('*', this.update, this);
        this.graph.off('scale', this.update, this);
        this.graph.off('translate', this.update, this);
        this.model.off('reseted', this.remove, this);
        this.node.off('removed', this.remove, this);
        this.view.off('node:resize', this.onTransform, this);
        this.view.off('node:rotate', this.onTransform, this);
        this.view.off('node:resized', this.onTransformed, this);
        this.view.off('node:rotated', this.onTransformed, this);
        super.stopListening();
    }
    render() {
        this.container = document.createElement('div');
        Dom.addClass(this.container, this.prefixClassName('widget-knob'));
        if (this.options.className) {
            Dom.addClass(this.container, this.options.className);
        }
        this.view.addClass(Private.KNOB);
        this.graph.container.appendChild(this.container);
        this.update();
        return this;
    }
    remove() {
        this.view.removeClass(Private.KNOB);
        return super.remove();
    }
    update() {
        if (this.metadata && this.metadata.update) {
            this.metadata.update.call(this.graph, {
                knob: this,
                cell: this.cell,
                node: this.node,
            });
        }
    }
    onTransform() {
        this.container.style.display = 'none';
    }
    onTransformed() {
        this.container.style.display = '';
    }
    notify(name, evt) {
        if (this.view) {
            const e = this.view.normalizeEvent(evt);
            const localPoint = this.graph.snapToGrid(e.clientX, e.clientY);
            this.view.notify(`cell:${name}`, {
                e,
                view: this.view,
                node: this.node,
                cell: this.cell,
                x: localPoint.x,
                y: localPoint.y,
            });
            if (this.cell.isNode()) {
                this.view.notify(`node:${name}`, {
                    e,
                    view: this.view,
                    node: this.node,
                    cell: this.cell,
                    x: localPoint.x,
                    y: localPoint.y,
                });
            }
            else if (this.cell.isEdge()) {
                this.view.notify(`edge:${name}`, {
                    e,
                    view: this.view,
                    edge: this.cell,
                    cell: this.cell,
                    x: localPoint.x,
                    y: localPoint.y,
                });
            }
        }
    }
    onMouseDown(e) {
        e.stopPropagation();
        this.setEventData(e, {
            knobbing: false,
        });
        this.graph.view.undelegateEvents();
        this.delegateDocumentEvents(Private.documentEvents, e.data);
        if (this.metadata && this.metadata.onMouseDown) {
            this.metadata.onMouseDown.call(this.graph, {
                e,
                data: this.getEventData(e),
                knob: this,
                cell: this.cell,
                node: this.node,
            });
        }
        this.notify('knob', e);
    }
    onMouseMove(e) {
        const data = this.getEventData(e);
        const view = this.graph.findViewByCell(this.node);
        if (!data.knobbing) {
            data.knobbing = true;
            if (view) {
                view.addClass(Private.KNOBBING);
            }
            this.model.startBatch('knob', { cid: this.cid });
        }
        if (this.metadata && this.metadata.onMouseMove) {
            this.metadata.onMouseMove.call(this.graph, {
                e,
                data,
                knob: this,
                cell: this.cell,
                node: this.node,
            });
        }
        this.notify('knobbing', e);
    }
    onMouseUp(e) {
        this.undelegateDocumentEvents();
        this.graph.view.delegateEvents();
        const data = this.getEventData(e);
        const view = this.graph.findViewByCell(this.node);
        if (data.knobbing) {
            if (view) {
                view.removeClass(Private.KNOBBING);
            }
            if (this.metadata && this.metadata.onMouseUp) {
                this.metadata.onMouseUp.call(this.graph, {
                    e,
                    data,
                    knob: this,
                    cell: this.cell,
                    node: this.node,
                });
            }
            this.model.stopBatch('knob', { cid: this.cid });
            this.notify('knobbed', e);
        }
    }
}
var Private;
(function (Private) {
    Private.KNOB = 'has-widget-knob';
    Private.KNOBBING = 'node-knobbing';
    Private.documentEvents = {
        mousemove: 'onMouseMove',
        touchmove: 'onMouseMove',
        mouseup: 'onMouseUp',
        touchend: 'onMouseUp',
    };
})(Private || (Private = {}));
//# sourceMappingURL=index.js.map