Merge pull request #4575 from VisActor/docs/gantt-zoom

Docs/gantt zoom

Author: fangsmile

common/changes/@visactor/vtable/4551-bug-pasteHtmlToTable_2025-10-10-07-21.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: zoom axis component should release\n\n",
+      "type": "none",
+      "packageName": "@visactor/vtable"
+    }
+  ],
+  "packageName": "@visactor/vtable",
+  "email": "892739385@qq.com"
+}

common/changes/@visactor/vtable/docs-gantt-zoom_2025-10-14-01-42.json

@@ -2,7 +2,7 @@
 category: examples
 group: gantt
 title: Gantt DataZoomAxis Scrollbar
-cover:
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/gantt-zoom-axis.gif
 link: gantt/datazoom
 option: Gantt#zoomScale.dataZoomAxis
 ---
@@ -31,8 +31,8 @@ let ganttInstance;
 
 // Force cleanup of all possible existing zoom control panels
 // First try to call any previously existing global cleanup function
-if (typeof window.cleanupZoomControls === 'function') {
-  window.cleanupZoomControls();
+if (typeof window.cleanupControls === 'function') {
+  window.cleanupControls();
 }
 
 const existingControls = document.getElementById('zoom-controls');
@@ -717,9 +717,6 @@ const option = {
 ganttInstance = new VTableGantt.Gantt(document.getElementById(CONTAINER_ID), option);
 window['ganttInstance'] = ganttInstance;
 
-// Ensure ganttInstance can be properly cleaned by document system
-window[CONTAINER_ID] = ganttInstance;
-
 /**
  * Create zoom control buttons
  */
@@ -729,8 +726,8 @@ function createZoomControls(ganttInstance) {
   controlsContainer.id = 'zoom-controls';
   controlsContainer.style.cssText = `
     position: fixed;
-    top: 180px;
-    right: 20px;
+    bottom: 0px;
+    left: 130px;
     display: flex;
     gap: 8px;
     flex-direction: column;
@@ -1033,5 +1030,5 @@ ganttInstance.release = function () {
 };
 
 // Store cleanup function globally for other places to call
-window.cleanupZoomControls = cleanup;
+window.cleanupControls = cleanup;
 ```

docs/assets/demo/en/gantt/gantt-datazoom.md

@@ -2,7 +2,7 @@
 category: examples
 group: gantt
 title: Gantt Chart Smart Zoom Feature
-cover:
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/gantt-zoom.gif
 link: gantt/zoom-scale
 option: Gantt#zoomScale
 ---
@@ -28,8 +28,8 @@ let ganttInstance;
 
 // Force cleanup of all possible existing zoom control panels
 // First try to call any previously existing global cleanup function
-if (typeof window.cleanupZoomControls === 'function') {
-  window.cleanupZoomControls();
+if (typeof window.cleanupControls === 'function') {
+  window.cleanupControls();
 }
 
 const existingControls = document.getElementById('zoom-controls');
@@ -737,9 +737,6 @@ const option = {
 ganttInstance = new VTableGantt.Gantt(document.getElementById(CONTAINER_ID), option);
 window['ganttInstance'] = ganttInstance;
 
-// Ensure ganttInstance can be properly cleaned up by the documentation system
-window[CONTAINER_ID] = ganttInstance;
-
 /**
  * Create zoom control buttons
  */
@@ -749,8 +746,8 @@ function createZoomControls(ganttInstance) {
   controlsContainer.id = 'zoom-controls';
   controlsContainer.style.cssText = `
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 0px;
+    left: 130px;
     display: flex;
     gap: 8px;
     flex-direction: column;
@@ -1054,5 +1051,5 @@ ganttInstance.release = function () {
 };
 
 // Store cleanup function globally for other calls
-window.cleanupZoomControls = cleanup;
+window.cleanupControls = cleanup;
 ```

docs/assets/demo/en/gantt/gantt-zoom.md

@@ -2,7 +2,7 @@
 category: examples
 group: gantt
 title: 甘特图 DataZoomAxis 滚动条
-cover:
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/gantt-zoom-axis.gif
 link: gantt/datazoom
 option: Gantt#zoomScale.dataZoomAxis
 ---
@@ -31,8 +31,8 @@ let ganttInstance;
 
 // 强制清理所有可能存在的缩放控制面板
 // 首先尝试调用之前可能存在的全局清理函数
-if (typeof window.cleanupZoomControls === 'function') {
-  window.cleanupZoomControls();
+if (typeof window.cleanupControls === 'function') {
+  window.cleanupControls();
 }
 
 const existingControls = document.getElementById('zoom-controls');
@@ -718,10 +718,6 @@ const option = {
 
 ganttInstance = new VTableGantt.Gantt(document.getElementById(CONTAINER_ID), option);
 window['ganttInstance'] = ganttInstance;
-
-// 确保ganttInstance能被文档系统正确清理
-window[CONTAINER_ID] = ganttInstance;
-
 /**
  * 创建缩放控制按钮
  */
@@ -731,8 +727,8 @@ function createZoomControls(ganttInstance) {
   controlsContainer.id = 'zoom-controls';
   controlsContainer.style.cssText = `
     position: fixed;
-    top: 180px;
-    right: 20px;
+    bottom: 0px;
+    left: 130px;
     display: flex;
     gap: 8px;
     flex-direction: column;
@@ -1035,5 +1031,5 @@ ganttInstance.release = function () {
 };
 
 // 在全局存储清理函数，以便其他地方也能调用
-window.cleanupZoomControls = cleanup;
+window.cleanupControls = cleanup;
 ```

docs/assets/demo/zh/gantt/gantt-datazoom.md

@@ -2,7 +2,7 @@
 category: examples
 group: gantt
 title: 甘特图智能缩放功能
-cover:
+cover: https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/preview/gantt-zoom.gif
 link: gantt/zoom-scale
 option: Gantt#zoomScale
 ---
@@ -28,8 +28,8 @@ let ganttInstance;
 
 // 强制清理所有可能存在的缩放控制面板
 // 首先尝试调用之前可能存在的全局清理函数
-if (typeof window.cleanupZoomControls === 'function') {
-  window.cleanupZoomControls();
+if (typeof window.cleanupControls === 'function') {
+  window.cleanupControls();
 }
 
 const existingControls = document.getElementById('zoom-controls');
@@ -708,9 +708,6 @@ const option = {
 ganttInstance = new VTableGantt.Gantt(document.getElementById(CONTAINER_ID), option);
 window['ganttInstance'] = ganttInstance;
 
-// 确保ganttInstance能被文档系统正确清理
-window[CONTAINER_ID] = ganttInstance;
-
 /**
  * 创建缩放控制按钮
  */
@@ -720,8 +717,8 @@ function createZoomControls(ganttInstance) {
   controlsContainer.id = 'zoom-controls';
   controlsContainer.style.cssText = `
     position: fixed;
-    bottom: 20px;
-    right: 20px;
+    bottom: 0px;
+    left: 130px;
     display: flex;
     gap: 8px;
     flex-direction: column;
@@ -1024,5 +1021,5 @@ ganttInstance.release = function () {
 };
 
 // 在全局存储清理函数，以便其他地方也能调用
-window.cleanupZoomControls = cleanup;
+window.cleanupControls = cleanup;
 ```