From 9f40738e1247d4a5aa950630dd1946a325c00ef8 Mon Sep 17 00:00:00 2001
From: Josh Varga <Josh.Varga@gmail.com>
Date: Wed, 24 Jul 2024 00:14:45 -0500
Subject: [PATCH] Moving simulationArea and backgroundArea to Typescript (#335)

---
 .../DialogBox/CombinationalAnalysis.vue       |  2 +-
 src/components/DialogBox/InsertSubcircuit.vue |  2 +-
 .../Panels/ElementsPanel/ElementsPanel.vue    |  2 +-
 .../ProjectProperty/ProjectProperty.vue       |  2 +-
 .../PropertiesPanel/PropertiesPanel.vue       |  2 +-
 src/pages/embed.vue                           |  2 +-
 src/simulator/src/Verilog2CV.js               |  2 +-
 src/simulator/src/backgroundArea.js           | 17 ----
 src/simulator/src/backgroundArea.ts           | 20 ++++
 src/simulator/src/canvasApi.js                |  4 +-
 src/simulator/src/circuit.js                  |  2 +-
 src/simulator/src/circuitElement.js           |  2 +-
 src/simulator/src/data/load.js                |  2 +-
 src/simulator/src/data/save.js                |  4 +-
 src/simulator/src/embed.js                    |  2 +-
 src/simulator/src/embedListeners.js           |  2 +-
 src/simulator/src/engine.js                   |  2 +-
 src/simulator/src/eventQueue.js               |  2 +-
 src/simulator/src/events.js                   |  2 +-
 .../src/hotkey_binder/model/actions.js        |  2 +-
 src/simulator/src/interface/backgroundArea.ts |  6 ++
 src/simulator/src/interface/simulationArea.ts | 38 +++++++
 src/simulator/src/layout/layoutNode.js        |  2 +-
 src/simulator/src/layoutMode.js               |  2 +-
 src/simulator/src/listeners.js                |  2 +-
 src/simulator/src/minimap.js                  |  2 +-
 src/simulator/src/modules.js                  |  2 +-
 src/simulator/src/modules/ALU.js              |  2 +-
 src/simulator/src/modules/Adder.js            |  2 +-
 src/simulator/src/modules/AndGate.js          |  2 +-
 src/simulator/src/modules/Arrow.js            |  2 +-
 src/simulator/src/modules/BitSelector.js      |  2 +-
 src/simulator/src/modules/Buffer.js           |  2 +-
 src/simulator/src/modules/Button.js           |  2 +-
 src/simulator/src/modules/ConstantVal.js      |  2 +-
 .../src/modules/ControlledInverter.js         |  2 +-
 src/simulator/src/modules/Counter.js          |  2 +-
 src/simulator/src/modules/Decoder.js          |  2 +-
 src/simulator/src/modules/Demultiplexer.js    |  2 +-
 src/simulator/src/modules/DigitalLed.js       |  2 +-
 src/simulator/src/modules/Flag.js             |  2 +-
 src/simulator/src/modules/Ground.js           |  2 +-
 src/simulator/src/modules/HexDisplay.js       |  2 +-
 src/simulator/src/modules/ImageAnnotation.js  |  2 +-
 src/simulator/src/modules/Input.js            |  2 +-
 src/simulator/src/modules/LSB.js              |  2 +-
 src/simulator/src/modules/MSB.js              |  2 +-
 src/simulator/src/modules/Multiplexer.js      |  2 +-
 src/simulator/src/modules/NandGate.js         |  2 +-
 src/simulator/src/modules/NorGate.js          |  2 +-
 src/simulator/src/modules/NotGate.js          |  2 +-
 src/simulator/src/modules/OrGate.js           |  2 +-
 src/simulator/src/modules/Output.js           |  2 +-
 src/simulator/src/modules/Power.js            |  2 +-
 src/simulator/src/modules/PriorityEncoder.js  |  2 +-
 src/simulator/src/modules/RGBLed.js           |  2 +-
 src/simulator/src/modules/RGBLedMatrix.js     |  2 +-
 src/simulator/src/modules/Random.js           |  2 +-
 src/simulator/src/modules/Rectangle.js        |  2 +-
 src/simulator/src/modules/SevenSegDisplay.js  |  2 +-
 .../src/modules/SixteenSegDisplay.js          |  2 +-
 src/simulator/src/modules/Splitter.js         |  2 +-
 src/simulator/src/modules/SquareRGBLed.js     |  2 +-
 src/simulator/src/modules/Stepper.js          |  2 +-
 src/simulator/src/modules/Text.js             |  2 +-
 src/simulator/src/modules/TriState.js         |  2 +-
 src/simulator/src/modules/Tunnel.js           |  2 +-
 src/simulator/src/modules/TwoComplement.js    |  2 +-
 src/simulator/src/modules/VariableLed.js      |  2 +-
 src/simulator/src/modules/XnorGate.js         |  2 +-
 src/simulator/src/modules/XorGate.js          |  2 +-
 src/simulator/src/modules/verilogDivider.js   |  2 +-
 .../src/modules/verilogMultiplier.js          |  2 +-
 src/simulator/src/modules/verilogPower.js     |  2 +-
 src/simulator/src/modules/verilogShiftLeft.js |  2 +-
 .../src/modules/verilogShiftRight.js          |  2 +-
 src/simulator/src/node.js                     |  2 +-
 src/simulator/src/plotArea.js                 |  2 +-
 src/simulator/src/sequential.js               | 17 +---
 src/simulator/src/sequential/Clock.js         |  2 +-
 src/simulator/src/sequential/DflipFlop.js     |  2 +-
 src/simulator/src/sequential/Dlatch.js        |  2 +-
 src/simulator/src/sequential/ForceGate.js     |  2 +-
 src/simulator/src/sequential/JKflipFlop.js    |  2 +-
 src/simulator/src/sequential/Keyboard.js      |  2 +-
 src/simulator/src/sequential/RAM.js           |  2 +-
 src/simulator/src/sequential/Rom.js           |  2 +-
 src/simulator/src/sequential/SRflipFlop.js    |  2 +-
 src/simulator/src/sequential/TTY.js           |  2 +-
 src/simulator/src/sequential/TflipFlop.js     |  2 +-
 src/simulator/src/sequential/verilogRAM.js    |  2 +-
 src/simulator/src/setup.js                    |  4 +-
 src/simulator/src/simulationArea.js           | 99 -------------------
 src/simulator/src/simulationArea.ts           | 69 +++++++++++++
 src/simulator/src/subcircuit.js               |  2 +-
 src/simulator/src/testbench/ForceGate.js      |  2 +-
 src/simulator/src/testbench/testbenchInput.js |  2 +-
 .../src/testbench/testbenchOutput.js          |  2 +-
 src/simulator/src/utils.js                    |  2 +-
 src/simulator/src/ux.js                       |  2 +-
 src/simulator/src/wire.js                     |  2 +-
 101 files changed, 231 insertions(+), 229 deletions(-)
 delete mode 100644 src/simulator/src/backgroundArea.js
 create mode 100644 src/simulator/src/backgroundArea.ts
 create mode 100644 src/simulator/src/interface/backgroundArea.ts
 create mode 100644 src/simulator/src/interface/simulationArea.ts
 delete mode 100644 src/simulator/src/simulationArea.js
 create mode 100644 src/simulator/src/simulationArea.ts

diff --git a/src/components/DialogBox/CombinationalAnalysis.vue b/src/components/DialogBox/CombinationalAnalysis.vue
index 3b4092a8..142d19b9 100644
--- a/src/components/DialogBox/CombinationalAnalysis.vue
+++ b/src/components/DialogBox/CombinationalAnalysis.vue
@@ -35,7 +35,7 @@ import Output from '#/simulator/src/modules/Output'
 import AndGate from '#/simulator/src/modules/AndGate'
 import OrGate from '#/simulator/src/modules/OrGate'
 import NotGate from '#/simulator/src/modules/NotGate'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { findDimensions } from '#/simulator/src/canvasApi'
 import { confirmSingleOption } from '../helpers/confirmComponent/ConfirmComponent.vue'
 
diff --git a/src/components/DialogBox/InsertSubcircuit.vue b/src/components/DialogBox/InsertSubcircuit.vue
index f2c1b1a6..c0e35d7e 100644
--- a/src/components/DialogBox/InsertSubcircuit.vue
+++ b/src/components/DialogBox/InsertSubcircuit.vue
@@ -66,7 +66,7 @@ import { onMounted, onUpdated, ref } from '@vue/runtime-core'
 import { useState } from '#/store/SimulatorStore/state'
 import { createNewCircuitScope, scopeList } from '#/simulator/src/circuit'
 import SubCircuit from '#/simulator/src/subcircuit'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 const SimulatorState = useState()
 const flag = ref(true)
 onMounted(() => {
diff --git a/src/components/Panels/ElementsPanel/ElementsPanel.vue b/src/components/Panels/ElementsPanel/ElementsPanel.vue
index e5c52896..89c3cf9f 100644
--- a/src/components/Panels/ElementsPanel/ElementsPanel.vue
+++ b/src/components/Panels/ElementsPanel/ElementsPanel.vue
@@ -142,7 +142,7 @@
 <script lang="ts" setup>
 import PanelHeader from '../Shared/PanelHeader.vue'
 import metadata from '#/simulator/src/metadata.json'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { uxvar } from '#/simulator/src/ux'
 import modules from '#/simulator/src/modules'
 import { onBeforeMount, ref } from 'vue'
diff --git a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
index 1fc88e1f..c972457a 100644
--- a/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
+++ b/src/components/Panels/PropertiesPanel/ModuleProperty/ProjectProperty/ProjectProperty.vue
@@ -96,7 +96,7 @@ import { toggleLayoutMode } from '#/simulator/src/layoutMode'
 //     scopeList,
 // } from '#/simulator/src/circuit'
 // import { showMessage } from '#/simulator/src/utils'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import InputGroups from '#/components/Panels/Shared/InputGroups.vue'
 // import MessageBox from '#/components/MessageBox/messageBox.vue'
 // import { ref, Ref, onMounted, watch } from 'vue'
diff --git a/src/components/Panels/PropertiesPanel/PropertiesPanel.vue b/src/components/Panels/PropertiesPanel/PropertiesPanel.vue
index ab56193a..867720cb 100644
--- a/src/components/Panels/PropertiesPanel/PropertiesPanel.vue
+++ b/src/components/Panels/PropertiesPanel/PropertiesPanel.vue
@@ -12,7 +12,7 @@
 import ModuleProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue'
 import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue'
 import { ref, toRaw, onMounted } from 'vue'
-import simulationArea from '#/simulator/src/simulationArea'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { checkPropertiesUpdate, prevPropertyObjSet } from '#/simulator/src/ux'
 import { layoutModeGet } from '#/simulator/src/layoutMode'
 
diff --git a/src/pages/embed.vue b/src/pages/embed.vue
index 512ba7d6..979f2ad2 100644
--- a/src/pages/embed.vue
+++ b/src/pages/embed.vue
@@ -165,7 +165,7 @@
 <script lang="ts" setup>
 import { ref, onBeforeMount, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
-import simulationArea, { changeClockTime } from '#/simulator/src/simulationArea'
+import { simulationArea, changeClockTime } from '#/simulator/src/simulationArea'
 import {
     scheduleUpdate,
     updateCanvasSet,
diff --git a/src/simulator/src/Verilog2CV.js b/src/simulator/src/Verilog2CV.js
index 83e7641e..dca56483 100644
--- a/src/simulator/src/Verilog2CV.js
+++ b/src/simulator/src/Verilog2CV.js
@@ -4,7 +4,7 @@ import {
     changeCircuitName,
 } from './circuit'
 import SubCircuit from './subcircuit'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import CodeMirror from 'codemirror/lib/codemirror.js'
 import 'codemirror/lib/codemirror.css'
 
diff --git a/src/simulator/src/backgroundArea.js b/src/simulator/src/backgroundArea.js
deleted file mode 100644
index 49da21aa..00000000
--- a/src/simulator/src/backgroundArea.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { dots } from './canvasApi'
-
-var backgroundArea
-export default backgroundArea = {
-    canvas: document.getElementById('backgroundArea'),
-    setup() {
-        this.canvas = document.getElementById('backgroundArea')
-        this.canvas.width = width
-        this.canvas.height = height
-        this.context = this.canvas.getContext('2d')
-        dots(true, false)
-    },
-    clear() {
-        if (!this.context) return
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-    },
-}
diff --git a/src/simulator/src/backgroundArea.ts b/src/simulator/src/backgroundArea.ts
new file mode 100644
index 00000000..7556b0f8
--- /dev/null
+++ b/src/simulator/src/backgroundArea.ts
@@ -0,0 +1,20 @@
+import { BackgroundArea } from './interface/backgroundArea'
+import { dots } from './canvasApi';
+
+export const backgroundArea: BackgroundArea = {
+    canvas: null,
+    context: null,
+    setup() {
+        this.canvas = document.getElementById('backgroundArea') as HTMLCanvasElement;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.context = this.canvas.getContext('2d');
+        dots(true, false);
+    },
+    clear() {
+        if (!this.context || !this.canvas) {
+            return;
+        }
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+};
diff --git a/src/simulator/src/canvasApi.js b/src/simulator/src/canvasApi.js
index 08ee65d3..eee60606 100644
--- a/src/simulator/src/canvasApi.js
+++ b/src/simulator/src/canvasApi.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-param-reassign */
-import backgroundArea from './backgroundArea'
-import simulationArea from './simulationArea'
+import { backgroundArea } from './backgroundArea'
+import { simulationArea } from './simulationArea'
 import miniMapArea, { removeMiniMap, updatelastMinimapShown } from './minimap'
 import { colors } from './themer/themer'
 
diff --git a/src/simulator/src/circuit.js b/src/simulator/src/circuit.js
index 5245638c..38a87d78 100644
--- a/src/simulator/src/circuit.js
+++ b/src/simulator/src/circuit.js
@@ -11,7 +11,7 @@
 /* eslint-disable no-alert */
 import CircuitElement from './circuitElement'
 import plotArea from './plotArea'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     stripTags,
     uniq,
diff --git a/src/simulator/src/circuitElement.js b/src/simulator/src/circuitElement.js
index cd368c4d..7228178a 100644
--- a/src/simulator/src/circuitElement.js
+++ b/src/simulator/src/circuitElement.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-multi-assign */
 /* eslint-disable no-bitwise */
 import { scheduleUpdate } from './engine'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     fixDirection,
     fillText,
diff --git a/src/simulator/src/data/load.js b/src/simulator/src/data/load.js
index f9d7b89b..24c1688c 100644
--- a/src/simulator/src/data/load.js
+++ b/src/simulator/src/data/load.js
@@ -8,7 +8,7 @@ import {
     gridUpdateSet,
 } from '../engine'
 import { updateRestrictedElementsInScope } from '../restrictedElementDiv'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 import { loadSubCircuit } from '../subcircuit'
 import { scheduleBackup } from './backupCircuit'
diff --git a/src/simulator/src/data/save.js b/src/simulator/src/data/save.js
index 3ffb7788..281263e9 100644
--- a/src/simulator/src/data/save.js
+++ b/src/simulator/src/data/save.js
@@ -3,8 +3,8 @@ import { resetup } from '../setup'
 import { update } from '../engine'
 import { stripTags, showMessage } from '../utils'
 import { backUp } from './backupCircuit'
-import simulationArea from '../simulationArea'
-import backgroundArea from '../backgroundArea'
+import { simulationArea } from '../simulationArea'
+import { backgroundArea } from '../backgroundArea'
 import { findDimensions } from '../canvasApi'
 import { projectSavedSet } from './project'
 import { colors } from '../themer/themer'
diff --git a/src/simulator/src/embed.js b/src/simulator/src/embed.js
index b17e82ba..f1a103ec 100644
--- a/src/simulator/src/embed.js
+++ b/src/simulator/src/embed.js
@@ -1,7 +1,7 @@
 // /* eslint-disable import/no-cycle */
 // // Helper functions for when circuit is embedded
 // import { scopeList, circuitProperty } from './circuit'
-// import simulationArea from './simulationArea'
+// import { simulationArea } from './simulationArea'
 // import {
 //     scheduleUpdate,
 //     wireToBeCheckedSet,
diff --git a/src/simulator/src/embedListeners.js b/src/simulator/src/embedListeners.js
index c7ba071a..cce262cb 100644
--- a/src/simulator/src/embedListeners.js
+++ b/src/simulator/src/embedListeners.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 // Listeners when circuit is embedded
 // Refer listeners.js
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     scheduleUpdate,
     update,
diff --git a/src/simulator/src/engine.js b/src/simulator/src/engine.js
index 2f74df6e..c21f0ddd 100644
--- a/src/simulator/src/engine.js
+++ b/src/simulator/src/engine.js
@@ -5,7 +5,7 @@
 /* eslint-disable no-bitwise */
 import { layoutModeGet, layoutUpdate } from './layoutMode'
 import plotArea from './plotArea'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { dots, canvasMessage, findDimensions, rect2 } from './canvasApi'
 import { showProperties, prevPropertyObjGet } from './ux'
 import { showError } from './utils'
diff --git a/src/simulator/src/eventQueue.js b/src/simulator/src/eventQueue.js
index 28a6dab0..a99cbfa9 100644
--- a/src/simulator/src/eventQueue.js
+++ b/src/simulator/src/eventQueue.js
@@ -2,7 +2,7 @@
  * Event Queue is simply a priority Queue, basic implementation O(n^2).
  * @category eventQueue
  */
-export default class EventQueue {
+export class EventQueue {
     constructor(size) {
         this.size = size
         this.queue = new Array(size)
diff --git a/src/simulator/src/events.js b/src/simulator/src/events.js
index 8ee6e8f6..711d1f69 100644
--- a/src/simulator/src/events.js
+++ b/src/simulator/src/events.js
@@ -11,7 +11,7 @@ import {
 import { backUp } from './data/backupCircuit'
 import { getNextPosition } from './modules'
 import { generateId } from './utils'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { TestbenchData } from './testbench'
 
 /**
diff --git a/src/simulator/src/hotkey_binder/model/actions.js b/src/simulator/src/hotkey_binder/model/actions.js
index 9f992f36..42e886a0 100644
--- a/src/simulator/src/hotkey_binder/model/actions.js
+++ b/src/simulator/src/hotkey_binder/model/actions.js
@@ -1,7 +1,7 @@
 import { defaultKeys } from '../defaultKeys'
 import { addShortcut } from './addShortcut'
 import { updateHTML } from '../view/panel.ui'
-import simulationArea from '../../simulationArea'
+import { simulationArea } from '../../simulationArea'
 import {
     scheduleUpdate,
     wireToBeCheckedSet,
diff --git a/src/simulator/src/interface/backgroundArea.ts b/src/simulator/src/interface/backgroundArea.ts
new file mode 100644
index 00000000..e4d08e13
--- /dev/null
+++ b/src/simulator/src/interface/backgroundArea.ts
@@ -0,0 +1,6 @@
+export interface BackgroundArea {
+    canvas: HTMLCanvasElement | null;
+    context: CanvasRenderingContext2D | null;
+    setup(): void;
+    clear(): void;
+}
\ No newline at end of file
diff --git a/src/simulator/src/interface/simulationArea.ts b/src/simulator/src/interface/simulationArea.ts
new file mode 100644
index 00000000..bf153a3f
--- /dev/null
+++ b/src/simulator/src/interface/simulationArea.ts
@@ -0,0 +1,38 @@
+import { EventQueue } from '../eventQueue'
+export interface SimulationArea {
+    canvas: HTMLCanvasElement;
+    context: CanvasRenderingContext2D|null;
+    selected: boolean;
+    hover: boolean;
+    clockState: number;
+    clockEnabled: boolean;
+    // TODO: make this CircuitElement|null once converted to typescript
+    lastSelected: any|null;
+    stack: any[];
+    prevScale: number;
+    oldx: number;
+    oldy: number;
+    objectList: any[];
+    maxHeight: number;
+    maxWidth: number;
+    minHeight: number;
+    minWidth: number;
+    multipleObjectSelections: any[];
+    copyList: any[];
+    shiftDown: boolean;
+    controlDown: boolean;
+    timePeriod: number;
+    mouseX: number;
+    mouseY: number;
+    mouseDownX: number;
+    mouseDownY: number;
+    simulationQueue: EventQueue;
+    clickCount: number;
+    lock: string;
+    mouseDown: boolean;
+    ClockInterval: NodeJS.Timeout|null;
+    timer: () => void;
+    setup: () => void;
+    changeClockTime: (t: number) => void;
+    clear: () => void;
+}
\ No newline at end of file
diff --git a/src/simulator/src/layout/layoutNode.js b/src/simulator/src/layout/layoutNode.js
index ddf199b3..e5eac8dd 100644
--- a/src/simulator/src/layout/layoutNode.js
+++ b/src/simulator/src/layout/layoutNode.js
@@ -1,5 +1,5 @@
 import { drawCircle } from '../canvasApi'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { tempBuffer } from '../layoutMode'
 
 /**
diff --git a/src/simulator/src/layoutMode.js b/src/simulator/src/layoutMode.js
index df3285f7..b30b9fec 100644
--- a/src/simulator/src/layoutMode.js
+++ b/src/simulator/src/layoutMode.js
@@ -2,7 +2,7 @@
 /* eslint-disable no-continue */
 import { dots, correctWidth, fillText, rect2 } from './canvasApi'
 import LayoutBuffer from './layout/layoutBuffer'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     fillSubcircuitElements,
     prevPropertyObjGet,
diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index fb02b8c7..35e4e512 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -5,7 +5,7 @@ import {
     layoutUpdate,
     // setupLayoutModePanelListeners,
 } from './layoutMode'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     scheduleUpdate,
     update,
diff --git a/src/simulator/src/minimap.js b/src/simulator/src/minimap.js
index 6cfcf49d..dca0c406 100644
--- a/src/simulator/src/minimap.js
+++ b/src/simulator/src/minimap.js
@@ -1,4 +1,4 @@
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { colors } from './themer/themer'
 import { layoutModeGet } from './layoutMode'
 
diff --git a/src/simulator/src/modules.js b/src/simulator/src/modules.js
index 41bacb6f..f52adb3b 100644
--- a/src/simulator/src/modules.js
+++ b/src/simulator/src/modules.js
@@ -1,5 +1,5 @@
 /* eslint-disable import/no-cycle */
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 
 export function getNextPosition(x = 0, scope = globalScope) {
     let possibleY = 20
diff --git a/src/simulator/src/modules/ALU.js b/src/simulator/src/modules/ALU.js
index 19cda667..e8b65597 100644
--- a/src/simulator/src/modules/ALU.js
+++ b/src/simulator/src/modules/ALU.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText4 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/Adder.js b/src/simulator/src/modules/Adder.js
index 8f369a9f..205455b1 100644
--- a/src/simulator/src/modules/Adder.js
+++ b/src/simulator/src/modules/Adder.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/AndGate.js b/src/simulator/src/modules/AndGate.js
index 43c3fced..a8a6472a 100644
--- a/src/simulator/src/modules/AndGate.js
+++ b/src/simulator/src/modules/AndGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, arc } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { colors } from '../themer/themer'
diff --git a/src/simulator/src/modules/Arrow.js b/src/simulator/src/modules/Arrow.js
index 6d93a787..f0ec3204 100644
--- a/src/simulator/src/modules/Arrow.js
+++ b/src/simulator/src/modules/Arrow.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/BitSelector.js b/src/simulator/src/modules/BitSelector.js
index 8c91cee4..e5e1a1d6 100644
--- a/src/simulator/src/modules/BitSelector.js
+++ b/src/simulator/src/modules/BitSelector.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, extractBits } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Buffer.js b/src/simulator/src/modules/Buffer.js
index e287a6b2..e3011fa4 100644
--- a/src/simulator/src/modules/Buffer.js
+++ b/src/simulator/src/modules/Buffer.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Button.js b/src/simulator/src/modules/Button.js
index b108afaa..30110f07 100644
--- a/src/simulator/src/modules/Button.js
+++ b/src/simulator/src/modules/Button.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2 } from '../canvasApi'
 
 /**
diff --git a/src/simulator/src/modules/ConstantVal.js b/src/simulator/src/modules/ConstantVal.js
index d5f9028a..78329d56 100644
--- a/src/simulator/src/modules/ConstantVal.js
+++ b/src/simulator/src/modules/ConstantVal.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText, oppositeDirection } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/ControlledInverter.js b/src/simulator/src/modules/ControlledInverter.js
index dd843b75..a5e63d24 100644
--- a/src/simulator/src/modules/ControlledInverter.js
+++ b/src/simulator/src/modules/ControlledInverter.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Counter.js b/src/simulator/src/modules/Counter.js
index 7ffb23fc..10cc041f 100644
--- a/src/simulator/src/modules/Counter.js
+++ b/src/simulator/src/modules/Counter.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { lineTo, moveTo, fillText, correctWidth, rect2 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/Decoder.js b/src/simulator/src/modules/Decoder.js
index aa70719e..d1524e8e 100644
--- a/src/simulator/src/modules/Decoder.js
+++ b/src/simulator/src/modules/Decoder.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Demultiplexer.js b/src/simulator/src/modules/Demultiplexer.js
index feb21cfa..ecca8c6d 100644
--- a/src/simulator/src/modules/Demultiplexer.js
+++ b/src/simulator/src/modules/Demultiplexer.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/DigitalLed.js b/src/simulator/src/modules/DigitalLed.js
index 0a500ac3..9ed1ad7c 100644
--- a/src/simulator/src/modules/DigitalLed.js
+++ b/src/simulator/src/modules/DigitalLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     lineTo,
diff --git a/src/simulator/src/modules/Flag.js b/src/simulator/src/modules/Flag.js
index bb831022..31886de9 100644
--- a/src/simulator/src/modules/Flag.js
+++ b/src/simulator/src/modules/Flag.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText } from '../canvasApi'
 import plotArea from '../plotArea'
 /**
diff --git a/src/simulator/src/modules/Ground.js b/src/simulator/src/modules/Ground.js
index 704e3531..9677f525 100644
--- a/src/simulator/src/modules/Ground.js
+++ b/src/simulator/src/modules/Ground.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/HexDisplay.js b/src/simulator/src/modules/HexDisplay.js
index 77431ea0..b8e06a6a 100644
--- a/src/simulator/src/modules/HexDisplay.js
+++ b/src/simulator/src/modules/HexDisplay.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     lineTo,
diff --git a/src/simulator/src/modules/ImageAnnotation.js b/src/simulator/src/modules/ImageAnnotation.js
index 4273227a..838406d4 100644
--- a/src/simulator/src/modules/ImageAnnotation.js
+++ b/src/simulator/src/modules/ImageAnnotation.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText, drawImage } from '../canvasApi'
 import { colors } from '../themer/themer'
 import { promptFile, showMessage } from '../utils'
diff --git a/src/simulator/src/modules/Input.js b/src/simulator/src/modules/Input.js
index a7569e8c..d6ac8dd2 100644
--- a/src/simulator/src/modules/Input.js
+++ b/src/simulator/src/modules/Input.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-expressions */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, oppositeDirection, fillText } from '../canvasApi'
 import { getNextPosition } from '../modules'
 import { generateId } from '../utils'
diff --git a/src/simulator/src/modules/LSB.js b/src/simulator/src/modules/LSB.js
index 866fc67d..e9f2994b 100644
--- a/src/simulator/src/modules/LSB.js
+++ b/src/simulator/src/modules/LSB.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, dec2bin } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/MSB.js b/src/simulator/src/modules/MSB.js
index 8cbb5bc0..5b915996 100644
--- a/src/simulator/src/modules/MSB.js
+++ b/src/simulator/src/modules/MSB.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, dec2bin } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Multiplexer.js b/src/simulator/src/modules/Multiplexer.js
index 8a389a00..2c358405 100644
--- a/src/simulator/src/modules/Multiplexer.js
+++ b/src/simulator/src/modules/Multiplexer.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/NandGate.js b/src/simulator/src/modules/NandGate.js
index a086fb99..fd829f1a 100644
--- a/src/simulator/src/modules/NandGate.js
+++ b/src/simulator/src/modules/NandGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2, arc } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { gateGenerateVerilog } from '../utils'
diff --git a/src/simulator/src/modules/NorGate.js b/src/simulator/src/modules/NorGate.js
index 44f31244..aa7fde43 100644
--- a/src/simulator/src/modules/NorGate.js
+++ b/src/simulator/src/modules/NorGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { gateGenerateVerilog } from '../utils'
 
 import {
diff --git a/src/simulator/src/modules/NotGate.js b/src/simulator/src/modules/NotGate.js
index e04be86c..506c30f0 100644
--- a/src/simulator/src/modules/NotGate.js
+++ b/src/simulator/src/modules/NotGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/OrGate.js b/src/simulator/src/modules/OrGate.js
index 16835aa2..be5c52b8 100644
--- a/src/simulator/src/modules/OrGate.js
+++ b/src/simulator/src/modules/OrGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, bezierCurveTo, moveTo } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { gateGenerateVerilog } from '../utils'
diff --git a/src/simulator/src/modules/Output.js b/src/simulator/src/modules/Output.js
index 9f028370..775ce0e1 100644
--- a/src/simulator/src/modules/Output.js
+++ b/src/simulator/src/modules/Output.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText, rect2, oppositeDirection } from '../canvasApi'
 import { getNextPosition } from '../modules'
 import { generateId } from '../utils'
diff --git a/src/simulator/src/modules/Power.js b/src/simulator/src/modules/Power.js
index 29228142..dfa4d3c3 100644
--- a/src/simulator/src/modules/Power.js
+++ b/src/simulator/src/modules/Power.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/PriorityEncoder.js b/src/simulator/src/modules/PriorityEncoder.js
index beaa2ab6..245dff9a 100644
--- a/src/simulator/src/modules/PriorityEncoder.js
+++ b/src/simulator/src/modules/PriorityEncoder.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode, dec2bin } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/RGBLed.js b/src/simulator/src/modules/RGBLed.js
index 8487f49e..111c7810 100644
--- a/src/simulator/src/modules/RGBLed.js
+++ b/src/simulator/src/modules/RGBLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, arc, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/RGBLedMatrix.js b/src/simulator/src/modules/RGBLedMatrix.js
index 6720511c..4825b0f6 100644
--- a/src/simulator/src/modules/RGBLedMatrix.js
+++ b/src/simulator/src/modules/RGBLedMatrix.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, rotate, lineTo, moveTo } from '../canvasApi'
 
 /**
diff --git a/src/simulator/src/modules/Random.js b/src/simulator/src/modules/Random.js
index 01c9427b..8363d9a1 100644
--- a/src/simulator/src/modules/Random.js
+++ b/src/simulator/src/modules/Random.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText, lineTo, moveTo, correctWidth, rect2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Rectangle.js b/src/simulator/src/modules/Rectangle.js
index 5b589f47..4d509294 100644
--- a/src/simulator/src/modules/Rectangle.js
+++ b/src/simulator/src/modules/Rectangle.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/SevenSegDisplay.js b/src/simulator/src/modules/SevenSegDisplay.js
index da805d40..ecc7ebbc 100644
--- a/src/simulator/src/modules/SevenSegDisplay.js
+++ b/src/simulator/src/modules/SevenSegDisplay.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     colorToRGBA,
     correctWidth,
diff --git a/src/simulator/src/modules/SixteenSegDisplay.js b/src/simulator/src/modules/SixteenSegDisplay.js
index dc9a046b..cf72abdb 100644
--- a/src/simulator/src/modules/SixteenSegDisplay.js
+++ b/src/simulator/src/modules/SixteenSegDisplay.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     colorToRGBA,
     correctWidth,
diff --git a/src/simulator/src/modules/Splitter.js b/src/simulator/src/modules/Splitter.js
index 86c14d36..92b732fb 100644
--- a/src/simulator/src/modules/Splitter.js
+++ b/src/simulator/src/modules/Splitter.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText2 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/modules/SquareRGBLed.js b/src/simulator/src/modules/SquareRGBLed.js
index bd6acd38..84e2c944 100644
--- a/src/simulator/src/modules/SquareRGBLed.js
+++ b/src/simulator/src/modules/SquareRGBLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, rect2 } from '../canvasApi'
 
 /**
diff --git a/src/simulator/src/modules/Stepper.js b/src/simulator/src/modules/Stepper.js
index f591a251..7b0b0cb1 100644
--- a/src/simulator/src/modules/Stepper.js
+++ b/src/simulator/src/modules/Stepper.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Text.js b/src/simulator/src/modules/Text.js
index ca8196be..c51f1354 100644
--- a/src/simulator/src/modules/Text.js
+++ b/src/simulator/src/modules/Text.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { rect2, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/TriState.js b/src/simulator/src/modules/TriState.js
index 4b62a3f8..bb26a8be 100644
--- a/src/simulator/src/modules/TriState.js
+++ b/src/simulator/src/modules/TriState.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/Tunnel.js b/src/simulator/src/modules/Tunnel.js
index 798ad1d4..2f672a12 100644
--- a/src/simulator/src/modules/Tunnel.js
+++ b/src/simulator/src/modules/Tunnel.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText } from '../canvasApi'
 import plotArea from '../plotArea'
 import { showError } from '../utils'
diff --git a/src/simulator/src/modules/TwoComplement.js b/src/simulator/src/modules/TwoComplement.js
index 6a9f6a7e..686e0eff 100644
--- a/src/simulator/src/modules/TwoComplement.js
+++ b/src/simulator/src/modules/TwoComplement.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText, drawCircle2 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/modules/VariableLed.js b/src/simulator/src/modules/VariableLed.js
index 4c44c9e6..efe9a054 100644
--- a/src/simulator/src/modules/VariableLed.js
+++ b/src/simulator/src/modules/VariableLed.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     lineTo,
diff --git a/src/simulator/src/modules/XnorGate.js b/src/simulator/src/modules/XnorGate.js
index f4a77077..ec9beff7 100644
--- a/src/simulator/src/modules/XnorGate.js
+++ b/src/simulator/src/modules/XnorGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import {
     correctWidth,
     bezierCurveTo,
diff --git a/src/simulator/src/modules/XorGate.js b/src/simulator/src/modules/XorGate.js
index be78cfdd..1c9040cf 100644
--- a/src/simulator/src/modules/XorGate.js
+++ b/src/simulator/src/modules/XorGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, bezierCurveTo, moveTo, arc2 } from '../canvasApi'
 import { changeInputSize } from '../modules'
 import { gateGenerateVerilog } from '../utils'
diff --git a/src/simulator/src/modules/verilogDivider.js b/src/simulator/src/modules/verilogDivider.js
index 4d740f4e..c3421cc8 100644
--- a/src/simulator/src/modules/verilogDivider.js
+++ b/src/simulator/src/modules/verilogDivider.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogMultiplier.js b/src/simulator/src/modules/verilogMultiplier.js
index c8f49c6d..2e3a41db 100644
--- a/src/simulator/src/modules/verilogMultiplier.js
+++ b/src/simulator/src/modules/verilogMultiplier.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogPower.js b/src/simulator/src/modules/verilogPower.js
index 6ec2e464..10f764fa 100644
--- a/src/simulator/src/modules/verilogPower.js
+++ b/src/simulator/src/modules/verilogPower.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogShiftLeft.js b/src/simulator/src/modules/verilogShiftLeft.js
index 92aca634..012fa63f 100644
--- a/src/simulator/src/modules/verilogShiftLeft.js
+++ b/src/simulator/src/modules/verilogShiftLeft.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/modules/verilogShiftRight.js b/src/simulator/src/modules/verilogShiftRight.js
index 2f2c2634..5aad5c23 100644
--- a/src/simulator/src/modules/verilogShiftRight.js
+++ b/src/simulator/src/modules/verilogShiftRight.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-bitwise */
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 
 /**
  * @class
diff --git a/src/simulator/src/node.js b/src/simulator/src/node.js
index 80673ba8..03a37efb 100644
--- a/src/simulator/src/node.js
+++ b/src/simulator/src/node.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-cycle */
 import { drawCircle, drawLine, arc } from './canvasApi'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { distance, showError } from './utils'
 import {
     renderCanvas,
diff --git a/src/simulator/src/plotArea.js b/src/simulator/src/plotArea.js
index b0624384..059dde11 100644
--- a/src/simulator/src/plotArea.js
+++ b/src/simulator/src/plotArea.js
@@ -1,4 +1,4 @@
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { convertors } from './utils'
 
 var DPR = window.devicePixelRatio || 1
diff --git a/src/simulator/src/sequential.js b/src/simulator/src/sequential.js
index bd1740de..46dcd693 100644
--- a/src/simulator/src/sequential.js
+++ b/src/simulator/src/sequential.js
@@ -1,5 +1,5 @@
 import { scheduleUpdate, play, updateCanvasSet } from './engine'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 
 /**
  * a global function as a helper for simulationArea.changeClockEnable
@@ -8,18 +8,3 @@ import simulationArea from './simulationArea'
 export function changeClockEnable(val) {
     simulationArea.clockEnabled = val
 }
-
-/**
- * WIP function defined and used
- * @param {number} n
- * @category sequential
- */
-export function runTest(n = 10) {
-    var t = new Date().getTime()
-    for (var i = 0; i < n; i++) {
-        clockTick()
-    }
-    updateCanvasSet(true)
-    play()
-    scheduleUpdate()
-}
diff --git a/src/simulator/src/sequential/Clock.js b/src/simulator/src/sequential/Clock.js
index 76dc11ad..fcfac673 100644
--- a/src/simulator/src/sequential/Clock.js
+++ b/src/simulator/src/sequential/Clock.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo } from '../canvasApi'
 import { colors } from '../themer/themer'
 /**
diff --git a/src/simulator/src/sequential/DflipFlop.js b/src/simulator/src/sequential/DflipFlop.js
index 6fb034dd..f21fe2a1 100644
--- a/src/simulator/src/sequential/DflipFlop.js
+++ b/src/simulator/src/sequential/DflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 import { colors } from '../themer/themer'
 /**
diff --git a/src/simulator/src/sequential/Dlatch.js b/src/simulator/src/sequential/Dlatch.js
index 385ed63f..cc3b7097 100644
--- a/src/simulator/src/sequential/Dlatch.js
+++ b/src/simulator/src/sequential/Dlatch.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/ForceGate.js b/src/simulator/src/sequential/ForceGate.js
index 5da82c6f..332af06c 100644
--- a/src/simulator/src/sequential/ForceGate.js
+++ b/src/simulator/src/sequential/ForceGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText4 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/JKflipFlop.js b/src/simulator/src/sequential/JKflipFlop.js
index ccbff534..4f975c79 100644
--- a/src/simulator/src/sequential/JKflipFlop.js
+++ b/src/simulator/src/sequential/JKflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/Keyboard.js b/src/simulator/src/sequential/Keyboard.js
index c45ba677..a86a1d04 100644
--- a/src/simulator/src/sequential/Keyboard.js
+++ b/src/simulator/src/sequential/Keyboard.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText3 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/RAM.js b/src/simulator/src/sequential/RAM.js
index 41428297..cdaab091 100644
--- a/src/simulator/src/sequential/RAM.js
+++ b/src/simulator/src/sequential/RAM.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText2, fillText4, drawCircle2 } from '../canvasApi'
 import { parseNumber, showMessage } from '../utils'
 /**
diff --git a/src/simulator/src/sequential/Rom.js b/src/simulator/src/sequential/Rom.js
index de1b0884..06083e07 100644
--- a/src/simulator/src/sequential/Rom.js
+++ b/src/simulator/src/sequential/Rom.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, rect2, fillText3 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/SRflipFlop.js b/src/simulator/src/sequential/SRflipFlop.js
index 0a7bd94f..9bf50a23 100644
--- a/src/simulator/src/sequential/SRflipFlop.js
+++ b/src/simulator/src/sequential/SRflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/sequential/TTY.js b/src/simulator/src/sequential/TTY.js
index f88513e9..44fad1c4 100644
--- a/src/simulator/src/sequential/TTY.js
+++ b/src/simulator/src/sequential/TTY.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText3 } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/sequential/TflipFlop.js b/src/simulator/src/sequential/TflipFlop.js
index ca568452..ce1f7be9 100644
--- a/src/simulator/src/sequential/TflipFlop.js
+++ b/src/simulator/src/sequential/TflipFlop.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 import { colors } from '../themer/themer'
 
diff --git a/src/simulator/src/sequential/verilogRAM.js b/src/simulator/src/sequential/verilogRAM.js
index e653675c..c3915d47 100644
--- a/src/simulator/src/sequential/verilogRAM.js
+++ b/src/simulator/src/sequential/verilogRAM.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 /**
  * @class
  * verilogRAM Component.
diff --git a/src/simulator/src/setup.js b/src/simulator/src/setup.js
index e11d15dd..8bdb4dba 100644
--- a/src/simulator/src/setup.js
+++ b/src/simulator/src/setup.js
@@ -3,9 +3,9 @@
 /* eslint-disable guard-for-in */
 import metadata from './metadata.json'
 import { generateId, showMessage } from './utils'
-import backgroundArea from './backgroundArea'
+import { backgroundArea } from './backgroundArea'
 import plotArea from './plotArea'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { dots } from './canvasApi'
 import { update, updateSimulationSet, updateCanvasSet } from './engine'
 import { setupUI } from './ux'
diff --git a/src/simulator/src/simulationArea.js b/src/simulator/src/simulationArea.js
deleted file mode 100644
index 3784988a..00000000
--- a/src/simulator/src/simulationArea.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable import/no-cycle */
-import EventQueue from './eventQueue'
-import { clockTick } from './utils'
-
-/**
- * simulation environment object - holds simulation canvas
- * @type {Object} simulationArea
- * @property {HTMLCanvasElement} canvas
- * @property {boolean} selected
- * @property {boolean} hover
- * @property {number} clockState
- * @property {boolean} clockEnabled
- * @property {undefined} lastSelected
- * @property {Array} stack
- * @property {number} prevScale
- * @property {number} oldx
- * @property {number} oldy
- * @property {Array} objectList
- * @property {number} maxHeight
- * @property {number} maxWidth
- * @property {number} minHeight
- * @property {number} minWidth
- * @property {Array} multipleObjectSelections
- * @property {Array} copyList - List of selected elements
- * @property {boolean} shiftDown - shift down or not
- * @property {boolean} controlDown - contol down or not
- * @property {number} timePeriod - time period
- * @property {number} mouseX - mouse x
- * @property {number} mouseY - mouse y
- * @property {number} mouseDownX - mouse click x
- * @property {number} mouseDownY - mouse click y
- * @property {Array} simulationQueue - simulation queue
- * @property {number} clickCount - number of clicks
- * @property {string} lock - locked or unlocked
- * @property {function} timer - timer
- * @property {function} setup - to setup the simulaton area
- * @property {function} changeClockTime - change clock time
- * @property {function} clear - clear the simulation area
- * @category simulationArea
- */
-const simulationArea = {
-    canvas: document.getElementById('simulationArea'),
-    selected: false,
-    hover: false,
-    clockState: 0,
-    clockEnabled: true,
-    lastSelected: undefined,
-    stack: [],
-    prevScale: 0,
-    oldx: 0,
-    oldy: 0,
-    objectList: [],
-    maxHeight: 0,
-    maxWidth: 0,
-    minHeight: 0,
-    minWidth: 0,
-    multipleObjectSelections: [],
-    copyList: [],
-    shiftDown: false,
-    controlDown: false,
-    timePeriod: 500,
-    mouseX: 0,
-    mouseY: 0,
-    mouseDownX: 0,
-    mouseDownY: 0,
-    simulationQueue: undefined,
-    multiAddElement: false,
-
-    clickCount: 0, // double click
-    lock: 'unlocked',
-    timer() {
-        ckickTimer = setTimeout(() => {
-            simulationArea.clickCount = 0
-        }, 600)
-    },
-
-    setup() {
-        this.canvas = document.getElementById('simulationArea')
-        this.canvas.width = width
-        this.canvas.height = height
-        this.simulationQueue = new EventQueue(10000)
-        this.context = this.canvas.getContext('2d')
-        simulationArea.changeClockTime(simulationArea.timePeriod)
-        this.mouseDown = false
-    },
-    changeClockTime(t) {
-        if (t < 50) return
-        clearInterval(simulationArea.ClockInterval)
-        t = t || prompt('Enter Time Period:')
-        simulationArea.timePeriod = t
-        simulationArea.ClockInterval = setInterval(clockTick, t)
-    },
-    clear() {
-        if (!this.context) return
-        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height)
-    },
-}
-export const { changeClockTime } = simulationArea
-export default simulationArea
diff --git a/src/simulator/src/simulationArea.ts b/src/simulator/src/simulationArea.ts
new file mode 100644
index 00000000..e841e16f
--- /dev/null
+++ b/src/simulator/src/simulationArea.ts
@@ -0,0 +1,69 @@
+import { EventQueue } from './eventQueue'
+import { SimulationArea } from './interface/simulationArea'
+import { clockTick } from './utils'
+
+const simulationArea: SimulationArea = {
+    canvas: document.getElementById('simulationArea') as HTMLCanvasElement,
+    context: null,
+    selected: false,
+    hover: false,
+    clockState: 0,
+    clockEnabled: true,
+    lastSelected: null,
+    stack: [],
+    prevScale: 0,
+    oldx: 0,
+    oldy: 0,
+    objectList: [],
+    maxHeight: 0,
+    maxWidth: 0,
+    minHeight: 0,
+    minWidth: 0,
+    multipleObjectSelections: [],
+    copyList: [],
+    shiftDown: false,
+    controlDown: false,
+    timePeriod: 500,
+    mouseX: 0,
+    mouseY: 0,
+    mouseDownX: 0,
+    mouseDownY: 0,
+    simulationQueue: new EventQueue(10000),
+    clickCount: 0,
+    lock: 'unlocked',
+    mouseDown: false,
+    ClockInterval: null,
+
+    timer() {
+        const clickTimer = setTimeout(() => {
+            simulationArea.clickCount = 0
+        }, 600)
+    },
+    setup() {
+        this.canvas = document.getElementById('simulationArea') as HTMLCanvasElement;
+        this.canvas.width = width;
+        this.canvas.height = height;
+        this.simulationQueue = new EventQueue(10000);
+        this.context = this.canvas.getContext('2d')!;
+        simulationArea.changeClockTime(simulationArea.timePeriod);
+        this.mouseDown = false;
+    },
+    changeClockTime(t: number) {
+        if (t < 50) {
+            return;
+        }
+        if (simulationArea.ClockInterval != null) {
+            clearInterval(simulationArea.ClockInterval);
+        }
+        simulationArea.timePeriod = t;
+        simulationArea.ClockInterval = setInterval(clockTick, t);
+    },
+    clear() {
+        if (!this.context) {
+            return;
+        }
+        this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
+};
+export { simulationArea }
+export const { changeClockTime } = simulationArea
\ No newline at end of file
diff --git a/src/simulator/src/subcircuit.js b/src/simulator/src/subcircuit.js
index 747c38f1..7fabcd3d 100644
--- a/src/simulator/src/subcircuit.js
+++ b/src/simulator/src/subcircuit.js
@@ -1,7 +1,7 @@
 /* eslint-disable import/no-cycle */
 import Scope, { scopeList, switchCircuit } from './circuit'
 import CircuitElement from './circuitElement'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import { scheduleBackup, checkIfBackup } from './data/backupCircuit'
 import {
     scheduleUpdate,
diff --git a/src/simulator/src/testbench/ForceGate.js b/src/simulator/src/testbench/ForceGate.js
index 5da82c6f..332af06c 100644
--- a/src/simulator/src/testbench/ForceGate.js
+++ b/src/simulator/src/testbench/ForceGate.js
@@ -1,6 +1,6 @@
 import CircuitElement from '../circuitElement'
 import Node, { findNode } from '../node'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { fillText4 } from '../canvasApi'
 /**
  * @class
diff --git a/src/simulator/src/testbench/testbenchInput.js b/src/simulator/src/testbench/testbenchInput.js
index 5186a065..84d8d21b 100644
--- a/src/simulator/src/testbench/testbenchInput.js
+++ b/src/simulator/src/testbench/testbenchInput.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, lineTo, moveTo, fillText } from '../canvasApi'
 import Node, { findNode } from '../node'
 import plotArea from '../plotArea'
diff --git a/src/simulator/src/testbench/testbenchOutput.js b/src/simulator/src/testbench/testbenchOutput.js
index 184467c8..49117626 100644
--- a/src/simulator/src/testbench/testbenchOutput.js
+++ b/src/simulator/src/testbench/testbenchOutput.js
@@ -1,5 +1,5 @@
 import CircuitElement from '../circuitElement'
-import simulationArea from '../simulationArea'
+import { simulationArea } from '../simulationArea'
 import { correctWidth, fillText } from '../canvasApi'
 import Node, { findNode } from '../node'
 
diff --git a/src/simulator/src/utils.js b/src/simulator/src/utils.js
index 77c941ac..24ded222 100644
--- a/src/simulator/src/utils.js
+++ b/src/simulator/src/utils.js
@@ -1,4 +1,4 @@
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     scheduleUpdate,
     play,
diff --git a/src/simulator/src/ux.js b/src/simulator/src/ux.js
index ed23372d..8f175a0c 100644
--- a/src/simulator/src/ux.js
+++ b/src/simulator/src/ux.js
@@ -9,7 +9,7 @@ import {
     wireToBeCheckedSet,
     updateCanvasSet
 } from './engine'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import logixFunction from './data'
 import { circuitProperty } from './circuit'
 import { updateRestrictedElementsInScope } from './restrictedElementDiv'
diff --git a/src/simulator/src/wire.js b/src/simulator/src/wire.js
index 026eca83..3fe0bcb1 100644
--- a/src/simulator/src/wire.js
+++ b/src/simulator/src/wire.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-multi-assign */
 // wire object
 import { drawLine } from './canvasApi'
-import simulationArea from './simulationArea'
+import { simulationArea } from './simulationArea'
 import Node from './node'
 import { updateSimulationSet, forceResetNodesSet } from './engine'
 import { colors } from './themer/themer'