@accelint/map-toolkit 0.5.0 → 1.0.0

package/dist/deckgl/shapes/display-shape-layer/index.d.ts

@@ -0,0 +1,210 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { ShapeId } from "../shared/types.js";
+import { DisplayShapeLayerProps } from "./types.js";
+import * as _deck_gl_core0 from "@deck.gl/core";
+import { CompositeLayer, Layer, PickingInfo } from "@deck.gl/core";
+
+//#region src/deckgl/shapes/display-shape-layer/index.d.ts
+/**
+ * State type for DisplayShapeLayer
+ */
+type DisplayShapeLayerState = {
+  /** Index of currently hovered shape, undefined when not hovering */
+  hoverIndex?: number;
+  /** ID of the last hovered shape for event deduplication */
+  lastHoveredId?: ShapeId | null;
+  /** Allow additional properties from base layer state */
+  [key: string]: unknown;
+};
+/**
+ * DisplayShapeLayer - Read-only shapes visualization layer
+ *
+ * A composite deck.gl layer for displaying geographic shapes with interactive features.
+ * Ideal for rendering shapes from external APIs or displaying read-only geographic data.
+ *
+ * ## Features
+ * - **Multiple geometry types**: Point, LineString, Polygon, and Circle
+ * - **Icon support**: Custom icons for Point geometries via icon atlases
+ * - **Interactive selection**: Click handling with dotted border and optional highlight
+ * - **Hover effects**: Border/outline width increases on hover for better UX
+ * - **Customizable labels**: Flexible label positioning with per-shape or global options
+ * - **Style properties**: Full control over colors, border/outline patterns, and opacity
+ * - **Event bus integration**: Automatically emits shape events via @accelint/bus
+ * - **Multi-map support**: Events include map instance ID for isolation
+ *
+ * ## Selection Visual Feedback
+ * When a shape is selected via `selectedShapeId`:
+ * - The shape's border/outline pattern changes to dotted
+ * - An optional highlight renders underneath (controlled by `showHighlight` prop)
+ *
+ * ## Layer Structure
+ * Renders up to four sublayers (in order, bottom to top):
+ * 1. **Highlight layer**: Selection highlight effect for non-icon-Point shapes (if showHighlight=true)
+ * 2. **Coffin corners layer**: Selection/hover feedback for Point shapes with icons
+ * 3. **Main GeoJsonLayer**: Shape geometries with styling and interaction
+ * 4. **Label layer**: Text labels (if showLabels enabled)
+ *
+ * ## Icon Atlas Constraint
+ * When using icons for Point geometries, all shapes in a single layer must share the
+ * same icon atlas. The layer uses the first atlas found across all features. If you
+ * need icons from different atlases, use separate DisplayShapeLayer instances.
+ *
+ * ## Event Bus Integration
+ * Automatically emits shape events that can be consumed anywhere in your app:
+ * - `shapes:selected` - Emitted when a shape is clicked (includes mapId)
+ * - `shapes:hovered` - Emitted when the hovered shape changes (deduplicated, includes mapId)
+ *
+ * For selection with auto-deselection, use the companion `useSelectShape` hook which handles
+ * all the event wiring automatically. See the example below.
+ *
+ * @example Basic usage with useSelectShape hook (recommended)
+ * ```tsx
+ * import '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/fiber';
+ * import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';
+ * import { uuid } from '@accelint/core';
+ *
+ * const MAP_ID = uuid();
+ *
+ * function MapWithShapes() {
+ *   const { selectedId } = useSelectShape(MAP_ID);
+ *
+ *   return (
+ *     <BaseMap id={MAP_ID}>
+ *       <displayShapeLayer
+ *         id="my-shapes"
+ *         mapId={MAP_ID}
+ *         data={shapes}
+ *         selectedShapeId={selectedId}
+ *         showLabels="always"
+ *         pickable={true}
+ *       />
+ *     </BaseMap>
+ *   );
+ * }
+ * ```
+ *
+ * @example With custom label positioning
+ * ```tsx
+ * <displayShapeLayer
+ *   id="my-shapes"
+ *   data={shapes}
+ *   showLabels="always"
+ *   labelOptions={{
+ *     // Position circle labels at the top
+ *     circleLabelCoordinateAnchor: 'top',
+ *     circleLabelVerticalAnchor: 'bottom',
+ *     circleLabelOffset: [0, -10],
+ *     // Position line labels at the middle
+ *     lineStringLabelCoordinateAnchor: 'middle',
+ *   }}
+ * />
+ * ```
+ */
+declare class DisplayShapeLayer extends CompositeLayer<DisplayShapeLayerProps> {
+  state: DisplayShapeLayerState;
+  /** Cache for transformed features to avoid recreating objects on every render */
+  private featuresCache;
+  static layerName: string;
+  static defaultProps: {
+    pickable: boolean;
+    showLabels: "always";
+    showHighlight: boolean;
+    applyBaseOpacity: boolean;
+    highlightColor: _deck_gl_core0.Color;
+  };
+  /**
+   * Clean up state and caches when layer is destroyed
+   */
+  finalizeState(): void;
+  /**
+   * Override getPickingInfo to handle events from sublayers
+   * This is the correct pattern for CompositeLayer event handling
+   */
+  getPickingInfo({
+    info,
+    mode,
+    sourceLayer
+  }: {
+    info: PickingInfo;
+    mode?: string;
+    sourceLayer?: any;
+  }): {
+    color: Uint8Array | null;
+    layer: Layer | null;
+    sourceLayer?: Layer | null;
+    viewport?: _deck_gl_core0.Viewport;
+    index: number;
+    picked: boolean;
+    object?: any;
+    x: number;
+    y: number;
+    pixel?: [number, number];
+    coordinate?: number[];
+    devicePixel?: [number, number];
+    pixelRatio: number;
+  };
+  /**
+   * Convert shapes to GeoJSON features with shapeId in properties.
+   * Uses caching to avoid recreating objects on every render cycle.
+   */
+  private getFeaturesWithId;
+  /**
+   * Look up a shape by ID from the data prop.
+   * Used by event handlers to get full shape without storing in feature properties.
+   */
+  private getShapeById;
+  /**
+   * Handle shape click
+   */
+  private handleShapeClick;
+  /**
+   * Handle shape hover
+   */
+  private handleShapeHover;
+  /**
+   * Render highlight sublayer (underneath main layer)
+   * Note: Points with icons use coffin corners instead of highlight layer
+   */
+  private renderHighlightLayer;
+  /**
+   * Render coffin corners layer for Point geometries that have icons on hover/select
+   * Coffin corners provide visual feedback for points instead of highlight layer
+   */
+  private renderCoffinCornersLayer;
+  /**
+   * Extract icon configuration from features in a single pass.
+   * Returns the first icon's atlas and mapping (all shapes share the same atlas).
+   * Uses early return for O(1) best case when first feature has icons.
+   */
+  private getIconConfig;
+  /**
+   * Render main shapes layer
+   */
+  private renderMainLayer;
+  /**
+   * Render labels layer
+   * Supports three modes:
+   * - 'always': Show labels for all shapes
+   * - 'hover': Show label only for the currently hovered shape
+   * - 'never': No labels
+   */
+  private renderLabelsLayer;
+  /**
+   * Render all sublayers
+   */
+  renderLayers(): Layer[];
+}
+//#endregion
+export { DisplayShapeLayer };
+//# sourceMappingURL=index.d.ts.map

package/dist/deckgl/shapes/display-shape-layer/index.js

@@ -0,0 +1,449 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+
+'use client';
+
+import { DASH_ARRAYS, SHAPE_LAYER_IDS } from "../shared/constants.js";
+import { ShapeEvents } from "../shared/events.js";
+import { getDashArray, getFillColor, getLineColor } from "../shared/utils/style-utils.js";
+import { COFFIN_CORNERS, DEFAULT_DISPLAY_PROPS, MAP_INTERACTION } from "./constants.js";
+import { createShapeLabelLayer } from "./shape-label-layer.js";
+import { getHighlightColor, getHighlightLineWidth, getHoverLineWidth } from "./utils/display-style.js";
+import { Broadcast } from "@accelint/bus";
+import { getLogger } from "@accelint/logger";
+import { CompositeLayer } from "@deck.gl/core";
+import { PathStyleExtension } from "@deck.gl/extensions";
+import { GeoJsonLayer, IconLayer } from "@deck.gl/layers";
+
+//#region src/deckgl/shapes/display-shape-layer/index.ts
+const logger = getLogger({
+	enabled: process.env.NODE_ENV !== "production",
+	level: "warn",
+	prefix: "[DisplayShapeLayer]",
+	pretty: true
+});
+/**
+* Typed event bus instance for shape events.
+* Provides type-safe event emission for shape interactions.
+*/
+const shapeBus = Broadcast.getInstance();
+/**
+* DisplayShapeLayer - Read-only shapes visualization layer
+*
+* A composite deck.gl layer for displaying geographic shapes with interactive features.
+* Ideal for rendering shapes from external APIs or displaying read-only geographic data.
+*
+* ## Features
+* - **Multiple geometry types**: Point, LineString, Polygon, and Circle
+* - **Icon support**: Custom icons for Point geometries via icon atlases
+* - **Interactive selection**: Click handling with dotted border and optional highlight
+* - **Hover effects**: Border/outline width increases on hover for better UX
+* - **Customizable labels**: Flexible label positioning with per-shape or global options
+* - **Style properties**: Full control over colors, border/outline patterns, and opacity
+* - **Event bus integration**: Automatically emits shape events via @accelint/bus
+* - **Multi-map support**: Events include map instance ID for isolation
+*
+* ## Selection Visual Feedback
+* When a shape is selected via `selectedShapeId`:
+* - The shape's border/outline pattern changes to dotted
+* - An optional highlight renders underneath (controlled by `showHighlight` prop)
+*
+* ## Layer Structure
+* Renders up to four sublayers (in order, bottom to top):
+* 1. **Highlight layer**: Selection highlight effect for non-icon-Point shapes (if showHighlight=true)
+* 2. **Coffin corners layer**: Selection/hover feedback for Point shapes with icons
+* 3. **Main GeoJsonLayer**: Shape geometries with styling and interaction
+* 4. **Label layer**: Text labels (if showLabels enabled)
+*
+* ## Icon Atlas Constraint
+* When using icons for Point geometries, all shapes in a single layer must share the
+* same icon atlas. The layer uses the first atlas found across all features. If you
+* need icons from different atlases, use separate DisplayShapeLayer instances.
+*
+* ## Event Bus Integration
+* Automatically emits shape events that can be consumed anywhere in your app:
+* - `shapes:selected` - Emitted when a shape is clicked (includes mapId)
+* - `shapes:hovered` - Emitted when the hovered shape changes (deduplicated, includes mapId)
+*
+* For selection with auto-deselection, use the companion `useSelectShape` hook which handles
+* all the event wiring automatically. See the example below.
+*
+* @example Basic usage with useSelectShape hook (recommended)
+* ```tsx
+* import '@accelint/map-toolkit/deckgl/shapes/display-shape-layer/fiber';
+* import { useSelectShape } from '@accelint/map-toolkit/deckgl/shapes';
+* import { uuid } from '@accelint/core';
+*
+* const MAP_ID = uuid();
+*
+* function MapWithShapes() {
+*   const { selectedId } = useSelectShape(MAP_ID);
+*
+*   return (
+*     <BaseMap id={MAP_ID}>
+*       <displayShapeLayer
+*         id="my-shapes"
+*         mapId={MAP_ID}
+*         data={shapes}
+*         selectedShapeId={selectedId}
+*         showLabels="always"
+*         pickable={true}
+*       />
+*     </BaseMap>
+*   );
+* }
+* ```
+*
+* @example With custom label positioning
+* ```tsx
+* <displayShapeLayer
+*   id="my-shapes"
+*   data={shapes}
+*   showLabels="always"
+*   labelOptions={{
+*     // Position circle labels at the top
+*     circleLabelCoordinateAnchor: 'top',
+*     circleLabelVerticalAnchor: 'bottom',
+*     circleLabelOffset: [0, -10],
+*     // Position line labels at the middle
+*     lineStringLabelCoordinateAnchor: 'middle',
+*   }}
+* />
+* ```
+*/
+var DisplayShapeLayer = class extends CompositeLayer {
+	/** Cache for transformed features to avoid recreating objects on every render */
+	featuresCache = null;
+	static layerName = "DisplayShapeLayer";
+	static defaultProps = { ...DEFAULT_DISPLAY_PROPS };
+	/**
+	* Clean up state and caches when layer is destroyed
+	*/
+	finalizeState() {
+		if (this.state?.hoverIndex !== void 0) this.setState({
+			hoverIndex: void 0,
+			lastHoveredId: void 0
+		});
+		this.featuresCache = null;
+	}
+	/**
+	* Override getPickingInfo to handle events from sublayers
+	* This is the correct pattern for CompositeLayer event handling
+	*/
+	getPickingInfo({ info, mode, sourceLayer }) {
+		if (sourceLayer?.id === `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`) {
+			if (mode === "query") this.handleShapeClick(info);
+			if (mode === "hover" || !mode) {
+				if (info.index !== void 0 && info.index !== this.state?.hoverIndex) this.setState({ hoverIndex: info.index });
+				else if (info.index === void 0 && this.state?.hoverIndex !== void 0) this.setState({ hoverIndex: void 0 });
+				this.handleShapeHover(info);
+			}
+		}
+		return info;
+	}
+	/**
+	* Convert shapes to GeoJSON features with shapeId in properties.
+	* Uses caching to avoid recreating objects on every render cycle.
+	*/
+	getFeaturesWithId() {
+		const { data } = this.props;
+		if (this.featuresCache?.data === data) return this.featuresCache.features;
+		const features = [];
+		const shapeIdToIndex = /* @__PURE__ */ new Map();
+		for (const [i, shape] of data.entries()) {
+			features.push({
+				...shape.feature,
+				properties: {
+					...shape.feature.properties,
+					shapeId: shape.id
+				}
+			});
+			shapeIdToIndex.set(shape.id, i);
+		}
+		this.featuresCache = {
+			data,
+			features,
+			shapeIdToIndex
+		};
+		return features;
+	}
+	/**
+	* Look up a shape by ID from the data prop.
+	* Used by event handlers to get full shape without storing in feature properties.
+	*/
+	getShapeById(shapeId) {
+		return this.props.data.find((shape) => shape.id === shapeId);
+	}
+	/**
+	* Handle shape click
+	*/
+	handleShapeClick = (info) => {
+		const { onShapeClick, mapId } = this.props;
+		if (!info.object) return;
+		const shapeId = info.object.properties?.shapeId;
+		if (!shapeId) return;
+		const shape = this.getShapeById(shapeId);
+		if (!shape) return;
+		shapeBus.emit(ShapeEvents.selected, {
+			shapeId: shape.id,
+			mapId
+		});
+		if (onShapeClick) onShapeClick(shape);
+	};
+	/**
+	* Handle shape hover
+	*/
+	handleShapeHover = (info) => {
+		const { onShapeHover, mapId } = this.props;
+		const shapeId = info.object?.properties?.shapeId ?? null;
+		const shape = shapeId ? this.getShapeById(shapeId) ?? null : null;
+		if (shapeId !== this.state?.lastHoveredId) {
+			this.setState({ lastHoveredId: shapeId });
+			shapeBus.emit(ShapeEvents.hovered, {
+				shapeId,
+				mapId
+			});
+		}
+		if (onShapeHover) onShapeHover(shape);
+	};
+	/**
+	* Render highlight sublayer (underneath main layer)
+	* Note: Points with icons use coffin corners instead of highlight layer
+	*/
+	renderHighlightLayer(features) {
+		const { selectedShapeId, showHighlight, highlightColor } = this.props;
+		if (!selectedShapeId || showHighlight === false) return null;
+		const selectedFeature = features.find((f) => f.properties?.shapeId === selectedShapeId);
+		if (!selectedFeature) return null;
+		if (selectedFeature.geometry.type === "Point") {
+			if (!!selectedFeature.properties?.styleProperties?.icon) return null;
+		}
+		return new GeoJsonLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_HIGHLIGHT}`,
+			data: [selectedFeature],
+			filled: true,
+			stroked: true,
+			lineWidthUnits: "pixels",
+			lineWidthMinPixels: MAP_INTERACTION.LINE_WIDTH_MIN_PIXELS,
+			getFillColor: () => [
+				0,
+				0,
+				0,
+				0
+			],
+			getLineColor: () => highlightColor || getHighlightColor(),
+			getLineWidth: getHighlightLineWidth,
+			pickable: false,
+			updateTriggers: {
+				getLineColor: [highlightColor],
+				getLineWidth: [selectedShapeId, features]
+			}
+		});
+	}
+	/**
+	* Render coffin corners layer for Point geometries that have icons on hover/select
+	* Coffin corners provide visual feedback for points instead of highlight layer
+	*/
+	renderCoffinCornersLayer(features) {
+		const { selectedShapeId } = this.props;
+		const hoverIndex = this.state?.hoverIndex;
+		const shapeIdToIndex = this.featuresCache?.shapeIdToIndex;
+		if (!shapeIdToIndex) return null;
+		const pointFeatures = features.filter((f) => {
+			if (f.geometry.type !== "Point") return false;
+			if (!!!f.properties?.styleProperties?.icon) return false;
+			const shapeId = f.properties?.shapeId;
+			const isSelected = shapeId === selectedShapeId;
+			const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : void 0;
+			return isSelected || hoverIndex !== void 0 && featureIndex === hoverIndex;
+		});
+		if (pointFeatures.length === 0) return null;
+		const firstPointIcon = pointFeatures[0]?.properties?.styleProperties?.icon;
+		const iconAtlas = firstPointIcon?.atlas;
+		const iconMapping = firstPointIcon?.mapping;
+		if (!(iconAtlas && iconMapping)) {
+			logger.warn("Point shape has icon style but missing iconAtlas or iconMapping - coffin corners will not render");
+			return null;
+		}
+		const extendedMapping = {
+			...iconMapping,
+			[COFFIN_CORNERS.HOVER_ICON]: {
+				x: 0,
+				y: 0,
+				width: 76,
+				height: 76,
+				mask: false
+			},
+			[COFFIN_CORNERS.SELECTED_ICON]: {
+				x: 76,
+				y: 0,
+				width: 76,
+				height: 76,
+				mask: false
+			},
+			[COFFIN_CORNERS.SELECTED_HOVER_ICON]: {
+				x: 152,
+				y: 0,
+				width: 76,
+				height: 76,
+				mask: false
+			}
+		};
+		return new IconLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}-coffin-corners`,
+			data: pointFeatures,
+			iconAtlas,
+			iconMapping: extendedMapping,
+			getIcon: (d) => {
+				const shapeId = d.properties?.shapeId;
+				const isSelected = shapeId === selectedShapeId;
+				const featureIndex = shapeId ? shapeIdToIndex.get(shapeId) : void 0;
+				if (isSelected && hoverIndex !== void 0 && featureIndex === hoverIndex) return COFFIN_CORNERS.SELECTED_HOVER_ICON;
+				if (isSelected) return COFFIN_CORNERS.SELECTED_ICON;
+				return COFFIN_CORNERS.HOVER_ICON;
+			},
+			getSize: COFFIN_CORNERS.SIZE,
+			getPosition: (d) => {
+				return d.geometry.type === "Point" ? d.geometry.coordinates : [0, 0];
+			},
+			getPixelOffset: (d) => {
+				return [-1, -(d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE) / 2];
+			},
+			billboard: false,
+			pickable: false,
+			updateTriggers: {
+				getIcon: [selectedShapeId, this.state?.hoverIndex],
+				data: [
+					features,
+					selectedShapeId,
+					this.state?.hoverIndex
+				]
+			}
+		});
+	}
+	/**
+	* Extract icon configuration from features in a single pass.
+	* Returns the first icon's atlas and mapping (all shapes share the same atlas).
+	* Uses early return for O(1) best case when first feature has icons.
+	*/
+	getIconConfig(features) {
+		for (const f of features) {
+			const icon = f.properties?.styleProperties?.icon;
+			if (icon) return {
+				hasIcons: true,
+				atlas: icon.atlas,
+				mapping: icon.mapping
+			};
+		}
+		return { hasIcons: false };
+	}
+	/**
+	* Render main shapes layer
+	*/
+	renderMainLayer(features) {
+		const { pickable, applyBaseOpacity, selectedShapeId } = this.props;
+		const { hasIcons, atlas: iconAtlas, mapping: iconMapping } = this.getIconConfig(features);
+		return new GeoJsonLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY}`,
+			data: features,
+			filled: true,
+			stroked: true,
+			getFillColor: (d) => getFillColor(d, applyBaseOpacity),
+			getLineColor,
+			getLineWidth: (d, info) => {
+				return getHoverLineWidth(d, info?.index === this.state?.hoverIndex);
+			},
+			lineWidthUnits: "pixels",
+			lineWidthMinPixels: MAP_INTERACTION.LINE_WIDTH_MIN_PIXELS,
+			lineWidthMaxPixels: 20,
+			pointType: hasIcons ? "icon" : "circle",
+			getPointRadius: (d) => {
+				return d.properties?.styleProperties?.icon?.size ?? 2;
+			},
+			pointRadiusUnits: "pixels",
+			...hasIcons && iconAtlas ? { iconAtlas } : {},
+			...hasIcons && iconMapping ? { iconMapping } : {},
+			...hasIcons ? {
+				getIcon: (d) => d.properties?.styleProperties?.icon?.name ?? "marker",
+				getIconSize: (d) => {
+					return d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE;
+				},
+				getIconColor: getLineColor,
+				getIconPixelOffset: (d) => {
+					return [-1, -(d.properties?.styleProperties?.icon?.size ?? MAP_INTERACTION.ICON_SIZE) / 2];
+				},
+				iconBillboard: false
+			} : {},
+			extensions: [new PathStyleExtension({ dash: true })],
+			getDashArray: (d) => {
+				if (d.properties?.shapeId === selectedShapeId) return DASH_ARRAYS.dotted;
+				return getDashArray(d);
+			},
+			pickable,
+			autoHighlight: false,
+			updateTriggers: {
+				getFillColor: [features, applyBaseOpacity],
+				getLineColor: [features],
+				getLineWidth: [features, this.state?.hoverIndex],
+				getDashArray: [features, selectedShapeId],
+				getPointRadius: [features],
+				...hasIcons ? {
+					getIcon: [features],
+					getIconSize: [features],
+					getIconColor: [features],
+					getIconPixelOffset: [features]
+				} : {}
+			}
+		});
+	}
+	/**
+	* Render labels layer
+	* Supports three modes:
+	* - 'always': Show labels for all shapes
+	* - 'hover': Show label only for the currently hovered shape
+	* - 'never': No labels
+	*/
+	renderLabelsLayer() {
+		const { showLabels, data, labelOptions } = this.props;
+		if (showLabels === "never") return null;
+		let labelData = data;
+		if (showLabels === "hover") {
+			const hoverIndex = this.state?.hoverIndex;
+			if (hoverIndex === void 0) return null;
+			const hoveredShape = data[hoverIndex];
+			labelData = hoveredShape ? [hoveredShape] : [];
+		}
+		if (labelData.length === 0) return null;
+		return createShapeLabelLayer({
+			id: `${this.props.id}-${SHAPE_LAYER_IDS.DISPLAY_LABELS}`,
+			data: labelData,
+			labelOptions
+		});
+	}
+	/**
+	* Render all sublayers
+	*/
+	renderLayers() {
+		const features = this.getFeaturesWithId();
+		return [
+			this.renderHighlightLayer(features),
+			this.renderCoffinCornersLayer(features),
+			this.renderMainLayer(features),
+			this.renderLabelsLayer()
+		].filter(Boolean);
+	}
+};
+
+//#endregion
+export { DisplayShapeLayer };
+//# sourceMappingURL=index.js.map