From d662b4978f49efc69575c6ec437039817bf3f88d Mon Sep 17 00:00:00 2001 From: ShinichiShi Date: Mon, 20 Oct 2025 18:47:34 +0530 Subject: [PATCH 1/3] refactor minmap.js to ts --- src/simulator/src/{minimap.js => minimap.ts} | 99 +++++++++++++------- src/simulator/src/types/minimap.types.ts | 37 ++++++++ 2 files changed, 101 insertions(+), 35 deletions(-) rename src/simulator/src/{minimap.js => minimap.ts} (73%) create mode 100644 src/simulator/src/types/minimap.types.ts diff --git a/src/simulator/src/minimap.js b/src/simulator/src/minimap.ts similarity index 73% rename from src/simulator/src/minimap.js rename to src/simulator/src/minimap.ts index 842869840..905d58229 100644 --- a/src/simulator/src/minimap.js +++ b/src/simulator/src/minimap.ts @@ -2,25 +2,33 @@ import { simulationArea } from './simulationArea' import { colors } from './themer/themer' import { layoutModeGet } from './layoutMode' import { updateOrder } from './metadata' +import { MiniMapAreaType } from './types/minimap.types' + +// jQuery is available globally in this project +declare const $: JQueryStatic + +// Global variables are already declared in app.types.ts /** - * @type {Object} miniMapArea * This object is used to draw the miniMap. - * @property {number} pageY - * @property {number} pageX - * @property {HTMLCanvasObject} canvas - the canvas object - * @property {function} setup - used to setup the parameters and dimensions - * @property {function} play - used to draw outline of minimap and call resolve - * @property {function} resolve - used to resolve all objects and draw them on minimap - * @property {function} clear - used to clear minimap - * @category minimap */ -var miniMapArea -export default miniMapArea = { - canvas: document.getElementById('miniMapArea'), +const miniMapArea: MiniMapAreaType = { + canvas: null, + ctx: null, + pageHeight: 0, + pageWidth: 0, + pageY: 0, + pageX: 0, + minX: 0, + maxX: 0, + minY: 0, + maxY: 0, + setup() { if (lightMode) return - this.canvas = document.getElementById('miniMapArea') + this.canvas = document.getElementById( + 'miniMapArea' + ) as HTMLCanvasElement this.pageHeight = height // Math.round(((parseInt($("#simulationArea").height())))/ratio)*ratio-50; // -50 for tool bar? Check again this.pageWidth = width // Math.round(((parseInt($("#simulationArea").width())))/ratio)*ratio; this.pageY = this.pageHeight - globalScope.oy @@ -59,10 +67,10 @@ export default miniMapArea = { this.maxX = this.pageX / globalScope.scale } - var h = this.maxY - this.minY - var w = this.maxX - this.minX + const h = this.maxY - this.minY + const w = this.maxX - this.minX - var ratio = Math.min(250 / h, 250 / w) + const ratio = Math.min(250 / h, 250 / w) if (h > w) { this.canvas.height = 250.0 this.canvas.width = (250.0 * w) / h @@ -74,22 +82,28 @@ export default miniMapArea = { this.canvas.height += 5 this.canvas.width += 5 - document.getElementById('miniMap').style.height = this.canvas.height - document.getElementById('miniMap').style.width = this.canvas.width + const miniMapElement = document.getElementById('miniMap') + if (miniMapElement) { + miniMapElement.style.height = `${this.canvas.height}px` + miniMapElement.style.width = `${this.canvas.width}px` + } + this.ctx = this.canvas.getContext('2d') this.play(ratio) }, - play(ratio) { + play(ratio: number) { if (lightMode || layoutModeGet()) return + if (!this.ctx) return this.ctx.fillStyle = '#bbb' - this.ctx.rect(0, 0, this.canvas.width, this.canvas.height) + this.ctx.rect(0, 0, this.canvas!.width, this.canvas!.height) this.ctx.fill() this.resolve(ratio) }, - resolve(ratio) { - if (lightMode) return + + resolve(ratio: number) { + if (lightMode || !this.ctx) return this.ctx.fillStyle = '#ddd' this.ctx.beginPath() @@ -108,15 +122,15 @@ export default miniMapArea = { this.ctx.fill() // to show the area of current canvas - var lst = updateOrder + const lst = updateOrder const miniFill = colors['mini_fill'] const miniStroke = colors['mini_stroke'] this.ctx.strokeStyle = miniStroke this.ctx.fillStyle = miniFill - for (var i = 0; i < lst.length; i++) { + for (let i = 0; i < lst.length; i++) { if (lst[i] === 'wires') { - for (var j = 0; j < globalScope[lst[i]].length; j++) { + for (let j = 0; j < globalScope[lst[i]].length; j++) { this.ctx.beginPath() this.ctx.moveTo( 2.5 + @@ -138,7 +152,7 @@ export default miniMapArea = { } } else if (lst[i] != 'nodes') { // Don't include SquareRGBLed here; it has correct size. - var ledY = 0 + let ledY = 0 if ( lst[i] == 'DigitalLed' || lst[i] == 'VariableLed' || @@ -147,11 +161,9 @@ export default miniMapArea = { ledY = 20 } - for (var j = 0; j < globalScope[lst[i]].length; j++) { - var xx = globalScope[lst[i]][j].x - simulationArea.minWidth - var yy = globalScope[lst[i]][j].y - simulationArea.minHeight + for (let j = 0; j < globalScope[lst[i]].length; j++) { + const obj = globalScope[lst[i]][j] this.ctx.beginPath() - var obj = globalScope[lst[i]][j] this.ctx.rect( 2.5 + (obj.x - obj.leftDimensionX - this.minX) * ratio, 2.5 + (obj.y - obj.upDimensionY - this.minY) * ratio, @@ -165,17 +177,29 @@ export default miniMapArea = { } } }, + clear() { if (lightMode) return $('#miniMapArea').css('z-index', '-1') - this.context.clearRect(0, 0, this.canvas.width, this.canvas.height) + if (this.ctx && this.canvas) { + this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) + } }, } -var lastMiniMapShown -export function updatelastMinimapShown() { + +let lastMiniMapShown: number | undefined + +/** + * Update the timestamp of when the minimap was last shown + */ +export function updatelastMinimapShown(): void { lastMiniMapShown = new Date().getTime() } -export function removeMiniMap() { + +/** + * Remove the minimap after a certain time period + */ +export function removeMiniMap(): void { if (lightMode) return if ( @@ -183,12 +207,17 @@ export function removeMiniMap() { simulationArea.mouseDown ) return - if (lastMiniMapShown + 2000 >= new Date().getTime()) { + + if (lastMiniMapShown && lastMiniMapShown + 2000 >= new Date().getTime()) { setTimeout( removeMiniMap, lastMiniMapShown + 2000 - new Date().getTime() ) return } + + // Using jQuery for the fade out effect $('#miniMap').fadeOut('fast') } + +export default miniMapArea diff --git a/src/simulator/src/types/minimap.types.ts b/src/simulator/src/types/minimap.types.ts new file mode 100644 index 000000000..2944bfc04 --- /dev/null +++ b/src/simulator/src/types/minimap.types.ts @@ -0,0 +1,37 @@ +// This interface defines the structure for the minimap area +// No imports needed for this interface file + +/** + * Interface for the miniMap area object + */ +export interface MiniMapAreaType { + /** The canvas element used for the minimap */ + canvas: HTMLCanvasElement | null + /** The 2D rendering context for the canvas */ + ctx: CanvasRenderingContext2D | null + /** Page height */ + pageHeight: number + /** Page width */ + pageWidth: number + /** Page Y coordinate */ + pageY: number + /** Page X coordinate */ + pageX: number + /** Minimum X coordinate */ + minX: number + /** Maximum X coordinate */ + maxX: number + /** Minimum Y coordinate */ + minY: number + /** Maximum Y coordinate */ + maxY: number + + /** Set up the minimap parameters and dimensions */ + setup(): void + /** Draw the outline of minimap and call resolve */ + play(ratio: number): void + /** Resolve all objects and draw them on minimap */ + resolve(ratio: number): void + /** Clear the minimap */ + clear(): void +} From 23c5c1bb45f0e68266ab638d889d5f7cb98edfae Mon Sep 17 00:00:00 2001 From: ShinichiShi Date: Tue, 21 Oct 2025 18:28:28 +0530 Subject: [PATCH 2/3] fix: positioning of map --- src/simulator/src/minimap.ts | 49 ++++++++++++------------ src/simulator/src/types/minimap.types.ts | 22 +---------- 2 files changed, 26 insertions(+), 45 deletions(-) diff --git a/src/simulator/src/minimap.ts b/src/simulator/src/minimap.ts index 905d58229..eb388828f 100644 --- a/src/simulator/src/minimap.ts +++ b/src/simulator/src/minimap.ts @@ -4,16 +4,26 @@ import { layoutModeGet } from './layoutMode' import { updateOrder } from './metadata' import { MiniMapAreaType } from './types/minimap.types' -// jQuery is available globally in this project +declare const lightMode: boolean +declare const globalScope: any +declare const width: number +declare const height: number declare const $: JQueryStatic -// Global variables are already declared in app.types.ts - /** + * @type {Object} miniMapArea * This object is used to draw the miniMap. + * @property {number} pageY + * @property {number} pageX + * @property {HTMLCanvasObject} canvas - the canvas object + * @property {function} setup - used to setup the parameters and dimensions + * @property {function} play - used to draw outline of minimap and call resolve + * @property {function} resolve - used to resolve all objects and draw them on minimap + * @property {function} clear - used to clear minimap + * @category minimap */ const miniMapArea: MiniMapAreaType = { - canvas: null, + canvas: document.getElementById('miniMapArea') as HTMLCanvasElement, ctx: null, pageHeight: 0, pageWidth: 0, @@ -78,17 +88,18 @@ const miniMapArea: MiniMapAreaType = { this.canvas.width = 250.0 this.canvas.height = (250.0 * h) / w } - this.canvas.height += 5 this.canvas.width += 5 - const miniMapElement = document.getElementById('miniMap') - if (miniMapElement) { - miniMapElement.style.height = `${this.canvas.height}px` - miniMapElement.style.width = `${this.canvas.width}px` - } + document.getElementById('miniMap')!.style.height = String( + this.canvas.height + ) + document.getElementById('miniMap')!.style.width = String( + this.canvas.width + ) this.ctx = this.canvas.getContext('2d') + // this.context = this.ctx || undefined this.play(ratio) }, @@ -97,6 +108,7 @@ const miniMapArea: MiniMapAreaType = { if (!this.ctx) return this.ctx.fillStyle = '#bbb' + this.ctx.beginPath() this.ctx.rect(0, 0, this.canvas!.width, this.canvas!.height) this.ctx.fill() this.resolve(ratio) @@ -181,24 +193,14 @@ const miniMapArea: MiniMapAreaType = { clear() { if (lightMode) return $('#miniMapArea').css('z-index', '-1') - if (this.ctx && this.canvas) { - this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height) - } + this.context!.clearRect(0, 0, this.canvas!.width, this.canvas!.height) }, } let lastMiniMapShown: number | undefined - -/** - * Update the timestamp of when the minimap was last shown - */ export function updatelastMinimapShown(): void { lastMiniMapShown = new Date().getTime() } - -/** - * Remove the minimap after a certain time period - */ export function removeMiniMap(): void { if (lightMode) return @@ -208,15 +210,14 @@ export function removeMiniMap(): void { ) return - if (lastMiniMapShown && lastMiniMapShown + 2000 >= new Date().getTime()) { + if ((lastMiniMapShown as number) + 2000 >= new Date().getTime()) { setTimeout( removeMiniMap, - lastMiniMapShown + 2000 - new Date().getTime() + (lastMiniMapShown as number) + 2000 - new Date().getTime() ) return } - // Using jQuery for the fade out effect $('#miniMap').fadeOut('fast') } diff --git a/src/simulator/src/types/minimap.types.ts b/src/simulator/src/types/minimap.types.ts index 2944bfc04..60434bbf4 100644 --- a/src/simulator/src/types/minimap.types.ts +++ b/src/simulator/src/types/minimap.types.ts @@ -1,37 +1,17 @@ -// This interface defines the structure for the minimap area -// No imports needed for this interface file - -/** - * Interface for the miniMap area object - */ export interface MiniMapAreaType { - /** The canvas element used for the minimap */ canvas: HTMLCanvasElement | null - /** The 2D rendering context for the canvas */ ctx: CanvasRenderingContext2D | null - /** Page height */ + context?: CanvasRenderingContext2D pageHeight: number - /** Page width */ pageWidth: number - /** Page Y coordinate */ pageY: number - /** Page X coordinate */ pageX: number - /** Minimum X coordinate */ minX: number - /** Maximum X coordinate */ maxX: number - /** Minimum Y coordinate */ minY: number - /** Maximum Y coordinate */ maxY: number - - /** Set up the minimap parameters and dimensions */ setup(): void - /** Draw the outline of minimap and call resolve */ play(ratio: number): void - /** Resolve all objects and draw them on minimap */ resolve(ratio: number): void - /** Clear the minimap */ clear(): void } From ff1cd0a19442147d38bf4dba931025fd91285771 Mon Sep 17 00:00:00 2001 From: ShinichiShi Date: Tue, 21 Oct 2025 23:10:11 +0530 Subject: [PATCH 3/3] fix: coderabbit suggestions --- src/simulator/src/minimap.ts | 11 ++++++++--- src/simulator/src/types/minimap.types.ts | 1 - 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/simulator/src/minimap.ts b/src/simulator/src/minimap.ts index eb388828f..e801eeb11 100644 --- a/src/simulator/src/minimap.ts +++ b/src/simulator/src/minimap.ts @@ -23,7 +23,7 @@ declare const $: JQueryStatic * @category minimap */ const miniMapArea: MiniMapAreaType = { - canvas: document.getElementById('miniMapArea') as HTMLCanvasElement, + canvas: document.getElementById('miniMapArea') as HTMLCanvasElement | null, ctx: null, pageHeight: 0, pageWidth: 0, @@ -38,7 +38,8 @@ const miniMapArea: MiniMapAreaType = { if (lightMode) return this.canvas = document.getElementById( 'miniMapArea' - ) as HTMLCanvasElement + ) as HTMLCanvasElement | null + if (!this.canvas) return this.pageHeight = height // Math.round(((parseInt($("#simulationArea").height())))/ratio)*ratio-50; // -50 for tool bar? Check again this.pageWidth = width // Math.round(((parseInt($("#simulationArea").width())))/ratio)*ratio; this.pageY = this.pageHeight - globalScope.oy @@ -100,6 +101,7 @@ const miniMapArea: MiniMapAreaType = { this.ctx = this.canvas.getContext('2d') // this.context = this.ctx || undefined + if (!this.ctx) return this.play(ratio) }, @@ -193,7 +195,10 @@ const miniMapArea: MiniMapAreaType = { clear() { if (lightMode) return $('#miniMapArea').css('z-index', '-1') - this.context!.clearRect(0, 0, this.canvas!.width, this.canvas!.height) + const ctx = this.ctx + const canvas = this.canvas + if (!ctx || !canvas) return + ctx.clearRect(0, 0, canvas.width, canvas.height) }, } diff --git a/src/simulator/src/types/minimap.types.ts b/src/simulator/src/types/minimap.types.ts index 60434bbf4..9ced02987 100644 --- a/src/simulator/src/types/minimap.types.ts +++ b/src/simulator/src/types/minimap.types.ts @@ -1,7 +1,6 @@ export interface MiniMapAreaType { canvas: HTMLCanvasElement | null ctx: CanvasRenderingContext2D | null - context?: CanvasRenderingContext2D pageHeight: number pageWidth: number pageY: number