feat: add pages feature; rendering and switching between pages

docs/docs/core-components/output/drawio/page_2.drawio

@@ -0,0 +1,37 @@
+<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"/>
+			</root>
+		</mxGraphModel>
+	</diagram>
+	<diagram id="" name="second_page">
+		<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="2" parent="0" value="Processing"/>
+				<mxCell id="vertex:lambda_function:arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" value="&lt;b&gt;Name&lt;/b&gt;: prod-lambda-name&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name" style="verticalLabelPosition=bottom;verticalAlign=top;aspect=fixed;align=left;pointerEvents=1;shape=mxgraph.aws3.lambda_function;prIcon=server;fillColor=#F58534;gradientColor=none;html=1;" parent="2" vertex="1">
+					<mxGeometry width="69" height="72" as="geometry" x="180" y="-20"/>
+				</mxCell>
+				<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table2" value="&lt;b&gt;Name&lt;/b&gt;: prod-dynamo-table-2&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table2" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.dynamo_db;fillColor=#2E73B8;gradientColor=none;" parent="2" vertex="1">
+					<mxGeometry width="72" height="81" as="geometry"/>
+				</mxCell>
+			</root>
+		</mxGraphModel>
+	</diagram>
+	<diagram id="" name="third_page">
+		<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="2" parent="0" value="Storage"/>
+				<mxCell id="vertex:dynamo:arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" value="&lt;b&gt;Name&lt;/b&gt;: prod-dynamo-table&lt;BR&gt;&lt;b&gt;ARN&lt;/b&gt;: arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table" style="outlineConnect=0;dashed=0;verticalLabelPosition=bottom;verticalAlign=top;align=left;html=1;shape=mxgraph.aws3.dynamo_db;fillColor=#2E73B8;gradientColor=none;" parent="2" vertex="1">
+					<mxGeometry width="72" height="81" as="geometry" x="60" y="140"/>
+				</mxCell>
+			</root>
+		</mxGraphModel>
+	</diagram>
+</mxfile>

docs/docs/core-components/pages.md

@@ -0,0 +1,40 @@
+---
+layout: default
+title: Pages
+parent: CORE Components
+nav_order: 3
+date: 2024-10-02
+---
+
+# Pages
+{: .d-inline-block }
+
+New (v0.3.27)
+{: .label .label-green }
+
+Drawio support adding pages (aka Tabs). Using following API we can create page, switch between pages and add vertices and edges to dedicated page.
+
+## Code Snippet:
+
+Let's explore how to interact with pages starting from simple example - by adding 2 pages with layers and nodes: 
+
+```python
+{% root_include_snippet ../tests/core/test_page.py page%}
+```
+
+## Rendering:
+
+![layers](output/jpg/page_2.jpg)
+
+### Full XML dump:
+
+```xml
+{% root_include docs/core-components/output/drawio/page_2.drawio%}
+```
+
+### drawio file:
+
+Download generated ``pages_2.drawio``:
+
+[Download](output/drawio/pages_2.drawio){: .btn .btn-purple }
+

multicloud_diagrams/__init__.py

@@ -161,10 +161,10 @@ def add_page(self, page_name: str = '', debug_mode=False, shadow=True, layer_nam
         Et.SubElement(self.active_root, 'mxCell', id="0")
         self.add_layer(layer_name)
         self.debug_mode = debug_mode
+        self.pages[page_name] = diagram
 
     def switch_page(self, page_name: str = ''):
-        page_name = self.pages[page_name]
-        diagram = self.pages[f"diagram_{page_name}"]
+        diagram = self.pages[page_name]
         mx_graph_model = diagram.find('mxGraphModel')
         self.active_root = mx_graph_model.find('root')
 

tests/core/test_page.py

@@ -0,0 +1,39 @@
+from multicloud_diagrams import MultiCloudDiagrams
+from utils.templating import TestRendering
+
+
+class TestCoreVertexInIsolation(TestRendering):
+
+    def test_page(self):
+        # docs
+        self.node_type = 'page_2'
+
+        # given
+        mcd = MultiCloudDiagrams()
+
+        # when
+        mcd.add_page("second_page")
+        mcd.add_layer('Processing')
+        # Add lambda to 1st layer
+        mcd.add_vertex(node_id="arn:aws:lambda:eu-west-1:123456789012:function:prod-lambda-name",
+                       node_name='prod-lambda-name',
+                       node_type='lambda_function',
+                       layer_name="Processing")
+
+        mcd.add_page("third_page")
+        mcd.add_layer('Storage')
+        # Add dynamo to 2nd layer
+        mcd.add_vertex(node_id='arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table',
+                       node_name='prod-dynamo-table',
+                       node_type='dynamo',
+                       layer_name="Storage")
+
+        # return back to 1st page
+        mcd.switch_page("second_page")
+        mcd.add_vertex(node_id='arn:aws:dynamodb:eu-west-1:123456789012:table/prod-dynamo-table2',
+                       node_name='prod-dynamo-table-2',
+                       node_type='dynamo',
+                       layer_name="Storage")
+        # then
+        # docs
+        self.mcd = mcd

utils/utils.py

@@ -9,7 +9,7 @@
 class TestUtilities(unittest.TestCase):
     supported_vertex = {}
     provider_services = {}
-    no_rendering = ['yaml', 'vertex', 'layer', 'edge', 'color', 'connection']
+    no_rendering = ['yaml', 'vertex', 'layer', 'page', 'edge', 'color', 'connection']
 
     def setUp(self) -> None:
         project_folder = os.path.dirname(os.path.abspath(__file__))