Feature: 2D Design Studio
Relevant source files
The following files were used as context for generating this wiki page:
The 2D Design Studio is a core creative module within the eefashiondesign application. It provides a comprehensive interface for users to create, edit, and manage 2D fashion designs. The studio is composed of a central canvas, a toolbar for tool selection, a properties panel for editing object attributes, and a layer panel for managing the design's composition.
This feature is designed to be a versatile workspace, allowing for the creation of designs from scratch or the import of images from other parts of the application, such as the AR Camera. It integrates with backend services for auto-saving and exporting designs in various formats like PNG, SVG, and PDF.
Architecture Overview
The 2D Design Studio is architecturally centered around the DesignStudioScreen.js component, which acts as the main container and orchestrator. It manages the application state for the entire design process and coordinates interactions between its child components: Toolbar, PropertiesPanel, and LayerPanel.
Sources: src/features/design2D/screens/DesignStudioScreen.js
Component Interaction Diagram
This diagram illustrates the relationship between the main screen and its primary UI components. DesignStudioScreen holds the central state, which is passed down to and modified by the various panels.
State Management
State is managed locally within DesignStudioScreen.js using React's useState hooks. This centralized approach ensures a single source of truth for the design canvas and its related UI panels.
| State Variable | Description |
|---|---|
layers | An array of objects, where each object represents a distinct element (shape, text, image) on the canvas. |
selectedObject | The object currently selected by the user, whose properties are displayed in the PropertiesPanel. |
tool | A string representing the currently active tool selected from the Toolbar (e.g., 'select', 'text'). |
zoom | A number indicating the current zoom level of the canvas. |
history | An array that stores snapshots of the layers state to enable undo/redo functionality. |
importedImage | Holds the URI of an image passed from another screen, like the AR Camera, to be added as a new layer. |
Sources: src/features/design2D/screens/DesignStudioScreen.js, AUDIT_FIXES_SUMMARY.md
Key Features and Data Flow
1. Export Functionality
The studio allows users to export their designs into multiple formats, including PNG, SVG, and PDF. This is handled by an exportService which takes a reference to the canvas view (viewRef) to capture the design.
A critical bug was fixed where the UI was incorrectly checking for a result.success object instead of a fileUri string returned by the service. The logic is now corrected to provide accurate user feedback upon successful or failed exports.
Sources: CRITICAL_BUGS_FIXED.md, src/features/design2D/screens/DesignStudioScreen.js
Export Sequence Diagram
This diagram shows the corrected flow for exporting a design as a PNG.
2. Auto-Save and Manual Save
To prevent data loss, the studio integrates an autoSaveService. This service is initialized when the component mounts and periodically saves the design. A manual "Save Design" button is also provided for explicit saves.
An important bug was fixed where the autoSaveService.save() method for manual saves did not exist, causing the app to crash. The method has been implemented, and the start() method was updated to store necessary references, allowing manual saves to function correctly.
Sources: CRITICAL_BUGS_FIXED.md, src/features/design2D/screens/DesignStudioScreen.js
Auto-Save and Manual Save Flow
3. Image Import
The Design Studio can receive images from other parts of the application, such as the AR Camera feature. When navigating to the DesignStudioScreen, an importedImage URI can be passed as a route parameter. The screen then uses a useEffect hook to add this image as a new layer on the canvas.
Sources: AUDIT_FIXES_SUMMARY.md, src/features/design2D/screens/DesignStudioScreen.js
4. Component Breakdown
Toolbar
The Toolbar component presents a list of available design tools. When a user selects a tool, it updates the tool state in the parent DesignStudioScreen.
Sources: src/components/DesignStudio/Toolbar.js
PropertiesPanel
This panel becomes active when an object on the canvas is selected. It displays the properties of the selectedObject (e.g., color, opacity, dimensions) and allows the user to modify them. Changes made in this panel trigger an update to the layers state in DesignStudioScreen.
Sources: src/components/DesignStudio/PropertiesPanel.js
LayerPanel
The LayerPanel visualizes the layers array, allowing the user to see the stacking order of design elements. It provides controls to reorder, hide, or delete layers, with all actions modifying the central layers state.
Sources: src/components/DesignStudio/LayerPanel.js
Configuration
The Design Studio relies on centralized constants for its default behavior, ensuring consistency and ease of maintenance.
Canvas Settings
These settings define the default properties of the design canvas.
| Constant | Value | Description |
|---|---|---|
DEFAULT_WIDTH | 800 | The default width of the canvas area. |
DEFAULT_HEIGHT | 1000 | The default height of the canvas area. |
MIN_ZOOM | 0.5 | The minimum allowed zoom level. |
MAX_ZOOM | 5 | The maximum allowed zoom level. |
ZOOM_STEP | 0.1 | The increment/decrement value for zoom actions. |
GRID_SIZE | 20 | The size of the grid squares for alignment. |
SNAP_THRESHOLD | 10 | The pixel distance for snapping objects to the grid. |
Sources: src/config/constants.js:120-128
Export Settings
These constants configure the available export options.
| Constant | Value | Description |
|---|---|---|
FORMATS | ['PNG', 'JPG', 'SVG', 'PDF'] | An array of supported export file formats. |
DEFAULT_FORMAT | 'PNG' | The default format selected for export. |
DEFAULT_QUALITY | 1.0 | The default export quality (for lossy formats). |
MAX_FILE_SIZE | 10485760 (10MB) | The maximum file size for exports. |
Sources: src/config/constants.js:131-137
Conclusion
The 2D Design Studio is a robust and feature-rich module built on a clear, component-based architecture. Its centralized state management in DesignStudioScreen allows for predictable data flow and straightforward interaction between the canvas and its associated UI panels. Key integrations with services for saving and exporting, along with the ability to import assets from other features, make it a pivotal part of the application's creative workflow. The resolution of critical bugs related to saving and exporting has further solidified its stability and reliability.