mudlet-map-renderer 0.0.11 → 0.0.14

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# 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

package/README.md

@@ -52,5 +52,7 @@ class Settings {
     uniformLevelSize = false;
     fontFamily = 'sans-serif';
     mapBackground = "#000000";
+    linesColor = '#FFFFFF';
+    transparentLabels = false;
 }
 ```

package/map-fragment/draw/renderer.js

@@ -8,7 +8,9 @@ const gridSize = 20;
 const Colors = {
     OPEN_DOOR : new paper.Color(10 / 255, 155 / 255, 10 / 255),
     CLOSED_DOOR : new paper.Color(226 / 255, 205 / 255, 59 / 255),
-    LOCKED_DOOR : new paper.Color(155 / 255, 10 / 255, 10 / 255)
+    LOCKED_DOOR : new paper.Color(155 / 255, 10 / 255, 10 / 255),
+    DEFAULT_BACKGROUND : new paper.Color(0, 0, 0),
+    DEFAULT : new paper.Color(1, 1, 1),
 }
 
 class Settings {
@@ -23,7 +25,8 @@ class Settings {
         this.showLabels = true;
         this.uniformLevelSize = false;
         this.fontFamily = 'sans-serif';
-        this.mapBackground = "#000000";
+        this.mapBackground = Colors.DEFAULT_BACKGROUND
+        this.linesColor = Colors.DEFAULT
         this.transparentLabels = false;
     }
 }
@@ -159,7 +162,7 @@ class Renderer {
         let roomColor = new paper.Color(color[0] / 255, color[1] / 255, color[2] / 255, 1);
         roomShape.fillColor = !this.settings.frameMode ? roomColor : new paper.Color(this.settings.mapBackground);
         roomShape.strokeWidth = this.exitFactor;
-        roomShape.strokeColor = !this.settings.borders || this.settings.frameMode ? roomColor : this.defualtColor;
+        roomShape.strokeColor = !this.settings.borders || this.settings.frameMode ? roomColor : this.settings.linesColor;
 
         room.render = roomShape;
 
@@ -181,7 +184,7 @@ class Renderer {
         }
 
         for (let dir in room.customLines) {
-            this.renderCustomLine(room, dir);
+            this.renderCustomLine(room, dir, room.exits[dir] ?? room.specialExits[dir]);
         }
 
         for (let dir in room.stubs) {
@@ -214,9 +217,9 @@ class Renderer {
                 path.moveTo(exitPoint);
                 path.lineTo(secondPoint);
                 path.strokeWidth = this.exitFactor;
-                path.strokeColor = this.defualtColor;
+                path.strokeColor = this.settings.linesColor;
             } else {
-                this.renderArrow(exitPoint, secondPoint, this.defualtColor, [], this.exitFactor, this.defualtColor, true);
+                this.renderArrow(exitPoint, secondPoint, this.settings.linesColor, [], this.exitFactor, this.settings.linesColor, true);
             }
         } else {
             secondPoint = new paper.Point(room.x + this.roomFactor / 2, room.y + this.roomFactor / 2);
@@ -264,9 +267,10 @@ class Renderer {
         } else {
             secondPoint = new paper.Point(room.x + this.roomFactor / 2, room.y + this.roomFactor / 2);
             path = this.renderArrow(exitPoint, secondPoint, this.defualtColor, [], this.exitFactor);
-            path.strokeColor = this.defualtColor;
+            path.strokeColor = this.settings.linesColor;
             path.scale(1, exitPoint);
             path.rotate(180, exitPoint);
+            path.registerClick(() => this.emitter.dispatchEvent(new CustomEvent("areaArrowClick", { detail: targetId })));
         }
 
         room.exitsRenders.push(path);
@@ -278,7 +282,7 @@ class Renderer {
         return path;
     }
 
-    renderCustomLine(room, dir) {
+    renderCustomLine(room, dir, targetId) {
         if (room.customLines[dir].points !== undefined && room.customLines[dir].points.length === 0) {
             return;
         }
@@ -337,6 +341,11 @@ class Renderer {
         path.strokeWidth = this.exitFactor;
         path.orgStrokeColor = path.strokeColor;
 
+        let targetRoom = this.area.getRoomById(targetId);
+        if (!targetRoom) {
+            path.registerClick(() => this.emitter.dispatchEvent(new CustomEvent("areaArrowClick", { detail: targetId })));
+        }
+
         room.exitsRenders.push(customLine);
 
         return customLine;
@@ -385,7 +394,7 @@ class Renderer {
             path.scale(2);
             path.position = exitPoint;
             path.strokeWidth = this.exitFactor;
-            path.strokeColor = this.defualtColor;
+            path.strokeColor = this.settings.linesColor;
         }
         return path;
     }
@@ -527,7 +536,7 @@ class Renderer {
             }
             let text = new paper.PointText(background.bounds.center.add(0, 0.15));
             text.fillColor = new paper.Color(value.FgColor.r / 255, value.FgColor.g / 255, value.FgColor.b / 255);
-            text.fontSize = 0.75;
+            text.fontSize = Math.min(0.75, value.Width / (value.Text.length / 2));
             text.content = value.Text;
             text.fontFamily = this.settings.fontFamily;
             text.justification = "center";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mudlet-map-renderer",
-    "version": "0.0.11",
+    "version": "0.0.14",
     "keywords": [
         "mudlet",
         "map",