diff --git a/frontend/src/canvas/tools.ts b/frontend/src/canvas/tools.ts index dc6894b..79ed71f 100644 --- a/frontend/src/canvas/tools.ts +++ b/frontend/src/canvas/tools.ts @@ -37,7 +37,7 @@ const defaultOptions: ToolOptions = { // Creation defaults — zoom-aware via screenToWorld() const DEFAULT_TEXT_SCREEN_FONT = 24; -const DEFAULT_STICKY_SCREEN_FONT = 14; +const DEFAULT_STICKY_SCREEN_FONT = 28; const DEFAULT_STICKY_SCREEN_WIDTH = 220; const DEFAULT_STICKY_SCREEN_HEIGHT = 66; @@ -328,7 +328,8 @@ export function activateTool( const world = viewport.toWorld(e.clientX - rect.left, e.clientY - rect.top); const zoom = viewport.scale.x; - const cardW = screenToWorld(DEFAULT_STICKY_SCREEN_WIDTH, zoom, 120, 400); + const preset = snapToStickyPreset(screenToWorld(DEFAULT_STICKY_SCREEN_FONT, zoom, 16, 72)); + const cardW = preset.width; const cardH = screenToWorld(DEFAULT_STICKY_SCREEN_HEIGHT, zoom, 40, 200); const stickyData = { id: crypto.randomUUID(), @@ -346,7 +347,7 @@ export function activateTool( name: '', visible: true, text: '', - fontSize: snapToStickyPreset(screenToWorld(DEFAULT_STICKY_SCREEN_FONT, zoom, 8, 40)), + fontSize: preset.fontSize, fontFamily: 'Inter, system-ui, sans-serif', fill: '#ffd43b', // default yellow textColor: '#1a1a1a', diff --git a/frontend/src/components/TextFormatToolbar.tsx b/frontend/src/components/TextFormatToolbar.tsx index dc61e48..f6e5b03 100644 --- a/frontend/src/components/TextFormatToolbar.tsx +++ b/frontend/src/components/TextFormatToolbar.tsx @@ -3,7 +3,8 @@ import React, { useState, useRef, useEffect } from 'react'; type StickyTextSize = 'S' | 'M' | 'L' | 'XL' | 'XXL'; const STICKY_SIZES: StickyTextSize[] = ['S', 'M', 'L', 'XL', 'XXL']; -const STICKY_SIZE_MAP: Record = { S: 10, M: 14, L: 18, XL: 24, XXL: 32 }; +const STICKY_SIZE_MAP: Record = { S: 20, M: 28, L: 36, XL: 48, XXL: 60 }; +const STICKY_WIDTH_MAP: Record = { S: 200, M: 260, L: 320, XL: 400, XXL: 480 }; const STICKY_SIZE_VALUES = Object.values(STICKY_SIZE_MAP); function nearestStickySize(fontSize: number): StickyTextSize { @@ -16,15 +17,21 @@ function nearestStickySize(fontSize: number): StickyTextSize { return best; } -/** Snap a raw fontSize to the nearest preset value. */ -export function snapToStickyPreset(fontSize: number): number { - let best = STICKY_SIZE_VALUES[0]; +/** Snap a raw fontSize to the nearest preset. Returns { fontSize, width }. */ +export function snapToStickyPreset(fontSize: number): { fontSize: number; width: number } { + let best: StickyTextSize = 'M'; let bestDist = Infinity; - for (const v of STICKY_SIZE_VALUES) { - const dist = Math.abs(fontSize - v); - if (dist < bestDist) { bestDist = dist; best = v; } + for (const size of STICKY_SIZES) { + const dist = Math.abs(fontSize - STICKY_SIZE_MAP[size]); + if (dist < bestDist) { bestDist = dist; best = size; } } - return best; + return { fontSize: STICKY_SIZE_MAP[best], width: STICKY_WIDTH_MAP[best] }; +} + +/** Get the width for a given sticky text size preset. */ +export function getStickyWidthForSize(fontSize: number): number { + const size = nearestStickySize(fontSize); + return STICKY_WIDTH_MAP[size]; } interface TextFormatToolbarProps { @@ -135,9 +142,9 @@ export default function TextFormatToolbar(props: TextFormatToolbarProps) { key={size} style={{ ...btnStyle, - width: '26px', - padding: 0, - fontSize: size === 'S' ? '9px' : size === 'M' ? '10px' : size === 'L' ? '11px' : size === 'XL' ? '12px' : '13px', + minWidth: size.length > 2 ? '32px' : '24px', + padding: '0 3px', + fontSize: '10px', fontWeight: active ? 700 : 400, color: active ? '#fff' : '#666', background: active ? '#333' : 'transparent', @@ -157,7 +164,7 @@ export default function TextFormatToolbar(props: TextFormatToolbarProps) { {/* Font family dropdown */}