venny/bin/base-element.js

Declarative Venn diagrams

/* eslint-disable @typescript-eslint/no-explicit-any */
import { PropChangeEvent } from './prop-change-event';
export class VennElement extends HTMLElement {
    constructor() {
        super(...arguments);
        this._connected = false;
        this._pendingEventListeners = [];
        this._size = 0;
        this._label = '';
        this._firePropChange = (prop) => {
            if (this._connected) {
                this.dispatchEvent(new PropChangeEvent(prop));
            }
        };
    }
    get size() {
        return this._size;
    }
    set size(value) {
        if (value !== this._size) {
            this._size = value;
            this._firePropChange('size');
        }
    }
    get label() {
        return this._label;
    }
    set label(value) {
        if (value !== this._label) {
            this._label = value;
            this._firePropChange('label');
        }
    }
    attributeChangedCallback(name, _, newValue) {
        this[name] = newValue;
    }
    connectedCallback() {
        this._connected = true;
        this.dispatchEvent(new Event('area-add', { bubbles: true, composed: true }));
    }
    disconnectedCallback() {
        this._connected = false;
    }
    _addPendingSvgListeners() {
        if (this._svgNode) {
            for (const pl of this._pendingEventListeners) {
                this._svgNode.addEventListener(pl.type, pl.listener, pl.options);
            }
            this._pendingEventListeners = [];
        }
    }
    setSvgNode(node) {
        this._svgNode = node;
        this._addPendingSvgListeners();
    }
    addEventListener(type, listener, options) {
        this._pendingEventListeners.push({ type, listener, options });
        this._addPendingSvgListeners();
    }
    removeEventListener(type, listener, options) {
        if (this._svgNode) {
            this._svgNode.removeEventListener(type, listener, options);
        }
    }
}