@scoova/mgl 1.0.0

package/src/ui/map_tests/map_feature_state.test.ts

@@ -0,0 +1,421 @@
+import {createMap, beforeMapTest, createStyleSource} from '../../util/test/util';
+
+beforeEach(() => {
+    beforeMapTest();
+    global.fetch = null;
+});
+
+describe('#setFeatureState', () => {
+    test('sets state', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 12345}, {'hover': true});
+            const fState = map.getFeatureState({source: 'geojson', id: 12345});
+            expect(fState.hover).toBe(true);
+            done();
+        });
+    }));
+    test('works with string ids', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 'foo'}, {'hover': true});
+            const fState = map.getFeatureState({source: 'geojson', id: 'foo'});
+            expect(fState.hover).toBe(true);
+            done();
+        });
+    }));
+    test('parses feature id as an int', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: '12345'}, {'hover': true});
+            const fState = map.getFeatureState({source: 'geojson', id: 12345});
+            expect(fState.hover).toBe(true);
+            done();
+        });
+    }));
+    test('throw before loaded', () => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        expect(() => {
+            map.setFeatureState({source: 'geojson', id: 12345}, {'hover': true});
+        }).toThrow(Error);
+    });
+    test('fires an error if source not found', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.on('error', ({error}) => {
+                expect(error.message).toMatch(/source/);
+                done();
+            });
+            map.setFeatureState({source: 'vector', id: 12345}, {'hover': true});
+        });
+    }));
+    test('fires an error if sourceLayer not provided for a vector source', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'vector': {
+                        'type': 'vector',
+                        'tiles': ['http://example.com/{z}/{x}/{y}.png']
+                    }
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.on('error', ({error}) => {
+                expect(error.message).toMatch(/sourceLayer/);
+                done();
+            });
+            (map as any).setFeatureState({source: 'vector', sourceLayer: 0, id: 12345}, {'hover': true});
+        });
+    }));
+    test('fires an error if id not provided', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'vector': {
+                        'type': 'vector',
+                        'tiles': ['http://example.com/{z}/{x}/{y}.png']
+                    }
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.on('error', ({error}) => {
+                expect(error.message).toMatch(/id/);
+                done();
+            });
+            (map as any).setFeatureState({source: 'vector', sourceLayer: '1'}, {'hover': true});
+        });
+    }));
+});
+
+describe('#removeFeatureState', () => {
+
+    test('accepts "0" id', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 0}, {'hover': true, 'click': true});
+            map.removeFeatureState({source: 'geojson', id: 0}, 'hover');
+            const fState = map.getFeatureState({source: 'geojson', id: 0});
+            expect(fState.hover).toBeUndefined();
+            expect(fState.click).toBe(true);
+            done();
+        });
+    }));
+    test('accepts string id', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 'foo'}, {'hover': true, 'click': true});
+            map.removeFeatureState({source: 'geojson', id: 'foo'}, 'hover');
+            const fState = map.getFeatureState({source: 'geojson', id: 'foo'});
+            expect(fState.hover).toBeUndefined();
+            expect(fState.click).toBe(true);
+            done();
+        });
+    }));
+    test('remove specific state property', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 12345}, {'hover': true});
+            map.removeFeatureState({source: 'geojson', id: 12345}, 'hover');
+            const fState = map.getFeatureState({source: 'geojson', id: 12345});
+            expect(fState.hover).toBeUndefined();
+            done();
+        });
+    }));
+    test('remove all state properties of one feature', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 1}, {'hover': true, 'foo': true});
+            map.removeFeatureState({source: 'geojson', id: 1});
+
+            const fState = map.getFeatureState({source: 'geojson', id: 1});
+            expect(fState.hover).toBeUndefined();
+            expect(fState.foo).toBeUndefined();
+
+            done();
+        });
+    }));
+    test('remove properties for zero-based feature IDs.', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 0}, {'hover': true, 'foo': true});
+            map.removeFeatureState({source: 'geojson', id: 0});
+
+            const fState = map.getFeatureState({source: 'geojson', id: 0});
+            expect(fState.hover).toBeUndefined();
+            expect(fState.foo).toBeUndefined();
+
+            done();
+        });
+    }));
+    test('other properties persist when removing specific property', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 1}, {'hover': true, 'foo': true});
+            map.removeFeatureState({source: 'geojson', id: 1}, 'hover');
+
+            const fState = map.getFeatureState({source: 'geojson', id: 1});
+            expect(fState.foo).toBe(true);
+
+            done();
+        });
+    }));
+    test('remove all state properties of all features in source', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 1}, {'hover': true, 'foo': true});
+            map.setFeatureState({source: 'geojson', id: 2}, {'hover': true, 'foo': true});
+
+            map.removeFeatureState({source: 'geojson'});
+
+            const fState1 = map.getFeatureState({source: 'geojson', id: 1});
+            expect(fState1.hover).toBeUndefined();
+            expect(fState1.foo).toBeUndefined();
+
+            const fState2 = map.getFeatureState({source: 'geojson', id: 2});
+            expect(fState2.hover).toBeUndefined();
+            expect(fState2.foo).toBeUndefined();
+
+            done();
+        });
+    }));
+    test('specific state deletion should not interfere with broader state deletion', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 1}, {'hover': true, 'foo': true});
+            map.setFeatureState({source: 'geojson', id: 2}, {'hover': true, 'foo': true});
+
+            map.removeFeatureState({source: 'geojson', id: 1});
+            map.removeFeatureState({source: 'geojson', id: 1}, 'foo');
+
+            const fState1 = map.getFeatureState({source: 'geojson', id: 1});
+            expect(fState1.hover).toBeUndefined();
+
+            map.setFeatureState({source: 'geojson', id: 1}, {'hover': true, 'foo': true});
+            map.removeFeatureState({source: 'geojson'});
+            map.removeFeatureState({source: 'geojson', id: 1}, 'foo');
+
+            const fState2 = map.getFeatureState({source: 'geojson', id: 2});
+            expect(fState2.hover).toBeUndefined();
+
+            map.setFeatureState({source: 'geojson', id: 2}, {'hover': true, 'foo': true});
+            map.removeFeatureState({source: 'geojson'});
+            map.removeFeatureState({source: 'geojson', id: 2}, 'foo');
+
+            const fState3 = map.getFeatureState({source: 'geojson', id: 2});
+            expect(fState3.hover).toBeUndefined();
+
+            done();
+        });
+    }));
+    test('add/remove and remove/add state', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.setFeatureState({source: 'geojson', id: 12345}, {'hover': true});
+
+            map.removeFeatureState({source: 'geojson', id: 12345});
+            map.setFeatureState({source: 'geojson', id: 12345}, {'hover': true});
+
+            const fState1 = map.getFeatureState({source: 'geojson', id: 12345});
+            expect(fState1.hover).toBe(true);
+
+            map.removeFeatureState({source: 'geojson', id: 12345});
+
+            const fState2 = map.getFeatureState({source: 'geojson', id: 12345});
+            expect(fState2.hover).toBeUndefined();
+
+            done();
+        });
+    }));
+    test('throw before loaded', () => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        expect(() => {
+            (map as any).removeFeatureState({source: 'geojson', id: 12345}, {'hover': true});
+        }).toThrow(Error);
+    });
+    test('fires an error if source not found', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'geojson': createStyleSource()
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.on('error', ({error}) => {
+                expect(error.message).toMatch(/source/);
+                done();
+            });
+            (map as any).removeFeatureState({source: 'vector', id: 12345}, {'hover': true});
+        });
+    }));
+    test('fires an error if sourceLayer not provided for a vector source', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'vector': {
+                        'type': 'vector',
+                        'tiles': ['http://example.com/{z}/{x}/{y}.png']
+                    }
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.on('error', ({error}) => {
+                expect(error.message).toMatch(/sourceLayer/);
+                done();
+            });
+            (map as any).removeFeatureState({source: 'vector', sourceLayer: 0, id: 12345}, {'hover': true});
+        });
+    }));
+    test('fires an error if state property is provided without a feature id', () => new Promise<void>(done => {
+        const map = createMap({
+            style: {
+                'version': 8,
+                'sources': {
+                    'vector': {
+                        'type': 'vector',
+                        'tiles': ['http://example.com/{z}/{x}/{y}.png']
+                    }
+                },
+                'layers': []
+            }
+        });
+        map.on('load', () => {
+            map.on('error', ({error}) => {
+                expect(error.message).toMatch(/id/);
+                done();
+            });
+            (map as any).removeFeatureState({source: 'vector', sourceLayer: '1'}, {'hover': true});
+        });
+    }));
+});

package/src/ui/map_tests/map_images.test.ts

@@ -0,0 +1,175 @@
+import {createMap, beforeMapTest} from '../../util/test/util';
+import {StyleImageInterface} from '../../style/style_image';
+
+beforeEach(() => {
+    beforeMapTest();
+    global.fetch = null;
+});
+
+test('#listImages', () => new Promise<void>(done => {
+    const map = createMap();
+
+    map.on('load', () => {
+        expect(map.listImages()).toHaveLength(0);
+
+        map.addImage('img', {width: 1, height: 1, data: new Uint8Array(4)});
+
+        const images = map.listImages();
+        expect(images).toHaveLength(1);
+        expect(images[0]).toBe('img');
+        done();
+    });
+}));
+
+test('#listImages throws an error if called before "load"', () => {
+    const map = createMap();
+    expect(() => {
+        map.listImages();
+    }).toThrow(Error);
+});
+
+test('map fires `styleimagemissing` for missing icons', async () => {
+    const map = createMap();
+
+    const id = 'missing-image';
+
+    const sampleImage = {width: 2, height: 1, data: new Uint8Array(8)};
+
+    let called: string;
+    map.on('styleimagemissing', e => {
+        map.addImage(e.id, sampleImage);
+        called = e.id;
+    });
+
+    expect(map.hasImage(id)).toBeFalsy();
+
+    const generatedImage = await map.style.imageManager.getImages([id]);
+    expect(generatedImage[id].data.width).toEqual(sampleImage.width);
+    expect(generatedImage[id].data.height).toEqual(sampleImage.height);
+    expect(generatedImage[id].data.data).toEqual(sampleImage.data);
+    expect(called).toBe(id);
+    expect(map.hasImage(id)).toBeTruthy();
+});
+
+test('map getImage matches addImage, uintArray', () => {
+    const map = createMap();
+    const id = 'add-get-uint';
+    const inputImage = {width: 2, height: 1, data: new Uint8Array(8)};
+
+    map.addImage(id, inputImage);
+    expect(map.hasImage(id)).toBeTruthy();
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toEqual(inputImage.width);
+    expect(gotImage.data.height).toEqual(inputImage.height);
+    expect(gotImage.sdf).toBe(false);
+});
+
+test('map getImage matches addImage, uintClampedArray', () => {
+    const map = createMap();
+    const id = 'add-get-uint-clamped';
+    const inputImage = {width: 1, height: 2, data: new Uint8ClampedArray(8)};
+
+    map.addImage(id, inputImage);
+    expect(map.hasImage(id)).toBeTruthy();
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toEqual(inputImage.width);
+    expect(gotImage.data.height).toEqual(inputImage.height);
+    expect(gotImage.sdf).toBe(false);
+});
+
+test('map getImage matches addImage, ImageData', () => {
+    const map = createMap();
+    const id = 'add-get-image-data';
+    const inputImage = new ImageData(1, 3);
+
+    map.addImage(id, inputImage);
+    expect(map.hasImage(id)).toBeTruthy();
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toEqual(inputImage.width);
+    expect(gotImage.data.height).toEqual(inputImage.height);
+    expect(gotImage.sdf).toBe(false);
+});
+
+test('map getImage matches addImage, StyleImageInterface uint', () => {
+    const map = createMap();
+    const id = 'add-get-style-image-iface-uint';
+    const inputImage: StyleImageInterface = {
+        width: 3,
+        height: 1,
+        data: new Uint8Array(12)
+    };
+
+    map.addImage(id, inputImage);
+    expect(map.hasImage(id)).toBeTruthy();
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toEqual(inputImage.width);
+    expect(gotImage.data.height).toEqual(inputImage.height);
+    expect(gotImage.sdf).toBe(false);
+});
+
+test('map getImage matches addImage, StyleImageInterface clamped', () => {
+    const map = createMap();
+    const id = 'add-get-style-image-iface-clamped';
+    const inputImage: StyleImageInterface = {
+        width: 4,
+        height: 1,
+        data: new Uint8ClampedArray(16)
+    };
+
+    map.addImage(id, inputImage);
+    expect(map.hasImage(id)).toBeTruthy();
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toEqual(inputImage.width);
+    expect(gotImage.data.height).toEqual(inputImage.height);
+    expect(gotImage.sdf).toBe(false);
+});
+
+test('map getImage matches addImage, StyleImageInterface SDF', () => {
+    const map = createMap();
+    const id = 'add-get-style-image-iface-sdf';
+    const inputImage: StyleImageInterface = {
+        width: 5,
+        height: 1,
+        data: new Uint8Array(20)
+    };
+
+    map.addImage(id, inputImage, {sdf: true});
+    expect(map.hasImage(id)).toBeTruthy();
+
+    const gotImage = map.getImage(id);
+    expect(gotImage.data.width).toEqual(inputImage.width);
+    expect(gotImage.data.height).toEqual(inputImage.height);
+    expect(gotImage.sdf).toBe(true);
+});
+
+test('map does not fire `styleimagemissing` for empty icon values', () => new Promise<void>((done) => {
+    const map = createMap();
+
+    map.on('load', () => {
+        map.on('idle', () => {
+            done();
+        });
+
+        map.addSource('foo', {
+            type: 'geojson',
+            data: {type: 'Point', coordinates: [0, 0]}
+        });
+        map.addLayer({
+            id: 'foo',
+            type: 'symbol',
+            source: 'foo',
+            layout: {
+                'icon-image': ['case', true, '', '']
+            }
+        });
+
+        map.on('styleimagemissing', ({id}) => {
+            throw new Error(`styleimagemissing fired for value ${id}`);
+        });
+    });
+}));