Repository navigation
Restore mockup controls and canvas rendering - #6
Conversation
Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Centering is incorrect in several cases, the perspective control has no effect, and the restored workflow lacks regression coverage.
Review effort: Balanced
Findings: 3
Open (4)
What changed in this PR
Restores mockup creation in the studio and rendering for desktop/browser frames.
Changes:
- Restores the mockup sidebar panel with accessible controls.
- Adds desktop and browser canvas renderers.
- Centers newly created mockups.
| File | Description |
|---|---|
src/App.tsx |
Restores the panel and adds centered placement. |
src/components/MockupComposer.tsx |
Improves control accessibility and styling. |
src/components/DynamicLayerRenderer.tsx |
Adds desktop and browser frame rendering. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| const mockupSize = { | ||
| mobile: { width: 128, height: 256 }, | ||
| tablet: { width: 192, height: 256 }, | ||
| laptop: { width: 256, height: 154 }, |
| x: Math.max(0, Math.round((displayWidth - mockupSize.width) / 2)), | ||
| y: Math.max(0, Math.round((displayHeight - mockupSize.height) / 2)), |
| {sidebarActiveTab === 'mockup' && ( | ||
| <div className="animate-in fade-in duration-150"> | ||
| <MockupComposer onAddMockup={handleAddMockupLayer} /> |
| {sidebarActiveTab === 'mockup' && ( | ||
| <div className="animate-in fade-in duration-150"> | ||
| <MockupComposer onAddMockup={handleAddMockupLayer} /> |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: c9a5a2cab2
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {sidebarActiveTab === 'mockup' && ( | ||
| <div className="animate-in fade-in duration-150"> | ||
| <MockupComposer onAddMockup={handleAddMockupLayer} /> |
There was a problem hiding this comment.
When the active asset is infographic, this unconditionally exposes the composer and handleAddMockupLayer appends the new layer to canvasLayers.infographic, but the infographic workspace and its export stage render only the infographic rows and stickers—not canvasLayers.infographic through DynamicLayerRenderer. The user receives a success toast, yet the mockup is absent from both preview and exported infographic; disable this panel for that asset or render the added layers there.
Useful? React with 👍 / 👎.
|
|
||
| {sidebarActiveTab === 'mockup' && ( | ||
| <div className="animate-in fade-in duration-150"> | ||
| <MockupComposer onAddMockup={handleAddMockupLayer} /> |
There was a problem hiding this comment.
The restored composer persists data.tilt3D, but the rendering path wired here is DynamicLayerRenderer, which never reads that property and always uses its ordinary rotate/scale transform. Consequently toggling between isometric and flat before adding any mockup produces identical output; pass this flag into the rendered transform or use the dedicated mockup renderer that implements it.
Useful? React with 👍 / 👎.
|
|
||
| if (mockupType === 'browser') { | ||
| return ( | ||
| <div className="w-60 h-44 rounded-2xl border-2 border-slate-700 bg-slate-900 shadow-2xl overflow-hidden flex flex-col select-none"> |
There was a problem hiding this comment.
For browser mockups, selecting silver, gold, or midnight in the composer has no visual effect: this new frame hardcodes bg-slate-900 border-slate-700 and does not apply the computed frameBg classes. Apply frameBg to the browser shell so its persisted frame-color setting is reflected.
Useful? React with 👍 / 👎.
Mockup creation had become inaccessible from the studio, and desktop/browser frames did not render as their intended device mockups. This restores the mockup panel and reconnects it to canvas layers so users can create these frames again.
The panel now exposes accessible, keyboard-friendly controls for all mockup types. Desktop and browser layers receive dedicated renderers, and newly added mockups are centered within the active canvas instead of starting at a fixed position.
Validation: lint, build, and the full test suite passed; the mockup panel and desktop/browser additions were also verified in the browser.