mudlet-map-renderer 0.22.0-konva → 0.23.0-konva
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AreaMapRenderer.d.ts +15 -13
- package/dist/ExitRenderer.d.ts +3 -2
- package/dist/PathRenderer.d.ts +3 -1
- package/dist/Renderer.d.ts +59 -116
- package/dist/index.cjs +1 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +4 -2
- package/dist/index.mjs +1351 -1290
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -42,24 +42,26 @@ export type AreaDomainInfo = {
|
|
|
42
42
|
isEmpire: boolean;
|
|
43
43
|
};
|
|
44
44
|
export type DomainFilter = "ishtar" | "empire" | "interdomain" | "all";
|
|
45
|
-
export
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
}
|
|
45
|
+
export type AreaMapSettings = {
|
|
46
|
+
areaWidth: number;
|
|
47
|
+
areaHeight: number;
|
|
48
|
+
areaSpacing: number;
|
|
49
|
+
fontSize: number;
|
|
50
|
+
connectionLineWidth: number;
|
|
51
|
+
areaFillColor: string;
|
|
52
|
+
areaStrokeColor: string;
|
|
53
|
+
textColor: string;
|
|
54
|
+
connectionColor: string;
|
|
55
|
+
highlightColor: string;
|
|
56
|
+
};
|
|
57
|
+
export declare function createAreaMapSettings(): AreaMapSettings;
|
|
57
58
|
export declare class AreaMapRenderer {
|
|
58
59
|
private readonly stage;
|
|
59
60
|
private readonly backgroundLayer;
|
|
60
61
|
private readonly areaLayer;
|
|
61
62
|
private readonly connectionLayer;
|
|
62
63
|
private readonly mapReader;
|
|
64
|
+
private readonly settings;
|
|
63
65
|
private areaNodes;
|
|
64
66
|
private connectionGroups;
|
|
65
67
|
private currentZoom;
|
|
@@ -69,7 +71,7 @@ export declare class AreaMapRenderer {
|
|
|
69
71
|
private backgroundImage?;
|
|
70
72
|
private backgroundConfig?;
|
|
71
73
|
private dotsMode;
|
|
72
|
-
constructor(container: HTMLDivElement, mapReader: MapReader);
|
|
74
|
+
constructor(container: HTMLDivElement, mapReader: MapReader, settings?: AreaMapSettings);
|
|
73
75
|
private initResize;
|
|
74
76
|
private initScaling;
|
|
75
77
|
setZoom(zoom: number): void;
|
package/dist/ExitRenderer.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { default as Exit } from './reader/Exit';
|
|
2
2
|
import { default as MapReader } from './reader/MapReader';
|
|
3
|
-
import { Renderer } from './Renderer';
|
|
3
|
+
import { Settings, Renderer } from './Renderer';
|
|
4
4
|
export type ExitDrawLine = {
|
|
5
5
|
points: number[];
|
|
6
6
|
stroke: string;
|
|
@@ -38,7 +38,8 @@ export type ExitDrawData = {
|
|
|
38
38
|
export default class ExitRenderer {
|
|
39
39
|
private mapReader;
|
|
40
40
|
private mapRenderer;
|
|
41
|
-
|
|
41
|
+
private readonly settings;
|
|
42
|
+
constructor(mapReader: MapReader, mapRenderer: Renderer, settings: Settings);
|
|
42
43
|
/**
|
|
43
44
|
* Get the edge point of a room based on its shape
|
|
44
45
|
*/
|
package/dist/PathRenderer.d.ts
CHANGED
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import { default as Konva } from 'konva';
|
|
2
2
|
import { default as MapReader } from './reader/MapReader';
|
|
3
|
+
import { Settings } from './Renderer';
|
|
3
4
|
export default class PathRenderer {
|
|
4
5
|
private readonly mapReader;
|
|
5
6
|
private readonly overlayLayer;
|
|
7
|
+
private readonly settings;
|
|
6
8
|
private paths;
|
|
7
|
-
constructor(mapReader: MapReader, overlayLayer: Konva.Layer);
|
|
9
|
+
constructor(mapReader: MapReader, overlayLayer: Konva.Layer, settings: Settings);
|
|
8
10
|
private getRoomEdgePoint;
|
|
9
11
|
private findConnection;
|
|
10
12
|
private findExitDirection;
|
package/dist/Renderer.d.ts
CHANGED
|
@@ -24,6 +24,13 @@ export type RoomContextMenuEventDetail = {
|
|
|
24
24
|
y: number;
|
|
25
25
|
};
|
|
26
26
|
};
|
|
27
|
+
export type RoomClickEventDetail = {
|
|
28
|
+
roomId: number;
|
|
29
|
+
position: {
|
|
30
|
+
x: number;
|
|
31
|
+
y: number;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
27
34
|
export type ZoomChangeEventDetail = {
|
|
28
35
|
zoom: number;
|
|
29
36
|
};
|
|
@@ -75,125 +82,56 @@ export type PlayerMarkerStyle = {
|
|
|
75
82
|
dashEnabled: boolean;
|
|
76
83
|
};
|
|
77
84
|
/**
|
|
78
|
-
*
|
|
79
|
-
* All properties
|
|
85
|
+
* Settings for map rendering.
|
|
86
|
+
* All properties can be modified at runtime to change the map's appearance and behavior.
|
|
87
|
+
* Create with {@link createSettings} and pass to the {@link Renderer} constructor.
|
|
88
|
+
* Multiple renderers can share the same settings object for synchronized configuration.
|
|
80
89
|
*/
|
|
81
|
-
export
|
|
82
|
-
/**
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
/**
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
* When true, map instantly jumps to the new position when the current room changes.
|
|
101
|
-
* When false, the map smoothly animates/pans to the new position.
|
|
102
|
-
* Default: false (animated movement)
|
|
103
|
-
*/
|
|
104
|
-
static instantMapMove: boolean;
|
|
105
|
-
/**
|
|
106
|
-
* When true, highlights the current room and its exits with an overlay.
|
|
107
|
-
* The overlay uses a semi-transparent color to emphasize the current position.
|
|
108
|
-
* Default: true
|
|
109
|
-
*/
|
|
110
|
-
static highlightCurrentRoom: boolean;
|
|
111
|
-
/**
|
|
112
|
-
* Legacy flag for enabling/disabling culling (prefer using cullingMode instead).
|
|
113
|
-
* Default: true
|
|
114
|
-
*/
|
|
115
|
-
static cullingEnabled: boolean;
|
|
116
|
-
/**
|
|
117
|
-
* Determines how off-screen elements are culled to improve performance:
|
|
118
|
-
* - "none": No culling, render everything (worst performance, best accuracy)
|
|
119
|
-
* - "basic": Classic viewport-based culling (good performance)
|
|
120
|
-
* - "indexed": Spatial index culling using R-tree (best performance)
|
|
121
|
-
*
|
|
122
|
-
* Default: "indexed"
|
|
123
|
-
*/
|
|
124
|
-
static cullingMode: CullingMode;
|
|
125
|
-
/**
|
|
126
|
-
* Custom culling bounds for manually specifying the visible area.
|
|
127
|
-
* When set, only elements within these bounds are rendered.
|
|
128
|
-
* Format: { x, y, width, height } in map coordinates.
|
|
129
|
-
* Default: null (uses viewport bounds)
|
|
130
|
-
*/
|
|
131
|
-
static cullingBounds: {
|
|
90
|
+
export type Settings = {
|
|
91
|
+
/** Size of each room in map units (width/height for rectangles, diameter for circles). Default: 0.6 */
|
|
92
|
+
roomSize: number;
|
|
93
|
+
/** Width of lines (exit connections, room borders) in map units. Default: 0.025 */
|
|
94
|
+
lineWidth: number;
|
|
95
|
+
/** Color of exit connection lines as RGB string. Default: 'rgb(225, 255, 225)' */
|
|
96
|
+
lineColor: string;
|
|
97
|
+
/** Background color of the map container. Default: '#000000' */
|
|
98
|
+
backgroundColor: string;
|
|
99
|
+
/** When true, map instantly jumps to new position on room change. Default: false */
|
|
100
|
+
instantMapMove: boolean;
|
|
101
|
+
/** When true, highlights the current room and its exits with an overlay. Default: true */
|
|
102
|
+
highlightCurrentRoom: boolean;
|
|
103
|
+
/** Legacy flag for enabling/disabling culling (prefer cullingMode). Default: true */
|
|
104
|
+
cullingEnabled: boolean;
|
|
105
|
+
/** How off-screen elements are culled: "none" | "basic" | "indexed". Default: "indexed" */
|
|
106
|
+
cullingMode: CullingMode;
|
|
107
|
+
/** Custom culling bounds in map coordinates, or null for viewport bounds. Default: null */
|
|
108
|
+
cullingBounds: {
|
|
132
109
|
x: number;
|
|
133
110
|
y: number;
|
|
134
111
|
width: number;
|
|
135
112
|
height: number;
|
|
136
113
|
} | null;
|
|
137
|
-
/**
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
/**
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
* Circle mode calculates exact tangent points on the circle's edge.
|
|
159
|
-
*/
|
|
160
|
-
static roomShape: RoomShape;
|
|
161
|
-
/**
|
|
162
|
-
* Style configuration for the player position marker.
|
|
163
|
-
* See PlayerMarkerStyle type for details on individual properties.
|
|
164
|
-
*
|
|
165
|
-
* Default configuration creates a cyan-green dashed circle that's 1.7x the room size.
|
|
166
|
-
*/
|
|
167
|
-
static playerMarker: PlayerMarkerStyle;
|
|
168
|
-
/**
|
|
169
|
-
* Whether to render a subtle background grid behind the map.
|
|
170
|
-
* Default: false
|
|
171
|
-
*/
|
|
172
|
-
static gridEnabled: boolean;
|
|
173
|
-
/**
|
|
174
|
-
* Grid line spacing in map units (1 = every integer coordinate).
|
|
175
|
-
* Default: 1
|
|
176
|
-
*/
|
|
177
|
-
static gridSize: number;
|
|
178
|
-
/**
|
|
179
|
-
* Color of the grid lines as a CSS color string.
|
|
180
|
-
* Default: 'rgba(255, 255, 255, 0.07)' (very subtle white)
|
|
181
|
-
*/
|
|
182
|
-
static gridColor: string;
|
|
183
|
-
/**
|
|
184
|
-
* Width of grid lines in map units.
|
|
185
|
-
* Default: 0.02
|
|
186
|
-
*/
|
|
187
|
-
static gridLineWidth: number;
|
|
188
|
-
/**
|
|
189
|
-
* Performance monitoring callback. When set, receives averaged PerfSnapshot
|
|
190
|
-
* every 60 culling frames (~1 second at 60fps) with timing breakdowns.
|
|
191
|
-
*
|
|
192
|
-
* Set to a function to enable, null to disable.
|
|
193
|
-
* Example: Settings.perfCallback = (stats) => console.log(stats);
|
|
194
|
-
*/
|
|
195
|
-
static perfCallback: ((stats: PerfSnapshot) => void) | null;
|
|
196
|
-
}
|
|
114
|
+
/** How to render room labels: "image" | "data". Default: "image" */
|
|
115
|
+
labelRenderMode: LabelRenderMode;
|
|
116
|
+
/** When true, room labels have transparent backgrounds. Default: false */
|
|
117
|
+
transparentLabels: boolean;
|
|
118
|
+
/** Shape used to render rooms: "rectangle" | "circle" | "roundedRectangle". Default: "rectangle" */
|
|
119
|
+
roomShape: RoomShape;
|
|
120
|
+
/** Style configuration for the player position marker. */
|
|
121
|
+
playerMarker: PlayerMarkerStyle;
|
|
122
|
+
/** Whether to render a background grid. Default: false */
|
|
123
|
+
gridEnabled: boolean;
|
|
124
|
+
/** Grid line spacing in map units. Default: 1 */
|
|
125
|
+
gridSize: number;
|
|
126
|
+
/** Color of grid lines as CSS color string. Default: 'rgba(255, 255, 255, 0.07)' */
|
|
127
|
+
gridColor: string;
|
|
128
|
+
/** Width of grid lines in map units. Default: 0.02 */
|
|
129
|
+
gridLineWidth: number;
|
|
130
|
+
/** Performance monitoring callback, or null to disable. */
|
|
131
|
+
perfCallback: ((stats: PerfSnapshot) => void) | null;
|
|
132
|
+
};
|
|
133
|
+
/** Creates a new Settings object with default values. */
|
|
134
|
+
export declare function createSettings(): Settings;
|
|
197
135
|
export declare class Renderer {
|
|
198
136
|
private readonly stage;
|
|
199
137
|
private readonly gridLayer;
|
|
@@ -202,6 +140,7 @@ export declare class Renderer {
|
|
|
202
140
|
private readonly overlayLayer;
|
|
203
141
|
private readonly positionLayer;
|
|
204
142
|
private mapReader;
|
|
143
|
+
private readonly settings;
|
|
205
144
|
private exitRenderer;
|
|
206
145
|
private pathRenderer;
|
|
207
146
|
private highlights;
|
|
@@ -233,7 +172,7 @@ export declare class Renderer {
|
|
|
233
172
|
private exitBatchShape?;
|
|
234
173
|
private visibleExitDrawData;
|
|
235
174
|
private cachedGridBounds;
|
|
236
|
-
constructor(container: HTMLDivElement, mapReader: MapReader);
|
|
175
|
+
constructor(container: HTMLDivElement, mapReader: MapReader, settings?: Settings);
|
|
237
176
|
private clientToMapPoint;
|
|
238
177
|
private findRoomAtClientPoint;
|
|
239
178
|
private initRoomHitDetection;
|
|
@@ -249,6 +188,7 @@ export declare class Renderer {
|
|
|
249
188
|
private collectStandaloneExitCandidates;
|
|
250
189
|
private refreshStandaloneExitBoundsIfNeeded;
|
|
251
190
|
private emitRoomContextEvent;
|
|
191
|
+
private emitRoomClickEvent;
|
|
252
192
|
private emitZoomChangeEvent;
|
|
253
193
|
setZoom(zoom: number): boolean;
|
|
254
194
|
/**
|
|
@@ -261,18 +201,19 @@ export declare class Renderer {
|
|
|
261
201
|
getCullingMode(): CullingMode;
|
|
262
202
|
getCurrentArea(): Area | undefined;
|
|
263
203
|
/**
|
|
264
|
-
* Refreshes the current room overlay to reflect any changes to
|
|
204
|
+
* Refreshes the current room overlay to reflect any changes to settings.
|
|
265
205
|
* Call this after modifying Settings properties (like roomSize, roomShape, lineWidth, etc.)
|
|
266
206
|
* to update the visual appearance of the current room and its exits without changing position.
|
|
267
207
|
*/
|
|
268
208
|
refreshCurrentRoomOverlay(): void;
|
|
269
209
|
/**
|
|
270
|
-
* Completely refreshes the map to reflect changes to
|
|
210
|
+
* Completely refreshes the map to reflect changes to settings.
|
|
271
211
|
* This re-renders the entire current area and updates the player position marker.
|
|
272
212
|
* Call this after changing Settings properties like roomSize, roomShape, lineWidth, etc.
|
|
273
213
|
*
|
|
274
214
|
* Note: This is more expensive than refreshCurrentRoomOverlay() but ensures everything is updated.
|
|
275
215
|
*/
|
|
216
|
+
updateBackground(): void;
|
|
276
217
|
refresh(): void;
|
|
277
218
|
/**
|
|
278
219
|
* Updates the player position marker without centering the view.
|
|
@@ -284,6 +225,8 @@ export declare class Renderer {
|
|
|
284
225
|
renderPath(locations: number[], color?: string): import('konva/lib/Group').Group | import('konva/lib/Shape').Shape<import('konva/lib/Shape').ShapeConfig> | undefined;
|
|
285
226
|
clearPaths(): void;
|
|
286
227
|
renderHighlight(roomId: number, color: string): import('konva/lib/Shape').Shape<import('konva/lib/Shape').ShapeConfig> | undefined;
|
|
228
|
+
removeHighlight(roomId: number): void;
|
|
229
|
+
hasHighlight(roomId: number): boolean;
|
|
287
230
|
clearHighlights(): void;
|
|
288
231
|
private refreshHighlights;
|
|
289
232
|
private createHighlightShape;
|