circuitverse / cv-frontend-vue Goto Github PK

Navbar was implemented in project in PR#4

Improvements required are -

• Convert Options API to Composition API
• Internationalization
• Fix CSS refactoring

Typo to be fixed in 9th line of README.md
Sate -> State

With the popularity of Circuitverse simulator and its features, I personally believe an upsurge in the number of contributors and increasing changes. I propose to add a contributor's workflow.

Contributor's workflow

• Issue template: To generalize issue and parameters a contributor needs to add while creating an issue
• Bug Report: To generalize bug reporting and parameters a contributor needs to add while reporting a bug
• Pull Request template: To generalize PRs and parameters a contributor needs to add while sending a PR

@devartstar @tachyons @abstrekt what do you think about this, it could be a great change to standardize the project and workflow, should I start working on this ?

Describe the bug

When clicking on the close button in the pop-up that appears after clicking the "Report an Issue" button on the home page, the pop-up does not close.

To Reproduce

Steps to reproduce the behavior:

1. Go to the home page.
2. Click on the "Report an Issue" button in the bottom right corner.
3. Wait for the pop-up to appear.
4. Click on the close button in the top right corner of the pop-up.
5. Notice that the pop-up does not close

Expected behavior

When clicking on the close button in the pop-up, it should close and disappear from the screen.

Video :

Are you working on this issue? (Yes/No)

Yes

Update the readme with guide to setup the project on local machine.

Is your feature request related to a problem? Please describe.

I have discovered an issue on a GitHub organization's repository. The issue pertains to a link provided on the repository, which allows contributors to explore their projects. However, upon refreshing the page, users receive a 404 error. This issue arises because the project uses Vue Router and is hosted on Netlify.

Specifically, Vue Router handles routing on the client-side (browser), and when a non-root page is visited (e.g., https://yoursite.netlify.com/login), Netlify (server-side) cannot handle the route. This results in a 404 error, which can be confusing and frustrating for users.

Describe the solution you'd like

To fix the issue with the 404 error on non-root Vue Router pages hosted on Netlify, we can use Netlify's _redirects file. This file allows Netlify to handle URLs that are not handled on the client-side.

To create the _redirects file, go to the public folder of your app and create a file named _redirects. Then, add the following line of code to the file:

/* /index.html 200

This code redirects all requests to the root of your site, which allows Vue Router to handle the routing correctly. With this fix, users should no longer receive 404 errors when refreshing non-root pages on your site.

Additional context

Are you working on this? (Yes/No)

Yes, I Have fixed The Issue if You think this is an issue, can I make a PR for the same?

Describe the bug
On panning (press and drag) the circuit elements(simulationArea) moves but the canvas grids(backgroundArea) does not move.

To Reproduce
Steps to reproduce the behaviour:

• Go to cv-frontend-vue
• add some circuit elements
• checkout the pan mouse event
• compare the difference with current simulator

Is your feature request related to a problem? Please describe.

• It would be much easier to search for a certain shortcut if a user wants to alter or view one than to scroll all the way to the bottom.

Describe the solution you'd like

• Add a search area and a button to filter out the shortcut.

Additional context
ScreenShot:

Are you working on this? (Yes/No)
YES

Describe the bug
Add spacing between each timing-diagram under under timing-diagram modal.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://circuitverse.netlify.app/simulator
2. Click on Timing Diagram
3. See error

Expected behavior

Are you working on this issue? Yes

Since the properties panel content depends upon the tab/circuit selected.
We check for the switching of tabs every 0.1s.
In ProjectProperty.vue file

// checking if circuit or tab is switched
    setInterval(() => {
        if (circuitId.value != globalScope.id) {
            circuitName.value = globalScope.name
            circuitId.value = globalScope.id
        }
    }, 100)

Aim -
Need to replace setInterval with some better implementation.

• Migrate the Report_an_Issue into its own component

• Replace Jquery with Vue

• Replace Ajax with fetch

• Fix cancel button functionality

• Below is the demo video for the same.

• Below is the image of the pop-up

Are you working on this Issue ?
YES

Is your feature request related to a problem? Please describe.
Currently project properties panel and element properties panel do not support i18n

Describe the solution you'd like
Adding i18n support for them

Additional context

Are you working on this? (Yes)

Things to work upon -

• Creating tabsbar component.
• Replace DOM manupulation using string with Vue logic
• Fixing the change in circuitName in Properties Panel on switching between tabs.
• Sorting of tabs by dragging.
• CSS Refactoring.

After having the Vue Project Set up

The next step is:-

• Importing the simulator code from the CircuitVerse repository and fixing the bugs.

• Importing the styles for the simulator and configuring them to work properly.

• Removing the backend logic from simulator HTML and will be imported in a dummy Vue component.

• Refactoring of the simulator(dummy Vue component) into several smaller components will be done later.

• Adding necessary dependencies for the simulator to work. (some will be removed later)

Aim:

All the core functionalities of the simulator should be working in the end.

Describe the bug
Hovering on custom shortcut must show an edit(pencil) icon.

To Reproduce
Steps to reproduce the behavior:

1. Go to Navbar -> Tools
2. Click on Custom Shortcut
3. Hover on any of them
4. Compare with www.circuitverse.org

Screenshots

Device Information [optional]:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Are you working on this issue? (Yes/No)
No

Describe the bug
Circuit elements icon not showing in production.

Describe the bug
Quick-Button is overlapping the Navigation bar

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://circuitverse.netlify.app/simulator'
2. Decrease the screen to enable the hamburger icon
3. Click on 'hamburger icon'
4. See error 'The quick button is overlapping'

Expected behavior
The Quick-button should not overlap the Navigation bar

Screenshots

• OS: [Ubuntu 22]
• Browser [chrome]
• Version [v22]

Are you working on this issue? (Yes/No)
Yes

Describe the bug
On hovering over the menu items in Navbar, it has underline as well as border bottom.

Solution
Only border bottom should be present.

To Reproduce
Steps to reproduce the behaviour:

• Go to cv-frontend-vue
• hover on the items in Navbar
• compare the difference with current simulator

Describe the bug
Navbar hide behind Properties and Circuit Elements panel when screen size is 996 x 948 or less than this.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://circuitverse.org/
2. Click on "Simulator" on the navbar
3. Inspect the page and change the screen size to 996 x 948.
4. Click on the navbar-toggler-icon
5. See error

Current behavior

Expected behavior

Device Information:

• Fedora
• Firefox

Are you working on this issue? (Yes/No)

Describe the bug
The add tab button & also the whole tabs section is not perfectly aligned

To Reproduce

1. Go to 'https://circuitverse.org/simulator'
2. See the issue

Expected behavior

Current

Device Information :

• Browser [Firefox, Chrome]

Are you working on this issue? (Yes/No)
Yes

• Implement a mini map

Currently there is no (mini map/ small preview) of the canvas.

Demo:

Are you working on this? (Yes/No)
NO

Describe the bug
The Sign in button in the navbar have 2 underlines when hovered

Expected behavior
Sign in button should have only one underline when hovered

Screenshots
I

Device Information [optional]:

• OS: Windows 10
• Browser : Chrome

Additional context
Add any other context about the problem here.

**Are you working on this issue? Yes

Describe the bug
when context menu is opened with no items are selected it shows the cut , copy , delete options which are of no use when no item is selected.

Screenshots
If applicable, add screenshots to help explain your problem.

To Reproduce
Steps to reproduce the behavior:

1. open the vue simulator
2. try opening the context menu by clicking right mouse button
3. you would be able to see all the options on context menu

Expected behavior
The context menu should show only the options which can be used when it is opened. so the solution is removal of unusable options when context menu is opened.

Device Information [optional]:

• OS: Any
• Browser Any
• Version Web

Additional context
Add any other context about the problem here.

Are you working on this issue? (Yes)

Describe the bug
when we try to add a new circuit after deleting any circuit from the delete circuit button then it show error as displayed below.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'circuitverse simulator'
2. Click on 'plus icon to generate some new circuit and create some circuit'.
3. Then go to any circuit and delete it using delete circuit button .
4. Then using plus icon try to add some new circuit in it .
5. See error

Screenshots

Are you working on this issue? No

Though we removed jquery ui, we still have jquery in our codebase. which need to be removed and use native DOM methods

Describe the bug

• If a circuit is deleted by clicking the delete circuit button in the properties panel, an error warning appears when attempting to create a new circuit.

Demo:

Expected behavior

• the delete button should give a warning, if there is only one circuit.
• Creation of a new circuit should work properly without giving errors.

Device Information [optional]:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Are you working on this issue? (Yes/No)
NO

Is your feature request related to a problem? Please describe.

• If a user/student is using simulator for explaining something or learning they might want to add some notes while working on the simulator, this will increase the user experience and a feature that would help the teachers/ students a lot.

Describe the solution you'd like

• A panel below the circuit-elements panel having a text-area to add a note.
• store the note in the localstorage.

Are you working on this? (Yes/No)
YES

cc: @devartstar @tachyons Should I add some more functionality to this ?

Is your feature request related to a problem? Please describe.
currently context menu options and hex-bin-dec converter modal only available in english

Describe the solution you'd like
configure them with i18n support

Additional context

Are you working on this? (Yes)

• Panels and dropdowns overlap which causes dropdowns to hide behind the panels.
• Inconsistency in the dropdown and the panels.

Demo Video:

Are you working on this Issue ? (YES/NO)
YES

Is your feature request related to a problem? Please describe.
currently layout box, save image box, timing diagram box, report issue doesn't have i18n support

Describe the solution you'd like
Add support for i18n

Additional context

Are you working on this? (Yes)

Replace the properties panel done by DOM manupulation using string to a Vue Component.

Tasks to be done :-

• Seperate the Properties panel into its own component.
• Move the logic from showProperties() function inside Vue component to display the panel accordingly.
• There are 3 types of Properties Panel Body

• 1. Properties of elements in Layout Mode
• 2. Properties Panel showing Project Properties
• 3. Properties Panel showing Circiut Element Properties

• Link each of the options in the properties panel to their functionality
• Refactoring of CSS

the last element of the circuit element section is hidden when we click on each element one after the other

To Reproduce
Steps to reproduce the behavior:

1. Go to circuitverse.netlify.app/](https://circuitverse.netlify.app/
2. Click on each element of the ELEMENT SECTION
3. you'll be unable to see properly the content of the last element
   here is the video for understanding the bug clearly

Expected behavior
the last element should be visible for that we have to add scroll behavior

Device Information [optional]:

• Browser -chrome
  -w8

Are you working on this issue? (Yes/No)
yes

Is your feature request related to a problem? Please describe.
Currently there is only English and Hindi version of i18n available for the simulator

Describe the solution you'd like
Also add support for Bengali with i18n

Describe alternatives you've considered
Suggestions are welcome

Additional context

Are you working on this? (Yes)

Describe the bug
Currently on going to Preview mode, the quick button does not disappear and the Exit Preview button does not appear.
To exit you can use Esc button.

To Reproduce
Steps to reproduce the behaviour:

• Go to cv-frontend-vue
• From quick button panel
• Select preview option
• compare the difference with current simulator

Describe the bug
correct the ui of the custom theme dialog box.

To Reproduce
Steps to reproduce the behaviour:

• Go to cv-frontend-vue
• From Navbar hover on Tools
• Select Themes from dropdown
• Select Custom theme
• compare the difference with current simulator

current -

expected -

Describe the bug
A clear and concise description of what the bug is.

To Reproduce
Steps to reproduce the behavior:

1. Go to tabsbar
2. Click on + icon
3. New Circuit Dialog Box appears
4. instead of placeholder -> default circuit name should be selected

Expected behavior
compare with circuitverse site

Screenshots

Device Information [optional]:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Are you working on this issue? (Yes/No)
No

Describe the bug
the hex bin dec convertor is not working when we try to add input in the hex , octal and binary coded decimal field

To Reproduce
Steps to reproduce the behavior:

1. Go to 'circuitverse website'
2. Click on 'tools'
3. Scroll down to 'hex bin dec convertor'
4. See error

Screenshots

Are you working on this issue? (Yes/No) Yes

Is your feature request related to a problem? Please describe.
The Panels -

• Circuit Elements
• Properties Panel
• Timing Diagram
• Quick Panel
• Testbench
  should be draggable across the canvas.
  Check out the current simulator to check the drag functionality.

Describe the solution you'd like
Research different libraries available, compare them and find the most suitable one.
Discuss in Slack before starting to implement it.

Are you working on this? (Yes/No)
No

• CombinationalAnalysis Dialog
• Hex-Bin-Dec Converter Dialog
• SaveImage Dialog
• Theme Dialog
• CustomShortcut Dialog
• InsertSubcircuit Dialog
• ExportVerilog Dialog
• Save/Open Project Dialog

Changes to be made:-

• Convert jQuery UI accordion to Vuetify component and fix styles.
• Remove repeated DOM manipulation with strings for displaying panel icons.
• Move the logic for searching of circuit elements to inside the panel-component.
• Refactor CSS for the Elements Panel.

Creating a new Vue project with TypeScript using Vite.

Adding the following dependencies:-

• Vuetify
• Vue Router
• Pinia (State Management)
• Vue i18n
• ES Lint + Preetier (Code Linting & Fomatting)

Some more dependencies need to be added temporarily (while including the simulator code from the main repository)
But those will be removed in the end.

Describe the bug

Things to fix -

• Tabsbar height
• cross icon
• alignment of circuit name with cross icon
• plus icon size and alignment

To Reproduce

Steps to reproduce the behaviour:

• Go to cv-frontend-vue
• check for the styling issue in tabsbar
• compare the difference with current simulator

Describe the bug

• There are two different options to create a new circuit.

1. Click on the plus sign present inside the tabs bar.
2. Click on the new circuit present inside the drop-down of circuit.

• Both the methods do the same thing, however, they have different kind of prompts/ dialogBox.

Expected behavior

• Both techniques should use the same dialogBox to keep the UI consistent.

Screenshots

Difference:

Expected:

Device Information [optional]:

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Are you working on this issue? (Yes/No)
YES

Describe the bug
This is a bug while development.
Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.

To Reproduce
Steps to reproduce the behavior:

1. Setup the project on your local machine.
2. Run npm install and then npm run dev.
3. You can see following deprecation warnings.
4. Screenshots

Expected behavior
No deprecation warnings.

Device Information [optional]:

• OS: MacOS
• Editor: VSCode

Are you working on this issue? (Yes)

Is your feature request related to a problem?
The docs for Image Annotation are present in the circuitVerse docs but its helplinks are not available in the simulator.

Describe the solution you'd like
Like other Elements, we need to add the helplink for the Image Annotation.

As we can see the help button in properties section

The help link button is not present in Image Annotation.

Are you working on this? (Yes/No)
yes

Describe the bug
ESLint plugin for Vue.js that this project is currently using doesn't support Typescript.

To Reproduce
Steps to reproduce the behavior:
Convert any existing .js file to .ts. Try adding type declarations to see the error.
Something like this: Parsing error: Unexpected token : in function parameter ts

Expected behavior
The ESLint should have been able to parse both JS and TS.

Device Information [optional]:

• OS: Ubuntu 22.04
• Browser: Firefox
• Version: 110

Additional context
Replacing eslint-plugin-vue with vue-eslint-parser would solve this issue.

Current plugin to be replaced: https://www.npmjs.com/package/eslint-plugin-vue
Plugin I intend to add: https://www.npmjs.com/package/vue-eslint-parser

Are you working on this issue? (Yes/No)
Yes

Describe the bug
tabs are behaving not optimal , it should overflow and scroll when we add multiple tabs but it makes a new column

To Reproduce
Steps to reproduce the behavior:

1. Go to '/simulator'
2. Add multiple tabs (around 8-10)
3. See error

Expected behavior

Current behavior

• Browser [e.g. chrome, firefox]

Are you working on this issue? (Yes/No)

Yes

Describe the bug
The exit full preview button is not working.

Expected behavior
on clicking the full-screen btn quick panel should be hidden and an exit full preview button needs to be shown.

Screenshots

Device Information [optional]:

• OS: [Windows]
• Browser [Brave]
• Version [e.g. 22]

Are you working on this issue? Yes

Setting up all 3 canvas

• Background Area Canvas
• Simulation Area Canvas
• Minimap Area Canvas