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

Revert "Update"

Browse Source 
This reverts commit bf5e875ee9.
This commit is contained in:
ct
2025-06-17 20:32:49 +08:00
parent 0b0d1db35c
commit f3e46530c3
33 changed files with 89 additions and 1131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
resources/js/modules/editor/partials/text-sidebar.jsx
View File

@@ -1,72 +1,32 @@
import { Button } from '@/components/ui/button';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
import { Textarea } from '@/components/ui/textarea';
import { useMitt } from '@/plugins/MittContext';
import useVideoEditorStore from '@/stores/VideoEditorStore';
import { Bold, Italic, Minus, Plus, Type } from 'lucide-react';
import { Bold, Minus, Plus, Type } from 'lucide-react';
import { useEffect, useState } from 'react';
// Font configuration
const DEFAULT_FONT_FAMILY = 'Montserrat';
const AVAILABLE_FONTS = [{ value: 'Montserrat', label: 'Montserrat' }];
export default function TextSidebar({ isOpen, onClose }) {
const { selectedTextElement } = useVideoEditorStore();
const emitter = useMitt();
const [textValue, setTextValue] = useState('');
const [fontSize, setFontSize] = useState(24);
const [fontFamily, setFontFamily] = useState(DEFAULT_FONT_FAMILY);
const [isBold, setIsBold] = useState(true);
const [isItalic, setIsItalic] = useState(false);
const [fontSize, setFontSize] = useState(24); // Default font size
const [isBold, setIsBold] = useState(true); // Default to bold
// Font size constraints
const MIN_FONT_SIZE = 8;
const MAX_FONT_SIZE = 120;
const FONT_SIZE_STEP = 2;
// Update all state when selected element changes
// Update textarea, fontSize, and bold when selected element changes
useEffect(() => {
if (selectedTextElement) {
setTextValue(selectedTextElement.text || '');
setFontSize(selectedTextElement.fontSize || 24);
setFontFamily(selectedTextElement.fontFamily || DEFAULT_FONT_FAMILY);
setIsBold(selectedTextElement.fontWeight === 'bold' || selectedTextElement.fontWeight === 700 || true);
setIsItalic(selectedTextElement.fontStyle === 'italic' || false);
setIsBold(selectedTextElement.fontWeight === 'bold' || selectedTextElement.fontWeight === 700 || true); // Default to bold if not set
}
}, [selectedTextElement]);
// Listen for fontSize changes from canvas transformations (separate from selection)
useEffect(() => {
const handleTextElementUpdate = (updatedElement) => {
if (selectedTextElement && updatedElement.id === selectedTextElement.id) {
// Update local state to reflect changes from canvas
if (updatedElement.fontSize !== undefined) {
setFontSize(updatedElement.fontSize);
}
if (updatedElement.text !== undefined) {
setTextValue(updatedElement.text);
}
if (updatedElement.fontFamily !== undefined) {
setFontFamily(updatedElement.fontFamily);
}
if (updatedElement.fontWeight !== undefined) {
setIsBold(updatedElement.fontWeight === 'bold' || updatedElement.fontWeight === 700);
}
if (updatedElement.fontStyle !== undefined) {
setIsItalic(updatedElement.fontStyle === 'italic');
}
}
};
// Listen for updates from canvas transforms (doesn't open sidebar)
emitter.on('text-element-updated', handleTextElementUpdate);
return () => {
emitter.off('text-element-updated', handleTextElementUpdate);
};
}, [emitter, selectedTextElement]);
// Handle text changes
const handleTextChange = (e) => {
const newText = e.target.value;
@@ -80,18 +40,6 @@ export default function TextSidebar({ isOpen, onClose }) {
}
};
// Handle font family changes
const handleFontFamilyChange = (newFontFamily) => {
setFontFamily(newFontFamily);
if (selectedTextElement) {
emitter.emit('text-update', {
elementId: selectedTextElement.id,
updates: { fontFamily: newFontFamily },
});
}
};
// Handle font size changes
const handleFontSizeChange = (newSize) => {
const clampedSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, newSize));
@@ -118,19 +66,6 @@ export default function TextSidebar({ isOpen, onClose }) {
}
};
// Handle italic toggle
const handleItalicToggle = () => {
const newItalicState = !isItalic;
setIsItalic(newItalicState);
if (selectedTextElement) {
emitter.emit('text-update', {
elementId: selectedTextElement.id,
updates: { fontStyle: newItalicState ? 'italic' : 'normal' },
});
}
};
// Increase font size
const increaseFontSize = () => {
handleFontSizeChange(fontSize + FONT_SIZE_STEP);
@@ -161,46 +96,11 @@ export default function TextSidebar({ isOpen, onClose }) {
value={textValue}
onChange={handleTextChange}
placeholder="Enter your text..."
className="mt-2 border-2 text-center text-nowrap"
className="mt-2 text-center"
rows={4}
style={{
fontFamily: fontFamily,
fontSize: `${fontSize * 0.45}px`, // Better scaling
fontWeight: isBold ? 'bold' : 'normal',
fontStyle: isItalic ? 'italic' : 'normal',
lineHeight: '1.4',
}}
/>
</div>
{/* Font Fa
{/* Font Family */}
<div>
<label className="text-sm font-medium">Font Family</label>
<Select value={fontFamily} onValueChange={handleFontFamilyChange}>
<SelectTrigger className="mt-2">
<SelectValue placeholder="Select font">
<span style={{ fontFamily: fontFamily }}>
{AVAILABLE_FONTS.find((f) => f.value === fontFamily)?.label || 'Select font'}
</span>
</SelectValue>
</SelectTrigger>
<SelectContent>
{AVAILABLE_FONTS.map((font) => (
<SelectItem
key={font.value}
value={font.value}
style={{ fontFamily: font.value }}
className="cursor-pointer"
>
<span style={{ fontFamily: font.value }}>{font.label}</span>
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{/* Font Size Controls */}
<div>
<label className="text-sm font-medium">Font Size</label>
@@ -235,35 +135,20 @@ export default function TextSidebar({ isOpen, onClose }) {
<div className="mt-1 text-center text-xs text-gray-500">
Size range: {MIN_FONT_SIZE}px - {MAX_FONT_SIZE}px
</div>
{/* Visual feedback for canvas scaling */}
<div className="mt-1 text-center text-xs text-blue-600">
💡 Tip: You can also resize text by dragging the corners on the canvas
</div>
</div>
{/* Font Style Controls */}
<div>
<label className="text-sm font-medium">Font Style</label>
<div className="mt-2 flex gap-2">
<div className="mt-2">
<Button
variant={isBold ? 'default' : 'outline'}
size="sm"
onClick={handleBoldToggle}
className="flex flex-1 items-center gap-2"
className="flex w-full items-center gap-2"
>
<Bold className="h-4 w-4" />
<span className={isBold ? 'font-bold' : 'font-normal'}>Bold</span>
</Button>
<Button
variant={isItalic ? 'default' : 'outline'}
size="sm"
onClick={handleItalicToggle}
className="flex flex-1 items-center gap-2"
>
<Italic className="h-4 w-4" />
<span className={isItalic ? 'italic' : 'not-italic'}>Italic</span>
<span className={isBold ? 'font-bold' : 'font-normal'}>{isBold ? 'Bold' : 'Normal'}</span>
</Button>
</div>
</div>