From 4124b6b8e89ddcbfce952d518472095e144b11e6 Mon Sep 17 00:00:00 2001
From: James Lyne <jim+github@not-null.co.uk>
Date: Mon, 14 Dec 2020 15:53:58 +0000
Subject: [PATCH] On redraw an area when it's style or points change

---
 src/util/areas.ts | 35 ++++++++++++++++++++++++++++++++---
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/util/areas.ts b/src/util/areas.ts
index bebcf11..73b5223 100644
--- a/src/util/areas.ts
+++ b/src/util/areas.ts
@@ -21,15 +21,44 @@ export const updateArea = (area: Polyline | Polygon | undefined, options: Dynmap
 		return createArea(options, converter);
 	}
 
+	const oldPoints = area.getLatLngs();
+	let dirty = false;
+
+	//Avoid pointless setStyle() redrawing by checking if styles have actually changed
+	if(!isStyleEqual(area.options, options.style)) {
+		area.setStyle(options.style); //FIXME: Maybe override setStyle to add an option for not redrawing
+		dirty = true;
+	}
+
+
+	if(!arePointsEqual(oldPoints.length === 1 ? oldPoints[0] : oldPoints, points)) {
+		area.setLatLngs(points);
+		dirty = true;
+	}
+
 	area.unbindPopup();
 	area.bindPopup(() => createPopup(options));
-	area.setStyle(options.style);
-	area.setLatLngs(points);
-	area.redraw();
+
+	if(dirty) {
+		area.redraw();
+	}
 
 	return area;
 };
 
+const arePointsEqual = (oldPoints: any, newPoints: any) => {
+	return JSON.stringify(oldPoints) === JSON.stringify(newPoints);
+}
+
+const isStyleEqual = (oldStyle: any, newStyle: any) => {
+	return oldStyle && newStyle
+		&& (oldStyle.color === newStyle.color)
+		&& (oldStyle.weight === newStyle.weight)
+		&& (oldStyle.opacity === newStyle.opacity)
+		&& (oldStyle.fillColor === newStyle.fillColor)
+		&& (oldStyle.fillOpacity === newStyle.fillOpacity)
+}
+
 export const createPopup = (options: DynmapArea): HTMLElement => {
 	const popup = document.createElement('span');