From f666cb11cda02ddb2ac490a7be1dbf0e4c9f10df Mon Sep 17 00:00:00 2001
From: SatishRaj4377 <158574671+SatishRaj4377@users.noreply.github.com>
Date: Fri, 31 Oct 2025 16:18:50 +0530
Subject: [PATCH] 987719: updated readme and hamburger menu expand collapse
 text dynamic update

---
 README.md                                     | 30 +++++++++++++++++--
 src/App.vue                                   | 23 +++++++++++++-
 .../HamburgerMenu/HamburgerMenu.vue           | 15 +++++++++-
 3 files changed, 64 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 10bc9e7..9b82a33 100644
--- a/README.md
+++ b/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&reg; 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>.
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index a9164d4..d194ef0 100644
--- a/src/App.vue
+++ b/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
 // =============================================================================
diff --git a/src/components/HamburgerMenu/HamburgerMenu.vue b/src/components/HamburgerMenu/HamburgerMenu.vue
index 3c33700..e3d36d4 100644
--- a/src/components/HamburgerMenu/HamburgerMenu.vue
+++ b/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>
\ No newline at end of file