mudlet-map-renderer 0.0.18 → 0.0.20

package/.prettierrc

@@ -2,5 +2,4 @@
   "tabWidth": 4,
   "useTabs": false,
   "printWidth": 160
-  
 }

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+# 0.0.19
+- add path renders
+
 # 0.0.18
 - drag event will be fired actually on drag not only on release
 

package/map-fragment/draw/controls.js

@@ -73,6 +73,7 @@ class Controls {
         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());
@@ -86,9 +87,27 @@ class Controls {
         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;
@@ -107,6 +126,7 @@ class Controls {
             return false;
         }
         this.renderer.clearPosition();
+        this.renderer.clearHighlight();
         if (this.selected !== undefined) {
             this.selected.render.select();
             this.selected.exitsRenders.forEach((render) => render.select());
@@ -118,10 +138,14 @@ class Controls {
     centerRoom(id) {
         let room = this.renderer.area.getRoomById(id);
         if (room !== undefined) {
-            this.view.center = room.render.localToGlobal(room.render.position);
+            this.centerOnItem(room.render);
             this.selectRoom(room);
         }
     }
+    
+    centerOnItem(item) {
+        this.view.center = item.localToGlobal(item.position);
+    }
 
     goToRoomArea(id) {
         let destRoom = this.reader.getRoomById(id);

package/map-fragment/draw/renderer.js

@@ -82,17 +82,20 @@ class Renderer {
         this.bgLabels = new paper.Layer();
         this.linkLayer = new paper.Layer();
         this.roomLayer = new paper.Layer();
+        this.rasterLayer = new paper.Layer();
         this.labelsLayer = new paper.Layer();
         this.specialLinkLayer = new paper.Layer();
         this.charsLayer = new paper.Layer();
         this.overlayLayer = new paper.Layer();
         this.exitsRendered = {};
         this.defualtColor = new paper.Color(this.colors.default[0] / 255, this.colors.default[1] / 255, this.colors.default[2] / 255);
-        this.highlights = [];
+        this.highlights = new paper.Group();
+        this.highlights.locked = true;
+        this.path = [];
         this.render();
     }
 
-    render(pngRender = false) {
+    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.bounds.minX - padding / 2, this.bounds.maxY + padding / 2);
@@ -111,6 +114,12 @@ class Renderer {
             this.scale,
             new paper.Point(this.bounds.minX, this.bounds.maxY)
         );
+        if (this.settings.optimizeDrag) {
+            this.rasterLayer.activate();
+            this.linkRaster = this.linkLayer.rasterize({resolution: 2000});
+            this.roomRaster = this.roomLayer.rasterize({resolution: 2000});
+            this.rasterLayer.visible = false;
+        }
         this.transform();
         if (this.isVisual) {
             this.controls = new Controls(this, this.reader, this.element, this.paper);
@@ -693,12 +702,49 @@ class Renderer {
         }
         highlight.strokeColor = new paper.Color(color[0], color[1], color[2]);
         highlight.dashArray = [0.1, 0.1];
-        this.highlights.push(highlight)
+        highlight.locked = true;
+        this.highlights.addChild(highlight)
+    }
+
+    clearHighlight() {
+        this.highlights.removeChildren()
+    }
+
+    renderPath(locations, color) {
+        this.overlayLayer.activate();
+        let group = new paper.Group();
+        locations.forEach(id => {
+            let room = this.area.getRoomById(id);
+            if (!room) {
+                return
+            }
+            let startPoint = new paper.Point(room.x + this.roomFactor * 0.5, room.y + this.roomFactor * 0.5)
+            let exits = Object.values(room.exits).concat(Object.values(room.specialExits))
+            exits.forEach(exitRoomId => {
+                if (locations.indexOf(exitRoomId) > -1) {
+                    let exitRoom = this.area.getRoomById(exitRoomId);
+                    if (!exitRoom) {
+                        return
+                    }
+                    let endPoint = new paper.Point(exitRoom.x + this.roomFactor * 0.5, exitRoom.y + this.roomFactor * 0.5)
+                    let line = new paper.Path.Line(startPoint, endPoint)
+                    line.strokeWidth = this.exitFactor * 4;
+                    if (color === undefined) {
+                        color = [0.4, 0.9, 0.3];
+                    }
+                    line.strokeColor = new paper.Color(color[0], color[1], color[2]);
+                    this.path.push(line);
+                    group.addChild(line);
+                }
+            })
+        })
+        group.locked = true;
+        return group;
     }
 
-    clearHighlight(id) {
-        this.highlights.forEach((element) => element.remove());
-        this.highlights = [];
+    clearPath() {
+        this.path.forEach((element) => element.remove());
+        this.path = [];
     }
 
 

package/map-fragment/reader/MapReader.js

@@ -85,5 +85,5 @@ class MapReader {
 }
 
 module.exports = {
-    MapReader: MapReader,
+    MapReader
 };

package/map-fragment/reader/pathFind.js

@@ -0,0 +1,26 @@
+const { MapReader } = require("./MapReader");
+const Graph = require("node-dijkstra")
+
+class PathFinder {
+
+    /**
+     * 
+     * @param {MapReader} reader 
+     */
+    constructor(reader) {
+        this.route = new Graph();
+        reader.getAreas().forEach(area => area.rooms.forEach(room => {
+            let exits = Object.values(room.exits).concat(Object.values(room.specialExits)).map(item => [item, 1]);
+            this.route.addNode(room.id.toString(), Object.fromEntries(exits))
+        }))
+    }
+
+    path(from, to) {
+        return this.route.path(from.toString(), to.toString())
+    }
+
+}
+
+module.exports = {
+    PathFinder
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "mudlet-map-renderer",
-    "version": "0.0.18",
+    "version": "0.0.20",
     "keywords": [
         "mudlet",
         "map",
@@ -15,6 +15,7 @@
     "homepage": "https://github.com/Delwing/js-mudlet-map-renderer#readme",
     "license": "MIT",
     "dependencies": {
+        "node-dijkstra": "^2.5.0",
         "paper-jsdom": "^0.12.15"
     },
     "main": "./exports.js"