Sebastian Krüger
4e6dc6cb14
Fixed two critical issues preventing text tool usage: **Pointer Event Integration:** - Added text tool to canvas pointer event handler - Text tool now properly responds to canvas clicks - Opens text dialog on click with correct position **Tool Options Bar:** - Added text tool options section to toolbar - Font family selection (6 common fonts) - Font size control (8-500px with number input) - Color picker with hex input - Helpful hint: "Click on canvas to add text" - Options bar now appears when text tool is active **Changes:** - components/canvas/canvas-with-tools.tsx: - Added dedicated text tool handler before selection tools - Handles pointer down event to open text dialog - components/editor/tool-options.tsx: - Imported useTextStore - Added isTextTool check - Created text tool options UI section - Shows font, size, and color controls Text tool is now fully functional - click the Type icon, then click anywhere on canvas to open the text editor dialog! 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
279 lines
9.9 KiB
TypeScript
279 lines
9.9 KiB
TypeScript
'use client';
|
|
|
|
import { useToolStore } from '@/store';
|
|
import { useShapeStore } from '@/store/shape-store';
|
|
import { useSelectionStore } from '@/store/selection-store';
|
|
import { useTextStore } from '@/store/text-store';
|
|
|
|
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();
|
|
|
|
// Drawing tools: brush, pencil, eraser
|
|
const isDrawingTool = ['brush', 'eraser', 'pencil'].includes(activeTool);
|
|
const showHardness = ['brush'].includes(activeTool);
|
|
const showColor = ['brush', 'pencil'].includes(activeTool);
|
|
const showFlow = ['brush'].includes(activeTool);
|
|
|
|
// Fill tool
|
|
const isFillTool = activeTool === 'fill';
|
|
|
|
// Shape tool
|
|
const isShapeTool = activeTool === 'shape';
|
|
|
|
// Selection tool
|
|
const isSelectionTool = activeTool === 'select';
|
|
|
|
// Text tool
|
|
const isTextTool = activeTool === 'text';
|
|
|
|
// Don't show options bar if no options available
|
|
if (!isDrawingTool && !isFillTool && !isShapeTool && !isSelectionTool && !isTextTool) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className="flex items-center gap-6 px-4 flex-1">
|
|
{/* Drawing Tools Options */}
|
|
{isDrawingTool && (
|
|
<>
|
|
{showColor && (
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Color:
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={settings.color}
|
|
onChange={(e) => setColor(e.target.value)}
|
|
className="h-8 w-16 rounded border border-border cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={settings.color}
|
|
onChange={(e) => setColor(e.target.value)}
|
|
className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Size:
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="1"
|
|
max="200"
|
|
value={settings.size}
|
|
onChange={(e) => setSize(Number(e.target.value))}
|
|
className="w-32"
|
|
/>
|
|
<span className="text-sm text-muted-foreground w-12">
|
|
{settings.size}px
|
|
</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Opacity:
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={settings.opacity * 100}
|
|
onChange={(e) => setOpacity(Number(e.target.value) / 100)}
|
|
className="w-32"
|
|
/>
|
|
<span className="text-sm text-muted-foreground w-10">
|
|
{Math.round(settings.opacity * 100)}%
|
|
</span>
|
|
</div>
|
|
|
|
{showHardness && (
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Hardness:
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={settings.hardness * 100}
|
|
onChange={(e) => setHardness(Number(e.target.value) / 100)}
|
|
className="w-32"
|
|
/>
|
|
<span className="text-sm text-muted-foreground w-10">
|
|
{Math.round(settings.hardness * 100)}%
|
|
</span>
|
|
</div>
|
|
)}
|
|
|
|
{showFlow && (
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Flow:
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={settings.flow * 100}
|
|
onChange={(e) => setFlow(Number(e.target.value) / 100)}
|
|
className="w-32"
|
|
/>
|
|
<span className="text-sm text-muted-foreground w-10">
|
|
{Math.round(settings.flow * 100)}%
|
|
</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* Fill Tool Options */}
|
|
{isFillTool && (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Color:
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={settings.color}
|
|
onChange={(e) => setColor(e.target.value)}
|
|
className="h-8 w-16 rounded border border-border cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={settings.color}
|
|
onChange={(e) => setColor(e.target.value)}
|
|
className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Opacity:
|
|
</label>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
max="100"
|
|
value={settings.opacity * 100}
|
|
onChange={(e) => setOpacity(Number(e.target.value) / 100)}
|
|
className="w-32"
|
|
/>
|
|
<span className="text-sm text-muted-foreground w-10">
|
|
{Math.round(settings.opacity * 100)}%
|
|
</span>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* Shape Tool Options */}
|
|
{isShapeTool && (
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Shape:
|
|
</label>
|
|
<select
|
|
value={shapeSettings.type}
|
|
onChange={(e) => setShapeType(e.target.value as any)}
|
|
className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
|
|
>
|
|
<option value="rectangle">Rectangle</option>
|
|
<option value="ellipse">Ellipse</option>
|
|
<option value="line">Line</option>
|
|
<option value="arrow">Arrow</option>
|
|
<option value="polygon">Polygon</option>
|
|
<option value="star">Star</option>
|
|
<option value="triangle">Triangle</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Selection Tool Options */}
|
|
{isSelectionTool && (
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Mode:
|
|
</label>
|
|
<select
|
|
value={selectionType}
|
|
onChange={(e) => setSelectionType(e.target.value as any)}
|
|
className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
|
|
>
|
|
<option value="rectangular">Rectangular</option>
|
|
<option value="elliptical">Elliptical</option>
|
|
<option value="lasso">Lasso</option>
|
|
<option value="magic-wand">Magic Wand</option>
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Text Tool Options */}
|
|
{isTextTool && (
|
|
<>
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Font:
|
|
</label>
|
|
<select
|
|
value={textSettings.fontFamily}
|
|
onChange={(e) => setFontFamily(e.target.value)}
|
|
className="px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground"
|
|
>
|
|
<option value="Arial">Arial</option>
|
|
<option value="Helvetica">Helvetica</option>
|
|
<option value="Times New Roman">Times New Roman</option>
|
|
<option value="Georgia">Georgia</option>
|
|
<option value="Courier New">Courier New</option>
|
|
<option value="Verdana">Verdana</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Size:
|
|
</label>
|
|
<input
|
|
type="number"
|
|
min="8"
|
|
max="500"
|
|
value={textSettings.fontSize}
|
|
onChange={(e) => setFontSize(Number(e.target.value))}
|
|
className="w-20 px-2 py-1 text-sm rounded border border-border bg-background text-foreground"
|
|
/>
|
|
<span className="text-sm text-muted-foreground">px</span>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-sm font-medium text-card-foreground whitespace-nowrap">
|
|
Color:
|
|
</label>
|
|
<input
|
|
type="color"
|
|
value={textSettings.color}
|
|
onChange={(e) => setTextColor(e.target.value)}
|
|
className="h-8 w-16 rounded border border-border cursor-pointer"
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={textSettings.color}
|
|
onChange={(e) => setTextColor(e.target.value)}
|
|
className="w-24 px-2 py-1 text-xs rounded border border-border bg-background text-foreground"
|
|
/>
|
|
</div>
|
|
|
|
<div className="text-sm text-muted-foreground italic">
|
|
Click on canvas to add text
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|