mudlet-map-renderer 0.28.0-konva → 0.29.1-konva

package/dist/CullingManager.d.ts

@@ -1,5 +1,9 @@
 import { Settings } from './types/Settings';
 import { GroupNode, LayerNode } from './backend/DrawingBackend';
+export type CoordinateTransform = (x: number, y: number) => {
+    x: number;
+    y: number;
+};
 export type RoomNodeEntry = {
     room: MapData.Room;
     group: GroupNode;
@@ -48,7 +52,11 @@ export declare class CullingManager {
     private standaloneExitBoundsRoomSize?;
     private cullingScheduled;
     private perfMonitor;
+    private coordinateTransform;
     constructor(stageInfo: StageInfo, roomLayer: LayerNode, linkLayer: LayerNode, settings: Settings);
+    setCoordinateTransform(fn: CoordinateTransform): void;
+    private transformPoint;
+    private transformBounds;
     computeBucketSize(): void;
     clear(): void;
     private getBucketKey;

package/dist/GridRenderer.d.ts

@@ -10,7 +10,12 @@ export declare class GridRenderer {
     private readonly settings;
     private readonly backend;
     private cachedBounds;
+    private inverseTransform;
     constructor(layer: LayerNode, settings: Settings, backend: DrawingBackend);
+    setInverseTransform(fn: (x: number, y: number) => {
+        x: number;
+        y: number;
+    }): void;
     invalidateCache(): void;
     render(viewportBounds: ViewportBounds): void;
 }

package/dist/backend/BlueprintBackend.d.ts

@@ -0,0 +1,30 @@
+import { DrawingBackend, GroupNode, RectConfig, CircleConfig, LineConfig, PolygonConfig, TextConfig, ImageConfig } from './DrawingBackend';
+/**
+ * Decorator that wraps a DrawingBackend and remaps all colors to a
+ * technical blueprint aesthetic (white lines on deep blue).
+ *
+ * - **Fills** are mapped through a luminance-based blue gradient
+ *   (deep blue → lighter blue) so different environment colors stay
+ *   visually distinct while keeping the blueprint look.
+ * - **Strokes** become light cyan-white.
+ * - **Text** uses near-white blue for legibility.
+ * - **Images** pass through unchanged.
+ *
+ * For the best result, also adjust the map settings:
+ * ```ts
+ * settings.backgroundColor = '#0a1628';
+ * settings.lineColor = '#4a7ab5';
+ * settings.fontFamily = '"Courier New", monospace';
+ * ```
+ */
+export declare class BlueprintBackend implements DrawingBackend {
+    private readonly inner;
+    constructor(inner: DrawingBackend);
+    createGroup(x: number, y: number): GroupNode;
+    addRect(parent: GroupNode, config: RectConfig): void;
+    addCircle(parent: GroupNode, config: CircleConfig): void;
+    addLine(parent: GroupNode, config: LineConfig): void;
+    addPolygon(parent: GroupNode, config: PolygonConfig): void;
+    addText(parent: GroupNode, config: TextConfig): void;
+    addImage(parent: GroupNode, config: ImageConfig): void;
+}

package/dist/backend/DrawingBackend.d.ts

@@ -75,6 +75,9 @@ export interface TextConfig {
     baselineRatio?: number;
     /** Konva vertical correction: offsetY = ratio * fontSize shifts text up to true visual centre. */
     konvaCorrectionRatio?: number;
+    /** Optional 2D affine transform [a, b, c, d, e, f] applied to the text.
+     *  When set, the text is drawn at the origin and the matrix positions/skews it. */
+    transform?: [number, number, number, number, number, number];
 }
 export interface ImageConfig {
     x: number;
@@ -82,6 +85,9 @@ export interface ImageConfig {
     width: number;
     height: number;
     src: string;
+    /** Optional 2D affine transform [a, b, c, d, e, f] applied to the image.
+     *  When set, x/y/width/height describe the source rect; the matrix positions the output. */
+    transform?: [number, number, number, number, number, number];
 }
 export interface DrawingBackend {
     createGroup(x: number, y: number): GroupNode;

package/dist/backend/IsometricBackend.d.ts

@@ -0,0 +1,76 @@
+import { DrawingBackend, GroupNode, RectConfig, CircleConfig, LineConfig, PolygonConfig, TextConfig, ImageConfig } from './DrawingBackend';
+/**
+ * Rotation angle in degrees for the isometric view.
+ * Any number is accepted. Common presets:
+ *
+ * | Angle | Effect |
+ * |-------|--------|
+ * | 0     | Standard iso — north points upper-right |
+ * | 30    | Gentle tilt — north near top, subtle depth |
+ * | 45    | North points straight up, max depth feel |
+ * | 90    | North points upper-left |
+ */
+export type IsometricRotation = number;
+/**
+ * Decorator that wraps a DrawingBackend and projects all geometry through a
+ * 2:1 isometric transformation.
+ *
+ * - **Rectangles** become diamond (rhombus) polygons.
+ * - **Circles** become ellipse polygons.
+ * - **Lines** and **polygons** have their coordinates transformed.
+ * - **Text** is repositioned but stays upright for readability.
+ * - **Images** are repositioned with dimensions preserved.
+ *
+ * When `depth > 0`, rooms gain two visible cube side faces (right lighter,
+ * left darker) drawn beneath the top face diamond for a 3D block effect.
+ *
+ * Composes with other decorators — recommended order:
+ * ```ts
+ * // Isometric cubes with parchment colors and hand-drawn wobble
+ * new IsometricBackend(
+ *     new SketchyBackend(new ParchmentBackend(new KonvaBackend()), 0.012, '#4a3728'),
+ *     { depth: 0.18, rotation: 90 },
+ * );
+ * ```
+ */
+export declare class IsometricBackend implements DrawingBackend {
+    private readonly inner;
+    private readonly depth;
+    private readonly iso;
+    private readonly isoInv;
+    /**
+     * @param inner    The backend to delegate to after iso-transforming coordinates.
+     * @param options  Depth (cube side face height, default 0.18) and rotation (0/90/180/270, default 0).
+     */
+    constructor(inner: DrawingBackend, options?: {
+        depth?: number;
+        rotation?: IsometricRotation;
+    } | number);
+    private ix;
+    private iy;
+    private isoFlatPoints;
+    private rectToDiamond;
+    createGroup(x: number, y: number): GroupNode;
+    addRect(parent: GroupNode, config: RectConfig): void;
+    addCircle(parent: GroupNode, config: CircleConfig): void;
+    addLine(parent: GroupNode, config: LineConfig): void;
+    addPolygon(parent: GroupNode, config: PolygonConfig): void;
+    /**
+     * Compute the 2D affine transform [a, b, c, d, e, f] that maps a rect
+     * at (x, y, w, h) in local space to its iso-projected parallelogram.
+     */
+    private isoAffine;
+    addText(parent: GroupNode, config: TextConfig): void;
+    addImage(parent: GroupNode, config: ImageConfig): void;
+    /**
+     * Returns the iso transform function for use with CullingManager.setCoordinateTransform().
+     */
+    getTransform(): (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+    getInverseTransform(): (x: number, y: number) => {
+        x: number;
+        y: number;
+    };
+}

package/dist/backend/NeonBackend.d.ts

@@ -0,0 +1,28 @@
+import { DrawingBackend, GroupNode, RectConfig, CircleConfig, LineConfig, PolygonConfig, TextConfig, ImageConfig } from './DrawingBackend';
+/**
+ * Decorator that wraps a DrawingBackend and remaps all colors to a
+ * cyberpunk/neon aesthetic — glowing colored outlines on a dark background.
+ *
+ * - **Fills** become very dark with a subtle tint of the original hue.
+ * - **Strokes** become bright neon colors (hue-preserved, saturation/lightness boosted).
+ * - A **glow** effect is achieved by drawing a wider translucent stroke underneath.
+ * - **Text** uses bright cyan-green.
+ * - **Images** pass through unchanged.
+ *
+ * For the best result, also adjust the map settings:
+ * ```ts
+ * settings.backgroundColor = '#0a0a0f';
+ * settings.lineColor = '#00ffaa';
+ * ```
+ */
+export declare class NeonBackend implements DrawingBackend {
+    private readonly inner;
+    constructor(inner: DrawingBackend);
+    createGroup(x: number, y: number): GroupNode;
+    addRect(parent: GroupNode, config: RectConfig): void;
+    addCircle(parent: GroupNode, config: CircleConfig): void;
+    addLine(parent: GroupNode, config: LineConfig): void;
+    addPolygon(parent: GroupNode, config: PolygonConfig): void;
+    addText(parent: GroupNode, config: TextConfig): void;
+    addImage(parent: GroupNode, config: ImageConfig): void;
+}

package/dist/backend/ParchmentBackend.d.ts

@@ -0,0 +1,43 @@
+import { DrawingBackend, GroupNode, RectConfig, CircleConfig, LineConfig, PolygonConfig, TextConfig, ImageConfig } from './DrawingBackend';
+/**
+ * Decorator that wraps a DrawingBackend and remaps all colors to a
+ * warm sepia / old-parchment palette.
+ *
+ * - **Fills** are mapped through a luminance-based parchment gradient
+ *   (dark brown → light parchment) so different environment colors stay
+ *   visually distinct while keeping the aged-paper look.
+ * - **Strokes** become dark ink brown.
+ * - **Text** uses a very dark brown for legibility.
+ * - **Images** pass through unchanged.
+ *
+ * Composes naturally with {@link SketchyBackend} for the full old-map aesthetic:
+ * ```ts
+ * // Parchment colors only
+ * const backend = new ParchmentBackend(new KonvaBackend());
+ *
+ * // Parchment + hand-drawn wobble
+ * const backend = new SketchyBackend(
+ *     new ParchmentBackend(new KonvaBackend()),
+ *     0.012, '#4a3728',
+ * );
+ * ```
+ *
+ * For the best result, also adjust the map settings:
+ * ```ts
+ * settings.backgroundColor = '#f4e4c1';
+ * settings.lineColor = '#5c4033';
+ * settings.gridColor = 'rgba(139, 119, 101, 0.15)';
+ * settings.fontFamily = 'Georgia, serif';
+ * ```
+ */
+export declare class ParchmentBackend implements DrawingBackend {
+    private readonly inner;
+    constructor(inner: DrawingBackend);
+    createGroup(x: number, y: number): GroupNode;
+    addRect(parent: GroupNode, config: RectConfig): void;
+    addCircle(parent: GroupNode, config: CircleConfig): void;
+    addLine(parent: GroupNode, config: LineConfig): void;
+    addPolygon(parent: GroupNode, config: PolygonConfig): void;
+    addText(parent: GroupNode, config: TextConfig): void;
+    addImage(parent: GroupNode, config: ImageConfig): void;
+}