/** * The `eox-drawtools` element provides a comprehensive set of drawing, editing, selection, and import tools for vector features on an `eox-map`. It supports drawing multiple feature types (Polygon, Box, Point, Circle, LineString), continuous drawing, feature modification, selection from existing layers, and import/export in various formats (GeoJSON, WKT, native OL feature). * * Key features: * - Draw polygons, boxes, points, circles, and lines on the map * - Draw multiple features at once (set `multiple-features`) * - Continuous drawing mode (set `continuous`) * - Modify drawn features (set `allow-modify`) * - Select features from a specified layer (`layer-id`) * - Display a list of drawn/selected features (`show-list`) * - Edit features as GeoJSON in a text editor (`show-editor`) * - Import features via drag-and-drop or file upload (`import-features`) * - Emit drawn features in different formats (`format`: `feature`, `geojson`, `wkt`) * - Emit features in a specified projection (`projection`) * - Customizable feature styles (`featureStyles`) * - Unstyled and no-shadow variants for easy integration * * Usage examples and visual demos are available in Storybook stories, including scenarios for multi-feature drawing, feature modification, selection, import/export, continuous drawing, format and projection control, and style customization. * * @element eox-drawtools */ export class EOxDrawTools extends LitElement { static get properties(): { allowModify: { attribute: string; type: BooleanConstructor; }; for: { type: StringConstructor; }; currentlyDrawing: { attribute: boolean; state: boolean; type: BooleanConstructor; }; continuous: { type: BooleanConstructor; }; draw: { attribute: boolean; state: boolean; }; drawLayer: { attribute: boolean; state: boolean; }; drawnFeatures: { attribute: boolean; state: boolean; type: ArrayConstructor; }; featureName: { attribute: string; type: StringConstructor; }; featureNameKey: { attribute: string; type: StringConstructor; }; layerId: { attribute: string; type: StringConstructor; }; featureStyles: { attribute: boolean; }; modify: { attribute: boolean; state: boolean; }; multipleFeatures: { attribute: string; type: BooleanConstructor; }; measure: { type: BooleanConstructor; }; importFeatures: { attribute: string; type: BooleanConstructor; }; showEditor: { attribute: string; type: BooleanConstructor; }; showList: { attribute: string; type: BooleanConstructor; }; projection: { type: StringConstructor; }; noShadow: { attribute: string; type: BooleanConstructor; }; format: { type: StringConstructor; }; type: { type: StringConstructor; }; unstyled: { type: BooleanConstructor; }; }; /** * Allow modifying the drawn feature(s) */ allowModify: boolean; /** * Query selector of an `eox-map` (`String`, passed as an attribute or property) * or an `eox-map` DOM element (`HTMLElement`, passed as property) * * @type {String|HTMLElement} */ for: string | HTMLElement; /** * Whether the user is currently in the process of drawing or not */ currentlyDrawing: boolean; /** * The current native OpenLayers `draw` interaction * @type import("ol/interaction").Draw | import("@eox/map").EOxMap["selectInteractions"][string] */ draw: import("ol/interaction").Draw | import("@eox/map").EOxMap["selectInteractions"][string]; /** * The current native OpenLayers draw `layer` (initialized with a `zIndex` of 100) * @type import("ol/layer/Vector").default */ drawLayer: import("ol/layer/Vector").default; /** * Enables selection mode for the passed layer * @type {string} */ set layerId(value: string); get layerId(): string; /** * The display name of drawn features, shown e.g. in the feature list. */ featureName: string; /** * The key of the property to display in the feature list. */ featureNameKey: any; /** * Flat styles for the drawn/selected features * @type {{ * layer?: import("ol/style/flat").FlatStyleLike * hover?: import("ol/style/flat").FlatStyleLike * click?: import("ol/style/flat").FlatStyleLike * } | null} */ featureStyles: { layer?: import("ol/style/flat").FlatStyleLike; hover?: import("ol/style/flat").FlatStyleLike; click?: import("ol/style/flat").FlatStyleLike; } | null; /** * The current native OpenLayers `modify` interaction * @type import("ol/interaction").Modify */ modify: import("ol/interaction").Modify; /** * Allow adding more than one feature at a time */ multipleFeatures: boolean; /** * Display area/line measurement for the drawn features. * When enabled, a "measure" property is added to each drawn feature's properties, * containing the calculated area (for Polygons and Circles) or length (for LineStrings). * This measurement is also displayed as a text label on the map using OpenLayers flat styles. */ measure: boolean; /** * Allow import features using drag-drop and upload button */ importFeatures: boolean; /** * Show geo-json editor for draw tool */ showEditor: boolean; /** * Show list of features */ showList: boolean; /** * Projection of the emitted drawn features */ projection: string; /** * Type of the drawn feature * @type {"Polygon" | "Point" | "LineString" | "Circle" | "Box"} */ type: "Polygon" | "Point" | "LineString" | "Circle" | "Box"; /** * @type {ReturnType} */ selectionEvents: ReturnType; /** * The format in which the drawn features should be emitted * * @default "feature" * @type {"feature"| "geojson" | "wkt"} */ format: "feature" | "geojson" | "wkt"; /** * Render the element without additional styles */ unstyled: boolean; /** * Renders the element without a shadow root * * @type {Boolean} */ noShadow: boolean; /** * Enables the user to draw continuously one feature after another * without having to discard previous ones manually * @type {boolean} */ set continuous(value: boolean); get continuous(): boolean; /** * Used internally to update the drawnFeatures state without overwriting the map layer source. * @param {Array} features */ setDrawnFeaturesInternal(features: Array): void; /** * The array of drawn native OpenLayers features. Normally includes only one feature, until multiple feature drawing is enabled. * Pass features to be drawn on the map by setting this property. The features should be in the same projection as the map, or a projection should be specified via the `projection` property for proper transformation. * @type {Array} */ set drawnFeatures(features: import("ol").Feature[]); get drawnFeatures(): import("ol").Feature[]; /** * @onClick Event handler triggered to start drawing on the map. */ startDrawing(): void; /** * @onClick Event handler triggered to discard/stop drawing * on the map and delete the drawn shapes. */ discardDrawing(): void; /** * @param {string} text - The string representation of the features to be parsed. * @param {boolean} replaceFeatures - A boolean flag indicating whether to replace the existing features. * @param {boolean} animate - A boolean flag indicating whether to animate the map on feature change. */ handleFeatureChange(text: string, replaceFeatures?: boolean, animate?: boolean): void; /** * @param {DragEvent | InputEvent & { target: HTMLInputElement }} evt - The event object from the file input interaction. */ handleFilesChange(evt: DragEvent | (InputEvent & { target: HTMLInputElement; })): void; /** * @event onModifyEnd triggered when the modification of a shape is completed. */ onModifyEnd(): void; /** * Update #geoJSON with stringify feature. */ updateGeoJSON(): void; /** * Triggers different events when the drawing of a shape is completed. */ emitDrawnFeatures(): void; /** * initializes the EOxMap and OlMap instances * And stores them in the private properties #eoxMap and #olMap, respectively. */ updateLayer(): void; resetLayer: (EoxDrawTool: import("./main").EOxDrawTools) => void; set eoxMap(value: import("@eox/map").EOxMap); /** * The eox-map instance associated with the draw tools * @type {import("@eox/map").EOxMap} */ get eoxMap(): import("@eox/map").EOxMap; /** * initializes the EOxMap and OlMap instances * And stores them in the private properties #eoxMap and #olMap, respectively. * It then calls requestUpdate to trigger a re-render. */ firstUpdated(): void; updated(changedProperties: any): void; render(): import("lit-html").TemplateResult<1>; #private; } import { LitElement } from "lit"; //# sourceMappingURL=main.d.ts.map