[storybook/layer-leaflet/maplibre] adding button that randomly change…

… the width of the sigma container
jacomyal · Nov 19, 2024 · 66c910e · 66c910e
1 parent 90141df
commit 66c910e
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/packages/storybook/stories/3-additional-packages/layer-leaflet/basic.ts b/packages/storybook/stories/3-additional-packages/layer-leaflet/basic.ts
@@ -37,6 +37,12 @@ export default () => {
     getNodeLatLng: (attrs: Attributes) => ({ lat: attrs.latitude, lng: attrs.longitude }),
   });
 
+  const widthBtn = document.getElementById("change-width") as HTMLButtonElement;
+  widthBtn.addEventListener("click", () => {
+    container.style.width = 50 + Math.random() * 50 + "%";
+    renderer.resize(true);
+  });
+
   return () => {
     renderer.kill();
   };

diff --git a/packages/storybook/stories/3-additional-packages/layer-leaflet/index.html b/packages/storybook/stories/3-additional-packages/layer-leaflet/index.html
@@ -11,5 +11,7 @@
     z-index: 500;
   }
 </style>
-<div id="sigma-container"></div>
+<div id="sigma-container">
+  <button id="change-width" style="z-index:999;position: absolute;">Change width</button>
+</div>
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
diff --git a/packages/storybook/stories/3-additional-packages/layer-maplibre/basic.ts b/packages/storybook/stories/3-additional-packages/layer-maplibre/basic.ts
@@ -37,6 +37,12 @@ export default () => {
     getNodeLatLng: (attrs: Attributes) => ({ lat: attrs.latitude, lng: attrs.longitude }),
   });
 
+  const widthBtn = document.getElementById("change-width") as HTMLButtonElement;
+  widthBtn.addEventListener("click", () => {
+    container.style.width = 50 + Math.random() * 50 + "%";
+    renderer.resize(true);
+  });
+
   return () => {
     renderer.kill();
   };

diff --git a/packages/storybook/stories/3-additional-packages/layer-maplibre/index.html b/packages/storybook/stories/3-additional-packages/layer-maplibre/index.html
@@ -11,5 +11,7 @@
     z-index: 500;
   }
 </style>
-<div id="sigma-container"></div>
+<div id="sigma-container">
+  <button id="change-width" style="z-index:999;position: absolute;">Change width</button>
+</div>
 <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" />