Add Draw API (#23)

* WIP tool selection

* Build docs

* Update documentation shape

* Reduce type duplication

* Update Input type for tool settings

* Refine types and docs further

* Fix issue reporting errors from Felt when return type is string

* Update API definition

* Remove unwanted API

* Improve documentation

* docs(changeset): Adds APIs to use Felt's drawing tools on read-only maps

.changeset/few-cats-fix.md

@@ -0,0 +1,5 @@
+---
+"@feltmaps/js-sdk": minor
+---
+
+Adds APIs to use Felt's drawing tools on read-only maps

docs/Main/FeltController.md

@@ -10,7 +10,7 @@ own to make it easier to find related methods and events.
 
 ## Extends
 
-* [`ViewportController`](../Viewport/ViewportController.md).[`UiController`](../UI/UiController.md).[`LayersController`](../Layers/LayersController.md).[`ElementsController`](../Elements/ElementsController.md).[`SelectionController`](../Selection/SelectionController.md).[`InteractionsController`](../Interactions/InteractionsController.md)
+* [`ViewportController`](../Viewport/ViewportController.md).[`UiController`](../UI/UiController.md).[`LayersController`](../Layers/LayersController.md).[`ElementsController`](../Elements/ElementsController.md).[`SelectionController`](../Selection/SelectionController.md).[`InteractionsController`](../Interactions/InteractionsController.md).[`ToolsController`](../Tools/ToolsController.md)
 
 ## Properties
 
@@ -696,6 +696,151 @@ felt.clearSelection({ elements: true });
 
 ***
 
+### setTool()
+
+> **setTool**(`tool`: `null` | `"note"` | `"pin"` | `"line"` | `"route"` | `"polygon"` | `"circle"` | `"marker"` | `"highlighter"` | `"text"` | `"link"`): `void`
+
+Sets the tool to use for drawing elements on the map.
+
+#### Parameters
+
+| Parameter | Type                                                                                                                                         | Description      |
+| --------- | -------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- |
+| `tool`    | `null` \| `"note"` \| `"pin"` \| `"line"` \| `"route"` \| `"polygon"` \| `"circle"` \| `"marker"` \| `"highlighter"` \| `"text"` \| `"link"` | The tool to set. |
+
+#### Returns
+
+`void`
+
+#### Example
+
+```ts
+// Set the tool to "marker"
+felt.setTool("marker");
+
+// put down the tool
+felt.setTool(null);
+```
+
+***
+
+### getTool()
+
+> **getTool**(): `Promise`\<`null` | `"note"` | `"pin"` | `"line"` | `"route"` | `"polygon"` | `"circle"` | `"marker"` | `"highlighter"` | `"text"` | `"link"`>
+
+Gets the current tool, if any is in use.
+
+#### Returns
+
+`Promise`\<`null` | `"note"` | `"pin"` | `"line"` | `"route"` | `"polygon"` | `"circle"` | `"marker"` | `"highlighter"` | `"text"` | `"link"`>
+
+The current tool, or `null` if no tool is in use.
+
+#### Example
+
+```ts
+const tool = await felt.getTool(); // "marker", "polygon", etc.
+```
+
+***
+
+### onToolChange()
+
+> **onToolChange**(`args`: \{ `handler`: (`tool`: `null` | `"note"` | `"pin"` | `"line"` | `"route"` | `"polygon"` | `"circle"` | `"marker"` | `"highlighter"` | `"text"` | `"link"`) => `void`; }): `VoidFunction`
+
+Listens for changes to the current tool.
+
+#### Parameters
+
+| Parameter      | Type                                                                                                                                                                              | Description                                                              |
+| -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `args`         | \{ `handler`: (`tool`: `null` \| `"note"` \| `"pin"` \| `"line"` \| `"route"` \| `"polygon"` \| `"circle"` \| `"marker"` \| `"highlighter"` \| `"text"` \| `"link"`) => `void`; } | -                                                                        |
+| `args.handler` | (`tool`: `null` \| `"note"` \| `"pin"` \| `"line"` \| `"route"` \| `"polygon"` \| `"circle"` \| `"marker"` \| `"highlighter"` \| `"text"` \| `"link"`) => `void`                  | This callback is called with the current tool whenever the tool changes. |
+
+#### Returns
+
+`VoidFunction`
+
+A function to unsubscribe from the listener
+
+#### Example
+
+```ts
+const unsubscribe = felt.onToolChange({
+  handler: tool => console.log(tool),
+});
+
+// later on...
+unsubscribe();
+```
+
+***
+
+### setToolSettings()
+
+> **setToolSettings**(`settings`: [`InputToolSettings`](../Tools/InputToolSettings.md)): `void`
+
+Sets the settings for the current tool.
+
+#### Parameters
+
+| Parameter  | Type                                                 | Description          |
+| ---------- | ---------------------------------------------------- | -------------------- |
+| `settings` | [`InputToolSettings`](../Tools/InputToolSettings.md) | The settings to set. |
+
+#### Returns
+
+`void`
+
+***
+
+### getToolSettings()
+
+> **getToolSettings**\<`T`>(`tool`: `T`): `Promise`\<[`ToolSettingsMap`](../Tools/ToolSettingsMap.md)\[`T`]>
+
+Gets the settings for the current tool.
+
+#### Type Parameters
+
+| Type Parameter                                                       |
+| -------------------------------------------------------------------- |
+| `T` *extends* keyof [`ToolSettingsMap`](../Tools/ToolSettingsMap.md) |
+
+#### Parameters
+
+| Parameter | Type |
+| --------- | ---- |
+| `tool`    | `T`  |
+
+#### Returns
+
+`Promise`\<[`ToolSettingsMap`](../Tools/ToolSettingsMap.md)\[`T`]>
+
+The settings for the current tool.
+
+***
+
+### onToolSettingsChange()
+
+> **onToolSettingsChange**(`args`: \{ `handler`: (`settings`: [`ToolSettingsChangeEvent`](../Tools/ToolSettingsChangeEvent.md)) => `void`; }): `VoidFunction`
+
+Listens for changes to the settings on all tools.
+
+#### Parameters
+
+| Parameter      | Type                                                                                                      |
+| -------------- | --------------------------------------------------------------------------------------------------------- |
+| `args`         | \{ `handler`: (`settings`: [`ToolSettingsChangeEvent`](../Tools/ToolSettingsChangeEvent.md)) => `void`; } |
+| `args.handler` | (`settings`: [`ToolSettingsChangeEvent`](../Tools/ToolSettingsChangeEvent.md)) => `void`                  |
+
+#### Returns
+
+`VoidFunction`
+
+A function to unsubscribe from the listener
+
+***
+
 ### updateUiControls()
 
 > **updateUiControls**(`controls`: [`UiControlsOptions`](../UI/UiControlsOptions.md)): `void`

docs/README.md

@@ -8,5 +8,6 @@
 * [Main](Main/README.md)
 * [Selection](Selection/README.md)
 * [Shared](Shared/README.md)
+* [Tools](Tools/README.md)
 * [UI](UI/README.md)
 * [Viewport](Viewport/README.md)

docs/Tools/CircleToolSettings.md

@@ -0,0 +1,37 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### fillOpacity
+
+> **fillOpacity**: `number`
+
+***
+
+### strokeOpacity
+
+> **strokeOpacity**: `number`
+
+***
+
+### strokeWidth
+
+> **strokeWidth**: `number`
+
+***
+
+### strokeStyle
+
+> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"`
+
+***
+
+### radiusMarker
+
+> **radiusMarker**: `boolean`

docs/Tools/ConfigurableToolType.md

@@ -0,0 +1,3 @@
+***
+
+> **ConfigurableToolType**: keyof [`ToolSettingsMap`](ToolSettingsMap.md)

docs/Tools/HighlighterToolSettings.md

@@ -0,0 +1,19 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### opacity
+
+> **opacity**: `number`
+
+***
+
+### size
+
+> **size**: `number`

docs/Tools/InputToolSettings.md

@@ -0,0 +1,3 @@
+***
+
+> **InputToolSettings**: `{ [K in ConfigurableToolType]: Partial<ToolSettingsMap[K]> & { tool: K } }`\[[`ConfigurableToolType`](ConfigurableToolType.md)]

docs/Tools/LineToolSettings.md

@@ -0,0 +1,31 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### strokeOpacity
+
+> **strokeOpacity**: `number`
+
+***
+
+### strokeWidth
+
+> **strokeWidth**: `number`
+
+***
+
+### strokeStyle
+
+> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"`
+
+***
+
+### distanceMarker
+
+> **distanceMarker**: `boolean`

docs/Tools/MarkerToolSettings.md

@@ -0,0 +1,19 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### opacity
+
+> **opacity**: `number`
+
+***
+
+### size
+
+> **size**: `number`

docs/Tools/NoteToolSettings.md

@@ -0,0 +1,19 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### align
+
+> **align**: `"left"` | `"center"` | `"right"`
+
+***
+
+### style
+
+> **style**: `"italic"` | `"light"` | `"regular"` | `"caps"`

docs/Tools/PinFrame.md

@@ -0,0 +1,3 @@
+***
+
+> **PinFrame**: `"frame-circle"` | `"frame-square"` | `null`

docs/Tools/PinSymbol.md

@@ -0,0 +1,3 @@
+***
+
+> **PinSymbol**: `"dot"` | `"square"` | `"diamond"` | `"triangle"` | `"x"` | `"plus"` | `"circle-line"` | `"circle-slash"` | `"star"` | `"heart"` | `"hexagon"` | `"octagon"` | `"pedestrian"` | `"bicycle"` | `"wheelchair"` | `"airport"` | `"car"` | `"bus"` | `"train"` | `"truck"` | `"ferry"` | `"sailboat"` | `"electric-service"` | `"gas-service"` | `"blood-clinic"` | `"badge"` | `"traffic-light"` | `"traffic-cone"` | `"road-sign-caution"` | `"person"` | `"restroom"` | `"house"` | `"work"` | `"letter"` | `"hotel"` | `"factory"` | `"hospital"` | `"religious-facility"` | `"school"` | `"government"` | `"university"` | `"bank"` | `"landmark"` | `"museum"` | `"clothing"` | `"shopping"` | `"store"` | `"bar"` | `"pub"` | `"cafe"` | `"food"` | `"park"` | `"amusement-park"` | `"camping-tent"` | `"cabin"` | `"picnic"` | `"water-refill"` | `"trailhead"` | `"guidepost"` | `"viewpoint"` | `"camera"` | `"us-football"` | `"football"` | `"tennis"` | `"binoculars"` | `"swimming"` | `"zap"` | `"battery-full"` | `"battery-half"` | `"battery-low"` | `"boom"` | `"radar"` | `"wind-turbine"` | `"solar-panel"` | `"antenna"` | `"telephone-pole"` | `"oil-well"` | `"oil-barrel"` | `"railroad-track"` | `"bridge"` | `"lighthouse"` | `"lock-closed"` | `"lock-open"` | `"wifi"` | `"trash"` | `"recycle"` | `"tree"` | `"flower"` | `"leaf"` | `"fire"` | `"mountain"` | `"snowy-mountain"` | `"volcano"` | `"island"` | `"wave"` | `"hot-springs"` | `"water"` | `"lake"` | `"ocean"` | `"animal"` | `"bird"` | `"duck"` | `"dog"` | `"fish"` | `"beach"` | `"wetland"` | `"sun"` | `"moon"` | `"cloud"` | `"partial-sun"` | `"rain"` | `"lightning"` | `"snowflake"` | `"wind"` | `"snow"` | `"fog"` | `"sleet"` | `"hurricane"` | `"warning"` | `"parking"` | `"info"` | `"circle-exclamation"` | `"circle-triangle"` | `"circle-x"` | `"circle-plus"` | `` `:${string}:` `` & \{}

docs/Tools/PinToolSettings.md

@@ -0,0 +1,19 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### frame
+
+> **frame**: `null` | `"frame-circle"` | `"frame-square"`
+
+***
+
+### symbol
+
+> **symbol**: [`PinSymbol`](PinSymbol.md)

docs/Tools/PolygonToolSettings.md

@@ -0,0 +1,37 @@
+***
+
+## Properties
+
+### color
+
+> **color**: `string`
+
+***
+
+### fillOpacity
+
+> **fillOpacity**: `number`
+
+***
+
+### strokeOpacity
+
+> **strokeOpacity**: `number`
+
+***
+
+### strokeWidth
+
+> **strokeWidth**: `number`
+
+***
+
+### strokeStyle
+
+> **strokeStyle**: `"solid"` | `"dashed"` | `"dotted"`
+
+***
+
+### areaMarker
+
+> **areaMarker**: `boolean`