@mchp-mcc/scf-pic8-clc-v1 4.0.13 → 4.0.14

package/src/components/Canvas.tsx

@@ -1,757 +0,0 @@
-import React from "react";
-import { Dispatch } from "redux";
-import ReactDOM from "react-dom";
-import MX from "./MX";
-import { OrGate } from "../gates/OrGate";
-import { NotGate } from "../gates/NotGate";
-import { AndGate } from "../gates/AndGate";
-import { ALogicGate } from "../gates/ALogicGate";
-import { XorGate } from "../gates/XorGate";
-import { Latch } from "../gates/Latch";
-import { InputStateCalculator } from "../InputStateCalculator";
-import { CANVAS_WIDTH, CANVAS_HEIGHT } from "../Constants";
-
-const myGraph = MX;
-
-const mxGraph = myGraph.mxGraph;
-const mxEvent = myGraph.mxEvent;
-const mxUtils = myGraph.mxUtils;
-const mxClient = myGraph.mxClient;
-const mxShape = myGraph.mxShape;
-const mxCellRenderer = myGraph.mxCellRenderer;
-
-// Defines a custom stencil via the canvas API as defined here:
-// http://jgraph.github.io/mxgraph/docs/js-api/files/util/mxXmlCanvas2D-js.html
-function CLCDrawingCanvas(): any {
-    mxShape.call(this);
-}
-mxUtils.extend(CLCDrawingCanvas, mxShape);
-mxCellRenderer.registerShape("CLCDrawingCanvas", CLCDrawingCanvas);
-
-type CLCMode =
-    | "AND-OR"
-    | "OR-XOR"
-    | "4-input AND"
-    | "SR latch"
-    | "1-input D flip-flop with S and R"
-    | "2-input D flip-flop with R"
-    | "JK flip-flop with R"
-    | "1-input transparent latch with S and R";
-
-interface Hardware {
-    lcmodeClccon?: string;
-    lcenClccon?: boolean;
-    lcg1polClcpol?: string;
-    lcg2polClcpol?: string;
-    lcg3polClcpol?: string;
-    lcg4polClcpol?: string;
-    lcpolClcpol?: string;
-    lcd1sClcsel0?: string;
-    lcd2sClcsel1?: string;
-    lcd3sClcsel2?: string;
-    lcd4sClcsel3?: string;
-    lcg1d1nClcgls0?: boolean;
-    lcg1d1tClcgls0?: boolean;
-    lcg1d2nClcgls0?: boolean;
-    lcg1d2tClcgls0?: boolean;
-    lcg1d3nClcgls0?: boolean;
-    lcg1d3tClcgls0?: boolean;
-    lcg1d4nClcgls0?: boolean;
-    lcg1d4tClcgls0?: boolean;
-    lcg2d1nClcgls1?: boolean;
-    lcg2d1tClcgls1?: boolean;
-    lcg2d2nClcgls1?: boolean;
-    lcg2d2tClcgls1?: boolean;
-    lcg2d3nClcgls1?: boolean;
-    lcg2d3tClcgls1?: boolean;
-    lcg2d4nClcgls1?: boolean;
-    lcg2d4tClcgls1?: boolean;
-    lcg3d1nClcgls2?: boolean;
-    lcg3d1tClcgls2?: boolean;
-    lcg3d2nClcgls2?: boolean;
-    lcg3d2tClcgls2?: boolean;
-    lcg3d3nClcgls2?: boolean;
-    lcg3d3tClcgls2?: boolean;
-    lcg3d4nClcgls2?: boolean;
-    lcg3d4tClcgls2?: boolean;
-    lcg4d1nClcgls3?: boolean;
-    lcg4d1tClcgls3?: boolean;
-    lcg4d2nClcgls3?: boolean;
-    lcg4d2tClcgls3?: boolean;
-    lcg4d3nClcgls3?: boolean;
-    lcg4d3tClcgls3?: boolean;
-    lcg4d4nClcgls3?: boolean;
-    lcg4d4tClcgls3?: boolean;
-}
-
-interface Props {
-    hardware?: Hardware;
-    dispatch: Dispatch;
-    onGateOutputClick: (gate: string) => void;
-    onGateInputClick: (gate: string, input: string) => void;
-    [key: string]: any;
-}
-
-export class Canvas extends React.Component<Props> {
-    private graph: any;
-    private canvas: any;
-    private container: Element;
-    private gate1: ALogicGate;
-    private gate2: ALogicGate;
-    private gate3: ALogicGate;
-    private gate4: ALogicGate;
-    private gate5: ALogicGate;
-
-    constructor(props: Props) {
-        super(props);
-        this.LoadGraph = this.LoadGraph.bind(this);
-        this.paint = this.paint.bind(this);
-    }
-
-    componentDidMount(): void {
-        this.initializeGates();
-        this.LoadGraph();
-    }
-
-    componentDidUpdate(): void {
-        this.initializeGates();
-        this.updateGraph();
-    }
-
-    componentWillUnmount(): void {
-        this.graph.destroy();
-    }
-
-    private initializeGates(): void {
-        const hw = this.props.hardware;
-        const isInverted = (polarity?: string): boolean => polarity === "inverted";
-        const getInputState = (t = false, n = false): any =>
-            InputStateCalculator.getInputState(t, n);
-
-        this.gate1 = new OrGate(420, 150, isInverted(hw?.lcg1polClcpol), {
-            gateInput1State: getInputState(hw?.lcg1d1tClcgls0, hw?.lcg1d1nClcgls0),
-            gateInput2State: getInputState(hw?.lcg1d2tClcgls0, hw?.lcg1d2nClcgls0),
-            gateInput3State: getInputState(hw?.lcg1d3tClcgls0, hw?.lcg1d3nClcgls0),
-            gateInput4State: getInputState(hw?.lcg1d4tClcgls0, hw?.lcg1d4nClcgls0),
-        });
-
-        this.gate2 = new OrGate(420, 250, isInverted(hw?.lcg2polClcpol), {
-            gateInput1State: getInputState(hw?.lcg2d1tClcgls1, hw?.lcg2d1nClcgls1),
-            gateInput2State: getInputState(hw?.lcg2d2tClcgls1, hw?.lcg2d2nClcgls1),
-            gateInput3State: getInputState(hw?.lcg2d3tClcgls1, hw?.lcg2d3nClcgls1),
-            gateInput4State: getInputState(hw?.lcg2d4tClcgls1, hw?.lcg2d4nClcgls1),
-        });
-        this.gate3 = new OrGate(420, 350, isInverted(hw?.lcg3polClcpol), {
-            gateInput1State: getInputState(hw?.lcg3d1tClcgls2, hw?.lcg3d1nClcgls2),
-            gateInput2State: getInputState(hw?.lcg3d2tClcgls2, hw?.lcg3d2nClcgls2),
-            gateInput3State: getInputState(hw?.lcg3d3tClcgls2, hw?.lcg3d3nClcgls2),
-            gateInput4State: getInputState(hw?.lcg3d4tClcgls2, hw?.lcg3d4nClcgls2),
-        });
-        this.gate4 = new OrGate(420, 450, isInverted(hw?.lcg4polClcpol), {
-            gateInput1State: getInputState(hw?.lcg4d1tClcgls3, hw?.lcg4d1nClcgls3),
-            gateInput2State: getInputState(hw?.lcg4d2tClcgls3, hw?.lcg4d2nClcgls3),
-            gateInput3State: getInputState(hw?.lcg4d3tClcgls3, hw?.lcg4d3nClcgls3),
-            gateInput4State: getInputState(hw?.lcg4d4tClcgls3, hw?.lcg4d4nClcgls3),
-        });
-
-        this.gate5 = new NotGate(1000, 300, isInverted(hw?.lcpolClcpol));
-    }
-
-    LoadGraph(): void {
-        // Checks if the browser is supported
-        if (!mxClient.isBrowserSupported()) {
-            // Displays an error message if the browser is not supported.
-            mxUtils.error("Browser is not supported!", 200, false);
-        } else {
-            // eslint-disable-next-line react/no-find-dom-node, react/no-string-refs
-            this.container = ReactDOM.findDOMNode(this.refs.divGraph) as Element;
-
-            // Disables the built-in context menu
-            mxEvent.disableContextMenu(this.container);
-
-            // Creates the graph inside the given container
-            this.graph = new mxGraph(this.container);
-            const graph = this.graph;
-            graph.setEnabled(false);
-
-            const strokeWidth = 2;
-            const fontColor = "#000000";
-            const strokeColor = "#000000";
-
-            const style = graph.getStylesheet().getDefaultVertexStyle();
-            style["strokeColor"] = strokeColor;
-            style["fontColor"] = fontColor;
-            style["strokeWidth"] = strokeWidth;
-
-            // Override default paintBackground. Renders it once
-            CLCDrawingCanvas.prototype.paintBackground = this.paint;
-
-            graph.addListener(mxEvent.CLICK, (sender, evt) => {
-                const id: string = evt.getProperty("cell")?.id;
-
-                const outputMatch = id?.match(/^gate(\d)$/);
-                if (outputMatch) {
-                    const num = outputMatch[1];
-                    this.props.onGateOutputClick(num);
-                    evt.consume();
-                    return;
-                }
-
-                const inputMatch = id?.match(/^gate(\d)in(\d)$/);
-                if (inputMatch) {
-                    const gate = inputMatch[1];
-                    const input = inputMatch[2];
-                    this.props.onGateInputClick(gate, input);
-                    evt.consume();
-                    return;
-                }
-            });
-
-            // Gets the default parent for inserting new cells. This is normally the first
-            // child of the root (ie. layer 0).
-            const parent = graph.getDefaultParent();
-
-            graph.getModel().beginUpdate();
-            try {
-                const getOutputTarget = (gate: ALogicGate, id: string): any => {
-                    return gate.getOutputTarget(graph, parent, id);
-                };
-
-                const getInputTarget = (gate: ALogicGate, i: number, id: string): any => {
-                    return gate.getInputTarget(i, graph, parent, id);
-                };
-
-                const targets = [
-                    getOutputTarget(this.gate1, "gate1"),
-                    getOutputTarget(this.gate2, "gate2"),
-                    getOutputTarget(this.gate3, "gate3"),
-                    getOutputTarget(this.gate4, "gate4"),
-                    getOutputTarget(this.gate5, "gate5"),
-                    getInputTarget(this.gate1, 1, "gate1in1"),
-                    getInputTarget(this.gate1, 2, "gate1in2"),
-                    getInputTarget(this.gate1, 3, "gate1in3"),
-                    getInputTarget(this.gate1, 4, "gate1in4"),
-                    getInputTarget(this.gate2, 1, "gate2in1"),
-                    getInputTarget(this.gate2, 2, "gate2in2"),
-                    getInputTarget(this.gate2, 3, "gate2in3"),
-                    getInputTarget(this.gate2, 4, "gate2in4"),
-                    getInputTarget(this.gate3, 1, "gate3in1"),
-                    getInputTarget(this.gate3, 2, "gate3in2"),
-                    getInputTarget(this.gate3, 3, "gate3in3"),
-                    getInputTarget(this.gate3, 4, "gate3in4"),
-                    getInputTarget(this.gate4, 1, "gate4in1"),
-                    getInputTarget(this.gate4, 2, "gate4in2"),
-                    getInputTarget(this.gate4, 3, "gate4in3"),
-                    getInputTarget(this.gate4, 4, "gate4in4"),
-                ];
-
-                targets.forEach((target) => graph.addCell(target, parent));
-
-                graph.getCursorForCell = function (cell: any): any {
-                    if (targets.indexOf(cell) !== -1) {
-                        return "pointer";
-                    }
-                    return null;
-                };
-            } finally {
-                // Updates the display
-                graph.getModel().endUpdate();
-            }
-        }
-    }
-
-    private drawCanvas(graph: any, parent: any): any {
-        this.canvas = graph.insertVertex(
-            parent,
-            null,
-            null,
-            0,
-            0,
-            CANVAS_WIDTH,
-            CANVAS_HEIGHT,
-            "shape=CLCDrawingCanvas",
-        );
-
-        // Move canvas to the back so the targets are easily clickable
-        graph.cellsOrdered([this.canvas], true);
-    }
-
-    private updateGraph(): void {
-        const graph = this.graph;
-        const parent = graph.getDefaultParent();
-
-        graph.getModel().beginUpdate();
-        try {
-            graph.removeCells([this.canvas]);
-            this.drawCanvas(graph, parent);
-        } finally {
-            // Updates the display
-            graph.getModel().endUpdate();
-        }
-    }
-
-    private paint(c, x, y, w, h): void {
-        c.begin();
-
-        this.gate1.draw(c);
-        this.gate2.draw(c);
-        this.gate3.draw(c);
-        this.gate4.draw(c);
-        this.gate5.draw(c);
-
-        c.text(425, 147, 0, 0, "1");
-        c.text(425, 247, 0, 0, "2");
-        c.text(425, 347, 0, 0, "3");
-        c.text(425, 447, 0, 0, "4");
-
-        const line = (x1: number, y1: number, x2: number, y2: number): void => {
-            c.moveTo(x1, y1);
-            c.lineTo(x2, y2);
-        };
-
-        line(220, this.gate4.getYInput1(), 220, this.gate1.getYInput1());
-        line(250, this.gate4.getYInput2(), 250, this.gate1.getYInput2());
-        line(280, this.gate4.getYInput3(), 280, this.gate1.getYInput3());
-        line(310, this.gate4.getYInput4(), 310, this.gate1.getYInput4());
-
-        const drawConnectingDots = (x: number, y: number): void => {
-            c.stroke();
-            c.begin();
-            c.setFillColor(0);
-            c.ellipse(x, y, 10, 10);
-            c.fillAndStroke();
-            c.begin();
-        };
-
-        drawConnectingDots(220 - 5, this.gate1.getYInput1() - 5);
-        drawConnectingDots(220 - 5, this.gate2.getYInput1() - 5);
-        drawConnectingDots(220 - 5, this.gate3.getYInput1() - 5);
-        drawConnectingDots(250 - 5, this.gate2.getYInput2() - 5);
-        drawConnectingDots(250 - 5, this.gate3.getYInput2() - 5);
-        drawConnectingDots(280 - 5, this.gate2.getYInput3() - 5);
-        drawConnectingDots(280 - 5, this.gate3.getYInput3() - 5);
-        drawConnectingDots(310 - 5, this.gate2.getYInput4() - 5);
-        drawConnectingDots(310 - 5, this.gate3.getYInput4() - 5);
-        drawConnectingDots(310 - 5, this.gate4.getYInput4() - 5);
-
-        this.gate1.drawGateOutput(c, 561);
-        this.gate2.drawGateOutput(c, 561);
-        this.gate3.drawGateOutput(c, 561);
-        this.gate4.drawGateOutput(c, 561);
-        this.gate5.drawGateOutput(c, 1100);
-
-        this.gate1.drawGateOutput(c, 561);
-        this.gate2.drawGateOutput(c, 561);
-        this.gate3.drawGateOutput(c, 561);
-        this.gate4.drawGateOutput(c, 561);
-        this.gate5.drawGateOutput(c, 1100);
-
-        this.gate1.drawGateInput(c, 1, 170);
-        this.gate1.drawGateInput(c, 2, 250);
-        this.gate1.drawGateInput(c, 3, 280);
-        this.gate1.drawGateInput(c, 4, 310);
-
-        this.gate2.drawGateInput(c, 1, 220);
-        this.gate2.drawGateInput(c, 2, 170);
-        this.gate2.drawGateInput(c, 3, 280);
-        this.gate2.drawGateInput(c, 4, 310);
-
-        this.gate3.drawGateInput(c, 1, 220);
-        this.gate3.drawGateInput(c, 2, 250);
-        this.gate3.drawGateInput(c, 3, 170);
-        this.gate3.drawGateInput(c, 4, 310);
-
-        this.gate4.drawGateInput(c, 1, 220);
-        this.gate4.drawGateInput(c, 2, 250);
-        this.gate4.drawGateInput(c, 3, 280);
-        this.gate4.drawGateInput(c, 4, 170);
-
-        this.gate5.drawGateInput(c, 1, 950);
-
-        switch (this.props.hardware?.lcmodeClccon as CLCMode) {
-            case "AND-OR":
-                drawAndOr();
-                break;
-            case "OR-XOR":
-                drawOrXor();
-                break;
-            case "4-input AND":
-                draw4InputAnd();
-                break;
-            case "SR latch":
-                drawSRLatch();
-                break;
-            case "1-input D flip-flop with S and R":
-                drawDFlop();
-                break;
-            case "2-input D flip-flop with R":
-                drawOrDLatch();
-                break;
-            case "JK flip-flop with R":
-                drawJKFlop();
-                break;
-            case "1-input transparent latch with S and R":
-                drawDLatch();
-                break;
-        }
-
-        c.stroke();
-
-        function drawAndOr(): void {
-            c.translate(561, 43);
-
-            const srGate1: ALogicGate = new AndGate(100, 200);
-            const srGate2: ALogicGate = new AndGate(100, 312);
-            const srGate3: ALogicGate = new OrGate(300, 257);
-
-            srGate1.draw(c);
-            srGate2.draw(c);
-            srGate3.draw(c);
-
-            srGate3.drawGateInput(c, 1, 200);
-            line(200, srGate3.getYInput1(), 200, srGate1.getYOutput());
-            line(200, srGate1.getYOutput(), srGate1.getXOutput(), srGate1.getYOutput());
-
-            srGate3.drawGateInput(c, 4, 200);
-            line(200, srGate3.getYInput4(), 200, srGate2.getYOutput());
-            line(200, srGate2.getYOutput(), srGate2.getXOutput(), srGate2.getYOutput());
-
-            // Output connection
-            line(
-                srGate3.getXOutput(),
-                srGate3.getYOutput(),
-                srGate3.getXOutput() + 50,
-                srGate3.getYOutput(),
-            );
-
-            // 4 inputs
-            line(0, 107, 20, 107);
-            line(20, 107, 20, srGate1.getYInput1());
-            line(20, srGate1.getYInput1(), srGate1.getXInput1(), srGate1.getYInput1());
-
-            line(0, 207, 20, 207);
-            line(20, 207, 20, srGate1.getYInput4());
-            line(20, srGate1.getYInput4(), srGate1.getXInput4(), srGate1.getYInput4());
-
-            line(0, 307, 20, 307);
-            line(20, 307, 20, srGate2.getYInput1());
-            line(20, srGate2.getYInput1(), srGate2.getXInput1(), srGate2.getYInput1());
-
-            line(0, 407, 20, 407);
-            line(20, 407, 20, srGate2.getYInput4());
-            line(20, srGate2.getYInput4(), srGate2.getXInput4(), srGate2.getYInput4());
-        }
-
-        function drawOrXor(): void {
-            c.translate(561, 43);
-
-            const srGate1: ALogicGate = new OrGate(100, 200);
-            const srGate2: ALogicGate = new OrGate(100, 312);
-            const srGate3: ALogicGate = new XorGate(300, 257);
-
-            srGate1.draw(c);
-            srGate2.draw(c);
-            srGate3.draw(c);
-
-            srGate3.drawGateInput(c, 1, 200);
-            line(200, srGate3.getYInput1(), 200, srGate1.getYOutput());
-            line(200, srGate1.getYOutput(), srGate1.getXOutput(), srGate1.getYOutput());
-
-            srGate3.drawGateInput(c, 4, 200);
-            line(200, srGate3.getYInput4(), 200, srGate2.getYOutput());
-            line(200, srGate2.getYOutput(), srGate2.getXOutput(), srGate2.getYOutput());
-
-            // Output connection
-            line(
-                srGate3.getXOutput(),
-                srGate3.getYOutput(),
-                srGate3.getXOutput() + 50,
-                srGate3.getYOutput(),
-            );
-
-            // 4 inputs
-            line(0, 107, 20, 107);
-            line(20, 107, 20, srGate1.getYInput1());
-            line(20, srGate1.getYInput1(), srGate1.getXInput1(), srGate1.getYInput1());
-
-            line(0, 207, 20, 207);
-            line(20, 207, 20, srGate1.getYInput4());
-            line(20, srGate1.getYInput4(), srGate1.getXInput4(), srGate1.getYInput4());
-
-            line(0, 307, 20, 307);
-            line(20, 307, 20, srGate2.getYInput1());
-            line(20, srGate2.getYInput1(), srGate2.getXInput1(), srGate2.getYInput1());
-
-            line(0, 407, 20, 407);
-            line(20, 407, 20, srGate2.getYInput4());
-            line(20, srGate2.getYInput4(), srGate2.getXInput4(), srGate2.getYInput4());
-        }
-
-        function draw4InputAnd(): void {
-            c.translate(561, 43);
-
-            const gate: ALogicGate = new AndGate(300, 257);
-
-            gate.draw(c);
-
-            // Output connection
-            line(
-                gate.getXOutput(),
-                gate.getYOutput(),
-                gate.getXOutput() + 50,
-                gate.getYOutput(),
-            );
-
-            // 4 inputs
-            line(0, 107, 170, 107);
-            line(170, 107, 170, gate.getYInput1());
-            line(170, gate.getYInput1(), gate.getXInput1(), gate.getYInput1());
-
-            line(0, 207, 120, 207);
-            line(120, 207, 120, gate.getYInput2());
-            line(120, gate.getYInput2(), gate.getXInput2(), gate.getYInput2());
-
-            line(0, 307, 120, 307);
-            line(120, 307, 120, gate.getYInput3());
-            line(120, gate.getYInput3(), gate.getXInput3(), gate.getYInput3());
-
-            line(0, 407, 170, 407);
-            line(170, 407, 170, gate.getYInput4());
-            line(170, gate.getYInput4(), gate.getXInput4(), gate.getYInput4());
-        }
-
-        function drawSRLatch(): void {
-            c.translate(561, 43);
-
-            const g1: ALogicGate = new OrGate(100, 200);
-            const g2: ALogicGate = new OrGate(100, 312);
-            const sr: Latch = new Latch({
-                x: 220,
-                y: 160,
-                textLeftTop: "S",
-                textLeftBottom: "R",
-                textRightTop: "Q",
-            });
-
-            g1.draw(c);
-            g2.draw(c);
-            sr.draw(c);
-
-            // 4 inputs
-            line(0, 107, 20, 107);
-            line(20, 107, 20, g1.getYInput1());
-            line(20, g1.getYInput1(), g1.getXInput1(), g1.getYInput1());
-
-            line(0, 207, 20, 207);
-            line(20, 207, 20, g1.getYInput4());
-            line(20, g1.getYInput4(), g1.getXInput4(), g1.getYInput4());
-
-            line(0, 307, 20, 307);
-            line(20, 307, 20, g2.getYInput1());
-            line(20, g2.getYInput1(), g2.getXInput1(), g2.getYInput1());
-
-            line(0, 407, 20, 407);
-            line(20, 407, 20, g2.getYInput4());
-            line(20, g2.getYInput4(), g2.getXInput4(), g2.getYInput4());
-
-            //  Latch Inputs
-            line(g1.getXOutput(), g1.getYOutput(), sr.getXInput1(), sr.getYInput1());
-            line(g2.getXOutput(), g2.getYOutput(), sr.getXInput2(), sr.getYInput2());
-
-            // Latch Output
-            line(350, 200, 388, 200);
-            line(388, 200, 388, 257);
-        }
-
-        function drawDFlop(): void {
-            c.translate(561, 43);
-            const df: Latch = new Latch({
-                x: 150,
-                y: 167,
-                textLeftTop: "D",
-                textTop: "S",
-                textBottom: "R",
-                textRightTop: "Q",
-            });
-
-            df.draw(c);
-
-            // 4 inputs
-            line(0, 107, 100, 107);
-            line(100, 107, 100, df.getYInput2());
-            line(100, df.getYInput2(), df.getXInput2(), df.getYInput2());
-
-            line(0, 207, 100, 207);
-            line(100, 207, 100, df.getYInput1());
-            line(100, df.getYInput1(), df.getXInput2(), df.getYInput1());
-
-            line(0, 307, 51, 307);
-            line(51, 307, 51, 380);
-            line(51, 380, df.getXInput3(), 380);
-            line(df.getXInput3(), 380, df.getXInput3(), df.getYInput3());
-
-            line(0, 407, 2, 407);
-            line(2, 407, 2, 137);
-            line(2, 137, df.getXInput4(), 137);
-            line(df.getXInput4(), 137, df.getXInput4(), df.getYInput4());
-
-            // Draw Clock Input
-            line(
-                df.getXInput2(),
-                df.getYInput2() - 10,
-                df.getXInput2() + 20,
-                df.getYInput2(),
-            );
-            line(
-                df.getXInput2(),
-                df.getYInput2() + 10,
-                df.getXInput2() + 20,
-                df.getYInput2(),
-            );
-
-            // Latch Output
-            line(df.getXOutput1(), df.getYOutput1(), 388, df.getYOutput1());
-            line(388, df.getYOutput1(), 388, 257);
-        }
-
-        function drawOrDLatch(): void {
-            c.translate(561, 43);
-
-            const df: Latch = new Latch({
-                x: 220,
-                y: 160,
-                textLeftTop: "D",
-                textBottom: "R",
-                textRightTop: "Q",
-            });
-            const g1: ALogicGate = new OrGate(100, df.getYInput1());
-
-            g1.draw(c);
-            df.draw(c);
-
-            // 4 inputs
-            line(0, 107, 195, 107);
-            line(195, 107, 195, df.getYInput2());
-            line(195, df.getYInput2(), df.getXInput2(), df.getYInput2());
-
-            line(0, 207, 2, 207);
-            line(2, 207, 2, g1.getYInput1());
-            line(2, g1.getYInput1(), g1.getXInput1(), g1.getYInput1());
-
-            line(0, 307, 100, 307);
-            line(100, 307, 100, df.getYInput3() + 50);
-            line(100, df.getYInput3() + 50, df.getXInput3(), df.getYInput3() + 50);
-            line(df.getXInput3(), df.getYInput3() + 50, df.getXInput3(), df.getYInput3());
-
-            line(0, 407, 35, 407);
-            line(35, 407, 35, g1.getYInput4());
-            line(35, g1.getYInput4(), g1.getXInput4(), g1.getYInput4());
-
-            // Draw Clock Input
-            line(
-                df.getXInput2(),
-                df.getYInput2() - 10,
-                df.getXInput2() + 20,
-                df.getYInput2(),
-            );
-            line(
-                df.getXInput2(),
-                df.getYInput2() + 10,
-                df.getXInput2() + 20,
-                df.getYInput2(),
-            );
-
-            //  Latch Inputs
-            line(g1.getXOutput(), g1.getYOutput(), df.getXInput1(), df.getYInput1());
-
-            // Latch Output
-            line(df.getXOutput1(), df.getYOutput1(), 388, df.getYOutput1());
-            line(388, df.getYOutput1(), 388, 257);
-        }
-
-        function drawJKFlop(): void {
-            c.translate(561, 43);
-
-            const jk: Latch = new Latch({
-                x: 150,
-                y: 167,
-                textLeftTop: "J",
-                textLeftBottom: "K",
-                textRightTop: "Q",
-                textBottom: "R",
-            });
-
-            jk.draw(c);
-
-            // 4 inputs
-            line(0, 107, 100, 107);
-            line(100, 107, 100, 262);
-            line(100, 262, jk.getXInput2(), 262);
-
-            line(0, 207, 100, 207);
-            line(100, 207, 100, jk.getYInput1());
-            line(100, jk.getYInput1(), jk.getXInput2(), jk.getYInput1());
-
-            line(0, 307, 51, 307);
-            line(51, 307, 51, 380);
-            line(51, 380, jk.getXInput3(), 380);
-            line(jk.getXInput3(), 380, jk.getXInput3(), jk.getYInput3());
-
-            line(0, 407, 100, 407);
-            line(100, 407, 100, jk.getYInput2());
-            line(100, jk.getYInput2(), jk.getXInput2(), jk.getYInput2());
-
-            // Draw Clock Input
-            line(jk.getXInput2(), 262 - 10, jk.getXInput2() + 20, 262);
-            line(jk.getXInput2(), 262 + 10, jk.getXInput2() + 20, 262);
-
-            // Latch Output
-            line(jk.getXOutput1(), jk.getYOutput1(), 388, jk.getYOutput1());
-            line(388, jk.getYOutput1(), 388, 257);
-        }
-
-        function drawDLatch(): void {
-            c.translate(561, 43);
-
-            const dl: Latch = new Latch({
-                x: 150,
-                y: 167,
-                textLeftTop: "D",
-                textLeftBottom: "LE",
-                textTop: "S",
-                textRightTop: "Q",
-                textBottom: "R",
-            });
-
-            dl.draw(c);
-
-            // 4 inputs
-            line(0, 107, 100, 107);
-            line(100, 107, 100, dl.getYInput2());
-            line(100, dl.getYInput2(), dl.getXInput2(), dl.getYInput2());
-
-            line(0, 207, 100, 207);
-            line(100, 207, 100, dl.getYInput1());
-            line(100, dl.getYInput1(), dl.getXInput2(), dl.getYInput1());
-
-            line(0, 307, 51, 307);
-            line(51, 307, 51, 380);
-            line(51, 380, dl.getXInput3(), 380);
-            line(dl.getXInput3(), 380, dl.getXInput3(), dl.getYInput3());
-
-            line(0, 407, 2, 407);
-            line(2, 407, 2, 137);
-            line(2, 137, dl.getXInput4(), 137);
-            line(dl.getXInput4(), 137, dl.getXInput4(), dl.getYInput4());
-
-            // Latch Output
-            line(dl.getXOutput1(), dl.getYOutput1(), 388, dl.getYOutput1());
-            line(388, dl.getYOutput1(), 388, 257);
-        }
-    }
-
-    render(): JSX.Element {
-        // eslint-disable-next-line react/no-string-refs
-        return <div className="graph-container" ref="divGraph" />;
-    }
-}