Zeigerdiagramm komplett neu

by RavilG

HTML

<div>
    <!--========= TESTMODE ================= -->
    <div id="testmode">========NICHT LÖSCHEN========
        <div>Testmode&nbsp;<input type="checkbox" id="testmode-check" name="Testmode"></div>
        <div id="Test-Spannungen">
            <input class="voltage-arrow arrow-button testarrow" value="U" type="button" oldvalue="" name="#0B0BFD">
            <input class="voltage-arrow arrow-button testarrow" value="U_R" type="button" oldvalue="" name="#00B050">
            <input class="voltage-arrow arrow-button testarrow" value="U_L" type="button" oldvalue="" name="#7030A0">
            <input class="voltage-arrow arrow-button testarrow" value="U_C" type="button" oldvalue="" name="#767171">
        </div>
        <div id="Test-Ströme">
            <input class="current-arrow arrow-button testarrow" value="I" type="button" oldvalue="" name="#FF0000">
            <input class="current-arrow arrow-button testarrow" value="I_RL" type="button" oldvalue="" name="#F6630D">
            <input class="current-arrow arrow-button testarrow" value="I_C" type="button" oldvalue="" name="#FFC000">
        </div>
        <div style="float:left;">Genauigkeit:&nbsp;</div>
        <div id="Genauigkeit">1</div>
        <div>Maßstab an/aus <input type="checkbox" id="testmode-Scales-check" name="Maßstab-Test-Check"></div>
        <div style="float:left;">Maßstab Spannungen:&nbsp;</div>
        <div id="Maßstab-Spannung">100</div>
        <div style="float:left;">Maßstab Ströme:&nbsp;</div>
        <div id="Maßstab-Strom">1</div>
    </div>
</div>

<!--========= CODE ================= -->
<p></p>
<div style="float:left;">
    <table id="vector-table" frame="border" rules="all" dir="ltr"
        style="box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04); margin-left: 5px; font-family:Verdana;font-size:12px;"
        cellpadding="5" cellspacing="1" bordercolor="#E4E4E4" border="3">
        <thead id="tableHeat">
            <tr style="text-align:...

JavaScript

// script.js
class VectorDiagram {
    constructor(canvasId, tempCanvasId) {
        this.canvas = document.getElementById(canvasId);
        this.tempCanvas = document.getElementById(tempCanvasId);
        this.ctx = this.tempCanvas.getContext('2d');
        this.mainCtx = this.canvas.getContext('2d');

        this.width = this.canvas.width - 1; // canvas width - adjust to center line
        this.height = this.canvas.height - 1;

        // Default settings
        this.arrows = [];
        this.scaleGrid = this.width / 12;

        this.isDrawing = false;
        
        // Undo/Redo Stacks
        this.undoStack = [];
        this.redoStack = [];

        this.currentDrawingArrow = null; // Aktuell ausgewählter Pfeil

        this.initialize();
    }

    


    saveStateToUndo() {
        // Speichert den aktuellen Zustand auf den Undo-Stack
        this.undoStack.push(JSON.stringify(this.arrows));
        if (this.undoStack.length > 20) {  // Beschränkung der Größe des Stacks
            this.undoStack.shift();
        }
    }

    undo() {
        if (this.undoStack.length > 0) {
            const lastState = this.undoStack.pop();
            this.redoStack.push(JSON.stringify(this.arrows));
            this.arrows = JSON.parse(lastState).map(arrowData => new Arrow(
                arrowData.startX, arrowData.startY, arrowData.endX, arrowData.endY,
                arrowData.color, arrowData.name, arrowData.type
            ));
            this.drawAllArrows();
        }
    }

    redo() {
        if (this.redoStack.length > 0) {
            const nextState = this.redoStack.pop();
            this.undoStack.push(JSON.stringify(this.arrows));
            this.arrows = JSON.parse(nextState).map(arrowData => new Arrow(
                arrowData.startX, arrowData.startY, arrowData.endX, arrowData.endY,
                arrowData.color, arrowData.name, arrowData.type
            ));
            this.drawAllArrows();
        }
    }

   ...