Built container for new left panel and canvas. Implemented new nested rendering logic w/ drag and drop functionality and converted to typescript

Author: tsully

package.json

@@ -142,6 +142,8 @@
     "react": "^16.13.0",
     "react-ace": "^8.1.0",
     "react-d3-tree": "^1.12.3",
+    "react-dnd": "^11.1.3",
+    "react-dnd-html5-backend": "^11.1.3",
     "react-dom": "^16.4.1",
     "react-draggable": "^3.0.5",
     "react-konva": "^16.12.0-0",

src/components/AppNew.tsx

@@ -0,0 +1,29 @@
+import React, { useState } from 'react';
+import '../public/styles/style.css';
+import '../public/styles/styleNew.css';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
+import AppContainer from '../containers/AppContainer';
+import { initialState, stateContext } from '../context/context';
+// import { Context } from '../interfaces/InterfacesNew';
+
+// Intermediary component to wrap main App component with higher order provider components
+export const App = (): JSX.Element => {
+  const [context, setContext] = useState(initialState);
+  return (
+    <div className="app">
+      <DndProvider backend={HTML5Backend}>
+        <header
+          style={{ height: '40px', width: '100%', backgroundColor: 'white' }}
+        >
+          ReacType
+        </header>
+        <stateContext.Provider value={[context, setContext]}>
+          <AppContainer />
+        </stateContext.Provider>
+      </DndProvider>
+    </div>
+  );
+};
+
+export default App;

src/components/left/ComponentPanelItemNew.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Grid from '@material-ui/core/Grid';
+
+import { useDrag } from 'react-dnd';
+import { ItemTypes } from '../../constants/ItemTypes';
+
+const ComponentPanelItem = (): JSX.Element => {
+  // useDrag hook allows components in left panel to be drag source
+  const [{ isDragging }, drag] = useDrag({
+    item: {
+      type: ItemTypes.INSTANCE,
+      newInstance: true
+      // category,
+    },
+    collect: (monitor: any) => ({
+      isDragging: !!monitor.isDragging()
+    })
+  });
+  return (
+    <Grid
+      item
+      ref={drag}
+      xs={12}
+      style={{
+        color: 'white',
+        // this is experimental for version: BLADERUNNER THEME
+        backgroundColor: 'none',
+        borderRadius: '10px',
+        // minWidth: '340px',
+        minHeight: '100px',
+        border: '2px solid white'
+      }}
+    >
+      Component Panel
+    </Grid>
+  );
+};
+
+export default ComponentPanelItem;

src/components/left/ComponentPanelNew.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import Grid from '@material-ui/core/Grid';
+
+import ComponentPanelItem from './ComponentPanelItemNew';
+
+const ComponentPanel = (): JSX.Element => {
+  return (
+    <Grid
+      container
+      direction="row"
+      justify="center"
+      alignItems="center"
+      style={{
+        minWidth: '470px',
+        padding: '20px'
+      }}
+    >
+      <ComponentPanelItem />
+      <ComponentPanelItem />
+      <ComponentPanelItem />
+    </Grid>
+    // </div>
+  );
+}
+
+export default ComponentPanel;

src/components/main/CanvasComponentNew.tsx

@@ -0,0 +1,61 @@
+import React, { useRef, useMemo, useContext } from 'react';
+import { useDrag, useDrop, DropTargetMonitor } from 'react-dnd';
+import { ItemTypes } from '../../constants/ItemTypes';
+import { stateContext } from '../../context/context';
+import { updateInstance } from '../../helperFunctions/instances';
+
+const CanvasComponent = (props):JSX.Element => {
+  const ref = useRef<HTMLDivElement>(null);
+  const pageId = 1;
+
+  const [context, setContext] = useContext(stateContext);
+  // both useDrop and useDrag used here to allow canvas components to be both a drop target and drag source
+  const [{ isOver }, drop] = useDrop({
+    accept: ItemTypes.INSTANCE,
+    // triggered on drop
+    drop: (item: any, monitor: DropTargetMonitor) => {
+      const didDrop = monitor.didDrop();
+      if (didDrop) {
+        return;
+      }
+      const hoverId = props.id;
+      // updates state with new instance
+      setContext(updateInstance(hoverId, item, context, pageId));
+    },
+    collect: (monitor: any) => ({
+      isOver: !!monitor.isOver({ shallow: true })
+    })
+  });
+
+  const [{ isDragging }, drag] = useDrag({
+    // setting item attributes to be referenced when updating state with new instance of dragged item
+    item: {
+      type: ItemTypes.INSTANCE,
+      newInstance: false,
+      id: props.id
+    },
+    // canDrag: !props.children.length,
+    collect: (monitor: any) => ({
+      isDragging: !!monitor.isDragging()
+    })
+  });
+
+  const elementStyle = useMemo(
+    () => ({
+      // ...props.style,
+      borderStyle: isOver ? 'dotted' : 'solid',
+      opacity: isDragging ? 0.5 : 1
+    }),
+    [isDragging, isOver]
+  );
+
+  drag(drop(ref));
+  return (
+    <div ref={ref} className="componentDefault" style={elementStyle}>
+      I am a Canvas Component! :D
+      {props.children}
+    </div>
+  );
+}
+
+export default CanvasComponent;

src/components/main/MainCanvasNew.tsx

@@ -0,0 +1,71 @@
+import React, { useMemo, useContext } from 'react';
+import { useDrop } from 'react-dnd';
+import { ItemTypes } from '../../constants/ItemTypes';
+import { stateContext } from '../../context/context';
+import { updateInstance } from '../../helperFunctions/instances';
+import CanvasComponent from './CanvasComponentNew';
+
+//renders canvas components based on state
+const renderCanvas = (state, page) => {
+  // get page ID and assign data to children
+  let pageData;
+  for (let i = 0; i <= state.pages.length - 1; i++) {
+    if (state.pages[i]['pageId'] === page) {
+      pageData = state.pages[i];
+      break;
+    }
+  }
+  // if there is no page or the page has no children, end the function
+  if (!pageData || !pageData.children) return;
+  // iterate through each child on the page ID and render each component
+  return pageData.children.map(component => renderComponent(component));
+};
+
+// renders an instance in the instance tree. If instance has children, those instances will also be rendered recursively
+const renderComponent = component => {
+  const { id, style } = component;
+
+  // const style = { border: '5px solid pink', margin: '40px' };
+  return (
+    <CanvasComponent id={id} style={style} key={id}>
+      {/* render all children of component */}
+      {component.children.map(comp => renderComponent(comp))}
+    </CanvasComponent>
+  );
+};
+
+function MainCanvas() {
+  let pageId = 1;
+  const [context, setContext] = useContext(stateContext);
+  // useDrop hook allows main canvas to be a drop target
+  const [{ isOver }, drop] = useDrop({
+    accept: ItemTypes.INSTANCE,
+    drop: (item, monitor) => {
+      const didDrop = monitor.didDrop(); // returns false for direct drop target
+      if (didDrop) {
+        return;
+      }
+      setContext(updateInstance(null, item, context, pageId));
+    },
+    collect: monitor => ({
+      isOver: !!monitor.isOver()
+    })
+  });
+  const mainCanvasStyle = useMemo(
+    () => ({
+      height: '1000px',
+      width: '1000px',
+      backgroundColor: 'white',
+      border: '2px solid black',
+      borderStyle: isOver ? 'dotted' : 'solid'
+    }),
+    [isOver]
+  );
+  return (
+    <div ref={drop} style={mainCanvasStyle}>
+      {renderCanvas(context, 1)}
+    </div>
+  );
+}
+
+export default MainCanvas;

src/constants/ItemTypes.ts

@@ -0,0 +1,5 @@
+const ItemTypes = {
+  INSTANCE: 'instance'
+};
+
+export { ItemTypes };

src/containers/AppContainer.tsx

@@ -4,6 +4,7 @@ import { MuiThemeProvider } from '@material-ui/core/styles';
 import LinearProgress from '@material-ui/core/LinearProgress';
 import Tutorial from '../components/main/Tutorial';
 import LeftContainer from './LeftContainer';
+import LeftContainerNew from './LeftContainerNew';
 import MainContainer from './MainContainer';
 import theme from '../theme';
 import {
@@ -141,25 +142,23 @@ class AppContainer extends Component<Props, State> {
       image.onload = () => {
         // update state when the image has been uploaded
         this.setState({ image, changed: true });
+      };
     }
-  }
     // else if (imageSource !== prevProps.imageSource && imageSource !== '') {
     //   this.setImage(imageSource);
     // }
   }
 
-
-
   //this will load the saved sata from last close
   componentDidMount() {
     const image = new window.Image();
     image.src = 'images/iphone.png';
     image.onload = () => {
-    // update state when the image has been uploaded
-    this.setState({ nativeImageElement: image });
-    this.props.loadInitData();
-    }
-};
+      // update state when the image has been uploaded
+      this.setState({ nativeImageElement: image });
+      this.props.loadInitData();
+    };
+  }
 
   render(): JSX.Element {
     const {
@@ -181,12 +180,7 @@ class AppContainer extends Component<Props, State> {
           handleNext={this.handleNext}
         />
         <div className="app-container">
-          <LeftContainer //The left side-bar that contains the component cards and the buttons.
-            components={components}
-            totalComponents={totalComponents}
-            focusComponent={focusComponent} //'focused' just means it's the one currently selected.
-            selectableChildren={selectableChildren} //this toggles whether a component can be added as a child to the focused component
-          />
+          <LeftContainerNew />
           <MainContainer
             components={components}
             image={this.state.image}

src/containers/LeftContainerNew.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import Grid from '@material-ui/core/Grid';
+import TextField from '@material-ui/core/TextField';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import Fab from '@material-ui/core/Fab';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+
+import ComponentPanel from '../components/left/ComponentPanelNew';
+
+// Left-hand portion of the app, where component options are displayed
+const LeftContainer = (): JSX.Element => {
+  return (
+    <div className="column left" style={{ minWidth: '466px' }}>
+      <Grid container spacing={8} direction="row" alignItems="center">
+        <ComponentPanel />
+      </Grid>
+    </div>
+  );
+}
+
+export default LeftContainer;

src/containers/MainContainer.tsx

@@ -15,6 +15,7 @@ import {
   updateCode
 } from '../actions/actionCreators';
 import KonvaStage from '../components/main/KonvaStage';
+import MainCanvas from '../components/main/MainCanvasNew';
 import { PropsInt, ApplicationStateInt } from '../interfaces/Interfaces';
 
 interface MainContPropsInt extends PropsInt {
@@ -31,7 +32,7 @@ interface MainContPropsInt extends PropsInt {
   deleteChild(obj: object): void;
   changeFocusComponent(arg: { title: string }): void;
   updateCode(arg: { componentId: number; code: string }): void;
-    native: boolean;
+  native: boolean;
   nativeImageElement: HTMLImageElement | null;
 }
 
@@ -102,7 +103,6 @@ const mapStateToProps = (store: { workspace: ApplicationStateInt }) => ({
 });
 
 class MainContainer extends Component<MainContPropsInt, StateInt> {
-
   render() {
     //const { draggable, modal } = this.state; //this is being destructured but never read.
     const {
@@ -129,22 +129,7 @@ class MainContainer extends Component<MainContPropsInt, StateInt> {
           <div
             className="main" //ref={main} **no function, commenting out**
           >
-            <KonvaStage
-              image={image}
-              scaleX={1}
-              scaleY={1}
-              // draggable={draggable} this is also from this local state but never read past this container
-              components={components}
-              handleTransform={handleTransformation}
-              focusComponent={focusComponent}
-              focusChild={focusChild}
-              changeFocusChild={changeFocusChild}
-              changeComponentFocusChild={changeComponentFocusChild}
-              deleteChild={deleteChild}
-              native={native}
-              nativeImageElement={nativeImageElement}
-              /*  classes={classes}  commented out because not used anywhere*/
-            />
+            <MainCanvas />
           </div>
           <BottomPanel
             focusComponent={focusComponent}