+
{activeElements.map((element) => {
@@ -133,45 +139,72 @@ const VideoPreview = ({
);
} else if (element.type === 'text') {
return (
- {
- if (node) {
- elementRefs.current[element.id] = node;
- }
- }}
- text={element.text}
- x={element.x}
- y={element.y}
- fontSize={element.fontSize}
- fontStyle={getTextFontStyle(element)}
- fontFamily={element.fontFamily || 'Arial'}
- fill={element.fill || '#ffffff'}
- stroke={element.strokeWidth > 0 ? element.stroke || '#000000' : undefined}
- strokeWidth={element.strokeWidth * 3 || 0}
- fillAfterStrokeEnabled={true}
- strokeScaleEnabled={false}
- rotation={element.rotation || 0}
- // Center the text horizontally
- align="center"
- verticalAlign="middle"
- // Let text have natural width and height for multiline support
- wrap="word"
- // Always scale 1 - size changes go through fontSize
- scaleX={1}
- scaleY={1}
- draggable
- dragBoundFunc={createDragBoundFunc(element.id)}
- onClick={() => handleElementSelect(element.id)}
- onTap={() => handleElementSelect(element.id)}
- onDragMove={(e) => handleDragMove(element.id, e)}
- onDragEnd={(e) => handleDragEnd(element.id, e)}
- onTransform={() => handleTransform(element.id)}
- // Apply fixedWidth and offsetX if they exist
- width={element.fixedWidth}
- offsetX={element.offsetX}
- // Visual feedback for selection
- />
+
+ {
+ if (node) {
+ elementRefs.current[element.id] = node;
+ }
+ }}
+ text={element.text}
+ x={element.x}
+ y={element.y}
+ fontSize={element.fontSize}
+ fontStyle={getTextFontStyle(element)}
+ fontFamily={element.fontFamily || 'Arial'}
+ fill={element.fill || '#ffffff'}
+ stroke={element.strokeWidth > 0 ? element.stroke || '#000000' : undefined}
+ strokeWidth={element.strokeWidth * 3 || 0}
+ fillAfterStrokeEnabled={true}
+ strokeScaleEnabled={false}
+ rotation={element.rotation || 0}
+ // Center the text horizontally
+ align="center"
+ verticalAlign="middle"
+ // Let text have natural width and height for multiline support
+ wrap="word"
+ // Always scale 1 - size changes go through fontSize
+ scaleX={1}
+ scaleY={1}
+ draggable
+ dragBoundFunc={createDragBoundFunc(element.id)}
+ onClick={() => handleElementSelect(element.id)}
+ onTap={() => handleElementSelect(element.id)}
+ onDragMove={(e) => handleDragMove(element.id, e)}
+ onDragEnd={(e) => handleDragEnd(element.id, e)}
+ onTransform={() => handleTransform(element.id)}
+ // Apply fixedWidth and offsetX if they exist
+ width={element.fixedWidth}
+ offsetX={element.offsetX}
+ // Visual feedback for selection
+ />
+
+ {/* Edit button - only show when this text element is selected */}
+ {isSelected && (
+
+
+
+ )}
+
);
} else if (element.type === 'image' && element.imageElement && element.isImageReady) {
return (
diff --git a/resources/js/modules/editor/partials/editor-canvas.jsx b/resources/js/modules/editor/partials/editor-canvas.jsx
index 79a3d2e..9a5ed90 100644
--- a/resources/js/modules/editor/partials/editor-canvas.jsx
+++ b/resources/js/modules/editor/partials/editor-canvas.jsx
@@ -51,7 +51,7 @@ const useResponsiveCanvas = (maxWidth = 350) => {
return scale;
};
-const EditorCanvas = ({ maxWidth = 350 }) => {
+const EditorCanvas = ({ maxWidth = 350, onOpenTextSidebar }) => {
const scale = useResponsiveCanvas(maxWidth);
const displayWidth = LAYOUT_CONSTANTS.CANVAS_WIDTH * scale;
const displayHeight = LAYOUT_CONSTANTS.CANVAS_HEIGHT * scale;
@@ -86,7 +86,11 @@ const EditorCanvas = ({ maxWidth = 350 }) => {
console.log(`Canvas coordinates: x=${x}, y=${y}`);
}}
>
-
+