From a30dec998408f7f30cac225751bce41c75b13abc Mon Sep 17 00:00:00 2001 From: ANIRUDH Date: Mon, 20 Oct 2025 18:44:17 +0530 Subject: [PATCH 1/2] changed the embedListeners.js to embedListeners.ts --- src/simulator/src/embedListeners.js | 260 ---------------------------- 1 file changed, 260 deletions(-) delete mode 100644 src/simulator/src/embedListeners.js diff --git a/src/simulator/src/embedListeners.js b/src/simulator/src/embedListeners.js deleted file mode 100644 index 6f7aceced..000000000 --- a/src/simulator/src/embedListeners.js +++ /dev/null @@ -1,260 +0,0 @@ -/* eslint-disable import/no-cycle */ -// Listeners when circuit is embedded -/* eslint-disable no-plusplus */ -/* eslint-disable func-names */ -/* eslint-disable prefer-const */ -/* eslint-disable max-len */ -// Refer listeners.js -import { simulationArea } from './simulationArea' -import { - scheduleUpdate, - update, - updateSelectionsAndPane, - wireToBeCheckedSet, - updatePositionSet, - updateSimulationSet, - updateCanvasSet, - gridUpdateSet, - errorDetectedSet, -} from './engine' -import { changeScale } from './canvasApi' -import { ZoomIn, ZoomOut, pinchZoom, getCoordinate, } from './listeners'; - -const unit = 10 -let embedCoordinate; -/** *Function embedPanStart - *This function hepls to initialize mouse and touch - *For now variable name starts with mouse like mouseDown are used both - touch and mouse will change in future -*/ -function embedPanStart(e) { - embedCoordinate = getCoordinate(e); - errorDetectedSet(false); - updateSimulationSet(true); - updatePositionSet(true); - updateCanvasSet(true); - - simulationArea.lastSelected = undefined; - simulationArea.selected = false; - simulationArea.hover = undefined; - const rect = simulationArea.canvas.getBoundingClientRect(); - simulationArea.mouseDownRawX = (embedCoordinate.x - rect.left) * DPR; - simulationArea.mouseDownRawY = (embedCoordinate.y - rect.top) * DPR; - simulationArea.mouseDownX = Math.round(((simulationArea.mouseDownRawX - globalScope.ox) / globalScope.scale) / unit) * unit; - simulationArea.mouseDownY = Math.round(((simulationArea.mouseDownRawY - globalScope.oy) / globalScope.scale) / unit) * unit; - simulationArea.mouseDown = true; - simulationArea.oldx = globalScope.ox; - simulationArea.oldy = globalScope.oy; - e.preventDefault(); - scheduleUpdate(1); -} -/** *Function embedPanMove - *This function hepls to move simulator and its elements using touch and mouse - *For now variable name starts with mouse like mouseDown are used both - touch and mouse will change in future -*/ -function embedPanMove(e) { - embedCoordinate = getCoordinate(e); - if (!simulationArea.touch || e.touches.length === 1) { - const rect = simulationArea.canvas.getBoundingClientRect(); - simulationArea.mouseRawX = (embedCoordinate.x - rect.left) * DPR; - simulationArea.mouseRawY = (embedCoordinate.y - rect.top) * DPR; - simulationArea.mouseXf = (simulationArea.mouseRawX - globalScope.ox) / globalScope.scale; - simulationArea.mouseYf = (simulationArea.mouseRawY - globalScope.oy) / globalScope.scale; - simulationArea.mouseX = Math.round(simulationArea.mouseXf / unit) * unit; - simulationArea.mouseY = Math.round(simulationArea.mouseYf / unit) * unit; - updateCanvasSet(true); - if (simulationArea.lastSelected == globalScope.root) { - updateCanvasSet(true); - let fn; - fn = function () { - updateSelectionsAndPane(); - }; - scheduleUpdate(0, 20, fn); - } else { - scheduleUpdate(0, 200); - } - } - if (simulationArea.touch && e.touches.length === 2) { - pinchZoom(e); - } -} -/** *Function embedPanEnd - *This function update simulator after mouse and touch end - *For now variable name starts with mouse like mouseDown are used both - touch and mouse will change in future -*/ -function embedPanEnd() { - simulationArea.mouseDown = false; - errorDetectedSet(false); - updateSimulationSet(true); - updatePositionSet(true); - updateCanvasSet(true); - gridUpdateSet(true); - wireToBeCheckedSet(1); - scheduleUpdate(1); -} -/** *Function BlockElementPan - *This function block the pan of elements since in embed simulator you can only view simulator NOT update -*/ - -function BlockElementPan() { - const ele = document.getElementById('elementName'); - if (globalScope && simulationArea && simulationArea.objectList) { - let { objectList } = simulationArea; - objectList = objectList.filter((val) => val !== 'wires'); - for (let i = 0; i < objectList.length; i++) { - for (let j = 0; j < globalScope[objectList[i]].length; j++) { - if (globalScope[objectList[i]][j].isHover()) { - ele.style.display = 'block'; - if (objectList[i] === 'SubCircuit') { - ele.innerHTML = `Subcircuit: ${globalScope.SubCircuit[j].data.name}`; - } else { - ele.innerHTML = `CircuitElement: ${objectList[i]}`; - } - return; - } - } - } - } - ele.style.display = 'none'; - document.getElementById('elementName').innerHTML = ''; -} - -export default function startListeners() { - window.addEventListener('keyup', (e) => { - scheduleUpdate(1); - if (e.keyCode == 16) { - simulationArea.shiftDown = false; - } - if (e.key == 'Meta' || e.key == 'Control') { - simulationArea.controlDown = false; - } - }); - // All event listeners starts from here - document.getElementById('simulationArea').addEventListener('mousedown', (e) => { - simulationArea.touch = false; - embedPanStart(e); - }); - document.getElementById('simulationArea').addEventListener('mousemove', () => { - simulationArea.touch = false; - BlockElementPan(); - }); - document.getElementById('simulationArea').addEventListener('touchstart', (e) => { - simulationArea.touch = true; - embedPanStart(e); - }); - document.getElementById('simulationArea').addEventListener('touchmove', () => { - simulationArea.touch = true; - BlockElementPan(); - }); - window.addEventListener('mousemove', (e) => { - embedPanMove(e); - }); - window.addEventListener('touchmove', (e) => { - embedPanMove(e); - }); - window.addEventListener('mouseup', () => { - embedPanEnd(); - }); - window.addEventListener('mousedown', function () { - this.focus(); - }); - window.addEventListener('touchend', () => { - embedPanEnd(); - }); - window.addEventListener('touchstart', function () { - this.focus(); - }); - document.getElementById('simulationArea').addEventListener('mousewheel', MouseScroll); - document.getElementById('simulationArea').addEventListener('DOMMouseScroll', MouseScroll); - - window.addEventListener('keydown', (e) => { - errorDetectedSet(false); - updateSimulationSet(true); - updatePositionSet(true); - - // zoom in (+) - if (e.key == 'Meta' || e.key == 'Control') { - simulationArea.controlDown = true; - } - if (simulationArea.controlDown && (e.keyCode == 187 || e.KeyCode == 171)) { - e.preventDefault(); - ZoomIn(); - } - // zoom out (-) - if (simulationArea.controlDown && (e.keyCode == 189 || e.Keycode == 173)) { - e.preventDefault(); - ZoomOut(); - } - - if (simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) return; - - scheduleUpdate(1); - updateCanvasSet(true); - - if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown) { - if (e.key.toString().length == 1 || e.key.toString() == 'Backspace') { - simulationArea.lastSelected.keyDown(e.key.toString()); - return; - } - } - if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown2) { - if (e.key.toString().length == 1) { - simulationArea.lastSelected.keyDown2(e.key.toString()); - return; - } - } - - // if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown3) { - // if (e.key.toString() != "Backspace" && e.key.toString() != "Delete") { - // simulationArea.lastSelected.keyDown3(e.key.toString()); - // return; - // } - - // } - - if (e.key == 'T' || e.key == 't') { - simulationArea.changeClockTime(prompt('Enter Time:')); - } - }); - document.getElementById('simulationArea').addEventListener('dblclick', () => { - scheduleUpdate(2); - if (simulationArea.lastSelected && simulationArea.lastSelected.dblclick !== undefined) { - simulationArea.lastSelected.dblclick(); - } - }); - function MouseScroll(event) { - updateCanvasSet(true); - - event.preventDefault(); - const deltaY = event.wheelDelta ? event.wheelDelta : -event.detail; - const scrolledUp = deltaY < 0; - const scrolledDown = deltaY > 0; - - if (event.ctrlKey) { - if (scrolledUp && globalScope.scale > 0.5 * DPR) { - changeScale(-0.1 * DPR); - } - if (scrolledDown && globalScope.scale < 4 * DPR) { - changeScale(0.1 * DPR); - } - } else { - if (scrolledUp && globalScope.scale < 4 * DPR) { - changeScale(0.1 * DPR); - } - if (scrolledDown && globalScope.scale > 0.5 * DPR) { - changeScale(-0.1 * DPR); - } - } - - updateCanvasSet(true); - gridUpdateSet(true); - update(); // Schedule update not working, this is INEFFICENT - } -} - -// eslint-disable-next-line no-unused-vars -var isIe = - navigator.userAgent.toLowerCase().indexOf('msie') != -1 || - navigator.userAgent.toLowerCase().indexOf('trident') != -1 From cf380e9545d67498bea13e0d147c184ecd366973 Mon Sep 17 00:00:00 2001 From: ANIRUDH Date: Mon, 20 Oct 2025 18:46:07 +0530 Subject: [PATCH 2/2] changed the embedListeners.js to embedListeners.ts --- src/simulator/src/embedListeners.ts | 270 ++++++++++++++++++++++++++++ 1 file changed, 270 insertions(+) create mode 100644 src/simulator/src/embedListeners.ts diff --git a/src/simulator/src/embedListeners.ts b/src/simulator/src/embedListeners.ts new file mode 100644 index 000000000..dbd5a2aa9 --- /dev/null +++ b/src/simulator/src/embedListeners.ts @@ -0,0 +1,270 @@ +/* eslint-disable import/no-cycle */ +// Listeners when circuit is embedded +/* eslint-disable no-plusplus */ +/* eslint-disable func-names */ +/* eslint-disable prefer-const */ +/* eslint-disable max-len */ +// Refer listeners.js +import { simulationArea } from './simulationArea'; +import { + scheduleUpdate, + update, + updateSelectionsAndPane, + wireToBeCheckedSet, + updatePositionSet, + updateSimulationSet, + updateCanvasSet, + gridUpdateSet, + errorDetectedSet, +} from './engine'; +import { changeScale } from './canvasApi'; +import { ZoomIn, ZoomOut, pinchZoom, getCoordinate } from './listeners'; + +declare const globalScope: any; +declare const DPR: any; +declare const width: any; +declare const height: any; + +const unit: number = 10; +let embedCoordinate: any; + +/** *Function embedPanStart + *This function hepls to initialize mouse and touch + *For now variable name starts with mouse like mouseDown are used both + touch and mouse will change in future +*/ +function embedPanStart(e: any): void { + embedCoordinate = getCoordinate(e); + errorDetectedSet(false); + updateSimulationSet(true); + updatePositionSet(true); + updateCanvasSet(true); + + simulationArea.lastSelected = undefined as any; + simulationArea.selected = false; + simulationArea.hover = undefined as any; + const rect = (simulationArea as any).canvas.getBoundingClientRect(); + (simulationArea as any).mouseDownRawX = (embedCoordinate.x - rect.left) * (DPR as any); + (simulationArea as any).mouseDownRawY = (embedCoordinate.y - rect.top) * (DPR as any); + (simulationArea as any).mouseDownX = Math.round((((simulationArea as any).mouseDownRawX - (globalScope as any).ox) / (globalScope as any).scale) / unit) * unit; + (simulationArea as any).mouseDownY = Math.round((((simulationArea as any).mouseDownRawY - (globalScope as any).oy) / (globalScope as any).scale) / unit) * unit; + (simulationArea as any).mouseDown = true; + (simulationArea as any).oldx = (globalScope as any).ox; + (simulationArea as any).oldy = (globalScope as any).oy; + e.preventDefault(); + scheduleUpdate(1); +} +/** *Function embedPanMove + *This function hepls to move simulator and its elements using touch and mouse + *For now variable name starts with mouse like mouseDown are used both + touch and mouse will change in future +*/ +function embedPanMove(e: any): void { + embedCoordinate = getCoordinate(e); + if (!simulationArea.touch || e.touches.length === 1) { + const rect = (simulationArea as any).canvas.getBoundingClientRect(); + (simulationArea as any).mouseRawX = (embedCoordinate.x - rect.left) * (DPR as any); + (simulationArea as any).mouseRawY = (embedCoordinate.y - rect.top) * (DPR as any); + (simulationArea as any).mouseXf = ((simulationArea as any).mouseRawX - (globalScope as any).ox) / (globalScope as any).scale; + (simulationArea as any).mouseYf = ((simulationArea as any).mouseRawY - (globalScope as any).oy) / (globalScope as any).scale; + (simulationArea as any).mouseX = Math.round((simulationArea as any).mouseXf / unit) * unit; + (simulationArea as any).mouseY = Math.round((simulationArea as any).mouseYf / unit) * unit; + updateCanvasSet(true); + if ((simulationArea as any).lastSelected == (globalScope as any).root) { + updateCanvasSet(true); + let fn: any; + fn = function () { + updateSelectionsAndPane(); + }; + scheduleUpdate(0, 20, fn); + } else { + scheduleUpdate(0, 200); + } + } + if (simulationArea.touch && e.touches.length === 2) { + pinchZoom(e); + } +} +/** *Function embedPanEnd + *This function update simulator after mouse and touch end + *For now variable name starts with mouse like mouseDown are used both + touch and mouse will change in future +*/ +function embedPanEnd(): void { + (simulationArea as any).mouseDown = false; + errorDetectedSet(false); + updateSimulationSet(true); + updatePositionSet(true); + updateCanvasSet(true); + gridUpdateSet(true); + wireToBeCheckedSet(1); + scheduleUpdate(1); +} +/** *Function BlockElementPan + *This function block the pan of elements since in embed simulator you can only view simulator NOT update +*/ + +function BlockElementPan(): void { + const ele = document.getElementById('elementName'); + if (globalScope && simulationArea && simulationArea.objectList) { + let { objectList } = simulationArea; + objectList = objectList.filter((val: any) => val !== 'wires'); + for (let i = 0; i < objectList.length; i++) { + for (let j = 0; j < globalScope[objectList[i]].length; j++) { + if (globalScope[objectList[i]][j].isHover()) { + ele!.style.display = 'block'; + if (objectList[i] === 'SubCircuit') { + ele!.innerHTML = `Subcircuit: ${globalScope.SubCircuit[j].data.name}`; + } else { + ele!.innerHTML = `CircuitElement: ${objectList[i]}`; + } + return; + } + } + } + } + ele!.style.display = 'none'; + document.getElementById('elementName')!.innerHTML = ''; +} + +export default function startListeners(): void { + window.addEventListener('keyup', (e: any) => { + scheduleUpdate(1); + if (e.keyCode == 16) { + simulationArea.shiftDown = false; + } + if (e.key == 'Meta' || e.key == 'Control') { + simulationArea.controlDown = false; + } + }); + // All event listeners starts from here + document.getElementById('simulationArea')!.addEventListener('mousedown', (e: any) => { + simulationArea.touch = false; + embedPanStart(e); + }); + document.getElementById('simulationArea')!.addEventListener('mousemove', () => { + simulationArea.touch = false; + BlockElementPan(); + }); + document.getElementById('simulationArea')!.addEventListener('touchstart', (e: any) => { + simulationArea.touch = true; + embedPanStart(e); + }); + document.getElementById('simulationArea')!.addEventListener('touchmove', () => { + simulationArea.touch = true; + BlockElementPan(); + }); + window.addEventListener('mousemove', (e: any) => { + embedPanMove(e); + }); + window.addEventListener('touchmove', (e: any) => { + embedPanMove(e); + }); + window.addEventListener('mouseup', () => { + embedPanEnd(); + }); + window.addEventListener('mousedown', function () { + this.focus(); + }); + window.addEventListener('touchend', () => { + embedPanEnd(); + }); + window.addEventListener('touchstart', function () { + this.focus(); + }); + document.getElementById('simulationArea')!.addEventListener('mousewheel', MouseScroll); + document.getElementById('simulationArea')!.addEventListener('DOMMouseScroll', MouseScroll); + + window.addEventListener('keydown', (e: any) => { + errorDetectedSet(false); + updateSimulationSet(true); + updatePositionSet(true); + + // zoom in (+) + if (e.key == 'Meta' || e.key == 'Control') { + simulationArea.controlDown = true; + } + if (simulationArea.controlDown && (e.keyCode == 187 || e.KeyCode == 171)) { + e.preventDefault(); + ZoomIn(); + } + // zoom out (-) + if (simulationArea.controlDown && (e.keyCode == 189 || e.Keycode == 173)) { + e.preventDefault(); + ZoomOut(); + } + + if (simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height) return; + + scheduleUpdate(1); + updateCanvasSet(true); + + if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown) { + if (e.key.toString().length == 1 || e.key.toString() == 'Backspace') { + simulationArea.lastSelected.keyDown(e.key.toString()); + return; + } + } + if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown2) { + if (e.key.toString().length == 1) { + simulationArea.lastSelected.keyDown2(e.key.toString()); + return; + } + } + + // if (simulationArea.lastSelected && simulationArea.lastSelected.keyDown3) { + // if (e.key.toString() != "Backspace" && e.key.toString() != "Delete") { + // simulationArea.lastSelected.keyDown3(e.key.toString()); + // return; + // } + + // } + + if (e.key == 'T' || e.key == 't') { + const input = prompt('Enter Time:'); + if (input !== null) { + simulationArea.changeClockTime?.(Number(input)); + } + + } + }); + document.getElementById('simulationArea')!.addEventListener('dblclick', () => { + scheduleUpdate(2); + if (simulationArea.lastSelected && simulationArea.lastSelected.dblclick !== undefined) { + simulationArea.lastSelected.dblclick(); + } + }); + function MouseScroll(event: any): void { + updateCanvasSet(true); + + event.preventDefault(); + const deltaY = event.wheelDelta ? event.wheelDelta : -event.detail; + const scrolledUp = deltaY < 0; + const scrolledDown = deltaY > 0; + + if (event.ctrlKey) { + if (scrolledUp && globalScope.scale > 0.5 * DPR) { + changeScale(-0.1 * DPR); + } + if (scrolledDown && globalScope.scale < 4 * DPR) { + changeScale(0.1 * DPR); + } + } else { + if (scrolledUp && globalScope.scale < 4 * DPR) { + changeScale(0.1 * DPR); + } + if (scrolledDown && globalScope.scale > 0.5 * DPR) { + changeScale(-0.1 * DPR); + } + } + + updateCanvasSet(true); + gridUpdateSet(true); + update(); // Schedule update not working, this is INEFFICENT + } +} + +// eslint-disable-next-line no-unused-vars +var isIe = + navigator.userAgent.toLowerCase().indexOf('msie') != -1 || + navigator.userAgent.toLowerCase().indexOf('trident') != -1; \ No newline at end of file