Adds path textfield in image example

radiant-labs · Nov 8, 2023 · 89d04ae · 89d04ae
1 parent 6f9f10c
commit 89d04ae
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 25 deletions.
diff --git a/examples/web/src/App.tsx b/examples/web/src/App.tsx
@@ -1,14 +1,14 @@
-import { RadiantProvider } from 'radiant-sdk';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import BasicExample from './basic';
 import ImageExample from './image';
 import { Button, ButtonGroup } from '@mui/material';
 
 function App() {
     return (
-        <RadiantProvider>
+        <div>
             <BrowserRouter>
                 <Routes>
+                    <Route path="/" element={<div />} />
                     <Route path="basic" element={<BasicExample />} />
                     <Route path="image" element={<ImageExample />} />
                 </Routes>
@@ -17,7 +17,7 @@ function App() {
                 <Button href="/basic">Basic</Button>
                 <Button href="/image">Image</Button>
             </ButtonGroup>
-        </RadiantProvider>
+        </div>
     )
 }
 

diff --git a/examples/web/src/basic/index.tsx b/examples/web/src/basic/index.tsx
@@ -1,4 +1,4 @@
-import { RadiantCanvas, useCurrentController } from 'radiant-sdk';
+import { RadiantCanvas, RadiantProvider, useCurrentController } from 'radiant-sdk';
 import { Box, Button, ButtonGroup, Stack, Typography } from '@mui/material';
 import { useEffect, useState } from 'react';
 
@@ -34,6 +34,10 @@ const Tools = () => {
         controller && controller.activateTool(1);
     }
 
+    useEffect(() => {
+        controller && controller.addRectangle([100, 100], [100, 100]);
+    }, [controller])
+
     return (
         <Stack direction="row" spacing={2}>
             <Typography variant="h6">Tools: </Typography>
@@ -169,21 +173,17 @@ const Color = () => {
 }
 
 const BasicExample = () => {
-    const { controller } = useCurrentController();
-
-    useEffect(() => {
-        controller && controller.addRectangle([100, 100], [100, 100]);
-    }, [controller])
-
     return (
-        <Stack>
-            <Tools />
-            <Box height={10} />
-            <Transform />
-            <Box height={10} />
-            <Color />
-            <RadiantCanvas />
-        </Stack>
+        <RadiantProvider>
+            <Stack>
+                <Tools />
+                <Box height={10} />
+                <Transform />
+                <Box height={10} />
+                <Color />
+                <RadiantCanvas />
+            </Stack>
+        </RadiantProvider>
     )
 }
 

diff --git a/examples/web/src/image/index.tsx b/examples/web/src/image/index.tsx
@@ -1,7 +1,9 @@
-import { RadiantCanvas, useCurrentController } from 'radiant-sdk';
-import { Box, Button, Stack } from '@mui/material';
+import { RadiantCanvas, RadiantProvider, useCurrentController } from 'radiant-sdk';
+import { Box, Button, Stack, TextField } from '@mui/material';
+import { useState } from 'react';
 
 const ImageLoader = () => {
+    const [path, setPath] = useState<string>('');
     const { controller } = useCurrentController();
 
    const loadImage = async (path: string) => {
@@ -10,18 +12,27 @@ const ImageLoader = () => {
 
     return (
         <Stack direction="row" spacing={2}>
-            <Button onClick={() => loadImage('https://i.imgur.com/XbLP6ux.png')}>Load Image</Button>
+            <TextField 
+                style={{ width: 300 }}
+                label="Image Path" 
+                variant="outlined" 
+                placeholder='https://i.imgur.com/XbLP6ux.png' 
+                value={path} 
+                onChange={(e) => setPath(e.target.value)} />
+            <Button onClick={() => loadImage(path || 'https://i.imgur.com/XbLP6ux.png')}>Load Image</Button>
         </Stack>
     )
 }
 
 const ImageExample = () => {
     return (
-        <Stack>
-            <ImageLoader />
-            <Box height={10} />
-            <RadiantCanvas />
+        <RadiantProvider>
+            <Stack>
+                <ImageLoader />
+                <Box height={10} />
+                <RadiantCanvas />
         </Stack>
+        </RadiantProvider>
     )
 }