gCodeViewer icon indicating copy to clipboard operation
gCodeViewer copied to clipboard

Refactor: Replace jQuery UI with Svelte components

Open hudbrog opened this issue 8 months ago • 0 comments

This commit completes the migration of the GCodeViewer UI from jQuery and jQuery UI to a modern Svelte-based component architecture.

Key changes include:

  • Svelte Environment: Introduced Svelte, Rollup for building, and a new project structure under src/ for Svelte components and public/ for the application entry point (public/index.html).

  • Component-Based UI: Reimplemented all major UI elements as Svelte components, including:

    • Accordions, Tabs, Sliders (vertical and horizontal)
    • Modals, Dropdowns, Buttons, Progress Bars
    • File Uploader (with drag & drop)
    • Information display panels (ModelInfo, LayerInfo)
    • Options panels (2D Render, Analyzer, Printer Info)
    • Notification system
    • CodeMirror integration for G-code preview
  • Application Orchestration: App.svelte serves as the main application component, managing state, component interactions, and communication with the original G-code processing logic.

  • jQuery Removal:

    • All direct jQuery DOM manipulations and event handling in js/ui.js have been replaced with Svelte's reactive mechanisms.
    • js/ui.js is no longer used or loaded.
    • Script tags for jquery, jquery-ui, and bootstrap.js (jQuery dependent) have been removed from the main HTML.
    • CSS for jQuery UI has been removed. (Bootstrap CSS is retained for general styling).
  • Integration: The Svelte application now loads the original G-code processing scripts (gCodeReader.js, renderer.js, etc.) and interacts with them via the global GCODE object. I handle G-code analysis communication within App.svelte.

  • Modernization: Includes improved accessibility in some components and a more maintainable, reactive codebase. Browser capability checks are performed on load, with notifications for missing features.

This refactoring aims to improve the maintainability, performance, and developer experience of the GCodeViewer frontend.

hudbrog avatar May 23 '25 22:05 hudbrog