From 246b2d5f7bfbec053d76c7091b88b798e2a246ce Mon Sep 17 00:00:00 2001
From: yushiang <tsengyushiang@gmail.com>
Date: Tue, 21 May 2024 22:52:30 +0800
Subject: [PATCH] doc: storybook add stories for three-coverage-heatmap
 Renderer.

---
 .../src/components/Renderer/index.jsx         |  5 +-
 .../three-coverage-heatmap/src/three/index.js |  4 +-
 src/stories/App.jsx                           | 27 -----
 src/stories/App.stories.js                    | 24 -----
 src/stories/Renderer.jsx                      |  2 +
 src/stories/Renderer.stories.js               | 99 +++++++++++++++++++
 6 files changed, 105 insertions(+), 56 deletions(-)
 delete mode 100644 src/stories/App.jsx
 delete mode 100644 src/stories/App.stories.js
 create mode 100644 src/stories/Renderer.jsx
 create mode 100644 src/stories/Renderer.stories.js

diff --git a/packages/three-coverage-heatmap/src/components/Renderer/index.jsx b/packages/three-coverage-heatmap/src/components/Renderer/index.jsx
index ee0bdfa..52519e5 100644
--- a/packages/three-coverage-heatmap/src/components/Renderer/index.jsx
+++ b/packages/three-coverage-heatmap/src/components/Renderer/index.jsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef } from "react";
-import ThreeApp from "../../three";
+import React, { useEffect, useRef, useState } from "react";
+import ThreeRenderer from "../../three";
 
 const Renderer = ({
   texture,
@@ -9,6 +9,7 @@ const Renderer = ({
   aabbs,
   planes,
 }) => {
+  const [ThreeApp] = useState(new ThreeRenderer());
   const divRef = useRef(null);
   const canvasRef = useRef(null);
 
diff --git a/packages/three-coverage-heatmap/src/three/index.js b/packages/three-coverage-heatmap/src/three/index.js
index 7ea8aa2..d9b8f5c 100644
--- a/packages/three-coverage-heatmap/src/three/index.js
+++ b/packages/three-coverage-heatmap/src/three/index.js
@@ -190,6 +190,4 @@ function App() {
   };
 }
 
-const instance = new App();
-
-export default instance;
+export default App;
diff --git a/src/stories/App.jsx b/src/stories/App.jsx
deleted file mode 100644
index 27f78a6..0000000
--- a/src/stories/App.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import Renderer from "three-coverage-heatmap";
-import PropTypes from "prop-types";
-
-function Demo({
-  texture,
-  isSignalIndex,
-  signalIntensity,
-  signals,
-  aabbs,
-  planes,
-}) {
-  const props = {
-    texture,
-    isSignalIndex,
-    signalIntensity,
-    signals,
-    aabbs,
-    planes,
-  };
-  return <Renderer {...props} />;
-}
-
-Demo.propTypes = {
-  texture: PropTypes.string,
-};
-
-export default Demo;
diff --git a/src/stories/App.stories.js b/src/stories/App.stories.js
deleted file mode 100644
index 0016cac..0000000
--- a/src/stories/App.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import App from "./App";
-import { wallsAABBs, furnitureAABBs, getPlanes } from "./data";
-
-export default {
-  title: "Example/App",
-  component: App,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Demo = {
-  args: {
-    texture: "./floorplan.png",
-    isSignalIndex: false,
-    signalIntensity: [10, 10],
-    signals: [
-      [0, 1.1, -4],
-      [0, 2.0, 8.1],
-    ],
-    aabbs: [...wallsAABBs, ...furnitureAABBs],
-    planes: getPlanes(0.5),
-  },
-};
diff --git a/src/stories/Renderer.jsx b/src/stories/Renderer.jsx
new file mode 100644
index 0000000..18c94a8
--- /dev/null
+++ b/src/stories/Renderer.jsx
@@ -0,0 +1,2 @@
+import Renderer from "three-coverage-heatmap";
+export default Renderer;
diff --git a/src/stories/Renderer.stories.js b/src/stories/Renderer.stories.js
new file mode 100644
index 0000000..82af283
--- /dev/null
+++ b/src/stories/Renderer.stories.js
@@ -0,0 +1,99 @@
+import Renderer from "./Renderer";
+import { wallsAABBs, furnitureAABBs, getPlanes } from "./data";
+
+export default {
+  title: "three-coverage-heatmap/Renderer",
+  tags: ["autodocs"],
+  component: Renderer,
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export const ShowroomFloorAp = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: false,
+    signalIntensity: [10],
+    signals: [[0, 1e-3, 8.1]],
+    aabbs: [...wallsAABBs, ...furnitureAABBs],
+    planes: getPlanes(0.8),
+  },
+};
+
+export const ShowroomCeilingAp = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: false,
+    signalIntensity: [10],
+    signals: [[0, 2.0, 8.1]],
+    aabbs: [...wallsAABBs, ...furnitureAABBs],
+    planes: getPlanes(0.8),
+  },
+};
+
+export const ShowroomTwoAps = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: false,
+    signalIntensity: [10, 10],
+    signals: [
+      [0, 1.1, -4],
+      [0, 2.0, 8.1],
+    ],
+    aabbs: [...wallsAABBs, ...furnitureAABBs],
+    planes: getPlanes(0.8),
+  },
+};
+
+export const ShowroomIndexMap = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: true,
+    signalIntensity: [10, 10],
+    signals: [
+      [0, 1.1, -4],
+      [0, 2.0, 8.1],
+    ],
+    aabbs: [...wallsAABBs, ...furnitureAABBs],
+    planes: getPlanes(0.8),
+  },
+};
+
+export const withoutDoor = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: false,
+    signalIntensity: [10, 10],
+    signals: [
+      [0, 1.1, -4],
+      [0, 2.0, 8.1],
+    ],
+    aabbs: [...wallsAABBs, ...furnitureAABBs],
+  },
+};
+
+export const withoutFurniture = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: false,
+    signalIntensity: [10, 10],
+    signals: [
+      [0, 1.1, -4],
+      [0, 2.0, 8.1],
+    ],
+    aabbs: [...wallsAABBs],
+  },
+};
+
+export const withoutWall = {
+  args: {
+    texture: "./floorplan.png",
+    isSignalIndex: false,
+    signalIntensity: [10, 10],
+    signals: [
+      [0, 1.1, -4],
+      [0, 2.0, 8.1],
+    ],
+  },
+};