DCSOlympus/frontend/website/src/map/rangecircle.ts

// @ts-nocheck
// This is a horrible hack. But it is needed at the moment to ovveride a default behaviour of Leaflet. TODO please fix me the proper way.

import { Circle, Point, Polyline } from 'leaflet';

/**
 *  This custom Circle object implements a faster render method for very big circles. When zoomed in, the default ctx.arc method
 * is very slow since the circle is huge. Also, when zoomed in most of the circle points will be outside the screen and not needed. This
 * simpler, faster renderer approximates the circle with line segements and only draws those currently visibile.
 * A more refined version using arcs could be implemented but this works good enough.
 */
export class RangeCircle extends Circle {
    _updatePath() {
        if (!this._renderer._drawing || this._empty()) { return; }
		var p = this._point,
		    ctx = this._renderer._ctx,
		    r = Math.max(Math.round(this._radius), 1),
		    s = (Math.max(Math.round(this._radiusY), 1) || r) / r;

		if (s !== 1) {
			ctx.save();
			ctx.scale(1, s);
		}
		
        let pathBegun = false;
        let dtheta = Math.PI * 2 / 120;
        for (let theta = 0; theta <= Math.PI * 2; theta += dtheta) {
            let p1 = new Point(p.x + r * Math.cos(theta), p.y / s + r * Math.sin(theta));
            let p2 = new Point(p.x + r * Math.cos(theta + dtheta), p.y / s + r * Math.sin(theta + dtheta));
            let l1 = this._map.layerPointToLatLng(p1);
            let l2 = this._map.layerPointToLatLng(p2);
            let line = new Polyline([l1, l2]);
            if (this._map.getBounds().intersects(line.getBounds())) {
                if (!pathBegun) {
                    ctx.beginPath();
                    ctx.moveTo(p1.x, p1.y);
                    pathBegun = true;
                }
                ctx.lineTo(p2.x, p2.y);
            }
            else {
                if (pathBegun) {
                    this._renderer._fillStroke(ctx, this);
                    pathBegun = false;
                }
            }
        }

        if (pathBegun)
            this._renderer._fillStroke(ctx, this);

		if (s !== 1) 
			ctx.restore();	
        
    }
}