987719: updated readme

README.md

@@ -1,2 +1,28 @@
-# ej2-showcase-vue-json-xml-to-diagram-visualizer
-A JSON/XML-to-Diagram Visualizer converts JSON or XML data into interactive diagrams, helping users easily understand data structures, hierarchies, and relationships visually
+# Essential® JS 2 for Vue - JSON and XML to Diagram Visualizer
+
+A JSON/XML-to-Diagram Visualizer converts JSON or XML data into interactive diagrams, helping users easily understand data structures, hierarchies, and relationships visually.
+
+
+## Deployment
+
+### Install
+
+* To install all dependent packages, use the below command.
+
+```
+npm install
+```
+
+### Run
+
+To run the sample, use the below command
+
+```
+npm run serve
+```
+
+## Demo
+
+#### <a href="https://ej2.syncfusion.com/showcase/vue/jsonandxmltodiagramvisualizer/" target="_blank">https://ej2.syncfusion.com/showcase/vue/jsonandxmltodiagramvisualizer/</a>
+
+Check all the showcase and tutorial samples from <a href="https://ej2.syncfusion.com/home/vue.html" target="_blank">here</a>.

src/App.vue

@@ -47,6 +47,7 @@
           :tool="diagramTool"
           :getNodeDefaults="getDefaultNodeConfiguration"
           :getConnectorDefaults="getDefaultConnectorConfiguration"
+          :expandStateChange="handleExpandStateChange"
           @click="handleDiagramNodeClick"
         />
 
@@ -186,6 +187,7 @@ const isEditorContentValid = ref(true)
 const isLoadingSpinnerVisible = ref(false)
 const isExportDialogOpen = ref(false)
 const isNodeDetailsDialogOpen = ref(false)
+const hamburgerMenuRef = ref();
 const selectedNodeDetailsData = ref({
   content: "",
   path: "",
@@ -372,7 +374,7 @@ const processEditorContent = (textContent: string, editorType: EditorType) => {
 const refreshDiagramLayout = () => {
   if (diagramComponentRef.value) {
     diagramComponentRef.value.ej2Instances.refresh();
-    diagramComponentRef.value.ej2Instances.fitToPage({ canZoomIn: true })
+    diagramComponentRef.value.ej2Instances.fitToPage({ mode: "Page", region: "Content", canZoomIn: true })
   }
 }
 
@@ -385,6 +387,8 @@ const handleEditorContentChange = (newEditorValue: string | undefined) => {
   const updatedContent = newEditorValue || ""
   editorTextContent.value = updatedContent
   parseAndProcessEditorContent(updatedContent, selectedEditorType.value)
+  isEntireGraphCollapsed.value = false;
+  hamburgerMenuRef.value?.updateCollapseMenuText(false);
 }
 
 // Handle switching between JSON and XML editor types with content conversion
@@ -398,6 +402,8 @@ const handleEditorTypeSwitch = (newEditorType: EditorType) => {
     console.error("Conversion error:", error)
     isEditorContentValid.value = false
   }
+  isEntireGraphCollapsed.value = false;
+  hamburgerMenuRef.value?.updateCollapseMenuText(false);
 }
 
 // Convert content between different editor types (JSON <-> XML)
@@ -999,6 +1005,21 @@ const getDefaultConnectorConfiguration = (connectorModel: ConnectorModel): Conne
   return connectorModel
 }
 
+
+const handleExpandStateChange = (args) => {
+    const node = args.element;
+    if (!node || typeof node !== 'object') {
+        return;
+    }
+    // Check if it's a root node (no incoming edges)
+    const isRootNode = !node.inEdges || node.inEdges.length === 0;
+    if (isRootNode) {
+        isEntireGraphCollapsed.value = !node.isExpanded;
+        hamburgerMenuRef.value?.updateCollapseMenuText(!node.isExpanded);
+    }
+};
+
+
 // =============================================================================
 // WATCHERS
 // =============================================================================

src/components/HamburgerMenu/HamburgerMenu.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="hamburger-menu">
     <ejs-dropdownbutton
+      ref="hamburgerDropdownButton"
       :iconCss="MENU_ICONS.HAMBURGER"
       :cssClass="MENU_STYLES.HIDE_CARET"
       :items="menuItems"
@@ -13,7 +14,7 @@
 import { ref, computed, watch } from 'vue'
 import { DropDownButtonComponent as EjsDropdownbutton } from '@syncfusion/ej2-vue-splitbuttons'
 import type { MenuEventArgs } from '@syncfusion/ej2-splitbuttons'
-
+const hamburgerDropdownButton = ref(null);
 // Type definitions
 interface HamburgerMenuProps {
   isGraphCollapsed: boolean
@@ -81,6 +82,15 @@ const menuItems = computed(() => {
       : item
   )
 })
+function updateCollapseMenuText(isGraphCollapsed) {
+  const collapseMenuItem = baseMenuItems.find(menuItem => menuItem.id === 'collapseGraph');
+  if (collapseMenuItem) {
+    collapseMenuItem.text = isGraphCollapsed ? 'Expand Graph' : 'Collapse Graph';
+    collapseMenuItem.iconCss = isGraphCollapsed ? 'e-icons e-expand' : 'e-icons e-collapse-2';
+    hamburgerDropdownButton.items = baseMenuItems;
+    hamburgerDropdownButton.dataBind();
+  }
+}
 
 // Handle menu item selection
 const handleMenuSelect = (args: MenuEventArgs) => {
@@ -100,4 +110,7 @@ const handleMenuSelect = (args: MenuEventArgs) => {
       console.warn(`Unknown menu item selected: ${menuId}`)
   }
 }
+defineExpose({
+  updateCollapseMenuText
+});
 </script>