starting toolboxdialog refactor

Program-AR · Sep 4, 2023 · 9a0cba6 · 9a0cba6
1 parent dfad233
commit 9a0cba6
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 87 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,7 +16,6 @@ import { useLocation } from 'react-router-dom';
 import ReactGA from "react-ga4";
 import { CreatorViewMode } from './components/creator/Editor/CreatorViewMode';
 import { useThemeContext } from './theme/ThemeContext';
-import { ToolboxPreview } from './components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview';
 
 const AnalyticsComponent = () => {
   const location = useLocation();
@@ -81,10 +80,6 @@ const router = createHashRouter([{
   {
     path: "/creador/ver",
     element: <CreatorViewMode/>
-  },
-  {
-    path: "/blocklyPrueba",
-    element: <ToolboxPreview/>
   }
 ]}]);
 

diff --git a/src/blockly.ts b/src/blockly.ts
@@ -47,7 +47,7 @@ const createPrimitiveBlock = (id: string, message: string, icon?: string) => {
   }
 
 
-export const categoryToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
+export const categorizedToolbox = (blocks: BlockType[]): Toolbox => ({
     kind: "categoryToolbox",
     contents: [
       {
@@ -58,7 +58,7 @@ export const categoryToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
     ]
 })
 
-export const uncategorizedToolboxFromBlocks = (blocks: BlockType[]): Toolbox => ({
+export const uncategorizedToolbox = (blocks: BlockType[]): Toolbox => ({
     kind: "flyoutToolbox",
     contents: blocks.map(blockTypeToToolboxBlock)
 })

diff --git a/src/components/creator/Editor/ChallengeDetailsEdition/ToolBoxDialog.tsx b/src/components/creator/Editor/ChallengeDetailsEdition/ToolBoxDialog.tsx
@@ -7,11 +7,11 @@ import { useTranslation } from "react-i18next";
 import { GenericModalDialog } from "../../../modalDialog/GenericModalDialog";
 import { PROCEDURE_CATEGORY } from "../SceneEdition/mapUtils";
 import { DetailsEditionButton } from "./DetailsEditionButton";
+import { ToolboxPreview } from "./ToolboxPreview";
 
 export const ToolBoxDialog = () => {
 
     const { t } = useTranslation('creator');
-    const tb = useTranslation('blocks').t;
 
     const storageChallenge = LocalStorage.getCreatorChallenge()
     const challenge: SerializedChallenge = storageChallenge ? storageChallenge : defaultChallenge('Duba')
@@ -21,23 +21,9 @@ export const ToolBoxDialog = () => {
     const toolboxState = new ToolboxState(challenge!, toolBoxItems)
     const [open, setOpen] = useState(false);
 
-    let currentIsCategorized = challenge!.toolbox.categorized
+    const currentIsCategorized = challenge!.toolbox.categorized
     const [isCategorized, setIsCategorized] = useState(currentIsCategorized || toolboxState.shouldDisableCategorization());
 
-    const handleIsCategorizedOnChange = (event: { target: { checked: boolean } }) => {
-        setIsCategorized(event.target.checked)
-    }
-
-    const handleCatOnChange = (event: { target: { name: string; checked: boolean } }) => {
-        toolboxState.categoryChanged(event.target.name, event.target.checked)
-        setToolBoxItems(toolboxState.selectedBlockIds())
-    }
-
-    const handleToolBoxOnChange = (event: { target: { name: string; checked: boolean } }) => {
-        toolboxState.blockChanged(event.target.name, event.target.checked)
-        setToolBoxItems(toolboxState.selectedBlockIds())
-    }
-
     const handleButtonClick = () => {
         if (!open) {
             setToolBoxItems(currentToolBox)
@@ -67,46 +53,83 @@ export const ToolBoxDialog = () => {
             onConfirm={handleOnConfirm}
             onCancel={handleOnCancel}
             title={t('toolbox.title')}>
-            <div>
-                <Stack alignItems="flex-end">
-                    <FormControlLabel key="isCategorized" labelPlacement="start"
-                        disabled={toolboxState.shouldDisableCategorization()}
-                        control={<Switch color="secondary" checked={isCategorized || toolboxState.shouldDisableCategorization()}
-                                        key="isCategorized"
-                                        onChange={handleIsCategorizedOnChange} />} 
-                        label={tb('categories.categorized')} />
-                    <Typography width="60%" textAlign="right" lineHeight="1.2" variant="caption">{t('toolbox.categoriesHint')}</Typography>
-                </Stack>
-                <Box style={{ justifyContent: 'center' }}>
-                    {categories.map((cat, i) => {
-                        return (<div key={cat}>
-                            <FormControlLabel key={cat + i}
-                                control={<Switch checked={toolboxState.isCategorySelected(cat)}
+            <Stack direction="row">
+                <div>
+                    <CategorizedToggle toolboxState={toolboxState} isCategorized={isCategorized} setIsCategorized={setIsCategorized}/>
+                    <BlocksSelection toolboxState={toolboxState} setToolBoxItems={setToolBoxItems} toolBoxItems={toolBoxItems} availableBlocks={availableBlocksFor(challenge!.scene.type)}/>
+                </div>
+                <ToolboxPreview availableBlocks={[]} categorized={isCategorized || toolboxState.shouldDisableCategorization()}/>
+            </Stack>
+        </GenericModalDialog>
+    </>
+}
+
+
+const CategorizedToggle = ({toolboxState, isCategorized, setIsCategorized}: any) => {
+    const {t} = useTranslation('blocks')
+
+    const handleIsCategorizedOnChange = (event: { target: { checked: boolean } }) => {
+        setIsCategorized(event.target.checked)
+    }
+
+    return <>
+        <Stack alignItems="flex-end">
+            <FormControlLabel key="isCategorized" labelPlacement="start"
+                disabled={toolboxState.shouldDisableCategorization()}
+                control={<Switch color="secondary" checked={isCategorized || toolboxState.shouldDisableCategorization()}
+                                key="isCategorized"
+                                onChange={handleIsCategorizedOnChange} />} 
+                label={t('categories.categorized')} />
+            <Typography width="60%" textAlign="right" lineHeight="1.2" variant="caption">{t('toolbox.categoriesHint')}</Typography>
+        </Stack>
+</>
+}
+
+const BlocksSelection = ({toolboxState, setToolBoxItems, availableBlocks, toolBoxItems}: any) => {
+    const {t} = useTranslation('blocks')
+
+
+    const handleCatOnChange = (event: { target: { name: string; checked: boolean } }) => {
+        toolboxState.categoryChanged(event.target.name, event.target.checked)
+        setToolBoxItems(toolboxState.selectedBlockIds())
+    }
+
+    const handleToolBoxOnChange = (event: { target: { name: string; checked: boolean } }) => {
+        toolboxState.blockChanged(event.target.name, event.target.checked)
+        setToolBoxItems(toolboxState.selectedBlockIds())
+    }
+
+    return <>
+        <Box style={{ justifyContent: 'center' }}>
+            {categories.map((cat, i) => {
+                return (<div key={cat}>
+                    <FormControlLabel key={cat + i}
+                        control={<Switch checked={toolboxState.isCategorySelected(cat)}
+                                        color="secondary"
+                                        name={cat}
+                                        key={cat + i}
+                                        onChange={handleCatOnChange} />}
+                        label={<Typography variant="h6">{t('categories.' + cat)}</Typography>} />
+                    {availableBlocks.map((block: any) => {
+                        return ((cat === block.categoryId.toLowerCase()) && <div key={block.id} style={{ paddingLeft: "20px" }}>
+                            <FormControlLabel key={block.id}
+                                control={<Switch checked={toolBoxItems.includes(block.id)}
                                                 color="secondary"
-                                                name={cat}
-                                                key={cat + i}
-                                                onChange={handleCatOnChange} />}
-                                label={<Typography variant="h6">{tb('categories.' + cat)}</Typography>} />
-                            {availableBlocksFor(challenge!.scene.type).map((block) => {
-                                return ((cat === block.categoryId.toLowerCase()) && <div key={block.id} style={{ paddingLeft: "20px" }}>
-                                    <FormControlLabel key={block.id}
-                                        control={<Switch checked={toolBoxItems.includes(block.id)}
-                                                        color="secondary"
-                                                        name={block.id}
-                                                        key={block.id}
-                                                        onChange={handleToolBoxOnChange} />} 
-                                        label={tb('blocks.' + block.intlId)} />
-                                    <br />
-                                </div>)
-                            })}
+                                                name={block.id}
+                                                key={block.id}
+                                                onChange={handleToolBoxOnChange} />} 
+                                label={t('blocks.' + block.intlId)} />
+                            <br />
                         </div>)
                     })}
-                </Box>
-            </div>
-        </GenericModalDialog>
-    </>
+                </div>)
+            })}
+        </Box>
+</>
+
 }
 
+
 class ToolboxState {
     categories: CategorySelection[] = [];
 

diff --git a/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx b/src/components/creator/Editor/ChallengeDetailsEdition/ToolboxPreview.tsx
@@ -3,45 +3,26 @@ import { BlocklyWorkspace } from "react-blockly";
 import Blockly from "blockly";
 import { useTranslation } from "react-i18next";
 import { BlockType } from "../../../blocks";
-import { categoryToolboxFromBlocks, setupBlocklyBlocks } from "../../../../blockly";
+import { categorizedToolbox, setupBlocklyBlocks, uncategorizedToolbox } from "../../../../blockly";
 
+type ToolboxPreviewProps = {
+  availableBlocks: BlockType[]
+  categorized: boolean
+}
 
-export const ToolboxPreview = () => {
+export const ToolboxPreview = ({availableBlocks, categorized}: ToolboxPreviewProps) => {
   const {t} = useTranslation()
 
   setupBlocklyBlocks(t)
 
-  const toolboxBlocks: BlockType[] = [
-    {
-      id: 'MoverACasillaDerecha',
-      intlId: 'moveRight',
-      categoryId: 'primitives'
-  },
-  {
-      id: 'MoverACasillaIzquierda',
-      intlId: 'moveLeft',
-      categoryId: 'primitives'
-  },
-  {
-      id: 'MoverACasillaArriba',
-      intlId: 'moveUp',
-      categoryId: 'primitives'
-  },
-  {
-      id: 'MoverACasillaAbajo',
-      intlId: 'moveDown',
-      categoryId: 'primitives'
-  },
-  ]
-
   return (
       <>
       <div style={{ height: "600px", width: "800px"}}>
           <BlocklyWorkspace
-          toolboxConfiguration={categoryToolboxFromBlocks(toolboxBlocks)}
-          className="fill-height"
-          workspaceConfiguration={{trashcan:false, scrollbars: false}}
-          onWorkspaceChange={() => {Blockly.getMainWorkspace().clear()}}
+          toolboxConfiguration={categorized ? categorizedToolbox(availableBlocks) : uncategorizedToolbox(availableBlocks)}
+          className="toolbox-preview"
+          workspaceConfiguration={{trashcan:false, scrollbars: false}} //Needed to make it look like this is only the toolbox
+          onWorkspaceChange={() => {Blockly.getMainWorkspace().clear()}} //Needed to make it look like this is only the toolbox
           />
       </div>
       </>