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-06-16 23:45:49 +08:00
parent ef2871a983
commit 2dc85f70cc
3 changed files with 105 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/modules/editor/partials/canvas/sample-timeline-data.jsx
View File

@@ -60,6 +60,7 @@ const sampleTimelineElements = [
x: 50,
y: 600,
fontSize: 24,
fontWeight: 'bold', // ADD THIS LINE
fill: 'white',
stroke: 'black',
strokeWidth: 1,
@@ -75,6 +76,7 @@ const sampleTimelineElements = [
x: 50,
y: 650,
fontSize: 20,
fontWeight: 'bold', // ADD THIS LINE
fill: 'yellow',
stroke: 'red',
strokeWidth: 2,

2
resources/js/modules/editor/partials/canvas/video-preview.jsx
View File

@@ -445,6 +445,8 @@ const VideoPreview = ({
x={element.x}
y={element.y}
fontSize={element.fontSize}
fontStyle={element.fontWeight === 'bold' || element.fontWeight === 700 ? 'bold' : 'normal'} // ADD THIS LINE
fontFamily="Arial"
fill={element.fill}
stroke={element.stroke}
strokeWidth={element.strokeWidth}

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

@@ -1,19 +1,29 @@
import { Button } from '@/components/ui/button';
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 { Type } from 'lucide-react';
import { Bold, Minus, Plus, Type } from 'lucide-react';
import { useEffect, useState } from 'react';
export default function TextSidebar({ isOpen, onClose }) {
const { selectedTextElement } = useVideoEditorStore();
const emitter = useMitt();
const [textValue, setTextValue] = useState('');
const [fontSize, setFontSize] = useState(24); // Default font size
const [isBold, setIsBold] = useState(true); // Default to bold
// Update textarea when selected element changes
// Font size constraints
const MIN_FONT_SIZE = 8;
const MAX_FONT_SIZE = 120;
const FONT_SIZE_STEP = 2;
// Update textarea, fontSize, and bold when selected element changes
useEffect(() => {
if (selectedTextElement) {
setTextValue(selectedTextElement.text || '');
setFontSize(selectedTextElement.fontSize || 24);
setIsBold(selectedTextElement.fontWeight === 'bold' || selectedTextElement.fontWeight === 700 || true); // Default to bold if not set
}
}, [selectedTextElement]);
@@ -30,6 +40,42 @@ export default function TextSidebar({ isOpen, onClose }) {
}
};
// Handle font size changes
const handleFontSizeChange = (newSize) => {
const clampedSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, newSize));
setFontSize(clampedSize);
if (selectedTextElement) {
emitter.emit('text-update', {
elementId: selectedTextElement.id,
updates: { fontSize: clampedSize },
});
}
};
// Handle bold toggle
const handleBoldToggle = () => {
const newBoldState = !isBold;
setIsBold(newBoldState);
if (selectedTextElement) {
emitter.emit('text-update', {
elementId: selectedTextElement.id,
updates: { fontWeight: newBoldState ? 'bold' : 'normal' },
});
}
};
// Increase font size
const increaseFontSize = () => {
handleFontSizeChange(fontSize + FONT_SIZE_STEP);
};
// Decrease font size
const decreaseFontSize = () => {
handleFontSizeChange(fontSize - FONT_SIZE_STEP);
};
return (
<Sheet open={isOpen} onOpenChange={(open) => !open && onClose()}>
<SheetContent side="right" className="w-80 overflow-y-auto">
@@ -43,6 +89,7 @@ export default function TextSidebar({ isOpen, onClose }) {
<div className="mt-6 space-y-4 px-2">
{selectedTextElement ? (
<>
{/* Text Content */}
<div>
<label className="text-sm font-medium">Edit your text here</label>
<Textarea
@@ -53,6 +100,58 @@ export default function TextSidebar({ isOpen, onClose }) {
rows={4}
/>
</div>
{/* Font Size Controls */}
<div>
<label className="text-sm font-medium">Font Size</label>
<div className="mt-2 flex items-center justify-between rounded-lg border p-2">
<Button
variant="outline"
size="icon"
onClick={decreaseFontSize}
disabled={fontSize <= MIN_FONT_SIZE}
className="h-8 w-8"
>
<Minus className="h-4 w-4" />
</Button>
<div className="flex items-center gap-2">
<span className="text-lg font-semibold">{fontSize}</span>
<span className="text-sm text-gray-500">px</span>
</div>
<Button
variant="outline"
size="icon"
onClick={increaseFontSize}
disabled={fontSize >= MAX_FONT_SIZE}
className="h-8 w-8"
>
<Plus className="h-4 w-4" />
</Button>
</div>
{/* Font Size Range Indicator */}
<div className="mt-1 text-center text-xs text-gray-500">
Size range: {MIN_FONT_SIZE}px - {MAX_FONT_SIZE}px
</div>
</div>
{/* Font Style Controls */}
<div>
<label className="text-sm font-medium">Font Style</label>
<div className="mt-2">
<Button
variant={isBold ? 'default' : 'outline'}
size="sm"
onClick={handleBoldToggle}
className="flex w-full items-center gap-2"
>
<Bold className="h-4 w-4" />
<span className={isBold ? 'font-bold' : 'font-normal'}>{isBold ? 'Bold' : 'Normal'}</span>
</Button>
</div>
</div>
</>
) : (
<div className="text-center text-gray-500">