From 72cebf4017e634efbdf9196d27b4bbf1704aec14 Mon Sep 17 00:00:00 2001 From: Max Nowack Date: Fri, 7 Jan 2022 15:54:42 +0100 Subject: [PATCH] chore: implement typescript types --- package-lock.json | 49 +++++++++++ package.json | 4 + src/index.d.ts | 208 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 261 insertions(+) create mode 100644 src/index.d.ts diff --git a/package-lock.json b/package-lock.json index 4467a5c..62a26d2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1863,6 +1863,12 @@ "integrity": "sha512-iaIVzr+w2ZJ5HkidlZ3EJM8VTZb2MJLCjw3V+505yVts0gRC4UMvjw0d1HPtGqI/HQC/KdsYtayfzl+AXY2R8g==", "dev": true }, + "@types/geojson": { + "version": "7946.0.8", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.8.tgz", + "integrity": "sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA==", + "dev": true + }, "@types/glob": { "version": "7.1.2", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.2.tgz", @@ -1910,6 +1916,25 @@ "integrity": "sha1-7ihweulOEdK4J7y+UnC86n8+ce4=", "dev": true }, + "@types/mapbox-gl": { + "version": "2.6.0", + "resolved": "https://registry.npmjs.org/@types/mapbox-gl/-/mapbox-gl-2.6.0.tgz", + "integrity": "sha512-lHdITzC0IVn9+Pq6WFkkK0N6rUKIqxsdrNeixiQdvROFn2Aeu3TDvhpuag1IdengL5WGGRuEhK6m6HB916ReLw==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, + "@types/mapbox__mapbox-gl-draw": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/@types/mapbox__mapbox-gl-draw/-/mapbox__mapbox-gl-draw-1.2.3.tgz", + "integrity": "sha512-S4Pm3w19S8mduiPgoeSt1UQ4BoqrObJtQRQpkD21hGHb6VsRy3VrD7ZCoC7/r5zwnjsGXhbUqy3lg1mGcI6QzQ==", + "dev": true, + "requires": { + "@types/geojson": "*", + "@types/mapbox-gl": "*" + } + }, "@types/minimatch": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.3.tgz", @@ -1940,12 +1965,36 @@ "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==", "dev": true }, + "@types/prop-types": { + "version": "15.7.4", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz", + "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==", + "dev": true + }, "@types/q": { "version": "1.5.4", "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.4.tgz", "integrity": "sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==", "dev": true }, + "@types/react": { + "version": "16.9.56", + "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.56.tgz", + "integrity": "sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "csstype": "^3.0.2" + }, + "dependencies": { + "csstype": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz", + "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==", + "dev": true + } + } + }, "@types/resolve": { "version": "0.0.8", "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-0.0.8.tgz", diff --git a/package.json b/package.json index 96cb624..e7afd7b 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,9 @@ }, "main": "dist/react-map-gl-draw.cjs.js", "module": "dist/react-map-gl-draw.esm.js", + "types": "src/index.d.ts", "files": [ + "src/index.d.ts", "dist" ], "scripts": { @@ -31,6 +33,8 @@ "@babel/plugin-proposal-class-properties": "^7.10.1", "@babel/preset-flow": "^7.10.1", "@mapbox/mapbox-gl-draw": "^1.2.0", + "@types/mapbox__mapbox-gl-draw": "^1.2.3", + "@types/react": "^16.9.56", "@urbica/react-map-gl": "^1.14.2", "eslint-config-urbica": "^3.0.0", "flow-bin": "^0.97", diff --git a/src/index.d.ts b/src/index.d.ts new file mode 100644 index 0000000..b597ba9 --- /dev/null +++ b/src/index.d.ts @@ -0,0 +1,208 @@ +import { PureComponent } from 'react' +import MapboxDraw from '@mapbox/mapbox-gl-draw' + +type Props = { + /** Draw controls position */ + position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right', + + /** Whether or not to enable keyboard interactions for drawing. */ + keybindings?: boolean, + + /** Whether or not to enable touch interactions for drawing. */ + touchEnabled?: boolean, + + /** + * Whether or not to enable box selection of features with shift+click+drag. + * If false, shift+click+drag zooms into an area. + */ + boxSelect?: boolean, + + /** + * Number of pixels around any feature or vertex (in every direction) + * that will respond to a click. + */ + clickBuffer?: number, + + /** + * Number of pixels around any feature of vertex (in every direction) + * that will respond to a touch. + */ + touchBuffer?: number, + + /** Hide or show Point Control. */ + pointControl?: boolean, + + /** Hide or show Line String Control. */ + lineStringControl?: boolean, + + /** Hide or show Polygon Control. */ + polygonControl?: boolean, + + /** Hide or show Trash Control. */ + trashControl?: boolean, + + /** Hide or show Combine Features Control. */ + combineFeaturesControl?: boolean, + + /** Hide or show Uncombine Features Control. */ + uncombineFeaturesControl?: boolean, + + /** + * The default value for controls. For example, if you would like all + * controls to be off by default, and specify a whitelist with controls, + * use displayControlsDefault: false. + */ + displayControlsDefault?: boolean, + + /** An array of map style objects. */ + styles?: Array, + + /** + * Over ride the default modes with your own. + * Can accepts a function. That function will receive the default modes as the + * first argument + */ + modes?: Object | Function, + + /** The mode that will used. */ + mode?: String, + + /** The mode options. */ + modeOptions?: Object, + + /** + * Properties of a feature will also be available for styling + * and prefixed with user_, e.g., ['==', 'user_custom_label', 'Example'] + */ + userProperties?: boolean, + + /** Valid geoJSON to edit with Draw. */ + data?: Object, + + /** + * Fired when a feature is created. + * The following interactions will trigger this event: + * • Finish drawing a feature. Simply clicking will create a Point. + * A LineString or Polygon is only created when the user + * has finished drawing it — i.e. double-clicked the last vertex + * or hit Enter — and the drawn feature is valid. + */ + onDrawCreate?: Function, + + /** + * Fired when one or more features are deleted. + * The following interactions will trigger this event: + * • Click the trash button when one or more features are selected + * in simple_select mode. + * • Hit the Backspace or Delete keys when one or features are selected + * in simple_select mode. + * • Invoke draw.trash() when you have a feature selected in + * simple_select mode. + */ + onDrawDelete?: Function, + + /** + * Fired when features are combined. The following interactions will + * trigger this event: + * • Click the Combine button when more than one features are selected + * in simple_select mode. + * • Invoke draw.combineFeatures() when more than one features are selected + * in simple_select mode. + */ + onDrawCombine?: Function, + + /** + * Fired when features are uncombined. The following interactions will + * trigger this event: + * • Click the Uncombine button when one or more multifeatures are selected + * in simple_select mode. Non-multifeatures may also be selected. + * • Invoke draw.uncombineFeatures() when one or more multifeatures are + * selected in simple_select mode. Non-multifeatures may also be selected. + */ + onDrawUncombine?: Function, + + /** + * Fired when one or more features are updated. The following interactions + * will trigger this event, which can be subcategorized by action: + * • `action: 'move'` + * • Finish moving one or more selected features in `simple_select` mode. + * The event will only fire when the movement is finished + * (i.e. when the user releases the mouse button or hits Enter). + * • `action: 'change_coordinates'` + * • Finish moving one or more vertices of a selected feature in + * `direct_select` mode. The event will only fire when the movement + * is finished (i.e. when the user releases the mouse button or + * hits Enter, or her mouse leaves the map container). + * • Delete one or more vertices of a selected feature in `direct_select` + * mode, which can be done by hitting the Backspace or Delete keys, + * clicking the Trash button, or invoking draw.trash(). + * • Add a vertex to the selected feature by clicking a midpoint on that + * feature in direct_select mode. + * This event will not fire when a feature is created or deleted. To track + * those interactions, listen for draw.create and draw.delete events. + */ + onDrawUpdate?: Function, + + /** + * Fired when the selection is changed (i.e. one or more features are selected + * or deselected). The following interactions will trigger this event: + * • Click on a feature to select it. + * • When a feature is already selected, shift-click on another feature to add + * it to the selection. + * • Click on a vertex to select it. + * • When a vertex is already selected, shift-click on another vertex to add + * it to the selection. + * • Create a box-selection that includes at least one feature. + * • Click outside the selected feature(s) to deselect. + * • Click away from the selected vertex(s) to deselect. + * • Finish drawing a feature (features are selected just after they are + * created). + * • When a feature is already selected, invoke draw.changeMode() such that + * the feature becomes deselected. + * • Use `draw.changeMode('simple_select', { featureIds: [..] })` to switch to + * `simple_select` mode and immediately select the specified features. + * • Use `draw.delete`, `draw.deleteAll` or `draw.trash` to delete feature(s). + */ + onDrawSelectionChange?: Function, + + /** + * Fired when the mode is changed. The following interactions will trigger + * this event: + * • Click the point, line, or polygon buttons to begin drawing (enter a + * `draw_*` mode). + * • Finish drawing a feature (enter `simple_select` mode). + * • While in `simple_select` mode, click on an already selected feature + * (enter `direct_select` mode). + * • While in `direct_select` mode, click outside all features (enter + * `simple_select` mode). + * This event is fired just after the current mode stops and just before + * the next mode starts. A render will not happen until after all event + * handlers have been triggered, so you can force a mode redirect by calling + * `draw.changeMode()` inside a `draw.modechange` handler. + */ + onDrawModeChange?: Function, + + /** + * Fired just after Draw calls `setData()` on the Mapbox GL JS map. This does + * not imply that the set data call has finished updating the map, just that + * the map is being updated. + */ + onDrawRender?: Function, + + /** + * Fired as the state of Draw changes to enable and disable different actions. + * Following this event will enable you know if `draw.trash()`, + * `draw.combineFeatures()` and draw.uncombineFeatures() will have an effect. + */ + onDrawActionable?: Function, + + /** + * Fired when features are changed. (`draw.create`, `draw.delete`, + * `draw.combine`, `draw.uncombine`, `draw.update`). + */ + onChange?: Function +} + +export default class Draw extends PureComponent { + getDraw(): MapboxDraw +}