mudlet-map-renderer 1.0.0 → 1.1.0

package/src/Renderer.ts

@@ -1,374 +0,0 @@
-import Konva from "konva";
-import ExitRenderer from "./ExitRenderer";
-import MapReader from "./reader/MapReader";
-import Exit from "./reader/Exit";
-import PathRenderer from "./PathRenderer";
-
-const defaultRoomSize = 0.6;
-const padding = 1;
-const defaultZoom = 75
-const lineColor = 'rgb(225, 255, 225)';
-
-export class Settings {
-    static roomSize = defaultRoomSize;
-    static lineColor = lineColor;
-}
-
-type HighlightData = {
-    color: string;
-    area: number;
-    z: number;
-    shape?: Konva.Circle;
-};
-
-export class Renderer {
-
-    private readonly stage: Konva.Stage;
-    private readonly roomLayer: Konva.Layer;
-    private readonly linkLayer: Konva.Layer;
-    private readonly overlayLayer: Konva.Layer;
-    private readonly positionLayer: Konva.Layer;
-    private mapReader: MapReader;
-    private exitRenderer: ExitRenderer;
-    private pathRenderer: PathRenderer;
-    private highlights: Map<number, HighlightData> = new Map();
-    private currentArea?: number;
-    private currentZIndex?: number;
-    private currentAreaVersion?: number;
-    private positionRender?: Konva.Circle;
-    private currentTransition?: Konva.Tween;
-    private currentZoom: number = 1;
-
-    constructor(container: HTMLDivElement, mapReader: MapReader) {
-        this.stage = new Konva.Stage({
-            container: container,
-            width: container.clientWidth,
-            height: container.clientHeight,
-            draggable: true
-        });
-        container.addEventListener('resize', () => {
-            this.stage.width(container.clientWidth);
-            this.stage.height(container.clientHeight);
-            this.stage.batchDraw();
-        })
-        this.linkLayer = new Konva.Layer({
-            listening: false,
-        });
-        this.stage.add(this.linkLayer);
-        this.roomLayer = new Konva.Layer();
-        this.stage.add(this.roomLayer);
-        this.overlayLayer = new Konva.Layer({
-            listening: false,
-        })
-        this.stage.add(this.overlayLayer);
-        this.positionLayer = new Konva.Layer({
-            listening: false,
-        });
-        this.stage.add(this.positionLayer);
-        this.mapReader = mapReader;
-        this.exitRenderer = new ExitRenderer(mapReader);
-        this.pathRenderer = new PathRenderer(mapReader, this.overlayLayer);
-
-        const scaleBy = 1.1;
-        this.initScaling(scaleBy);
-    }
-
-    private initScaling(scaleBy: number) {
-        this.stage.on('wheel', (e) => {
-            e.evt.preventDefault();
-
-            const oldScale = this.stage.scaleX();
-            const pointer = this.stage.getPointerPosition();
-            if (!pointer) {
-                return;
-            }
-
-            const mousePointTo = {
-                x: (pointer.x - this.stage.x()) / oldScale,
-                y: (pointer.y - this.stage.y()) / oldScale,
-            };
-
-            let direction = e.evt.deltaY > 0 ? -1 : 1;
-
-            if (e.evt.ctrlKey) {
-                direction = -direction;
-            }
-
-            const newZoom = direction > 0 ? this.currentZoom * scaleBy : this.currentZoom / scaleBy;
-            const newScale = newZoom * defaultZoom;
-            this.setZoom(newZoom);
-
-            const newPos = {
-                x: pointer.x - mousePointTo.x * newScale,
-                y: pointer.y - mousePointTo.y * newScale,
-            };
-
-            this.stage.position(newPos);
-        });
-    }
-
-    drawArea(id: number, zIndex: number) {
-        const area = this.mapReader.getArea(id);
-        if (!area) {
-            return;
-        }
-        const plane = area.getPlane(zIndex);
-        if (!plane) {
-            return;
-        }
-        this.currentArea = id;
-        this.currentZIndex = zIndex;
-        this.currentAreaVersion = area.getVersion();
-        this.roomLayer.destroyChildren();
-        this.linkLayer.destroyChildren();
-
-        const {minX, maxX, minY, maxY} = plane.getBounds();
-
-        this.stage.offset({x: minX - padding, y: minY - padding});
-        this.stage.scale({x: defaultZoom * this.currentZoom, y: defaultZoom * this.currentZoom});
-
-        this.renderLabels(plane.getLabels());
-        this.renderRooms(plane.getRooms() ?? []);
-        this.renderExits(area.getLinkExits(zIndex));
-        this.refreshHighlights();
-        this.stage.batchDraw();
-    }
-
-    setZoom(zoom: number) {
-        this.currentZoom = zoom;
-        this.stage.scale({x: defaultZoom * zoom, y: defaultZoom * zoom});
-    }
-
-    getZoom() {
-        return this.currentZoom;
-    }
-
-    getCurrentArea() {
-        return this.currentArea ? this.mapReader.getArea(this.currentArea) : undefined
-    }
-
-    setPosition(roomId: number) {
-        const room = this.mapReader.getRoom(roomId);
-        if (!room) return;
-        const area = this.mapReader.getArea(room.area);
-        const areaVersion = area?.getVersion();
-        let instant = this.currentArea !== room.area || this.currentZIndex !== room.z
-        if (this.currentArea !== room.area || this.currentZIndex !== room.z || (areaVersion !== undefined && this.currentAreaVersion !== areaVersion)) {
-            this.drawArea(room.area, room.z);
-        }
-        if (!this.positionRender) {
-            this.positionRender = new Konva.Circle({
-                x: room.x,
-                y: room.y,
-                radius: defaultRoomSize * 0.85,
-                stroke: "rgb(0, 229, 178)",
-                strokeWidth: 0.1,
-                dash: [0.05, 0.05],
-                dashEnabled: true,
-            })
-            this.positionLayer.add(this.positionRender);
-        }
-        this.centerOnRoom(room, instant);
-    }
-
-    renderPath(locations: number[]) {
-        return this.pathRenderer.renderPath(locations, this.currentArea, this.currentZIndex);
-    }
-
-    clearPaths() {
-        this.pathRenderer.clearPaths();
-    }
-
-    renderHighlight(roomId: number, color: string) {
-        const room = this.mapReader.getRoom(roomId);
-        if (!room) {
-            return;
-        }
-
-        const existing = this.highlights.get(roomId);
-        if (existing?.shape) {
-            existing.shape.destroy();
-            delete existing.shape;
-        }
-
-        const highlightData: HighlightData = {color, area: room.area, z: room.z};
-
-        this.highlights.set(roomId, highlightData);
-
-        if (room.area === this.currentArea && room.z === this.currentZIndex) {
-            const shape = this.createHighlightShape(room, color);
-            this.overlayLayer.add(shape);
-            highlightData.shape = shape;
-            this.overlayLayer.batchDraw();
-            return shape;
-        }
-
-        return highlightData.shape;
-    }
-
-    clearHighlights() {
-        this.highlights.forEach(({shape}) => shape?.destroy());
-        this.highlights.clear();
-        this.overlayLayer.batchDraw();
-    }
-
-    private refreshHighlights() {
-        this.highlights.forEach((highlight, roomId) => {
-            highlight.shape?.destroy();
-            delete highlight.shape;
-
-            if (highlight.area !== this.currentArea || highlight.z !== this.currentZIndex) {
-                return;
-            }
-
-            const room = this.mapReader.getRoom(roomId);
-            if (!room) {
-                return;
-            }
-
-            const shape = this.createHighlightShape(room, highlight.color);
-            this.overlayLayer.add(shape);
-            highlight.shape = shape;
-        });
-
-        this.overlayLayer.batchDraw();
-    }
-
-    private createHighlightShape(room: MapData.Room, color: string) {
-        return new Konva.Circle({
-            x: room.x,
-            y: room.y,
-            radius: Settings.roomSize * 0.9,
-            stroke: color,
-            strokeWidth: 0.15,
-            dash: [0.1, 0.05],
-            dashEnabled: true,
-            listening: false,
-        });
-    }
-
-    private centerOnRoom(room: MapData.Room, instant: boolean = false) {
-        const roomCenter = {x: room.x, y: room.y};
-
-        this.positionRender?.position(room)
-
-        const abs = this.stage.getAbsoluteTransform()
-        const screenPoint = abs.point(roomCenter);
-
-        const target = {
-            x: this.stage.width() / 2,
-            y: this.stage.height() / 2,
-        };
-
-        const dx = target.x - screenPoint.x;
-        const dy = target.y - screenPoint.y;
-
-        if (this.currentTransition) {
-            this.currentTransition.pause()
-            this.currentTransition.destroy()
-            delete this.currentTransition;
-        }
-
-        if (instant) {
-            this.stage.position({
-                x: this.stage.x() + dx,
-                y: this.stage.y() + dy,
-            })
-        } else {
-            this.currentTransition = new Konva.Tween({
-                node: this.stage,
-                x: this.stage.x() + dx,
-                y: this.stage.y() + dy,
-                duration: 0.2,
-                easing: Konva.Easings.EaseInOut,
-            })
-            this.currentTransition.play()
-        }
-    }
-
-    private renderRooms(rooms: MapData.Room[]) {
-        rooms.forEach(room => {
-            const roomRender = new Konva.Group({
-                x: room.x - Settings.roomSize / 2,
-                y: room.y - Settings.roomSize / 2,
-            });
-            const roomRect = new Konva.Rect({
-                x: 0,
-                y: 0,
-                width: Settings.roomSize,
-                height: Settings.roomSize,
-                fill: this.mapReader.getColorValue(room.env),
-                strokeWidth: 0.025,
-                stroke: Settings.lineColor,
-            });
-            roomRender.on('mouseenter', () => {
-                this.stage.container().style.cursor = 'pointer';
-            })
-            roomRender.on('mouseleave', () => {
-                this.stage.container().style.cursor = 'auto';
-            })
-            roomRender.add(roomRect);
-            this.renderSymbol(room, roomRender);
-            this.roomLayer.add(roomRender);
-
-            this.exitRenderer.renderSpecialExits(room).forEach(render => {
-                this.linkLayer.add(render)
-            })
-            this.exitRenderer.renderStubs(room).forEach(render => {
-                this.linkLayer.add(render)
-            })
-            this.exitRenderer.renderInnerExits(room).forEach(render => {
-                this.roomLayer.add(render)
-            })
-        })
-    }
-
-    private renderSymbol(room: MapData.Room, roomRender: Konva.Group) {
-        if (room.roomChar !== undefined) {
-            const roomChar = new Konva.Text({
-                x: 0,
-                y: 0,
-                text: room.roomChar,
-                fontSize: 0.45,
-                fontStyle: "bold",
-                fill: this.mapReader.getSymbolColor(room.env),
-                align: "center",
-                verticalAlign: "middle",
-                width: Settings.roomSize,
-                height: Settings.roomSize,
-            })
-            roomRender.add(roomChar);
-        }
-    }
-
-    private renderExits(exits: Exit[]) {
-        exits.forEach(exit => {
-            const render = this.exitRenderer.render(exit);
-            if (!render) {
-                return;
-            }
-            this.linkLayer.add(render);
-        })
-
-    }
-
-    private renderLabels(Labels: MapData.Label[]) {
-        Labels.forEach(label => {
-            if (!label.pixMap) {
-                return
-            }
-            const image = new Image()
-            image.src = `data:image/png;base64,${label.pixMap}`
-            const labelRender = new Konva.Image({
-                x: label.X,
-                y: -label.Y,
-                width: label.Width,
-                height: label.Height,
-                image: image
-            })
-            this.linkLayer.add(labelRender)
-        })
-    }
-
-
-}

package/src/directions.ts

@@ -1,66 +0,0 @@
-export type PlanarDirection =
-    | "north"
-    | "south"
-    | "east"
-    | "west"
-    | "northeast"
-    | "northwest"
-    | "southeast"
-    | "southwest";
-
-const planarDirectionOffsets: Record<PlanarDirection, {x: number; y: number}> = {
-    north: {x: 0, y: -1},
-    south: {x: 0, y: 1},
-    east: {x: 1, y: 0},
-    west: {x: -1, y: 0},
-    northeast: {x: 1, y: -1},
-    northwest: {x: -1, y: -1},
-    southeast: {x: 1, y: 1},
-    southwest: {x: -1, y: 1},
-};
-
-export const planarDirections: PlanarDirection[] = [
-    "north",
-    "south",
-    "east",
-    "west",
-    "northeast",
-    "northwest",
-    "southeast",
-    "southwest",
-];
-
-export const oppositeDirections: Record<PlanarDirection, PlanarDirection> = {
-    north: "south",
-    south: "north",
-    east: "west",
-    west: "east",
-    northeast: "southwest",
-    northwest: "southeast",
-    southeast: "northwest",
-    southwest: "northeast",
-};
-
-function isPlanarDirection(direction: MapData.direction | undefined): direction is PlanarDirection {
-    if (!direction) {
-        return false;
-    }
-    return Object.prototype.hasOwnProperty.call(planarDirectionOffsets, direction);
-}
-
-export function movePoint(
-    x: number,
-    y: number,
-    direction?: MapData.direction,
-    distance: number = 1,
-) {
-    if (!isPlanarDirection(direction)) {
-        return {x, y};
-    }
-
-    const offset = planarDirectionOffsets[direction];
-    return {
-        x: x + offset.x * distance,
-        y: y + offset.y * distance,
-    };
-}

package/src/index.ts

@@ -1,4 +0,0 @@
-export * from './Renderer';
-export { default as MapReader } from './reader/MapReader';
-export { default as PathFinder } from './PathFinder';
-export { default as ExplorationArea } from './reader/ExplorationArea';

package/src/reader/Area.ts

@@ -1,96 +0,0 @@
-import Plane from "./Plane";
-
-import Exit, {longToShort, regularExits} from "./Exit";
-
-export default class Area {
-
-    private readonly planes: Record<number, Plane> = {};
-    private readonly area: MapData.Area;
-    private readonly exits: Map<string, Exit> = new Map();
-    private version = 0;
-
-    constructor(area: MapData.Area) {
-        this.area = area;
-        this.planes = this.createPlanes();
-        this.createExits();
-    }
-
-    getAreaName() {
-        return this.area.areaName
-    }
-
-    getAreaId() {
-        return parseInt(this.area.areaId)
-    }
-
-    getVersion() {
-        return this.version;
-    }
-
-    protected markDirty() {
-        this.version++;
-    }
-
-    getPlane(zIndex: number) {
-        return this.planes[zIndex];
-    }
-
-    getPlanes() {
-        return Object.values(this.planes);
-    }
-
-    getRooms() {
-        return this.area.rooms
-    }
-
-    getLinkExits(zIndex: number) {
-        return Array.from(this.exits.values()).filter(e => e.zIndex.includes(zIndex));
-    }
-
-    private createPlanes() {
-        const grouped = this.area.rooms.reduce<Record<number, MapData.Room[]>>((acc, room) => {
-            if (!acc[room.z]) {
-                acc[room.z] = [];
-            }
-            // @ts-ignore
-            acc[room.z].push(room);
-            return acc;
-        }, {});
-        return Object.entries(grouped).reduce(
-            (acc, [z, rooms]) => {
-                acc[+z] = new Plane(rooms, this.area.labels.filter(label => label.Z === +z));
-                return acc;
-            },
-            {} as Record<number, Plane>
-        );
-    }
-
-    private createExits() {
-        this.area.rooms.forEach(room => {
-            Object.entries(room.exits)
-                .filter(([direction, _]) => regularExits.indexOf(direction as MapData.direction) > -1 && !room.customLines.hasOwnProperty(longToShort[direction as MapData.direction]))
-                .forEach(([direction, targetRoomId]) => this.createHalfExit(room.id, targetRoomId, room.z, direction as MapData.direction))
-        })
-    }
-
-    private createHalfExit(originRoom: number, targetRoom: number, zIndex: number, direction: MapData.direction,) {
-        if (originRoom === targetRoom) {
-            return
-        }
-        const a = Math.min(originRoom, targetRoom);
-        const b = Math.max(originRoom, targetRoom);
-        const key = `${a}-${b}`;
-        let edge = this.exits.get(key);
-        if (!edge) {
-            edge = {a: a, b: b, zIndex: [zIndex]};
-        }
-        if (a == originRoom) {
-            edge.aDir = direction;
-        } else {
-            edge.bDir = direction;
-        }
-        edge.zIndex.push(zIndex);
-        this.exits.set(key, edge);
-    }
-
-}

package/src/reader/Exit.ts

@@ -1,36 +0,0 @@
-export type Kind = "exit" | "specialExit";
-
-export default interface Exit {
-    a: number;
-    b: number;
-    aDir?: MapData.direction;
-    bDir?: MapData.direction;
-    kind?: Kind;
-    zIndex: number[];
-}
-
-export const regularExits: MapData.direction[] = ["north", "south", "east", "west", "northeast", "northwest", "southeast", "southwest"];
-export const shortTolong: Record<string, MapData.direction> = {
-    "n": "north",
-    "s": "south",
-    "e": "east",
-    "w": "west",
-    "ne": "northeast",
-    "nw": "northwest",
-    "se": "southeast",
-    "sw": "southwest",
-}
-export const longToShort: Record<MapData.direction, string> = {
-    "north": "n",
-    "south": "s",
-    "east": "e",
-    "west": "w",
-    "northeast": "ne",
-    "northwest": "nw",
-    "southeast": "se",
-    "southwest": "sw",
-    "up": "u",
-    "down": "d",
-    "in": "i",
-    "out": "o"
-}

package/src/reader/ExplorationArea.ts

@@ -1,132 +0,0 @@
-import Area from "./Area";
-import Plane from "./Plane";
-import Exit from "./Exit";
-
-class ExplorationPlane extends Plane {
-
-    private readonly basePlane: Plane;
-    private readonly visitedRooms: Set<number>;
-
-    constructor(plane: Plane, visitedRooms: Set<number>) {
-        super(plane.getRooms(), plane.getLabels());
-        this.basePlane = plane;
-        this.visitedRooms = visitedRooms;
-    }
-
-    override getRooms() {
-        return this.basePlane.getRooms().filter(room => this.visitedRooms.has(room.id));
-    }
-
-    override getLabels() {
-        return this.basePlane.getLabels();
-    }
-
-    override getBounds() {
-        const rooms = this.getRooms();
-        if (!rooms.length) {
-            return this.basePlane.getBounds();
-        }
-        return rooms.reduce(
-            (acc, room) => ({
-                minX: Math.min(acc.minX, room.x),
-                maxX: Math.max(acc.maxX, room.x),
-                minY: Math.min(acc.minY, room.y),
-                maxY: Math.max(acc.maxY, room.y),
-            }),
-            {
-                minX: Number.POSITIVE_INFINITY,
-                maxX: Number.NEGATIVE_INFINITY,
-                minY: Number.POSITIVE_INFINITY,
-                maxY: Number.NEGATIVE_INFINITY,
-            }
-        );
-    }
-
-}
-
-export default class ExplorationArea extends Area {
-
-    private readonly visitedRooms: Set<number>;
-    private readonly areaRoomIds: Set<number>;
-    private readonly planeCache: WeakMap<Plane, ExplorationPlane> = new WeakMap();
-
-    constructor(area: MapData.Area, visitedRooms?: Iterable<number> | Set<number>) {
-        super(area);
-        this.visitedRooms = visitedRooms instanceof Set ? visitedRooms : new Set(visitedRooms ?? []);
-        this.areaRoomIds = new Set(area.rooms.map(room => room.id));
-    }
-
-    override getPlane(zIndex: number) {
-        const basePlane = super.getPlane(zIndex);
-        if (!basePlane) {
-            return basePlane;
-        }
-        let decorated = this.planeCache.get(basePlane);
-        if (!decorated) {
-            decorated = new ExplorationPlane(basePlane, this.visitedRooms);
-            this.planeCache.set(basePlane, decorated);
-        }
-        return decorated;
-    }
-
-    override getPlanes() {
-        return super.getPlanes().map(plane => {
-            let decorated = this.planeCache.get(plane);
-            if (!decorated) {
-                decorated = new ExplorationPlane(plane, this.visitedRooms);
-                this.planeCache.set(plane, decorated);
-            }
-            return decorated;
-        });
-    }
-
-    override getLinkExits(zIndex: number) {
-        return super
-            .getLinkExits(zIndex)
-            .filter((exit: Exit) => this.visitedRooms.has(exit.a) || this.visitedRooms.has(exit.b));
-    }
-
-    getVisitedRoomCount() {
-        return super.getRooms().reduce((count, room) => count + (this.visitedRooms.has(room.id) ? 1 : 0), 0);
-    }
-
-    getTotalRoomCount() {
-        return this.areaRoomIds.size;
-    }
-
-    hasVisitedRoom(roomId: number) {
-        return this.areaRoomIds.has(roomId) && this.visitedRooms.has(roomId);
-    }
-
-    getVisitedRoomIds() {
-        return super.getRooms()
-            .filter(room => this.visitedRooms.has(room.id))
-            .map(room => room.id);
-    }
-
-    addVisitedRoom(roomId: number) {
-        const wasVisited = this.visitedRooms.has(roomId);
-        this.visitedRooms.add(roomId);
-        const newlyVisited = !wasVisited && this.areaRoomIds.has(roomId);
-        if (newlyVisited) {
-            this.markDirty();
-        }
-        return newlyVisited;
-    }
-
-    addVisitedRooms(roomIds: Iterable<number>) {
-        let newlyVisited = 0;
-        for (const roomId of roomIds) {
-            const wasVisited = this.visitedRooms.has(roomId);
-            this.visitedRooms.add(roomId);
-            if (!wasVisited && this.areaRoomIds.has(roomId)) {
-                newlyVisited++;
-            }
-        }
-        if (newlyVisited > 0) {
-            this.markDirty();
-        }
-        return newlyVisited;
-    }
-
-}