Panels
Define selectable 3D panels with labels that map to editable surfaces in the Print Editor for Print CAD standards.
The Panels tab maps the flat dieline geometry to named, selectable surfaces that customers can design on in the Print Editor. Each panel represents a face of the finished packaging — top, bottom, front, back, side flaps, etc. When a customer opens the editor for a parametric product, these panels appear as labeled regions on the canvas that can be selected for design placement.
Access Panels
- Open any standard from the Custom Libraries list.
- Select the Panels tab in the edit form.
Interface
The Panels tab has a split layout:
- Left (3/4 width): Interactive SVG viewer showing the dieline with panel regions highlighted. Use the zoom in/out buttons to adjust the view. Clicking a panel in the SVG highlights the corresponding row in the grid.
- Right (1/4 width): Panel configuration grid.
Panels Grid
| Column | Description |
|---|---|
| Id | Internal identifier for the panel, derived from the dieline geometry. |
| Name | Display name for the panel (e.g., "Front", "Back", "Top", "Left Side"). Click the edit icon to rename. This label is shown to customers in the Print Editor when selecting which surface to design on. |
| Enabled | Checkbox controlling whether this panel is available for design in the Print Editor. Disabled panels are part of the dieline geometry but are not selectable as design surfaces. |
Associations
Print Store
| Area | Effect |
|---|---|
| 3D widget | Panel definitions are stored in ParametricConfiguration.Panels as JSON. The storefront's Three.js parametric widget uses panel data to render the 3D packaging preview with distinct, labeled surfaces. Customers can rotate the 3D model and see how panels map to the physical product. |
| Dieline rendering | The ParametricSystem generates separate SVG views for outside and inside surfaces based on panel definitions. These views are used for dieline images served to the editor and storefront. |
Print Editor
| Area | Effect |
|---|---|
| Dieline panels | Enabled panels render as DielinePanel objects on the editor canvas with labeled boundaries. Customers click a panel to select it as the active design surface, then place text, images, and graphics within that panel's area. |
| Align to panel | The editor's stage component supports aligning design elements relative to panel boundaries. This ensures precise positioning of artwork within individual packaging faces. |
| Panel selection | The editor tracks hover and select states for panels. Clicking a panel highlights it, and the editor adjusts the canvas context to that panel's coordinate space for accurate design placement. |
Related Pages
- Animations — Assign fold angles to panels for the 3D folding animation
- Sandbox — Preview panel positions and labels with real-time SVG rendering
- Standard Information — Link the editor source product that uses these panel definitions