moved arrows to separate module

src/modules/Poly.ts

@@ -1,14 +1,13 @@
-import { Map, LayerGroup, LatLng, LatLngLiteral, LeafletEventHandlerFn, marker, divIcon, Marker } from 'leaflet';
-import { EditablePolyline } from '$utils/EditablePolyline';
+import { Map, LatLng } from 'leaflet';
 import { simplify } from '$utils/simplify';
 import { CLIENT } from '$config/frontend';
 import { editor, Editor } from "$modules/Editor";
 import { ILatLng } from "$modules/Stickers";
 import { InteractivePoly } from "$modules/InteractivePoly";
-import { clusterIcon } from "$utils/clusterIcon";
 import { MarkerClusterGroup } from 'leaflet.markercluster/dist/leaflet.markercluster-src.js';
 import { angleBetweenPoints, dist2, distToSegment, middleCoord } from "$utils/geom";
 import { arrowClusterIcon, createArrow } from "$utils/arrow";
+import { Arrows } from "$modules/Arrows";
 
 interface Props {
   map: Map;
@@ -28,7 +27,6 @@ export class Poly {
       weight: 6,
       maxMarkers: 100,
       smoothFactor: 3,
-      // bubblingMouseEvents: false,
     })
       .on('distancechange', this.onDistanceUpdate)
       .on('allvertexhide', this.onVertexHide)
@@ -45,7 +43,7 @@ export class Poly {
     this.triggerOnChange = triggerOnChange;
     this.lockMapClicks = lockMapClicks;
 
-    this.arrowLayer.addTo(map);
+    this.arrows = new Arrows({}).addTo(map);
   }
 
   onDistanceUpdate = (event) => {
@@ -60,62 +58,9 @@ export class Poly {
     this.editor.setChanged(true);
 
     const { latlngs } = event;
-    this.arrowLayer.clearLayers();
-
-    if (latlngs.length === 0) return;
-
-    const midpoints = latlngs.reduce((res, latlng, i) => (
-      latlngs[i + 1] && dist2(latlngs[i], latlngs[i + 1]) > 0.00005
-        ? [
-            ...res,
-            {
-              latlng: middleCoord(latlngs[i], latlngs[i + 1]),
-              angle: angleBetweenPoints(
-                this.map.latLngToContainerPoint(latlngs[i]),
-                this.map.latLngToContainerPoint(latlngs[i + 1])
-              ),
-            }
-          ]
-        : res
-    ), []);
-
-    midpoints.forEach(({ latlng, angle }) => (
-      this.arrowLayer.addLayer(createArrow(latlng, angle))
-    ));
+    this.arrows.setLatLngs(latlngs);
   };
 
-  // setModeOnDrawing = (): void => {
-  //   if (this.editor.getMode() !== MODES.POLY) this.editor.setMode(MODES.POLY);
-  // };
-  //
-  // drawArrows = () => {
-  //   // todo: fix this
-  //   this.arrows.clearLayers();
-  //   const { latlngs } = this;
-  //
-  //   if (!latlngs || latlngs.length <= 1) return;
-  //
-  //   latlngs.forEach((latlng, i) => {
-  //     if (i === 0) return;
-  //
-  //     const mid = middleCoord(latlngs[i], latlngs[i - 1]);
-  //     const dist = findDistance(latlngs[i - 1].lat, latlngs[i - 1].lng, latlngs[i].lat, latlngs[i].lng);
-  //
-  //     if (dist <= 1) return;
-  //
-  //     const slide = new Polyline(
-  //       [
-  //         latlngs[i - 1],
-  //         [mid.lat, mid.lng]
-  //       ],
-  //       { color: 'none', weight: CLIENT.STROKE_WIDTH }
-  //     ).addTo(this.arrows) as any;
-  //
-  //     // todo: uncomment and fix this:
-  //     slide._path.setAttribute('marker-end', 'url(#long-arrow)');
-  //   });
-  // };
-
   continue = (): void => {
     this.poly.editor.continue();
   };
@@ -148,8 +93,6 @@ export class Poly {
     this.poly.setPoints([]);
   };
 
-  // clearArrows = (): LayerGroup<any> => this.arrows.clearLayers();
-
   dumpData = (): Array<LatLng> => this.latlngs;
 
   get latlngs(): Array<LatLng> {
@@ -162,16 +105,8 @@ export class Poly {
     return (!this.latlngs || Object.values(this.latlngs).length <= 0);
   }
 
-  poly: EditablePolyline;
-  arrowLayer: MarkerClusterGroup = new MarkerClusterGroup({
-    spiderfyOnMaxZoom: false,
-    showCoverageOnHover: false,
-    zoomToBoundsOnClick: false,
-    animate: false,
-    maxClusterRadius: 120,
-    // disableClusteringAtZoom: 13,
-    iconCreateFunction: arrowClusterIcon,
-  });
+  arrows;
+  poly;
 
   editor: Props['editor'];
   map: Props['map'];