feat: add rectangle core component

tsypuk · Jan 8, 2024 · 766b83a · 766b83a
1 parent feabb36
commit 766b83a
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 0 deletions.
diff --git a/docs/docs/core-components/output/drawio/rectangle.drawio b/docs/docs/core-components/output/drawio/rectangle.drawio
@@ -0,0 +1,13 @@
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud">
+	<diagram id="diagram_1" name="AWS components">
+		<mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1">
+			<root>
+				<mxCell id="0"/>
+				<mxCell id="1" parent="0"/>
+				<mxCell id="vertex:rectangle:rect1" value="&lt;b&gt;Name&lt;/b&gt;: microservice1&lt;BR&gt;&lt;b&gt;ID&lt;/b&gt;: rect1" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;" parent="1" vertex="1">
+					<mxGeometry width="120" height="60" as="geometry"/>
+				</mxCell>
+			</root>
+		</mxGraphModel>
+	</diagram>
+</mxfile>
diff --git a/docs/docs/core-components/output/jpg/rectangle.jpg b/docs/docs/core-components/output/jpg/rectangle.jpg
diff --git a/docs/docs/core-components/rectangle.md b/docs/docs/core-components/rectangle.md
@@ -0,0 +1,87 @@
+---
+layout: default
+title: Block Rectangle
+parent: CORE Components
+nav_order: 3
+date: 2024-01-08
+---
+
+# Block Rectangle
+{: .d-inline-block .no_toc }
+
+New (v0.3.20)
+{: .label .label-green }
+
+## Table of contents
+{: .no_toc .text-delta }
+
+1. TOC
+{:toc}
+
+---
+
+
+## Node Type: ``rectangle``
+
+## Rendering:
+
+![lambda](output/jpg/rectangle.jpg)
+
+## Code Snippet:
+
+```python
+{% root_include_snippet ../tests/core/test_rectangle.py %}
+```
+
+## drawio rectangle vertex:
+
+```xml
+<mxCell id="vertex:rectangle:rect1" parent="1" vertex="1">
+    <mxGeometry width="120" height="60" as="geometry"/>
+</mxCell>
+```
+---
+
+## Advanced for Geeks:
+
+### Style:
+```html
+style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;"
+```
+
+| attribute | value |
+|:----------|:------|
+|html| 1 |
+|labelBackgroundColor| none |
+|rounded| 0 |
+|whiteSpace| wrap |
+
+### Vertex size:
+
+| attribute | value |
+|:---------|:-----------|
+| width    | 120  |
+| height   |60|
+
+### Full XML dump:
+```xml
+<mxfile host="multicloud-diagrams" agent="PIP package multicloud-diagrams. Generate resources in draw.io compatible format for Cloud infrastructure. Copyrights @ Roman Tsypuk 2023. MIT license." type="MultiCloud">
+    <diagram id="diagram_1" name="AWS components">
+        <mxGraphModel dx="1015" dy="661" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="1">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="vertex:rectangle:rect1" value="&lt;b&gt;Name&lt;/b&gt;: microservice1&lt;BR&gt;&lt;b&gt;ID&lt;/b&gt;: rect1" style="rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;" parent="1" vertex="1">
+                    <mxGeometry width="120" height="60" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
+```
+
+### drawio file:
+
+Download generated ``rectangle.drawio``:
+
+[Download](output/drawio/rectangle.drawio){: .btn .btn-purple }
diff --git a/multicloud_diagrams/providers/core.json b/multicloud_diagrams/providers/core.json
@@ -37,5 +37,12 @@
     "desc": "Actor",
     "width": "30",
     "height": "60"
+  },
+  "rectangle": {
+    "style": "rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;",
+    "width": "120",
+    "height": "60",
+    "version": "0.3.20",
+    "desc": "Block Rectangle"
   }
 }
diff --git a/tests/core/test_rectangle.py b/tests/core/test_rectangle.py
@@ -0,0 +1,28 @@
+from multicloud_diagrams import MultiCloudDiagrams
+from utils.templating import TestRendering
+
+
+class TestCoreVertexInIsolation(TestRendering):
+
+    def test_actor(self):
+        # docs
+        self.node_type = 'rectangle'
+
+        # given
+        mcd = MultiCloudDiagrams()
+
+        # when
+        mcd.add_vertex(node_id="rect1",
+                       node_name='microservice1',
+                       node_type='rectangle')
+
+        # then
+        expected = {'id': 'vertex:rectangle:rect1',
+                    'parent': '1',
+                    'style': 'rounded=0;whiteSpace=wrap;html=1;labelBackgroundColor=none;',
+                    'value': '<b>Name</b>: microservice1<BR><b>ID</b>: rect1',
+                    'vertex': '1'}
+        self.verify_resource(expected, mcd.mx_file, 'mock_data', 'rectangle')
+
+        # docs
+        self.mcd = mcd