-
diff --git a/src/components/ReportIssue/ReportIssueButton.vue b/src/components/ReportIssue/ReportIssueButton.vue
index 128b6288..69148088 100644
--- a/src/components/ReportIssue/ReportIssueButton.vue
+++ b/src/components/ReportIssue/ReportIssueButton.vue
@@ -5,6 +5,7 @@
class="btn btn-primary text-light"
data-toggle="modal"
data-target=".issue"
+ :style="{ bottom: simulatorMobileStore.showElementsPanel ? '250px' : '120px' }"
@click="openReportingModal"
>
{{
@@ -15,6 +16,9 @@
diff --git a/src/simulator/src/Verilog2CV.js b/src/simulator/src/Verilog2CV.js
index dca56483..bc1a755d 100644
--- a/src/simulator/src/Verilog2CV.js
+++ b/src/simulator/src/Verilog2CV.js
@@ -31,6 +31,8 @@ import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/display/autorefresh.js'
import { showError, showMessage } from './utils'
import { showProperties } from './ux'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
+import { toRefs } from 'vue'
var editor
var verilogMode = false
@@ -42,7 +44,17 @@ export async function createVerilogCircuit() {
true,
true
)
- if (returned) verilogModeSet(true)
+
+ if (returned) {
+ verilogModeSet(true)
+
+ try {
+ const simulatorMobileStore = toRefs(useSimulatorMobileStore())
+ simulatorMobileStore.isVerilog.value = true
+ } catch (error) {
+ console.error('Failed to update simulatorMobileStore:', error)
+ }
+ }
}
export function saveVerilogCode() {
@@ -72,11 +84,26 @@ export function verilogModeSet(mode) {
if (mode == verilogMode) return
verilogMode = mode
if (mode) {
+ const code_window = document.getElementById('code-window')
+ if(code_window)
document.getElementById('code-window').style.display = 'block'
+
+ const elementPanel = document.querySelector('.elementPanel')
+ if(elementPanel)
document.querySelector('.elementPanel').style.display = 'none'
+
+ const timingDiagramPanel = document.querySelector('.timing-diagram-panel')
+ if(timingDiagramPanel)
document.querySelector('.timing-diagram-panel').style.display = 'none'
+
+ const quickBtn = document.querySelector('.quick-btn')
+ if(quickBtn)
document.querySelector('.quick-btn').style.display = 'none'
+
+ const verilogEditorPanel = document.getElementById('verilogEditorPanel')
+ if(verilogEditorPanel)
document.getElementById('verilogEditorPanel').style.display = 'block'
+
if (!embed) {
simulationArea.lastSelected = globalScope.root
showProperties(undefined)
@@ -84,10 +111,24 @@ export function verilogModeSet(mode) {
}
resetVerilogCode()
} else {
+ const code_window = document.getElementById('code-window')
+ if(code_window)
document.getElementById('code-window').style.display = 'none'
+
+ const elementPanel = document.querySelector('.elementPanel')
+ if(elementPanel)
document.querySelector('.elementPanel').style.display = ''
+
+ const timingDiagramPanel = document.querySelector('.timing-diagram-panel')
+ if(timingDiagramPanel)
document.querySelector('.timing-diagram-panel').style.display = ''
+
+ const quickBtn = document.querySelector('.quick-btn')
+ if(quickBtn)
document.querySelector('.quick-btn').style.display = ''
+
+ const verilogEditorPanel = document.getElementById('verilogEditorPanel')
+ if(verilogEditorPanel)
document.getElementById('verilogEditorPanel').style.display = 'none'
}
}
diff --git a/src/simulator/src/circuit.ts b/src/simulator/src/circuit.ts
index 3704cdec..ad68c406 100644
--- a/src/simulator/src/circuit.ts
+++ b/src/simulator/src/circuit.ts
@@ -37,6 +37,7 @@ import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
import { toRefs } from 'vue'
import { provideCircuitName } from '#/components/helpers/promptComponent/PromptComponent.vue'
import { deleteCurrentCircuit } from '#/components/helpers/deleteCircuit/DeleteCircuit.vue'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
import { inputList, moduleList } from './metadata'
export const circuitProperty = {
@@ -67,12 +68,14 @@ export function switchCircuit(id: string) {
const simulatorStore = SimulatorStore()
const { circuit_list } = toRefs(simulatorStore)
const { activeCircuit } = toRefs(simulatorStore)
+ const simulatorMobileStore = toRefs(useSimulatorMobileStore())
if (layoutModeGet()) {
toggleLayoutMode()
}
if (!scopeList[id].verilogMetadata.isVerilogCircuit) {
verilogModeSet(false)
+ simulatorMobileStore.isVerilog.value = false
}
// globalScope.fixLayout();
@@ -88,6 +91,7 @@ export function switchCircuit(id: string) {
globalScope = scopeList[id]
if (globalScope.verilogMetadata.isVerilogCircuit) {
verilogModeSet(true)
+ simulatorMobileStore.isVerilog.value = true
}
if (globalScope.isVisible()) {
// $(`#${id}`).addClass('current')
@@ -203,11 +207,13 @@ export function newCircuit(name: string | undefined, id: string | undefined, isV
const { circuit_list } = toRefs(simulatorStore)
const { activeCircuit } = toRefs(simulatorStore)
const { circuit_name_clickable } = toRefs(simulatorStore)
+ const simulatorMobileStore = toRefs(useSimulatorMobileStore())
if (layoutModeGet()) {
toggleLayoutMode()
}
if (verilogModeGet()) {
verilogModeSet(false)
+ simulatorMobileStore.isVerilog.value = false
}
name = name || 'Untitled-Circuit'
name = stripTags(name)
diff --git a/src/simulator/src/circuitElement.js b/src/simulator/src/circuitElement.js
index 51c5addc..a7d5565e 100644
--- a/src/simulator/src/circuitElement.js
+++ b/src/simulator/src/circuitElement.js
@@ -1,5 +1,6 @@
/* eslint-disable no-multi-assign */
/* eslint-disable no-bitwise */
+/* eslint-disable */
import { scheduleUpdate } from './engine'
import { simulationArea } from './simulationArea'
import {
@@ -479,8 +480,8 @@ export default class CircuitElement {
* NOT OVERRIDABLE
*/
isHover() {
- var mX = simulationArea.mouseXf - this.x
- var mY = this.y - simulationArea.mouseYf
+ var mX = simulationArea.touch ? simulationArea.mouseDownX - this.x : simulationArea.mouseXf - this.x;
+ var mY = simulationArea.touch ? this.y - simulationArea.mouseDownY : this.y - simulationArea.mouseYf;
var rX = this.rightDimensionX
var lX = this.leftDimensionX
@@ -646,7 +647,7 @@ export default class CircuitElement {
/**
Draws element in layout mode (inside the subcircuit)
@param {number} xOffset - x position of the subcircuit
- @param {number} yOffset - y position of the subcircuit
+ @param {number} yOffset - y position of the subcircuit
Called by subcirucit.js/customDraw() - for drawing as a part of another circuit
and layoutMode.js/renderLayout() - for drawing in layoutMode
diff --git a/src/simulator/src/data.js b/src/simulator/src/data.js
index f7cc748c..bb9df0e7 100644
--- a/src/simulator/src/data.js
+++ b/src/simulator/src/data.js
@@ -39,7 +39,7 @@ logixFunction.showTourGuide = showTourGuideHelper
logixFunction.newVerilogModule = createVerilogCircuit
logixFunction.generateVerilog = generateVerilog
logixFunction.bitconverter = bitConverterDialog
-logixFunction.createNewCircuitScope = createNewCircuitScope
+logixFunction.createNewCircuitScope = createNewCircuit
logixFunction.customShortcut = keyBinder
logixFunction.ExportProject = ExportProject
logixFunction.ImportProject = ImportProject
@@ -51,3 +51,8 @@ function showTourGuideHelper() {
showTourGuide()
}, 100)
}
+
+// Hack to call createNewCircuitScope with keyboard shortcut
+function createNewCircuit() {
+ createNewCircuitScope()
+}
diff --git a/src/simulator/src/embedListeners.js b/src/simulator/src/embedListeners.js
index cce262cb..6f7acece 100644
--- a/src/simulator/src/embedListeners.js
+++ b/src/simulator/src/embedListeners.js
@@ -1,5 +1,9 @@
/* 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 {
@@ -14,236 +18,243 @@ import {
errorDetectedSet,
} from './engine'
import { changeScale } from './canvasApi'
-import { ZoomIn, ZoomOut } from './listeners'
+import { ZoomIn, ZoomOut, pinchZoom, getCoordinate, } from './listeners';
-var unit = 10
+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)
+ scheduleUpdate(1);
if (e.keyCode == 16) {
- simulationArea.shiftDown = false
+ simulationArea.shiftDown = false;
}
if (e.key == 'Meta' || e.key == 'Control') {
- simulationArea.controlDown = false
+ simulationArea.controlDown = false;
}
- })
-
- document
- .getElementById('simulationArea')
- .addEventListener('mousedown', (e) => {
- errorDetectedSet(false)
- updateSimulationSet(true)
- updatePositionSet(true)
- updateCanvasSet(true)
-
- simulationArea.lastSelected = undefined
- simulationArea.selected = false
- simulationArea.hover = undefined
- var rect = simulationArea.canvas.getBoundingClientRect()
- simulationArea.mouseDownRawX = (e.clientX - rect.left) * DPR
- simulationArea.mouseDownRawY = (e.clientY - 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)
- })
-
- document
- .getElementById('simulationArea')
- .addEventListener('mousemove', () => {
- var ele = document.getElementById('elementName')
- if (globalScope && simulationArea && simulationArea.objectList) {
- var { objectList } = simulationArea
- objectList = objectList.filter((val) => val !== 'wires')
-
- for (var i = 0; i < objectList.length; i++) {
- for (
- var 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 = ''
- })
-
+ });
+ // 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) => {
- var rect = simulationArea.canvas.getBoundingClientRect()
- simulationArea.mouseRawX = (e.clientX - rect.left) * DPR
- simulationArea.mouseRawY = (e.clientY - 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)
- var fn
- fn = function () {
- updateSelectionsAndPane()
- }
- scheduleUpdate(0, 20, fn)
- } else {
- scheduleUpdate(0, 200)
- }
- })
+ 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)
+ errorDetectedSet(false);
+ updateSimulationSet(true);
+ updatePositionSet(true);
// zoom in (+)
if (e.key == 'Meta' || e.key == 'Control') {
- simulationArea.controlDown = true
+ simulationArea.controlDown = true;
}
-
- if (
- simulationArea.controlDown &&
- (e.keyCode == 187 || e.KeyCode == 171)
- ) {
- e.preventDefault()
- ZoomIn()
+ 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.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.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 (simulationArea.lastSelected && simulationArea.lastSelected.keyDown2) {
if (e.key.toString().length == 1) {
- simulationArea.lastSelected.keyDown2(e.key.toString())
- return
+ 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:'))
+ simulationArea.changeClockTime(prompt('Enter Time:'));
}
- })
- document
- .getElementById('simulationArea')
- .addEventListener('dblclick', (e) => {
- scheduleUpdate(2)
- if (
- simulationArea.lastSelected &&
- simulationArea.lastSelected.dblclick !== undefined
- ) {
- simulationArea.lastSelected.dblclick()
- }
- })
-
- window.addEventListener('mouseup', (e) => {
- simulationArea.mouseDown = false
- errorDetectedSet(false)
- updateSimulationSet(true)
- updatePositionSet(true)
- updateCanvasSet(true)
- gridUpdateSet(true)
- wireToBeCheckedSet(1)
-
- scheduleUpdate(1)
- })
- window.addEventListener('mousedown', function (e) {
- this.focus()
- })
-
- document
- .getElementById('simulationArea')
- .addEventListener('mousewheel', MouseScroll)
- document
- .getElementById('simulationArea')
- .addEventListener('DOMMouseScroll', MouseScroll)
-
+ });
+ document.getElementById('simulationArea').addEventListener('dblclick', () => {
+ scheduleUpdate(2);
+ if (simulationArea.lastSelected && simulationArea.lastSelected.dblclick !== undefined) {
+ simulationArea.lastSelected.dblclick();
+ }
+ });
function MouseScroll(event) {
- updateCanvasSet(true)
+ updateCanvasSet(true);
- event.preventDefault()
- var deltaY = event.wheelDelta ? event.wheelDelta : -event.detail
- var scrolledUp = deltaY < 0
- var scrolledDown = deltaY > 0
+ 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)
+ changeScale(-0.1 * DPR);
}
if (scrolledDown && globalScope.scale < 4 * DPR) {
- changeScale(0.1 * DPR)
+ changeScale(0.1 * DPR);
}
} else {
if (scrolledUp && globalScope.scale < 4 * DPR) {
- changeScale(0.1 * DPR)
+ changeScale(0.1 * DPR);
}
if (scrolledDown && globalScope.scale > 0.5 * DPR) {
- changeScale(-0.1 * DPR)
+ changeScale(-0.1 * DPR);
}
}
- updateCanvasSet(true)
- gridUpdateSet(true)
- update() // Schedule update not working, this is INEFFICENT
+ 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
diff --git a/src/simulator/src/events.js b/src/simulator/src/events.js
index 76c6f066..07de4275 100644
--- a/src/simulator/src/events.js
+++ b/src/simulator/src/events.js
@@ -17,11 +17,10 @@ import { moduleList, updateOrder } from './metadata'
/**
* Helper function to paste
- * @param {JSON} copyData - the data to be pasted
* @category events
*/
export function paste(copyData) {
- if (copyData === undefined) return
+ if (copyData === 'undefined') return
var data = JSON.parse(copyData)
if (!data.logixClipBoardData) return
diff --git a/src/simulator/src/hotkey_binder/model/actions.js b/src/simulator/src/hotkey_binder/model/actions.js
index c21a9539..113f37cc 100644
--- a/src/simulator/src/hotkey_binder/model/actions.js
+++ b/src/simulator/src/hotkey_binder/model/actions.js
@@ -184,12 +184,12 @@ export const openHotkey = () => {
}
}
-export const createNewCircuitScopeCall = () => {
- const createNewCircuitScopeElement = document.getElementById('createNewCircuitScope'); // TODO: remove later
- if (createNewCircuitScopeElement) {
- createNewCircuitScopeElement.click();
- }
-}
+// export const createNewCircuitScopeCall = () => {
+// const createNewCircuitScopeElement = document.getElementById('createNewCircuitScope'); // TODO: remove later
+// if (createNewCircuitScopeElement) {
+// createNewCircuitScopeElement.click();
+// }
+// }
export const openDocumentation = () => {
if (
diff --git a/src/simulator/src/hotkey_binder/model/addShortcut.js b/src/simulator/src/hotkey_binder/model/addShortcut.js
index d5e77dae..e1358d5d 100644
--- a/src/simulator/src/hotkey_binder/model/addShortcut.js
+++ b/src/simulator/src/hotkey_binder/model/addShortcut.js
@@ -2,7 +2,7 @@
// import createSaveAsImgPrompt from '../../data/saveImage';
//Assign the callback func for the keymap here
import {
- createNewCircuitScopeCall,
+ // createNewCircuitScopeCall,
elementDirection,
insertLabel,
labelDirection,
@@ -16,12 +16,13 @@ import createSaveAsImgPrompt from '../../data/saveImage'
import { createSubCircuitPrompt } from '../../subcircuit'
import { createCombinationalAnalysisPrompt } from '../../combinationalAnalysis'
import { shortcut } from './shortcuts.plugin.js'
+import logixFunction from '../../data'
export const addShortcut = (keys, action) => {
let callback
switch (action) {
case 'New Circuit':
- callback = createNewCircuitScopeCall // TODO: directly call rather than using dom click
+ callback = logixFunction.createNewCircuitScope // TODO: directly call rather than using dom click
break
case 'Save Online':
callback = save
diff --git a/src/simulator/src/interface/simulationArea.ts b/src/simulator/src/interface/simulationArea.ts
index bf153a3f..de181800 100644
--- a/src/simulator/src/interface/simulationArea.ts
+++ b/src/simulator/src/interface/simulationArea.ts
@@ -31,6 +31,7 @@ export interface SimulationArea {
lock: string;
mouseDown: boolean;
ClockInterval: NodeJS.Timeout|null;
+ touch: boolean;
timer: () => void;
setup: () => void;
changeClockTime: (t: number) => void;
diff --git a/src/simulator/src/layoutMode.ts b/src/simulator/src/layoutMode.ts
index f10af542..5c548db6 100644
--- a/src/simulator/src/layoutMode.ts
+++ b/src/simulator/src/layoutMode.ts
@@ -20,6 +20,8 @@ import miniMapArea from './minimap'
import { showMessage } from './utils'
import { verilogModeSet } from './Verilog2CV'
import { useLayoutStore } from '#/store/layoutStore'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
+import { toRefs } from 'vue'
import { circuitElementList } from './metadata'
/**
@@ -444,20 +446,25 @@ export function saveLayout() {
* @category layoutMode
*/
export function toggleLayoutMode() {
- const layoutStore = useLayoutStore()
+ const layoutStore = toRefs(useLayoutStore())
+ const simulatorMobileStore = toRefs(useSimulatorMobileStore())
prevPropertyObjSet(undefined)
$('.objectPropertyAttribute').unbind('change keyup paste click')
if (layoutModeGet()) {
layoutModeSet(false)
- layoutStore.layoutMode = false
+ layoutStore.layoutMode.value = false
globalScope.centerFocus(false)
- if (globalScope.verilogMetadata.isVerilogCircuit) verilogModeSet(true)
+ if (globalScope.verilogMetadata.isVerilogCircuit) {
+ verilogModeSet(true)
+ simulatorMobileStore.isVerilog.value = true
+ }
dots()
} else {
layoutModeSet(true)
verilogModeSet(false)
- layoutStore.layoutMode = true
+ layoutStore.layoutMode.value = true
+ simulatorMobileStore.isVerilog.value = false
fillSubcircuitElements()
globalScope.ox = 0
diff --git a/src/simulator/src/listeners.js b/src/simulator/src/listeners.js
index 20f2c4dc..4b41b672 100644
--- a/src/simulator/src/listeners.js
+++ b/src/simulator/src/listeners.js
@@ -1,9 +1,16 @@
+/* eslint-disable no-shadow */
+/* eslint-disable no-negated-condition */
+/* eslint-disable no-alert */
+/* eslint-disable new-cap */
+/* eslint-disable no-undef */
+/* eslint-disable eqeqeq */
+/* eslint-disable prefer-template */
+/* eslint-disable no-param-reassign */
// Most Listeners are stored here
import {
layoutModeGet,
tempBuffer,
layoutUpdate,
- // setupLayoutModePanelListeners,
} from './layoutMode'
import { simulationArea } from './simulationArea'
import {
@@ -17,29 +24,276 @@ import {
gridUpdateSet,
errorDetectedSet,
} from './engine'
-import { changeScale } from './canvasApi'
+import { changeScale, findDimensions } from './canvasApi'
import { scheduleBackup } from './data/backupCircuit'
-import {
- hideProperties,
- deleteSelected,
- uxvar,
- exitFullView,
-} from './ux'
-import {
- updateRestrictedElementsList,
- updateRestrictedElementsInScope,
- hideRestricted,
- showRestricted,
-} from './restrictedElementDiv'
+import { hideProperties, deleteSelected, uxvar, exitFullView } from './ux';
+import { updateRestrictedElementsList, updateRestrictedElementsInScope, hideRestricted, showRestricted } from './restrictedElementDiv';
import { removeMiniMap, updatelastMinimapShown } from './minimap'
import undo from './data/undo'
import redo from './data/redo'
import { copy, paste, selectAll } from './events'
import { verilogModeGet } from './Verilog2CV'
import { setupTimingListeners } from './plotArea'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
+import { toRefs } from 'vue'
+
+const unit = 10
+let listenToSimulator = true
+let coordinate;
+const returnCoordinate = {
+ x: 0,
+ y: 0
+}
+
+let currDistance = 0;
+let distance = 0;
+let pinchZ = 0;
+let centreX;
+let centreY;
+let timeout;
+let lastTap = 0;
+
+/**
+ *
+ * @param {event} e
+ * function for double click or double tap
+ */
+function onDoubleClickorTap(e) {
+ updateCanvasSet(true);
+ if (simulationArea.lastSelected && simulationArea.lastSelected.dblclick !== undefined) {
+ simulationArea.lastSelected.dblclick();
+ } else if (!simulationArea.shiftDown) {
+ simulationArea.multipleObjectSelections = [];
+ }
+ scheduleUpdate(2);
+ e.preventDefault();
+}
+
+/**
+ *
+ * @param {event} e
+ * function to detect tap and double tap
+ */
+function getTap(e) {
+ const currentTime = new Date().getTime();
+ const tapLength = currentTime - lastTap;
+ clearTimeout(timeout);
+ if (tapLength < 500 && tapLength > 0) {
+ onDoubleClickorTap(e);
+ } else {
+ // Single tap
+ }
+ lastTap = currentTime;
+ e.preventDefault();
+}
+
+const isIe = (navigator.userAgent.toLowerCase().indexOf('msie') != -1 || navigator.userAgent.toLowerCase().indexOf('trident') != -1);
+
+// Function to getCoordinate
+// *If touch is enable then it will return touch coordinate
+// *else it will return mouse coordinate
+//
+export function getCoordinate(e) {
+ if (simulationArea.touch) {
+ returnCoordinate.x = e.touches[0].clientX;
+ returnCoordinate.y = e.touches[0].clientY;
+ return returnCoordinate;
+ }
+
+ if (!simulationArea.touch) {
+ returnCoordinate.x = e.clientX;
+ returnCoordinate.y = e.clientY;
+ return returnCoordinate;
+ }
+
+ return returnCoordinate;
+}
-var unit = 10
-var listenToSimulator = true
+/* Function for Panstop on simulator
+ *For now variable name starts with mouse like mouseDown are used both
+ touch and mouse will change in future
+*/
+export function pinchZoom(e, globalScope) {
+ e.preventDefault();
+ gridUpdateSet(true);
+ scheduleUpdate();
+ updateSimulationSet(true);
+ updatePositionSet(true);
+ updateCanvasSet(true);
+ // Calculating distance between touch to see if its pinchIN or pinchOut
+ distance = Math.sqrt((e.touches[1].clientX - e.touches[0].clientX) ** 2, (e.touches[1].clientY - e.touches[0].clientY) ** 2);
+ if (distance >= currDistance) {
+ pinchZ += 0.02;
+ currDistance = distance;
+ } else if (currDistance >= distance) {
+ pinchZ -= 0.02;
+ currDistance = distance;
+ }
+ if (pinchZ >= 2) {
+ pinchZ = 2;
+ }
+ else if (pinchZ <= 0.5) {
+ pinchZ = 0.5;
+ }
+ const oldScale = globalScope.scale;
+ globalScope.scale = Math.max(0.5, Math.min(4 * DPR, pinchZ * 3));
+ globalScope.scale = Math.round(globalScope.scale * 10) / 10;
+ // This is not working as expected
+ centreX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+ centreY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+ const rect = simulationArea.canvas.getBoundingClientRect();
+ const RawX = (centreX - rect.left) * DPR;
+ const RawY = (centreY - rect.top) * DPR;
+ const Xf = Math.round(((RawX - globalScope.ox) / globalScope.scale) / unit);
+ const Yf = Math.round(((RawY - globalScope.ox) / globalScope.scale) / unit);
+ const currCentreX = Math.round(Xf / unit) * unit;
+ const currCentreY = Math.round(Yf / unit) * unit;
+ globalScope.ox = Math.round(currCentreX * (globalScope.scale - oldScale));
+ globalScope.oy = Math.round(currCentreY * (globalScope.scale - oldScale));
+ gridUpdateSet(true);
+ scheduleUpdate(1);
+}
+
+/*
+ *Function to start the pan in simulator
+ *Works for both touch and Mouse
+ *For now variable name starts from mouse like mouseDown are used both
+ touch and mouse will change in future
+ */
+export function panStart(e) {
+ coordinate = getCoordinate(e);
+ simulationArea.mouseDown = true;
+ // Deselect Input
+ if (document.activeElement instanceof HTMLElement) {
+ document.activeElement.blur();
+ }
+
+ errorDetectedSet(false);
+ updateSimulationSet(true);
+ updatePositionSet(true);
+ updateCanvasSet(true);
+ simulationArea.lastSelected = undefined;
+ simulationArea.selected = false;
+ simulationArea.hover = undefined;
+ const rect = simulationArea.canvas.getBoundingClientRect();
+ simulationArea.mouseDownRawX = (coordinate.x - rect.left) * DPR;
+ simulationArea.mouseDownRawY = (coordinate.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;
+ if (simulationArea.touch) {
+ simulationArea.mouseX = simulationArea.mouseDownX;
+ simulationArea.mouseY = simulationArea.mouseDownY;
+ }
+
+ simulationArea.oldx = globalScope.ox;
+ simulationArea.oldy = globalScope.oy;
+ e.preventDefault();
+ scheduleBackup();
+ scheduleUpdate(1);
+ $('.dropdown.open').removeClass('open');
+}
+
+/*
+ * Function to pan in simulator
+ * Works for both touch and Mouse
+ * Pinch to zoom also implemented in the same
+ * For now variable name starts from mouse like mouseDown are used both
+ touch and mouse will change in future
+ */
+
+export function panMove(e) {
+ // If only one it touched
+ // pan left or right
+ if (!simulationArea.touch || e.touches.length === 1) {
+ coordinate = getCoordinate(e);
+ const rect = simulationArea.canvas.getBoundingClientRect();
+ simulationArea.mouseRawX = (coordinate.x - rect.left) * DPR;
+ simulationArea.mouseRawY = (coordinate.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 && (simulationArea.mouseDown || simulationArea.lastSelected.newElement)) {
+ updateCanvasSet(true);
+ let fn;
+
+ if (simulationArea.lastSelected == globalScope.root) {
+ fn = function () {
+ updateSelectionsAndPane();
+ };
+ } else {
+ fn = function () {
+ if (simulationArea.lastSelected) {
+ simulationArea.lastSelected.update();
+ }
+ };
+ }
+
+ scheduleUpdate(0, 20, fn);
+ } else {
+ scheduleUpdate(0, 200);
+ }
+ }
+
+ // If two fingures are touched
+ // pinchZoom
+ if (simulationArea.touch && e.touches.length === 2) {
+ pinchZoom(e, globalScope);
+ }
+}
+
+export function panStop(e) {
+ const simulatorMobileStore = useSimulatorMobileStore()
+ simulationArea.mouseDown = false;
+ if (!lightMode) {
+ updatelastMinimapShown();
+ setTimeout(removeMiniMap, 2000);
+ }
+
+ errorDetectedSet(false);
+ updateSimulationSet(true);
+ updatePositionSet(true);
+ updateCanvasSet(true);
+ gridUpdateSet(true);
+ wireToBeCheckedSet(1);
+
+ scheduleUpdate(1);
+ simulationArea.mouseDown = false;
+
+ // eslint-disable-next-line no-plusplus
+ for (let i = 0; i < 2; i++) {
+ updatePositionSet(true);
+ wireToBeCheckedSet(1);
+ update();
+ }
+
+ errorDetectedSet(false);
+ updateSimulationSet(true);
+ updatePositionSet(true);
+ updateCanvasSet(true);
+ gridUpdateSet(true);
+ wireToBeCheckedSet(1);
+
+ scheduleUpdate(1);
+ // Var rect = simulationArea.canvas.getBoundingClientRect();
+
+ if (!(simulationArea.mouseRawX < 0 || simulationArea.mouseRawY < 0 || simulationArea.mouseRawX > width || simulationArea.mouseRawY > height)) {
+ uxvar.smartDropXX = simulationArea.mouseX + 100; // Math.round(((simulationArea.mouseRawX - globalScope.ox+100) / globalScope.scale) / unit) * unit;
+ uxvar.smartDropYY = simulationArea.mouseY - 50; // Math.round(((simulationArea.mouseRawY - globalScope.oy+100) / globalScope.scale) / unit) * unit;
+ }
+
+ if (simulationArea.touch) {
+ const { isCopy } = toRefs(simulatorMobileStore)
+ // small hack so Current circuit element should not spwan above last circuit element
+ if (!isCopy.value) {
+ findDimensions(globalScope);
+ simulationArea.mouseX = 100 + simulationArea.maxWidth || 0;
+ simulationArea.mouseY = simulationArea.minHeight || 0;
+ getTap(e);
+ }
+ }
+}
export default function startListeners() {
$(document).on('keyup', (e) => {
@@ -47,52 +301,12 @@ export default function startListeners() {
})
$('#projectName').on('click', () => {
- simulationArea.lastSelected = globalScope.root
- setTimeout(() => {
- document.getElementById('projname').select()
- }, 100)
- })
-
- document
- .getElementById('simulationArea')
- .addEventListener('mousedown', (e) => {
- simulationArea.mouseDown = true
-
- // Deselect Input
- if (document.activeElement instanceof HTMLElement)
- document.activeElement.blur()
-
- errorDetectedSet(false)
- updateSimulationSet(true)
- updatePositionSet(true)
- updateCanvasSet(true)
-
- simulationArea.lastSelected = undefined
- simulationArea.selected = false
- simulationArea.hover = undefined
- var rect = simulationArea.canvas.getBoundingClientRect()
- simulationArea.mouseDownRawX = (e.clientX - rect.left) * DPR
- simulationArea.mouseDownRawY = (e.clientY - 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.oldx = globalScope.ox
- simulationArea.oldy = globalScope.oy
+ simulationArea.lastSelected = globalScope.root;
+ setTimeout(() => {
+ document.getElementById("projname").select();
+ }, 100);
+ });
- e.preventDefault()
- scheduleBackup()
- scheduleUpdate(1)
- $('.dropdown.open').removeClass('open')
- })
document
.getElementById('simulationArea')
.addEventListener('mouseup', (e) => {
@@ -129,9 +343,6 @@ export default function startListeners() {
}
}
})
- document
- .getElementById('simulationArea')
- .addEventListener('mousemove', onMouseMove)
window.addEventListener('keyup', (e) => {
scheduleUpdate(1)
@@ -353,31 +564,9 @@ export default function startListeners() {
true
)
- document
- .getElementById('simulationArea')
- .addEventListener('dblclick', (e) => {
- updateCanvasSet(true)
- if (
- simulationArea.lastSelected &&
- simulationArea.lastSelected.dblclick !== undefined
- ) {
- simulationArea.lastSelected.dblclick()
- } else if (!simulationArea.shiftDown) {
- simulationArea.multipleObjectSelections = []
- }
- scheduleUpdate(2)
- })
-
- document
- .getElementById('simulationArea')
- .addEventListener('mouseup', onMouseUp)
-
- document
- .getElementById('simulationArea')
- .addEventListener('mousewheel', MouseScroll)
- document
- .getElementById('simulationArea')
- .addEventListener('DOMMouseScroll', MouseScroll)
+ document.getElementById('simulationArea').addEventListener('dblclick', e => {
+ onDoubleClickorTap(e);
+ });
function MouseScroll(event) {
updateCanvasSet(true)
@@ -394,6 +583,13 @@ export default function startListeners() {
else update() // Schedule update not working, this is INEFFICIENT
}
+ document
+ .getElementById('simulationArea')
+ .addEventListener('mousewheel', MouseScroll)
+ document
+ .getElementById('simulationArea')
+ .addEventListener('DOMMouseScroll', MouseScroll)
+
document.addEventListener('cut', (e) => {
if (verilogModeGet()) return
if (document.activeElement.tagName == 'INPUT') return
@@ -410,7 +606,7 @@ export default function startListeners() {
simulationArea.copyList.push(simulationArea.lastSelected)
}
- var textToPutOnClipboard = copy(simulationArea.copyList, true)
+ const textToPutOnClipboard = copy(simulationArea.copyList, true)
// Updated restricted elements
updateRestrictedElementsInScope()
@@ -441,7 +637,7 @@ export default function startListeners() {
simulationArea.copyList.push(simulationArea.lastSelected)
}
- var textToPutOnClipboard = copy(simulationArea.copyList)
+ const textToPutOnClipboard = copy(simulationArea.copyList)
// Updated restricted elements
updateRestrictedElementsInScope()
@@ -478,33 +674,25 @@ export default function startListeners() {
})
// 'drag and drop' event listener for subcircuit elements in layout mode
- $('#subcircuitMenu').on(
- 'dragstop',
- '.draggableSubcircuitElement',
- function (event, ui) {
- const sideBarWidth = $('#guide_1')[0].clientWidth
- let tempElement
-
- if (ui.position.top > 10 && ui.position.left > sideBarWidth) {
- // make a shallow copy of the element with the new coordinates
- tempElement =
- globalScope[this.dataset.elementName][
- this.dataset.elementId
- ]
-
- // Changing the coordinate doesn't work yet, nodes get far from element
- tempElement.x = ui.position.left - sideBarWidth
- tempElement.y = ui.position.top
- for (let node of tempElement.nodeList) {
- node.x = ui.position.left - sideBarWidth
- node.y = ui.position.top
- }
-
- tempBuffer.subElements.push(tempElement)
- this.parentElement.removeChild(this)
+ $('#subcircuitMenu').on('dragstop', '.draggableSubcircuitElement', function (event, ui) {
+ const sideBarWidth = $('#guide_1')[0].clientWidth;
+ let tempElement;
+
+ if (ui.position.top > 10 && ui.position.left > sideBarWidth) {
+ // Make a shallow copy of the element with the new coordinates
+ tempElement = globalScope[this.dataset.elementName][this.dataset.elementId];
+ // Changing the coordinate doesn't work yet, nodes get far from element
+ tempElement.x = ui.position.left - sideBarWidth;
+ tempElement.y = ui.position.top;
+ for (const node of tempElement.nodeList) {
+ node.x = ui.position.left - sideBarWidth;
+ node.y = ui.position.top;
}
+
+ tempBuffer.subElements.push(tempElement);
+ this.parentElement.removeChild(this);
}
- )
+ });
restrictedElements.forEach((element) => {
$(`#${element}`).mouseover(() => {
@@ -522,96 +710,10 @@ export default function startListeners() {
}
}
-var isIe =
- navigator.userAgent.toLowerCase().indexOf('msie') != -1 ||
- navigator.userAgent.toLowerCase().indexOf('trident') != -1
-
-function onMouseMove(e) {
- var rect = simulationArea.canvas.getBoundingClientRect()
- simulationArea.mouseRawX = (e.clientX - rect.left) * DPR
- simulationArea.mouseRawY = (e.clientY - 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 &&
- (simulationArea.mouseDown || simulationArea.lastSelected.newElement)
- ) {
- updateCanvasSet(true)
- var fn
-
- if (simulationArea.lastSelected == globalScope.root) {
- fn = function () {
- updateSelectionsAndPane()
- }
- } else {
- fn = function () {
- if (simulationArea.lastSelected) {
- simulationArea.lastSelected.update()
- }
- }
- }
- scheduleUpdate(0, 20, fn)
- } else {
- scheduleUpdate(0, 200)
- }
-}
-
-function onMouseUp(e) {
- simulationArea.mouseDown = false
- if (!lightMode) {
- updatelastMinimapShown()
- setTimeout(removeMiniMap, 2000)
- }
-
- errorDetectedSet(false)
- updateSimulationSet(true)
- updatePositionSet(true)
- updateCanvasSet(true)
- gridUpdateSet(true)
- wireToBeCheckedSet(1)
-
- scheduleUpdate(1)
- simulationArea.mouseDown = false
-
- for (var i = 0; i < 2; i++) {
- updatePositionSet(true)
- wireToBeCheckedSet(1)
- update()
- }
- errorDetectedSet(false)
- updateSimulationSet(true)
- updatePositionSet(true)
- updateCanvasSet(true)
- gridUpdateSet(true)
- wireToBeCheckedSet(1)
-
- scheduleUpdate(1)
- var rect = simulationArea.canvas.getBoundingClientRect()
-
- if (
- !(
- simulationArea.mouseRawX < 0 ||
- simulationArea.mouseRawY < 0 ||
- simulationArea.mouseRawX > width ||
- simulationArea.mouseRawY > height
- )
- ) {
- uxvar.smartDropXX = simulationArea.mouseX + 100
- uxvar.smartDropYY = simulationArea.mouseY - 50
- }
-}
-
function resizeTabs() {
- var $windowsize = $('body').width()
- var $sideBarsize = $('.side').width()
- var $maxwidth = $windowsize - $sideBarsize
+ const $windowsize = $('body').width()
+ const $sideBarsize = $('.side').width()
+ const $maxwidth = $windowsize - $sideBarsize
$('#tabsBar div').each(function (e) {
$(this).css({ 'max-width': $maxwidth - 30 })
})
@@ -621,61 +723,65 @@ window.addEventListener('resize', resizeTabs)
resizeTabs()
// direction is only 1 or -1
-function handleZoom(direction) {
- var zoomSlider = $('#customRange1')
- var currentSliderValue = parseInt(zoomSlider.val(), 10)
- currentSliderValue += direction
-
+function handleZoom (direction) {
if (globalScope.scale > 0.5 * DPR) {
- zoomSlider.val(currentSliderValue).change()
+ changeScale(direction * 0.1 * DPR);
} else if (globalScope.scale < 4 * DPR) {
- zoomSlider.val(currentSliderValue).change()
+ changeScale(direction * 0.1 * DPR);
}
-
- gridUpdateSet(true)
- scheduleUpdate()
-}
-
-export function ZoomIn() {
- handleZoom(1)
-}
-
-export function ZoomOut() {
- handleZoom(-1)
-}
-
-function zoomSliderListeners() {
- document.getElementById('customRange1').value = 5
- document
- .getElementById('simulationArea')
- .addEventListener('DOMMouseScroll', zoomSliderScroll)
- document
- .getElementById('simulationArea')
- .addEventListener('mousewheel', zoomSliderScroll)
- let curLevel = document.getElementById('customRange1').value
+ gridUpdateSet(true);
+ scheduleUpdate();
+ }
+ export function ZoomIn () {
+ handleZoom(1);
+ }
+ export function ZoomOut () {
+ handleZoom(-1);
+ }
+ function zoomSliderListeners () {
+ document.getElementById("customRange1").value = 5;
+ document.getElementById('simulationArea').addEventListener('DOMMouseScroll', zoomSliderScroll);
+ document.getElementById('simulationArea').addEventListener('mousewheel', zoomSliderScroll);
+ let curLevel = document.getElementById("customRange1").value;
$(document).on('input change', '#customRange1', function (e) {
- let newValue = $(this).val()
- let changeInScale = newValue - curLevel
- updateCanvasSet(true)
- changeScale(changeInScale * 0.1, 'zoomButton', 'zoomButton', 3)
- gridUpdateSet(true)
- curLevel = newValue
- })
- function zoomSliderScroll(e) {
- let zoomLevel = document.getElementById('customRange1').value
- let deltaY = e.wheelDelta ? e.wheelDelta : -e.detail
- const directionY = deltaY > 0 ? 1 : -1
- if (directionY > 0) zoomLevel++
- else zoomLevel--
- if (zoomLevel >= 45) {
- zoomLevel = 45
- document.getElementById('customRange1').value = 45
- } else if (zoomLevel <= 0) {
- zoomLevel = 0
- document.getElementById('customRange1').value = 0
- } else {
- document.getElementById('customRange1').value = zoomLevel
- curLevel = zoomLevel
- }
+ const newValue = $(this).val();
+ const changeInScale = newValue - curLevel;
+ updateCanvasSet(true);
+ changeScale(changeInScale * 0.1, 'zoomButton', 'zoomButton', 3)
+ gridUpdateSet(true);
+ curLevel = newValue;
+ });
+ function zoomSliderScroll (e) {
+ let zoomLevel = document.getElementById("customRange1").value;
+ const deltaY = e.wheelDelta ? e.wheelDelta : -e.detail;
+ const directionY = deltaY > 0 ? 1 : -1;
+ if (directionY > 0) zoomLevel++
+ else zoomLevel--
+ if (zoomLevel >= 45) {
+ zoomLevel = 45;
+ document.getElementById("customRange1").value = 45;
+ } else if (zoomLevel <= 0) {
+ zoomLevel = 0;
+ document.getElementById("customRange1").value = 0;
+ } else {
+ document.getElementById("customRange1").value = zoomLevel;
+ curLevel = zoomLevel;
+ }
}
-}
+ function sliderZoomButton (direction) {
+ const zoomSlider = $('#customRange1');
+ let currentSliderValue = parseInt(zoomSlider.val(), 10);
+ if (direction === -1) {
+ currentSliderValue--;
+ } else {
+ currentSliderValue++;
+ }
+ zoomSlider.val(currentSliderValue).change();
+ }
+ $('#decrement').click(() => {
+ sliderZoomButton(-1);
+ });
+ $('#increment').click(() => {
+ sliderZoomButton(1);
+ });
+ }
diff --git a/src/simulator/src/plotArea.js b/src/simulator/src/plotArea.js
index 059dde11..1aab1921 100644
--- a/src/simulator/src/plotArea.js
+++ b/src/simulator/src/plotArea.js
@@ -1,5 +1,7 @@
import { simulationArea } from './simulationArea'
import { convertors } from './utils'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
+import { toRefs } from 'vue'
var DPR = window.devicePixelRatio || 1
@@ -403,12 +405,16 @@ const plotArea = {
},
// Driver function to render and update
plot() {
+ const simulatorMobileStore = useSimulatorMobileStore()
+ const { showCanvas } = toRefs(simulatorMobileStore)
if (embed) return
if (globalScope.Flag.length === 0) {
this.canvas.width = 0
this.canvas.height = 0
+ showCanvas.value = false
return
}
+ showCanvas.value = true
this.update()
this.render()
diff --git a/src/simulator/src/setup.js b/src/simulator/src/setup.js
index 3b514d77..1f04977e 100644
--- a/src/simulator/src/setup.js
+++ b/src/simulator/src/setup.js
@@ -41,7 +41,7 @@ export function resetup() {
if (!embed) {
height =
(document.body.clientHeight -
- document.getElementById('toolbar').clientHeight) *
+ document.getElementById('toolbar')?.clientHeight) *
DPR
} else {
height = document.getElementById('simulation').clientHeight * DPR
diff --git a/src/simulator/src/simulationArea.ts b/src/simulator/src/simulationArea.ts
index e841e16f..bd2f3f9a 100644
--- a/src/simulator/src/simulationArea.ts
+++ b/src/simulator/src/simulationArea.ts
@@ -33,6 +33,7 @@ const simulationArea: SimulationArea = {
lock: 'unlocked',
mouseDown: false,
ClockInterval: null,
+ touch: false,
timer() {
const clickTimer = setTimeout(() => {
diff --git a/src/simulator/src/ux.js b/src/simulator/src/ux.js
index f74c02da..01a93243 100644
--- a/src/simulator/src/ux.js
+++ b/src/simulator/src/ux.js
@@ -17,6 +17,7 @@ import { dragging } from './drag'
import { SimulatorStore } from '#/store/SimulatorStore/SimulatorStore'
import { toRefs } from 'vue'
import { circuitElementList } from './metadata'
+import { useSimulatorMobileStore } from '#/store/simulatorMobileStore'
export const uxvar = {
smartDropXX: 50,
@@ -413,6 +414,13 @@ export function exitFullView() {
element.style.display = ''
}
})
+
+ // Mobile Components
+
+ const simulatorMobileStore = toRefs(useSimulatorMobileStore());
+
+ simulatorMobileStore.showQuickButtons.value = true
+ simulatorMobileStore.showMobileButtons.value = true
}
export function fullView() {
@@ -431,6 +439,16 @@ export function fullView() {
}
})
+ // Mobile Components
+
+ const simulatorMobileStore = toRefs(useSimulatorMobileStore());
+
+ simulatorMobileStore.showElementsPanel.value = false
+ simulatorMobileStore.showPropertiesPanel.value = false
+ simulatorMobileStore.showTimingDiagram.value = false
+ simulatorMobileStore.showQuickButtons.value = false
+ simulatorMobileStore.showMobileButtons.value = false
+
app.appendChild(exitViewEl)
exitViewEl.addEventListener('click', exitFullView)
}
diff --git a/src/store/authStore.ts b/src/store/authStore.ts
index 12dd433c..57c23043 100644
--- a/src/store/authStore.ts
+++ b/src/store/authStore.ts
@@ -4,6 +4,7 @@ interface AuthStoreType {
isLoggedIn: boolean
userId: string | number
username: string
+ userAvatar: string
locale: string
isAdmin: boolean
}
@@ -13,6 +14,7 @@ interface UserInfo {
id: string
attributes: {
name: string
+ profile_picture: string
locale: string
admin: boolean
}
@@ -22,7 +24,8 @@ export const useAuthStore = defineStore({
state: (): AuthStoreType => ({
isLoggedIn: false,
userId: '',
- username: '',
+ username: 'Guest',
+ userAvatar: 'default',
locale: 'en',
isAdmin: false,
}),
@@ -30,7 +33,11 @@ export const useAuthStore = defineStore({
setUserInfo(userInfo: UserInfo): void {
this.isLoggedIn = true
this.userId = userInfo.id ?? ''
- this.username = userInfo.attributes.name ?? ''
+ this.username = userInfo.attributes.name ?? 'Guest'
+ if (userInfo.attributes.profile_picture != 'original/Default.jpg') {
+ this.userAvatar =
+ userInfo.attributes.profile_picture ?? 'default'
+ }
this.locale = userInfo.attributes.locale ?? 'en'
this.isAdmin = userInfo.attributes.admin
},
@@ -45,6 +52,9 @@ export const useAuthStore = defineStore({
getUsername(): string {
return this.username
},
+ getUserAvatar(): string {
+ return this.userAvatar
+ },
getLocale(): string {
return this.locale
},
diff --git a/src/store/propertiesPanelStore.ts b/src/store/propertiesPanelStore.ts
new file mode 100644
index 00000000..07f4c462
--- /dev/null
+++ b/src/store/propertiesPanelStore.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { tempBuffer } from "#/simulator/src/layoutMode";
+
+export const usePropertiesPanelStore = defineStore("propertiesPanelStore", () => {
+ const inLayoutMode = ref(false)
+ const panelBodyHeader = ref('PROJECT PROPERTIES')
+ const propertiesPanelObj = ref(undefined)
+ const panelType = ref(1) // default is panel type 2 (project properties)
+
+ // Layout
+
+ const titleEnable = ref(tempBuffer?.layout?.titleEnabled)
+ const layoutDialogRef = ref(null);
+
+ return {
+ inLayoutMode,
+ panelBodyHeader,
+ propertiesPanelObj,
+ panelType,
+ titleEnable,
+ layoutDialogRef,
+ };
+});
diff --git a/src/store/simulatorMobileStore.ts b/src/store/simulatorMobileStore.ts
new file mode 100644
index 00000000..fcdb0e7c
--- /dev/null
+++ b/src/store/simulatorMobileStore.ts
@@ -0,0 +1,36 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export type ElementsType = 'elements' | 'layout-elements'
+
+export const useSimulatorMobileStore = defineStore("simulatorMobileStore", () => {
+ const minWidthToShowMobile = ref(991);
+ const showMobileView = ref(false);
+ const showCanvas = ref(false);
+ const showTimingDiagram = ref(false);
+ const showElementsPanel = ref(false);
+ const showPropertiesPanel = ref(false);
+ const showQuickButtons = ref(true);
+ const showMobileButtons = ref(true);
+ const showVerilogPanel = ref(false);
+ const isCopy = ref(false);
+ const isVerilog = ref(false);
+ const showCircuits = ref('elements')
+
+ showMobileView.value = window.innerWidth <= minWidthToShowMobile.value
+
+ return {
+ minWidthToShowMobile,
+ showMobileView,
+ showCanvas,
+ showTimingDiagram,
+ showElementsPanel,
+ showPropertiesPanel,
+ showQuickButtons,
+ showMobileButtons,
+ showVerilogPanel,
+ isCopy,
+ isVerilog,
+ showCircuits,
+ };
+});
diff --git a/src/store/timingDiagramPanelStore.ts b/src/store/timingDiagramPanelStore.ts
new file mode 100644
index 00000000..fbab4ace
--- /dev/null
+++ b/src/store/timingDiagramPanelStore.ts
@@ -0,0 +1,25 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import buttonsJSON from '#/assets/constants/Panels/TimingDiagramPanel/buttons.json'
+
+export interface TimingDiagramButton {
+ title: string
+ icon: string
+ class: string
+ type: string
+ click: string
+}
+
+export const useTimingDiagramPanelStore = defineStore("timingDiagramPanelStore", () => {
+ const buttons = ref(buttonsJSON)
+ const plotRef = ref(null)
+ const cycleUnits = ref(1000)
+ const timingDiagramPanelRef = ref(null);
+
+ return {
+ buttons,
+ plotRef,
+ cycleUnits,
+ timingDiagramPanelRef
+ };
+});
diff --git a/src/styles/color_theme.scss b/src/styles/color_theme.scss
index 5bdc9fff..8b467c52 100644
--- a/src/styles/color_theme.scss
+++ b/src/styles/color_theme.scss
@@ -138,6 +138,11 @@
box-shadow: 0px 0px 10px #4545457f;
}
+.draggable-panel-mobile {
+ background: white;
+ box-shadow: 0px 0px 10px #4545457f;
+}
+
.panel-header {
color: var(--text-panel);
background: var(--primary);
@@ -223,7 +228,6 @@
#tabsBar {
background-color: var(--bg-tabs);
- border-top: 1px solid var(--br-primary);
border-bottom: 1px solid var(--br-primary);
}
diff --git a/src/styles/css/UX.css b/src/styles/css/UX.css
index e5011d8a..890d4cfa 100644
--- a/src/styles/css/UX.css
+++ b/src/styles/css/UX.css
@@ -642,31 +642,6 @@ div.icon img {
display: inline-block;
}
-.img__description {
- position: absolute;
- /*top: 0;*/
- bottom: -16;
- text-align: center;
- left: 0;
- right: 0;
- background-color: #0099ff;
- color: white;
- font-size: 8px;
- /*background: rgba(29, 106, 154, 0.72);
- color: #fff;*/
- visibility: hidden;
- border-bottom-left-radius: 2px;
- border-bottom-right-radius: 2px;
- opacity: 0;
- /* transition effect. not necessary */
- transition: opacity 0.2s, visibility 0.2s;
-}
-
-.icon:hover .img__description {
- visibility: visible;
- opacity: 1;
-}
-
.icon:hover {
/*background-color: #cce5ff;*/
/*border-color: blue;*/
diff --git a/src/styles/css/main.stylesheet.css b/src/styles/css/main.stylesheet.css
index 32236bde..b4dfabef 100644
--- a/src/styles/css/main.stylesheet.css
+++ b/src/styles/css/main.stylesheet.css
@@ -1378,6 +1378,10 @@ input:checked + .slider:before {
text-align: center;
padding-top: 20px;
}
+
+ #moduleProperty-inner {
+ padding: 1rem;
+ }
}
/*! download dialog styling end here */
@@ -1754,9 +1758,17 @@ canvas {
width: 800px;
}
+@media (max-width: 991px) {
+ #plot {
+ width: 100%;
+ }
+}
+
.timing-diagram-toolbar {
+ display: flex;
+ align-items: center;
+ flex-wrap: wrap;
padding-left: 4px;
- padding: 2px;
cursor: default;
}
diff --git a/src/styles/simulator.scss b/src/styles/simulator.scss
index af0fe667..16076e75 100644
--- a/src/styles/simulator.scss
+++ b/src/styles/simulator.scss
@@ -23,10 +23,9 @@ $fa-font-path: '../../node_modules/@fortawesome/fontawesome-free/webfonts';
position: fixed;
right: -119px;
text-decoration: none;
- bottom: 30px;
transition: 0.3s;
width: 160px;
- z-index: 999;
+ z-index: 99;
}
.report-sidebar span {