Refactor: Replace jQuery UI with Svelte components
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 andpublic/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.svelteserves 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.jshave been replaced with Svelte's reactive mechanisms. -
js/ui.jsis no longer used or loaded. - Script tags for
jquery,jquery-ui, andbootstrap.js(jQuery dependent) have been removed from the main HTML. - CSS for jQuery UI has been removed. (Bootstrap CSS is retained for general styling).
- All direct jQuery DOM manipulations and event handling in
-
Integration: The Svelte application now loads the original G-code processing scripts (
gCodeReader.js,renderer.js, etc.) and interacts with them via the globalGCODEobject. I handle G-code analysis communication withinApp.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.