refine(sticky): reduce preset sizes and remove pan tool shortcuts

This commit is contained in:
Hiren Kangad
2026-03-13 00:46:37 +05:30
parent ce1cc60d67
commit 9f69eae308
5 changed files with 6 additions and 19 deletions
+2 -2
View File
@@ -11,11 +11,11 @@ export type StickyTextSize = 'S' | 'M' | 'L' | 'XL' | 'XXL';
export const STICKY_SIZES: StickyTextSize[] = ['S', 'M', 'L', 'XL', 'XXL'];
export const STICKY_FONT_MAP: Record<StickyTextSize, number> = {
S: 20, M: 28, L: 36, XL: 48, XXL: 60,
S: 12, M: 14, L: 18, XL: 24, XXL: 32,
};
export const STICKY_WIDTH_MAP: Record<StickyTextSize, number> = {
S: 200, M: 260, L: 320, XL: 400, XXL: 480,
S: 180, M: 220, L: 280, XL: 340, XXL: 420,
};
/** Default preset for new sticky creation. */
+3 -6
View File
@@ -1,10 +1,9 @@
/**
* Tools — PixiJS version.
*
* SELECT/PAN are handled by the viewport (pixi-viewport) and SelectionManager.
* PEN/TEXT/ERASER need PixiJS implementations.
* For now, only SELECT and PAN are fully functional; PEN/TEXT/ERASER are stubs
* that will be implemented when drawing support is added.
* Canvas navigation is handled by the viewport (space-drag, middle-drag, etc.)
* and SelectionManager.
* PEN/TEXT/ERASER/STICKY are PixiJS tool modes.
*/
import type { Viewport } from 'pixi-viewport';
@@ -400,12 +399,10 @@ export function activateTool(
export const toolShortcuts: Record<string, ToolType> = {
v: ToolType.SELECT,
h: ToolType.PAN,
p: ToolType.PEN,
t: ToolType.TEXT,
s: ToolType.STICKY,
'1': ToolType.SELECT,
'2': ToolType.PAN,
'3': ToolType.PEN,
'4': ToolType.TEXT,
'5': ToolType.STICKY,
@@ -45,7 +45,6 @@ export default function ShortcutsHelp({ shortcuts, onClose }: ShortcutsHelpProps
// Additional tool shortcuts not in registry
const toolShortcuts = [
{ keys: 'V / 1', description: 'Select tool' },
{ keys: 'H / 2', description: 'Pan tool' },
{ keys: 'P / 3', description: 'Draw tool' },
{ keys: 'T / 4', description: 'Text tool' },
{ keys: 'S / 5', description: 'Sticky note tool' },
-9
View File
@@ -46,14 +46,6 @@ function IconSelect() {
);
}
function IconPan() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
<path d="M8 1v14M1 8h14M4 4L8 1L12 4M4 12L8 15L12 12M1 4L4 8L1 12M15 4L12 8L15 12" strokeLinejoin="round" />
</svg>
);
}
function IconPen() {
return (
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
@@ -129,7 +121,6 @@ function IconLayers() {
const toolButtons: { tool: ToolType; label: string; shortcut: string; numKey: string; Icon: React.FC; hint?: string }[] = [
{ tool: ToolType.SELECT, label: 'Select', shortcut: 'V', numKey: '1', Icon: IconSelect, hint: 'Click to select, drag to move, Shift+click for multi-select' },
{ tool: ToolType.PAN, label: 'Pan', shortcut: 'H', numKey: '2', Icon: IconPan, hint: 'Click and drag to pan the canvas' },
{ tool: ToolType.PEN, label: 'Draw', shortcut: 'P', numKey: '3', Icon: IconPen, hint: 'Click and drag to draw freehand' },
{ tool: ToolType.TEXT, label: 'Text', shortcut: 'T', numKey: '4', Icon: IconText, hint: 'Click on the canvas to place text' },
{ tool: ToolType.STICKY, label: 'Sticky', shortcut: 'S', numKey: '5', Icon: IconSticky, hint: 'Click on the canvas to place a sticky note' },
+1 -1
View File
@@ -56,7 +56,7 @@ export function useShortcutHandler(deps: ShortcutHandlerDeps) {
const viewport = canvasRef.current?.getViewport();
if (!scene || !selection || !viewport) return;
// Tool shortcuts (bare keys 1-5, v/h/p/t/e -- no modifiers)
// Tool shortcuts (bare keys only for the primary visible tools)
if (!e.ctrlKey && !e.metaKey && !e.altKey) {
const tool = toolShortcuts[e.key.toLowerCase()];
if (tool) {