@deck.gl-community/editable-layers 9.0.0-alpha.1 → 9.0.2

package/src/lib/deck-renderer/deck-drawer.ts

@@ -1,12 +1,12 @@
-import { PolygonLayer } from '@deck.gl/layers';
-import { point, polygon } from '@turf/helpers';
+import {PolygonLayer} from '@deck.gl/layers';
+import {point, polygon} from '@turf/helpers';
 import turfBbox from '@turf/bbox';
 import turfBboxPolygon from '@turf/bbox-polygon';
 import turfBuffer from '@turf/buffer';
 import turfDifference from '@turf/difference';
 import turfDistance from '@turf/distance';
 
-import { Color } from '../../types';
+import {Color} from '../../utils/types';
 
 const POLYGON_LINE_COLOR = [0, 255, 0, 255];
 const POLYGON_FILL_COLOR = [255, 255, 255, 90];
@@ -20,10 +20,10 @@ const LAYER_ID_PICK = 'DeckDrawerPick';
 export const SELECTION_TYPE = {
   NONE: null,
   RECTANGLE: 'rectangle',
-  POLYGON: 'polygon',
+  POLYGON: 'polygon'
 };
 
-export default class DeckDrawer {
+export class DeckDrawer {
   nebula: Record<string, any>;
   usePolygon: boolean;
   validPolygon: boolean;
@@ -47,14 +47,14 @@ export default class DeckDrawer {
 
   _selectFromPickingInfos(pickingInfos: Record<string, any>[]) {
     const objects = pickingInfos.map(
-      ({ layer, index, object }) =>
+      ({layer, index, object}) =>
         object.original || layer.props.nebulaLayer.deckCache.originals[index]
     );
     this.nebula.props.onSelection(objects);
   }
 
   _getBoundingBox(): Record<string, any> {
-    const { mousePoints } = this;
+    const {mousePoints} = this;
     const allX = mousePoints.map((mousePoint) => mousePoint[0]);
     const allY = mousePoints.map((mousePoint) => mousePoint[1]);
     const x = Math.min(...allX);
@@ -62,7 +62,7 @@ export default class DeckDrawer {
     const maxX = Math.max(...allX);
     const maxY = Math.max(...allY);
 
-    return { x, y, width: maxX - x, height: maxY - y };
+    return {x, y, width: maxX - x, height: maxY - y};
   }
 
   _selectRectangleObjects() {
@@ -75,7 +75,7 @@ export default class DeckDrawer {
       y: Math.min(y1, y2),
       width: Math.abs(x2 - x1),
       height: Math.abs(y2 - y1),
-      layerIds: this._getLayerIds(),
+      layerIds: this._getLayerIds()
     });
 
     this._selectFromPickingInfos(pickingInfos);
@@ -84,14 +84,14 @@ export default class DeckDrawer {
   _selectPolygonObjects() {
     const pickingInfos = this.nebula.deckgl.pickObjects({
       ...this._getBoundingBox(),
-      layerIds: [LAYER_ID_PICK, ...this._getLayerIds()],
+      layerIds: [LAYER_ID_PICK, ...this._getLayerIds()]
     });
 
     this._selectFromPickingInfos(pickingInfos.filter((item) => item.layer.id !== LAYER_ID_PICK));
   }
 
   _getMousePosFromEvent(event: Record<string, any>): [number, number] {
-    const { offsetX, offsetY } = event;
+    const {offsetX, offsetY} = event;
     return [offsetX, offsetY];
   }
 
@@ -100,7 +100,7 @@ export default class DeckDrawer {
     event: Record<string, any>,
     lngLat: [number, number],
     selectionType: number
-  ): { redraw: boolean; deactivate: boolean } {
+  ): {redraw: boolean; deactivate: boolean} {
     // capture all events (mouse-up is needed to prevent us stuck in moving map)
     if (event.type !== 'mouseup') event.stopPropagation();
 
@@ -110,7 +110,7 @@ export default class DeckDrawer {
     let redraw = false;
     let deactivate = false;
 
-    const { usePolygon, landPoints, mousePoints } = this;
+    const {usePolygon, landPoints, mousePoints} = this;
 
     if (event.type === 'mousedown') {
       if (usePolygon && landPoints.length) {
@@ -153,7 +153,7 @@ export default class DeckDrawer {
       }
     }
 
-    return { redraw, deactivate };
+    return {redraw, deactivate};
   }
 
   reset() {
@@ -180,18 +180,18 @@ export default class DeckDrawer {
         [x1, y2],
         [x2, y2],
         [x2, y1],
-        [x1, y1],
+        [x1, y1]
       ].map((mousePos) => this.nebula.unprojectMousePosition(mousePos));
       data.push({
         polygon: selPolygon,
         lineColor: POLYGON_LINE_COLOR,
-        fillColor: POLYGON_FILL_COLOR,
+        fillColor: POLYGON_FILL_COLOR
       });
     } else if (this.usePolygon && this.landPoints.length) {
       data.push({
         polygon: this.landPoints,
         lineColor: POLYGON_LINE_COLOR,
-        fillColor: POLYGON_FILL_COLOR,
+        fillColor: POLYGON_FILL_COLOR
       });
 
       // Hack: use a polygon to hide the outside, because pickObjects()
@@ -206,7 +206,7 @@ export default class DeckDrawer {
           bigPolygon = turfDifference(bigBuffer, landPointsPoly);
           dataPick.push({
             polygon: bigPolygon.geometry.coordinates,
-            fillColor: [0, 0, 0, 1],
+            fillColor: [0, 0, 0, 1]
           });
           this.validPolygon = true;
         } catch (e) {
@@ -221,15 +221,15 @@ export default class DeckDrawer {
       data.push({
         polygon: this._makeStartPointHighlight(this.landPoints[0]),
         lineColor: [0, 0, 0, 0],
-        fillColor: POLYGON_LINE_COLOR,
+        fillColor: POLYGON_LINE_COLOR
       });
     }
 
     // Hack to make the PolygonLayer() stay active,
     // otherwise it takes 3 seconds (!) to init!
     // TODO: fix this
-    data.push({ polygon: [[0, 0]] });
-    dataPick.push({ polygon: [[0, 0]] });
+    data.push({polygon: [[0, 0]]});
+    dataPick.push({polygon: [[0, 0]]});
 
     return [
       new PolygonLayer({
@@ -243,21 +243,21 @@ export default class DeckDrawer {
         lineDashJustified: true,
         // TODO(v9) Add extension
         // getLineDashArray: (x) => POLYGON_DASHES,
-        getLineColor: (obj: { lineColor?: Color }) => obj.lineColor || [0, 0, 0, 255],
-        getFillColor: (obj: { fillColor?: Color }) => obj.fillColor || [0, 0, 0, 255],
-        getPolygon: (o: { polygon?: any }) => o.polygon,
+        getLineColor: (obj: {lineColor?: Color}) => obj.lineColor || [0, 0, 0, 255],
+        getFillColor: (obj: {fillColor?: Color}) => obj.fillColor || [0, 0, 0, 255],
+        getPolygon: (o: {polygon?: any}) => o.polygon
       }),
       new PolygonLayer({
         id: LAYER_ID_PICK,
         data: dataPick,
-        getLineColor: (obj: { lineColor?: Color }) => obj.lineColor || [0, 0, 0, 255],
-        getFillColor: (obj: { fillColor?: Color }) => obj.fillColor || [0, 0, 0, 255],
+        getLineColor: (obj: {lineColor?: Color}) => obj.lineColor || [0, 0, 0, 255],
+        getFillColor: (obj: {fillColor?: Color}) => obj.fillColor || [0, 0, 0, 255],
         fp64: false,
         opacity: 1.0,
         stroked: false,
         pickable: true,
-        getPolygon: (o: { polygon?: any }) => o.polygon,
-      }),
+        getPolygon: (o: {polygon?: any}) => o.polygon
+      })
     ];
   }
 }

package/src/lib/feature.ts

@@ -1,8 +1,12 @@
-import { Feature as GeoJson } from '../geojson-types';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
-import { Style } from '../types';
+import {Feature as GeoJson} from '../utils/geojson-types';
 
-export default class Feature {
+import {Style} from '../utils/types';
+
+export class Feature {
   // geo json coordinates
   geoJson: GeoJson;
   style: Style;

package/src/lib/layer-mouse-event.ts

@@ -1,6 +1,10 @@
-import { Position } from '../geojson-types';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
-export default class LayerMouseEvent {
+import {Position} from '../utils/geojson-types';
+
+export class LayerMouseEvent {
   canceled: boolean = false;
   // original item that this event is related to
   data: Record<string, any>;
@@ -13,10 +17,7 @@ export default class LayerMouseEvent {
   // reference to nebula
   nebula: Record<string, any>;
 
-  constructor(
-    nativeEvent: MouseEvent,
-    { data, groundPoint, nebula, metadata }: Record<string, any>
-  ) {
+  constructor(nativeEvent: MouseEvent, {data, groundPoint, nebula, metadata}: Record<string, any>) {
     this.nativeEvent = nativeEvent;
 
     this.data = data;

package/src/lib/layers/junctions-layer.ts

@@ -1,9 +1,13 @@
-import NebulaLayer from '../nebula-layer';
-import { toDeckColor } from '../../utils';
-import DeckCache from '../deck-renderer/deck-cache';
-import JunctionScatterplotLayer from '../../editable-layers/junction-scatterplot-layer';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
-export default class JunctionsLayer extends NebulaLayer {
+import {NebulaLayer} from '../nebula-layer';
+import {toDeckColor} from '../../utils/utils';
+import {DeckCache} from '../deck-renderer/deck-cache';
+import {JunctionScatterplotLayer} from '../../editable-layers/junction-scatterplot-layer';
+
+export class JunctionsLayer extends NebulaLayer {
   deckCache: DeckCache<any, any>;
 
   constructor(config: Record<string, any>) {
@@ -12,9 +16,9 @@ export default class JunctionsLayer extends NebulaLayer {
     this.enablePicking = true;
   }
 
-  render({ nebula }: Record<string, any>) {
+  render({nebula}: Record<string, any>) {
     const defaultColor: [number, number, number, number] = [0x0, 0x0, 0x0, 0xff];
-    const { objects, updateTrigger } = this.deckCache;
+    const {objects, updateTrigger} = this.deckCache;
 
     return new JunctionScatterplotLayer({
       id: `junctions-${this.id}`,
@@ -31,10 +35,10 @@ export default class JunctionsLayer extends NebulaLayer {
         depthCompare: 'always'
       },
 
-      updateTriggers: { all: updateTrigger },
+      updateTriggers: {all: updateTrigger},
 
-      // @ts-ignore
-      nebulaLayer: this,
+      // @ts-expect-error TODO
+      nebulaLayer: this
     });
   }
 }

package/src/lib/layers/segments-layer.ts

@@ -1,17 +1,21 @@
-import { ArrowStyles, DEFAULT_STYLE, MAX_ARROWS } from '../style';
-import NebulaLayer from '../nebula-layer';
-import { toDeckColor } from '../../utils';
-import DeckCache from '../deck-renderer/deck-cache';
-import PathMarkerLayer from '../../editable-layers/path-marker-layer/path-marker-layer';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {ArrowStyles, DEFAULT_STYLE, MAX_ARROWS} from '../style';
+import {NebulaLayer} from '../nebula-layer';
+import {toDeckColor} from '../../utils/utils';
+import {DeckCache} from '../deck-renderer/deck-cache';
+import {PathMarkerLayer} from '@deck.gl-community/layers';
 
 const NEBULA_TO_DECK_DIRECTIONS = {
-  [ArrowStyles.NONE]: { forward: false, backward: false },
-  [ArrowStyles.FORWARD]: { forward: true, backward: false },
-  [ArrowStyles.BACKWARD]: { forward: false, backward: true },
-  [ArrowStyles.BOTH]: { forward: true, backward: true },
+  [ArrowStyles.NONE]: {forward: false, backward: false},
+  [ArrowStyles.FORWARD]: {forward: true, backward: false},
+  [ArrowStyles.BACKWARD]: {forward: false, backward: true},
+  [ArrowStyles.BOTH]: {forward: true, backward: true}
 };
 
-export default class SegmentsLayer extends NebulaLayer {
+export class SegmentsLayer extends NebulaLayer {
   deckCache: DeckCache<any, any>;
   noBlend: boolean;
   highlightColor: [number, number, number, number];
@@ -41,7 +45,7 @@ export default class SegmentsLayer extends NebulaLayer {
   }
 
   _calcMarkerPercentages(nf: Record<string, any>): number[] {
-    const { arrowPercentages } = nf.style;
+    const {arrowPercentages} = nf.style;
     if (arrowPercentages) {
       return arrowPercentages;
     }
@@ -53,10 +57,10 @@ export default class SegmentsLayer extends NebulaLayer {
     return [[0.5], [0.33, 0.66], [0.25, 0.5, 0.75]][arrowCount - 1];
   }
 
-  _getHighlightedObjectIndex({ nebula }: Record<string, any>): number {
-    const { deckglMouseOverInfo } = nebula;
+  _getHighlightedObjectIndex({nebula}: Record<string, any>): number {
+    const {deckglMouseOverInfo} = nebula;
     if (deckglMouseOverInfo) {
-      const { originalLayer, index } = deckglMouseOverInfo;
+      const {originalLayer, index} = deckglMouseOverInfo;
       if (originalLayer === this) {
         return index;
       }
@@ -66,9 +70,9 @@ export default class SegmentsLayer extends NebulaLayer {
     return -1;
   }
 
-  render({ nebula }: Record<string, any>) {
+  render({nebula}: Record<string, any>) {
     const defaultColor: [number, number, number, number] = [0x0, 0x0, 0x0, 0xff];
-    const { objects, updateTrigger } = this.deckCache;
+    const {objects, updateTrigger} = this.deckCache;
 
     return new PathMarkerLayer<any>({
       id: `segments-${this.id}`,
@@ -81,7 +85,7 @@ export default class SegmentsLayer extends NebulaLayer {
       sizeScale: this.arrowSize || 6,
       parameters: {
         depthCompare: 'always',
-        blendColorOperation: this.noBlend ? undefined : 'max',
+        blendColorOperation: this.noBlend ? undefined : 'max'
       },
       getPath: (nf: any) => nf.geoJson.geometry.coordinates,
       getColor: (nf: any) => toDeckColor(nf.style.lineColor, defaultColor),
@@ -91,9 +95,9 @@ export default class SegmentsLayer extends NebulaLayer {
       getMarkerColor: (nf: any) => toDeckColor(nf.style.arrowColor, defaultColor),
       // eslint-disable-next-line @typescript-eslint/unbound-method
       getMarkerPercentages: this._calcMarkerPercentages,
-      updateTriggers: { all: updateTrigger },
+      updateTriggers: {all: updateTrigger},
 
-      highlightedObjectIndex: this._getHighlightedObjectIndex({ nebula }),
+      highlightedObjectIndex: this._getHighlightedObjectIndex({nebula}),
       highlightColor: toDeckColor(this.highlightColor),
 
       dashJustified: this.dashed,
@@ -102,7 +106,7 @@ export default class SegmentsLayer extends NebulaLayer {
         this.markerLayerProps ||
         (PathMarkerLayer as Record<string, any>).defaultProps.markerLayerProps,
 
-      nebulaLayer: this,
+      nebulaLayer: this
     });
   }
 }

package/src/lib/layers/texts-layer.ts

@@ -1,11 +1,15 @@
-import { TextLayer } from '@deck.gl/layers';
-import NebulaLayer from '../nebula-layer';
-import { toDeckColor } from '../../utils';
-import { PROJECTED_PIXEL_SIZE_MULTIPLIER } from '../constants';
-import DeckCache from '../deck-renderer/deck-cache';
-import { Color } from '../../types';
-
-export default class TextsLayer extends NebulaLayer {
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {TextLayer} from '@deck.gl/layers';
+import {NebulaLayer} from '../nebula-layer';
+import {toDeckColor} from '../../utils/utils';
+import {PROJECTED_PIXEL_SIZE_MULTIPLIER} from '../constants';
+import {DeckCache} from '../deck-renderer/deck-cache';
+import {Color} from '../../utils/types';
+
+export class TextsLayer extends NebulaLayer {
   deckCache: DeckCache<any, any>;
 
   constructor(config: Record<string, any>) {
@@ -13,11 +17,11 @@ export default class TextsLayer extends NebulaLayer {
     this.deckCache = new DeckCache(config.getData, (data) => config.toNebulaFeature(data));
   }
 
-  render({ nebula }: Record<string, any>): TextLayer {
+  render({nebula}: Record<string, any>): TextLayer {
     const defaultColor: Color = [0x0, 0x0, 0x0, 0xff];
-    const { objects, updateTrigger } = this.deckCache;
+    const {objects, updateTrigger} = this.deckCache;
 
-    const { zoom } = nebula.props.viewport;
+    const {zoom} = nebula.props.viewport;
 
     return new TextLayer({
       id: `texts-${this.id}`,
@@ -28,16 +32,16 @@ export default class TextsLayer extends NebulaLayer {
 
       getText: (nf: any) => nf.style.text,
       getPosition: (nf: any) => nf.geoJson.geometry.coordinates,
-      getColor: (nf: { style: { fillColor: Color } }) =>
+      getColor: (nf: {style: {fillColor: Color}}) =>
         toDeckColor(nf.style.fillColor) || defaultColor,
 
       // TODO: layer should offer option to scale with zoom
       sizeScale: 1 / Math.pow(2, 20 - zoom),
       getSize: PROJECTED_PIXEL_SIZE_MULTIPLIER,
 
-      updateTriggers: { all: updateTrigger },
+      updateTriggers: {all: updateTrigger},
 
-      nebulaLayer: this,
+      nebulaLayer: this
     });
   }
 }

package/src/lib/math.ts

@@ -1,4 +1,8 @@
-import { Position } from '../geojson-types';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
+import {Position} from '../utils/geojson-types';
 
 export function toDegree(radian: number): number {
   return (radian * 180) / Math.PI;

package/src/lib/{nebula.ts → nebula-core.ts}

@@ -1,13 +1,17 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import {EventEmitter} from 'eventemitter3';
 import {WebMercatorViewport} from '@deck.gl/core';
 
-import DeckDrawer from './deck-renderer/deck-drawer';
-import LayerMouseEvent from './layer-mouse-event';
-import NebulaLayer from './nebula-layer';
+import {DeckDrawer} from './deck-renderer/deck-drawer';
+import {LayerMouseEvent} from './layer-mouse-event';
+import {NebulaLayer} from './nebula-layer';
 
 const LOGGER_PREFIX = 'Nebula: ';
 
-export default class Nebula {
+export class NebulaCore {
   init(props: Record<string, any>) {
     this.props = props;
     this.wmViewport = new WebMercatorViewport(this.props.viewport);

package/src/lib/nebula-layer.ts

@@ -1,9 +1,13 @@
-import { EventEmitter } from 'eventemitter3';
-import { v4 } from 'uuid';
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
 
-import Feature from './feature';
+import {EventEmitter} from 'eventemitter3';
+import {v4} from 'uuid';
 
-export default class NebulaLayer extends EventEmitter {
+import {Feature} from './feature';
+
+export class NebulaLayer extends EventEmitter {
   getData: () => Record<string, any>[];
   toNebulaFeature: (data: Record<string, any>) => Feature;
   id: string;
@@ -15,7 +19,7 @@ export default class NebulaLayer extends EventEmitter {
   enableSelection = false;
   //
 
-  constructor({ getData, on, toNebulaFeature }: Record<string, any>) {
+  constructor({getData, on, toNebulaFeature}: Record<string, any>) {
     super();
     this.id = v4();
     this.getData = getData;

package/src/lib/style.ts

@@ -1,9 +1,13 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 // Describes the arrow style of polylines
 export const ArrowStyles = {
   NONE: 0,
   FORWARD: 1,
   BACKWARD: 2,
-  BOTH: 3,
+  BOTH: 3
 };
 
 export const DEFAULT_ARROWS = 1;
@@ -18,5 +22,5 @@ export const DEFAULT_STYLE = {
   lineWidthMeters: 5,
   outlineRadiusMeters: 0,
   opacity: 1,
-  zLevel: 0,
+  zLevel: 0
 };

package/src/mode-handlers/composite-mode-handler.ts

@@ -1,11 +1,11 @@
-import { FeatureCollection, Feature, Position } from '../geojson-types';
+import {FeatureCollection, Feature, Position} from '../utils/geojson-types';
 import {
   ClickEvent,
   PointerMoveEvent,
   StartDraggingEvent,
-  StopDraggingEvent,
+  StopDraggingEvent
 } from '../edit-modes/types';
-import { ModeHandler, EditAction, EditHandle } from './mode-handler';
+import {ModeHandler, EditAction, EditHandle} from './mode-handler';
 
 // TODO edit-modes: delete handlers once EditMode fully implemented
 export class CompositeModeHandler extends ModeHandler {
@@ -32,7 +32,7 @@ export class CompositeModeHandler extends ModeHandler {
       }
     }
 
-    return result as T;
+    return result;
   }
 
   setFeatureCollection(featureCollection: FeatureCollection): void {
@@ -83,7 +83,7 @@ export class CompositeModeHandler extends ModeHandler {
     ) as any; // TODO
   }
 
-  getCursor({ isDragging }: { isDragging: boolean }): string {
-    return this._coalesce((handler) => handler.getCursor({ isDragging })) as any; // TODO
+  getCursor({isDragging}: {isDragging: boolean}): string {
+    return this._coalesce((handler) => handler.getCursor({isDragging})) as any; // TODO
   }
 }

package/src/mode-handlers/draw-90degree-polygon-handler.ts

@@ -1,17 +1,21 @@
+// deck.gl-community
+// SPDX-License-Identifier: MIT
+// Copyright (c) vis.gl contributors
+
 import destination from '@turf/destination';
 import bearing from '@turf/bearing';
 import lineIntersect from '@turf/line-intersect';
 import turfDistance from '@turf/distance';
-import { point, lineString } from '@turf/helpers';
-import { Polygon, Position } from '../geojson-types';
-import { generatePointsParallelToLinePoints } from '../utils';
-import { ClickEvent, PointerMoveEvent } from '../edit-modes/types';
+import {point, lineString} from '@turf/helpers';
+import {Polygon, Position} from '../utils/geojson-types';
+import {generatePointsParallelToLinePoints} from '../utils/utils';
+import {ClickEvent, PointerMoveEvent} from '../edit-modes/types';
 import {
   EditAction,
   EditHandle,
   ModeHandler,
   getPickedEditHandle,
-  getEditHandlesForGeometry,
+  getEditHandlesForGeometry
 } from './mode-handler';
 
 // TODO edit-modes: delete handlers once EditMode fully implemented
@@ -35,12 +39,12 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
     return handles;
   }
 
-  handlePointerMove({ mapCoords }: PointerMoveEvent): {
+  handlePointerMove({mapCoords}: PointerMoveEvent): {
     editAction: EditAction | null | undefined;
     cancelMapPan: boolean;
   } {
     const clickSequence = this.getClickSequence();
-    const result = { editAction: null, cancelMapPan: false };
+    const result = {editAction: null, cancelMapPan: false};
 
     if (clickSequence.length === 0) {
       // nothing to do yet
@@ -71,8 +75,8 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
         type: 'Feature',
         geometry: {
           type: 'LineString',
-          coordinates: [...clickSequence, p3],
-        },
+          coordinates: [...clickSequence, p3]
+        }
       });
     } else {
       // Draw a Polygon connecting all the clicked points with the hovered point
@@ -80,8 +84,8 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
         type: 'Feature',
         geometry: {
           type: 'Polygon',
-          coordinates: [[...clickSequence, p3, clickSequence[0]]],
-        },
+          coordinates: [[...clickSequence, p3, clickSequence[0]]]
+        }
       });
     }
 
@@ -91,7 +95,7 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
   handleClick(event: ClickEvent): EditAction | null | undefined {
     super.handleClick(event);
 
-    const { picks } = event;
+    const {picks} = event;
     const tentativeFeature = this.getTentativeFeature();
 
     let editAction: EditAction | null | undefined = null;
@@ -109,7 +113,7 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
         // They clicked the first or last point (or double-clicked), so complete the polygon
         const polygonToAdd: Polygon = {
           type: 'Polygon',
-          coordinates: this.finalizedCoordinates([...polygon.coordinates[0]]),
+          coordinates: this.finalizedCoordinates([...polygon.coordinates[0]])
         };
 
         this.resetClickSequence();
@@ -127,7 +131,7 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
       pointerDownPicks: null,
       pointerDownScreenCoords: null,
       pointerDownMapCoords: null,
-      sourceEvent: null,
+      sourceEvent: null
     } as unknown as PointerMoveEvent;
 
     this.handlePointerMove(fakePointerMoveEvent);
@@ -164,7 +168,7 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
       const p4 = coordinates[coordinates.length - 4];
       const angle2 = bearing(p3, p4);
 
-      const angles = { first: [] as number[], second: [] as number[] };
+      const angles = {first: [] as number[], second: [] as number[]};
       // calculate 3 right angle points for first and last points in lineString
       [1, 2, 3].forEach((factor) => {
         const newAngle1 = angle1 + factor * 90;
@@ -180,17 +184,17 @@ export class Draw90DegreePolygonHandler extends ModeHandler {
       [0, 1, 2].forEach((indexFirst) => {
         const line1 = lineString([
           p1,
-          destination(p1, distance, angles.first[indexFirst]).geometry.coordinates,
+          destination(p1, distance, angles.first[indexFirst]).geometry.coordinates
         ]);
         [0, 1, 2].forEach((indexSecond) => {
           const line2 = lineString([
             p3,
-            destination(p3, distance, angles.second[indexSecond]).geometry.coordinates,
+            destination(p3, distance, angles.second[indexSecond]).geometry.coordinates
           ]);
           const fc = lineIntersect(line1, line2);
           if (fc && fc.features.length) {
             // found the intersect point
-            pt = fc.features[0].geometry.coordinates as Position;
+            pt = fc.features[0].geometry.coordinates;
           }
         });
       });