Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

implemented basic drag and drop

Browse Source
This commit is contained in:
Nikhil Nandgopal 2019-04-01 12:38:00 +05:30
parent e3ecb9974a
commit 085d420567
7 changed files with 150 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/client/package.json
View File

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

44
app/client/src/App.tsx
View File

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

7
app/client/src/index.tsx
View File

@ -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")
);

26
app/client/src/pages/Editor/Canvas.tsx
View File

@ -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 { IContainerWidgetProps } from "../../widgets/ContainerWidget";
import { fetchPage } from "../../actions/pageActions";
import { RenderModes } from "../../constants/WidgetConstants";
class Canvas extends Component<{ pageWidget: IContainerWidgetProps<any>, fetchPage: Function }> {
import CanvasWidgetsNormalizer, {
widgetSchema
} from "../../normalizers/CanvasWidgetsNormalizer"
import { IContainerWidgetProps } from "../../widgets/ContainerWidget"
import { fetchPage } from "../../actions/pageActions"
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
? WidgetFactory.createWidget(pageWidget)
: undefined}
{pageWidget ? 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
}

20
app/client/src/widgets/BaseWidget.tsx
View File

@ -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

72
app/client/src/widgets/DraggableWidget.tsx Normal file
View File

@ -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)

46
app/client/yarn.lock
View File

@ -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:
version "7.2.0"
resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-7.2.0.tgz#70d4ab6c0c6f90423c27b1711624b5d834025bf3"
dnd-core@^7.4.0:
version "7.4.0"
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:
version "7.2.0"
resolved "https://registry.yarnpkg.com/react-dnd-html5-backend/-/react-dnd-html5-backend-7.2.0.tgz#4cde55fb690020d98d7b6f3d4400c56b2ae82dfa"
react-dnd-html5-backend@^7.4.3:
version "7.4.0"
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:
version "7.3.1"
resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-7.3.1.tgz#40591760d11d996ac859ac6312ea6f26dbfffd23"
react-dnd@^7.4.3:
version "7.4.3"
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"