3 Commits

Author	SHA1	Message	Date
simoleo89	e60d6e2df8	feat(floorplan-editor): hand tool joins the exclusive tool group, sits first in toolbar ... Two related changes from the latest feedback: 1) Hand is now the FIRST button in the toolbar (left of the 'Modalita disegno' label), matching where users typically look for a pan affordance in painting / mapping editors. 2) The hand and the brush buttons form one exclusive tool group: picking any brush (SET / UNSET / UP / DOWN / DOOR) - or select-all / square-select - clears pan mode. No more 'I clicked SET but the canvas keeps panning'. Same goes the other way: clicking the hand stays sticky, and while it's active the brush highlights are visually de-selected even though state.brush.action still holds the last brush (so the user gets it back the moment they pick a brush again). Implementation: replaced the toolbar's onTogglePanMode prop with an imperative setPanMode(next: boolean) =>. Every other tool's onClick calls exitPan() first; the hand calls setPanMode(!panMode) directly. data-active and the border highlight on the brush + square-select buttons now require !panMode so the visual state mirrors the gesture state. No reducer changes - panMode stays a canvas-level UI flag.	2026-05-24 22:04:58 +02:00
simoleo89	12d24719cf	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).	2026-05-24 21:33:12 +02:00
simoleo89	b540b163c6	feat(floorplan-editor): React rewrite + live in-room preview + UX polish ... Complete modernization of the floor-plan editor. Three layered changes shipped together since they share state shapes and the test infrastructure stubs. 1) React rewrite (state + hooks + views + tests) Drops the FloorplanEditorContext singleton + legacy view components and replaces them with a pure-React reducer architecture: - state/ — typed FloorplanState + FloorplanAction union, pure reducer covering PAINT_TILE / ERASE_TILE / ADJUST_HEIGHT / SET_DOOR / SET_DOOR_DIR / SET_THICKNESS / SET_WALL_HEIGHT / BRUSH_SET / SELECT_RECT / SELECT_ALL / CLEAR_SELECTION / SQUARE_SELECT_TOGGLE / IMPORT_STRING / APPLY_REMOTE_DIFF / APPLY_REMOTE_SNAPSHOT. Source-tagged ('local' | 'remote') so the editor can distinguish user edits from server pushes. Co-located encoding helpers (parseTilemap / serializeTilemap) and area-counter selectors. - hooks/ — useFloorplanReducer (wraps useReducer with a history stack + loadFromServer + undo/redo), useTool (pointer events -> dispatch), usePointerToTile (screen -> tile projection that respects the viewBox origin so pan/zoom stays accurate). - views/ — FloorplanCanvasSVG, FloorplanHeightPicker, FloorplanToolbar, FloorplanOptionsPanel, FloorplanImportExport, FloorplanTile, FloorplanPreviewSVG (alternative iso preview kept as a fallback view, not wired into the main layout). - Co-located Vitest suites for every module above (encoding, reducer, selectors, hooks, views, integration). 100+ new test cases. 2) Live in-room preview (NEW capability) useFloorplanLiveSync drives client-side preview of the edit directly into the active room — every tile / door / wall height / thickness change is applied through GetRoomMessageHandler().applyFloorModelLocally (new public method on the renderer, see paired renderer PR) with zero server traffic during editing. The wire UpdateFloorPropertiesMessageComposer is only sent when the user explicitly clicks Save. Thickness slider additionally calls RoomEngine.updateRoomInstancePlaneThickness for zero-latency wall/floor-depth feedback while dragging. Toggle 'Live preview ON / OFF' in the bottom strip (default ON) lets the user opt out if they want to keep changes contained to the editor's own preview until Save. Revert button re-applies the original snapshot locally so the room snaps back to where it was when the editor opened. 3) UX polish - Undo / Redo (Ctrl+Z, Ctrl+Shift+Z / Ctrl+Y) backed by a 100-step history stack inside useFloorplanReducer. Local mutating actions push history; brush/selection UI bumps and remote dispatches bypass it; loadFromServer wipes the stack. - Zoom 40-600 % with Ctrl+wheel, +/- buttons, % label. Shift+drag or middle-mouse drag pans the canvas. - Auto-fit on first paint: computes the screen-space bounding box of the painted (non-blocked) tiles, picks the zoom that just contains them with a 5 % margin, pans so the room sits in the viewport centre. Default view is now 'room fills the canvas' instead of 'room is a dot at the top-centre of a huge empty canvas'. Clicking the % label re-runs the fit; crosshair button keeps zoom and recentres the pan only. - Door direction control: arrows + door icon triplet (8-way rotate by single click on prev/next, full cycle forward on the icon itself). Wall and floor thickness collapse from two 4-button rows into two compact segmented selectors (active state in emerald). Saves significant horizontal space. - Habbo floor pattern tile (~186 B PNG, vendored from habbofurni.com/images/furni_floor.png) tiled as the canvas background with image-rendering: pixelated so the texture stays crisp at every zoom level. Replaces the solid black background. Test infrastructure nitro-renderer.mock grows constructors / proxies / functions for everything the new floor-editor tests transitively import (floor composers + events, RoomEngineEvent, ILinkEventTracker, convertNumbersForSaving / convertSettingToNumber, GetRoomMessageHandler, GetTicker, GetRenderer, NitroTicker, RoomPreviewer with a sufficiently real .updatePreviewModel / dispose surface, and a TextureUtils.createRenderTexture that returns an object with a no-op .destroy). test-setup adds a no-op ResizeObserver polyfill (jsdom doesn't ship one and the optional FloorplanRoomPreview observes its container) and a draggable-windows-container portal root for tests that mount NitroCardView. Files: 44 changed (mostly new). yarn typecheck 0 errors, yarn test 341/341 green.	2026-05-24 21:19:10 +02:00