@osamash/floor-planner 1.2.2 → 1.2.4

package/dist/types/react-planner/utils/wall-miter.d.ts

@@ -0,0 +1,53 @@
+export declare const MITER_LIMIT = 4;
+export interface MiterShifts {
+    /** Shift along the wall axis for the +y (local top) side. Positive cuts the
+     *  corner back into the wall, negative extends it past the vertex. */
+    topShift: number;
+    /** Same, for the −y (local bottom) side. */
+    botShift: number;
+}
+/**
+ * Compute miter shifts at one end of a wall.
+ *
+ * - axisDirAway: unit vector from `vertex` toward the wall's OTHER end.
+ * - perpTop: the wall's local +y direction in world coords (fixed for both
+ *   ends of the wall — 90° CCW from the wall's start→end direction).
+ *
+ * Independent shifts on the two perpendicular sides let the wall's end become
+ * a diagonal miter cut instead of a straight rectangle end.
+ */
+export declare function miterShifts(currentLineID: string, vertex: any, axisDirAway: {
+    x: number;
+    y: number;
+}, perpTop: {
+    x: number;
+    y: number;
+}, layer: any, halfThickness: number, miterLimit?: number): MiterShifts;
+export interface WallGeometry {
+    /** Endpoint the local frame starts from (the smaller-x one). */
+    vStart: any;
+    vEnd: any;
+    /** Centerline length, vertex to vertex. */
+    length: number;
+    thickness: number;
+    halfThickness: number;
+    /** Local-frame x of the four corners. The wall is the quadrilateral
+     *  (topStart, +h) (topEnd, +h) (botEnd, −h) (botStart, −h). */
+    topStart: number;
+    topEnd: number;
+    botStart: number;
+    botEnd: number;
+}
+/**
+ * The wall as it is actually drawn: a quadrilateral whose ends are diagonal
+ * miter cuts. Everything is in the wall's local frame — x runs along the wall
+ * from the smaller-x endpoint, y is perpendicular with +y = 90° CCW from the
+ * wall direction. `viewer2d/Line` establishes exactly this frame, which is why
+ * the start/end ordering below has to match it.
+ *
+ * The two face lengths a floor plan quotes as "inside" and "outside" are
+ * `topEnd - topStart` and `botEnd - botStart`: a corner cuts one face back by
+ * the miter length and extends the other past the vertex by the same amount,
+ * so they straddle the centerline length.
+ */
+export declare function wallGeometry(element: any, layer: any): WallGeometry | null;

package/dist/types/react-planner/utils/zoom.d.ts

@@ -1,5 +1,5 @@
-export declare const MIN_ZOOM = 0.6;
+export declare const MIN_ZOOM = 0.25;
 export declare const MAX_ZOOM = 5;
-export declare const SVG_MIN_ZOOM = 0.6;
+export declare const SVG_MIN_ZOOM = 0.25;
 export declare const SVG_MAX_ZOOM = 5;
 export declare function zoomToPercentage(zoom: number): number;

package/dist/types/react-planner/viewer2d/Grids.d.ts

@@ -1,5 +1,5 @@
 interface GridsProps {
     scene: any;
 }
-export default function Grids({ scene }: GridsProps): import("react/jsx-runtime").JSX.Element;
+export default function Grids({ scene }: GridsProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/react-planner/viewer2d/Ruler.d.ts

@@ -3,7 +3,12 @@ interface RulerProps {
     length: number;
     unit: string;
     transform: string;
+    /** Which side of the rule the measurement sits on. "below" is for a ruler
+     *  drawn under the thing it measures, so the label falls away from it
+     *  instead of landing on top of it. */
+    labelPlacement?: "above" | "below";
 }
-declare function Ruler({ length, unit, transform }: RulerProps): import("react/jsx-runtime").JSX.Element;
+export declare const formatDistance: (length: number, unit: string) => string;
+declare function Ruler({ length, unit, transform, labelPlacement, }: RulerProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof Ruler>;
 export default _default;

package/dist/types/react-planner/viewer2d/SelectionToolbar.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+interface SelectionToolbarProps {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Floating action bar for the current selection. It is plain HTML positioned
+ * over the SVG — the element's rendered bounding box is read straight from the
+ * DOM, which keeps it correct for any catalog element whatever the zoom, pan
+ * or rotation.
+ */
+declare const SelectionToolbar: ({ containerRef }: SelectionToolbarProps) => import("react/jsx-runtime").JSX.Element | null;
+export default SelectionToolbar;

package/dist/types/react-planner/viewer2d/WallHoverHandles.d.ts

@@ -0,0 +1,13 @@
+interface WallHoverHandlesProps {
+    layer: any;
+}
+/**
+ * Endpoint handles for the wall currently under the pointer — drag one to
+ * lengthen or shorten the wall, no selection needed.
+ *
+ * They render as the layer's last child rather than inside the wall's own
+ * group: SVG has no z-index, only document order, so anything drawn from
+ * inside the wall would be painted over by walls and items that come later.
+ */
+export default function WallHoverHandles({ layer }: WallHoverHandlesProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/types/react-planner/viewer3d/selection-gizmo.d.ts

@@ -0,0 +1,57 @@
+import * as THREE from "three";
+export type GizmoHandle = "rotate" | "lift";
+export interface GizmoTarget {
+    /** Centre of the item's footprint, in world space. */
+    centre: THREE.Vector3;
+    /** Floor the item stands on, in world space. */
+    floorY: number;
+    /** Where the lift handle sits — around the middle of the item. */
+    handleY: number;
+    /** Half the footprint's diagonal. */
+    radius: number;
+    /** The item's heading, so the ring's arrow reads as its front. */
+    rotationY: number;
+    /** Underside of the item, for deciding whether it is off the floor at all. */
+    bottomY: number;
+    /** Whether the lift handle is being dragged right now. */
+    lifting: boolean;
+}
+export default class SelectionGizmo {
+    readonly group: THREE.Group<THREE.Object3DEventMap>;
+    /** Turns with the item: the ring and the arrow marking its front. */
+    private readonly base;
+    private readonly ring;
+    private readonly rotateGrab;
+    private readonly rotateArrow;
+    /** Always faces the camera, always the same size on screen. */
+    private readonly lift;
+    private readonly liftGrab;
+    /** Dashed line from the handle down to the floor, when the item is lifted. */
+    private readonly plumb;
+    private readonly plumbTexture;
+    private readonly materials;
+    private readonly geometries;
+    private readonly textures;
+    constructor();
+    private keep;
+    private keepTexture;
+    /**
+     * Place the gizmo around `target`, or hide it when there is nothing
+     * selected. `worldPerPixel` converts a screen size at a given distance into
+     * world units, which is what keeps the lift handle the same size however far
+     * away the camera is.
+     */
+    update(target: GizmoTarget | null, camera: THREE.Camera, worldPerPixel: (distance: number) => number): void;
+    /**
+     * The line that says how far off the floor the item is. Drawn from the
+     * handle straight down to where the ring is, for the length of the lift
+     * drag only — it answers "how high am I putting this", which is a question
+     * that stops being asked the moment the handle is let go. It also needs a
+     * gap to describe: an item still sitting on the floor doesn't get one.
+     */
+    private updatePlumb;
+    /** Which handle, if any, a ray hits. The lift handle wins ties: it sits on
+     *  top of the ring and is the smaller target. */
+    pick(raycaster: THREE.Raycaster): GizmoHandle | null;
+    dispose(): void;
+}

package/dist/types/react-planner/viewer3d/viewer3d.d.ts

@@ -9,6 +9,7 @@ interface Viewer3DProps {
         [key: string]: any;
     };
     catalog: Catalog;
+    showGrid: boolean;
 }
 export default class Scene3DViewer extends React.Component<Viewer3DProps> {
     private canvasWrapperRef;
@@ -23,8 +24,68 @@ export default class Scene3DViewer extends React.Component<Viewer3DProps> {
     private lastMousePosition;
     private mouseDownEvent;
     private mouseUpEvent;
+    private lastBoundingBox;
+    private userMovedCamera;
+    private sun;
+    private shadowsDirtyUntil;
+    private gizmo;
+    private gizmoDrag;
+    private gizmoMoveEvent;
+    private gizmoUpEvent;
+    private readonly scratchBox;
+    private readonly scratchVector;
+    private readonly scratchSize;
+    private gizmoRadiusFor;
+    private gizmoRadius;
     constructor(props: Viewer3DProps);
     componentDidMount(): void;
+    /** World units one screen pixel covers at `distance` from the camera. */
+    private worldPerPixel;
+    /** The item the gizmo should be wrapped around, if there is one. */
+    private selectedItemTarget;
+    private beginGizmoDrag;
+    /**
+     * Move the item itself rather than the store: a drag is one gesture and
+     * should be one entry in the history, and an altitude change rebuilds the
+     * item's whole model — neither is something to do per mouse move. The store
+     * hears about it once, when the drag ends.
+     */
+    private updateGizmoDrag;
+    private endGizmoDrag;
+    /**
+     * Aim the sun at the plan and size its shadow frustum to cover it.
+     *
+     * A directional light shadows through an orthographic camera, and anything
+     * outside that box simply casts nothing — so the box has to follow the plan
+     * as it grows. Sizing it to the sphere around the bounding box means the
+     * coverage holds from any angle.
+     */
+    private positionSun;
+    /**
+     * Re-render the shadow map.
+     *
+     * Not just on the next frame: meshes and their textures arrive over the
+     * following moments, so keep it refreshing for a beat rather than baking
+     * shadows for a scene that is still half loaded.
+     */
+    private invalidateShadows;
+    /**
+     * Dolly toward (factor > 1) or away from (factor < 1) the orbit target.
+     * OrbitControls' own min/maxDistance still bound the result, so the buttons
+     * can't push the camera anywhere the scroll wheel couldn't.
+     */
+    zoomBy(factor: number): void;
+    /**
+     * Frame the whole plan: keep looking from the current direction, but re-aim
+     * at the plan's center and back off far enough for it to fit.
+     */
+    fitToScene(): void;
+    /**
+     * Re-aim at the plan's center and back off far enough to fit it in frame.
+     * `direction` is where the camera sits relative to that center; omitted, it
+     * keeps looking from wherever it already is.
+     */
+    private frameScene;
     componentWillUnmount(): void;
     componentDidUpdate(prevProps: Viewer3DProps): void;
     render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

package/dist/types/shared-style.d.ts

@@ -1,6 +1,9 @@
 export declare const COLORS: {
     white: string;
     black: string;
+    wall: string;
+    threeBG: string;
+    canvasBG: string;
 };
 export declare const MATERIAL_COLORS: {
     500: {
@@ -53,6 +56,9 @@ declare const SharedStyle: {
     COLORS: {
         white: string;
         black: string;
+        wall: string;
+        threeBG: string;
+        canvasBG: string;
     };
     MATERIAL_COLORS: {
         500: {

package/dist/types/store/ReactPlannerStore.d.ts

@@ -1,5 +1,32 @@
 import { State } from "../react-planner/models";
 import { ReactSVGPanZoom } from "react-svg-pan-zoom";
+export type PlannerSelectionKind = "item" | "hole" | "surface" | "wall";
+export interface PlannerSelection {
+    layerID: string;
+    kind: PlannerSelectionKind;
+    id: string;
+}
+/** The camera moves the toolbar can ask the 3D viewer to make. Structural on
+ *  purpose — the store stays free of three.js. */
+export interface Viewer3DHandle {
+    /** > 1 moves the camera closer to what it is orbiting, < 1 pulls it back. */
+    zoomBy: (factor: number) => void;
+    fitToScene: () => void;
+}
+/** What the pointer is currently over in the 2D viewer while idle. */
+export interface HoveredElement {
+    layerID: string;
+    /** "lines" | "vertices" | "items" | "holes" */
+    prototype: string;
+    id: string;
+    /** Sub-part of the element (rotation-anchor, resize-anchor…). */
+    part?: string;
+    /** The wall this node belongs to. Set both for the wall itself and for the
+     *  endpoint handles it draws, so the wall keeps its highlight while the
+     *  pointer sits on one of its handles. */
+    lineID?: string;
+}
+export declare const getSelectedElement: (planner: any) => PlannerSelection | null;
 interface Floor {
     floorID: number;
     floorTitle: string;
@@ -26,12 +53,55 @@ export interface ReactPlannerStore {
     remove: () => void;
     showDimensions: boolean;
     setShowDimensions: (showDimensions: boolean) => void;
+    showGrid: boolean;
+    setShowGrid: (showGrid: boolean) => void;
+    theme: "light" | "dark";
+    setTheme: (theme: "light" | "dark") => void;
+    /** Returns the new wall's line ID (or undefined if nothing got created). */
+    addWallByCoords: (x0: number, y0: number, x1: number, y1: number) => string | undefined;
+    addSurfaceByPoints: (points: {
+        x: number;
+        y: number;
+    }[], surfaceType?: string) => void;
+    addRoom: (x0: number, y0: number, x1: number, y1: number, options?: {
+        thickness?: number;
+        height?: number;
+    }) => void;
+    selectToolDrawingRoom: (options?: {
+        thickness?: number;
+        height?: number;
+    }) => void;
+    updateRoomDrawingProperties: (options: {
+        thickness?: number;
+        height?: number;
+    }) => void;
+    beginDrawingRoom: (layerID: string, x: number, y: number) => void;
+    updateDrawingRoom: (x: number, y: number) => void;
+    endDrawingRoom: (x: number, y: number) => void;
+    /** Returns the new item's ID (or undefined if nothing got created). */
+    addItemByCoords: (itemType: string, x: number, y: number, width?: number, height?: number, rotation?: number) => string | undefined;
+    /** Returns the new hole's ID (or undefined if nothing got created). */
+    addHoleOnLine: (lineID: string, holeType: string, offset: number) => string | undefined;
+    setAreaProperties: (areaID: string, properties: any) => void;
+    setLineProperties: (lineID: string, properties: any) => void;
+    moveVertex: (vertexID: string, x: number, y: number) => void;
+    removeLine: (lineID: string) => void;
+    removeArea: (areaID: string) => void;
+    removeItem: (itemID: string) => void;
+    removeHole: (holeID: string) => void;
+    fitViewerToScene: (options?: {
+        animate?: boolean;
+    }) => void;
+    focusOnArea: (layerID: string, areaID: string) => void;
     setToast: (toast: {
         text: string;
     } | null) => void;
     setPlan: (plan: Plan) => void;
     setAlterateState: () => void;
-    selectToolDrawingLine: (sceneComponentType: any) => void;
+    selectToolDrawingLine: (sceneComponentType: any, options?: {
+        thickness?: number;
+        height?: number;
+    }) => void;
     selectToolDrawingSurface: (sceneComponentType: any) => void;
     selectToolDrawingItem: (sceneComponentType: any) => void;
     selectToolDrawingHole: (sceneComponentType: any) => void;
@@ -43,6 +113,33 @@ export interface ReactPlannerStore {
     unselectAll: () => void;
     beginDraggingVertex: (layerID: string, vertexID: string, x: number, y: number, snapMask: any) => void;
     endDraggingVertex: (x: number, y: number, snapMask: any) => void;
+    duplicateSelected: () => void;
+    duplicateItem: (itemID: string) => void;
+    duplicateHole: (holeID: string) => void;
+    duplicateSurface: (areaID: string) => void;
+    /** Positive turns counter-clockwise as seen in the 2D view. */
+    rotateSelected: (degrees: number) => void;
+    flipSelected: (axis: "x" | "y") => void;
+    /** Rotate one surface polygon about its own center, addressed by ID rather
+     *  than via the selection. Same sign convention as `rotateSelected`. */
+    rotateArea: (areaID: string, degrees: number) => void;
+    /** Mirror one surface polygon about its own center — "x" flips it
+     *  left-right, "y" top-bottom. */
+    mirrorArea: (areaID: string, axis: "x" | "y") => void;
+    setItemAttributes: (itemID: string, attributes: Record<string, any>) => void;
+    setHoleProperties: (holeID: string, properties: Record<string, any>) => void;
+    setHoleAttributes: (holeID: string, attributes: Record<string, any>) => void;
+    moveHole: (holeID: string, offset: number) => void;
+    resizeHandlesFor: string | null;
+    setResizeHandlesFor: (itemID: string | null) => void;
+    /** Drives the hover affordances in the 2D viewer (wall highlight + endpoint
+     *  handles) so elements can be dragged/resized without selecting them
+     *  first. Only ever set while the planner is idle. */
+    hoveredElement: HoveredElement | null;
+    setHoveredElement: (hovered: HoveredElement | null) => void;
+    beginResizingItem: (layerID: string, itemID: string, x: number, y: number) => void;
+    updateResizingItem: (x: number, y: number) => void;
+    endResizingItem: (x: number, y: number) => void;
     beginRotatingItem: (layerID: string, itemID: string, x: number, y: number) => void;
     endRotatingItem: (x: number, y: number) => void;
     beginDraggingItem: (layerID: string, itemID: string, x: number, y: number) => void;
@@ -117,6 +214,10 @@ export interface ReactPlannerStore {
     undo: () => void;
     viewer: ReactSVGPanZoom | null;
     setViewer: (viewer: ReactSVGPanZoom) => void;
+    /** The mounted 3D viewer, or null when the 3D view isn't on screen. Lets
+     *  the toolbar drive the camera without knowing anything about three.js. */
+    viewer3D: Viewer3DHandle | null;
+    setViewer3D: (viewer: Viewer3DHandle | null) => void;
     plan: Plan | null;
     initCatalog: (catalog: any) => void;
 }

package/package.json

@@ -11,7 +11,7 @@
   "files": [
     "dist"
   ],
-  "version": "1.2.2",
+  "version": "1.2.4",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/dist/types/react-planner/components/PropertyString.d.ts

@@ -1,10 +0,0 @@
-interface PropertyStringProps {
-    value: any;
-    onUpdate: (v: any) => void;
-    onValid?: (event: Event) => void;
-    configs: Record<string, any>;
-    sourceElement?: any;
-    internalState?: any;
-}
-declare const PropertyString: ({ value, onUpdate, configs, sourceElement, internalState, }: PropertyStringProps) => import("react/jsx-runtime").JSX.Element;
-export default PropertyString;

package/dist/types/react-planner/toolbar/Popup.d.ts

@@ -1,11 +0,0 @@
-import Catalog from "../catalog/catalog";
-interface PopupProps {
-    onClose: () => void;
-    catalog: Catalog;
-    popupEvent: {
-        rect: DOMRect;
-        page: string;
-    } | null;
-}
-declare const Popup: ({ catalog, popupEvent, onClose: handleClose }: PopupProps) => import("react/jsx-runtime").JSX.Element;
-export default Popup;

package/dist/types/react-planner/viewer2d/GridHorizontalStreak.d.ts

@@ -1,7 +0,0 @@
-interface GridHorizontalStreakProps {
-    width: number;
-    height: number;
-    grid: any;
-}
-export default function GridHorizontalStreak({ width, height, grid, }: GridHorizontalStreakProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/types/react-planner/viewer2d/GridVerticalStreak.d.ts

@@ -1,7 +0,0 @@
-interface GridVerticalStreakProps {
-    width: number;
-    height: number;
-    grid: any;
-}
-export default function GridVerticalStreak({ width, height, grid, }: GridVerticalStreakProps): import("react/jsx-runtime").JSX.Element;
-export {};