charlestehio/memefast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
ct
2025-05-28 21:07:21 +08:00
parent 006436f023
commit 24c78d5cca
5 changed files with 163 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
resources/js/components/custom/use-tailwind-breakpoint.jsx Normal file
View File

@@ -0,0 +1,41 @@
import { useEffect, useState } from 'react';
// Hardcoded breakpoints based on your Tailwind config
const breakpoints = {
xxxxs: 0,
xxxs: 275,
xxs: 320,
xs: 475,
sm: 640,
md: 768,
lg: 1024,
xl: 1280,
'2xl': 1400,
};
const getCurrentBreakpoint = () => {
if (typeof window === 'undefined') return null; // Handle SSR
const sortedBreakpoints = Object.entries(breakpoints).sort((a, b) => b[1] - a[1]);
return sortedBreakpoints.find(([_, width]) => window.innerWidth >= width)?.[0] || 'xxs';
};
const useTailwindBreakpoint = () => {
const [breakpoint, setBreakpoint] = useState(null);
useEffect(() => {
const handleResize = () => {
setBreakpoint(getCurrentBreakpoint());
};
handleResize(); // Set initial breakpoint
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return breakpoint;
};
export default useTailwindBreakpoint;

77
resources/js/modules/editor/editor.tsx
View File

@@ -1,14 +1,68 @@
import { useState } from "react"
import { useState, useEffect, useLayoutEffect } from "react"
import EditSidebar from "./partials/edit-sidebar"
import EditorCanvas from "./partials/editor-canvas"
import EditorHeader from "./partials/editor-header"
import EditorControls from "./partials/editor-controls"
// Shared responsive hook
const useResponsiveWidth = (maxWidth = 350) => {
const [width, setWidth] = useState(350);
const calculateWidth = () => {
const viewportWidth = window.innerWidth;
const padding = 32;
const availableWidth = viewportWidth - padding;
const constrainedWidth = Math.min(availableWidth, maxWidth);
setWidth(constrainedWidth);
};
useLayoutEffect(() => {
calculateWidth();
}, [maxWidth]);
useEffect(() => {
calculateWidth();
const handleResize = () => calculateWidth();
window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleResize);
// ResizeObserver for more reliable detection
let resizeObserver;
if (window.ResizeObserver) {
resizeObserver = new ResizeObserver(calculateWidth);
resizeObserver.observe(document.body);
}
// MutationObserver for dev tools
let mutationObserver;
if (window.MutationObserver) {
mutationObserver = new MutationObserver(() => {
setTimeout(calculateWidth, 50);
});
mutationObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['style']
});
}
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleResize);
if (resizeObserver) resizeObserver.disconnect();
if (mutationObserver) mutationObserver.disconnect();
};
}, [maxWidth]);
return width;
};
const Editor = () => {
const [isEditSidebarOpen, setIsEditSidebarOpen] = useState(false)
const maxWidth = 350;
const maxWidth = 325;
const responsiveWidth = useResponsiveWidth(maxWidth);
const handleEditClick = () => {
setIsEditSidebarOpen(!isEditSidebarOpen)
@@ -18,18 +72,23 @@ const Editor = () => {
setIsEditSidebarOpen(false)
}
return (
<div className="max-w-sm mx-auto min-h-screen flex flex-col relative space-y-4 py-6">
<div
className="mx-auto min-h-screen flex flex-col relative space-y-4 py-6"
style={{ width: `${responsiveWidth}px` }}
>
<EditSidebar isOpen={isEditSidebarOpen} onClose={handleCloseSidebar} />
<EditorHeader className="max-width-[350px]" />
<EditorHeader className="mx-auto" style={{ width: `${responsiveWidth}px` }} />
<EditorCanvas maxWidth={maxWidth} />
<EditorControls className="max-width-[350px]" onEditClick={handleEditClick} isEditActive={isEditSidebarOpen} />
<EditorControls
className="mx-auto"
style={{ width: `${responsiveWidth}px` }}
onEditClick={handleEditClick}
isEditActive={isEditSidebarOpen}
/>
</div>
)
}
export default Editor;

50
resources/js/modules/editor/partials/editor-canvas.tsx
View File

@@ -5,31 +5,65 @@ const useResponsiveCanvas = (maxWidth = 350) => {
const calculateScale = () => {
const viewportWidth = window.innerWidth;
const padding = 0; // 16px padding on each side
const availableWidth = viewportWidth - padding;
// Very aggressive padding reduction for small screens
let padding;
if (viewportWidth < 320) {
padding = 0; // Almost no padding on very small screens
} else if (viewportWidth < 400) {
padding = 0; // Minimal padding on small screens
} else {
padding = 0; // Normal padding on larger screens
}
const availableWidth = viewportWidth - padding;
const constrainedWidth = Math.min(availableWidth, maxWidth);
const newScale = constrainedWidth / 720;
// Don't scale above 100% and ensure minimum scale for very small screens
setScale(Math.max(0.3, Math.min(newScale, 1)));
// Just cap at 100%, no minimum to avoid clipping
const finalScale = Math.min(newScale, 1);
setScale(finalScale);
};
useLayoutEffect(() => {
calculateScale();
}, []);
}, [maxWidth]);
useEffect(() => {
calculateScale();
const handleResize = () => calculateScale();
// Multiple event listeners for better coverage
window.addEventListener('resize', handleResize);
window.addEventListener('orientationchange', handleResize);
// ResizeObserver for more reliable detection in dev tools
let resizeObserver;
if (window.ResizeObserver) {
resizeObserver = new ResizeObserver(calculateScale);
resizeObserver.observe(document.body);
}
// MutationObserver to catch when dev tools changes the viewport
let mutationObserver;
if (window.MutationObserver) {
mutationObserver = new MutationObserver(() => {
setTimeout(calculateScale, 50);
});
mutationObserver.observe(document.documentElement, {
attributes: true,
attributeFilter: ['style']
});
}
return () => {
window.removeEventListener('resize', handleResize);
window.removeEventListener('orientationchange', handleResize);
if (resizeObserver) resizeObserver.disconnect();
if (mutationObserver) mutationObserver.disconnect();
};
}, []);
}, [maxWidth]);
return scale;
};
@@ -50,7 +84,7 @@ const EditorCanvas = ({maxWidth = 350}) => {
};
return (
<div className="mx-auto p-4">
<div className="w-full flex justify-center">
<div
style={{
width: `${displayWidth}px`,
@@ -58,7 +92,7 @@ const EditorCanvas = ({maxWidth = 350}) => {
}}
>
<div
className="rounded-3xl bg-white shadow-sm origin-top-left"
className="border rounded-3xl bg-white shadow-sm origin-top-left"
style={{
width: `${canvasWidth}px`,
height: `${canvasHeight}px`,

17
resources/js/modules/editor/partials/editor-controls.tsx
View File

@@ -10,19 +10,24 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
<Button
variant="ghost"
size="icon"
className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
className="w-12 h-12 rounded-full shadow-sm border "
>
<Play className="h-8 w-8 " />
</Button>
<Button
variant="ghost"
size="icon"
className="w-12 h-12 rounded-full shadow-sm border "
>
<span className="text-sm font-medium ">9:16</span>
</Button>
<div className="w-12 h-12 rounded-full bg-white shadow-sm border border-gray-100 flex items-center justify-center">
<span className="text-md font-medium ">9:16</span>
</div>
<Button
variant="ghost"
size="icon"
className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
className="w-12 h-12 rounded-full shadow-sm border "
>
<Type className="h-8 w-8 " />
</Button>
@@ -40,7 +45,7 @@ const EditorControls = ({ className = '', onEditClick = () => {}, isEditActive =
<Button
variant="ghost"
size="icon"
className="w-12 h-12 rounded-full bg-white shadow-sm hover:bg-gray-50 border border-gray-100"
className="w-12 h-12 rounded-full shadow-sm border "
>
<Download className="h-8 w-8 " />
</Button>

2
resources/js/modules/editor/partials/editor-header.tsx
View File

@@ -7,7 +7,7 @@ const EditorHeader = (
{className = ''}
) => {
return (
<div className={cn("bg-white rounded-3xl p-4 flex items-center justify-between shadow-sm", className)}>
<div className={cn("bg-white rounded-3xl p-4 flex items-center justify-between shadow-sm w-full", className)}>
<Button variant="outline" size="icon" className="rounded">
<Menu className="h-8 w-8" />
</Button>