mapbox-gl-controls - npm Package Compare versions

Comparing version 2.3.1 to 2.3.2

lib/ImageControl/IImage.d.ts

@@ -10,3 +10,4 @@ import { FillLayer, GeoJSONSourceRaw, ImageSourceRaw, Map, RasterLayer } from 'mapbox-gl';
     position: ImagePosition;
-    load(file: File): Promise<unknown>;
+    loadFile(file: File): Promise<unknown>;
+    loadUrl(url: string): Promise<unknown>;
     setInitialPosition(map: Map): void;
@@ -20,3 +21,3 @@ get coordinates(): number[][];
     };
-    get shapeSource(): {
+    get polygonSource(): {
         id: string;
@@ -23,0 +24,0 @@ source: GeoJSONSourceRaw;

lib/ImageControl/IImage.js

 class IImage {
-    load(file) {
+    loadFile(file) {
         return new Promise(((resolve, reject) => {
@@ -21,2 +21,16 @@ const reader = new FileReader();
     }
+    loadUrl(url) {
+        return new Promise(((resolve, reject) => {
+            const node = new Image();
+            node.onload = () => {
+                this.id = url.split('/').pop();
+                this.url = url;
+                this.width = node.width;
+                this.height = node.height;
+                resolve(this);
+            };
+            node.onerror = reject;
+            node.src = url;
+        }));
+    }
     setInitialPosition(map) {
@@ -74,5 +88,5 @@ if (!this.width || !this.height)
     }
-    get shapeSource() {
+    get polygonSource() {
         return {
-            id: `${this.id}-shape`,
+            id: `${this.id}-polygon`,
             source: { type: 'geojson', data: this.asPolygon },
@@ -99,3 +113,3 @@ };
             type: 'fill',
-            source: this.shapeSource.id,
+            source: this.polygonSource.id,
             paint: { 'fill-opacity': 0 },
@@ -102,0 +116,0 @@ });

lib/ImageControl/ImageControl.d.ts

@@ -18,2 +18,5 @@ import { MapMouseEvent } from 'mapbox-gl';
     onFileInputChange(): void;
+    addImage(data: File | string, options?: {
+        position?: ImagePosition;
+    }): Promise<IImage>;
     drawImage(image: IImage): void;
@@ -27,3 +30,4 @@ redraw(): void;
     updateImageSource(position: ImagePosition): void;
+    keyDownListener(event: KeyboardEvent): void;
     onAddControl(): void;
 }

lib/ImageControl/ImageControl.js

@@ -30,2 +30,3 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
         this.onFileInputChange = this.onFileInputChange.bind(this);
+        this.keyDownListener = this.keyDownListener.bind(this);
     }
@@ -42,15 +43,34 @@ insert() {
         Array.from(this.fileInput.files).forEach((file, index) => __awaiter(this, void 0, void 0, function* () {
+            const image = yield this.addImage(file);
+            if (this.fileInput.files.length - 1 === index)
+                this.selectImage(image.id);
+        }));
+    }
+    addImage(data, options = {}) {
+        return __awaiter(this, void 0, void 0, function* () {
             const image = new IImage();
-            yield image.load(file);
-            image.setInitialPosition(this.map);
+            if (typeof data === 'string') {
+                yield image.loadUrl(data);
+            }
+            else if (data) {
+                yield image.loadFile(data);
+            }
+            else {
+                throw Error('file or url is required');
+            }
+            if (options.position) {
+                image.position = options.position;
+            }
+            else {
+                image.setInitialPosition(this.map);
+            }
             this.images.push(image);
             this.drawImage(image);
             this.map.fire('image.add', image);
-            if (this.fileInput.files.length - 1 === index)
-                this.selectImage(image.id);
-        }));
+            return image;
+        });
     }
     drawImage(image) {
         this.map.addSource(image.imageSource.id, image.imageSource.source);
-        this.map.addSource(image.shapeSource.id, image.shapeSource.source);
+        this.map.addSource(image.polygonSource.id, image.polygonSource.source);
         this.map.addSource(image.cornersSource.id, image.cornersSource.source);
@@ -103,2 +123,3 @@ this.map.addLayer(image.rasterLayer);
         this.map.fire('image.select', this.selectedImage);
+        document.addEventListener('keydown', this.keyDownListener);
     }
@@ -117,2 +138,3 @@ deselectImage() {
         this.editMode = null;
+        document.removeEventListener('keydown', this.keyDownListener);
     }
@@ -123,6 +145,11 @@ updateImageSource(position) {
         this.map.getSource(selectedImage.imageSource.id).setCoordinates(selectedImage.coordinates);
-        this.map.getSource(selectedImage.shapeSource.id).setData(selectedImage.asPolygon);
+        this.map.getSource(selectedImage.polygonSource.id).setData(selectedImage.asPolygon);
         this.map.getSource(selectedImage.cornersSource.id).setData(selectedImage.asPoints);
         this.map.fire('image.update', this.selectedImage);
     }
+    keyDownListener(event) {
+        if (event.key === 'Escape') {
+            this.deselectImage();
+        }
+    }
     onAddControl() {
@@ -129,0 +156,0 @@ if (this.map.isStyleLoaded()) {

lib/ImageControl/moveable.js

@@ -7,4 +7,4 @@ import { LngLat } from 'mapbox-gl';
     let startPosition = null;
-    map.addLayer(Object.assign(Object.assign({}, contourLayer), { source: image.shapeSource.id }));
-    map.addLayer(Object.assign(Object.assign({}, shadowLayer), { source: image.shapeSource.id }));
+    map.addLayer(Object.assign(Object.assign({}, contourLayer), { source: image.polygonSource.id }));
+    map.addLayer(Object.assign(Object.assign({}, shadowLayer), { source: image.polygonSource.id }));
     function onPointerMove(event) {
@@ -11,0 +11,0 @@ const currentPosition = event.lngLat;

lib/ImageControl/resizeable.js

@@ -18,3 +18,3 @@ import { LngLat } from 'mapbox-gl';
     let currentIndex;
-    map.addLayer(Object.assign(Object.assign({}, contourLayer), { source: image.shapeSource.id }));
+    map.addLayer(Object.assign(Object.assign({}, contourLayer), { source: image.polygonSource.id }));
     map.addLayer(Object.assign(Object.assign({}, cornersLayer), { source: image.cornersSource.id }));
@@ -21,0 +21,0 @@ function onPointerMove(event) {

package.json

 {
   "name": "mapbox-gl-controls",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "main": "./lib/index.js",
@@ -5,0 +5,0 @@ "description": "Controls for mapbox-gl",

src/ImageControl/IImage.ts

@@ -12,3 +12,3 @@ import { FillLayer, GeoJSONSourceRaw, ImageSourceRaw, Map, RasterLayer } from 'mapbox-gl';
 
-  load(file: File) {
+  loadFile(file: File) {
     return new Promise(((resolve, reject) => {
@@ -37,2 +37,18 @@ const reader = new FileReader();
 
+  loadUrl(url: string) {
+    return new Promise(((resolve, reject) => {
+      const node = new Image();
+      node.onload = () => {
+        this.id = url.split('/').pop();
+        this.url = url;
+        this.width = node.width;
+        this.height = node.height;
+        resolve(this);
+      };
+
+      node.onerror = reject;
+      node.src = url;
+    }));
+  }
+
   setInitialPosition(map: Map) {
@@ -94,5 +110,5 @@ if (!this.width || !this.height) throw Error('image is not loaded');
 
-  get shapeSource(): { id: string, source: GeoJSONSourceRaw } {
+  get polygonSource(): { id: string, source: GeoJSONSourceRaw } {
     return {
-      id: `${this.id}-shape`,
+      id: `${this.id}-polygon`,
       source: { type: 'geojson', data: this.asPolygon },
@@ -122,3 +138,3 @@ };
       type: 'fill',
-      source: this.shapeSource.id,
+      source: this.polygonSource.id,
       paint: { 'fill-opacity': 0 },
@@ -125,0 +141,0 @@ });

src/ImageControl/ImageControl.ts

@@ -32,2 +32,3 @@ import { GeoJSONSource, ImageSource, MapMouseEvent } from 'mapbox-gl';
     this.onFileInputChange = this.onFileInputChange.bind(this);
+    this.keyDownListener = this.keyDownListener.bind(this);
   }
@@ -46,8 +47,3 @@
     Array.from(this.fileInput.files).forEach(async (file, index) => {
-      const image = new IImage();
-      await image.load(file);
-      image.setInitialPosition(this.map);
-      this.images.push(image);
-      this.drawImage(image);
-      this.map.fire('image.add', image);
+      const image = await this.addImage(file);
       if (this.fileInput.files.length - 1 === index) this.selectImage(image.id);
@@ -57,5 +53,25 @@ });
 
+  async addImage(data: File | string, options: { position?: ImagePosition } = {}): Promise<IImage> {
+    const image = new IImage();
+    if (typeof data === 'string') {
+      await image.loadUrl(data);
+    } else if (data) {
+      await image.loadFile(data);
+    } else {
+      throw Error('file or url is required');
+    }
+    if (options.position) {
+      image.position = options.position;
+    } else {
+      image.setInitialPosition(this.map);
+    }
+    this.images.push(image);
+    this.drawImage(image);
+    this.map.fire('image.add', image);
+    return image;
+  }
+
   drawImage(image: IImage) {
     this.map.addSource(image.imageSource.id, image.imageSource.source);
-    this.map.addSource(image.shapeSource.id, image.shapeSource.source);
+    this.map.addSource(image.polygonSource.id, image.polygonSource.source);
     this.map.addSource(image.cornersSource.id, image.cornersSource.source);
@@ -110,2 +126,3 @@ this.map.addLayer(image.rasterLayer);
     this.map.fire('image.select', this.selectedImage);
+    document.addEventListener('keydown', this.keyDownListener);
   }
@@ -123,2 +140,3 @@
     this.editMode = null;
+    document.removeEventListener('keydown', this.keyDownListener);
   }
@@ -130,3 +148,3 @@
     (this.map.getSource(selectedImage.imageSource.id) as ImageSource).setCoordinates(selectedImage.coordinates);
-    (this.map.getSource(selectedImage.shapeSource.id) as GeoJSONSource).setData(selectedImage.asPolygon);
+    (this.map.getSource(selectedImage.polygonSource.id) as GeoJSONSource).setData(selectedImage.asPolygon);
     (this.map.getSource(selectedImage.cornersSource.id) as GeoJSONSource).setData(selectedImage.asPoints);
@@ -136,2 +154,8 @@ this.map.fire('image.update', this.selectedImage);
 
+  keyDownListener(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+      this.deselectImage();
+    }
+  }
+
   onAddControl() {
@@ -138,0 +162,0 @@ if (this.map.isStyleLoaded()) {

src/ImageControl/moveable.ts

@@ -10,4 +10,4 @@ import { LngLat, Map, MapLayerMouseEvent, MapMouseEvent } from 'mapbox-gl';
 
-  map.addLayer({ ...contourLayer, source: image.shapeSource.id });
-  map.addLayer({ ...shadowLayer, source: image.shapeSource.id });
+  map.addLayer({ ...contourLayer, source: image.polygonSource.id });
+  map.addLayer({ ...shadowLayer, source: image.polygonSource.id });
 
@@ -14,0 +14,0 @@ function onPointerMove(event: MapMouseEvent) {

src/ImageControl/resizeable.ts

@@ -25,3 +25,3 @@ import { LngLat, Map, MapLayerMouseEvent, MapMouseEvent } from 'mapbox-gl';
 
-  map.addLayer({ ...contourLayer, source: image.shapeSource.id });
+  map.addLayer({ ...contourLayer, source: image.polygonSource.id });
   map.addLayer({ ...cornersLayer, source: image.cornersSource.id });
@@ -28,0 +28,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168270

increased by2.36%

Lines of code

3025

increased by2.79%

No dependency changes