Merge branch 'main' into mini-map-rendering-fix

package.json

@@ -49,12 +49,16 @@
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-vue": "^9.1.0",
         "husky": "^8.0.1",
-        "jsdoc": "3.6.9",
+        "jsdoc": "^4.0.3",
         "prettier": "2.6.2",
+        "sass": "^1.77.6",
         "typescript": "^4.5.4",
         "vite": "^2.9.18",
         "vite-plugin-vuetify": "^1.0.0-alpha.0",
         "vue-cli-plugin-vuetify": "~2.5.1",
         "vue-tsc": "^0.34.7"
+    },
+    "optionalDependencies": {
+        "esbuild-linux-64": "^0.15.18"
     }
 }

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

@@ -11,9 +11,8 @@
 <script lang="ts" setup>
 import ModuleProperty from '#/components/Panels/PropertiesPanel/ModuleProperty/ModuleProperty.vue'
 import LayoutProperty from '#/components/Panels/PropertiesPanel/LayoutProperty/LayoutProperty.vue'
-import { ref, toRaw } from '@vue/reactivity'
-import simulationArea from '#/simulator/src/simulationArea'
-import { onMounted } from 'vue'
+import { ref, toRaw, onMounted } from 'vue'
+import { simulationArea } from '#/simulator/src/simulationArea'
 import { checkPropertiesUpdate, prevPropertyObjSet } from '#/simulator/src/ux'
 import { layoutModeGet } from '#/simulator/src/layoutMode'
 
@@ -33,7 +32,7 @@ function showPropertiesPanel() {
     if (toRaw(propertiesPanelObj.value) == simulationArea.lastSelected) return
     prevPropertyObjSet(simulationArea.lastSelected)
     propertiesPanelObj.value = simulationArea.lastSelected
-    if(simulationArea.lastSelected.newElement) {
+    if(simulationArea.lastSelected && simulationArea.lastSelected.newElement) {
         simulationArea.lastSelected.label = ""
     }
     // there are 3 types of panel body for Properties Panel

src/main.ts

@@ -1,4 +1,3 @@
-import { useActions } from './store/SimulatorStore/actions'
 import { createApp } from 'vue'
 import App from './App.vue'
 import vuetify from './plugins/vuetify'

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,
@@ -229,9 +229,6 @@ onBeforeMount(() => {
 })
 
 onMounted(() => {
-    // $('#zoom-in-embed').on('click', () => ZoomIn())
-    // $('#zoom-out-embed').on('click', () => ZoomOut())
-
     startListeners()
     setup()
 })

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/VerilogClasses.js

@@ -3,67 +3,27 @@ import NandGate from './modules/NandGate'
 import Multiplexer from './modules/Multiplexer'
 import XorGate from './modules/XorGate'
 import XnorGate from './modules/XnorGate'
-import SevenSegDisplay from './modules/SevenSegDisplay'
-import SixteenSegDisplay from './modules/SixteenSegDisplay'
-import HexDisplay from './modules/HexDisplay'
 import OrGate from './modules/OrGate'
-import Stepper from './modules/Stepper'
 import NotGate from './modules/NotGate'
-import Text from './modules/Text'
-import TriState from './modules/TriState'
 import Buffer from './modules/Buffer'
-import ControlledInverter from './modules/ControlledInverter'
 import Adder from './modules/Adder'
 import verilogMultiplier from './modules/verilogMultiplier'
 import verilogDivider from './modules/verilogDivider'
 import verilogPower from './modules/verilogPower'
 import verilogShiftLeft from './modules/verilogShiftLeft'
 import verilogShiftRight from './modules/verilogShiftRight'
-import TwoComplement from './modules/TwoComplement'
 import Splitter from './modules/Splitter'
-import Ground from './modules/Ground'
-import Power from './modules/Power'
 import Input from './modules/Input'
 import Output from './modules/Output'
-import BitSelector from './modules/BitSelector'
 import ConstantVal from './modules/ConstantVal'
 import NorGate from './modules/NorGate'
 import DigitalLed from './modules/DigitalLed'
-import VariableLed from './modules/VariableLed'
 import Button from './modules/Button'
-import RGBLed from './modules/RGBLed'
-import SquareRGBLed from './modules/SquareRGBLed'
-import Demultiplexer from './modules/Demultiplexer'
-import Decoder from './modules/Decoder'
-import Flag from './modules/Flag'
-import MSB from './modules/MSB'
 import LSB from './modules/LSB'
-import PriorityEncoder from './modules/PriorityEncoder'
-import Tunnel from './modules/Tunnel'
 import ALU from './modules/ALU'
-import Rectangle from './modules/Rectangle'
-import Arrow from './modules/Arrow'
-import Counter from './modules/Counter'
-import Random from './modules/Random'
-import RGBLedMatrix from './modules/RGBLedMatrix'
-import simulationArea from './simulationArea'
-import TflipFlop from './sequential/TflipFlop'
 import DflipFlop from './sequential/DflipFlop'
-import Dlatch from './sequential/Dlatch'
-import SRflipFlop from './sequential/SRflipFlop'
-import JKflipFlop from './sequential/JKflipFlop'
-import TTY from './sequential/TTY'
-import Keyboard from './sequential/Keyboard'
 import Clock from './sequential/Clock'
-import RAM from './sequential/RAM'
 import verilogRAM from './sequential/verilogRAM'
-import EEPROM from './sequential/EEPROM'
-import Rom from './sequential/Rom'
-import TB_Input from './testbench/testbenchInput'
-import TB_Output from './testbench/testbenchOutput'
-import ForceGate from './testbench/ForceGate'
-import { newCircuit, switchCircuit, changeCircuitName } from './circuit'
-import SubCircuit from './subcircuit'
 
 function getBitWidth(bitsJSON) {
     if (Number.isInteger(bitsJSON)) {

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'
 
@@ -240,7 +240,10 @@ export function moveTo(ctx, x1, y1, xx, yy, dir, bypass = false) {
     xx *= globalScope.scale
     yy *= globalScope.scale
     if (bypass) {
-        ctx.moveTo(xx + globalScope.ox + newX, yy + globalScope.oy + newY)
+        ctx.moveTo(
+            Math.round(xx + globalScope.ox + newX),
+            Math.round(yy + globalScope.oy + newY)
+        )
     } else {
         ctx.moveTo(
             Math.round(xx + globalScope.ox + newX - correction) + correction,

src/simulator/src/circuit.js

@@ -11,13 +11,10 @@
 /* eslint-disable no-alert */
 import CircuitElement from './circuitElement'
 import plotArea from './plotArea'
-import simulationArea, { changeClockTime } from './simulationArea'
+import { simulationArea } from './simulationArea'
 import {
     stripTags,
     uniq,
-    showMessage,
-    showError,
-    truncateString,
 } from './utils'
 import { findDimensions, dots } from './canvasApi'
 import { updateRestrictedElementsList } from './restrictedElementDiv'
@@ -32,21 +29,20 @@ import {
     changeLightMode,
 } from './engine'
 import { toggleLayoutMode, layoutModeGet } from './layoutMode'
-import { setProjectName, getProjectName } from './data/save'
+import { setProjectName } from './data/save'
 import { changeClockEnable } from './sequential'
 import { changeInputSize } from './modules'
 import { verilogModeGet, verilogModeSet } from './Verilog2CV'
 import { updateTestbenchUI } from './testbench'
 import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
-import { toRef, toRefs } from 'vue'
+import { toRefs } from 'vue'
 import { provideCircuitName } from '#/components/helpers/promptComponent/PromptComponent.vue'
 import { deleteCurrentCircuit } from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
 
 export const circuitProperty = {
     toggleLayoutMode,
     setProjectName,
     changeCircuitName,
-    // changeClockTime,
     deleteCurrentCircuit,
     changeClockEnable,
     changeInputSize,
@@ -235,27 +231,9 @@ export function newCircuit(name, id, isVerilog = false, isVerilogMain = false) {
     activeCircuit.value.name = scope.name
 
     if (!isVerilog || isVerilogMain) {
-        if (embed) {
-            // added calss - embed-tab using vue logic
-            // var html = `<div style='' class='circuits toolbarButton current' draggable='true' id='${
-            //     scope.id
-            // }'><span class='circuitName noSelect'>${truncateString(
-            //     name,
-            //     18
-            // )}</span></div>`
-            // $('#tabsBar').append(html)
-            // $('#tabsBar').addClass('embed-tabs')
-        } else {
-            // logic implemented in vue
-        }
-
         // Remove listeners
-        //$('.circuits').off('click')
         $('.circuitName').off('click')
-        //$('.tabsCloseButton').off('click')
-
         // switch circuit function moved inside vue component
-
         if (!embed) {
             $('.circuitName').on('click', () => {
                 simulationArea.lastSelected = globalScope.root
@@ -265,12 +243,6 @@ export function newCircuit(name, id, isVerilog = false, isVerilogMain = false) {
                 }, 100)
             })
         }
-        // moved inside vue - component
-        // $('.tabsCloseButton').on('click', function (e) {
-        //     e.stopPropagation()
-        //     deleteCurrentCircuit(this.id)
-        // })
-
         if (!embed) {
             showProperties(scope.root)
         }
@@ -288,13 +260,11 @@ export function newCircuit(name, id, isVerilog = false, isVerilogMain = false) {
 export function changeCircuitName(name, id = globalScope.id) {
     const simulatorStore = SimulatorStore()
     const { circuit_list } = toRefs(simulatorStore)
-    // const { activeCircuit } = toRefs(simulatorStore)
     name = name || 'Untitled'
     name = stripTags(name)
     scopeList[id].name = name
     const index = circuit_list.value.findIndex((circuit) => circuit.id === id)
     circuit_list.value[index].name = name
-    // activeCircuit.value.name = name // add later if necessary at current stage not important handled by projectProperty on switching circuit
 }
 
 /**

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,
@@ -154,7 +154,7 @@ export default class CircuitElement {
     /**
      * To generate JSON-safe data that can be loaded
      * @memberof CircuitElement
-     * @return {JSON} - the data to be saved
+     * @return {object} - the data to be saved
      */
     saveObject() {
         var data = {
@@ -176,7 +176,7 @@ export default class CircuitElement {
     /**
      * Always overriden
      * @memberof CircuitElement
-     * @return {JSON} - the data to be saved
+     * @return {object} - the data to be saved
      */
     // eslint-disable-next-line class-methods-use-this
     customSave() {
@@ -852,7 +852,8 @@ export default class CircuitElement {
     resolve() {}
 
     /**
-     * Helper Function to process verilog
+     * Helper Function to process Verilog
+     * @return {string}
      */
     processVerilog() {
         // Output count used to sanitize output
@@ -956,8 +957,8 @@ export default class CircuitElement {
     }
 
     /**
-     * Helper Function to generate verilog
-     * @return {JSON}
+     * Helper Function to generate Verilog.
+     * @return {string}
      */
     generateVerilog() {
         // Example: and and_1(_out, _out, _Q[0]);