feat(zms-diagrams): Added XY and Quadrant Charts

- https://mermaid.js.org/syntax/xyChart.html - https://mermaid.js.org/syntax/quadrantChart.html - mermaid-js/mermaid#4383 Updated from Mermaid v9 to v10 (breaking changes): - mermaid-js/mermaid#4103 - https://mermaid.js.org/config/usage.html#using-mermaid-run
zms-publishing · Dec 21, 2023 · c4463f3 · c4463f3
1 parent 0b8af0b
commit c4463f3
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git a/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/__init__.py b/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/__init__.py
@@ -26,7 +26,7 @@ class ZMSDiagram:
 	package = "zms.diagrams"
 
 	# Revision
-	revision = "0.0.5"
+	revision = "0.0.6"
 
 	# Type
 	type = "ZMSObject"
@@ -53,8 +53,10 @@ class Attrs:
 				,"Class Diagram"
 				,"State Diagram"
 				,"User Journey"
+				,"Quadrant Chart"
 				,"Gantt Chart"
 				,"Pie Chart"
+				,"XY Chart"
 				,"Flowchart"
 				,"Gitgraph"
 				,"Timeline"

diff --git a/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/interface_bpmn.zpt b/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/interface_bpmn.zpt
@@ -72,12 +72,18 @@
 					if ($('#attr_dc_type').val() === 'User Journey') {
 						$('#reference_mermaid_href').attr('href', 'https://mermaid.js.org/syntax/userJourney.html');
 					}
+					if ($('#attr_dc_type').val() === 'Quadrant Chart') {
+						$('#reference_mermaid_href').attr('href', 'https://mermaid.js.org/syntax/quadrantChart.html ');
+					}
 					if ($('#attr_dc_type').val() === 'Gantt Chart') {
 						$('#reference_mermaid_href').attr('href', 'https://mermaid.js.org/syntax/gantt.html');
 					}
 					if ($('#attr_dc_type').val() === 'Pie Chart') {
 						$('#reference_mermaid_href').attr('href', 'https://mermaid.js.org/syntax/pie.html');
 					}
+					if ($('#attr_dc_type').val() === 'XY Chart') {
+						$('#reference_mermaid_href').attr('href', 'https://mermaid.js.org/syntax/xyChart.html ');
+					}
 					if ($('#attr_dc_type').val() === 'Flowchart') {
 						$('#reference_mermaid_href').attr('href', 'https://mermaid.js.org/syntax/flowchart.html');
 					}
@@ -100,8 +106,8 @@
 			});
 		//-->
 			(function () {
-				var url = '<tal:block tal:condition="diagram_file" tal:replace="python:'%s/%s'%(zmscontext.absolute_url(), zmscontext.attr('diagram_file').getFilename())"></tal:block>?preview=preview';
-				openFromUrl(url);
+				var url = '<tal:block tal:condition="diagram_file" tal:replace="python:'%s/%s'%(zmscontext.absolute_url(), zmscontext.attr('diagram_file').getFilename())"></tal:block>';
+				if (url !== '') openFromUrl(url + '?preview=preview');
 			})();
 		</script>
 		<style>

diff --git a/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/interface_mermaid.zpt b/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/interface_mermaid.zpt
@@ -1,4 +1,4 @@
-<tal:block 
+<tal:block
 	tal:define="zmscontext options/zmscontext;"
 	tal:condition="not:python:request.get('ZMS_INSERT')">
 <script type="text/javascript" defer charset="UTF-8" src="/++resource++zms_/common/zmi_ace_editor.js"></script>
@@ -7,7 +7,7 @@
 	<div class="col-sm-10">
 		<small>
 			Copy &amp; Paste <strong>Mermaid.js</strong> code from <a href="https://mermaid.live/" target="_blank">Live Editor</a>
-			| <a href="https://mermaid.js.org/intro/n00b-syntaxReference.html" target="_blank" id="reference_mermaid_href">Diagram Syntax</a>
+			| <a href="https://mermaid.js.org/intro/syntax-reference.html" target="_blank" id="reference_mermaid_href">Diagram Syntax</a>
 		</small>
 
 		<div id="diagram_code_preview">
@@ -22,8 +22,8 @@
 
 		<script type="module">
 		//<!--
-			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
-			$(document).on('ready turbolinks:load', function() {
+			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
+			$(document).on('ready turbolinks:load', async function() {
 				$('body').attr('data-turbolinks','false');
 				let $textarea = $('textarea[id^="diagram_code"]');
 				let $preview = $('#diagram_code_preview')
@@ -34,20 +34,21 @@
 				$textarea.dblclick(function() {
 					show_ace_editor($(this),true);
 				});
-				mermaid.initialize({ startOnLoad: true });
-				$textarea.on('keydown change',function(){
+                mermaid.initialize({ startOnLoad: false });
+                await mermaid.run();
+				$textarea.on('keydown change', async function(){
 					let dgrm_code = $textarea.prop('value').trim();
 					let dgrm_html = `<pre class="mermaid" id="diagram_code_rendered">${dgrm_code}</pre>`;
 					$preview.html(dgrm_html);
 					// debugger;
 					let test = false;
 					try {
-						test = mermaid.parse(dgrm_code);
+						test = await mermaid.parse(dgrm_code);
 					} catch(error) {
 						console.log(error);
 					}
 					if (test && dgrm_code.length > 0) {
-						let svg = mermaid.render("diagram_code_rendered", dgrm_code);
+						let { svg } = await mermaid.render("diagram_code_rendered", dgrm_code);
 						$preview.html(svg);
 					} else {
 						if (dgrm_code.length > 0) {
@@ -64,7 +65,7 @@
 		<style>
 		/*<!--*/
 			#diagram_code_preview { width:100%; background:aliceblue}
-			#diagram_code_rendered { width:100%; min-height:20rem;}
+			#diagram_code_rendered { margin-top:1em; width:100%; min-height:20rem;}
 			.ace_editor {border:1px solid #e4e4e4;border-radius:4px;}
 		/*-->*/
 		</style>

diff --git a/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/standard_html.zpt b/Products/zms/conf/metaobj_manager/zms.diagrams/ZMSDiagram/standard_html.zpt
@@ -9,10 +9,10 @@
 	tal:attributes="id id;class css_class">
 
 	<tal:block tal:condition="python: not is_bpmn and diagram_code">
-		<script type="module" 
+		<script type="module"
 			tal:define="dgrm_load python:request.set('dgrm_load',request.get('dgrm_load',0)+1)"
 			tal:condition="python:request.get('dgrm_load',0)==1">
-			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@9/dist/mermaid.esm.min.mjs';
+			import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
 			$(document).on('ready turbolinks:load', function() {
 				$('body').attr('data-turbolinks','false');
 				mermaid.initialize({ startOnLoad: true });

diff --git a/Products/zms/conf/metaobj_manager/zms.diagrams/__init__.py b/Products/zms/conf/metaobj_manager/zms.diagrams/__init__.py
@@ -16,7 +16,7 @@ class zms_diagrams:
 	package = ""
 
 	# Revision
-	revision = "0.0.5"
+	revision = "0.0.6"
 
 	# Type
 	type = "ZMSPackage"