From 040b7cf8b191a41113a707acbd34f929bfbc1cc7 Mon Sep 17 00:00:00 2001 From: Kyle Barron Date: Wed, 8 Nov 2023 18:26:06 -0500 Subject: [PATCH] Add text layer (#222) * alphabetize * Add columnlayer and textlayer to js models * Add text layer to python side * text layer updates * bump deck version --- lonboard/_serialization.py | 3 +- lonboard/experimental/_layer.py | 213 +++++++++++- lonboard/traits.py | 58 ++++ package-lock.json | 478 ++++++++++++++++++++++++- package.json | 2 +- src/model/layer.ts | 597 +++++++++++++++++++++++--------- 6 files changed, 1172 insertions(+), 179 deletions(-) diff --git a/lonboard/_serialization.py b/lonboard/_serialization.py index 141e1895..3be52b15 100644 --- a/lonboard/_serialization.py +++ b/lonboard/_serialization.py @@ -56,7 +56,7 @@ def serialize_float_accessor(data: Union[int, float, NDArray[np.floating]], obj) if data is None: return None - if isinstance(data, (int, float)): + if isinstance(data, (str, int, float)): return data assert isinstance(data, (pa.ChunkedArray, pa.Array)) @@ -75,5 +75,6 @@ def infer_rows_per_chunk(table: pa.Table) -> int: COLOR_SERIALIZATION = {"to_json": serialize_color_accessor} +# TODO: rename as it's used for text as well FLOAT_SERIALIZATION = {"to_json": serialize_float_accessor} TABLE_SERIALIZATION = {"to_json": serialize_table} diff --git a/lonboard/experimental/_layer.py b/lonboard/experimental/_layer.py index a64de37d..e53942b4 100644 --- a/lonboard/experimental/_layer.py +++ b/lonboard/experimental/_layer.py @@ -3,9 +3,15 @@ import pyarrow as pa import traitlets +from lonboard._constants import EXTENSION_NAME from lonboard._layer import BaseLayer from lonboard.experimental.traits import PointAccessor -from lonboard.traits import ColorAccessor, FloatAccessor, PyarrowTableTrait +from lonboard.traits import ( + ColorAccessor, + FloatAccessor, + PyarrowTableTrait, + TextAccessor, +) class ArcLayer(BaseLayer): @@ -70,8 +76,12 @@ class ArcLayer(BaseLayer): """ get_source_color = ColorAccessor() + """Source color of each object + """ get_target_color = ColorAccessor() + """Target color of each object + """ get_width = FloatAccessor() """The line width of each object, in units specified by `widthUnits`. @@ -84,6 +94,8 @@ class ArcLayer(BaseLayer): """ get_height = FloatAccessor() + """Height color of each object + """ get_tilt = FloatAccessor() """ @@ -112,3 +124,202 @@ def _validate_accessor_length(self, proposal): raise traitlets.TraitError("accessor must have same length as table") return proposal["value"] + + +class TextLayer(BaseLayer): + """Render text labels at given coordinates.""" + + _layer_type = traitlets.Unicode("text").tag(sync=True) + + table = PyarrowTableTrait(allowed_geometry_types={EXTENSION_NAME.POINT}) + + billboard = traitlets.Bool().tag(sync=True) + """If `true`, the text always faces camera. Otherwise the text faces up (z). + + - Type: `bool` + - Default: `True` + """ + + size_scale = traitlets.Any().tag(sync=True) + """Text size multiplier. + + - Type: `float`. + - Default: `1` + """ + + size_units = traitlets.Any().tag(sync=True) + """The units of the size, one of `'meters'`, `'common'`, and `'pixels'`. + default 'pixels'. See [unit + system](https://deck.gl/docs/developer-guide/coordinate-systems#supported-units). + + - Type: `str`, optional + - Default: `'pixels'` + """ + + size_min_pixels = traitlets.Any().tag(sync=True) + """ + The minimum size in pixels. When using non-pixel `sizeUnits`, this prop can be used + to prevent the icon from getting too small when zoomed out. + + - Type: `float`, optional + - Default: `0` + """ + + size_max_pixels = traitlets.Any().tag(sync=True) + """ + The maximum size in pixels. When using non-pixel `sizeUnits`, this prop can be used + to prevent the icon from getting too big when zoomed in. + + - Type: `float`, optional + - Default: `None` + """ + + # background = traitlets.Bool().tag(sync=True) + # """Whether to render background for the text blocks. + + # - Type: `bool` + # - Default: `False` + # """ + + get_background_color = ColorAccessor() + """Background color accessor. + + default [255, 255, 255, 255] + """ + + get_border_color = ColorAccessor() + """Border color accessor. + + default [0, 0, 0, 255] + """ + + get_border_width = FloatAccessor() + """Border width accessor. + + default 0 + """ + + background_padding = traitlets.Any().tag(sync=True) + """The padding of the background. + + - If an array of 2 is supplied, it is interpreted as `[padding_x, padding_y]` in + pixels. + - If an array of 4 is supplied, it is interpreted as `[padding_left, padding_top, + padding_right, padding_bottom]` in pixels. + + default [0, 0, 0, 0] + """ + + character_set = traitlets.Any().tag(sync=True) + """ + Specifies a list of characters to include in the font. If set to 'auto', will be + automatically generated from the data set. + + default (ASCII characters 32-128) + """ + + font_family = traitlets.Any().tag(sync=True) + """CSS font family + + default 'Monaco, monospace' + """ + + font_weight = traitlets.Any().tag(sync=True) + """CSS font weight + + default 'normal' + """ + + line_height = traitlets.Any().tag(sync=True) + """ + A unitless number that will be multiplied with the current text size to set the line + height. + """ + + outline_width = traitlets.Any().tag(sync=True) + """ + Width of outline around the text, relative to the text size. Only effective if + `fontSettings.sdf` is `true`. + + default 0 + """ + + outline_color = traitlets.Any().tag(sync=True) + """ + Color of outline around the text, in `[r, g, b, [a]]`. Each channel is a number + between 0-255 and `a` is 255 if not supplied. + + default [0, 0, 0, 255] + """ + + font_settings = traitlets.Any().tag(sync=True) + """ + Advance options for fine tuning the appearance and performance of the generated + shared `fontAtlas`. + """ + + word_break = traitlets.Any().tag(sync=True) + """ + Available options are `break-all` and `break-word`. A valid `maxWidth` has to be + provided to use `wordBreak`. + + default 'break-word' + """ + + max_width = traitlets.Any().tag(sync=True) + """ + A unitless number that will be multiplied with the current text size to set the + width limit of a string. + + If specified, when the text is longer than the width limit, it will be wrapped into + multiple lines using the strategy of `wordBreak`. + + default -1 + """ + + get_text = TextAccessor() + """Label text accessor""" + + # get_position = traitlets.Any().tag(sync=True) + # """Anchor position accessor""" + + # ?: Accessor; + + get_color = ColorAccessor() + """Label color accessor + + default [0, 0, 0, 255] + """ + + get_size = FloatAccessor() + """Label size accessor + + default 32 + """ + + get_angle = FloatAccessor() + """Label rotation accessor, in degrees + + default 0 + """ + + get_text_anchor = traitlets.Any().tag(sync=True) + """Horizontal alignment accessor + + default 'middle' + """ + # ?: Accessor; + + get_alignment_baseline = traitlets.Any().tag(sync=True) + """Vertical alignment accessor + + default 'center' + """ + # ?: Accessor; + + get_pixel_offset = traitlets.Any().tag(sync=True) + """Label offset from the anchor position, [x, y] in pixels + + default [0, 0] + """ + # ?: Accessor; diff --git a/lonboard/traits.py b/lonboard/traits.py index 65b29be2..f88eac1a 100644 --- a/lonboard/traits.py +++ b/lonboard/traits.py @@ -336,3 +336,61 @@ def validate(self, obj, value) -> Union[float, pa.ChunkedArray, pa.DoubleArray]: self.error(obj, value) assert False + + +class TextAccessor(FixedErrorTraitType): + """A representation of a deck.gl text accessor. + + Various input is allowed: + + - A `str`. This will be used as the value for all objects. + - A numpy `ndarray` with a string data type Each value in the array will be used as + the value for the object at the same row index. + - A pandas `Series` with a string data type. Each value in the array will be used as + the value for the object at the same row index. + - A pyarrow [`StringArray`][pyarrow.StringArray] or + [`ChunkedArray`][pyarrow.ChunkedArray] containing a `StringArray`. Each value in + the array will be used as the value for the object at the same row index. + """ + + default_value = "" + info_text = ( + "a string value or numpy ndarray or pandas Series or pyarrow array representing" + " an array of strings" + ) + + def __init__( + self: TraitType, + *args, + **kwargs: Any, + ) -> None: + super().__init__(*args, **kwargs) + self.tag(sync=True, **FLOAT_SERIALIZATION) + + def validate(self, obj, value) -> Union[float, pa.ChunkedArray, pa.DoubleArray]: + if isinstance(value, str): + return value + + # pandas Series + if ( + value.__class__.__module__.startswith("pandas") + and value.__class__.__name__ == "Series" + ): + # Cast pandas Series to pyarrow array + value = pa.array(value) + + if isinstance(value, np.ndarray): + value = pa.StringArray.from_pandas(value) + + if isinstance(value, (pa.ChunkedArray, pa.Array)): + if not pa.types.is_string(value.type): + self.error( + obj, + value, + info="String pyarrow array must be a string type.", + ) + + return value + + self.error(obj, value) + assert False diff --git a/package-lock.json b/package-lock.json index c17e5819..92fc4abc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@deck.gl/extensions": "^8.9.32", "@deck.gl/layers": "^8.9.32", "@deck.gl/react": "^8.9.32", - "@geoarrow/deck.gl-layers": "^0.3.0-beta.2", + "@geoarrow/deck.gl-layers": "^0.3.0-beta.4", "apache-arrow": "^13.0.0", "maplibre-gl": "^3.5.2", "parquet-wasm": "0.5.0", @@ -133,6 +133,39 @@ "gl-matrix": "^3.0.0" } }, + "node_modules/@deck.gl/geo-layers": { + "version": "8.9.32", + "resolved": "https://registry.npmjs.org/@deck.gl/geo-layers/-/geo-layers-8.9.32.tgz", + "integrity": "sha512-yJe96Z47qhdvnkN0u2DkDIAS2SGBS9XxWWT06lQpRIJnJl8PXStcHK0rvcZgdfMBW8INtcAfF8LnkEhqzbWnAQ==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.0.0", + "@loaders.gl/3d-tiles": "^3.4.13", + "@loaders.gl/gis": "^3.4.13", + "@loaders.gl/loader-utils": "^3.4.13", + "@loaders.gl/mvt": "^3.4.13", + "@loaders.gl/schema": "^3.4.13", + "@loaders.gl/terrain": "^3.4.13", + "@loaders.gl/tiles": "^3.4.13", + "@loaders.gl/wms": "^3.4.13", + "@luma.gl/constants": "^8.5.21", + "@luma.gl/experimental": "^8.5.21", + "@math.gl/core": "^3.6.2", + "@math.gl/culling": "^3.6.2", + "@math.gl/web-mercator": "^3.6.2", + "@types/geojson": "^7946.0.8", + "h3-js": "^3.7.0", + "long": "^3.2.0" + }, + "peerDependencies": { + "@deck.gl/core": "^8.0.0", + "@deck.gl/extensions": "^8.0.0", + "@deck.gl/layers": "^8.0.0", + "@deck.gl/mesh-layers": "^8.0.0", + "@loaders.gl/core": "^3.4.13", + "@luma.gl/core": "^8.0.0" + } + }, "node_modules/@deck.gl/layers": { "version": "8.9.32", "resolved": "https://registry.npmjs.org/@deck.gl/layers/-/layers-8.9.32.tgz", @@ -154,6 +187,23 @@ "@luma.gl/core": "^8.0.0" } }, + "node_modules/@deck.gl/mesh-layers": { + "version": "8.9.32", + "resolved": "https://registry.npmjs.org/@deck.gl/mesh-layers/-/mesh-layers-8.9.32.tgz", + "integrity": "sha512-6bsy54PrBHjZriEe3Rf1iBVAI8Afy3L1qAXqKemxYaH56rc5EYlrmD0E/zKcACikIRFmE7bgQz/i6hlSt7dBHg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.0.0", + "@loaders.gl/gltf": "^3.4.13", + "@luma.gl/constants": "^8.5.21", + "@luma.gl/experimental": "^8.5.21", + "@luma.gl/shadertools": "^8.5.21" + }, + "peerDependencies": { + "@deck.gl/core": "^8.0.0", + "@luma.gl/core": "^8.0.0" + } + }, "node_modules/@deck.gl/react": { "version": "8.9.32", "resolved": "https://registry.npmjs.org/@deck.gl/react/-/react-8.9.32.tgz", @@ -521,12 +571,13 @@ } }, "node_modules/@geoarrow/deck.gl-layers": { - "version": "0.3.0-beta.2", - "resolved": "https://registry.npmjs.org/@geoarrow/deck.gl-layers/-/deck.gl-layers-0.3.0-beta.2.tgz", - "integrity": "sha512-+kH8f3D99rOH89wC+izS3FcNwxN3S5BSyJKfkDpOyfUs4tcG/AUxpvtb9vjZICNzt35LRHDvmvt3XjqZQPsYjQ==", + "version": "0.3.0-beta.4", + "resolved": "https://registry.npmjs.org/@geoarrow/deck.gl-layers/-/deck.gl-layers-0.3.0-beta.4.tgz", + "integrity": "sha512-UVDIyejDJ5+CGIJTIrWla0StleELB7L59nIhPS6upGNyu6f36SRB+nbRDTm9zGAb/mSdmW3agWpobGbFwlDhVA==", "peerDependencies": { "@deck.gl/aggregation-layers": "^8.9.23", "@deck.gl/core": "^8.9.23", + "@deck.gl/geo-layers": "^8.9.23", "@deck.gl/layers": "^8.9.23", "@math.gl/polygon": "^3.6.2", "apache-arrow": "^13.0.0" @@ -638,6 +689,31 @@ "@lumino/signaling": "^2.1.2" } }, + "node_modules/@loaders.gl/3d-tiles": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/3d-tiles/-/3d-tiles-3.4.14.tgz", + "integrity": "sha512-cxStTSLIJgRZnkTBYTcp9FPVBQWQlJMzW1LRlaKWiwAHkOKBElszzApIIEvRvZGSrs8k8TUi6BJ1Y41iiANF7w==", + "peer": true, + "dependencies": { + "@loaders.gl/draco": "3.4.14", + "@loaders.gl/gltf": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/math": "3.4.14", + "@loaders.gl/tiles": "3.4.14", + "@math.gl/core": "^3.5.1", + "@math.gl/geospatial": "^3.5.1", + "long": "^5.2.1" + }, + "peerDependencies": { + "@loaders.gl/core": "^3.4.0" + } + }, + "node_modules/@loaders.gl/3d-tiles/node_modules/long": { + "version": "5.2.3", + "resolved": "https://registry.npmjs.org/long/-/long-5.2.3.tgz", + "integrity": "sha512-lcHwpNoggQTObv5apGNCTdJrO69eHOZMi4BNC+rTLER8iHAqGrUVeLh/irVIM7zTw2bOXA8T6uNPeujwOLg/2Q==", + "peer": true + }, "node_modules/@loaders.gl/core": { "version": "3.4.14", "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-3.4.14.tgz", @@ -666,6 +742,45 @@ "@probe.gl/env": "4.0.4" } }, + "node_modules/@loaders.gl/draco": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/draco/-/draco-3.4.14.tgz", + "integrity": "sha512-HwNFFt+dKZqFtzI0uVGvRkudFEZXxybJ+ZRsNkBbzAWoMM5L1TpuLs6DPsqPQUIT9HXNHzov18cZI0gK5bTJpg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.3.1", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "@loaders.gl/worker-utils": "3.4.14", + "draco3d": "1.5.5" + } + }, + "node_modules/@loaders.gl/gis": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/gis/-/gis-3.4.14.tgz", + "integrity": "sha512-5cmhIwioPpSkfNzFRM3PbFDecjpYIhtEOFbryu3rE37npKHLTD2tF4ocQxUPB+QVED6GLwWBdzJIs64UWGrqjw==", + "peer": true, + "dependencies": { + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "@mapbox/vector-tile": "^1.3.1", + "@math.gl/polygon": "^3.5.1", + "pbf": "^3.2.1" + } + }, + "node_modules/@loaders.gl/gltf": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/gltf/-/gltf-3.4.14.tgz", + "integrity": "sha512-jv+B5S/taiwzXAOu5D9nk1jjU9+JCCr/6/nGguCE2Ya3IX7CI1Nlnp20eKKhW8ZCEokZavMNT0bNbiJ5ahEFjA==", + "peer": true, + "dependencies": { + "@loaders.gl/draco": "3.4.14", + "@loaders.gl/images": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/textures": "3.4.14", + "@math.gl/core": "^3.5.1" + } + }, "node_modules/@loaders.gl/images": { "version": "3.4.14", "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-3.4.14.tgz", @@ -692,6 +807,30 @@ "@babel/runtime": "^7.0.0" } }, + "node_modules/@loaders.gl/math": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/math/-/math-3.4.14.tgz", + "integrity": "sha512-OBEVX6Q5pMipbCAiZyX2+q1zRd0nw8M2dclpny05on8700OaKMwfs47wEUnbfCU3iyHad3sgsAxN3EIh+kuo9Q==", + "peer": true, + "dependencies": { + "@loaders.gl/images": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@math.gl/core": "^3.5.1" + } + }, + "node_modules/@loaders.gl/mvt": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/mvt/-/mvt-3.4.14.tgz", + "integrity": "sha512-tozGmWvsJacjaLavjX4S/5yNDV9S4wJb7+vPG/nXWX2gTtgZ1mxcFQAtAJjokqpy37d1ZhLt+TXh0HrLoTmRgw==", + "peer": true, + "dependencies": { + "@loaders.gl/gis": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "@math.gl/polygon": "^3.5.1", + "pbf": "^3.2.1" + } + }, "node_modules/@loaders.gl/schema": { "version": "3.4.14", "resolved": "https://registry.npmjs.org/@loaders.gl/schema/-/schema-3.4.14.tgz", @@ -700,6 +839,76 @@ "@types/geojson": "^7946.0.7" } }, + "node_modules/@loaders.gl/terrain": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/terrain/-/terrain-3.4.14.tgz", + "integrity": "sha512-vhchEVkPaWXnqd2ofujG2AEnBsk4hEw6LWSaFY7E3VMzNhI9l2EHvyU3+Hs03jYbXM4oLlQPGqd/T7x+5IMtig==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.3.1", + "@loaders.gl/images": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "@mapbox/martini": "^0.2.0" + } + }, + "node_modules/@loaders.gl/textures": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/textures/-/textures-3.4.14.tgz", + "integrity": "sha512-iKDHL2ZlOUud4/e3g0p0SyvkukznopYy6La3O6I9vDfKp8peuKMRRcTfFfd/zH0OqQC0hIhCXNz46vRLu7h6ng==", + "peer": true, + "dependencies": { + "@loaders.gl/images": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "@loaders.gl/worker-utils": "3.4.14", + "ktx-parse": "^0.0.4", + "texture-compressor": "^1.0.2" + } + }, + "node_modules/@loaders.gl/tiles": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/tiles/-/tiles-3.4.14.tgz", + "integrity": "sha512-an3scxl65r74LW4WoIGgluBmQpMY9eb381y9mZmREphTP6bWEj96fL/tiR+G6TiE6HJqTv8O3PH6xwI9OQmEJg==", + "peer": true, + "dependencies": { + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/math": "3.4.14", + "@math.gl/core": "^3.5.1", + "@math.gl/culling": "^3.5.1", + "@math.gl/geospatial": "^3.5.1", + "@math.gl/web-mercator": "^3.5.1", + "@probe.gl/stats": "^4.0.1" + }, + "peerDependencies": { + "@loaders.gl/core": "^3.4.0" + } + }, + "node_modules/@loaders.gl/tiles/node_modules/@probe.gl/stats": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/@probe.gl/stats/-/stats-4.0.4.tgz", + "integrity": "sha512-SDuSY/D4yDL6LQDa69l/GCcnZLRiGYdyvYkxWb0CgnzTPdPrcdrzGkzkvpC3zsA4fEFw2smlDje370QGHwlisg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.0.0" + } + }, + "node_modules/@loaders.gl/wms": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/wms/-/wms-3.4.14.tgz", + "integrity": "sha512-D1pObPSUj885zGPyHIb7GtcwpHQNk0T8nK/4EHb0SHLe0y1b4qwqSOswdS9geXT9Q61hyhl/L0zqyTgwjiMStg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.3.1", + "@loaders.gl/images": "3.4.14", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "@loaders.gl/xml": "3.4.14", + "@turf/rewind": "^5.1.5", + "deep-strict-equal": "^0.2.0", + "lerc": "^4.0.1" + } + }, "node_modules/@loaders.gl/worker-utils": { "version": "3.4.14", "resolved": "https://registry.npmjs.org/@loaders.gl/worker-utils/-/worker-utils-3.4.14.tgz", @@ -708,6 +917,18 @@ "@babel/runtime": "^7.3.1" } }, + "node_modules/@loaders.gl/xml": { + "version": "3.4.14", + "resolved": "https://registry.npmjs.org/@loaders.gl/xml/-/xml-3.4.14.tgz", + "integrity": "sha512-SNMGOHz4p8Cw+M6kxXhFEjXdNddJPOZY1rzNmRq7NYdGQlQYYeJdqV5HWzHx9BkoQYyrDXkrweGN0mY9QxCfeA==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.3.1", + "@loaders.gl/loader-utils": "3.4.14", + "@loaders.gl/schema": "3.4.14", + "fast-xml-parser": "^4.2.5" + } + }, "node_modules/@luma.gl/constants": { "version": "8.5.21", "resolved": "https://registry.npmjs.org/@luma.gl/constants/-/constants-8.5.21.tgz", @@ -742,6 +963,25 @@ "@types/offscreencanvas": "^2019.7.0" } }, + "node_modules/@luma.gl/experimental": { + "version": "8.5.21", + "resolved": "https://registry.npmjs.org/@luma.gl/experimental/-/experimental-8.5.21.tgz", + "integrity": "sha512-uFKPChGofyihOKxtqJy78QCQCDFnuMTK4QHrUX/qiTnvFSO8BgtTUevKvWGN9lBvq+uDD0lSieeF9yBzhQfAzw==", + "peer": true, + "dependencies": { + "@luma.gl/constants": "8.5.21", + "@math.gl/core": "^3.5.0", + "earcut": "^2.0.6" + }, + "peerDependencies": { + "@loaders.gl/gltf": "^3.0.0", + "@loaders.gl/images": "^3.0.0", + "@luma.gl/engine": "^8.4.0", + "@luma.gl/gltools": "^8.4.0", + "@luma.gl/shadertools": "^8.4.0", + "@luma.gl/webgl": "^8.4.0" + } + }, "node_modules/@luma.gl/gltools": { "version": "8.5.21", "resolved": "https://registry.npmjs.org/@luma.gl/gltools/-/gltools-8.5.21.tgz", @@ -958,6 +1198,12 @@ "node": ">= 0.6" } }, + "node_modules/@mapbox/martini": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/@mapbox/martini/-/martini-0.2.0.tgz", + "integrity": "sha512-7hFhtkb0KTLEls+TRw/rWayq5EeHtTaErgm/NskVoXmtgAQu/9D299aeyj6mzAR/6XUnYRp2lU+4IcrYRFjVsQ==", + "peer": true + }, "node_modules/@mapbox/point-geometry": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz", @@ -1017,6 +1263,28 @@ "gl-matrix": "^3.4.0" } }, + "node_modules/@math.gl/culling": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/@math.gl/culling/-/culling-3.6.3.tgz", + "integrity": "sha512-3UERXHbaPlM6pnTk2MI7LeQ5CoelDZzDzghTTcv+HdQCZsT/EOEuEdYimETHtSxiyiOmsX2Un65UBLYT/rbKZg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.0", + "@math.gl/core": "3.6.3", + "gl-matrix": "^3.4.0" + } + }, + "node_modules/@math.gl/geospatial": { + "version": "3.6.3", + "resolved": "https://registry.npmjs.org/@math.gl/geospatial/-/geospatial-3.6.3.tgz", + "integrity": "sha512-6xf657lJnaecSarSzn02t0cnsCSkWb+39m4+im96v20dZTrLCWZ2glDQVzfuL91meDnDXjH4oyvynp12Mj5MFg==", + "peer": true, + "dependencies": { + "@babel/runtime": "^7.12.0", + "@math.gl/core": "3.6.3", + "gl-matrix": "^3.4.0" + } + }, "node_modules/@math.gl/polygon": { "version": "3.6.3", "resolved": "https://registry.npmjs.org/@math.gl/polygon/-/polygon-3.6.3.tgz", @@ -1091,6 +1359,62 @@ "react": "^16.14.0 || >=17" } }, + "node_modules/@turf/boolean-clockwise": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-5.1.5.tgz", + "integrity": "sha512-FqbmEEOJ4rU4/2t7FKx0HUWmjFEVqR+NJrFP7ymGSjja2SQ7Q91nnBihGuT+yuHHl6ElMjQ3ttsB/eTmyCycxA==", + "peer": true, + "dependencies": { + "@turf/helpers": "^5.1.5", + "@turf/invariant": "^5.1.5" + } + }, + "node_modules/@turf/clone": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@turf/clone/-/clone-5.1.5.tgz", + "integrity": "sha512-//pITsQ8xUdcQ9pVb4JqXiSqG4dos5Q9N4sYFoWghX21tfOV2dhc5TGqYOhnHrQS7RiKQL1vQ48kIK34gQ5oRg==", + "peer": true, + "dependencies": { + "@turf/helpers": "^5.1.5" + } + }, + "node_modules/@turf/helpers": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@turf/helpers/-/helpers-5.1.5.tgz", + "integrity": "sha512-/lF+JR+qNDHZ8bF9d+Cp58nxtZWJ3sqFe6n3u3Vpj+/0cqkjk4nXKYBSY0azm+GIYB5mWKxUXvuP/m0ZnKj1bw==", + "peer": true + }, + "node_modules/@turf/invariant": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@turf/invariant/-/invariant-5.2.0.tgz", + "integrity": "sha512-28RCBGvCYsajVkw2EydpzLdcYyhSA77LovuOvgCJplJWaNVyJYH6BOR3HR9w50MEkPqb/Vc/jdo6I6ermlRtQA==", + "peer": true, + "dependencies": { + "@turf/helpers": "^5.1.5" + } + }, + "node_modules/@turf/meta": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@turf/meta/-/meta-5.2.0.tgz", + "integrity": "sha512-ZjQ3Ii62X9FjnK4hhdsbT+64AYRpaI8XMBMcyftEOGSmPMUVnkbvuv3C9geuElAXfQU7Zk1oWGOcrGOD9zr78Q==", + "peer": true, + "dependencies": { + "@turf/helpers": "^5.1.5" + } + }, + "node_modules/@turf/rewind": { + "version": "5.1.5", + "resolved": "https://registry.npmjs.org/@turf/rewind/-/rewind-5.1.5.tgz", + "integrity": "sha512-Gdem7JXNu+G4hMllQHXRFRihJl3+pNl7qY+l4qhQFxq+hiU1cQoVFnyoleIqWKIrdK/i2YubaSwc3SCM7N5mMw==", + "peer": true, + "dependencies": { + "@turf/boolean-clockwise": "^5.1.5", + "@turf/clone": "^5.1.5", + "@turf/helpers": "^5.1.5", + "@turf/invariant": "^5.1.5", + "@turf/meta": "^5.1.5" + } + }, "node_modules/@types/backbone": { "version": "1.4.14", "resolved": "https://registry.npmjs.org/@types/backbone/-/backbone-1.4.14.tgz", @@ -1297,6 +1621,15 @@ "arrow2csv": "bin/arrow2csv.js" } }, + "node_modules/argparse": { + "version": "1.0.10", + "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz", + "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==", + "peer": true, + "dependencies": { + "sprintf-js": "~1.0.2" + } + }, "node_modules/arr-union": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/arr-union/-/arr-union-3.1.0.tgz", @@ -1367,6 +1700,15 @@ "node": ">=8" } }, + "node_modules/buf-compare": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/buf-compare/-/buf-compare-1.0.1.tgz", + "integrity": "sha512-Bvx4xH00qweepGc43xFvMs5BKASXTbHaHm6+kDYIK9p/4iFwjATQkmPKHQSgJZzKbAymhztRbXUf1Nqhzl73/Q==", + "peer": true, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/bytewise": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/bytewise/-/bytewise-1.1.0.tgz", @@ -1529,6 +1871,19 @@ "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==", "dev": true }, + "node_modules/core-assert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/core-assert/-/core-assert-0.2.1.tgz", + "integrity": "sha512-IG97qShIP+nrJCXMCgkNZgH7jZQ4n8RpPyPeXX++T6avR/KhLhgLiHKoEn5Rc1KjfycSfA9DMa6m+4C4eguHhw==", + "peer": true, + "dependencies": { + "buf-compare": "^1.0.0", + "is-error": "^2.2.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/csstype": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz", @@ -1549,6 +1904,24 @@ "ms": "^2.1.1" } }, + "node_modules/deep-strict-equal": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/deep-strict-equal/-/deep-strict-equal-0.2.0.tgz", + "integrity": "sha512-3daSWyvZ/zwJvuMGlzG1O+Ow0YSadGfb3jsh9xoCutv2tWyB9dA4YvR9L9/fSdDZa2dByYQe+TqapSGUrjnkoA==", + "peer": true, + "dependencies": { + "core-assert": "^0.2.0" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/draco3d": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.5.tgz", + "integrity": "sha512-JVuNV0EJzD3LBYhGyIXJLeBID/EVtmFO1ZNhAYflTgiMiAJlbhXQmRRda/azjc8MRVMHh0gqGhiqHUo5dIXM8Q==", + "peer": true + }, "node_modules/earcut": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz", @@ -1608,6 +1981,28 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-xml-parser": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.3.2.tgz", + "integrity": "sha512-rmrXUXwbJedoXkStenj1kkljNF7ugn5ZjR9FJcwmCfcCbtOMDghPajbc+Tck6vE6F5XsDmx+Pr2le9fw8+pXBg==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/NaturalIntelligence" + }, + { + "type": "paypal", + "url": "https://paypal.me/naturalintelligence" + } + ], + "peer": true, + "dependencies": { + "strnum": "^1.0.5" + }, + "bin": { + "fxparser": "src/cli/cli.js" + } + }, "node_modules/fill-range": { "version": "7.0.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", @@ -1704,6 +2099,17 @@ "node": ">=6" } }, + "node_modules/h3-js": { + "version": "3.7.2", + "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-3.7.2.tgz", + "integrity": "sha512-LPjlHSwB9zQZrMqKloCZmmmt3yZzIK7nqPcXqwU93zT3TtYG6jP4tZBzAPouxut7lLjdFbMQ75wRBiKfpsnY7w==", + "peer": true, + "engines": { + "node": ">=4", + "npm": ">=3", + "yarn": ">=1.3.0" + } + }, "node_modules/hammerjs": { "version": "2.0.8", "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", @@ -1745,6 +2151,18 @@ "integrity": "sha512-Ius2VYcGNk7T90CppJqcIkS5ooHUZyIQK+ClZfMfMNFEF9VSE73Fq+906u/CWu92x4gzZMWOwfFYckPObzdEbA==", "dev": true }, + "node_modules/image-size": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.7.5.tgz", + "integrity": "sha512-Hiyv+mXHfFEP7LzUL/llg9RwFxxY+o9N3JVLIeG5E7iFIFAalxvRU9UZthBdYDEVnzHMgjnKJPPpay5BWf1g9g==", + "peer": true, + "bin": { + "image-size": "bin/image-size.js" + }, + "engines": { + "node": ">=6.9.0" + } + }, "node_modules/ini": { "version": "1.3.8", "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", @@ -1762,6 +2180,12 @@ "node": ">=8" } }, + "node_modules/is-error": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/is-error/-/is-error-2.2.2.tgz", + "integrity": "sha512-IOQqts/aHWbiisY5DuPJQ0gcbvaLFCa7fBa9xoLfxBZvQ+ZI/Zh9xoI7Gk+G64N0FdK4AbibytHht2tWgpJWLg==", + "peer": true + }, "node_modules/is-extendable": { "version": "0.1.1", "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz", @@ -1921,6 +2345,18 @@ "node": ">=0.10.0" } }, + "node_modules/ktx-parse": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/ktx-parse/-/ktx-parse-0.0.4.tgz", + "integrity": "sha512-LY3nrmfXl+wZZdPxgJ3ZmLvG+wkOZZP3/dr4RbQj1Pk3Qwz44esOOSFFVQJcNWpXAtiNIC66WgXufX/SYgYz6A==", + "peer": true + }, + "node_modules/lerc": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lerc/-/lerc-4.0.4.tgz", + "integrity": "sha512-nHZH+ffiGPkgKUQtiZrljGUGV2GddvPcVTV5E345ZFncbKz+/rBIjDPrSxkiqW0EAtg1Jw7qAgRdaCwV+95Fow==", + "peer": true + }, "node_modules/lib0": { "version": "0.2.87", "resolved": "https://registry.npmjs.org/lib0/-/lib0-0.2.87.tgz", @@ -1963,6 +2399,15 @@ "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz", "integrity": "sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==" }, + "node_modules/long": { + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/long/-/long-3.2.0.tgz", + "integrity": "sha512-ZYvPPOMqUwPoDsbJaR10iQJYnMuZhRTvHYl62ErLIEX7RgFlziSBUUvrt3OVfc47QlHHpzPZYP17g3Fv7oeJkg==", + "peer": true, + "engines": { + "node": ">=0.6" + } + }, "node_modules/loose-envify": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", @@ -2452,6 +2897,12 @@ "node": ">=0.10.0" } }, + "node_modules/sprintf-js": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", + "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", + "peer": true + }, "node_modules/stream-read-all": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/stream-read-all/-/stream-read-all-3.0.1.tgz", @@ -2460,6 +2911,12 @@ "node": ">=10" } }, + "node_modules/strnum": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz", + "integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==", + "peer": true + }, "node_modules/supercluster": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz", @@ -2515,6 +2972,19 @@ "node": ">=12.17" } }, + "node_modules/texture-compressor": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/texture-compressor/-/texture-compressor-1.0.2.tgz", + "integrity": "sha512-dStVgoaQ11mA5htJ+RzZ51ZxIZqNOgWKAIvtjLrW1AliQQLCmrDqNzQZ8Jh91YealQ95DXt4MEduLzJmbs6lig==", + "peer": true, + "dependencies": { + "argparse": "^1.0.10", + "image-size": "^0.7.4" + }, + "bin": { + "texture-compressor": "bin/texture-compressor.js" + } + }, "node_modules/tinyqueue": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz", diff --git a/package.json b/package.json index 2a98bee9..cb0f00f6 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "@deck.gl/extensions": "^8.9.32", "@deck.gl/layers": "^8.9.32", "@deck.gl/react": "^8.9.32", - "@geoarrow/deck.gl-layers": "^0.3.0-beta.2", + "@geoarrow/deck.gl-layers": "^0.3.0-beta.4", "apache-arrow": "^13.0.0", "maplibre-gl": "^3.5.2", "parquet-wasm": "0.5.0", diff --git a/src/model/layer.ts b/src/model/layer.ts index c92a12f1..cd3faa14 100644 --- a/src/model/layer.ts +++ b/src/model/layer.ts @@ -2,6 +2,8 @@ import type { Layer, LayerExtension, LayerProps } from "@deck.gl/core/typed"; import { GeoArrowArcLayer, GeoArrowArcLayerProps, + GeoArrowColumnLayer, + GeoArrowColumnLayerProps, GeoArrowHeatmapLayer, GeoArrowHeatmapLayerProps, GeoArrowPathLayer, @@ -10,6 +12,8 @@ import { GeoArrowScatterplotLayerProps, GeoArrowSolidPolygonLayer, GeoArrowSolidPolygonLayerProps, + _GeoArrowTextLayer as GeoArrowTextLayer, + _GeoArrowTextLayerProps as GeoArrowTextLayerProps, } from "@geoarrow/deck.gl-layers"; import type { WidgetModel } from "@jupyter-widgets/base"; import * as arrow from "apache-arrow"; @@ -69,6 +73,11 @@ export abstract class BaseLayerModel extends BaseModel { }; } + /** + * Layer properties for this layer + */ + abstract layerProps(): Omit; + /** * Generate a deck.gl layer from this model description. */ @@ -137,71 +146,153 @@ export abstract class BaseLayerModel extends BaseModel { } } -export class ScatterplotModel extends BaseLayerModel { - static layerType = "scatterplot"; +export class ArcModel extends BaseLayerModel { + static layerType = "arc"; - protected radiusUnits: GeoArrowScatterplotLayerProps["radiusUnits"] | null; - protected radiusScale: GeoArrowScatterplotLayerProps["radiusScale"] | null; - protected radiusMinPixels: - | GeoArrowScatterplotLayerProps["radiusMinPixels"] - | null; - protected radiusMaxPixels: - | GeoArrowScatterplotLayerProps["radiusMaxPixels"] - | null; - protected lineWidthUnits: - | GeoArrowScatterplotLayerProps["lineWidthUnits"] + protected greatCircle: GeoArrowArcLayerProps["greatCircle"] | null; + protected numSegments: GeoArrowArcLayerProps["numSegments"] | null; + protected widthUnits: GeoArrowArcLayerProps["widthUnits"] | null; + protected widthScale: GeoArrowArcLayerProps["widthScale"] | null; + protected widthMinPixels: GeoArrowArcLayerProps["widthMinPixels"] | null; + protected widthMaxPixels: GeoArrowArcLayerProps["widthMaxPixels"] | null; + protected getSourcePosition: + | GeoArrowArcLayerProps["getSourcePosition"] | null; - protected lineWidthScale: - | GeoArrowScatterplotLayerProps["lineWidthScale"] + protected getTargetPosition: + | GeoArrowArcLayerProps["getTargetPosition"] | null; + protected getSourceColor: GeoArrowArcLayerProps["getSourceColor"] | null; + protected getTargetColor: GeoArrowArcLayerProps["getTargetColor"] | null; + protected getWidth: GeoArrowArcLayerProps["getWidth"] | null; + protected getHeight: GeoArrowArcLayerProps["getHeight"] | null; + protected getTilt: GeoArrowArcLayerProps["getTilt"] | null; + + constructor(model: WidgetModel, updateStateCallback: () => void) { + super(model, updateStateCallback); + + this.initRegularAttribute("great_circle", "greatCircle"); + this.initRegularAttribute("num_segments", "numSegments"); + this.initRegularAttribute("width_units", "widthUnits"); + this.initRegularAttribute("width_scale", "widthScale"); + this.initRegularAttribute("width_min_pixels", "widthMinPixels"); + this.initRegularAttribute("width_max_pixels", "widthMaxPixels"); + + this.initVectorizedAccessor("get_source_position", "getSourcePosition"); + this.initVectorizedAccessor("get_target_position", "getTargetPosition"); + this.initVectorizedAccessor("get_source_color", "getSourceColor"); + this.initVectorizedAccessor("get_target_color", "getTargetColor"); + this.initVectorizedAccessor("get_width", "getWidth"); + this.initVectorizedAccessor("get_height", "getHeight"); + this.initVectorizedAccessor("get_tilt", "getTilt"); + } + + layerProps(): Omit { + return { + data: this.table, + ...(this.greatCircle && { greatCircle: this.greatCircle }), + ...(this.numSegments && { numSegments: this.numSegments }), + ...(this.widthUnits && { widthUnits: this.widthUnits }), + ...(this.widthScale && { widthScale: this.widthScale }), + ...(this.widthMinPixels && { widthMinPixels: this.widthMinPixels }), + ...(this.widthMaxPixels && { widthMaxPixels: this.widthMaxPixels }), + ...(this.getSourcePosition && { + getSourcePosition: this.getSourcePosition, + }), + ...(this.getTargetPosition && { + getTargetPosition: this.getTargetPosition, + }), + ...(this.getSourceColor && { getSourceColor: this.getSourceColor }), + ...(this.getTargetColor && { getTargetColor: this.getTargetColor }), + ...(this.getWidth && { getWidth: this.getWidth }), + ...(this.getHeight && { getHeight: this.getHeight }), + ...(this.getTilt && { getTilt: this.getTilt }), + }; + } + + render(): GeoArrowArcLayer { + return new GeoArrowArcLayer({ + ...this.baseLayerProps(), + ...this.layerProps(), + }); + } +} + +export class ColumnModel extends BaseLayerModel { + static layerType = "column"; + + protected diskResolution: GeoArrowColumnLayerProps["diskResolution"] | null; + protected radius: GeoArrowColumnLayerProps["radius"] | null; + protected angle: GeoArrowColumnLayerProps["angle"] | null; + protected vertices: GeoArrowColumnLayerProps["vertices"] | null; + protected offset: GeoArrowColumnLayerProps["offset"] | null; + protected coverage: GeoArrowColumnLayerProps["coverage"] | null; + protected elevationScale: GeoArrowColumnLayerProps["elevationScale"] | null; + protected filled: GeoArrowColumnLayerProps["filled"] | null; + protected stroked: GeoArrowColumnLayerProps["stroked"] | null; + protected extruded: GeoArrowColumnLayerProps["extruded"] | null; + protected wireframe: GeoArrowColumnLayerProps["wireframe"] | null; + protected flatShading: GeoArrowColumnLayerProps["flatShading"] | null; + protected radiusUnits: GeoArrowColumnLayerProps["radiusUnits"] | null; + protected lineWidthUnits: GeoArrowColumnLayerProps["lineWidthUnits"] | null; + protected lineWidthScale: GeoArrowColumnLayerProps["lineWidthScale"] | null; protected lineWidthMinPixels: - | GeoArrowScatterplotLayerProps["lineWidthMinPixels"] + | GeoArrowColumnLayerProps["lineWidthMinPixels"] | null; protected lineWidthMaxPixels: - | GeoArrowScatterplotLayerProps["lineWidthMaxPixels"] + | GeoArrowColumnLayerProps["lineWidthMaxPixels"] | null; - protected stroked: GeoArrowScatterplotLayerProps["stroked"] | null; - protected filled: GeoArrowScatterplotLayerProps["filled"] | null; - protected billboard: GeoArrowScatterplotLayerProps["billboard"] | null; - protected antialiasing: GeoArrowScatterplotLayerProps["antialiasing"] | null; - protected getRadius: GeoArrowScatterplotLayerProps["getRadius"] | null; - protected getFillColor: GeoArrowScatterplotLayerProps["getFillColor"] | null; - protected getLineColor: GeoArrowScatterplotLayerProps["getLineColor"] | null; - protected getLineWidth: GeoArrowScatterplotLayerProps["getLineWidth"] | null; + protected material: GeoArrowColumnLayerProps["material"] | null; + protected getPosition: GeoArrowColumnLayerProps["getPosition"] | null; + protected getFillColor: GeoArrowColumnLayerProps["getFillColor"] | null; + protected getLineColor: GeoArrowColumnLayerProps["getLineColor"] | null; + protected getElevation: GeoArrowColumnLayerProps["getElevation"] | null; + protected getLineWidth: GeoArrowColumnLayerProps["getLineWidth"] | null; constructor(model: WidgetModel, updateStateCallback: () => void) { super(model, updateStateCallback); + this.initRegularAttribute("disk_resolution", "diskResolution"); + this.initRegularAttribute("radius", "radius"); + this.initRegularAttribute("angle", "angle"); + this.initRegularAttribute("vertices", "vertices"); + this.initRegularAttribute("offset", "offset"); + this.initRegularAttribute("coverage", "coverage"); + this.initRegularAttribute("elevation_scale", "elevationScale"); + this.initRegularAttribute("filled", "filled"); + this.initRegularAttribute("stroked", "stroked"); + this.initRegularAttribute("extruded", "extruded"); + this.initRegularAttribute("wireframe", "wireframe"); + this.initRegularAttribute("flat_shading", "flatShading"); this.initRegularAttribute("radius_units", "radiusUnits"); - this.initRegularAttribute("radius_scale", "radiusScale"); - this.initRegularAttribute("radius_min_pixels", "radiusMinPixels"); - this.initRegularAttribute("radius_max_pixels", "radiusMaxPixels"); this.initRegularAttribute("line_width_units", "lineWidthUnits"); this.initRegularAttribute("line_width_scale", "lineWidthScale"); this.initRegularAttribute("line_width_min_pixels", "lineWidthMinPixels"); this.initRegularAttribute("line_width_max_pixels", "lineWidthMaxPixels"); - this.initRegularAttribute("stroked", "stroked"); - this.initRegularAttribute("filled", "filled"); - this.initRegularAttribute("billboard", "billboard"); - this.initRegularAttribute("antialiasing", "antialiasing"); + this.initRegularAttribute("material", "material"); - this.initVectorizedAccessor("get_radius", "getRadius"); + this.initVectorizedAccessor("get_position", "getPosition"); this.initVectorizedAccessor("get_fill_color", "getFillColor"); this.initVectorizedAccessor("get_line_color", "getLineColor"); + this.initVectorizedAccessor("get_elevation", "getElevation"); this.initVectorizedAccessor("get_line_width", "getLineWidth"); } - render(): GeoArrowScatterplotLayer { - return new GeoArrowScatterplotLayer({ - ...this.baseLayerProps(), - // Note: this is included here instead of in baseLayerProps to satisfy - // typing. + layerProps(): Omit { + return { data: this.table, - + ...(this.diskResolution && { diskResolution: this.diskResolution }), + ...(this.radius && { radius: this.radius }), + ...(this.angle && { angle: this.angle }), + ...(this.vertices && { vertices: this.vertices }), + ...(this.offset && { offset: this.offset }), + ...(this.coverage && { coverage: this.coverage }), + ...(this.elevationScale && { elevationScale: this.elevationScale }), + ...(this.filled && { filled: this.filled }), + ...(this.stroked && { stroked: this.stroked }), + ...(this.extruded && { extruded: this.extruded }), + ...(this.wireframe && { wireframe: this.wireframe }), + ...(this.flatShading && { flatShading: this.flatShading }), ...(this.radiusUnits && { radiusUnits: this.radiusUnits }), - ...(this.radiusScale && { radiusScale: this.radiusScale }), - ...(this.radiusMinPixels && { radiusMinPixels: this.radiusMinPixels }), - ...(this.radiusMaxPixels && { radiusMaxPixels: this.radiusMaxPixels }), ...(this.lineWidthUnits && { lineWidthUnits: this.lineWidthUnits }), ...(this.lineWidthScale && { lineWidthScale: this.lineWidthScale }), ...(this.lineWidthMinPixels && { @@ -210,14 +301,79 @@ export class ScatterplotModel extends BaseLayerModel { ...(this.lineWidthMaxPixels && { lineWidthMaxPixels: this.lineWidthMaxPixels, }), - ...(this.stroked && { stroked: this.stroked }), - ...(this.filled && { filled: this.filled }), - ...(this.billboard && { billboard: this.billboard }), - ...(this.antialiasing && { antialiasing: this.antialiasing }), - ...(this.getRadius && { getRadius: this.getRadius }), + ...(this.material && { material: this.material }), + ...(this.getPosition && { getPosition: this.getPosition }), ...(this.getFillColor && { getFillColor: this.getFillColor }), ...(this.getLineColor && { getLineColor: this.getLineColor }), + ...(this.getElevation && { getElevation: this.getElevation }), ...(this.getLineWidth && { getLineWidth: this.getLineWidth }), + }; + } + + render(): GeoArrowColumnLayer { + return new GeoArrowColumnLayer({ + ...this.baseLayerProps(), + ...this.layerProps(), + }); + } +} + +export class HeatmapModel extends BaseLayerModel { + static layerType = "heatmap"; + + protected radiusPixels: GeoArrowHeatmapLayerProps["radiusPixels"] | null; + protected colorRange: GeoArrowHeatmapLayerProps["colorRange"] | null; + protected intensity: GeoArrowHeatmapLayerProps["intensity"] | null; + protected threshold: GeoArrowHeatmapLayerProps["threshold"] | null; + protected colorDomain: GeoArrowHeatmapLayerProps["colorDomain"] | null; + protected aggregation: GeoArrowHeatmapLayerProps["aggregation"] | null; + protected weightsTextureSize: + | GeoArrowHeatmapLayerProps["weightsTextureSize"] + | null; + protected debounceTimeout: + | GeoArrowHeatmapLayerProps["debounceTimeout"] + | null; + protected getPosition: GeoArrowHeatmapLayerProps["getPosition"] | null; + protected getWeight: GeoArrowHeatmapLayerProps["getWeight"] | null; + + constructor(model: WidgetModel, updateStateCallback: () => void) { + super(model, updateStateCallback); + + this.initRegularAttribute("radius_pixels", "radiusPixels"); + this.initRegularAttribute("color_range", "colorRange"); + this.initRegularAttribute("intensity", "intensity"); + this.initRegularAttribute("threshold", "threshold"); + this.initRegularAttribute("color_domain", "colorDomain"); + this.initRegularAttribute("aggregation", "aggregation"); + this.initRegularAttribute("weights_texture_size", "weightsTextureSize"); + this.initRegularAttribute("debounce_timeout", "debounceTimeout"); + + this.initVectorizedAccessor("get_position", "getPosition"); + this.initVectorizedAccessor("get_weight", "getWeight"); + } + + layerProps(): Omit { + return { + data: this.table, + ...(this.radiusPixels && { radiusPixels: this.radiusPixels }), + ...(this.colorRange && { colorRange: this.colorRange }), + ...(this.intensity && { intensity: this.intensity }), + ...(this.threshold && { threshold: this.threshold }), + ...(this.colorDomain && { colorDomain: this.colorDomain }), + ...(this.aggregation && { aggregation: this.aggregation }), + ...(this.weightsTextureSize && { + weightsTextureSize: this.weightsTextureSize, + }), + ...(this.debounceTimeout && { debounceTimeout: this.debounceTimeout }), + ...(this.getPosition && { getPosition: this.getPosition }), + ...(this.getWeight && { getWeight: this.getWeight }), + }; + } + + render(): GeoArrowHeatmapLayer { + return new GeoArrowHeatmapLayer({ + ...this.baseLayerProps(), + ...this.layerProps(), }); } } @@ -252,13 +408,9 @@ export class PathModel extends BaseLayerModel { this.initVectorizedAccessor("get_width", "getWidth"); } - render(): GeoArrowPathLayer { - return new GeoArrowPathLayer({ - ...this.baseLayerProps(), - // Note: this is included here instead of in baseLayerProps to satisfy - // typing. + layerProps(): Omit { + return { data: this.table, - ...(this.widthUnits && { widthUnits: this.widthUnits }), ...(this.widthScale && { widthScale: this.widthScale }), ...(this.widthMinPixels && { widthMinPixels: this.widthMinPixels }), @@ -269,6 +421,100 @@ export class PathModel extends BaseLayerModel { ...(this.billboard && { billboard: this.billboard }), ...(this.getColor && { getColor: this.getColor }), ...(this.getWidth && { getWidth: this.getWidth }), + }; + } + + render(): GeoArrowPathLayer { + return new GeoArrowPathLayer({ + ...this.baseLayerProps(), + ...this.layerProps(), + }); + } +} +export class ScatterplotModel extends BaseLayerModel { + static layerType = "scatterplot"; + + protected radiusUnits: GeoArrowScatterplotLayerProps["radiusUnits"] | null; + protected radiusScale: GeoArrowScatterplotLayerProps["radiusScale"] | null; + protected radiusMinPixels: + | GeoArrowScatterplotLayerProps["radiusMinPixels"] + | null; + protected radiusMaxPixels: + | GeoArrowScatterplotLayerProps["radiusMaxPixels"] + | null; + protected lineWidthUnits: + | GeoArrowScatterplotLayerProps["lineWidthUnits"] + | null; + protected lineWidthScale: + | GeoArrowScatterplotLayerProps["lineWidthScale"] + | null; + protected lineWidthMinPixels: + | GeoArrowScatterplotLayerProps["lineWidthMinPixels"] + | null; + protected lineWidthMaxPixels: + | GeoArrowScatterplotLayerProps["lineWidthMaxPixels"] + | null; + protected stroked: GeoArrowScatterplotLayerProps["stroked"] | null; + protected filled: GeoArrowScatterplotLayerProps["filled"] | null; + protected billboard: GeoArrowScatterplotLayerProps["billboard"] | null; + protected antialiasing: GeoArrowScatterplotLayerProps["antialiasing"] | null; + protected getRadius: GeoArrowScatterplotLayerProps["getRadius"] | null; + protected getFillColor: GeoArrowScatterplotLayerProps["getFillColor"] | null; + protected getLineColor: GeoArrowScatterplotLayerProps["getLineColor"] | null; + protected getLineWidth: GeoArrowScatterplotLayerProps["getLineWidth"] | null; + + constructor(model: WidgetModel, updateStateCallback: () => void) { + super(model, updateStateCallback); + + this.initRegularAttribute("radius_units", "radiusUnits"); + this.initRegularAttribute("radius_scale", "radiusScale"); + this.initRegularAttribute("radius_min_pixels", "radiusMinPixels"); + this.initRegularAttribute("radius_max_pixels", "radiusMaxPixels"); + this.initRegularAttribute("line_width_units", "lineWidthUnits"); + this.initRegularAttribute("line_width_scale", "lineWidthScale"); + this.initRegularAttribute("line_width_min_pixels", "lineWidthMinPixels"); + this.initRegularAttribute("line_width_max_pixels", "lineWidthMaxPixels"); + this.initRegularAttribute("stroked", "stroked"); + this.initRegularAttribute("filled", "filled"); + this.initRegularAttribute("billboard", "billboard"); + this.initRegularAttribute("antialiasing", "antialiasing"); + + this.initVectorizedAccessor("get_radius", "getRadius"); + this.initVectorizedAccessor("get_fill_color", "getFillColor"); + this.initVectorizedAccessor("get_line_color", "getLineColor"); + this.initVectorizedAccessor("get_line_width", "getLineWidth"); + } + + layerProps(): Omit { + return { + data: this.table, + ...(this.radiusUnits && { radiusUnits: this.radiusUnits }), + ...(this.radiusScale && { radiusScale: this.radiusScale }), + ...(this.radiusMinPixels && { radiusMinPixels: this.radiusMinPixels }), + ...(this.radiusMaxPixels && { radiusMaxPixels: this.radiusMaxPixels }), + ...(this.lineWidthUnits && { lineWidthUnits: this.lineWidthUnits }), + ...(this.lineWidthScale && { lineWidthScale: this.lineWidthScale }), + ...(this.lineWidthMinPixels && { + lineWidthMinPixels: this.lineWidthMinPixels, + }), + ...(this.lineWidthMaxPixels && { + lineWidthMaxPixels: this.lineWidthMaxPixels, + }), + ...(this.stroked && { stroked: this.stroked }), + ...(this.filled && { filled: this.filled }), + ...(this.billboard && { billboard: this.billboard }), + ...(this.antialiasing && { antialiasing: this.antialiasing }), + ...(this.getRadius && { getRadius: this.getRadius }), + ...(this.getFillColor && { getFillColor: this.getFillColor }), + ...(this.getLineColor && { getLineColor: this.getLineColor }), + ...(this.getLineWidth && { getLineWidth: this.getLineWidth }), + }; + } + + render(): GeoArrowScatterplotLayer { + return new GeoArrowScatterplotLayer({ + ...this.baseLayerProps(), + ...this.layerProps(), }); } } @@ -299,13 +545,9 @@ export class SolidPolygonModel extends BaseLayerModel { this.initVectorizedAccessor("get_line_color", "getLineColor"); } - render(): GeoArrowSolidPolygonLayer { - return new GeoArrowSolidPolygonLayer({ - ...this.baseLayerProps(), - // Note: this is included here instead of in baseLayerProps to satisfy - // typing. + layerProps(): Omit { + return { data: this.table, - ...(this.filled && { filled: this.filled }), ...(this.extruded && { extruded: this.extruded }), ...(this.wireframe && { wireframe: this.wireframe }), @@ -313,131 +555,134 @@ export class SolidPolygonModel extends BaseLayerModel { ...(this.getElevation && { getElevation: this.getElevation }), ...(this.getFillColor && { getFillColor: this.getFillColor }), ...(this.getLineColor && { getLineColor: this.getLineColor }), - }); - } -} - -export class ArcModel extends BaseLayerModel { - static layerType = "arc"; - - protected greatCircle: GeoArrowArcLayerProps["greatCircle"] | null; - protected numSegments: GeoArrowArcLayerProps["numSegments"] | null; - protected widthUnits: GeoArrowArcLayerProps["widthUnits"] | null; - protected widthScale: GeoArrowArcLayerProps["widthScale"] | null; - protected widthMinPixels: GeoArrowArcLayerProps["widthMinPixels"] | null; - protected widthMaxPixels: GeoArrowArcLayerProps["widthMaxPixels"] | null; - protected getSourcePosition: - | GeoArrowArcLayerProps["getSourcePosition"] - | null; - protected getTargetPosition: - | GeoArrowArcLayerProps["getTargetPosition"] - | null; - protected getSourceColor: GeoArrowArcLayerProps["getSourceColor"] | null; - protected getTargetColor: GeoArrowArcLayerProps["getTargetColor"] | null; - protected getWidth: GeoArrowArcLayerProps["getWidth"] | null; - protected getHeight: GeoArrowArcLayerProps["getHeight"] | null; - protected getTilt: GeoArrowArcLayerProps["getTilt"] | null; - - constructor(model: WidgetModel, updateStateCallback: () => void) { - super(model, updateStateCallback); - - this.initRegularAttribute("great_circle", "greatCircle"); - this.initRegularAttribute("num_segments", "numSegments"); - this.initRegularAttribute("width_units", "widthUnits"); - this.initRegularAttribute("width_scale", "widthScale"); - this.initRegularAttribute("width_min_pixels", "widthMinPixels"); - this.initRegularAttribute("width_max_pixels", "widthMaxPixels"); - - this.initVectorizedAccessor("get_source_position", "getSourcePosition"); - this.initVectorizedAccessor("get_target_position", "getTargetPosition"); - this.initVectorizedAccessor("get_source_color", "getSourceColor"); - this.initVectorizedAccessor("get_target_color", "getTargetColor"); - this.initVectorizedAccessor("get_width", "getWidth"); - this.initVectorizedAccessor("get_height", "getHeight"); - this.initVectorizedAccessor("get_tilt", "getTilt"); + }; } - render(): GeoArrowArcLayer { - return new GeoArrowArcLayer({ + render(): GeoArrowSolidPolygonLayer { + return new GeoArrowSolidPolygonLayer({ ...this.baseLayerProps(), - // Note: this is included here instead of in baseLayerProps to satisfy - // typing. - data: this.table, - - ...(this.greatCircle && { greatCircle: this.greatCircle }), - ...(this.numSegments && { numSegments: this.numSegments }), - ...(this.widthUnits && { widthUnits: this.widthUnits }), - ...(this.widthScale && { widthScale: this.widthScale }), - ...(this.widthMinPixels && { widthMinPixels: this.widthMinPixels }), - ...(this.widthMaxPixels && { widthMaxPixels: this.widthMaxPixels }), - ...(this.getSourcePosition && { - getSourcePosition: this.getSourcePosition, - }), - ...(this.getTargetPosition && { - getTargetPosition: this.getTargetPosition, - }), - ...(this.getSourceColor && { getSourceColor: this.getSourceColor }), - ...(this.getTargetColor && { getTargetColor: this.getTargetColor }), - ...(this.getWidth && { getWidth: this.getWidth }), - ...(this.getHeight && { getHeight: this.getHeight }), - ...(this.getTilt && { getTilt: this.getTilt }), + ...this.layerProps(), }); } } -export class HeatmapModel extends BaseLayerModel { - static layerType = "heatmap"; - - protected radiusPixels: GeoArrowHeatmapLayerProps["radiusPixels"] | null; - protected colorRange: GeoArrowHeatmapLayerProps["colorRange"] | null; - protected intensity: GeoArrowHeatmapLayerProps["intensity"] | null; - protected threshold: GeoArrowHeatmapLayerProps["threshold"] | null; - protected colorDomain: GeoArrowHeatmapLayerProps["colorDomain"] | null; - protected aggregation: GeoArrowHeatmapLayerProps["aggregation"] | null; - protected weightsTextureSize: - | GeoArrowHeatmapLayerProps["weightsTextureSize"] +export class TextModel extends BaseLayerModel { + static layerType = "text"; + + protected billboard: GeoArrowTextLayerProps["billboard"] | null; + protected sizeScale: GeoArrowTextLayerProps["sizeScale"] | null; + protected sizeUnits: GeoArrowTextLayerProps["sizeUnits"] | null; + protected sizeMinPixels: GeoArrowTextLayerProps["sizeMinPixels"] | null; + protected sizeMaxPixels: GeoArrowTextLayerProps["sizeMaxPixels"] | null; + // protected background: GeoArrowTextLayerProps["background"] | null; + protected getBackgroundColor: + | GeoArrowTextLayerProps["getBackgroundColor"] | null; - protected debounceTimeout: - | GeoArrowHeatmapLayerProps["debounceTimeout"] + protected getBorderColor: GeoArrowTextLayerProps["getBorderColor"] | null; + protected getBorderWidth: GeoArrowTextLayerProps["getBorderWidth"] | null; + protected backgroundPadding: + | GeoArrowTextLayerProps["backgroundPadding"] | null; - protected getPosition: GeoArrowHeatmapLayerProps["getPosition"] | null; - protected getWeight: GeoArrowHeatmapLayerProps["getWeight"] | null; + protected characterSet: GeoArrowTextLayerProps["characterSet"] | null; + protected fontFamily: GeoArrowTextLayerProps["fontFamily"] | null; + protected fontWeight: GeoArrowTextLayerProps["fontWeight"] | null; + protected lineHeight: GeoArrowTextLayerProps["lineHeight"] | null; + protected outlineWidth: GeoArrowTextLayerProps["outlineWidth"] | null; + protected outlineColor: GeoArrowTextLayerProps["outlineColor"] | null; + protected fontSettings: GeoArrowTextLayerProps["fontSettings"] | null; + protected wordBreak: GeoArrowTextLayerProps["wordBreak"] | null; + protected maxWidth: GeoArrowTextLayerProps["maxWidth"] | null; + protected getText: GeoArrowTextLayerProps["getText"] | null; + protected getPosition: GeoArrowTextLayerProps["getPosition"] | null; + protected getColor: GeoArrowTextLayerProps["getColor"] | null; + protected getSize: GeoArrowTextLayerProps["getSize"] | null; + protected getAngle: GeoArrowTextLayerProps["getAngle"] | null; + protected getTextAnchor: GeoArrowTextLayerProps["getTextAnchor"] | null; + protected getAlignmentBaseline: + | GeoArrowTextLayerProps["getAlignmentBaseline"] + | null; + protected getPixelOffset: GeoArrowTextLayerProps["getPixelOffset"] | null; constructor(model: WidgetModel, updateStateCallback: () => void) { super(model, updateStateCallback); - this.initRegularAttribute("radius_pixels", "radiusPixels"); - this.initRegularAttribute("color_range", "colorRange"); - this.initRegularAttribute("intensity", "intensity"); - this.initRegularAttribute("threshold", "threshold"); - this.initRegularAttribute("color_domain", "colorDomain"); - this.initRegularAttribute("aggregation", "aggregation"); - this.initRegularAttribute("weights_texture_size", "weightsTextureSize"); - this.initRegularAttribute("debounce_timeout", "debounceTimeout"); - + this.initRegularAttribute("billboard", "billboard"); + this.initRegularAttribute("size_scale", "sizeScale"); + this.initRegularAttribute("size_units", "sizeUnits"); + this.initRegularAttribute("size_min_pixels", "sizeMinPixels"); + this.initRegularAttribute("size_max_pixels", "sizeMaxPixels"); + // this.initRegularAttribute("background", "background"); + this.initRegularAttribute("background_padding", "backgroundPadding"); + this.initRegularAttribute("character_set", "characterSet"); + this.initRegularAttribute("font_family", "fontFamily"); + this.initRegularAttribute("font_weight", "fontWeight"); + this.initRegularAttribute("line_height", "lineHeight"); + this.initRegularAttribute("outline_width", "outlineWidth"); + this.initRegularAttribute("outline_color", "outlineColor"); + this.initRegularAttribute("font_settings", "fontSettings"); + this.initRegularAttribute("word_break", "wordBreak"); + this.initRegularAttribute("max_width", "maxWidth"); + + this.initVectorizedAccessor("get_background_color", "getBackgroundColor"); + this.initVectorizedAccessor("get_border_color", "getBorderColor"); + this.initVectorizedAccessor("get_border_width", "getBorderWidth"); + this.initVectorizedAccessor("get_text", "getText"); this.initVectorizedAccessor("get_position", "getPosition"); - this.initVectorizedAccessor("get_weight", "getWeight"); + this.initVectorizedAccessor("get_color", "getColor"); + this.initVectorizedAccessor("get_size", "getSize"); + this.initVectorizedAccessor("get_angle", "getAngle"); + this.initVectorizedAccessor("get_text_anchor", "getTextAnchor"); + this.initVectorizedAccessor( + "get_alignment_baseline", + "getAlignmentBaseline" + ); + this.initVectorizedAccessor("get_pixel_offset", "getPixelOffset"); } - render(): GeoArrowHeatmapLayer { - return new GeoArrowHeatmapLayer({ - ...this.baseLayerProps(), - // Note: this is included here instead of in baseLayerProps to satisfy - // typing. + layerProps(): Omit { + return { data: this.table, - - ...(this.radiusPixels && { radiusPixels: this.radiusPixels }), - ...(this.colorRange && { colorRange: this.colorRange }), - ...(this.intensity && { intensity: this.intensity }), - ...(this.threshold && { threshold: this.threshold }), - ...(this.colorDomain && { colorDomain: this.colorDomain }), - ...(this.aggregation && { aggregation: this.aggregation }), - ...(this.weightsTextureSize && { - weightsTextureSize: this.weightsTextureSize, + ...(this.billboard && { billboard: this.billboard }), + ...(this.sizeScale && { sizeScale: this.sizeScale }), + ...(this.sizeUnits && { sizeUnits: this.sizeUnits }), + ...(this.sizeMinPixels && { sizeMinPixels: this.sizeMinPixels }), + ...(this.sizeMaxPixels && { sizeMaxPixels: this.sizeMaxPixels }), + // ...(this.background && {background: this.background}), + ...(this.backgroundPadding && { + backgroundPadding: this.backgroundPadding, }), - ...(this.debounceTimeout && { debounceTimeout: this.debounceTimeout }), + ...(this.characterSet && { characterSet: this.characterSet }), + ...(this.fontFamily && { fontFamily: this.fontFamily }), + ...(this.fontWeight && { fontWeight: this.fontWeight }), + ...(this.lineHeight && { lineHeight: this.lineHeight }), + ...(this.outlineWidth && { outlineWidth: this.outlineWidth }), + ...(this.outlineColor && { outlineColor: this.outlineColor }), + ...(this.fontSettings && { fontSettings: this.fontSettings }), + ...(this.wordBreak && { wordBreak: this.wordBreak }), + ...(this.maxWidth && { maxWidth: this.maxWidth }), + + ...(this.getBackgroundColor && { + getBackgroundColor: this.getBackgroundColor, + }), + ...(this.getBorderColor && { getBorderColor: this.getBorderColor }), + ...(this.getBorderWidth && { getBorderWidth: this.getBorderWidth }), + ...(this.getText && { getText: this.getText }), ...(this.getPosition && { getPosition: this.getPosition }), - ...(this.getWeight && { getWeight: this.getWeight }), + ...(this.getColor && { getColor: this.getColor }), + ...(this.getSize && { getSize: this.getSize }), + ...(this.getAngle && { getAngle: this.getAngle }), + ...(this.getTextAnchor && { getTextAnchor: this.getTextAnchor }), + ...(this.getAlignmentBaseline && { + getAlignmentBaseline: this.getAlignmentBaseline, + }), + ...(this.getPixelOffset && { getPixelOffset: this.getPixelOffset }), + }; + } + + render(): GeoArrowTextLayer { + return new GeoArrowTextLayer({ + ...this.baseLayerProps(), + ...this.layerProps(), }); } } @@ -449,24 +694,32 @@ export async function initializeLayer( const layerType = model.get("_layer_type"); let layerModel: BaseLayerModel; switch (layerType) { - case ScatterplotModel.layerType: - layerModel = new ScatterplotModel(model, updateStateCallback); + case ArcModel.layerType: + layerModel = new ArcModel(model, updateStateCallback); + break; + + case ColumnModel.layerType: + layerModel = new ColumnModel(model, updateStateCallback); + break; + + case HeatmapModel.layerType: + layerModel = new HeatmapModel(model, updateStateCallback); break; case PathModel.layerType: layerModel = new PathModel(model, updateStateCallback); break; - case SolidPolygonModel.layerType: - layerModel = new SolidPolygonModel(model, updateStateCallback); + case ScatterplotModel.layerType: + layerModel = new ScatterplotModel(model, updateStateCallback); break; - case ArcModel.layerType: - layerModel = new ArcModel(model, updateStateCallback); + case SolidPolygonModel.layerType: + layerModel = new SolidPolygonModel(model, updateStateCallback); break; - case HeatmapModel.layerType: - layerModel = new HeatmapModel(model, updateStateCallback); + case TextModel.layerType: + layerModel = new TextModel(model, updateStateCallback); break; default: