docs: refine resize demo

s2-site/examples/interaction/advanced/demo/meta.json

@@ -37,12 +37,12 @@
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/e0z41b3e4/2021-11-16%25252020.11.53.gif"
     },
     {
-      "filename": "resize.ts",
+      "filename": "resize-active.ts",
       "title": {
         "zh": "自定义resize热区",
         "en": "Custom resize area"
       },
-      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/4vvt7uqA9/2021-12-06%25252010.36.39.gif"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/HEfCpSTRO/2021-12-06%25252011.39.15.gif"
     },
     {
       "filename": "merge-cell.ts",

s2-site/examples/interaction/advanced/demo/resize-active.ts

@@ -0,0 +1,78 @@
+import { PivotSheet } from '@antv/s2';
+import insertCss from 'insert-css';
+
+function createRadioGroup(s2) {
+  [
+    ['rowCellVertical', '行头热区'],
+    ['cornerCellHorizontal', '角头热区'],
+    ['colCellHorizontal', '列头水平方向resize热区'],
+    ['colCellVertical', '列头垂直方向resize热区'],
+  ].forEach(([value, text]) => {
+    const radio = document.createElement('input');
+
+    radio.type = 'radio';
+    radio.name = value;
+    radio.value = value;
+    radio.checked = true;
+
+    radio.addEventListener('click', (e) => {
+      const value = e.target.value;
+      const updated = !s2.options.interaction.resize[value];
+      radio.checked = updated;
+
+      s2.setOptions({
+        interaction: {
+          resize: {
+            [value]: updated,
+          },
+        },
+      });
+      s2.render(false);
+    });
+
+    const label = document.createElement('label');
+    label.innerText = text;
+    label.htmlFor = 'name';
+
+    document.querySelector('#container > canvas').before(radio);
+    document.querySelector('#container > canvas').before(label);
+  });
+}
+
+fetch(
+  'https://gw.alipayobjects.com/os/bmw-prod/2a5dbbc8-d0a7-4d02-b7c9-34f6ca63cff6.json',
+)
+  .then((res) => res.json())
+  .then((dataCfg) => {
+    const container = document.getElementById('container');
+
+    const s2Options = {
+      width: 600,
+      height: 480,
+      interaction: {
+        resize: {
+          rowCellVertical: true,
+          cornerCellHorizontal: true,
+          colCellHorizontal: true,
+          colCellVertical: true,
+        },
+      },
+    };
+
+    const s2 = new PivotSheet(container, dataCfg, s2Options);
+
+    s2.render();
+
+    createRadioGroup(s2);
+  });
+
+insertCss(`
+  input[type='radio'] {
+    margin-bottom: 20px;
+    margin-right: 4px;
+  }
+
+  label{
+    margin-right: 10px
+  }
+`);