docs: fix storyline previews and isolate demo scrolling

docs/assets/examples/en/extension-chart/storyline-arc.md

@@ -4,18 +4,21 @@ group: extension chart
 title: Arc Storyline
 keywords: extension, storyline, arc
 order: 12
+cover: /vchart/preview/storyline-arc.png
 option: storylineChart
 ---
 
 # Arc Storyline
 
-This example uses the `arc` case from `packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts`, retaining its images, data and theme while adapting the chart width and height to its container.
+This example uses the `arc` case from `packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts`, retaining its images, data and theme using a fixed-size canvas with scrolling inside this demo.
 
 Each run generates 3–9 nodes at random and preserves the case's long text to demonstrate how the layout handles different node counts and content lengths.
 
 ## Key Configurations
 
-- `autoFit: true`: adapt width and height to the container without fixed `width` or `height` values; the demo container scales with the page at a `16 / 9` aspect ratio.
+- `autoFit: false`, `width: 1200`, `height: 675`: keep a fixed canvas size.
+- `scrollContainer`: fill the preview area and use `overflow: auto` to view the larger canvas without changing the site's outer container styles.
+- `window.customRelease`: remove this demo's DOM when rerunning or switching examples so scrollbars do not persist.
 - `layout: { type: 'arc', direction: 'up' }`: use a dome arrangement.
 - `titleImage.image`: show the World Cup theme image at the bottom.
 - `themeColor`: use the test case's orange theme.
@@ -89,39 +92,69 @@ const buildData = layout => {
     const seed = baseData[index % baseData.length];
     // portrait 布局：附加 marker 时间节点（2012、2013…）以便沿中轴纵向展示
     const marker = layout === 'portrait' ? String(2012 + index) : undefined;
-    return {
-      ...seed,
-      id: `${layout}-${index}-${seed.id}`,
-      title: `${seed.title} ${index + 1}`,
-      content: [`${seed.content}`, `Layout ${layout} / Block ${index + 1} of ${count}.`],
-      ...(marker ? { marker } : {})
-    };
+    return Object.assign(
+      {},
+      seed,
+      {
+        id: `${layout}-${index}-${seed.id}`,
+        title: `${seed.title} ${index + 1}`,
+        content: [`${seed.content}`, `Layout ${layout} / Block ${index + 1} of ${count}.`]
+      },
+      marker ? { marker } : {}
+    );
   });
 };
 const themeColor = 'rgb(228,154,56)';
 const titleImage = {
   image: TITLE_IMAGE_URL
 };
 const layout = 'arc';
+const chartWidth = 1200;
+const chartHeight = 675;
 const spec = {
   type: 'storyline',
-  autoFit: true,
+  autoFit: false,
+  width: chartWidth,
+  height: chartHeight,
   // padding: 0,
   data: buildData(layout),
   layout: { type: 'arc', direction: 'up' },
   titleImage,
   themeColor
 };
 
-// Scale the demo container with the page width and preserve the original case aspect ratio.
+// Keep the canvas size fixed and scrolling local to this demo.
 const container = document.getElementById(CONTAINER_ID);
-container.style.width = '100%';
-container.style.height = 'auto';
-container.style.contain = 'size';
-container.style.aspectRatio = '16 / 9';
+const scrollContainer = document.createElement('div');
+Object.assign(scrollContainer.style, {
+  position: 'absolute',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  left: '0',
+  overflow: 'auto'
+});
+
+const chartContainer = document.createElement('div');
+Object.assign(chartContainer.style, {
+  position: 'relative',
+  width: `${chartWidth}px`,
+  height: `${chartHeight}px`
+});
+scrollContainer.appendChild(chartContainer);
+container.appendChild(scrollContainer);
+
+// The site releases the chart instance; only remove this demo's DOM here.
+const cleanup = () => {
+  scrollContainer.remove();
+  if (window.customRelease === cleanup) {
+    delete window.customRelease;
+  }
+};
+window.customRelease = cleanup;
 
 registerStorylineChart();
-const vchart = new VChart(spec, { dom: container });
+const vchart = new VChart(spec, { dom: chartContainer });
 vchart.renderSync();
 
 // Just for the convenience of console debugging, DO NOT COPY!

docs/assets/examples/en/extension-chart/storyline-clock.md

@@ -4,18 +4,21 @@ group: extension chart
 title: Clock Storyline
 keywords: extension, storyline, clock
 order: 11
+cover: /vchart/preview/storyline-clock.png
 option: storylineChart
 ---
 
 # Clock Storyline
 
-This example uses the `clock` case from `packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts`, retaining its six milestones, images and theme with shorter titles and descriptions while adapting the chart width and height to its container.
+This example uses the `clock` case from `packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts`, retaining its six milestones, images and theme with shorter titles and descriptions using a fixed-size canvas with scrolling inside this demo.
 
 The data covers six World Cup milestones from 1930 to 2022. Each milestone uses a short Chinese title and a one-sentence description.
 
 ## Key Configurations
 
-- `autoFit: true`: adapt width and height to the container without fixed `width` or `height` values; the demo container scales with the page at a `16 / 9` aspect ratio.
+- `autoFit: false`, `width: 1200`, `height: 675`: keep a fixed canvas size.
+- `scrollContainer`: fill the preview area and use `overflow: auto` to view the larger canvas without changing the site's outer container styles.
+- `window.customRelease`: remove this demo's DOM when rerunning or switching examples so scrollbars do not persist.
 - `layout: 'clock'`: arrange six World Cup nodes along a circular orbit in data order.
 - `titleImage`: use a compact `180 × 60` theme image at the top to leave room for the orbit and node text.
 - `title.style` and `content.style`: use a title font size of `14` with a line height of `18`, and a content font size of `11` with a line height of `14`. Keep one short sentence per node.
@@ -38,9 +41,13 @@ const titleImage = {
   width: 180,
   height: 60
 };
+const chartWidth = 1200;
+const chartHeight = 675;
 const spec = {
   type: 'storyline',
-  autoFit: true,
+  autoFit: false,
+  width: chartWidth,
+  height: chartHeight,
   padding: [16, 8, 16, 8],
   block: { padding: 0 },
   layout: 'clock',
@@ -92,15 +99,38 @@ const spec = {
   ]
 };
 
-// Scale the demo container with the page width and preserve the original case aspect ratio.
+// Keep the canvas size fixed and scrolling local to this demo.
 const container = document.getElementById(CONTAINER_ID);
-container.style.width = '100%';
-container.style.height = 'auto';
-container.style.contain = 'size';
-container.style.aspectRatio = '16 / 9';
+const scrollContainer = document.createElement('div');
+Object.assign(scrollContainer.style, {
+  position: 'absolute',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  left: '0',
+  overflow: 'auto'
+});
+
+const chartContainer = document.createElement('div');
+Object.assign(chartContainer.style, {
+  position: 'relative',
+  width: `${chartWidth}px`,
+  height: `${chartHeight}px`
+});
+scrollContainer.appendChild(chartContainer);
+container.appendChild(scrollContainer);
+
+// The site releases the chart instance; only remove this demo's DOM here.
+const cleanup = () => {
+  scrollContainer.remove();
+  if (window.customRelease === cleanup) {
+    delete window.customRelease;
+  }
+};
+window.customRelease = cleanup;
 
 registerStorylineChart();
-const vchart = new VChart(spec, { dom: container });
+const vchart = new VChart(spec, { dom: chartContainer });
 vchart.renderSync();
 
 // Just for the convenience of console debugging, DO NOT COPY!

docs/assets/examples/en/extension-chart/storyline-landscape.md

@@ -4,18 +4,21 @@ group: extension chart
 title: Landscape Storyline
 keywords: extension, storyline, landscape
 order: 9
+cover: /vchart/preview/storyline-landscape.png
 option: storylineChart
 ---
 
 # Landscape Storyline
 
-This example uses the `landscape` case from `packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts`, retaining its images, data and theme while adapting the chart width and height to its container.
+This example uses the `landscape` case from `packages/vchart-extension/__tests__/runtime/browser/test-page/storyline.ts`, retaining its images, data and theme using a fixed-size canvas with scrolling inside this demo.
 
 Each run generates 3–9 nodes at random and preserves the case's long text to demonstrate how the layout handles different node counts and content lengths.
 
 ## Key Configurations
 
-- `autoFit: true`: adapt width and height to the container without fixed `width` or `height` values; the demo container scales with the page at a `16 / 9` aspect ratio.
+- `autoFit: false`, `width: 1200`, `height: 675`: keep a fixed canvas size.
+- `scrollContainer`: fill the preview area and use `overflow: auto` to view the larger canvas without changing the site's outer container styles.
+- `window.customRelease`: remove this demo's DOM when rerunning or switching examples so scrollbars do not persist.
 - `layout: 'landscape'`: arrange nodes along a horizontal curve.
 - `line`: retain the test case's connection settings.
 - `image.showBackground: false`: hide main-image background decorations.
@@ -89,13 +92,16 @@ const buildData = layout => {
     const seed = baseData[index % baseData.length];
     // portrait 布局：附加 marker 时间节点（2012、2013…）以便沿中轴纵向展示
     const marker = layout === 'portrait' ? String(2012 + index) : undefined;
-    return {
-      ...seed,
-      id: `${layout}-${index}-${seed.id}`,
-      title: `${seed.title} ${index + 1}`,
-      content: [`${seed.content}`, `Layout ${layout} / Block ${index + 1} of ${count}.`],
-      ...(marker ? { marker } : {})
-    };
+    return Object.assign(
+      {},
+      seed,
+      {
+        id: `${layout}-${index}-${seed.id}`,
+        title: `${seed.title} ${index + 1}`,
+        content: [`${seed.content}`, `Layout ${layout} / Block ${index + 1} of ${count}.`]
+      },
+      marker ? { marker } : {}
+    );
   });
 };
 const themeColor = 'rgb(228,154,56)';
@@ -113,9 +119,13 @@ const commonLine = {
   }
 };
 const layout = 'landscape';
+const chartWidth = 1200;
+const chartHeight = 675;
 const spec = {
   type: 'storyline',
-  autoFit: true,
+  autoFit: false,
+  width: chartWidth,
+  height: chartHeight,
   padding: 20,
   data: buildData(layout),
   layout,
@@ -127,15 +137,38 @@ const spec = {
   }
 };
 
-// Scale the demo container with the page width and preserve the original case aspect ratio.
+// Keep the canvas size fixed and scrolling local to this demo.
 const container = document.getElementById(CONTAINER_ID);
-container.style.width = '100%';
-container.style.height = 'auto';
-container.style.contain = 'size';
-container.style.aspectRatio = '16 / 9';
+const scrollContainer = document.createElement('div');
+Object.assign(scrollContainer.style, {
+  position: 'absolute',
+  top: '0',
+  right: '0',
+  bottom: '0',
+  left: '0',
+  overflow: 'auto'
+});
+
+const chartContainer = document.createElement('div');
+Object.assign(chartContainer.style, {
+  position: 'relative',
+  width: `${chartWidth}px`,
+  height: `${chartHeight}px`
+});
+scrollContainer.appendChild(chartContainer);
+container.appendChild(scrollContainer);
+
+// The site releases the chart instance; only remove this demo's DOM here.
+const cleanup = () => {
+  scrollContainer.remove();
+  if (window.customRelease === cleanup) {
+    delete window.customRelease;
+  }
+};
+window.customRelease = cleanup;
 
 registerStorylineChart();
-const vchart = new VChart(spec, { dom: container });
+const vchart = new VChart(spec, { dom: chartContainer });
 vchart.renderSync();
 
 // Just for the convenience of console debugging, DO NOT COPY!