feat(floorplan-editor): polish height slider + add hand tool for canvas pan

Two related polish improvements after the swatch-column → vertical-
slider swap.

Slider
- Wider track (18 px, was 14 px) for a more comfortable click area
  with the same on-screen footprint.
- Min / max chips above and below the rail (HEIGHT_BRUSH_MIN /
  _MAX) so users know which end is high and which is low without
  hovering to discover.
- Thumb now uses a warm amber radial gradient (#fff7c4 → #facc15
  → #ca8a04) on a dark brown border with a soft drop shadow + inset
  highlight, instead of the flat yellow disc. Hover adds a white
  ring; drag swaps it for a darker ring — clear gesture feedback.
- Track gains a hover/drag glow (inset white seam + amber outline
  via boxShadow) so you can tell the slider has focus before you
  even click.

Hand tool (canvas pan)
- New FloorplanToolbar button (FaHandPaper, sticky toggle, emerald
  fill when active) ties to a new  state lifted into
  FloorplanEditorView. When the hand is active, plain left-click
  + drag pans the canvas instead of brushing tiles. Cursor flips
  to grab / grabbing accordingly.
- FloorplanCanvasSVG's isPanGesture predicate becomes:
  middle-mouse  OR  Shift+left-click  OR  (panMode && left-click).
  Shift / middle still work whether or not the hand is on so power
  users keep their muscle memory.
- No change to the reducer (panMode is a canvas-level UI flag, not
  a brush action — keeps state/types tight).
This commit is contained in:
simoleo89
2026-05-24 21:32:49 +02:00
committed by simoleo89
parent abf43d86c3
commit 12d24719cf
4 changed files with 97 additions and 49 deletions
@@ -28,6 +28,7 @@ export const FloorplanEditorView: FC = () =>
const [ isVisible, setIsVisible ] = useState(false);
const [ importExportVisible, setImportExportVisible ] = useState(false);
const [ liveSync, setLiveSync ] = useState(true);
const [ panMode, setPanMode ] = useState(false);
const { state, dispatch, loadFromServer, undo, redo, canUndo, canRedo } = useFloorplanReducer();
const originalRef = useRef<{
tilemap: string;
@@ -232,11 +233,13 @@ export const FloorplanEditorView: FC = () =>
canRedo={ canRedo }
onUndo={ undo }
onRedo={ redo }
panMode={ panMode }
onTogglePanMode={ () => setPanMode(v => !v) }
/>
<FloorplanOptionsPanel state={ state } dispatch={ dispatch } />
<Flex gap={ 2 } className="flex-1 min-h-0">
<FloorplanHeightPicker selectedH={ state.brush.h } onSelect={ h => dispatch({ type: 'BRUSH_SET', h }) } />
<FloorplanCanvasSVG state={ state } dispatch={ dispatch } />
<FloorplanCanvasSVG state={ state } dispatch={ dispatch } panMode={ panMode } />
</Flex>
<Flex gap={ 3 } alignItems="center" className="px-1">
<Flex gap={ 1 } alignItems="center">