Ability to select multiple blocks on Drag and Drop App Builder

packages/client/src/components/blocks-workspace/panels/SelectedBlockPanel.tsx

@@ -13,21 +13,20 @@ import {
     Stack,
     Typography,
     IconButton,
-    Divider,
     TextField,
     Collapse,
     useNotification,
-    Modal,
-    Tabs,
-    Tab,
     ToggleTabsGroup,
+    AlertTitle,
 } from '@semoss/ui';
 
 import { useDesigner } from '@/hooks';
-import { BlockAvatar, SelectedMenuSection } from '@/components/designer';
+import { SelectedMenuSection } from '@/components/designer';
 import { AddVariableModal } from '@/components/notebook';
 import { Panel } from '@/components/workspace';
-import VariationIcon from '../../../../../../libs/renderer/src/assets/img/VariationLogo.svg';
+import MultiBlockIcon from '../../../assets/img/Multiple_Block.svg';
+import GroupIcon from '../../../assets/img/Group.svg';
+import VariationIcon from '../../../assets/img/VariationLogo.svg';
 
 const StyledTitle = styled(Typography)(() => ({
     textTransform: 'capitalize',
@@ -72,6 +71,35 @@ const StyledMessage = styled('div')(({ theme }) => ({
     width: '100%',
     alignItems: 'center',
     justifyContent: 'center',
+    padding: '6px 0px',
+}));
+const StyledMultiBlockMessage = styled('div')(({ theme }) => ({
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'flex-start',
+    justifyContent: 'center',
+    padding: '8px 0px',
+    flex: '1 0 0',
+}));
+const StyledAlertTitle = styled(AlertTitle)(({ theme }) => ({
+    alignSelf: 'stretch',
+    color: '#666',
+    fontFamily: 'Inter',
+    fontSize: '16px',
+    fontStyle: 'normal',
+    fontWeight: 500,
+    lineHeight: '150%',
+    letterSpacing: '0.15px',
+}));
+const StyledTypography = styled(Typography)(({ theme }) => ({
+    alignSelf: 'stretch',
+    color: '#666',
+    fontFamily: 'Inter',
+    fontSize: '14px',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    lineHeight: '150%',
+    letterSpacing: '0.17px',
 }));
 //Tab group with custom style with width and margin
 const StyledToggleTabsGroup = styled(ToggleTabsGroup)(({ theme }) => ({
@@ -112,6 +140,27 @@ const StyledToggleTabsGroupItem = styled(ToggleTabsGroup.Item)(({ theme }) => ({
 }));
 const StyledCustomTabPanel = styled('div')(({ theme }) => ({}));
 
+const StyledParentDiv = styled('div')(({ theme }) => ({
+    padding: '16px 8px',
+}));
+
+const StyledDiv = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    padding: '6px 16px',
+    gap: '12px',
+    alignSelf: 'stretch',
+    borderRadius: '4px',
+    background: '#F5F5F5',
+}));
+
+const StyledImgDiv = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    width: '22px',
+    height: '22px',
+}));
+
 const StyledVariationIcon = styled('img')(({ theme }) => ({
     width: theme.spacing(4),
     height: theme.spacing(4),
@@ -283,16 +332,50 @@ export const SelectedBlockPanel = observer(() => {
             return '';
         }
     };
+    if (designer.selectedBlocks.length > 1) {
+        return (
+            <Panel>
+                <StyledParentDiv>
+                    <StyledDiv>
+                        <StyledImgDiv>
+                            <img
+                                src={MultiBlockIcon}
+                                alt="Multiple Blocks Selected"
+                            ></img>
+                        </StyledImgDiv>
+                        <StyledMultiBlockMessage>
+                            <StyledAlertTitle>
+                                Multiple Blocks Selected
+                            </StyledAlertTitle>
+                            <StyledTypography variant="body2">
+                                Select a single block to view its setting
+                            </StyledTypography>
+                        </StyledMultiBlockMessage>
+                    </StyledDiv>
+                </StyledParentDiv>
+            </Panel>
+        );
+    }
 
     // ignore if there is no menu
     if (!block) {
         return (
             <Panel>
-                <StyledMessage>
-                    <Typography variant="caption">
-                        Select a block to update
-                    </Typography>
-                </StyledMessage>
+                <StyledParentDiv>
+                    <StyledDiv>
+                        <StyledImgDiv>
+                            <img src={GroupIcon} alt="No Blocks Selected"></img>
+                        </StyledImgDiv>
+                        <StyledMessage>
+                            <StyledAlertTitle>
+                                No Block Selected
+                            </StyledAlertTitle>
+                            <StyledTypography variant="body2">
+                                Select a block to view its setting
+                            </StyledTypography>
+                        </StyledMessage>
+                    </StyledDiv>
+                </StyledParentDiv>
             </Panel>
         );
     }

packages/client/src/components/designer/AddBlocksMenuCard.tsx

@@ -247,6 +247,9 @@ export const AddBlocksMenuCard = observer((props: AddBlocksMenuItemProps) => {
         // clear the selected
         designer.setSelected(id ? id : '');
 
+        // clear the selectedBlocks
+        designer.addBlockToSelected('clear');
+
         // set as active
         setLocal(false);
     }, [

packages/client/src/components/designer/Screen.tsx

@@ -104,6 +104,26 @@ export const Screen = observer((props: ScreenProps) => {
         designer.setSelected(designer.hovered);
     };
 
+    const handleMultipleSelection = (event) => {
+        if (!designer.hovered || designer.hovered === designer.selected) {
+            return;
+        }
+        const id = getNearestBlock(event.target as Element);
+
+        // prevent events for elements until selected
+        event.stopPropagation();
+        event.preventDefault();
+        if (designer.selectedBlocks.includes(id)) {
+            return; // Do nothing if the id is already selected
+        }
+
+        designer.setSelected(id);
+        designer.addBlockToSelected(id);
+        if (designer.selectedBlocks.length > 1) {
+            designer.setSelected('');
+        }
+    };
+
     /**
      * Handle the mouseover on the page. This will hover the nearest block.
      *
@@ -256,7 +276,8 @@ export const Screen = observer((props: ScreenProps) => {
         <StyledContainer ref={eleRef}>
             {eleRef.current ? (
                 <>
-                    {designer.selected && (
+                    {(designer.selected ||
+                        designer.selectedBlocks.length > 1) && (
                         <SelectedMask screenEle={eleRef.current} />
                     )}
                     {designer.hovered && (
@@ -279,7 +300,16 @@ export const Screen = observer((props: ScreenProps) => {
                     <StyledContentInner
                         onMouseOver={handleMouseOver}
                         isHoveredOverSelectedBlock={isHoveredOverSelectedBlock}
-                        onClickCapture={handleClickCapture}
+                        onClickCapture={(e) => {
+                            if (e.ctrlKey || e.metaKey || e.shiftKey) {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                handleMultipleSelection(e);
+                            } else {
+                                designer.addBlockToSelected('clear');
+                                handleClickCapture(e);
+                            }
+                        }}
                     >
                         {children}
                     </StyledContentInner>