add types for svg-icon-layer

Signed-off-by: Daria Terekhova <daria.terekhova@actionengine.com>

src/deckgl-layers/svg-icon-layer/scatterplot-icon-layer.ts

@@ -0,0 +1,63 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {ScatterplotLayer, ScatterplotLayerProps} from '@deck.gl/layers';
+import {Geometry, Model} from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+
+const DEFAULT_POS = [-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0];
+
+export interface ScatterplotIconLayerProps extends ScatterplotLayerProps<any> {
+  iconGeometry: number;
+}
+
+export default class ScatterplotIconLayer extends ScatterplotLayer<any, ScatterplotIconLayerProps> {
+  _getModel(gl: WebGLRenderingContext) {
+    // use default scatterplot shaders
+    const shaders = this.getShaders(undefined);
+
+    const {iconGeometry} = this.props;
+
+    const geometry = iconGeometry
+      ? new Geometry({
+          drawMode: GL.TRIANGLES,
+          attributes: {
+            positions: new Float32Array(iconGeometry)
+          }
+        })
+      : new Geometry({
+          drawMode: GL.TRIANGLE_FAN,
+          attributes: {
+            positions: new Float32Array(DEFAULT_POS)
+          }
+        });
+
+    return new Model(gl, {
+      ...shaders,
+      id: this.props.id,
+      geometry,
+      isInstanced: true,
+      // @ts-ignore
+      shaderCache: this.context.shaderCache
+    });
+  }
+}
+
+ScatterplotIconLayer.layerName = 'ScatterplotIconLayer';

src/deckgl-layers/svg-icon-layer/svg-icon-layer.ts

@@ -0,0 +1,91 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import {CompositeLayer} from '@deck.gl/core';
+import {CompositeLayerProps} from '@deck.gl/core/lib/composite-layer';
+import ScatterplotIconLayer from './scatterplot-icon-layer';
+
+// default icon geometry is a square
+const DEFAULT_ICON_GEOMETRY = [1, 1, 0, 1, -1, 0, -1, -1, 0, -1, -1, 0, -1, 1, 0, 1, 1, 0];
+
+const defaultProps = {
+  getIconGeometry: (iconId: string) => DEFAULT_ICON_GEOMETRY,
+  getIcon: (d: {icon: string}) => d.icon
+};
+
+export interface SvgIconLayerProps extends CompositeLayerProps<any> {
+  getIconGeometry: (i: string) => number[];
+  getIcon: (d: {icon: string}) => string;
+}
+
+export default class SvgIconLayer extends CompositeLayer<any, SvgIconLayerProps> {
+  // Must be defined
+  initializeState() {
+    this.state = {
+      data: {}
+    };
+  }
+
+  updateState({changeFlags}) {
+    if (changeFlags.dataChanged) {
+      this._extractSublayers();
+    }
+  }
+
+  _extractSublayers() {
+    const {data, getIconGeometry, getIcon} = this.props;
+
+    const iconLayers = {};
+    for (let i = 0; i < data.length; i++) {
+      const iconId = getIcon(data[i]);
+      iconLayers[iconId] = iconLayers[iconId] || {
+        id: iconId,
+        geometry: getIconGeometry(iconId) || DEFAULT_ICON_GEOMETRY,
+        data: []
+      };
+      iconLayers[iconId].data.push(data[i]);
+    }
+    this.setState({
+      data: Object.values(iconLayers)
+    });
+  }
+
+  renderLayers() {
+    const layerId = this.props.id;
+
+    const layers =
+      this.state.data &&
+      this.state.data.length &&
+      this.state.data.map(
+        ({id, data, geometry}) =>
+          new ScatterplotIconLayer({
+            ...this.props,
+            id: `${layerId}-${id}`,
+            data,
+            iconGeometry: geometry
+          })
+      );
+
+    return layers && layers.length > 0 ? layers : null;
+  }
+}
+
+SvgIconLayer.layerName = 'SvgIconLayer';
+SvgIconLayer.defaultProps = defaultProps;