Debug

src/LassoSelect.tsx

@@ -15,7 +15,7 @@ type LassoSelectProps = {
    * @default true
    */
   enabled?: boolean;
-  children: ReactNode;
+  children?: ReactNode;
   points: PointBaseProps[];
   onChange: (selected: PointBaseProps[]) => void;
 };
@@ -91,12 +91,16 @@ export function LassoSelect({
         // The dimension of the canvas
         const canvasRect = gl.domElement.getClientRects()[0];
         // Capture the click event position
+
         const ex = e.clientX - canvasRect.left;
         const ey = e.clientY - canvasRect.top;
 
         const nx = (ex / canvasRect.width) * 2 - 1;
         const ny = -((ey / canvasRect.height) * 2 - 1);
 
+        console.log(
+          `point move: ` + JSON.stringify({ ex, ey, nx, ny, canvasRect })
+        );
         // If the mouse hasn't moved a lot since the last point
         if (Math.abs(ex - prevX) >= 3 || Math.abs(ey - prevY) >= 3) {
           // Check if the mouse moved in roughly the same direction as the previous point

stories/LassoSelect.stories.tsx

@@ -92,6 +92,45 @@ const Template: Story = (props) => {
   );
 };
 
+export const ModalView = () => {
+  const [selected, setSelected] = useState([]);
+  const [tool, setTool] = useState<ToolName>('move');
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: 200,
+        right: 8,
+        display: 'flex',
+        flexDirection: 'row',
+        border: '1px solid blue',
+        borderRadius: '4px',
+        height: 'calc(100% - 200px)',
+        overflow: 'hidden',
+        zIndex: 2,
+      }}
+    >
+      <Container showToolbar selectedTool={tool} onToolChange={setTool}>
+        <PointCloudWithSelect
+          onChange={(sel) => {
+            setSelected(sel.map((s) => s.metaData.uuid));
+          }}
+          selectedPoints={selected}
+          selectedTool={tool}
+        />
+      </Container>
+      <aside>
+        <header>Selected Items</header>
+        <ul>
+          {selected.map((s) => (
+            <li key={s}>{s}</li>
+          ))}
+        </ul>
+      </aside>
+    </div>
+  );
+};
+
 // By passing using the Args format for exported stories, you can control the props for a component for reuse in a test
 // https://storybook.js.org/docs/react/workflows/unit-testing
 export const Default = Template.bind({});