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-28 12:54:30 +08:00
parent f8dc4c01f2
commit fe1066583a
13 changed files with 781 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,19 +8,8 @@ import useVideoEditorStore from '@/stores/VideoEditorStore';
import { Bold, Italic, Minus, Plus, Type } from 'lucide-react';
import { useEffect, useState } from 'react';
// Font configuration - extensible for adding more fonts
const AVAILABLE_FONTS = [
{
name: 'Montserrat',
value: 'Montserrat',
fontFiles: {
normal: '/fonts/Montserrat/static/Montserrat-Regular.ttf',
bold: '/fonts/Montserrat/static/Montserrat-Bold.ttf',
italic: '/fonts/Montserrat/static/Montserrat-Italic.ttf',
boldItalic: '/fonts/Montserrat/static/Montserrat-BoldItalic.ttf',
},
},
];
// Import centralized font management
import { DEFAULT_TEXT_CONFIG, getAvailableFonts, loadFonts } from '@/modules/editor/fonts';
export default function TextSidebar({ isOpen, onClose }) {
const { selectedTextElement } = useVideoEditorStore();
@@ -44,17 +33,41 @@ export default function TextSidebar({ isOpen, onClose }) {
const MAX_STROKE_WIDTH = 3;
const STROKE_WIDTH_STEP = 1;
// Get available fonts from centralized source
const availableFonts = getAvailableFonts();
// Load fonts for preview
useEffect(() => {
const loadPreviewFonts = async () => {
if (fontFamily) {
try {
await loadFonts([
{
fontFamily,
fontWeight: isBold ? 700 : 400,
fontStyle: isItalic ? 'italic' : 'normal',
fontSize: 16,
},
]);
} catch (error) {
console.warn('Failed to load preview font:', error);
}
}
};
loadPreviewFonts();
}, [fontFamily, isBold, isItalic]);
// Update state when selected element changes - THIS KEEPS SIDEBAR IN SYNC WITH TRANSFORMER
useEffect(() => {
if (selectedTextElement) {
setTextValue(selectedTextElement.text || '');
setFontSize(selectedTextElement.fontSize || 24);
setFontSize(selectedTextElement.fontSize || DEFAULT_TEXT_CONFIG.fontSize);
setIsBold(selectedTextElement.fontWeight === 'bold' || selectedTextElement.fontWeight === 700 || true);
setIsItalic(selectedTextElement.fontStyle === 'italic' || false);
setFontFamily(selectedTextElement.fontFamily || 'Montserrat');
setFillColor(selectedTextElement.fill || '#ffffff');
setStrokeColor(selectedTextElement.stroke || '#000000');
setStrokeWidth(selectedTextElement.strokeWidth || 2);
setFontFamily(selectedTextElement.fontFamily || DEFAULT_TEXT_CONFIG.fontFamily);
setFillColor(selectedTextElement.fill || DEFAULT_TEXT_CONFIG.fill);
setStrokeColor(selectedTextElement.stroke || DEFAULT_TEXT_CONFIG.stroke);
setStrokeWidth(selectedTextElement.strokeWidth || DEFAULT_TEXT_CONFIG.strokeWidth);
}
}, [selectedTextElement]);
@@ -231,11 +244,11 @@ export default function TextSidebar({ isOpen, onClose }) {
<SelectValue placeholder="Select font" />
</SelectTrigger>
<SelectContent>
{AVAILABLE_FONTS.map((font) => (
{availableFonts.map((font) => (
<SelectItem key={font.value} value={font.value}>
<span
style={{
fontFamily: font.name,
fontFamily: font.value,
fontWeight: isBold ? 'bold' : 'normal',
fontStyle: isItalic ? 'italic' : 'normal',
}}