Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Desktop Application for Vue Simulator [Tauri] #374

Merged
merged 12 commits into from
Sep 19, 2024

Conversation

niladrix719
Copy link
Member

@niladrix719 niladrix719 commented Aug 26, 2024

Desktop Application for Vue Simulator using Tauri

  • Created Download Functions for .cv Files
  • Created Download Functions for timming diagram waveform image download
  • cv icons for the desktop app
  • Build Process for desktop app
Screen.Recording.2024-08-26.at.11.02.34.PM.mov

Summary by CodeRabbit

  • New Features

    • Introduced Tauri support for building desktop applications.
    • Enhanced file download functionality with environment-specific methods.
    • Added configuration for Tauri application settings, including packaging details.
    • Implemented event listeners for various user actions, enhancing interactivity.
    • Updated project structure to improve build and output management.
  • Bug Fixes

    • Improved handling of local storage data saving.
  • Chores

    • Updated build configurations for better output management and flexibility.
    • Added .gitignore files to streamline version control.
    • Updated package dependencies to include Tauri-related packages.

Copy link
Contributor

coderabbitai bot commented Aug 26, 2024

Walkthrough

The changes encompass updates to several configuration files and components within the project. Key modifications include the introduction of Tauri support, adjustments to build commands, and enhancements to file handling methods. The .gitignore files have been updated to exclude unnecessary directories, while the package.json file reflects new dependencies and scripts. Additionally, various components have been refactored to improve file download functionality and state management, alongside the addition of event listeners for enhanced interactivity.

Changes

File(s) Change Summary
.gitignore, src-tauri/.gitignore Added entries to ignore generated files and directories, preventing unnecessary tracking by Git.
netlify.toml, vite.config.ts Modified build commands and output paths, including changes to directory structures and environment variables.
package.json Updated scripts to include cross-env for environment variable management and added Tauri-related dependencies.
src-tauri/Cargo.toml, src-tauri/build.rs, src-tauri/src/main.rs, src-tauri/tauri.conf.json Introduced files and configurations for Tauri application setup, including metadata and build dependencies.
src/components/DialogBox/*.vue Changed file download methods to use downloadFile instead of download, aligning with new naming conventions.
src/components/DialogBox/OpenOffline.vue Updated state management for projectList from reactive to ref.
src/simulator/src/data/project.ts Simplified data storage logic in saveOffline by removing JSON serialization.
src/simulator/src/node.js Adjusted type check in saveObject method for node classification.
src/simulator/src/plotArea.js Enhanced image downloading functionality with checks for Tauri environment.
src/simulator/src/utils.ts Introduced new download functions for desktop and web environments, improving modularity.
src/simulator/src/listeners.js Added multiple event listeners to handle various user actions, enhancing interactivity.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant App
    participant Tauri
    participant Server

    User->>App: Initiate file download
    App->>App: Determine environment (Tauri or Web)
    alt Tauri
        App->>Tauri: Call downloadImageDesktop()
        Tauri->>Tauri: Fetch image data
        Tauri->>User: Save image to downloads directory
    else Web
        App->>App: Call downloadFileWeb()
        App->>User: Trigger browser download
    end
Loading

🐰 In the meadow where I hop and play,
New changes come to brighten the day!
With Tauri's magic, files now glide,
A smoother path for all to ride.
Let’s download joy, in leaps and bounds,
In this happy code, my heart resounds! 🌼✨


Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between a6b0db3 and aea924a.

Files selected for processing (1)
  • src/simulator/src/listeners.js (3 hunks)
Files skipped from review as they are similar to previous changes (1)
  • src/simulator/src/listeners.js

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    -- I pushed a fix in commit <commit_id>, please review it.
    -- Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    -- @coderabbitai generate unit testing code for this file.
    -- @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    -- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    -- @coderabbitai read src/utils.ts and generate unit testing code.
    -- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    -- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@niladrix719 niladrix719 marked this pull request as draft August 26, 2024 17:35
@@ -255,7 +255,7 @@
* function for saving a node
*/
saveObject() {
if (this.type == NODE_INTERMEDIATE2) {
if (this.type == NODE_INTERMEDIATE) {

Check failure

Code scanning / ESLint

disallow the use of undeclared variables unless mentioned in `/*global */` comments Error

'NODE_INTERMEDIATE' is not defined.
Copy link

netlify bot commented Aug 26, 2024

Deploy Preview for circuitverse ready!

Name Link
🔨 Latest commit aea924a
🔍 Latest deploy log https://app.netlify.com/sites/circuitverse/deploys/66ec386128af7b00083eed62
😎 Deploy Preview https://deploy-preview-374--circuitverse.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@niladrix719 niladrix719 marked this pull request as ready for review August 29, 2024 13:18
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 129048f and 2522766.

Files ignored due to path filters (18)
  • package-lock.json is excluded by !**/package-lock.json
  • src-tauri/Cargo.lock is excluded by !**/*.lock
  • src-tauri/icons/128x128.png is excluded by !**/*.png
  • src-tauri/icons/[email protected] is excluded by !**/*.png
  • src-tauri/icons/32x32.png is excluded by !**/*.png
  • src-tauri/icons/Square107x107Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square142x142Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square150x150Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square284x284Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square30x30Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square310x310Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square44x44Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square71x71Logo.png is excluded by !**/*.png
  • src-tauri/icons/Square89x89Logo.png is excluded by !**/*.png
  • src-tauri/icons/StoreLogo.png is excluded by !**/*.png
  • src-tauri/icons/cvlogo.png is excluded by !**/*.png
  • src-tauri/icons/icon.ico is excluded by !**/*.ico
  • src-tauri/icons/icon.png is excluded by !**/*.png
Files selected for processing (16)
  • .gitignore (1 hunks)
  • netlify.toml (1 hunks)
  • package.json (3 hunks)
  • src-tauri/.gitignore (1 hunks)
  • src-tauri/Cargo.toml (1 hunks)
  • src-tauri/build.rs (1 hunks)
  • src-tauri/src/main.rs (1 hunks)
  • src-tauri/tauri.conf.json (1 hunks)
  • src/components/DialogBox/ExportProject.vue (2 hunks)
  • src/components/DialogBox/ExportVerilog.vue (2 hunks)
  • src/components/DialogBox/OpenOffline.vue (1 hunks)
  • src/simulator/src/data/project.ts (1 hunks)
  • src/simulator/src/node.js (1 hunks)
  • src/simulator/src/plotArea.js (2 hunks)
  • src/simulator/src/utils.ts (4 hunks)
  • vite.config.ts (2 hunks)
Files skipped from review due to trivial changes (4)
  • .gitignore
  • src-tauri/.gitignore
  • src-tauri/build.rs
  • src/components/DialogBox/ExportVerilog.vue
Additional context used
GitHub Check: ESLint
src/simulator/src/node.js

[failure] 258-258: disallow the use of undeclared variables unless mentioned in /*global */ comments
'NODE_INTERMEDIATE' is not defined.

Additional comments not posted (32)
netlify.toml (2)

2-2: LGTM!

The change to use a direct reference to the public directory simplifies the path and reduces potential errors.


7-7: LGTM! But verify the path usage in the codebase.

The change to the destination path for index.html suggests a restructuring of the output directory layout. Ensure that this change is reflected in other parts of the codebase that reference this path.

Run the following script to verify the path usage:

Verification successful

Path change is correctly implemented.

The change to the destination path for index.html is properly handled within the netlify.toml file. The command ensures that index.html is moved to the correct location for deployment, and there are no other references to this path that need adjustment.

Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Verify all references to the new path for `index.html`.

# Test: Search for the path usage. Expect: Only occurrences of the new path.
rg --type toml -A 5 $'./dist/output/index.html'

Length of output: 316

src-tauri/src/main.rs (3)

1-1: LGTM!

The comment is informative and should not be removed.


2-2: LGTM!

The cfg_attr attribute is correctly used to prevent an additional console window on Windows in release mode.


4-8: LGTM!

The main function is correctly implemented to initialize and run the Tauri application.

src-tauri/Cargo.toml (5)

1-10: LGTM!

The [package] section is correctly configured with metadata about the package.


12-12: LGTM!

The comment is informative and should not be removed.


14-16: LGTM!

The [build-dependencies] section is correctly configured with a dependency on tauri-build.


17-20: LGTM!

The [dependencies] section is correctly configured with dependencies on serde_json, serde, and tauri.


22-26: LGTM!

The [features] section is correctly configured with a custom protocol feature.

src-tauri/tauri.conf.json (5)

3-7: LGTM!

The build section is correctly configured for the Tauri application.


8-11: LGTM!

The package section is correctly configured.


12-22: LGTM! But consider narrowing the scope for file system access.

The allowlist section is correctly configured, but the scope for file system access is very broad. Consider narrowing it down to specific directories if possible.


23-54: LGTM!

The bundle section is correctly configured for the Tauri application.


62-70: LGTM!

The windows section is correctly configured for the Tauri application.

vite.config.ts (3)

32-32: LGTM!

Using an environment variable for the base URL enhances flexibility for different deployment environments.


34-45: LGTM!

The build section is correctly configured for the Vite build tool.


57-60: LGTM!

The server section is correctly configured for the Vite build tool.

package.json (3)

6-9: LGTM!

The scripts section is correctly configured for the project.


18-18: LGTM!

The dependencies section is correctly configured for the project.


48-48: LGTM!

The devDependencies section is correctly configured for the project.

src/components/DialogBox/ExportProject.vue (2)

44-44: LGTM!

The import statement change from download to downloadFile is approved.


76-76: LGTM!

The function call change from download to downloadFile is approved.

src/components/DialogBox/OpenOffline.vue (1)

70-70: LGTM!

The change from reactive to ref for the projectList variable is approved.

src/simulator/src/data/project.ts (1)

96-96: Verify the data format before storing.

The saveOffline function no longer serializes the data object before saving it to local storage. Ensure that data is already in a suitable format for storage.

Run the following script to verify the data format:

src/simulator/src/utils.ts (5)

13-14: LGTM!

The new imports from @tauri-apps/api/fs and @tauri-apps/api/path are necessary for the Tauri-specific functions.


121-127: LGTM!

The downloadFile function correctly determines the environment and calls the appropriate download function.


Line range hint 130-142: LGTM!

The downloadFileWeb function correctly handles web-based file downloads.


148-157: LGTM!

The downloadFileDesktop function correctly handles desktop-based file downloads using the Tauri API.


292-294: LGTM!

The isTauri function correctly checks if the application is running in a Tauri environment.

src/simulator/src/plotArea.js (2)

112-116: LGTM!

The download function correctly integrates the new Tauri-specific download logic.


124-148: LGTM!

The downloadImageDesktop function correctly handles desktop-based image downloads using the Tauri API.

src/simulator/src/node.js Outdated Show resolved Hide resolved
@tachyons
Copy link
Member

tachyons commented Sep 2, 2024

could you explore adding native menu?

https://tauri.app/v1/guides/features/menu/

@tachyons
Copy link
Member

tachyons commented Sep 2, 2024

You can also add github action for release https://github.com/tauri-apps/tauri-action

@tachyons
Copy link
Member

@niladrix719 Could you fix the git conflict ?

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 69810c0 and a6b0db3.

Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
Files selected for processing (6)
  • package.json (3 hunks)
  • src/simulator/src/data.js (1 hunks)
  • src/simulator/src/listeners.js (3 hunks)
  • src/simulator/src/plotArea.js (2 hunks)
  • src/simulator/src/utils.ts (4 hunks)
  • vite.config.ts (2 hunks)
Files skipped from review as they are similar to previous changes (1)
  • src/simulator/src/data.js
Additional context used
GitHub Check: ESLint
src/simulator/src/listeners.js

[failure] 27-27: disallow unused variables
'lineTo' is defined but never used.

Additional comments not posted (33)
vite.config.ts (5)

33-33: LGTM!

Using an environment variable for the base property is a good practice for flexible deployments.


35-35: LGTM!

The change in the output directory structure is noted and looks good.


37-37: LGTM!

Increasing the chunkSizeWarningLimit to accommodate larger chunks without triggering warnings is a reasonable change.


38-46: LGTM!

The addition of rollupOptions with the manualChunks function is a good approach for optimizing the chunking behavior and improving performance.


71-71: LGTM!

Enabling external access to the server by setting the host property to true is a helpful change for enhancing the development experience.

package.json (5)

6-6: LGTM!

The serve script has been updated to use cross-env for setting the VITE_BASE_URL environment variable, which is a good practice for cross-platform compatibility.


7-7: LGTM!

The build script has been enhanced with the following changes:

  • Using cross-env for setting the VITE_BASE_URL environment variable to ./, indicating that the built application will be served from the current directory.
  • Adding the --mode build flag to specify the build mode, which could be used to apply specific configurations or optimizations.
  • Including the --emptyOutDir flag to ensure that the output directory is emptied before the build, preventing stale files.

These changes improve the build process and provide more control over the build output.


8-8: LGTM!

The dev script has been updated to use cross-env for setting the VITE_BASE_URL environment variable, aligning with the changes made to the serve script. This ensures consistency in the base URL during development.


9-9: LGTM!

The new tauri script has been added to integrate with the Tauri framework for building desktop applications. It uses cross-env to set the VITE_BASE_URL environment variable to /simulatorvue/, ensuring that the application is served from the correct base URL when running with Tauri.


19-19: LGTM!

The following dependencies have been added to the project:

  • @tauri-apps/api and @tauri-apps/cli: These dependencies are related to the Tauri framework, indicating that the project is integrating with Tauri for building desktop applications.
  • cross-env: This dependency is used in the scripts to set environment variables in a cross-platform manner.
  • dotenv: This dependency is commonly used for loading environment variables from a .env file.

The versions of the dependencies are properly specified, and the additions align with the changes made to the scripts and the integration with Tauri.

Also applies to: 49-49, 54-55

src/simulator/src/utils.ts (4)

121-127: LGTM!

The downloadFile function provides a clean and modular approach to handle file downloads across different environments. It abstracts away the platform-specific details and offers a unified interface, enhancing code maintainability and readability.


Line range hint 130-145: LGTM!

The downloadFileWeb function follows a standard approach for triggering file downloads in web applications. It creates a temporary anchor element, sets the necessary attributes, and simulates a click event to initiate the download. The code is self-contained and does not introduce any external dependencies.


148-157: LGTM!

The downloadFileDesktop function utilizes the Tauri API to handle file downloads in a desktop environment. It retrieves the downloads directory, constructs the appropriate file path, and writes the provided text content to the specified file. The code leverages the capabilities of the Tauri framework to provide a seamless file download experience for desktop users.


346-348: LGTM!

The isTauri function provides a simple and effective way to check if the application is running in a Tauri environment. By checking for the presence of the window.__TAURI__ property, it allows the codebase to conditionally execute Tauri-specific code or fallback to alternative implementations. This enhances code flexibility and adaptability to different environments.

src/simulator/src/plotArea.js (2)

113-124: LGTM!

The changes to the download function look good. It correctly checks for the Tauri environment and calls the appropriate download method based on the environment.


126-150: Excellent implementation!

The downloadImageDesktop function is well-implemented and follows the necessary steps to download the canvas image as a file in a desktop environment using the Tauri API. It handles the image data conversion, file path construction, and binary data writing correctly. The inclusion of error handling ensures that any issues during the download process are caught and logged appropriately.

src/simulator/src/listeners.js (17)

37-38: LGTM!

The imports are valid and used appropriately in the file.


789-790: LGTM!

The zoomSliderListeners function is implemented correctly and sets up the necessary event listeners for the zoom slider.


791-792: LGTM!

The comment is informative and helps in understanding the purpose of the subsequent code.


793-795: LGTM!

The event listener for the new-project event is set up correctly and calls the appropriate method of logixFunction.


797-799: LGTM!

The event listener for the save_online event is set up correctly and calls the appropriate method of logixFunction.


801-803: LGTM!

The event listener for the save_offline event is set up correctly and calls the appropriate method of logixFunction.


805-807: LGTM!

The event listener for the open_offline event is set up correctly and calls the appropriate method of logixFunction.


809-811: LGTM!

The event listener for the export event is set up correctly and calls the appropriate method of logixFunction.


813-815: LGTM!

The event listener for the import event is set up correctly and calls the appropriate method of logixFunction.


817-819: LGTM!

The event listener for the recover event is set up correctly and calls the appropriate method of logixFunction.


821-823: LGTM!

The event listener for the clear event is set up correctly and calls the appropriate method of logixFunction.


825-827: LGTM!

The event listener for the preview_circuit event is set up correctly and calls the appropriate method of logixFunction.


829-831: LGTM!

The event listener for the new-circuit event is set up correctly and calls the appropriate method of logixFunction.


833-835: LGTM!

The event listener for the new-verilog-module event is set up correctly and calls the appropriate method of logixFunction.


837-839: LGTM!

The event listener for the insert-sub-circuit event is set up correctly and calls the appropriate method of logixFunction.


841-843: LGTM!

The event listener for the combinational-analysis event is set up correctly and calls the appropriate method of logixFunction.


845-879: LGTM!

The event listeners for various events are set up correctly and call the appropriate methods of logixFunction.

src/simulator/src/listeners.js Outdated Show resolved Hide resolved
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@tachyons tachyons merged commit 16e0d63 into CircuitVerse:main Sep 19, 2024
9 checks passed
tachyons added a commit that referenced this pull request Sep 19, 2024
tachyons added a commit that referenced this pull request Sep 19, 2024
Revert "feat: Desktop Application for Vue Simulator [Tauri] (#374)"

This reverts commit 16e0d63.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants