docs: add store documentation to the guides

guides/1.GETTING_STARTED.md

@@ -5,7 +5,7 @@ Terra Draw adds a number of geographical Feature drawing tools to popular mappin
 ## Key Concepts
 
 > [!TIP]
-> TL;DR? Jump to the [Installation](./2.INSTALLATION.md) Guide to get started, or:
+> TL;DR? Jump to the [Installation](#installation) section to get started, or:
 >
 > ```javascript
 > npm install terra-draw
@@ -25,47 +25,14 @@ const draw = new TerraDraw({ adapter, modes });
 
 Features are added to the Store when interacting with the Map using a number of available drawing Modes (such as `TerraDrawRectangleMode` or `TerraDrawPolygonMode`).
 
-Features can also be added to the Store programmatically using the `addFeatures` method:
-
-```javascript
-// Add a Point to the Store
-draw.addFeatures([
-  {
-    type: "Feature",
-    geometry: {
-      type: "Point",
-      coordinates: [-1.825859, 51.178867],
-    },
-    properties: {
-      mode: "point",
-    },
-  },
-]);
-```
-
 The Store is exposed via the `getSnapshot` method, which returns an Array of all given Feature geometries in the Store:
 
 ```javascript
 // Get an Array of all Features in the Store
 const features = draw.getSnapshot();
 ```
 
-> [!TIP]
-> The `getSnapshot` method returns a deep copy of the Store, so you can safely mutate the returned Array without affecting the Store.
-
-Features can also be retrieved from the Store using the `getFeaturesAtLngLat` and `getFeaturesAtPointerEvent` methods.
-
-To remove Features from the Store use the `removeFeatures` or `clear` methods:
-
-```javascript
-// Remove Feature from the Store by ID
-draw.removeFeatures(["id-1", "id-2", "id-3"]);
-
-// Remove all Features from the Store
-draw.clear();
-```
-
-See the `TerraDraw` [API Docs](https://jameslmilner.github.io/terra-draw/classes/TerraDraw.html) for more information.
+See the [Store](./2.STORE.md) section to find out more about the store and getting data in and out of Terra Draw.
 
 ### Adapters
 
@@ -81,7 +48,7 @@ const adapter = new TerraDrawLeafletAdapter({ map, lib });
 > [!IMPORTANT]
 > Each Adapter must be instantiated with both `map` and `lib` properties.
 
-See the [Adapters](./2.ADAPTERS.md) section for more information.
+See the [Adapters](./3.ADAPTERS.md) section for more information.
 
 ### Modes
 
@@ -99,7 +66,7 @@ const renderMode = new TerraDrawRenderMode({
 });
 ```
 
-See the [Modes](./3.MODES.md) section for more information.
+See the [Modes](./4.MODES.md) section for more information.
 
 ## Installation
 
@@ -258,8 +225,9 @@ There are a few other working examples that you can use as points of reference f
 **Guides**
 
 1. [x] Getting Started
-2. [ ] [Adapters](./2.ADAPTERS.md)
-3. [ ] [Modes](./3.MODES.md)
-4. [ ] [Styling](./4.STYLING.md)
-5. [ ] [Events](./5.EVENTS.md)
-6. [ ] [Development](./6.DEVELOPMENT.md)
+2. [ ] [Store](./2.STORE.md)
+3. [ ] [Adapters](./3.ADAPTERS.md)
+4. [ ] [Modes](./4.MODES.md)
+5. [ ] [Styling](./5.STYLING.md)
+6. [ ] [Events](./6.EVENTS.md)
+7. [ ] [Development](./7.DEVELOPMENT.md)

guides/2.STORE.md

@@ -0,0 +1,91 @@
+ # Store
+
+The Store is the heart of the library and is responsible for managing the state of all Features that are added to the map. The Store is created when Terra Draw is instantiated, but is not directly exposed, and instead exposed via a series of API methods on the Terra Draw instance itself. All data in the store is represented using [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON). Currently the store only represents data as Features, using the Point, LineString and Polygon geometry types.
+
+### Retrieving Data
+
+The data contained with the store is exposed via the `getSnapshot` method, which returns an Array of all given Feature geometries in the Store:
+
+```javascript
+// Get an Array of all Features in the Store
+const features = draw.getSnapshot();
+```
+
+We can then filter through this array to get the features we're looking for, as an example only returning `TerraDrawPolygonMode` features:
+
+```javascript
+features.filter((feature) => feature.properties.mode === 'polygon')
+```
+
+### Adding Data
+
+Features are added to the Store when interacting with the Map using a number of available drawing Modes (such as `TerraDrawRectangleMode` or `TerraDrawPolygonMode`).
+
+> [!TIP]
+> The `getSnapshot` method returns a deep copy of the Store, so you can safely mutate the returned Array without affecting the Store.
+
+Features can also be added to the Store programmatically using the `addFeatures` method:
+
+```javascript
+// Add a Point to the Store
+draw.addFeatures([
+  {
+    type: "Feature",
+    geometry: {
+      type: "Point",
+      coordinates: [-1.825859, 51.178867],
+    },
+    properties: {
+      mode: "point",
+    },
+  },
+]);
+```
+
+Here setting the mode property will add the feature to that specific mode, so for example in this instance we added a point to the `TerraDrawPointMode` of this instance of Terra Draw.
+
+We can also get data at a specific event location, using the `getFeaturesAtLngLat` and `getFeaturesAtPointerEvent` methods. Find out more about these in the [events section of the guides](./6.EVENTS.md).
+
+### Removing Data
+
+To remove Features from the Store use the `removeFeatures` or `clear` methods:
+
+```javascript
+// Remove Feature from the Store by ID
+draw.removeFeatures(["id-1", "id-2", "id-3"]);
+
+// Remove all Features from the Store
+draw.clear();
+```
+
+See the `TerraDraw` [API Docs](https://jameslmilner.github.io/terra-draw/classes/TerraDraw.html) for more information.
+
+## Restoring Data 
+
+Terra Draw is agnostic to how you want to presist the data created with it. You can store data in a remote database, in [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API), [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage), or any other storage mechanism you so wish. As a simple example of storing the data in `localStorage`, you could take a snapshot and restore it a later date like so:
+
+```javascript
+const features = draw.getSnapshot()
+
+// We don't want any mid points or selection points so we filter them out
+const filteredFeatures = features.filter((f) => !f.properties.midPoint && !f.properties.selectionPoint)
+
+// localStorage can only store strings, so we strinify the features first
+localStorage.setItem('terra-draw-data', JSON.stringify(filteredFeatures));
+
+// Later on, perhaps after the user has refreshed.
+const retrievedFeatures = localStorage.getItem('terra-draw-data');
+if (retrievedFeatures) {
+  draw.setFeatures(JSON.parse(retrievedFeatures))
+}
+```
+
+**Guides**
+
+1. [x] [Getting Started](./1.GETTING_STARTED.md)
+2. [x] Store 
+3. [ ] [Adapters](./3.ADAPTERS.md)
+4. [ ] [Modes](./4.MODES.md)
+5. [ ] [Styling](./5.STYLING.md)
+6. [ ] [Events](./6.EVENTS.md)
+7. [ ] [Development](./7.DEVELOPMENT.md)

guides/2.ADAPTERS.md → guides/3.ADAPTERS.md

@@ -382,15 +382,16 @@ draw.setMode("freehand");
 
 ## Creating Custom Adapters
 
-See the [Development](./6.DEVELOPMENT.md) guide for more information on creating custom Adapters.
+See the [Development](./7.DEVELOPMENT.md) guide for more information on creating custom Adapters.
 
 ---
 
 **Guides**
 
 1. [x] [Getting Started](./1.GETTING_STARTED.md)
-2. [x] Adapters
-3. [ ] [Modes](./3.MODES.md)
-4. [ ] [Styling](./4.STYLING.md)
-5. [ ] [Events](./5.EVENTS.md)
-6. [ ] [Development](./6.DEVELOPMENT.md)
+2. [x] [Store](./2.STORE.md)
+3. [x] Adapters
+4. [ ] [Modes](./4.MODES.md)
+5. [ ] [Styling](./5.STYLING.md)
+6. [ ] [Events](./6.EVENTS.md)
+7. [ ] [Development](./7.DEVELOPMENT.md)

guides/3.MODES.md → guides/4.MODES.md

@@ -287,7 +287,7 @@ const renderMode = new TerraDrawRenderMode({
 ```
 
 > [!TIP]
-> Multiple Render Modes can be added to the Terra Draw instance. This allows you to style indiviual Render Modes differently. See the [Styling](./4.STYLING.md#render-mode) guide for more information.
+> Multiple Render Modes can be added to the Terra Draw instance. This allows you to style indiviual Render Modes differently. See the [Styling](./5.STYLING.md#render-mode) guide for more information.
 
 ## Adding Modes
 
@@ -372,8 +372,10 @@ See the [Development](./6.DEVELOPMENT.md) guide for more information on creating
 **Guides**
 
 1. [x] [Getting Started](./1.GETTING_STARTED.md)
-2. [x] [Adapters](./2.ADAPTERS.md)
-3. [x] Modes
-4. [ ] [Styling](./4.STYLING.md)
-5. [ ] [Events](./5.EVENTS.md)
-6. [ ] [Development](./6.DEVELOPMENT.md)
+2. [x] [Store](./2.STORE.md)
+3. [x] [Adapters](./3.ADAPTERS.md)
+4. [x] Modes
+5. [ ] [Styling](./5.STYLING.md)
+6. [ ] [Events](./6.EVENTS.md)
+7. [ ] [Development](./7.DEVELOPMENT.md)
+

guides/4.STYLING.md → guides/5.STYLING.md

@@ -334,8 +334,9 @@ draw.on("delete", (ids) => ids.forEach((id) => delete cache[id]));
 **Guides**
 
 1. [x] [Getting Started](./1.GETTING_STARTED.md)
-2. [x] [Adapters](./2.ADAPTERS.md)
-3. [x] [Modes](./3.MODES.md)
-4. [x] Styling
-5. [ ] [Events](./5.EVENTS.md)
-6. [ ] [Development](./6.DEVELOPMENT.md)
+2. [x] [Store](./2.STORE.md)
+3. [x] [Adapters](./3.ADAPTERS.md)
+4. [x] [Modes](./4.MODES.md)
+5. [x] Styling
+6. [ ] [Events](./6.EVENTS.md)
+7. [ ] [Development](./7.DEVELOPMENT.md)

guides/5.EVENTS.md → guides/6.EVENTS.md

@@ -101,8 +101,9 @@ draw.on("deselect", () => {
 **Guides**
 
 1. [x] [Getting Started](./1.GETTING_STARTED.md)
-2. [x] [Adapters](./2.ADAPTERS.md)
-3. [x] [Modes](./3.MODES.md)
-4. [x] [Styling](./4.STYLING.md)
-5. [x] Events
-6. [ ] [Development](./6.DEVELOPMENT.md)
+2. [x] [Store](./2.STORE.md)
+3. [x] [Adapters](./3.ADAPTERS.md)
+4. [x] [Modes](./4.MODES.md)
+5. [x] [Styling](./5.STYLING.md)
+6. [x] Events
+7. [ ] [Development](./7.DEVELOPMENT.md)

guides/6.DEVELOPMENT.md → guides/7.DEVELOPMENT.md

@@ -185,8 +185,9 @@ We have a code of conduct which we expect individuals interacting with the proje
 **Guides**
 
 1. [x] [Getting Started](./1.GETTING_STARTED.md)
-2. [x] [Adapters](./2.ADAPTERS.md)
-3. [x] [Modes](./3.MODES.md)
-4. [x] [Styling](./4.STYLING.md)
-5. [x] [Events](./5.EVENTS.md)
-6. [x] Development :star2:
+2. [x] [Store](./2.STORE.md)
+3. [x] [Adapters](./3.ADAPTERS.md)
+4. [x] [Modes](./4.MODES.md)
+5. [x] [Styling](./5.STYLING.md)
+6. [x] [Events](./6.EVENTS.md)
+7. [x] Development :star2: