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

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

@@ -58,10 +58,6 @@ const VideoPreview = ({
// Snap settings
const POSITION_SNAP_THRESHOLD = 10; // Pixels within which to snap to center
// Font size constraints (same as in text-sidebar.jsx)
const MIN_FONT_SIZE = 8;
const MAX_FONT_SIZE = 120;
// Function to determine which image source to use for videos
const getImageSource = (element) => {
const isVideoActive = videoStates[element.id] && isPlaying;
@@ -280,7 +276,7 @@ const VideoPreview = ({
[onElementUpdate, timelineElements],
);
// Handle transform events (scale, rotate) with fontSize conversion for text
// Handle transform events (scale, rotate) with snapping - USES NATIVE KONVA ROTATION SNAPPING
const handleTransform = useCallback(
(elementId) => {
const node = elementRefs.current[elementId];
@@ -295,29 +291,11 @@ const VideoPreview = ({
const scaleY = node.scaleY();
let newWidth, newHeight;
let updates = {};
if (element.type === 'text') {
// OPTION A: Convert scale change to fontSize change
const scale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
const newFontSize = Math.round(element.fontSize * scale);
// Clamp fontSize to valid range
const clampedFontSize = Math.max(MIN_FONT_SIZE, Math.min(MAX_FONT_SIZE, newFontSize));
// Reset scale to 1 since we're converting to fontSize
node.scaleX(1);
node.scaleY(1);
// ✅ FIX: Always get current width/height for text elements too
newWidth = node.width();
newHeight = node.height();
updates.fontSize = clampedFontSize;
updates.width = newWidth; // ✅ Always include width
updates.height = newHeight; // ✅ Always include height
console.log(`Text transform: scale=${scale.toFixed(2)}, oldFontSize=${element.fontSize}, newFontSize=${clampedFontSize}`);
// For text, allow free scaling
newWidth = node.width() * scaleX;
newHeight = node.height() * scaleY;
} else {
// For images/videos, maintain aspect ratio by using the larger scale
const scale = Math.max(Math.abs(scaleX), Math.abs(scaleY));
@@ -333,9 +311,6 @@ const VideoPreview = ({
// Update offset for center rotation
node.offsetX(newWidth / 2);
node.offsetY(newHeight / 2);
updates.width = newWidth;
updates.height = newHeight;
}
// Calculate position for snapping
@@ -345,8 +320,8 @@ const VideoPreview = ({
// Convert center position to top-left for snapping
const centerX = node.x();
const centerY = node.y();
topLeftX = centerX - newWidth / 2; // ✅ newWidth is now always defined
topLeftY = centerY - newHeight / 2; // ✅ newHeight is now always defined
topLeftX = centerX - newWidth / 2;
topLeftY = centerY - newHeight / 2;
} else {
// Use position directly for text
topLeftX = node.x();
@@ -384,23 +359,18 @@ const VideoPreview = ({
});
}
// Always update position and rotation
updates.x = topLeftX;
updates.y = topLeftY;
updates.rotation = rotation;
// Update state with the final calculated values
const finalTransform = {
x: topLeftX,
y: topLeftY,
width: newWidth,
height: newHeight,
rotation: rotation,
};
// Update state with the calculated values
onElementUpdate(elementId, updates);
// If this is a text element and fontSize changed, emit update for sidebar (without opening it)
if (element.type === 'text' && updates.fontSize && updates.fontSize !== element.fontSize) {
// Small delay to ensure state is updated first
setTimeout(() => {
emitter.emit('text-element-updated', { ...element, ...updates });
}, 50);
}
onElementUpdate(elementId, finalTransform);
},
[onElementUpdate, dimensions.width, dimensions.height, timelineElements, emitter],
[onElementUpdate, dimensions.width, dimensions.height, timelineElements],
);
// Update transformer when selection changes
@@ -463,10 +433,6 @@ const VideoPreview = ({
/>
);
} else if (element.type === 'text') {
// Build font style string
const fontWeight = element.fontWeight === 'bold' || element.fontWeight === 700 ? 'bold' : 'normal';
const fontStyle = element.fontStyle === 'italic' ? 'italic' : 'normal';
return (
<Text
key={element.id}
@@ -479,8 +445,8 @@ const VideoPreview = ({
x={element.x}
y={element.y}
fontSize={element.fontSize}
fontStyle={`${fontStyle} ${fontWeight}`}
fontFamily={element.fontFamily || 'Montserrat'}
fontStyle={element.fontWeight === 'bold' || element.fontWeight === 700 ? 'bold' : 'normal'} // ADD THIS LINE
fontFamily="Arial"
fill={element.fill}
stroke={element.stroke}
strokeWidth={element.strokeWidth}