basic documentation for edit modes

geoman-io · dailyprice · Aug 21, 2024 · Aug 21, 2024 · Aug 21, 2024 · Sep 18, 2024
commit aeb14aadb8f4af9e574850a875d9d36f8244bf29
diff --git a/docs/draw-modes/00-draw-marker.mdx b/docs/draw-modes/00-draw-marker.mdx
@@ -10,6 +10,6 @@ You can enable Marker Mode on your map to allow users to draw marker geometries.
 
 ## Live Marker Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawMarkerOptions } from '../../src/components/examles/mode-options';
+import { drawMarkerOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawMarkerOptions} />
diff --git a/docs/draw-modes/01-draw-circle_marker.mdx b/docs/draw-modes/01-draw-circle_marker.mdx
@@ -10,6 +10,6 @@ You can enable Circle Marker Mode on your map to allow users to draw circle mark
 
 ## Live Circle Marker Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawCircleMarkerOptions } from '../../src/components/examles/mode-options';
+import { drawCircleMarkerOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawCircleMarkerOptions} />
diff --git a/docs/draw-modes/02-draw-text_marker.mdx b/docs/draw-modes/02-draw-text_marker.mdx
@@ -10,6 +10,6 @@ You can enable Text Marker Mode on your map to allow users to draw text marker g
 
 ## Live Text Marker Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawTextMarkerOptions } from '../../src/components/examles/mode-options';
+import { drawTextMarkerOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawTextMarkerOptions} />
diff --git a/docs/draw-modes/03-draw-circle.mdx b/docs/draw-modes/03-draw-circle.mdx
@@ -10,6 +10,6 @@ You can enable Circle Mode on your map to allow users to draw circle geometries.
 
 ## Live Circle Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawCircleOptions } from '../../src/components/examles/mode-options';
+import { drawCircleOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawCircleOptions} />
diff --git a/docs/draw-modes/04-draw-line.mdx b/docs/draw-modes/04-draw-line.mdx
@@ -10,6 +10,6 @@ You can enable Line Mode on your map to allow users to draw line geometries.
 
 ## Live Line Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawLineOptions } from '../../src/components/examles/mode-options';
+import { drawLineOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawLineOptions} />
diff --git a/docs/draw-modes/05-draw-rectangle.mdx b/docs/draw-modes/05-draw-rectangle.mdx
@@ -10,6 +10,6 @@ You can enable Rectangle Mode on your map to allow users to draw rectangle geome
 
 ## Live Rectangle Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawRectangleOptions } from '../../src/components/examles/mode-options';
+import { drawRectangleOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawRectangleOptions} />
diff --git a/docs/draw-modes/06-draw-polygon.mdx b/docs/draw-modes/06-draw-polygon.mdx
@@ -10,6 +10,6 @@ You can enable Polygon Mode on your map to allow users to draw polygon geometrie
 
 ## Live Polygon Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { drawPolygonOptions } from '../../src/components/examles/mode-options';
+import { drawPolygonOptions } from '../../src/components/examples/mode-options';
 
 <BrowserOnlyGmMap gmOptions={drawPolygonOptions} />
diff --git a/docs/edit-modes/00-edit-drag.mdx b/docs/edit-modes/00-edit-drag.mdx
@@ -4,14 +4,52 @@ title: "Drag"
 
 ## Drag Mode
 
-You can enable Drag Mode on your map to allow users to drag geometries.
+You can enable Drag Mode for all layers on a map like this:
 
-<!-- Add detailed documentation and code examples for Drag Mode here -->
+```js
+// Enable Drag Mode like this:
+map.gm.enableGlobalDragMode();
+
+// Or like this:
+map.gm.options.enableMode('edit', 'drag');
+```
+
+
+The following methods are available on `map.gm`:
+
+| Method                                                            | Returns   | Description                   |
+|:------------------------------------------------------------------| :-------- | :-----------------------------|
+| `enableGlobalDragMode()`  | -         | Enables global Drag Mode.                                             |
+| `disableGlobalDragMode()` | -         | Disables global Drag Mode.                                            |
+| `toggleGlobalDragMode()`  | -         | Toggles global Drag Mode.                                             |
+| `globalDragModeEnabled()` | `Boolean` | Returns `true` if global Drag Mode is enabled. `false` when disabled. |
+
+The following events are available on a map instance:
+
+| Event          | Params | Description                                  | Output                    |
+| :------------- | :----- | :------------------------------------------- | :-------------------------|
+| `gm:dragstart` | `event`| Fired when a layer starts being dragged.     | `map`, `feature`, `shape` |
+| `gm:drag`      | `event`| Fired when a layer is dragged.               | `map`, `feature`, `shape` |
+| `gm:dragend`   | `event`| Fired when a layer stops being dragged.      | `map`, `feature`, `shape` |
+
+The following events are available on a map instance:
+
+| Event                    | Params | Description                      | Output                 |
+| :----------------------- | :----- | :------------------------------- | :--------------------- |
+| `gm:globaldragmodetoggled` | `event`    | Fired when Drag Mode is toggled. | `enabled`, `map` |
+
+You can also listen to specific Drag Mode events on the map instance like this:
+
+```js
+map.on('gm:globaldragmodetoggled', (event) => {
+  console.log(event);
+});
+```
 
 ## Live Drag Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { editDragOptions } from '../../src/components/examles/mode-options';
-import features from '../../src/components/examles/geojson/basic-edit.json';
+import { editDragOptions } from '../../src/components/examples/mode-options';
+import features from '../../src/components/examples/geojson/basic-edit.json';
 
 <BrowserOnlyGmMap
   gmOptions={editDragOptions}

diff --git a/docs/edit-modes/01-edit-change.mdx b/docs/edit-modes/01-edit-change.mdx
@@ -1,19 +1,55 @@
 ---
-title: "Change"
+title: "Edit"
 ---
 
-## Change Mode
+## Edit Mode
 
-You can enable Change Mode on your map to allow users to change geometries.
+You can enable Edit Mode for all layers on a map like this:
 
-<!-- Add detailed documentation and code examples for Change Mode here -->
+```js
+// Enable Edit Mode like this:
+map.gm.enableGlobalEditMode();
 
-## Live Change Example
+// Or like this:
+map.gm.options.enableMode('edit', 'change');
+```
+
+The following methods are available on `map.gm`:
+
+| Method                                                            | Returns   | Description                   |
+|:------------------------------------------------------------------| :-------- | :-----------------------------|
+| `enableGlobalEditMode()`  | -         | Enables global Edit Mode.                                             |
+| `disableGlobalEditMode()` | -         | Disables global Edit Mode.                                            |
+| `toggleGlobalEditMode()`  | -         | Toggles global Edit Mode.                                             |
+| `globalEditModeEnabled()` | `Boolean` | Returns `true` if global Edit Mode is enabled. `false` when disabled. |
+
+The following events are available on a map instance:
+
+| Event                    | Params | Description                                  | Output                    |
+|:-------------------------| :----- | :------------------------------------------- | :-------------------------|
+| `gm:editstart`           | `event`| Fired when a layer starts being changed.     | `map`, `feature`, `shape` |
+| `gm:edit`                | `event`| Fired when a layer is being changed.         | `map`, `feature`, `shape` |
+| `gm:editend`             | `event`| Fired when a layer stops being changed.      | `map`, `feature`, `shape` |
+
+The following events are available on a map instance:
+
+| Event                      | Params  | Description                        | Output                 |
+| :------------------------- | :------ | :--------------------------------- | :--------------------- |
+| `gm:globaleditmodetoggled` | `event`  | Fired when Edit Mode is toggled.  | `enabled`, `map`       |
+
+You can also listen to specific Edit Mode events on the map instance like this:
+
+```js
+map.on('gm:globaleditmodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Live Edit Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { editChangeOptions } from '../../src/components/examles/mode-options';
-import features from '../../src/components/examles/geojson/basic-edit.json';
+import { editChangeOptions } from '../../src/components/examples/mode-options';
+import features from '../../src/components/examples/geojson/basic-edit.json';
 
 <BrowserOnlyGmMap
   gmOptions={editChangeOptions}
   features={features} />
-
diff --git a/docs/edit-modes/02-edit-rotate.mdx b/docs/edit-modes/02-edit-rotate.mdx
@@ -4,14 +4,51 @@ title: "Rotate"
 
 ## Rotate Mode
 
-You can enable Rotate Mode on your map to allow users to rotate geometries.
+You can enable Rotate Mode for all layers on a map like this:
 
-<!-- Add detailed documentation and code examples for Rotate Mode here -->
+```js
+// Enable Rotate Mode like this:
+map.gm.enableGlobalRotateMode();
+
+// Or like this:
+map.gm.options.enableMode('edit', 'rotate');
+```
+
+The following methods are available on `map.gm`:
+
+| Method                                                            | Returns   | Description                   |
+|:------------------------------------------------------------------| :-------- | :-----------------------------|
+| `enableGlobalRotateMode()`  | -         | Enables global Rotate Mode.                                             |
+| `disableGlobalRotateMode()` | -         | Disables global Rotate Mode.                                            |
+| `toggleGlobalRotateMode()`  | -         | Toggles global Rotate Mode.                                             |
+| `globalRotateModeEnabled()` | `Boolean` | Returns `true` if global Rotate Mode is enabled. `false` when disabled. |
+
+The following events are available on a map instance:
+
+| Event            | Params | Description                                  | Output                    |
+| :--------------- | :----- | :------------------------------------------- | :-------------------------|
+| `gm:rotatestart` | `event`| Fired when a layer starts being rotated.     | `map`, `feature`, `shape` |
+| `gm:rotate`      | `event`| Fired when a layer is being rotated.         | `map`, `feature`, `shape` |
+| `gm:rotateend`   | `event`| Fired when a layer stops being rotated.      | `map`, `feature`, `shape` |
+
+The following events are available on a map instance:
+
+| Event                      | Params  | Description                        | Output                 |
+| :------------------------- | :------ | :--------------------------------- | :--------------------- |
+| `gm:globalrotatemodetoggled` | `event`  | Fired when Rotate Mode is toggled.  | `enabled`, `map`       |
+
+You can also listen to specific Rotate Mode events on the map instance like this:
+
+```js
+map.on('gm:globalrotatemodetoggled', (event) => {
+  console.log(event);
+});
+```
 
 ## Live Rotate Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { editRotateOptions } from '../../src/components/examles/mode-options';
-import features from '../../src/components/examles/geojson/basic-edit.json';
+import { editRotateOptions } from '../../src/components/examples/mode-options';
+import features from '../../src/components/examples/geojson/basic-edit.json';
 
 <BrowserOnlyGmMap
   gmOptions={editRotateOptions}

diff --git a/docs/edit-modes/03-edit-scale.mdx b/docs/edit-modes/03-edit-scale.mdx
@@ -4,14 +4,61 @@ title: "Scale"
 
 ## Scale Mode
 
-You can enable Scale Mode on your map to allow users to scale geometries.
+You can enable Scale Mode for all layers on a map like this:
 
-<!-- Add detailed documentation and code examples for Scale Mode here -->
+```js
+// Enable Scale Mode like this:
+map.gm.enableGlobalScaleMode();
+
+// Or like this:
+map.gm.options.enableMode('edit', 'scale');
+```
+
+The following methods are available on `map.gm`:
+
+| Method                                                            | Returns   | Description                   |
+|:------------------------------------------------------------------| :-------- | :-----------------------------|
+| `enableGlobalScaleMode()`  | -         | Enables global Scale Mode.                                             |
+| `disableGlobalScaleMode()` | -         | Disables global Scale Mode.                                            |
+| `toggleGlobalScaleMode()`  | -         | Toggles global Scale Mode.                                             |
+| `globalScaleModeEnabled()` | `Boolean` | Returns `true` if global Scale Mode is enabled. `false` when disabled. |
+
+The following events are available on a map instance:
+
+| Event            | Params | Description                                  | Output                    |
+| :--------------- | :----- | :------------------------------------------- | :-------------------------|
+| `gm:scalestart`  | `event`| Fired when a layer starts being scaled.      | `map`, `feature`, `shape` |
+| `gm:scale`       | `event`| Fired when a layer is being scaled.          | `map`, `feature`, `shape` |
+| `gm:scaleend`    | `event`| Fired when a layer stops being scaled.       | `map`, `feature`, `shape` |
+
+The following events are available on a map instance:
+
+| Event                      | Params  | Description                        | Output                 |
+| :------------------------- | :------ | :--------------------------------- | :--------------------- |
+| `gm:globalscalemodetoggled` | `event`  | Fired when Scale Mode is toggled.  | `enabled`, `map`       |
+
+You can also listen to specific Scale Mode events on the map instance like this:
+
+```js
+map.on('gm:globalscalemodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Supported Features
+
+Scale mode supports the following feature types:
+- Polygons
+- Rectangles
+- Lines
+- Circles
+
+When scaling, the feature will maintain its proportions relative to its centroid point. For rectangles, the scaling operation preserves the rectangular shape while adjusting its size.
 
 ## Live Scale Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { editScaleOptions } from '../../src/components/examles/mode-options';
-import features from '../../src/components/examles/geojson/basic-edit.json';
+import { editScaleOptions } from '../../src/components/examples/mode-options';
+import features from '../../src/components/examples/geojson/basic-edit.json';
 
 <BrowserOnlyGmMap
   gmOptions={editScaleOptions}

diff --git a/docs/edit-modes/04-edit-copy.mdx b/docs/edit-modes/04-edit-copy.mdx
@@ -4,14 +4,58 @@ title: "Copy"
 
 ## Copy Mode
 
-You can enable Copy Mode on your map to allow users to copy geometries.
+You can enable Copy Mode for all layers on a map like this:
 
-<!-- Add detailed documentation and code examples for Copy Mode here -->
+```js
+// Enable Copy Mode like this:
+map.gm.enableGlobalCopyMode();
+
+// Or like this:
+map.gm.options.enableMode('edit', 'copy');
+```
+
+The following methods are available on `map.gm`:
+
+| Method                                                            | Returns   | Description                   |
+|:------------------------------------------------------------------| :-------- | :-----------------------------|
+| `enableGlobalCopyMode()`  | -         | Enables global Copy Mode.                                             |
+| `disableGlobalCopyMode()` | -         | Disables global Copy Mode.                                            |
+| `toggleGlobalCopyMode()`  | -         | Toggles global Copy Mode.                                             |
+| `globalCopyModeEnabled()` | `Boolean` | Returns `true` if global Copy Mode is enabled. `false` when disabled. |
+
+The following events are available on a map instance:
+
+| Event          | Params | Description                                  | Output                    |
+| :------------- | :----- | :------------------------------------------- | :-------------------------|
+| `gm:copystart` | `event`| Fired when a layer starts being copied.      | `map`, `feature`, `shape` |
+| `gm:copy`      | `event`| Fired when a layer is being copied.          | `map`, `feature`, `shape` |
+| `gm:copyend`   | `event`| Fired when a layer is copied.                | `map`, `feature`, `shape` |
+
+The following events are available on a map instance:
+
+| Event                      | Params  | Description                        | Output                 |
+| :------------------------- | :------ | :--------------------------------- | :--------------------- |
+| `gm:globalcopymodetoggled` | `event`  | Fired when Copy Mode is toggled.  | `enabled`, `map`       |
+
+You can also listen to specific Copy Mode events on the map instance like this:
+
+```js
+map.on('gm:globalcopymodetoggled', (event) => {
+  console.log(event);
+});
+```
+
+## Behavior
+
+Copy mode operates in two ways:
+
+1. **Sticky Mode Enabled**: A shape can be selected once and then copied multiple times on each subsequent click.
+2. **Sticky Mode Disabled**: A shape is copied when a user drags it to a new location.
 
 ## Live Copy Example
 import BrowserOnlyGmMap from '../../src/components/map/BrowserOnlyGmMap';
-import { editCopyOptions } from '../../src/components/examles/mode-options';
-import features from '../../src/components/examles/geojson/basic-edit.json';
+import { editCopyOptions } from '../../src/components/examples/mode-options';
+import features from '../../src/components/examples/geojson/basic-edit.json';
 
 <BrowserOnlyGmMap
   gmOptions={editCopyOptions}