implemented basic drag and drop

app/client/package.json

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

app/client/src/App.tsx

@@ -1,29 +1,29 @@
-import React, { Component } from "react";
+import React, { Component } from "react"
-import logo from "./assets/images/logo.svg";
+import logo from "./assets/images/logo.svg"
-import "./App.css";
+import "./App.css"
-import "../node_modules/@blueprintjs/core/src/blueprint.scss";
+import "../node_modules/@blueprintjs/core/src/blueprint.scss"
 
 class App extends Component {
   render() {
     return (
-      <div className="App">
+        <div className="App">
-        <header className="App-header">
+          <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
+            <img src={logo} className="App-logo" alt="logo" />
-          <p>
+            <p>
-            Edit <code>{"src/App.tsx"}</code> and save to reload.
+              Edit <code>{"src/App.tsx"}</code> and save to reload.
-          </p>
+            </p>
-          <a
+            <a
-            className="App-link"
+              className="App-link"
-            href="https://reactjs.org"
+              href="https://reactjs.org"
-            target="_blank"
+              target="_blank"
-            rel="noopener noreferrer"
+              rel="noopener noreferrer"
-          >
+            >
-            Learn React
+              Learn React
-          </a>
+            </a>
-        </header>
+          </header>
-      </div>
+        </div>
-    );
+    )
   }
 }
 
-export default App;
+export default App

app/client/src/index.tsx

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

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

@@ -2,13 +2,18 @@ import React, { Component } from "react"
 import { connect } from "react-redux"
 import { AppState } from "../../reducers"
 import WidgetFactory from "../../utils/WidgetFactory"
-import CanvasWidgetsNormalizer, { widgetSchema } from "../../normalizers/CanvasWidgetsNormalizer";
+import CanvasWidgetsNormalizer, {
-import { IContainerWidgetProps } from "../../widgets/ContainerWidget";
+  widgetSchema
-import { fetchPage } from "../../actions/pageActions";
+} from "../../normalizers/CanvasWidgetsNormalizer"
-import { RenderModes } from "../../constants/WidgetConstants";
+import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
-
+import { fetchPage } from "../../actions/pageActions"
-class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, fetchPage: Function }> {
+import { RenderModes } from "../../constants/WidgetConstants"
+import DraggableWidget from "../../widgets/DraggableWidget";
 
+class Canvas extends Component<{
+  pageWidget: IContainerWidgetProps<any>
+  fetchPage: Function
+}> {
   componentDidMount() {
     this.props.fetchPage("123")
   }
@@ -17,16 +22,17 @@ class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, fetchPa
     const pageWidget = this.props.pageWidget
     return (
       <div>
-        {pageWidget
+        {pageWidget ? WidgetFactory.createWidget(pageWidget) : undefined}
-          ? WidgetFactory.createWidget(pageWidget)
-          : undefined}
       </div>
     )
   }
 }
 
 const mapStateToProps = (state: AppState, props: any) => {
-  const pageWidget = CanvasWidgetsNormalizer.denormalize(state.ui.canvas.pageWidgetId, state.entities)
+  const pageWidget = CanvasWidgetsNormalizer.denormalize(
+    state.ui.canvas.pageWidgetId,
+    state.entities
+  )
   return {
     pageWidget: pageWidget
   }

app/client/src/widgets/BaseWidget.tsx

@@ -11,7 +11,11 @@ import {
 } from "../constants/WidgetConstants"
 import { Component } from "react"
 import { BaseStyle } from "../editorComponents/BaseComponent"
+import DraggableWidget from "./DraggableWidget"
 import _ from "lodash"
+import * as React from "react"
+import ContainerWidget from "./ContainerWidget";
+import ContainerComponent from "../editorComponents/ContainerComponent";
 
 abstract class BaseWidget<
   T extends IWidgetProps,
@@ -19,8 +23,7 @@ abstract class BaseWidget<
 > extends Component<T, Partial<K>> {
   constructor(props: T) {
     super(props)
-    const initialState: Partial<K> = {
+    const initialState: Partial<K> = {}
-    }
     initialState.height = 0
     initialState.width = 0
     this.state = initialState
@@ -93,7 +96,18 @@ abstract class BaseWidget<
   }
 
   getComponentPaneView(): JSX.Element {
-    return this.getPageView()
+    return (
+      <DraggableWidget
+        {...this.props}
+        widgetId={this.props.widgetId}
+        style={{
+          ...this.getPositionStyle()
+        }}
+        orientation={"VERTICAL"}
+      >
+        {this.getPageView()}
+      </DraggableWidget>
+    )
   }
 
   abstract getWidgetType(): WidgetType

app/client/src/widgets/DraggableWidget.tsx

@@ -0,0 +1,72 @@
+import * as React from "react"
+import BaseWidget, { IWidgetProps, IWidgetState } from "./BaseWidget"
+import _ from "lodash"
+import { DragSource, DragSourceConnector, DragSourceMonitor } from "react-dnd"
+import ContainerWidget, { IContainerWidgetProps } from "./ContainerWidget"
+import { IContainerProps } from "../editorComponents/ContainerComponent"
+import styled from "../constants/DefaultTheme"
+
+export interface DraggableWidgetProps extends IContainerProps {
+  connectDragSource: Function
+  isDragging?: boolean
+}
+
+export const Container = styled("div")<IContainerProps>`
+  display: "flex"
+  flexDirection: ${props => {
+    return props.orientation === "HORIZONTAL" ? "row" : "column"
+  }};
+  background: ${props => props.style.backgroundColor};
+  color: ${props => props.theme.primaryColor};
+  position: ${props => {
+    return props.style.positionType === "ABSOLUTE" ? "absolute" : "relative"
+  }};
+  left: ${props => {
+    return props.style.xPosition + props.style.xPositionUnit
+  }};
+  top: ${props => {
+    return props.style.yPosition + props.style.yPositionUnit
+  }};
+`
+
+class DraggableWidget extends React.Component<
+  DraggableWidgetProps,
+  IWidgetState
+> {
+  render() {
+    return this.props.connectDragSource(
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          position: "absolute",
+          left: this.props.style ? this.props.style.xPosition + this.props.style.xPositionUnit:0,
+          top: this.props.style ? this.props.style.yPosition + this.props.style.yPositionUnit: 0
+        }}
+      >
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+const widgetSource = {
+  beginDrag(props: IWidgetProps) {
+    return {
+      widgetId: props.widgetId
+    }
+  }
+}
+
+const widgetType = (props: IWidgetProps) => {
+  return props.widgetType
+}
+
+function collect(connect: DragSourceConnector, monitor: DragSourceMonitor) {
+  return {
+    connectDragSource: connect.dragSource(),
+    isDragging: monitor.isDragging()
+  }
+}
+
+export default DragSource(widgetType, widgetSource, collect)(DraggableWidget)

app/client/yarn.lock

@@ -2131,10 +2131,6 @@ chalk@^2.3.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-change-emitter@^0.1.2:
-  version "0.1.6"
-  resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -2957,9 +2953,9 @@ dir-glob@^2.0.0:
     arrify "^1.0.1"
     path-type "^3.0.0"
 
-dnd-core@^7.2.0:
+dnd-core@^7.4.0:
-  version "7.2.0"
+  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.2.0.tgz#70d4ab6c0c6f90423c27b1711624b5d834025bf3"
+  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.4.0.tgz#ff12742de12422b396bc79d10b2644a34dabc846"
   dependencies:
     asap "^2.0.6"
     invariant "^2.2.4"
@@ -3632,7 +3628,7 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "^2.0.0"
 
-fbjs@^0.8.0, fbjs@^0.8.1:
+fbjs@^0.8.0:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
   dependencies:
@@ -4279,7 +4275,7 @@ hoek@4.x.x:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.1.tgz#9634502aa12c445dd5a7c5734b572bb8738aacbb"
 
-hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
+hoist-non-react-statics@^2.5.0:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
 
@@ -7699,22 +7695,21 @@ react-dev-utils@^7.0.1:
     strip-ansi "4.0.0"
     text-table "0.2.0"
 
-react-dnd-html5-backend@^7.0.2:
+react-dnd-html5-backend@^7.4.3:
-  version "7.2.0"
+  version "7.4.0"
-  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.2.0.tgz#4cde55fb690020d98d7b6f3d4400c56b2ae82dfa"
+  resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.4.0.tgz#d9c328a0c2a3ec0b73ae805c038f09827a7490ce"
   dependencies:
-    dnd-core "^7.2.0"
+    dnd-core "^7.4.0"
     lodash "^4.17.11"
 
-react-dnd@^7.0.2:
+react-dnd@^7.4.3:
-  version "7.3.1"
+  version "7.4.3"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-7.3.1.tgz#40591760d11d996ac859ac6312ea6f26dbfffd23"
+  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-7.4.3.tgz#797d29ea2791e828eec96ac1603fcdee010ee2b7"
   dependencies:
-    dnd-core "^7.2.0"
+    dnd-core "^7.4.0"
     hoist-non-react-statics "^3.3.0"
     invariant "^2.1.0"
     lodash "^4.17.11"
-    recompose "^0.30.0"
     shallowequal "^1.1.0"
 
 react-dom@^16.7.0:
@@ -7734,7 +7729,7 @@ react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.2:
   version "16.8.4"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.4.tgz#90f336a68c3a29a096a3d648ab80e87ec61482a2"
 
-react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
@@ -7936,17 +7931,6 @@ realpath-native@^1.0.0:
   dependencies:
     util.promisify "^1.0.0"
 
-recompose@^0.30.0:
-  version "0.30.0"
-  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    change-emitter "^0.1.2"
-    fbjs "^0.8.1"
-    hoist-non-react-statics "^2.3.1"
-    react-lifecycles-compat "^3.0.2"
-    symbol-observable "^1.0.4"
-
 recursive-readdir@2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.2.tgz#9946fb3274e1628de6e36b2f6714953b4845094f"
@@ -8971,7 +8955,7 @@ svgo@^1.0.0, svgo@^1.0.5:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
-symbol-observable@^1.0.2, symbol-observable@^1.0.4, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
+symbol-observable@^1.0.2, symbol-observable@^1.1.0, symbol-observable@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"