Integrated new canvas rendering logic with left panel

Author: tsully

src/HTMLTypes.ts

@@ -1,93 +1,94 @@
 import { HTMLType } from './interfaces/InterfacesNew';
 
+import ImageIcon from '@material-ui/icons/Image';
+import ParagraphIcon from '@material-ui/icons/LocalParking';
+import FormIcon from '@material-ui/icons/Description';
+import HeaderIcon from '@material-ui/icons/TextFormat';
+import ButtonIcon from '@material-ui/icons/EditAttributes';
+import LinkIcon from '@material-ui/icons/Link';
+import ListIcon from '@material-ui/icons/List';
+
 const HTMLTypes: HTMLType[] = [
   {
     id: 1,
     tag: 'img',
     name: 'Image',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: ImageIcon
   },
   {
     id: 2,
     tag: 'form',
     name: 'Form',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: FormIcon
   },
   {
     id: 3,
     tag: 'li',
     name: 'List',
     style: { color: 'purple' },
     placeHolderShort: 'This is a list',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: ListIcon
   },
   {
     id: 4,
     tag: 'button',
     name: 'Button',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
-  },
-  {
-    id: 5,
-    tag: 'img',
-    name: 'Image',
-    style: {},
-    placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: ButtonIcon
   },
   {
     id: 6,
     tag: 'a',
     name: 'Link',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
-  },
-  {
-    id: 7,
-    tag: 'img',
-    name: 'Image',
-    style: {},
-    placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: LinkIcon
   },
   {
     id: 8,
     tag: 'p',
     name: 'Paragraph',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: ParagraphIcon
   },
   {
     id: 9,
     tag: 'h1',
     name: 'Header 1',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: HeaderIcon
   },
   {
     id: 10,
     tag: 'h2',
     name: 'Header 2',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: HeaderIcon
   },
   {
     id: 11,
     tag: 'div',
     name: 'Div',
     style: {},
     placeHolderShort: '',
-    placeHolderLong: ''
+    placeHolderLong: '',
+    icon: HeaderIcon
   }
 ];
 

src/components/left/ComponentPanelItemNew.tsx

@@ -4,15 +4,19 @@ import Grid from '@material-ui/core/Grid';
 import { useDrag } from 'react-dnd';
 import { ItemTypes } from '../../constants/ItemTypes';
 
-const ComponentPanelItem: React.FC<{name: String, id: Number, root: Boolean, focusClick: any}> = ({name, id, root, focusClick}) => {
+const ComponentPanelItem: React.FC<{
+  name: String;
+  id: Number;
+  root: Boolean;
+  focusClick: any;
+}> = ({ name, id, root, focusClick }) => {
   // useDrag hook allows components in left panel to be drag source
   const [{ isDragging }, drag] = useDrag({
     item: {
       type: ItemTypes.INSTANCE,
       newInstance: true,
       instanceType: 'Component',
-      instanceId: 2
-      // category,
+      instanceId: id
     },
     canDrag: !root,
     collect: (monitor: any) => ({
@@ -31,15 +35,17 @@ const ComponentPanelItem: React.FC<{name: String, id: Number, root: Boolean, foc
         // minWidth: '340px',
         height: '80px',
         marginBottom: '15px',
-        border: root ? '2px dotted rgba(255,255,255, 0.45)' : '2px solid rgba(255,255,255, 1)',
-        borderRadius: root ? '' : '8px',
+        border: root
+          ? '2px dotted rgba(255,255,255, 0.45)'
+          : '2px solid rgba(255,255,255, 1)',
+        borderRadius: root ? '' : '8px'
       }}
     >
-
-      <div className="compPanelItem" onClick={focusClick}> 
-        <h3>{id} {name}</h3>
+      <div className="compPanelItem" onClick={focusClick}>
+        <h3>
+          {id} {name}
+        </h3>
       </div>
-      
     </Grid>
   );
 };