Moving simulationArea and backgroundArea to Typescript (#335)

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'
 

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(() => {

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'

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'

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'
 

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,

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'
 

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);
+    },
+};

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'
 

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,

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,

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'

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'

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,

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,

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'

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)

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'
 
 /**

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,

src/simulator/src/interface/backgroundArea.ts

@@ -0,0 +1,6 @@
+export interface BackgroundArea {
+    canvas: HTMLCanvasElement | null;
+    context: CanvasRenderingContext2D | null;
+    setup(): void;
+    clear(): void;
+}

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;
+}

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'
 
 /**

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,

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,

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'
 

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

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'
 

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

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'

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

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

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

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'
 
 /**

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'
 

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

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'
 

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

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

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,