doc: storybook add stories for three-coverage-heatmap Renderer.

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);
 

packages/three-coverage-heatmap/src/three/index.js

@@ -190,6 +190,4 @@ function App() {
   };
 }
 
-const instance = new App();
-
-export default instance;
+export default App;

src/stories/Renderer.jsx

@@ -0,0 +1,2 @@
+import Renderer from "three-coverage-heatmap";
+export default Renderer;

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],
+    ],
+  },
+};