diff --git a/components/editor/tool-options.tsx b/components/editor/tool-options.tsx index 3a1a231..32118c4 100644 --- a/components/editor/tool-options.tsx +++ b/components/editor/tool-options.tsx @@ -9,7 +9,17 @@ export function ToolOptions() { const { activeTool, settings, setSize, setOpacity, setHardness, setColor, setFlow } = useToolStore(); const { settings: shapeSettings, setShapeType } = useShapeStore(); const { selectionType, setSelectionType } = useSelectionStore(); - const { settings: textSettings, setFontFamily, setFontSize, setColor: setTextColor } = useTextStore(); + const { + settings: textSettings, + setFontFamily, + setFontSize, + setFontStyle, + setFontWeight, + setAlign, + setLineHeight, + setLetterSpacing, + setColor: setTextColor, + } = useTextStore(); // Drawing tools: brush, pencil, eraser const isDrawingTool = ['brush', 'eraser', 'pencil'].includes(activeTool); @@ -232,6 +242,16 @@ export function ToolOptions() { + + + + + + + + + + @@ -250,6 +270,69 @@ export function ToolOptions() { px + {/* Font Style: Bold/Italic */} +
+ + +
+ + {/* Text Alignment */} +
+ + + +
+
-
- Click on canvas to add text +
+ + setLineHeight(Number(e.target.value))} + className="w-24" + /> + + {textSettings.lineHeight.toFixed(1)} + +
+ +
+ + setLetterSpacing(Number(e.target.value))} + className="w-24" + /> + + {textSettings.letterSpacing}px +
)}