Merge branch 'main' of https://github.com/niladrix719/cv-frontend-vue …

…into utils-ts/vue

package.json

@@ -23,6 +23,7 @@
         "@tiptap/starter-kit": "^2.0.3",
         "@tiptap/vue-3": "^2.0.3",
         "bootstrap": "^4.6.1",
+        "canvas-to-svg": "^1.0.3",
         "codemirror": "^5.65.1",
         "codemirror-editor-vue3": "^2.1.7",
         "dom-to-image": "^2.6.0",
@@ -49,12 +50,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

@@ -23,8 +23,8 @@
 import { stripTags } from '#/simulator/src/utils'
 import { useState } from '#/store/SimulatorStore/state'
 import messageBox from '@/MessageBox/messageBox.vue'
-import { ref } from '@vue/reactivity'
-import { onMounted, onUpdated } from '@vue/runtime-core'
+import { ref } from 'vue'
+import { onMounted, onUpdated } from 'vue'
 
 /* imports from combinationalAnalysis.js */
 import Node from '#/simulator/src/node'
@@ -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'
 
@@ -199,7 +199,7 @@ function createLogicTable() {
         SimulatorState.dialogBox.combinationalanalysis_dialog = false
         output.value = []
         solveBooleanFunction(booleanInputVariables, booleanExpression)
-        if (output != null) {
+        if (output.value != null) {
             createBooleanPrompt(booleanInputVariables, booleanExpression)
         }
     } else if (

src/components/DialogBox/ExportVerilog.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from '@vue/runtime-core'
+import { onMounted, ref } from 'vue'
 import { useState } from '#/store/SimulatorStore/state'
 const SimulatorState = useState()
 import Codemirror from 'codemirror-editor-vue3'

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/DialogBox/OpenOffline.vue

@@ -26,11 +26,12 @@
                             type="radio"
                             name="projectId"
                             :value="projectId"
+                            v-model="selectedProjectId"
                         />
                         {{ projectName }}<span></span>
                         <i
                             class="fa fa-trash deleteOfflineProject"
-                            @click="deleteOfflineProject(projectId)"
+                            @click="deleteOfflineProject(projectId.toString())"
                         ></i>
                     </label>
                     <p v-if="JSON.stringify(projectList) == '{}'">
@@ -64,32 +65,39 @@
 <script lang="ts" setup>
 import load from '#/simulator/src/data/load'
 import { useState } from '#/store/SimulatorStore/state'
-import { onMounted, onUpdated, ref, toRaw } from '@vue/runtime-core'
+import { onMounted, onUpdated, ref, reactive } from '@vue/runtime-core'
 const SimulatorState = useState()
-const projectList = ref({})
+const projectList: {
+    [key: string]: string
+} = reactive({})
+const selectedProjectId = ref<string | null>(null)
+
 onMounted(() => {
     SimulatorState.dialogBox.open_project_dialog = false
 })
 
 onUpdated(() => {
-    var data = localStorage.getItem('projectList')
-    projectList.value = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    projectList.value = data ? JSON.parse(data) : {}
 })
 
-function deleteOfflineProject(id) {
+function deleteOfflineProject(id: string) {
     localStorage.removeItem(id)
-    const temp = JSON.parse(localStorage.getItem('projectList')) || {}
+    const data = localStorage.getItem('projectList')
+    const temp = data ? JSON.parse(data) : {}
     delete temp[id]
     projectList.value = temp
     localStorage.setItem('projectList', JSON.stringify(temp))
 }
 
 function openProjectOffline() {
     SimulatorState.dialogBox.open_project_dialog = false
-    let ele = $('input[name=projectId]:checked')
-    if (!ele.val()) return
-    load(JSON.parse(localStorage.getItem(ele.val())))
-    window.projectId = ele.val()
+    if (!selectedProjectId.value) return
+    const projectData = localStorage.getItem(selectedProjectId.value)
+    if (projectData) {
+        load(JSON.parse(projectData))
+        window.projectId = selectedProjectId.value
+    }
 }
 
 function OpenImportProjectDialog() {

src/components/DialogBox/Themes/ApplyThemes.vue

@@ -32,7 +32,7 @@
                         >
                             <div
                                 class="themeSel"
-                                @click="changeTheme($event)"
+                                @click="changeTheme(theme)"
                             ></div>
                             <span>
                                 <img
@@ -72,6 +72,7 @@
                                     type="radio"
                                     value="theme"
                                     name="theme"
+                                    :checked="theme == selectedTheme || theme == 'Default Theme'"
                                 />
                                 <label :for="theme.replace(' ', '')">{{
                                     theme
@@ -98,14 +99,15 @@
                             <label :for="customTheme" class="customColorLabel">
                                 {{ customTheme }}
                                 ({{
-                                    customThemesList[customTheme].description
+                                    customThemesList[customTheme]?.description
                                 }})
                             </label>
                             <input
                                 type="color"
                                 :name="customTheme"
-                                :value="customThemesList[customTheme].color"
+                                :value="customThemesList[customTheme]?.color"
                                 class="customColorInput"
+                                @input="changeCustomTheme($event)"
                             />
                         </div>
                         <a id="downloadThemeFile" style="display: none"></a>
@@ -144,48 +146,49 @@
 
 <script lang="ts" setup>
 import { useState } from '#/store/SimulatorStore/state'
-import { onMounted, onUpdated, ref } from '@vue/runtime-core'
+import { onMounted, onUpdated, ref, reactive } from '@vue/runtime-core'
 import themeOptions from '#/simulator/src/themer/themes'
 import {
     getThemeCardSvg,
     updateBG,
     updateThemeForStyle,
 } from '#/simulator/src/themer/themer'
 const SimulatorState = useState()
-import { CreateAbstraction } from '#/simulator/src/themer/customThemeAbstraction'
+import { CreateAbstraction, Themes } from '#/simulator/src/themer/customThemeAbstraction'
 import { confirmSingleOption } from '#/components/helpers/confirmComponent/ConfirmComponent.vue'
 const themes = ref([''])
-const customThemes = ref([''])
-const customThemesList = ref([''])
+const customThemes = ref<((keyof typeof customThemesList)[]) | undefined>(undefined);
+const customThemesList: Themes = reactive({})
 const selectedTheme = ref('default-theme')
 const iscustomTheme = ref(false)
 
 onMounted(() => {
     SimulatorState.dialogBox.theme_dialog = false
-    selectedTheme.value = localStorage.getItem('theme')
+    selectedTheme.value = localStorage.getItem('theme') ?? 'default-theme'
     themes.value = Object.keys(themeOptions)
     themes.value.splice(-1, 1)
-    customThemesList.value = CreateAbstraction(themeOptions['Custom Theme'])
-    customThemes.value = Object.keys(customThemesList.value)
+    const customTheme = CreateAbstraction(themeOptions['Custom Theme'])
+    Object.keys(customTheme).forEach((key) => {
+        customThemesList[key as keyof typeof customThemesList] = customTheme[key as keyof typeof customThemesList]
+    })
+    customThemes.value = Object.keys(customThemesList) as (keyof typeof customThemesList)[]
 })
 
-function changeTheme(e) {
-    e.preventDefault()
-    $('.selected').removeClass('selected')
-    let themeCard = $(e.target.parentElement)
-    themeCard.addClass('selected')
-    // Extract radio button
-    var radioButton = themeCard.find('input[type=radio]')
-    radioButton.trigger('click') // Mark as selected
-    updateThemeForStyle(themeCard.find('label').text()) // Extract theme name and set
+function changeTheme(theme: string) {
+    selectedTheme.value = theme;
+    updateThemeForStyle(theme)
     updateBG()
 }
 
-function changeCustomTheme(e) {
-    customThemesList.value[e.target.name].color = e.target.value
-    customThemesList.value[e.target.name].ref.forEach((property) => {
-        themeOptions['Custom Theme'][property] = e.target.value
-    })
+function changeCustomTheme(e: InputEvent) {
+    const customTheme = customThemesList[(e.target as HTMLInputElement).name as keyof typeof customThemesList];
+    if (customTheme) {
+        customTheme.color = (e.target as HTMLInputElement).value;
+        customTheme.ref.forEach((property: string) => {
+            themeOptions['Custom Theme'][property] = (e.target as HTMLInputElement).value
+        })
+    }
+    customThemesList[(e.target as HTMLInputElement).name as keyof typeof customThemesList] = customTheme
     updateThemeForStyle('Custom Theme')
     updateBG()
 }
@@ -224,8 +227,11 @@ function applyCustomTheme() {
     $('.selected').addClass('set')
 }
 
-function receivedText(e) {
-    const lines = JSON.parse(e.target.result)
+function receivedText(e: ProgressEvent<FileReader>) {
+    let lines = []
+    if(typeof e.target?.result === 'string') {
+        lines = JSON.parse(e.target.result)
+    }
     let customTheme = CreateAbstraction(lines)
     themeOptions['Custom Theme'] = lines
     // preview theme
@@ -234,39 +240,43 @@ function receivedText(e) {
     // update colors in dialog box
     SimulatorState.dialogBox.theme_dialog = false
     SimulatorState.dialogBox.theme_dialog = true
-    customThemesList.value = CreateAbstraction(themeOptions['Custom Theme'])
-    customThemes.value = Object.keys(customThemesList.value)
-    $('.customColorInput').on('input', (e) => {
-        changeCustomTheme(e)
+    const customThemeValues = CreateAbstraction(themeOptions['Custom Theme'])
+    Object.keys(customThemeValues).forEach((key) => {
+        customThemesList[key as keyof typeof customThemesList] = customThemeValues[key as keyof typeof customThemesList]
     })
+    customThemes.value = Object.keys(customThemesList) as (keyof typeof customThemesList)[]
 }
 
 function importCustomTheme() {
-    $('#importThemeFile').click()
-
-    $('#importThemeFile').on('change', (event) => {
-        var File = event.target.files[0]
-        if (File !== null && File.name.split('.')[1] === 'json') {
-            var fr = new FileReader()
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.accept = '.json'
+    fileInput.style.display = 'none'
+    fileInput.addEventListener('change', (event) => {
+        const file = (event.target as HTMLInputElement).files?.[0]
+        if (file && file.name.split('.')[1] === 'json') {
+            const fr = new FileReader()
             fr.onload = receivedText
-            fr.readAsText(File)
-            $('#importThemeFile').val('')
+            fr.readAsText(file)
         } else {
-            // alert('File Not Supported !')
             confirmSingleOption('File Not Supported !')
         }
     })
+    document.body.appendChild(fileInput)
+    fileInput.click()
+    document.body.removeChild(fileInput)
 }
+
 function exportCustomTheme() {
     const dlAnchorElem = document.getElementById('downloadThemeFile')
-    dlAnchorElem.setAttribute(
+    dlAnchorElem?.setAttribute(
         'href',
         `data:text/json;charset=utf-8,${encodeURIComponent(
             JSON.stringify(themeOptions['Custom Theme'])
         )}`
     )
-    dlAnchorElem.setAttribute('download', 'CV_CustomTheme.json')
-    dlAnchorElem.click()
+    dlAnchorElem?.setAttribute('download', 'CV_CustomTheme.json')
+    dlAnchorElem?.click()
 }
 
 function closeThemeDialog() {
@@ -278,9 +288,10 @@ function closeThemeDialog() {
 function closeCustomThemeDialog() {
     SimulatorState.dialogBox.theme_dialog = false
     setTimeout(() => (iscustomTheme.value = false), 1000)
-    themeOptions['Custom Theme'] =
-        JSON.parse(localStorage.getItem('Custom Theme')) ||
-        themeOptions['Default Theme'] // hack for closing dialog box without saving
+    const customTheme = localStorage.getItem('Custom Theme')
+    if (customTheme) {
+        themeOptions['Custom Theme'] = JSON.parse(customTheme) || themeOptions['Default Theme'] // hack for closing dialog box without saving
+    }
     // Rollback to previous theme
     updateThemeForStyle(localStorage.getItem('theme'))
     updateBG()