PNet/graphics.js

class Tragable {
    initTrag(element, cb) {
        let selected = false;
        element.addEventListener('mousedown', () => {
            selected = true;
        });
        svg.addEventListener('mousemove', event => {
            if (selected) cb(event.x, event.y);
        });
        svg.addEventListener('mouseup', () => {
            selected = false;
        });
        svg.addEventListener('mouseleave', event => {
            selected = false;
        });
    }
}


class SVGNode extends Tragable {
    group;
    circle;
    circleText;
    aboveText;
    constructor(node) {
        super();
        // Create the group element
        this.group = document.createElementNS(svgNamespace, 'g');
        this.group.classList.add("PNode");
        this.group.setAttribute('transform', `translate(${node.x}, ${node.y})`);

        // Create the circle
        this.circle = document.createElementNS(svgNamespace, 'circle');
        this.circle.setAttribute('cx', '0');
        this.circle.setAttribute('cy', '0');
        this.circle.setAttribute('r', '25');

        // Create the text inside the circle
        this.circleText = document.createElementNS(svgNamespace, 'text');
        this.circleText.classList.add("circleText");
        this.circleText.setAttribute('x', '0');
        this.circleText.setAttribute('y', '5');
        this.circleText.textContent = '0/1';

        // Create the text above the circle
        this.aboveText = document.createElementNS(svgNamespace, 'text');
        this.aboveText.classList.add("aboveText");
        this.aboveText.setAttribute('x', '0');
        this.aboveText.setAttribute('y', '-35');
        this.aboveText.textContent = node.name;

        // Append the circle and texts to the group
        this.group.appendChild(this.circle);
        this.group.appendChild(this.circleText);
        this.group.appendChild(this.aboveText);

        this.initTrag(this.group, (x, y) => node.updatePosition(x, y));
    }

    appendIt(svg) {
        svg.appendChild(this.group);
    }

    translate(x, y) {
        this.group.setAttribute('transform', `translate(${x}, ${y})`);
    }
    setName(name) {
        this.aboveText.textContent = name;
    }
    setMarks(amount, max) {
        this.circleText.textContent = `${amount}/${max}`;
    }
}

class SVGTRansition extends Tragable {
    group;
    rect;
    rectText;
    constructor(trans) {
        super();
        // Create the group element
        this.group = document.createElementNS(svgNamespace, 'g');
        this.group.classList.add("PTransition");
        this.group.setAttribute('transform', `translate(${trans.x}, ${trans.y})`);

        // Create the circle
        this.rect = document.createElementNS(svgNamespace, 'rect');
        this.rect.setAttribute('x', '-12.5');
        this.rect.setAttribute('y', '-25');
        this.rect.setAttribute('height', '50');
        this.rect.setAttribute('width', '25');

        // Create the text inside the circle
        this.rectText = document.createElementNS(svgNamespace, 'text');
        this.rectText.classList.add("rectText");
        this.rectText.setAttribute('x', '-5');
        this.rectText.setAttribute('y', '-35');
        this.rectText.textContent = trans.name;

        // Append the circle and texts to the group
        this.group.appendChild(this.rect);
        this.group.appendChild(this.rectText);
        this.initTrag(this.group, (x, y) => trans.updatePosition(x, y));
    }

    appendIt(svg) {
        svg.appendChild(this.group);
    }

    translate(x, y) {
        this.group.setAttribute('transform', `translate(${x}, ${y})`);
    }
    setName(name) {
        this.aboveText.textContent = name;
    }

    setCanFire(can){
        if (can)this.group.classList.add("canFire");
        else this.group.classList.remove("canFire");
    }
}

class SVGArrow {
    group;
    lineText;
    line;
    from;
    to;
    constructor(from, to) {
        this.from = from;
        this.to = to;
        this.group = document.createElementNS(svgNamespace, 'g');
        this.group.classList.add("PEdge");

        this.line = document.createElementNS(svgNamespace, 'line');
        this.line.setAttribute('marker-end', "url(#arrowhead)");
        this.group.setAttribute('transform', `translate(0, 0)`);

        // Create the text inside the circle
        this.lineText = document.createElementNS(svgNamespace, 'text');
        this.lineText.classList.add("lineText");
        this.lineText.setAttribute('x', '0');
        this.lineText.setAttribute('y', '0');
        this.lineText.textContent = "";

        this.group.appendChild(this.line);
        this.group.appendChild(this.lineText);

        this.updatePosition();
    }
    updatePosition() {
        let dx = this.to.x - this.from.x;
        let dy = this.to.y - this.from.y;
        let l = Math.sqrt(dx * dx + dy * dy);
        dx /= l;
        dy /= l;
        this.line.setAttribute('x1', this.from.x + dx * 30);
        this.line.setAttribute('y1', this.from.y + dy * 30);
        this.line.setAttribute('x2', this.to.x - dx * 40);
        this.line.setAttribute('y2', this.to.y - dy * 40);
    }
    appendIt(svg) {
        svg.appendChild(this.group);
    }

}