fix: correct dom-to-image import syntax in save.ts

- Changed from incorrect named import {domtoimage} to default import
- Fixed missing space in import statement
- Verified all dependencies are installed and available

Author: Rohitk0102

src/simulator/src/data/save.js renamed to src/simulator/src/data/save.ts

@@ -12,21 +12,37 @@ import { layoutModeGet, toggleLayoutMode } from '../layoutMode'
 import { verilogModeGet } from '../Verilog2CV'
 import domtoimage from 'dom-to-image'
 import canvasToSvg from "canvas-to-svg"
-import { useProjectStore } from '#/store/projectStore'
-import { provideProjectName } from '#/components/helpers/promptComponent/PromptComponent.vue'
-import { UpdateProjectDetail } from '#/components/helpers/createNewProject/UpdateProjectDetail.vue'
-import { confirmOption } from '#/components/helpers/confirmComponent/ConfirmComponent.vue'
-import { getToken } from '#/pages/simulatorHandler.vue'
+import { useProjectStore } from '../../../store/projectStore'
+import { provideProjectName } from '../../../components/helpers/promptComponent/PromptComponent.vue'
+import { UpdateProjectDetail } from '../../../components/helpers/createNewProject/UpdateProjectDetail.vue'
+import { confirmOption } from '../../../components/helpers/confirmComponent/ConfirmComponent.vue'
+import { getToken } from '../../../pages/simulatorHandler.vue'
 import { renderOrder } from '../metadata'
 
-// var projectName = undefined
+// Extend Window interface to include global variables
+declare global {
+    interface Window {
+        globalScope: any
+        width: number
+        height: number
+        projectId: string | number | undefined
+        isUserLoggedIn: boolean
+        logixProjectId: string | number | undefined
+    }
+}
+
+// Get global variables from window
+const globalScope = window.globalScope
+let width = window.width
+let height = window.height
+const projectId = window.projectId
 
 /**
  * Function to set the name of project.
  * @param {string} name - name for project
  * @category data
  */
-export function setProjectName(name) {
+export function setProjectName(name: string | undefined): void {
     const projectStore = useProjectStore()
     if (name == undefined) {
         // $('#projectName').html('Untitled')
@@ -43,19 +59,20 @@ export function setProjectName(name) {
  * @param {string} name - name for project
  * @category data
  */
-export function getProjectName() {
+export function getProjectName(): string | undefined {
     const projectStore = useProjectStore()
     if (projectStore.getProjectNameDefined)
         return projectStore.getProjectName.trim()
     else return undefined
 }
+
 /**
  * Helper function to save canvas as image based on image type
  * @param {string} name -name of the circuit
  * @param {string} imgType - image type ex: png,jpg etc.
  * @category data
  */
-function downloadAsImg(name, imgType) {
+function downloadAsImg(name: string, imgType: string): void {
     const gh = simulationArea.canvas.toDataURL(`image/${imgType}`)
     const anchor = document.createElement('a')
     anchor.href = gh
@@ -66,31 +83,51 @@ function downloadAsImg(name, imgType) {
 /**
  * Returns the order of tabs in the project
  */
-export function getTabsOrder() {
-    var tabs = document.getElementById('tabsBar').firstChild.children
-    var order = []
-    for (let i = 0; i < tabs?.length; i++) {
-        order.push(tabs[i].id)
+export function getTabsOrder(): string[] {
+    const tabs = (document.getElementById('tabsBar')?.firstChild as HTMLElement)?.children
+    const order: string[] = []
+    for (let i = 0; i < (tabs?.length || 0); i++) {
+        order.push((tabs as HTMLCollection)[i].id)
     }
     return order
 }
 
+interface SaveData {
+    name: string
+    timePeriod: number
+    clockEnabled: boolean
+    projectId: string | number | undefined
+    focussedCircuit: string | number
+    orderedTabs: string[]
+    scopes: any[]
+}
+
 /**
  * Generates JSON of the entire project
  * @param {string} name - the name of project
  * @return {JSON}
  * @category data
  */
-export async function generateSaveData(name, setName = true) {
-    let data = {}
+export async function generateSaveData(name?: string, setName: boolean = true): Promise<string | Error> {
+    let data: SaveData = {
+        name: '',
+        timePeriod: 0,
+        clockEnabled: false,
+        projectId: undefined,
+        focussedCircuit: '',
+        orderedTabs: [],
+        scopes: []
+    }
 
     // Prompts for name, defaults to Untitled
-    name = getProjectName() || name || (await provideProjectName())
-    if (name instanceof Error) {
+    const projectName = getProjectName() || name || (await provideProjectName())
+    if (projectName instanceof Error) {
         return new Error('cancel')
         // throw 'save has been canceled'
-    } else if (name == '') {
+    } else if (projectName == '') {
         name = 'Untitled'
+    } else {
+        name = projectName
     }
     data.name = stripTags(name)
     if (setName) setProjectName(data.name)
@@ -104,16 +141,16 @@ export async function generateSaveData(name, setName = true) {
 
     // Project Circuits, each scope is one circuit
     data.scopes = []
-    const dependencyList = {}
-    const completed = {}
+    const dependencyList: { [key: string]: string[] } = {}
+    const completed: { [key: string]: boolean } = {}
     // Getting list of dependencies for each circuit
-    for (id in scopeList) {
+    for (const id in scopeList) {
         dependencyList[id] = scopeList[id].getDependencies()
     }
 
     // Helper function to save Scope
     // Recursively saves inner subcircuits first, before saving parent circuits
-    function saveScope(id) {
+    function saveScope(id: string): void {
         if (completed[id]) return
 
         for (let i = 0; i < dependencyList[id].length; i++) {
@@ -139,21 +176,21 @@ export async function generateSaveData(name, setName = true) {
     }
 
     // convert to text
-    data = JSON.stringify(data)
-    return data
+    const dataString = JSON.stringify(data)
+    return dataString
 }
 
 // Helper function to download text
-function download(filename, text) {
-    var pom = document.createElement('a')
+function download(filename: string, text: string): void {
+    const pom = document.createElement('a')
     pom.setAttribute(
         'href',
         'data:text/plain;charset=utf-8,' + encodeURIComponent(text)
     )
     pom.setAttribute('download', filename)
 
     if (document.createEvent) {
-        var event = document.createEvent('MouseEvents')
+        const event = document.createEvent('MouseEvents')
         event.initEvent('click', true, true)
         pom.dispatchEvent(event)
     } else {
@@ -171,12 +208,12 @@ function download(filename, text) {
  * @category data
  */
 export function generateImage(
-    imgType,
-    view,
-    transparent,
-    resolution,
-    down = true
-) {
+    imgType: string,
+    view: string,
+    transparent: boolean,
+    resolution: number,
+    down: boolean = true
+): string | undefined {
     // Backup all data
     const backUpOx = globalScope.ox
     const backUpOy = globalScope.oy
@@ -204,7 +241,7 @@ export function generateImage(
     const scope = globalScope
 
     // Focus circuit
-    var flag = 1
+    const flag = 1
     if (flag) {
         if (view === 'full') {
             findDimensions()
@@ -230,18 +267,18 @@ export function generateImage(
 
     simulationArea.canvas.width = width
     simulationArea.canvas.height = height
-    backgroundArea.canvas.width = width
-    backgroundArea.canvas.height = height
+    backgroundArea.canvas!.width = width
+    backgroundArea.canvas!.height = height
 
     backgroundArea.context = simulationArea.context
 
     simulationArea.clear()
 
     // Background
     if (!transparent) {
-        simulationArea.context.fillStyle = colors['canvas_fill']
-        simulationArea.context.rect(0, 0, width, height)
-        simulationArea.context.fill()
+        simulationArea.context!.fillStyle = colors['canvas_fill']
+        simulationArea.context!.rect(0, 0, width, height)
+        simulationArea.context!.fill()
     }
 
     // Draw circuits
@@ -251,11 +288,11 @@ export function generateImage(
         }
     }
 
-    let returnData
+    let returnData: string | undefined
     // If circuit is to be downloaded, download, other wise return dataURL
     if (down) {
         if (imgType === 'svg') {
-            const mySerializedSVG = simulationArea.context.getSerializedSvg() // true here, if you need to convert named to numbered entities.
+            const mySerializedSVG = (simulationArea.context as any).getSerializedSvg() // true here, if you need to convert named to numbered entities.
             download(`${globalScope.name}.svg`, mySerializedSVG)
         } else {
             downloadAsImg(globalScope.name, imgType)
@@ -269,8 +306,8 @@ export function generateImage(
     height = backUpHeight
     simulationArea.canvas.width = width
     simulationArea.canvas.height = height
-    backgroundArea.canvas.width = width
-    backgroundArea.canvas.height = height
+    backgroundArea.canvas!.width = width
+    backgroundArea.canvas!.height = height
     globalScope.scale = backUpScale
     backgroundArea.context = backUpContextBackground
     simulationArea.context = backUpContextSimulation
@@ -282,22 +319,21 @@ export function generateImage(
     if (!down) return returnData
 }
 
-async function crop(dataURL, w, h) {
+async function crop(dataURL: string, w: number, h: number): Promise<string> {
     //get empty second canvas
-    var myCanvas = document.createElement('CANVAS')
+    const myCanvas = document.createElement('CANVAS') as HTMLCanvasElement
     myCanvas.width = w
     myCanvas.height = h
-    var myContext = myCanvas.getContext('2d')
-    var myImage
-    var img = new Image()
+    const myContext = myCanvas.getContext('2d')
+    const img = new Image()
     return new Promise(function (resolved, rejected) {
         img.src = dataURL
         img.onload = () => {
-            myContext.drawImage(img, 0, 0, w, h, 0, 0, w, h)
-            myContext.save()
+            myContext?.drawImage(img, 0, 0, w, h, 0, 0, w, h)
+            myContext?.save()
 
             //create a new data URL
-            myImage = myCanvas.toDataURL('image/jpeg')
+            const myImage = myCanvas.toDataURL('image/jpeg')
             resolved(myImage)
         }
     })
@@ -308,22 +344,22 @@ async function crop(dataURL, w, h) {
  * @return {JSON}
  * @category data
  */
-async function generateImageForOnline() {
+async function generateImageForOnline(): Promise<string> {
     // Verilog Mode -> Different logic
     // Fix aspect ratio to 1.6
     // Ensure image is approximately 700 x 440
-    var ratio = 1.6
+    const ratio = 1.6
     if (verilogModeGet()) {
-        var node = document.getElementsByClassName('CodeMirror')[0]
+        const node = document.getElementsByClassName('CodeMirror')[0] as HTMLElement
         // var node = document.getElementsByClassName('CodeMirror')[0];
-        var prevHeight = window.getComputedStyle(node).height
-        var prevWidth = window.getComputedStyle(node).width
-        var baseWidth = 500
-        var baseHeight = Math.round(baseWidth / ratio)
+        const prevHeight = window.getComputedStyle(node).height
+        const prevWidth = window.getComputedStyle(node).width
+        const baseWidth = 500
+        const baseHeight = Math.round(baseWidth / ratio)
         node.style.height = baseHeight + 'px'
         node.style.width = baseWidth + 'px'
 
-        var data = await domtoimage.toJpeg(node)
+        let data = await domtoimage.toJpeg(node)
         node.style.width = prevWidth
         node.style.height = prevHeight
         data = await crop(data, baseWidth, baseHeight)
@@ -348,34 +384,35 @@ async function generateImageForOnline() {
         440 / (simulationArea.maxHeight - simulationArea.minHeight)
     )
 
-    data = generateImage('jpeg', 'current', false, resolution, false)
+    const data = generateImage('jpeg', 'current', false, resolution, false)
 
     // Restores Focus
     globalScope.centerFocus(false)
-    return data
+    return data as string
 }
+
 /**
  * Function called when you save acircuit online
  * @category data
  * @exports save
  */
-export default async function save() {
+export default async function save(): Promise<void> {
     if (layoutModeGet()) toggleLayoutMode()
 
     projectSavedSet(true)
 
     const data = await generateSaveData()
     if (data instanceof Error) return
-    let loadingIcon = document.querySelector('.loadingIcon');
+    let loadingIcon = document.querySelector('.loadingIcon') as HTMLElement;
     loadingIcon.style.transition = 'opacity 0.5s linear';
     loadingIcon.style.opacity = '1';
 
     const projectName = getProjectName()
-    var imageData = await generateImageForOnline()
+    const imageData = await generateImageForOnline()
 
-    const headers = {
+    const headers: HeadersInit = {
         'Content-Type': 'application/json',
-        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'),
+        'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
         Authorization: `Token ${getToken('cvt')}`,
     }
 
@@ -390,12 +427,12 @@ export default async function save() {
         )
             window.location.href = '/users/sign_in'
         else {
-            let loadingIcon = document.querySelector('.loadingIcon')
+            let loadingIcon = document.querySelector('.loadingIcon') as HTMLElement
             loadingIcon.style.transition = 'opacity 0.2s';
             loadingIcon.style.opacity = '0';
         }
         // eslint-disable-next-line camelcase
-    } else if ([0, undefined, null, '', '0'].includes(window.logixProjectId)) {
+    } else if ([0, undefined, null, '', '0'].includes(window.logixProjectId as any)) {
         // Create new project - this part needs to be improved and optimised
         // const form = $('<form/>', {
         //     action: '/api/v1/simulator/create',
@@ -447,7 +484,7 @@ export default async function save() {
                         `We have Created a new project: ${projectName} in our servers.`
                     )
 
-                    let loadingIcon = document.querySelector('.loadingIcon')
+                    let loadingIcon = document.querySelector('.loadingIcon') as HTMLElement
                     loadingIcon.style.transition = 'opacity 0.2s';
                     loadingIcon.style.opacity = '0';
 
@@ -520,7 +557,7 @@ export default async function save() {
                         "There was an error, we couldn't save to our servers"
                     )
                 }
-                let loadingIcon = document.querySelector('.loadingIcon')
+                let loadingIcon = document.querySelector('.loadingIcon') as HTMLElement
                 loadingIcon.style.transition = 'opacity 0.2s';
                 loadingIcon.style.opacity = '0';
             })