From c6cfd42c53915262df4e91d146f07add002e7b9e Mon Sep 17 00:00:00 2001
From: Leo Nicolle <leo@linkurio.us>
Date: Mon, 4 Dec 2023 14:38:08 +0100
Subject: [PATCH] added docs for new Layer and Overlay

---
 README.md | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

diff --git a/README.md b/README.md
index ec2e179..d727d7e 100755
--- a/README.md
+++ b/README.md
@@ -202,6 +202,8 @@ export default function App () {
   - [`<Popup />`](#popup-)
   - [`<Tooltip />`](#tooltip-)
   - [`<CanvasLayer />`](#canvaslayer-)
+  - [`<Layer />`](#layer-)
+  - [`<Overlay />`](#overlay-)
 - Transformations:
   - [`<NodeGrouping />`](#nodegrouping-)
   - [`<EdgeGrouping />`](#edgegrouping-)
@@ -359,6 +361,49 @@ Custom canvas layer.
 </Ogma>
 ```
 
+### `<Layer />`
+
+Generic DOM layer.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `children`         | `React.ReactNode`  | `null`| The children of the layer |
+#### Example
+
+```tsx
+<Ogma>
+  <Layer>
+    <span>Layer content here!</span>
+  </Layer>
+</Ogma>
+```
+
+### `<Overlay />`
+
+Generic Overlay layer.
+
+#### Props
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `children`         | `React.ReactNode`  | `null`| The children of the layer |
+| `className`         | `string`  | `null`| Classname for the Overlay |
+| `scaled`         | `boolean`  | `true`| Wether the Overlay is scaled on zoom or not |
+| `position`  | `Point \| (ogma: Ogma) => Point` |  | Position of the Overlay             |
+| `size?`     | `{ width: number  \| 'auto'; height: number \| 'auto'; }` | `{ width: 'auto', height: 'auto' }` | Size of the Overlay |
+
+#### Example
+
+```tsx
+<Ogma>
+  <Overlay position={{x: 0, y: 0}} >
+    <span>Layer content here!</span>
+  </Overlay>
+</Ogma>
+```
+
 ## Transformations
 
 All transformations have callback props, making it easy to react to events related to transformations.