mudlet-map-renderer 1.2.2 → 2.1.0

package/dist/render/RecordingLayer.d.ts

@@ -1,11 +1,12 @@
 import { default as Konva } from 'konva';
+import { FillStyle } from '../scene/Shape';
 type RectCommand = {
     type: 'rect';
     x: number;
     y: number;
     w: number;
     h: number;
-    fill?: string;
+    fill?: FillStyle;
     stroke?: string;
     sw: number;
     cr: number;
@@ -16,7 +17,7 @@ type CircleCommand = {
     cx: number;
     cy: number;
     r: number;
-    fill?: string;
+    fill?: FillStyle;
     stroke?: string;
     sw: number;
     dash?: number[];
@@ -34,7 +35,7 @@ type LineCommand = {
 type PolygonCommand = {
     type: 'polygon';
     vertices: number[];
-    fill?: string;
+    fill?: FillStyle;
     stroke?: string;
     sw: number;
 };

package/dist/render/canvasGradient.d.ts

@@ -0,0 +1,2 @@
+import { FillStyle } from '../scene/Shape';
+export declare function resolveFill(ctx: CanvasRenderingContext2D, fill: FillStyle): string | CanvasGradient;

package/dist/rendering/KonvaRenderBackend.d.ts

@@ -54,7 +54,6 @@ export declare class KonvaRenderBackend implements InteractiveBackend {
     private highlightShapes;
     private pathShapes;
     private currentRoomOverlay;
-    private areaExitHitZones;
     private interactionHandler?;
     private origSetSize?;
     private cameraChangeHandler?;
@@ -94,12 +93,15 @@ export declare class KonvaRenderBackend implements InteractiveBackend {
     private clearSceneOverlayNodes;
     private subscribeToState;
     private buildScene;
-    /** Wrap a non-group shape and walk to a recording node. */
-    private shapeToRecordingNode;
     /**
-     * Run the active {@link Style} over `shape`, walk every result through
-     * {@link shapeToRecording}, and add it to `layerNode`. Returns the first
-     * emitted node (used as the cull-tracking / destroy handle).
+     * Run the active {@link Style} over `shape`, walk the (possibly multi-shape)
+     * result into a single {@link RecordingGroupNode}, and add it to `layerNode`.
+     *
+     * Styles like Isometric expand one input shape into several (cube top + side
+     * faces + edges); wrapping the whole expansion into one node keeps a 1:1
+     * relationship between input shape and tracked handle, so callers that cache
+     * the return value (position marker, scene overlays, highlights, current-room
+     * overlay, paths) can destroy the entire expansion through that one handle.
      */
     private addStyledShape;
     /**
@@ -114,7 +116,7 @@ export declare class KonvaRenderBackend implements InteractiveBackend {
     private applyPositionMarker;
     private clearCurrentRoomOverlay;
     private updateCurrentRoomOverlay;
-    syncHighlight(roomId: number, color: string | undefined): void;
+    syncHighlight(roomId: number, colors: string[] | undefined): void;
     syncHighlights(): void;
     syncPaths(): void;
     private clearOverlayShapes;

package/dist/rendering/MapRenderer.d.ts

@@ -99,7 +99,12 @@ export declare class MapRenderer {
     updatePositionMarker(roomId: number): void;
     clearPosition(): void;
     centerOn(roomId: number, instant?: boolean): void;
-    renderHighlight(roomId: number, color: string): void;
+    /**
+     * Highlight a room. Pass a single colour for the classic ring/marker, or an
+     * array of colours to split the highlight into that many equal pie wedges
+     * (one colour each).
+     */
+    renderHighlight(roomId: number, color: string | string[]): void;
     removeHighlight(roomId: number): void;
     hasHighlight(roomId: number): boolean;
     clearHighlights(): void;

package/dist/scene/OverlayStyle.d.ts

@@ -7,15 +7,19 @@ export type HighlightData = {
     /** For circle: radius. For rect: half-size. */
     size: number;
     cornerRadius: number;
-    strokeColor: string;
+    /**
+     * One or more colours. A single colour draws the classic ring/marker; two
+     * or more split the highlight into that many equal pie wedges (one colour
+     * each).
+     */
+    colors: string[];
     strokeAlpha: number;
     strokeWidth: number;
-    fillColor: string;
     fillAlpha: number;
     dash?: number[];
     dashEnabled: boolean;
 };
-export declare function computeHighlight(room: MapData.Room, color: string, settings: Settings): HighlightData;
+export declare function computeHighlight(room: MapData.Room, color: string | string[], settings: Settings): HighlightData;
 export type PositionMarkerData = {
     shape: 'circle' | 'rect';
     cx: number;

package/dist/scene/Shape.d.ts

@@ -5,15 +5,54 @@
  * They are consumed by:
  *   - {@link CullingManager} (visibility queries against a camera viewport)
  *   - {@link HitTester} (point→shape lookup)
- *   - {@link DrawCommandBuilder} (translation to engine {@link DrawCommand}s)
+ *   - {@link buildDrawCommands} (translation to engine {@link DrawCommand}s)
  *
  * Shapes know nothing about Konva, SVG, or Canvas2D.
  */
 /** Logical layer for stacking. Mapped to engine-specific layers by renderers. */
 export type LayerId = "grid" | "link" | "room" | "position" | "overlay" | "top";
+/** One gradient stop. `offset` is in 0..1; `color` is any CSS colour string. */
+export interface GradientStop {
+    offset: number;
+    color: string;
+}
+/**
+ * Linear gradient between two points in the shape's LOCAL coordinate space
+ * (same frame as shape.x/y). Stop colours are sampled along the line
+ * (x0,y0) → (x1,y1).
+ */
+export interface LinearGradient {
+    type: "linear";
+    x0: number;
+    y0: number;
+    x1: number;
+    y1: number;
+    stops: GradientStop[];
+}
+/**
+ * Radial gradient in the shape's LOCAL coordinate space. The end circle is
+ * (cx, cy, r); the optional start circle is (fx, fy, fr) — defaults to a
+ * zero-radius circle at (cx, cy) when omitted.
+ */
+export interface RadialGradient {
+    type: "radial";
+    cx: number;
+    cy: number;
+    r: number;
+    fx?: number;
+    fy?: number;
+    fr?: number;
+    stops: GradientStop[];
+}
+/** A fill is either a flat colour string or a gradient. */
+export type FillStyle = string | LinearGradient | RadialGradient;
 /** Engine-agnostic paint description. */
 export interface Paint {
-    fill?: string;
+    /**
+     * Colour string (`#rrggbb`, `rgb(...)`, named colour) or a gradient.
+     * Gradient coords are in the same local frame as the shape's geometry.
+     */
+    fill?: FillStyle;
     stroke?: string;
     strokeWidth?: number;
     dash?: number[];
@@ -21,6 +60,21 @@ export interface Paint {
     /** 0..1 multiplier on fill+stroke. */
     alpha?: number;
 }
+/** True when `fill` is a gradient object rather than a colour string. */
+export declare function isGradientFill(fill: FillStyle | undefined): fill is LinearGradient | RadialGradient;
+/**
+ * Resolve a paint's effective dash pattern. Returns the dash only when it is
+ * present AND not explicitly disabled (`dashEnabled === false` blanks it).
+ * Renderers call this so every shape kind — rect, circle, line — honours
+ * `dashEnabled` identically.
+ */
+export declare function resolveDash(dash: number[] | undefined, dashEnabled: boolean | undefined): number[] | undefined;
+/**
+ * Apply a camera-style affine (translate by world origin, scale uniformly,
+ * translate by render offset) to a fill. Strings pass through unchanged.
+ * Gradient stops are colour-only and never transformed.
+ */
+export declare function transformFill(fill: FillStyle | undefined, worldX: number, worldY: number, scale: number, offsetX: number, offsetY: number): FillStyle | undefined;
 /** Hit-test annotation. Set on shapes that should be pickable. */
 export interface HitInfo {
     /** What the shape represents at the model layer. */

package/dist/scene/elements/OverlayLayout.d.ts

@@ -6,6 +6,9 @@ import { Shape } from '../Shape';
  * a group) so the corner dashes line up cleanly — each side's dash pattern
  * starts fresh at the corner instead of wrapping continuously around the
  * perimeter (same approach as the backend renderer).
+ *
+ * When the highlight carries more than one colour the ring is split into that
+ * many equal pie wedges via {@link highlightWedgesToShape}.
  */
 export declare function highlightToShape(data: HighlightData): Shape;
 /** Build the player-position marker. */

package/dist/style/index.d.ts

@@ -1,6 +1,7 @@
 import { Style } from './Style';
 import { SketchyOptions } from './shape/SketchyStyle';
 import { IsometricOptions, IsometricRotation } from './shape/IsometricStyle';
+import { GradientRoomsOptions } from './shape/GradientRoomsStyle';
 export { compose, identityStyle } from './Style';
 export type { Style, StyleContext } from './Style';
 export { applyStyleToShapes } from './applyStyle';
@@ -18,4 +19,10 @@ export declare function Isometric(options?: IsometricOptions): Style;
 export declare const Construction: Style;
 /** Sci-fi / space-exploration aesthetic — holographic cyan glow on void black. */
 export declare const SciFi: Style;
-export type { SketchyOptions, IsometricOptions, IsometricRotation };
+/**
+ * Replace flat room fills with a vertical linear gradient (lighter top,
+ * darker bottom). Compose with palette styles to keep their tones — the
+ * gradient stops are recoloured per stop.
+ */
+export declare function GradientRooms(options?: GradientRoomsOptions): Style;
+export type { SketchyOptions, IsometricOptions, IsometricRotation, GradientRoomsOptions };

package/dist/style/shape/GradientRoomsStyle.d.ts

@@ -0,0 +1,23 @@
+import { Style } from '../Style';
+export interface GradientRoomsOptions {
+    /**
+     * How much to lighten the top stop relative to the room's solid fill.
+     * Default 0.35. Set to 0 to keep the top edge unchanged.
+     */
+    lighten?: number;
+    /**
+     * How much to darken the bottom stop. Default 0.25.
+     */
+    darken?: number;
+}
+/**
+ * Replace each rect/circle/polygon's flat fill with a vertical linear
+ * gradient: lightened version of the fill at the top, darkened version at
+ * the bottom. Gives rooms a faux-3D shaded look. Strokes and other paint
+ * fields pass through.
+ *
+ * When composed with palette styles (Parchment, Blueprint, …) the gradient
+ * stops are recoloured by the downstream style — so `compose(Parchment,
+ * GradientRooms)` produces parchment-toned gradients, not flat parchment.
+ */
+export declare function gradientRoomsStyle(options?: GradientRoomsOptions): Style;

package/dist/style/shape/index.d.ts

@@ -23,3 +23,5 @@ export { isometricShapeStyle } from './IsometricStyle';
 export type { IsometricOptions, IsometricRotation } from './IsometricStyle';
 export { constructionShapeStyle } from './ConstructionStyle';
 export { scifiShapeStyle } from './SciFiStyle';
+export { gradientRoomsStyle } from './GradientRoomsStyle';
+export type { GradientRoomsOptions } from './GradientRoomsStyle';

package/dist/style/shape/paintMap.d.ts

@@ -1,11 +1,11 @@
+import { FillStyle } from '../../scene/Shape';
 /**
- * Shared colour-parsing + paint-rewriting helpers used by the shape-based
- * Style implementations (Parchment, Blueprint, Neon).
- *
- * The old BaseStyle decorator versions in `../ParchmentStyle.ts`,
- * `../BlueprintStyle.ts`, and `../NeonStyle.ts` keep their own copies for
- * now; they're deleted in step 11.
+ * Apply a colour-mapping function to a {@link FillStyle}. Strings pass
+ * through the mapper directly; gradients recolour every stop, leaving
+ * geometry untouched. Lets styles tint gradient-filled rooms (ambient
+ * lighting, palette swaps) without losing the gradient.
  */
+export declare function mapFill(fill: FillStyle | undefined, mapper: (color: string) => string): FillStyle | undefined;
 export interface ParsedRgb {
     r: number;
     g: number;

package/dist/types/Settings.d.ts

@@ -129,10 +129,18 @@ export type HighlightStyle = {
      */
     dashEnabled: boolean;
     /**
-     * When true, the highlight shape matches the current roomShape setting
-     * (rectangle, circle, or roundedRectangle). When false, the highlight is always a circle.
+     * @deprecated Use {@link shape} instead. Only consulted when `shape` is
+     * `'match'` (or omitted): when true (the default) the highlight follows the
+     * current roomShape (rectangle / roundedRectangle / circle); when false it
+     * is always a circle.
      */
-    matchRoomShape: boolean;
+    matchRoomShape?: boolean;
+    /**
+     * Outline shape of the highlight. `'match'` (the default when omitted)
+     * follows the current roomShape; the other values force that specific shape
+     * regardless of the room's shape.
+     */
+    shape?: 'match' | 'rectangle' | 'roundedRectangle' | 'circle';
 };
 /**
  * Settings for map rendering.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mudlet-map-renderer",
-  "version": "1.2.2",
+  "version": "2.1.0",
   "license": "MIT",
   "repository": {
     "url": "https://github.com/Delwing/mudlet-map-renderer"