mudlet-map-renderer 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,6 +1,10 @@
-# 0.0.2
-- add option to set font for text labels
-- fix README example
-
-# 0.0.1
+# 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,54 +1,56 @@
-# 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 options = new Renderer(null, reader, area, reader.getColors(), options);
-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;
-}
+# 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 options = new Renderer(null, reader, area, reader.getColors(), options);
+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";
+}
 ```

package/exports.js

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

package/map-fragment/draw/renderer.js

@@ -21,7 +21,8 @@ class Settings {
     areaName = true;
     showLabels = true;
     uniformLevelSize = false;
-    fontFamily = 'sans-serif'
+    fontFamily = 'sans-serif';
+    mapBackground = "#000000";
 }
 
 paper.Item.prototype.registerClick = function (callback) {
@@ -86,7 +87,7 @@ class Renderer {
     render(pngRender = false) {
         this.pngRender = pngRender;
         this.renderBackground(this.bounds.minX - padding, this.bounds.minY - padding, this.bounds.maxX + padding, this.bounds.maxY + padding);
-        this.renderHeader();
+        this.renderHeader(this.bounds.minX - padding / 2, this.bounds.maxY + padding / 2);
         this.area.rooms
             .filter((room) => room.z == this.area.zIndex)
             .forEach((room) => {
@@ -94,7 +95,9 @@ class Renderer {
             });
         if (this.area.labels !== undefined && this.settings.showLabels) {
             this.bgLabels.activate();
-            this.area.labels.forEach((value) => this.renderLabel(value), this);
+            this.area.labels
+                .filter((label) => label.Z == this.area.zIndex)
+                .forEach((value) => this.renderLabel(value), this);
         }
         this.matrix = new paper.Matrix(1, 0, 0, -1, -this.bounds.minX + padding, this.bounds.maxY + padding).scale(
             this.scale,
@@ -120,17 +123,16 @@ class Renderer {
     renderBackground(x1, y1, x2, y2) {
         this.backgroundLayer.activate();
         let background = new paper.Path.Rectangle(new paper.Point(x1, y1), new paper.Point(x2, y2));
-        background.fillColor = new paper.Color(0, 0, 0);
+        background.fillColor = new paper.Color(this.settings.mapBackground);
         background.registerClick(() => {
             this.emitter.dispatchEvent(new CustomEvent("backgroundClick"));
         });
     }
 
-    renderHeader() {
+    renderHeader(x, y) {
         if (this.settings.areaName) {
             this.backgroundLayer.activate();
-            let bounds = this.getBounds();
-            let header = new paper.PointText(bounds.x + 2.5, bounds.y + bounds.height - 2.5);
+            let header = new paper.PointText(x, y);
             header.fillColor = new paper.Color(1, 1, 1, 1);
             header.fontSize = 2.5;
             header.fontFamily = this.settings.fontFamily;
@@ -471,7 +473,7 @@ class Renderer {
     renderChar(room) {
         this.charsLayer.activate();
         if (room.roomChar) {
-            let size = 0.85 * this.roomFactor;
+            let size = 0.85 * this.roomFactor / room.roomChar.length;
             let x = this.pngRender ? room.render.position.x - 0.1 : room.render.position.x;
             let text = new paper.PointText(x, room.render.position.y + size / 4);
             if (!room.userData || room.userData["system.fallback_symbol_color"] === undefined) {

package/map-fragment/reader/MapReader.js

@@ -46,7 +46,13 @@ class MapReader {
                 }
                 return isWithinBounds;
             }),
-            area.labels.filter((value) => value.Z === zIndex),
+            area.labels.filter((label) => {
+                let isWithinBounds = true;
+                if (limits) {
+                    isWithinBounds = limits.xMin < label.X && limits.xMax > label.X && limits.yMin < label.Y && limits.yMax > label.Y;
+                }
+                return isWithinBounds;
+            }),
             zIndex,
             levels
         );

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mudlet-map-renderer",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "keywords": [
         "mudlet",
         "map",
@@ -17,6 +17,5 @@
     "dependencies": {
         "paper-jsdom": "^0.12.15"
     },
-    "devDependencies": {},
     "exports": "./exports.js"
-}
+}