mudlet-map-renderer 0.0.24 → 0.1.0-konva

package/src/reader/MapReader.ts

@@ -0,0 +1,123 @@
+import Area from "./Area";
+import ExplorationArea from "./ExplorationArea";
+
+interface Color {
+    rgb: number[];
+    rgbValue: string;
+    symbolColor: number[];
+    symbolColorValue: string,
+}
+
+const defaultColor: Color = {
+    rgb: [114, 1, 0],
+    rgbValue: 'rgb(114, 1, 0)',
+    symbolColor: [225, 225, 225],
+    symbolColorValue: 'rgb(225,225,225)'
+}
+
+function calculateLuminance(rgb: number[]) {
+    const rn = rgb[0] / 255;
+    const gn = rgb[1] / 255;
+    const bn = rgb[2] / 255;
+
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+
+    return (max + min) / 2;
+}
+
+export default class MapReader {
+
+    private rooms: Record<number, MapData.Room> = {};
+    private areas: Record<number, Area> = {};
+    private areaSources: Record<number, MapData.Area> = {};
+    private visitedRooms?: Set<number>;
+    private explorationEnabled = false;
+    private colors: Record<number, Color> = {};
+
+    constructor(map: MapData.Map, envs: MapData.Env[]) {
+        map.forEach(area => {
+            area.rooms.forEach(room => {
+                room.y = -room.y;
+                this.rooms[room.id] = room;
+            })
+            const areaId = parseInt(area.areaId);
+            this.areas[areaId] = new Area(area);
+            this.areaSources[areaId] = area;
+        })
+        this.colors = envs.reduce((acc, c) => ({
+            ...acc,
+            [c.envId]: {
+                rgb: c.colors,
+                rgbValue: `rgb(${c.colors.join(',')}`,
+                symbolColor: calculateLuminance(c.colors) > 0.41 ? [25, 25, 25] : [225, 255, 255],
+                symbolColorValue: calculateLuminance(c.colors) > 0.41 ? 'rgb(25,25,25)' : 'rgb(225,255,255)'
+            }
+        }), {});
+    }
+
+    getArea(areaId: number) {
+        return this.areas[areaId];
+    }
+
+    getExplorationArea(areaId: number) {
+        const area = this.areas[areaId];
+        if (area instanceof ExplorationArea) {
+            return area;
+        }
+        return undefined;
+    }
+
+    getAreas() {
+        return Object.values(this.areas);
+    }
+
+    getRooms() {
+        return Object.values(this.rooms);
+    }
+
+    getRoom(roomId: number) {
+        return this.rooms[roomId];
+    }
+
+    decorateWithExploration(visitedRooms?: Iterable<number> | Set<number>) {
+        this.visitedRooms = visitedRooms instanceof Set ? visitedRooms : new Set(visitedRooms ?? []);
+        Object.entries(this.areaSources).forEach(([id, area]) => {
+            const numericId = parseInt(id, 10);
+            this.areas[numericId] = new ExplorationArea(area, this.visitedRooms!);
+        });
+        this.explorationEnabled = true;
+        return this.visitedRooms;
+    }
+
+    getVisitedRooms() {
+        return this.visitedRooms;
+    }
+
+    clearExplorationDecoration() {
+        Object.entries(this.areaSources).forEach(([id, area]) => {
+            const numericId = parseInt(id, 10);
+            this.areas[numericId] = new Area(area);
+        });
+        this.explorationEnabled = false;
+    }
+
+    isExplorationEnabled() {
+        return this.explorationEnabled;
+    }
+
+    getColorValue(envId: number): string {
+        return this.colors[envId]?.rgbValue ?? defaultColor.rgbValue;
+    }
+
+    getSymbolColor(envId: number, opacity?: number): string {
+        const color = this.colors[envId]?.symbolColor ?? defaultColor.symbolColor;
+        const normalizedOpacity = Math.min(Math.max(opacity ?? 1, 0), 1);
+        const value = color.join(',');
+        if (normalizedOpacity != 1) {
+            return `rgba(${value}, ${normalizedOpacity})`;
+        }
+        return `rgba(${value})`;
+    }
+
+}

package/src/reader/Plane.ts

@@ -0,0 +1,42 @@
+export default class Plane {
+
+    private readonly bounds: { minX: number, maxX: number, minY: number, maxY: number }
+    private readonly rooms: MapData.Room[] = [];
+    private readonly labels: MapData.Label[] = [];
+
+    constructor(rooms: MapData.Room[], labels: MapData.Label[]) {
+        this.rooms = rooms
+        this.bounds = this.createBounds();
+        this.labels = labels
+    }
+
+    getRooms() {
+        return this.rooms;
+    }
+
+    getLabels() {
+        return this.labels;
+    }
+
+    getBounds() {
+        return this.bounds;
+    }
+
+    private createBounds() {
+        return this.rooms.reduce(
+            (acc, r) => ({
+                minX: Math.min(acc.minX, r.x),
+                maxX: Math.max(acc.maxX, r.x),
+                minY: Math.min(acc.minY, r.y),
+                maxY: Math.max(acc.maxY, r.y),
+            }),
+            {
+                minX: Number.POSITIVE_INFINITY,
+                maxX: Number.NEGATIVE_INFINITY,
+                minY: Number.POSITIVE_INFINITY,
+                maxY: Number.NEGATIVE_INFINITY,
+            }
+        );
+    }
+
+}

package/src/types/MapData.ts

@@ -0,0 +1,90 @@
+declare namespace MapData {
+
+    export type direction =
+        "north"
+        | "south"
+        | "east"
+        | "west"
+        | "northwest"
+        | "northeast"
+        | "southeast"
+        | "southwest"
+        | "up"
+        | "down"
+        | "in"
+        | "out"
+
+    export interface Color {
+        alpha: number;
+        r: number;
+        g: number;
+        b: number;
+    }
+
+    export interface Line {
+        points: Point[];
+        attributes: LineAttribute;
+    }
+
+    export interface Point {
+        x: number;
+        y: number;
+    }
+
+    export interface LineAttribute {
+        color: Color;
+        style: string;
+        arrow: boolean;
+    }
+
+    export interface Room {
+        id: number;
+        area: number;
+        x: number;
+        y: number;
+        z: number;
+        areaId: string;
+        weight: number;
+        roomChar: string;
+        name: string;
+        userData: Record<string, string>;
+        customLines: Record<string, Line>;
+        stubs: number[];
+        hash: string;
+        env: number;
+        exits: Record<direction, number>;
+        doors: Record<string, 1 | 2 | 3>;
+        specialExits: Record<string, number>;
+        exitLocks?: number[];
+        mSpecialExitLocks?: number[];
+    }
+
+    export interface Label {
+        labelId: number;
+        areaId: number;
+        pixMap: string;
+        X: number;
+        Y: number;
+        Z: number;
+        Width: number;
+        Height: number;
+        Text: string;
+        FgColor: Color;
+        BgColor: Color;
+    }
+
+    export interface Area {
+        areaName: string;
+        areaId: string;
+        rooms: Room[];
+        labels: Label[];
+    }
+
+    export type Map = Area[]
+
+    export interface Env {
+        envId: number;
+        colors: number[];
+    }
+
+}

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2021",
+    "lib": ["ES2021", "DOM"],
+    "module": "ES2020",
+    "moduleResolution": "Bundler",
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "sourceMap": true,
+  },
+  "include": ["src"]
+}

package/vercel.json

@@ -0,0 +1,5 @@
+{
+  "buildCommand": "yarn demo:build",
+  "outputDirectory": "demo/dist",
+  "devCommand": "yarn demo:dev"
+}

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vite';
+import dts from 'vite-plugin-dts';
+
+export default defineConfig(({ command }) => ({
+    root: command === 'serve' ? 'demo' : '.',
+    plugins: [
+        dts({
+            include: ['src'],
+            outDir: 'dist'
+        })
+    ],
+    build: {
+        lib: {
+            entry: 'src/index.ts',
+            name: 'mudlet-map-renderer',
+            fileName: (format) => (format === 'es' ? 'index.mjs' : 'index.cjs'),
+            formats: ['es', 'cjs']
+        },
+        rollupOptions: {
+            external: ['konva', 'canvas']
+        },
+        sourcemap: true,
+        emptyOutDir: true
+    },
+    server: {
+        open: true,
+        port: 5173
+    }
+}));

package/vite.demo.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite';
+import path from 'node:path';
+
+export default defineConfig({
+    root: 'demo',
+    resolve: {
+        alias: {
+            '@src': path.resolve(__dirname, 'src')
+        }
+    },
+    build: {
+        outDir: 'dist',
+        emptyOutDir: true
+    }
+});

package/.prettierrc

@@ -1,5 +0,0 @@
-{
-  "tabWidth": 4,
-  "useTabs": false,
-  "printWidth": 160
-}

package/CHANGELOG.md

@@ -1,69 +0,0 @@
-# 0.0.24
-- respect room weights
-# 0.0.23
-- do not draw path fragments no on the level of displayed area
-
-# 0.0.22
-- handle not existing paths
-
-# 0.0.21
-- fixes in special links to other areas
-- add controls for paths
-
-# 0.0.20
-
-# 0.0.19
-- add path renders
-
-# 0.0.18
-- drag event will be fired actually on drag not only on release
-
-# 0.0.17
-- fix emboss
-
-# 0.0.16
-- add emoss setting
-- add drag event
-
-# 0.0.15
-- additional fix for custom exit lines exit
-# 0.0.14
-- add area change clicks on custom exit lines
-# 0.0.13
-- add line color (experimental)
-
-# 0.0.12
-- try to limit label font size to fit within label bounds
-
-# 0.0.11
-- another fix frame mode for background selection
-
-# 0.0.10
-- fix frame mode for background selection
-
-# 0.0.9
-- add transparent labels option
-
-# 0.0.8
-- remove wrong limits for drag
-# 0.0.7
-- fix renderer compliation error
-# 0.0.6
-- fix controls error when zooming out max
-- make JS code not use experimental features
-# 0.0.5
-- add limit function for areas
-
-# 0.0.4
-- fix exports
-
-# 0.0.3
-- add option to set font and background color
-- multiple fixes
-
-# 0.0.2
-- add option to set font for text labels
-- fix README example
-
-# 0.0.1
-- initial release

package/README.md

@@ -1,59 +0,0 @@
-# Mudlet Map Renderer
-
-Mudlet map rendering library. Can be used in Node.js and in browser.
-
-Until version `1.0.0` API is subject of change. Use with caution!
-
-## TODO
-
-- [ ] Publish some examples (with data)
-- [ ] Convert to .ts
-- [ ] Document functions
-- [ ] Add test
-- [ ] Add lint
-- [ ] Align model with mudlet-map-binary-reader
-
-
-## Very basic example
-
-```js
-const fs = require("fs");
-const { MudletMapReader } = require("mudlet-map-binary-reader") //npm mudlet-map-binary-reader
-const { Renderer, MapReader } = require("mudlet-map-renderer")
-
-let map = MudletMapReader.read("./data/map.dat");
-MudletMapReader.export(map, "./data");
-let mapData = require("./data/mapExport.json");
-let mapColors = require("./data/colors.json");
-
-let reader = new MapReader(mapData, mapColors);
-
-const roomId = 1;
-const scale = 40;
-let area = reader.getAreaByRoomId(roomId);
-let settings = { scale: scale }
-let renderer = new Renderer(null, reader, area, reader.getColors(), settings);
-fs.writeFileSync("mapFull.svg", renderer.exportSvg());
-fs.writeFileSync("mapFragment.svg", renderer.exportSvg(roomId, 10));
-console.log("Map generated");
-```
-
-## Settings and their default values 
-```js
-class Settings {
-    isRound = false;
-    scale = 55;
-    roomSize = 10;
-    exitsSize = 2;
-    borders = false;
-    frameMode = false;
-    areaName = true;
-    showLabels = true;
-    uniformLevelSize = false;
-    fontFamily = 'sans-serif';
-    mapBackground = "#000000";
-    linesColor = '#FFFFFF';
-    transparentLabels = false;
-    emboss = false;
-}
-```

package/exports.js

@@ -1,5 +0,0 @@
- module.exports = {
-  Renderer: require("./map-fragment/draw/renderer").Renderer,
-  Settings: require("./map-fragment/draw/renderer").Settings,
-  MapReader: require("./map-fragment/reader/MapReader").MapReader,
-};

package/map-fragment/draw/controls.js

@@ -1,172 +0,0 @@
-const paper = require("paper");
-const { PathFinder } = require("../reader/PathFinder");
-
-let selectionStyle = function (item) {
-    let style = {
-        strokeColor: new paper.Color(180 / 255, 93 / 255, 60 / 255, 0.9),
-    };
-    if (item.closed) {
-        style.fillColor = new paper.Color(
-            new paper.Gradient([[item.fillColor, 0.38], new paper.Color(1, 1, 1)], false),
-            item.bounds.topCenter,
-            item.bounds.bottomCenter
-        );
-    }
-    return style;
-};
-
-paper.Item.prototype.select = function (styleFunction) {
-    this.mapSelected = !this.mapSelected;
-    if (this.mapSelected && styleFunction !== undefined) {
-        let style = styleFunction(this);
-        this.orgStyle = {};
-        for (const key in style) {
-            this.orgStyle[key] = this[key];
-        }
-        this.style = style;
-    } else {
-        this.style = this.orgStyle;
-    }
-};
-
-class Controls {
-    constructor(renderer, reader, element, paperScope) {
-        this.renderer = renderer;
-        this.reader = reader;
-        this.element = element;
-        this.scope = paperScope;
-        this.view = paperScope.view;
-        this.element.onwheel = (event) => this.zoom(event);
-        this.activateDrag();
-        this.renderer.emitter.addEventListener("roomClick", (event) => this.selectRoom(event.detail));
-        this.renderer.emitter.addEventListener("backgroundClick", () => this.deselectRoom());
-        this.renderer.emitter.addEventListener("areaArrowClick", (event) => this.goToRoomArea(event.detail));
-
-        let bounds = this.renderer.getBounds();
-
-        this.view.center = bounds.center;
-        this.view.zoom = Math.min(this.view.size.width / bounds.width, this.view.size.height / bounds.height);
-        this.view.minZoom = this.view.zoom;
-
-        this.pathFinder = new PathFinder(reader);
-    }
-
-    zoom(event) {
-        event.preventDefault();
-        let oldZoom = this.view.zoom;
-        this.deltaZoom(event.deltaY > 0 ? 0.9 : 1.1);
-        let viewPos = this.view.viewToProject(new paper.Point(event.offsetX, event.offsetY));
-        let zoomScale = oldZoom / this.view.zoom;
-        let centerAdjust = viewPos.subtract(this.view.center);
-        let offset = viewPos.subtract(centerAdjust.multiply(zoomScale)).subtract(this.view.center);
-        this.view.center = this.view.center.add(offset);
-    }
-
-    setZoom(value) {
-        this.view.zoom = value;
-        this.view.zoom = Math.min(Math.max(this.view.zoom, this.view.minZoom), 50);
-        this.element.dispatchEvent(new CustomEvent("zoom", { detail: this.view }));
-    }
-
-    deltaZoom(delta) {
-        this.setZoom(this.view.zoom * delta);
-    }
-
-    activateDrag() {
-        let toolPan = new paper.Tool();
-        toolPan.activate();
-        toolPan.onMouseDrag = (event) => {
-            this.toggleOptimizedDrag(true);
-            this.element.style.cursor = "all-scroll";
-            let delta = event.downPoint.subtract(event.point);
-            this.view.translate(delta.negate());
-            this.isDrag = true;
-            this.element.dispatchEvent(new CustomEvent("drag", { detail: this.view }));
-        };
-        toolPan.onMouseDown = () => {
-            this.isDrag = false;
-            this.element.dispatchEvent(new CustomEvent("drag", { detail: this.view }));
-        };
-        toolPan.onMouseUp = () => {
-            this.isDrag = false;
-            this.element.style.cursor = "default";
-            this.toggleOptimizedDrag(false);
-        };
-    }
-
-    toggleOptimizedDrag(state) {
-        if (!this.renderer.settings.optimizeDrag) {
-            return;
-        }
-        if (state) {
-            if (!this.isDrag) {
-                this.renderer.linkLayer.visible = false;
-                this.renderer.roomLayer.visible = false;
-                this.renderer.rasterLayer.visible = true;
-            }
-        } else {
-            this.renderer.linkLayer.visible = true;
-            this.renderer.roomLayer.visible = true;
-            this.renderer.rasterLayer.visible = false;
-        }
-    }
-
-    selectRoom(room) {
-        if (this.isDrag) {
-            return false;
-        }
-        this.deselectRoom();
-        this.renderer.renderPosition(room.id);
-        room.render.select(selectionStyle);
-        room.exitsRenders.forEach((render) => render.select(selectionStyle));
-        this.selected = room;
-
-        this.element.dispatchEvent(new CustomEvent("roomSelected", { detail: room }));
-    }
-
-    deselectRoom() {
-        if (this.isDrag) {
-            return false;
-        }
-        this.renderer.clearPosition();
-        this.renderer.clearHighlight();
-        if (this.selected !== undefined) {
-            this.selected.render.select();
-            this.selected.exitsRenders.forEach((render) => render.select());
-            delete this.selected;
-            this.element.dispatchEvent(new CustomEvent("roomDeselected"));
-        }
-    }
-
-    centerRoom(id) {
-        let room = this.renderer.area.getRoomById(id);
-        if (room !== undefined) {
-            this.centerOnItem(room.render);
-            this.selectRoom(room);
-        }
-    }
-
-    centerOnItem(item) {
-        this.view.center = item.localToGlobal(item.position);
-    }
-
-    goToRoomArea(id) {
-        let destRoom = this.reader.getRoomById(id);
-        this.element.dispatchEvent(new CustomEvent("goToArea", { detail: destRoom }));
-    }
-
-    move(x, y) {
-        this.view.scrollBy(new paper.Point(x * 50, y * 50));
-    }
-
-    renderPath(from, to, color) {
-        let rooms = this.pathFinder.path(from, to)?.map(number => parseInt(number));
-        if (rooms) {
-            return this.renderer.renderPath(rooms, color);
-        }
-    }
-}
-
-module.exports = {
-    Controls: Controls,
-};