From c9a5a2cab2cb58e19a3a8896ff454e62d6f4a2aa Mon Sep 17 00:00:00 2001 From: Ehsan <1883051+ehsanking@users.noreply.github.com> Date: Sat, 3 Oct 2026 23:52:03 +0330 Subject: [PATCH] Restore mockup controls and rendering Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- src/App.tsx | 31 ++++++++++++++++------ src/components/DynamicLayerRenderer.tsx | 34 +++++++++++++++++++++++++ src/components/MockupComposer.tsx | 27 ++++++++++++-------- 3 files changed, 73 insertions(+), 19 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index 9576214..eca81b2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -146,9 +146,6 @@ export function App() { }; }; - // Accordion state for quick access in Studio sidebar - const [openStudioPanel, setOpenStudioPanel] = useState<'mockup' | 'ai' | 'gradient' | 'font' | 'logo' | 'image' | 'konva' | 'chart' | null>(null); - // Logo Config State const [logoConfig, setLogoConfig] = useState(DEFAULT_LOGO_CONFIG); @@ -271,7 +268,7 @@ export function App() { const [exportProgressText, setExportProgressText] = useState(''); const [isFullscreenPreview, setIsFullscreenPreview] = useState(false); const [isLivePreviewOpen, setIsLivePreviewOpen] = useState(false); - const [sidebarActiveTab, setSidebarActiveTab] = useState<'layers' | 'badges' | 'logo' | 'gradient' | 'typography' | 'image' | 'ai' | 'konva' | 'chart'>('layers'); + const [sidebarActiveTab, setSidebarActiveTab] = useState<'layers' | 'mockup' | 'badges' | 'logo' | 'gradient' | 'typography' | 'image' | 'ai' | 'konva' | 'chart'>('layers'); // Precision Dragging & Snapping Settings const [enableMagneticSnap, setEnableMagneticSnap] = useState(true); @@ -566,6 +563,16 @@ export function App() { const handleAddMockupLayer = (mockupConfig: Partial) => { const newId = `mockup-${Date.now()}`; + const mockupType = mockupConfig.data?.mockupType || 'mobile'; + const mockupSize = { + mobile: { width: 128, height: 256 }, + tablet: { width: 192, height: 256 }, + laptop: { width: 256, height: 154 }, + desktop: { width: 256, height: 216 }, + browser: { width: 240, height: 176 }, + box3d: { width: 144, height: 192 }, + }[mockupType]; + const { displayWidth, displayHeight } = getWorkspaceDisplaySize(targetPlatform, activeAsset); const newLayer: CanvasLayerItem = { id: newId, name: mockupConfig.name || 'موکاپ جدید', @@ -576,8 +583,8 @@ export function App() { scale: mockupConfig.scale || 0.9, rotation: mockupConfig.rotation || 0, opacity: mockupConfig.opacity || 100, - x: 140, - y: 70, + x: Math.max(0, Math.round((displayWidth - mockupSize.width) / 2)), + y: Math.max(0, Math.round((displayHeight - mockupSize.height) / 2)), data: mockupConfig.data || {}, }; @@ -2658,9 +2665,10 @@ export function App() {
{/* Photoshop Studio Dock Tab Navigation Bar */} -
+
{[ { id: 'layers', label: 'لایه‌ها', icon: Layers, color: 'text-amber-400' }, + { id: 'mockup', label: 'موکاپ‌ها', icon: Smartphone, color: 'text-indigo-400' }, { id: 'badges', label: 'بج‌های ژاکت', icon: ShieldCheck, color: 'text-emerald-400' }, { id: 'logo', label: 'لوگو و کادر', icon: ShoppingBag, color: 'text-orange-400' }, { id: 'gradient', label: 'گرادیانت', icon: Palette, color: 'text-purple-400' }, @@ -2677,7 +2685,8 @@ export function App() { key={tab.id} type="button" onClick={() => setSidebarActiveTab(tab.id as any)} - className={`px-2.5 py-1.5 rounded-xl text-xs font-bold transition-all flex items-center gap-1.5 whitespace-nowrap shrink-0 ${ + aria-pressed={isActive} + className={`min-h-10 px-3 rounded-xl text-xs font-bold transition-colors flex items-center gap-1.5 whitespace-nowrap shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-400 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950 ${ isActive ? 'bg-amber-500 text-slate-950 font-black shadow-md' : 'text-slate-400 hover:text-slate-200 hover:bg-slate-800/80' @@ -2742,6 +2751,12 @@ export function App() {
)} + {sidebarActiveTab === 'mockup' && ( +
+ +
+ )} + {/* TAB 2: ZHAKET OFFICIAL BADGES DIRECT CATALOG */} {sidebarActiveTab === 'badges' && (
diff --git a/src/components/DynamicLayerRenderer.tsx b/src/components/DynamicLayerRenderer.tsx index 2bd6605..e7346fd 100644 --- a/src/components/DynamicLayerRenderer.tsx +++ b/src/components/DynamicLayerRenderer.tsx @@ -1301,6 +1301,40 @@ export const DynamicLayerRenderer: React.FC = ({ ); } + if (mockupType === 'desktop') { + return ( +
+
+
+ {renderScreen()} +
+
+
+
+
+ ); + } + + if (mockupType === 'browser') { + return ( +
+
+ + + https://yourstore.com + +
+
+ {renderScreen()} +
+
+ ); + } + return (
diff --git a/src/components/MockupComposer.tsx b/src/components/MockupComposer.tsx index a33ee15..4427a71 100644 --- a/src/components/MockupComposer.tsx +++ b/src/components/MockupComposer.tsx @@ -77,7 +77,7 @@ export const MockupComposer: React.FC = ({ onAddMockup }) =

کامپوزر موکاپ‌های سه‌بعدی

-

افزودن انواع فریم گوشی، تبلت، لپ‌تاپ و باکس محصول به بوم

+

افزودن فریم گوشی، تبلت، لپ‌تاپ، دسکتاپ، مرورگر و باکس سه‌بعدی به کاور

@@ -97,11 +97,13 @@ export const MockupComposer: React.FC = ({ onAddMockup }) =
- {m.title.split(' ')[0]} {m.title.split(' ')[1] || ''} + {m.title.split(' ')[0]} {m.title.split(' ')[1] || ''} ); })} @@ -134,7 +136,7 @@ export const MockupComposer: React.FC = ({ onAddMockup }) =
- +