Implement Drag and Drop of components

app/client/package.json

@@ -26,8 +26,8 @@
     "normalizr": "^3.3.0",
     "prettier": "^1.16.0",
     "react": "^16.7.0",
-    "react-dnd": "^7.4.3",
+    "react-dnd": "^9.3.4",
-    "react-dnd-html5-backend": "^7.4.0",
+    "react-dnd-html5-backend": "^9.3.4",
     "react-dom": "^16.7.0",
     "react-redux": "^6.0.0",
     "react-router": "^4.3.1",

app/client/src/actions/pageActions.tsx

@@ -4,6 +4,7 @@ import {
 } from "../constants/ActionConstants"
 import { PageRequest } from "../api/PageApi"
 import { RenderMode } from "../constants/WidgetConstants";
+import { IWidgetProps } from "../widgets/BaseWidget";
 
 export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<PageRequest> => {
   return {
@@ -14,3 +15,23 @@ export const fetchPage = (pageId: string, renderMode: RenderMode): ReduxAction<P
     }
   }
 }
+
+export const addWidget = (pageId: string, widget: IWidgetProps): ReduxAction<{ pageId: string, widget: IWidgetProps}> => {
+  return {
+    type: ActionTypes.ADD_PAGE_WIDGET,
+    payload: {
+      pageId,
+      widget,
+    }
+  }
+}
+
+export const removeWidget = (pageId: string, widgetId: string): ReduxAction<{ pageId: string, widgetId: string}> => {
+  return {
+    type: ActionTypes.REMOVE_PAGE_WIDGET,
+    payload: {
+      pageId,
+      widgetId,
+    }
+  }
+}

app/client/src/actions/widgetCardsPaneActions.tsx

@@ -10,16 +10,22 @@ export const fetchWidgetCards = () => {
   }
 }
 
-export const errorFetchingWidgetCards = (error: T) => {
+export const errorFetchingWidgetCards = (error: any) => {
   return {
     type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS,
     error
   }
 }
 
-export const successFetchingWidgetCards = (cards: <string, IWidgetCardProps[]>) => {
+export const successFetchingWidgetCards = (cards: { [id: string]: IWidgetCardProps[] }) => {
   return {
     type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS,
     cards
   }
 }
+
+export default {
+  fetchWidgetCards,
+  errorFetchingWidgetCards,
+  successFetchingWidgetCards
+}

app/client/src/api/ApiRequests.tsx

@@ -4,7 +4,6 @@ export interface ApiHeaders {
   Accept: ContentType
   "Content-Type": ContentType
   dataType: DataType
-  "Accept-Encoding": EncodingType
 }
 
 export interface ApiRequest {

app/client/src/api/WidgetCardsPaneApi.tsx

@@ -4,7 +4,7 @@ import { IContainerWidgetProps } from "../widgets/ContainerWidget"
 import { ApiResponse } from "./ApiResponses"
 
 export interface WidgetCardsPaneResponse {
-  cards : Map<string, IWidgetCardProps[]>
+  cards : { [id: string]: IWidgetCardProps[]}
 }
 export interface WidgetCardsPaneRequest {}
 

app/client/src/constants/ActionConstants.tsx

@@ -17,6 +17,8 @@ export type ActionType =
   | "FETCH_WIDGET_CARDS"
   | "SUCCESS_FETCHING_WIDGET_CARDS"
   | "ERROR_FETCHING_WIDGET_CARDS"
+  | "ADD_PAGE_WIDGET"
+  | "REMOVE_PAGE_WIDGET"
 
 export const ActionTypes: { [id: string]: ActionType } = {
   UPDATE_CANVAS: "UPDATE_CANVAS",
@@ -31,8 +33,11 @@ export const ActionTypes: { [id: string]: ActionType } = {
   UNDO_CANVAS_ACTION: "UNDO_CANVAS_ACTION",
   REDO_CANVAS_ACTION: "REDO_CANVAS_ACTION",
   PUBLISH: "PUBLISH",
+  FETCH_WIDGET_CARDS: "FETCH_WIDGET_CARDS",
   SUCCESS_FETCHING_WIDGET_CARDS: "SUCCESS_FETCHING_WIDGET_CARDS",
-  ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS"
+  ERROR_FETCHING_WIDGET_CARDS: "ERROR_FETCHING_WIDGET_CARDS",
+  ADD_PAGE_WIDGET: "ADD_PAGE_WIDGET",
+  REMOVE_PAGE_WIDGET: "REMOVE_PAGE_WIDGET"
 }
 
 export interface ReduxAction<T> {

app/client/src/constants/ApiConstants.tsx

@@ -5,7 +5,7 @@ export type ContentType = "application/json" | "application/x-www-form-urlencode
 export type EncodingType = "gzip"
 
 export const PROD_BASE_URL = "https://mobtools.com/api/"
-export const MOCK_BASE_URL = "https://12064212-8b45-4d81-882a-7a044f3c9555.mock.pstmn.io"
+export const MOCK_BASE_URL = "https://f1a8b631-ef37-4932-8f41-75cf127fcc55.mock.pstmn.io"
 export const STAGE_BASE_URL = "https://14157cb0-190f-4082-a791-886a8df05930.mock.pstmn.io"
 export const BASE_URL = MOCK_BASE_URL
 export const REQUEST_TIMEOUT_MS = 2000
@@ -13,5 +13,4 @@ export const REQUEST_HEADERS: ApiHeaders = {
   Accept: "application/json",
   "Content-Type": "application/json",
   dataType: "json",
-  "Accept-Encoding": "gzip"
 }

app/client/src/constants/WidgetConstants.tsx

@@ -15,6 +15,14 @@ export type WidgetType =
   | "RADIO_GROUP_WIDGET"
   | "INPUT_WIDGET"
   | "TOGGLE_WIDGET"
+
+export const WidgetTypes: {[id: string]: WidgetType } = {
+  BUTTON_WIDGET: "BUTTON_WIDGET",
+  TEXT_WIDGET: "TEXT_WIDGET",
+  INPUT_WIDGET: "INPUT_WIDGET",
+  TOGGLE_WIDGET: "TOGGLE_WIDGET",
+}
+
 export type ContainerOrientation = "HORIZONTAL" | "VERTICAL"
 export type PositionType = "ABSOLUTE" | "CONTAINER_DIRECTION"
 export type CSSUnit =

app/client/src/editorComponents/BaseComponent.tsx

@@ -1,6 +1,7 @@
 import { Component } from "react"
 import React from "react"
 import { PositionType, CSSUnit } from "../constants/WidgetConstants"
+import { Color } from "../constants/StyleConstants"
 /***
  * Components are responsible for binding render inputs to corresponding UI SDKs
  */
@@ -22,6 +23,8 @@ export interface BaseStyle {
     yPositionUnit: CSSUnit
     heightUnit?: CSSUnit
     widthUnit?: CSSUnit
+    backgroundColor?: Color
+
 }
 
 export interface IComponentProps {

app/client/src/editorComponents/ButtonComponent.tsx

@@ -7,7 +7,7 @@ class ButtonComponent extends React.Component<IButtonComponentProps> {
   render() {
     return (
       <Container {...this.props}>
-        <Button text={this.props.text} icon={this.props.icon} />
+        <Button  icon={this.props.icon}>{this.props.text}</Button>
       </Container>
     )
   }

app/client/src/index.tsx

@@ -15,7 +15,7 @@ import createSagaMiddleware from 'redux-saga'
 import { rootSaga } from "./sagas"
 import { ActionType, ReduxAction } from "./constants/ActionConstants";
 
-import { DragDropContextProvider } from "react-dnd"
+import { DndProvider } from "react-dnd"
 import HTML5Backend from "react-dnd-html5-backend"
 
 WidgetBuilderRegistry.registerWidgetBuilders();
@@ -25,7 +25,7 @@ sagaMiddleware.run(rootSaga)
 
 ReactDOM.render(
 
-  <DragDropContextProvider backend={HTML5Backend}>
+  <DndProvider backend={HTML5Backend}>
     <Provider store={store}>
       <ThemeProvider theme={theme}>
         <BrowserRouter>
@@ -36,7 +36,8 @@ ReactDOM.render(
           </Switch>
         </BrowserRouter>
       </ThemeProvider>
-  </Provider></DragDropContextProvider>,
+    </Provider>
+  </DndProvider>,
   document.getElementById("root")
 );
 

app/client/src/mockResponses/CanvasResponse.tsx

@@ -1,173 +0,0 @@
-import { IContainerWidgetProps } from "../widgets/ContainerWidget"
-import { RenderModes } from "../constants/WidgetConstants"
-
-const CanvasResponse: IContainerWidgetProps<any> = {
-  widgetId: "0",
-  widgetType: "CONTAINER_WIDGET",
-  snapColumns: 10,
-  snapRows: 10,
-  topRow: 60,
-  bottomRow: 700,
-  leftColumn: 300,
-  rightColumn: 1000,
-  parentColumnSpace: 1,
-  parentRowSpace: 1,
-  renderMode: RenderModes.CANVAS,
-  children: [
-    {
-      widgetId: "1",
-      widgetType: "TEXT_WIDGET",
-      topRow: 2,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 3,
-      text: "Lorem Ipsum asda asd kjhsadjhas kdh kashkjdas kdhas d as",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "2",
-      widgetType: "BUTTON_WIDGET",
-      topRow: 2,
-      leftColumn: 4,
-      bottomRow: 5,
-      rightColumn: 5,
-      text: "Lorem Ipsum",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "3",
-      widgetType: "INPUT_GROUP_WIDGET",
-      topRow: 1,
-      leftColumn: 1,
-      bottomRow: 1,
-      rightColumn: 5,
-      placeholder: "Lorem Ipsum",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "4",
-      widgetType: "CALLOUT_WIDGET",
-      topRow: 2,
-      leftColumn: 8,
-      bottomRow: 4,
-      rightColumn: 14,
-      id: "sample_id",
-      title: "Visually important content",
-      description:
-        "The component is a simple wrapper around the CSS API that provides props for modifiers and optional title element. Any additional HTML props will be spread to the rendered <div> element.",
-      icon: "",
-      intent: "success",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "5",
-      widgetType: "ICON_WIDGET",
-      topRow: 4,
-      leftColumn: 2,
-      bottomRow: 5,
-      rightColumn: 3,
-      icon: "globe",
-      iconSize: "20",
-      intent: "warning",
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "6",
-      widgetType: "SPINNER_WIDGET",
-      topRow: 5,
-      leftColumn: 6,
-      bottomRow: 5,
-      rightColumn: 5,
-      size: 20
-    },
-    {
-      widgetId: "7",
-      widgetType: "BREADCRUMBS_WIDGET",
-      topRow: 6,
-      leftColumn: 2,
-      bottomRow: 5,
-      rightColumn: 5,
-      width: "100%",
-      collapseFrom: "start",
-      className: "breadcrumbs",
-      size: 20,
-      renderMode: RenderModes.CANVAS,
-      items: [
-        { icon: "folder-close", text: "All files" },
-        { icon: "folder-close", text: "Users" },
-        { icon: "folder-close", text: "Janet" },
-        { href: "#", icon: "folder-close", text: "Photos" },
-        { href: "#", icon: "folder-close", text: "Wednesday" },
-        { icon: "document", text: "image.jpg" }
-      ]
-    },
-    {
-      widgetId: "8",
-      widgetType: "TAG_INPUT_WIDGET",
-      topRow: 7,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      palceholder: "Lorem, Ipsum",
-      values: ["abx", "somf", "soke"],
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "9",
-      widgetType: "NUMERIC_INPUT_WIDGET",
-      topRow: 4,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      palceholder: "Numeric input",
-      allowNumericCharactersOnly: true,
-      renderMode: RenderModes.CANVAS
-    },
-    {
-      widgetId: "10",
-      widgetType: "CHECKBOX_WIDGET",
-      topRow: 6,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      items: [
-        {
-          label: "a",
-          value: 1
-        },
-        {
-          label: "b",
-          value: 2
-        },
-        {
-          label: "c",
-          value: 3
-        }
-      ]
-    },
-    {
-      widgetId: "11",
-      widgetType: "RADIO_GROUP_WIDGET",
-      topRow: 6,
-      leftColumn: 1,
-      bottomRow: 5,
-      rightColumn: 5,
-      items: [
-        {
-          label: "a",
-          value: 1
-        },
-        {
-          label: "b",
-          value: 2
-        },
-        {
-          label: "c",
-          value: 3
-        }
-      ]
-    }
-  ]
-}
-
-export default CanvasResponse

app/client/src/normalizers/CanvasWidgetsNormalizer.tsx

@@ -2,9 +2,9 @@ import { normalize, schema, denormalize } from 'normalizr';
 import { PageResponse } from '../api/PageApi';
 import { IContainerWidgetProps } from '../widgets/ContainerWidget';
 
-export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" }, );
+export const widgetSchema = new schema.Entity('canvasWidgets', { }, { idAttribute: "widgetId" });
-const widgets = new schema.Array(widgetSchema);
+// const widgets = new schema.Array(widgetSchema);
-widgetSchema.define({ children: widgets });
+widgetSchema.define({ children: [widgetSchema] });
 
 class CanvasWidgetsNormalizer {
 

app/client/src/pages/Editor/Canvas.tsx

@@ -1,47 +1,30 @@
-import React, { Component } from "react"
+import React, { Props } from "react"
-import { connect } from "react-redux"
-import { AppState } from "../../reducers"
 import WidgetFactory from "../../utils/WidgetFactory"
-import CanvasWidgetsNormalizer, {
+import { WidgetTypes } from "../../constants/WidgetConstants"
-  widgetSchema
+import { DraggableWidget } from "../../widgets/BaseWidget"
-} from "../../normalizers/CanvasWidgetsNormalizer"
+import { useDrop } from 'react-dnd'
 import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
-import { fetchPage } from "../../actions/pageActions"
-import { RenderModes } from "../../constants/WidgetConstants"
 
-class Canvas extends Component<{
+interface CanvasProps {
   pageWidget: IContainerWidgetProps<any>
-  fetchPage: Function
+  addWidget: Function
-}> {
+  removeWidget: Function
-  componentDidMount() {
-    this.props.fetchPage("1")
-  }
-
-  render() {
-    const pageWidget = this.props.pageWidget
-    return pageWidget ? WidgetFactory.createWidget(pageWidget) : null
-  }
 }
 
-const mapStateToProps = (state: AppState, props: any) => {
+const Canvas : React.SFC<CanvasProps> = (props) => {
-  const pageWidget = CanvasWidgetsNormalizer.denormalize(
+  const [, drop] = useDrop({
-    state.ui.canvas.pageWidgetId,
+    accept: Object.values(WidgetTypes),
-    state.entities
+    drop(item: DraggableWidget, monitor) {
+      console.log("dropped")
+      props.addWidget(item.type);
+      return undefined
+    },
+  })
+  return (
+    <div ref={drop}>
+      {props.pageWidget && WidgetFactory.createWidget(props.pageWidget)}
+    </div>
   )
-  return {
-    pageWidget: pageWidget
-  }
 }
 
-const mapDispatchToProps = (dispatch: any) => {
+export default Canvas
-  return {
-    fetchPage: (pageId: string) => {
-      return dispatch(fetchPage(pageId, RenderModes.CANVAS))
-    }
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(Canvas)

app/client/src/pages/Editor/EditorDragLayer.tsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import styled from 'styled-components'
+import { XYCoord, useDragLayer } from 'react-dnd'
+import snapToGrid from './snapToGrid'
+import WidgetFactory from '../../utils/WidgetFactory';
+import { RenderModes, WidgetTypes, WidgetType } from '../../constants/WidgetConstants';
+
+const WrappedDragLayer = styled.div`
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+`;
+
+
+function getItemStyles(
+  initialOffset: XYCoord | null,
+  currentOffset: XYCoord | null
+) {
+  if (!initialOffset || !currentOffset) {
+    return {
+      display: 'none',
+    }
+  }
+
+  let { x, y } = currentOffset
+
+    x -= initialOffset.x
+    y -= initialOffset.y
+    ;[x, y] = snapToGrid(x, y)
+    x += initialOffset.x
+    y += initialOffset.y
+  
+  const transform = `translate(${x}px, ${y}px)`
+  return {
+    transform,
+    WebkitTransform: transform,
+  }
+}
+
+
+const EditorDragLayer: React.FC = () => {
+  const {
+    itemType,
+    isDragging,
+    item,
+    initialOffset,
+    currentOffset,
+  } = useDragLayer(monitor => ({
+    item: monitor.getItem(),
+    itemType: monitor.getItemType(),
+    initialOffset: monitor.getInitialSourceClientOffset(),
+    currentOffset: monitor.getSourceClientOffset(),
+    isDragging: monitor.isDragging(),
+  }))
+
+  function renderItem() {
+      return WidgetFactory.createWidget({
+        widgetType: itemType as WidgetType,
+        widgetId: '2',
+        topRow: 10,
+        leftColumn: 10,
+        bottomRow: 14,
+        rightColumn: 20,
+        parentColumnSpace: 1,
+        parentRowSpace: 1,
+        renderMode: RenderModes.CANVAS
+      })
+  }
+
+  if (!isDragging) {
+    return null
+  }
+  return (
+    <WrappedDragLayer>
+      <div
+        style={getItemStyles(initialOffset, currentOffset)}
+      >
+        {renderItem()}
+      </div>
+    </WrappedDragLayer>
+  )
+}
+export default EditorDragLayer

app/client/src/pages/Editor/WidgetCard.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import { useDrag, DragSourceMonitor } from 'react-dnd'
+import { IWidgetCardProps } from '../../widgets/BaseWidget'
+import styled from 'styled-components'
+import { Icon } from '@blueprintjs/core'
+import { IconNames } from '@blueprintjs/icons'
+
+interface WidgetCardProps {
+  details: IWidgetCardProps
+}
+
+const Wrapper = styled.div`
+  display:flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  flex: 1;
+  padding: 10px 5px 10px 5px;
+  margin: 0px 10px 0 0;
+  border-radius: 5px;
+  background: #eee
+  border: 1px solid #eee;
+  &:hover{
+    background: #fff;
+    cursor: grab;
+  }
+`;
+const IconLabel = styled.h5`
+  text-align: center;
+  padding: 10px 0;
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: normal;
+  flex-shrink: 1;
+  font-size: 0.5rem;
+`;
+
+const WidgetCard: React.SFC<WidgetCardProps> = (props) => {
+  const [{ isDragging }, drag] = useDrag({
+    item: { type: props.details.widgetType, widget: props.details },
+    collect: (monitor: DragSourceMonitor) => ({
+      isDragging: monitor.isDragging(),
+    }),
+  })
+  return (
+    <Wrapper ref={drag}>
+      <div>
+        <Icon icon="segmented-control" iconSize={20} />
+        <IconLabel>{props.details.label}</IconLabel>
+      </div>
+    </Wrapper>
+  )
+}
+
+export default WidgetCard

app/client/src/pages/Editor/WidgetCardsPane.tsx

@@ -1,30 +1,42 @@
 import React, { Component } from "react"
-import { connect } from "react-redux"
+import WidgetCard from "./WidgetCard"
-import { AppState } from "../../reducers"
+import styled from "styled-components"
-import { WidgetCardsPaneReduxState } from "../../reducers/uiReducers/widgetCardsPaneReducer";
+import { IWidgetCardProps } from "../../widgets/BaseWidget"
 
-class WidgetCardsPane extends Component<WidgetCardsPaneReduxState> {
+interface WidgetCardPaneProps  {
-  render() {
+  cards: { [id: string]: IWidgetCardProps[]}
-    const groups = Object.keys(this.props.cards)
+}
-    return (<div style={{ width: "300px", backgroundColor: "#fff", borderRadius: "5px", boxShadow: "0px 0px 3px #ccc", padding: "5px 10px", display: "flex", flexFlow: "row wrap" }}>
-      {groups.map((group: string) => {
 
-      })}
+const CardsPaneWrapper = styled.div`
-    </div>)
+  width: 300px;
+  background-color: #fff; 
+  border-radius: 5px;
+  box-shadow: 0px 0px 3px #ccc;
+  padding: 5px 10px;
+`;
+
+const CardsWrapper = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+`;
+
+const WidgetCardsPane: React.SFC<WidgetCardPaneProps> = (props) => {
+  const groups = Object.keys(props.cards)  
+  return (
+      <CardsPaneWrapper>
+        {
+          groups.map((group: string) => 
+            <React.Fragment key={group}>
+              <h5>{group}</h5>
+              <CardsWrapper>
+                { props.cards[group].map((card: IWidgetCardProps) => <WidgetCard details={card} key={card.widgetType} />) }
+              </CardsWrapper>
+            </React.Fragment>
+          )
         }
+      </CardsPaneWrapper>
+    )
 }
 
-const mapStateToProps = (state: AppState, props: any): WidgetCardsPaneReduxState => {
+export default WidgetCardsPane
-  return {
-    cards: state.ui.widgetCardsPane.cards
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {}
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(WidgetCardsPane)

app/client/src/pages/Editor/index.tsx

@@ -1,9 +1,19 @@
 import React, { Component } from "react"
+import { connect } from "react-redux"
 import styled from "styled-components"
 import Canvas from "./Canvas"
+import { IWidgetCardProps, IWidgetProps } from '../../widgets/BaseWidget'
+import { AppState } from "../../reducers"
+import { EditorReduxState } from "../../reducers/uiReducers/editorReducer"
 import WidgetCardsPane from "./WidgetCardsPane"
 import EditorHeader from "./EditorHeader"
-import { CALCULATOR } from "@blueprintjs/icons/lib/esm/generated/iconContents";
+import { WidgetType } from "../../constants/WidgetConstants"
+import CanvasWidgetsNormalizer from "../../normalizers/CanvasWidgetsNormalizer"
+import { fetchWidgetCards } from "../../actions/widgetCardsPaneActions"
+import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
+import { fetchPage, addWidget } from "../../actions/pageActions"
+import { RenderModes } from "../../constants/WidgetConstants"
+import EditorDragLayer  from "./EditorDragLayer"
 
 const ArtBoard = styled.section`
   height: 100%;
@@ -12,32 +22,95 @@ const ArtBoard = styled.section`
   overflow-x: hidden;
   overflow-y: auto;
   margin: 0px 10px;
+  &:before {
+    position: absolute;
+    top: 0; right: 0; bottom: 0; left: 0;
+    z-index: 1000;
+    pointer-events: none;
+  }
 `;
 
-class Editor extends Component {
+const EditorWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  justify-content: flex-start;
+  width: 100vw;
+  overflow: hidden;
+  padding: 10px;
+  height: calc(100vh - 60px);
+`; 
+
+class Editor extends Component<{
+  pageWidget: IContainerWidgetProps<any> | any
+  fetchCanvasWidgets: Function
+  fetchWidgetCardsPane: Function
+  cards: { [id: string] : IWidgetCardProps[] } | any
+  addPageWidget: Function
+}> {
+  componentDidMount() {
+    this.props.fetchWidgetCardsPane()
+    this.props.fetchCanvasWidgets("1")
+  }
+
+  addWidgetToCanvas = (widgetType: WidgetType) => {
+    this.props.addPageWidget("1", {
+      key: "12",
+      bottomRow: 9,
+      leftColumn: 1,
+      parentColumnSpace: 90,
+      parentRowSpace: 50,
+      renderMode: RenderModes.CANVAS,
+      rightColumn: 3,
+      snapColumns: 20,
+      snapRows: 20,
+      children: [],
+      topRow: 1,
+      widgetId: "2",
+      widgetType: widgetType
+    })
+  }
+
+  removeWidgetFromCanvas = (widgetId: string) => {
+
+  }
+
   render() {
     return (
-      <div style={{
+      <React.Fragment>
-
-      }}>
         <EditorHeader></EditorHeader>
-      <div style={{ 
+        <EditorWrapper>
-        display: "flex",
+          <WidgetCardsPane cards={this.props.cards} />
-        flexDirection: "row",
-        alignItems: "stretch",
-        justifyContent: "flex-start",
-        width: "100vw",
-        overflow: "hidden",
-        padding: "10px",
-        height: "calc(100vh - 60px)"}}>
-        <WidgetCardsPane />
           <ArtBoard>
-          <Canvas />
+            <Canvas pageWidget={this.props.pageWidget} addWidget={this.addWidgetToCanvas} removeWidget={this.removeWidgetFromCanvas} />
+            <EditorDragLayer />
           </ArtBoard>
-      </div>
+        </EditorWrapper>
-      </div>
+      </React.Fragment>
     )
   }
 }
 
-export default Editor
+const mapStateToProps = (state: AppState, props: any): EditorReduxState => {
+  const pageWidget = CanvasWidgetsNormalizer.denormalize(
+    state.ui.canvas.pageWidgetId,
+    state.entities
+  )
+  return {
+    cards: state.ui.widgetCardsPane.cards,
+    pageWidget,
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    fetchCanvasWidgets: (pageId: string) => dispatch(fetchPage(pageId, RenderModes.CANVAS)),
+    fetchWidgetCardsPane: () => dispatch(fetchWidgetCards()),
+    addPageWidget: (pageId:string, widgetProps: IWidgetProps) => dispatch(addWidget(pageId, widgetProps))
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(Editor)

app/client/src/pages/Editor/snapToGrid.ts

@@ -0,0 +1,5 @@
+export default function snapToGrid(x: number, y: number) {
+  const snappedX = Math.round(x / 32) * 32
+  const snappedY = Math.round(y / 32) * 32
+  return [snappedX, snappedY]
+}

app/client/src/reducers/entityReducers/canvasWidgetsReducers.tsx

@@ -5,9 +5,13 @@ import {
   ReduxAction
 } from "../../constants/ActionConstants"
 import { IWidgetProps } from "../../widgets/BaseWidget"
+import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
 
-const initialState: CanvasWidgetsReduxState = {
+const initialState: CanvasWidgetsReduxState = {}
 
+
+export interface IFlattenedWidgetProps extends IWidgetProps {
+  children?: string[] 
 }
 
 const canvasWidgetsReducer = createReducer(initialState, {
@@ -16,11 +20,26 @@ const canvasWidgetsReducer = createReducer(initialState, {
     action: ReduxAction<LoadCanvasPayload>
   ) => {
     return { ...action.payload.widgets }
+  },
+  [ActionTypes.ADD_PAGE_WIDGET]: (
+    state: CanvasWidgetsReduxState,
+    action: ReduxAction<{pageId: string, widget: IWidgetProps}>
+  ) => {
+    const widget = action.payload.widget
+    const widgetTree = CanvasWidgetsNormalizer.denormalize("0", { canvasWidgets: state })
+    const children = widgetTree.children || []
+    children.push(widget)
+    widgetTree.children = children
+    const newState =  CanvasWidgetsNormalizer.normalize({
+      responseMeta: {},
+      pageWidget: widgetTree
+    }).entities
+    return newState.canvasWidgets
   }
 })
 
 export interface CanvasWidgetsReduxState {
-  [widgetId: string]: IWidgetProps
+  [widgetId: string]: IFlattenedWidgetProps
 }
 
 export default canvasWidgetsReducer

app/client/src/reducers/index.tsx

@@ -5,6 +5,7 @@ import { CanvasReduxState } from "./uiReducers/canvasReducer"
 import { CanvasWidgetsReduxState } from "./entityReducers/canvasWidgetsReducers"
 import { WidgetCardsPaneReduxState } from "./uiReducers/widgetCardsPaneReducer"
 import { EditorHeaderReduxState } from "./uiReducers/editorHeaderReducer"
+import { EditorReduxState } from "./uiReducers/editorReducer"
 
 const appReducer = combineReducers({
   entities: entityReducer,
@@ -18,6 +19,7 @@ export interface AppState {
     canvas: CanvasReduxState
     widgetCardsPane: WidgetCardsPaneReduxState
     editorHeader: EditorHeaderReduxState
+    editor: EditorReduxState
   }
   entities: {
     canvasWidgets: CanvasWidgetsReduxState

app/client/src/reducers/uiReducers/canvasReducer.tsx

@@ -14,6 +14,7 @@ const canvasReducer = createReducer(initialState, {
     state: CanvasReduxState,
     action: ReduxAction<LoadCanvasPayload>
   ) => {
+    console.log(action.payload);
     return { pageWidgetId: action.payload.pageWidgetId }
   }
 })

app/client/src/reducers/uiReducers/editorReducer.tsx

@@ -0,0 +1,41 @@
+import { createReducer } from "../../utils/PicassoUtils"
+import {
+  ActionTypes,
+  ReduxAction,
+  LoadCanvasPayload,
+  LoadWidgetCardsPanePayload
+} from "../../constants/ActionConstants"
+import { IWidgetCardProps, IWidgetProps } from "../../widgets/BaseWidget"
+import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
+
+const initialState: EditorReduxState = {}
+
+const editorReducer = createReducer(initialState, {
+  [ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
+    state: EditorReduxState,
+    action: ReduxAction<LoadWidgetCardsPanePayload>
+  ) => {
+    return { ...state.pageWidget, ...action.payload }
+  },
+  [ActionTypes.ADD_PAGE_WIDGET]: (
+    state: EditorReduxState,
+    action: ReduxAction<{pageId: string, widget: IWidgetProps}>
+  ) => {
+    return state
+  },
+  [ActionTypes.UPDATE_CANVAS]: (
+    state: EditorReduxState,
+    action: ReduxAction<LoadCanvasPayload>
+  ) => {
+    return { pageWidgetId: action.payload.pageWidgetId }
+  }
+})
+
+export interface EditorReduxState {
+  pageWidget?: IContainerWidgetProps<any>
+  cards?: {
+    [id: string]: IWidgetCardProps[]
+  }
+}
+
+export default editorReducer

app/client/src/reducers/uiReducers/index.tsx

@@ -2,6 +2,7 @@ import { combineReducers } from "redux"
 import canvasReducer from "./canvasReducer"
 import widgetCardsPaneReducer from "./widgetCardsPaneReducer"
 import editorHeaderReducer from "./editorHeaderReducer"
+import editorReducer from "./editorReducer"
 
-const uiReducer = combineReducers({ canvas: canvasReducer, widgetCardsPane: widgetCardsPaneReducer, editorHeader: editorHeaderReducer })
+const uiReducer = combineReducers({ canvas: canvasReducer, widgetCardsPane: widgetCardsPaneReducer, editorHeader: editorHeaderReducer, editor: editorReducer })
 export default uiReducer

app/client/src/reducers/uiReducers/widgetCardsPaneReducer.tsx

@@ -10,10 +10,11 @@ import WidgetCardsPaneResponse from "../../mockResponses/WidgetCardsPaneResponse
 const initialState: WidgetCardsPaneReduxState = WidgetCardsPaneResponse
 
 const widgetCardsPaneReducer = createReducer(initialState, {
-  [ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS]: (
+  [ActionTypes.ERROR_FETCHING_WIDGET_CARDS]: (
     state: WidgetCardsPaneReduxState,
     action: ReduxAction<LoadWidgetCardsPanePayload>
   ) => {
+    console.log(action)
     return { cards: action.payload.cards }
   }
 })

app/client/src/sagas/PageSagas.tsx

@@ -6,15 +6,21 @@ import { RenderModes } from "../constants/WidgetConstants"
 
 export function* fetchPageSaga(pageRequestAction: ReduxAction<PageRequest>) {
   const pageRequest = pageRequestAction.payload
+  try {
     const pageResponse: PageResponse = yield call(PageApi.fetchPage, pageRequest)
     if (pageRequest.renderMode === RenderModes.CANVAS) {
       const normalizedResponse = CanvasWidgetsNormalizer.normalize(pageResponse)
+      console.log(normalizedResponse);
       const payload = {
         pageWidgetId: normalizedResponse.result,
         widgets: normalizedResponse.entities.canvasWidgets
       }
       yield put({ type: ActionTypes.UPDATE_CANVAS, payload })
     }
+  } catch(err) {
+    //TODO(abhinav): REFACTOR THIS
+  }
+  
 }
 
 export function* watchFetchPage() {

app/client/src/sagas/WidgetCardsPaneSagas.tsx

@@ -1,12 +1,14 @@
 import CanvasWidgetsNormalizer from "../normalizers/CanvasWidgetsNormalizer"
 import { ActionTypes, ReduxAction } from "../constants/ActionConstants"
 import WidgetCardsPaneApi, { WidgetCardsPaneResponse, WidgetCardsPaneRequest } from "../api/WidgetCardsPaneApi"
+import { successFetchingWidgetCards } from "../actions/widgetCardsPaneActions"
 import { call, put, takeLeading, all, takeEvery, takeLatest } from "redux-saga/effects"
 
+
 export function* fetchWidgetCards(widgetCardsRequestAction: ReduxAction<WidgetCardsPaneRequest>) {
   try {
     const widgetCards: WidgetCardsPaneResponse = yield call(WidgetCardsPaneApi.fetchWidgetCards)
-    yield put({ type: ActionTypes.SUCCESS_FETCHING_WIDGET_CARDS, widgetCards})
+    yield put(successFetchingWidgetCards(widgetCards.cards))
   } catch(err) {
     yield put({ type: ActionTypes.ERROR_FETCHING_WIDGET_CARDS, err})
   }

app/client/src/utils/WidgetRegistry.tsx

@@ -99,6 +99,7 @@ class WidgetBuilderRegistry {
         return <RadioGroupWidget {...widgetData} />
       }
     })
+    
   }
 }
 

app/client/src/widgets/BaseWidget.tsx

@@ -71,7 +71,7 @@ abstract class BaseWidget<
       widgetState.height !== this.state.height ||
       widgetState.width !== this.state.width
     ) {
-      console.log("*** " + this.props.widgetId + " " + JSON.stringify(widgetState))
+      // console.log("*** " + this.props.widgetId + " " + JSON.stringify(widgetState))
       this.setState(widgetState)
     }
   }
@@ -143,6 +143,11 @@ export interface IWidgetState {
   width: number
 }
 
+export interface DraggableWidget {
+  type: string,
+  widget: IWidgetProps
+}
+
 export interface IWidgetBuilder<T extends IWidgetProps> {
   buildWidget(data: T): JSX.Element
 }

app/client/src/widgets/ButtonWidget.tsx

@@ -16,7 +16,7 @@ class ButtonWidget extends BaseWidget<IButtonWidgetProps, IWidgetState> {
         style={this.getPositionStyle()}
         widgetId={this.props.widgetId}
         key={this.props.widgetId}
-        text={this.props.text}
+        text={this.props.text || "Button"}
       />
     )
   }

app/client/tsconfig.json

@@ -4,7 +4,10 @@
     "lib": [
       "dom",
       "dom.iterable",
-      "esnext"
+      "esnext",
+      // "es5",
+      // "es2015.collection",
+      // "es2015.iterable"
     ],
     "allowJs": true,
     "skipLibCheck": true,
@@ -17,7 +20,9 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    // "downlevelIteration": true,
+    // "importHelpers": true
   },
   "include": [
     "src"

app/client/yarn.lock

@@ -914,6 +914,11 @@
     "@svgr/core" "^2.4.1"
     loader-utils "^1.1.0"
 
+"@types/asap@^2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@types/asap/-/asap-2.0.0.tgz#d529e9608c83499a62ae08c871c5e62271aa2963"
+  integrity sha512-upIS0Gt9Mc8eEpCbYMZ1K8rhNosfKUtimNcINce+zLwJF5UpM3Vv7yz3S5l/1IX+DxTa8lTkUjqynvjRXyJzsg==
+
 "@types/axios@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@types/axios/-/axios-0.14.0.tgz#ec2300fbe7d7dddd7eb9d3abf87999964cafce46"
@@ -934,6 +939,19 @@
   dependencies:
     "@types/react" "*"
 
+"@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
+"@types/invariant@^2.2.30":
+  version "2.2.30"
+  resolved "https://registry.yarnpkg.com/@types/invariant/-/invariant-2.2.30.tgz#20efa342807606ada5483731a8137cb1561e5fe9"
+  integrity sha512-98fB+yo7imSD2F7PF7GIpELNgtLNgo5wjivu0W5V4jx+KVVJxo6p/qN4zdzSTBWy4/sN3pPyXwnhRSD28QX+ag==
+
 "@types/jest@^23.3.13":
   version "23.3.14"
   resolved "https://registry.yarnpkg.com/@types/jest/-/jest-23.3.14.tgz#37daaf78069e7948520474c87b80092ea912520a"
@@ -1003,6 +1021,11 @@
     "@types/prop-types" "*"
     csstype "^2.2.0"
 
+"@types/shallowequal@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@types/shallowequal/-/shallowequal-1.1.1.tgz#aad262bb3f2b1257d94c71d545268d592575c9b1"
+  integrity sha512-Lhni3aX80zbpdxRuWhnuYPm8j8UQaa571lHP/xI4W+7BAFhSIhRReXnqjEgT/XzPoXZTJkCqstFMJ8CZTK6IlQ==
+
 "@types/styled-components@^4.1.8":
   version "4.1.12"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-4.1.12.tgz#62c19bd1aa37b1a904d36c179a0fec66c24ac99c"
@@ -2953,20 +2976,13 @@ dir-glob@^2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
-dnd-core@^7.4.0:
+dnd-core@^9.3.4:
-  version "7.4.0"
+  version "9.3.4"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.4.0.tgz#ff12742de12422b396bc79d10b2644a34dabc846"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-9.3.4.tgz#56b5fdc165aa7d102506d3d5a08ec1fa789e0775"
-  dependencies:
+  integrity sha512-sDzBiGXgpj9bQhs8gtPWFIKMg4WY8ywI9RI81rRAUWI4oNj/Sm/ztjS67UjCvMa+fWoQ2WNIV3U9oDqeBN0+2g==
-    asap "^2.0.6"
-    invariant "^2.2.4"
-    lodash "^4.17.11"
-    redux "^4.0.1"
-
-dnd-core@^7.7.0:
-  version "7.7.0"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.7.0.tgz#3166aefc8c5b85ca4ade4ae836712a3108975fab"
-  integrity sha512-+YqwflWEY1MEAEl2QiEiRaglYkCwIZryyQwximQGuTOm/ns7fS6Lg/i7OCkrtjM10D5FhArf/VUHIL4ZaRBK0g==
   dependencies:
+    "@types/asap" "^2.0.0"
+    "@types/invariant" "^2.2.30"
     asap "^2.0.6"
     invariant "^2.2.4"
     redux "^4.0.1"
@@ -4615,7 +4631,7 @@ internal-ip@^3.0.1:
     default-gateway "^2.6.0"
     ipaddr.js "^1.5.2"
 
-invariant@^2.1.0, invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.1, invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   dependencies:
@@ -7704,21 +7720,22 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@^7.4.0:
+react-dnd-html5-backend@^9.3.4:
-  version "7.7.0"
+  version "9.3.4"
-  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.7.0.tgz#e2b8ea61a1bc34ba743b89cafcda6213b006c06a"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-9.3.4.tgz#5d1f5ac608206d7b294b7407b9e1a336589eedd7"
-  integrity sha512-JgKmWOxqorFyfGPeWV+SAPhVGFe6+LrOR24jETE9rrYZU5hCppzwK9ujjS508kWibeDvbfEgi9j5qC2wB1/MoQ==
+  integrity sha512-s+Xu0j7fHV9bLMSaOCuX76baQKcZfycAx0EzDmkxcFXPBiiFlI8l6rzwURdSJCjNcvLYXd8MLb4VkSNSq5ISZQ==
   dependencies:
-    dnd-core "^7.7.0"
+    dnd-core "^9.3.4"
 
-react-dnd@^7.4.3:
+react-dnd@^9.3.4:
-  version "7.4.3"
+  version "9.3.4"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-7.4.3.tgz#797d29ea2791e828eec96ac1603fcdee010ee2b7"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-9.3.4.tgz#ebab4b5b430b72f3580c058a29298054e1f9d2b8"
+  integrity sha512-UUtyoHFRrryMxVMEGYa3EdZIdibnys/ax7ZRs6CKpETHlnJQOFhHE3rpI+ManvKS0o3MFc1DZ+aoudAFtrOvFA==
   dependencies:
-    dnd-core "^7.4.0"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/shallowequal" "^1.1.1"
+    dnd-core "^9.3.4"
     hoist-non-react-statics "^3.3.0"
-    invariant "^2.1.0"
-    lodash "^4.17.11"
     shallowequal "^1.1.0"
 
 react-dom@^16.7.0: