From 91fd8ff17e739a81dc5541e9f6a7b60447877fdc Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Wed, 2 Oct 2019 23:43:04 +0530 Subject: [PATCH 1/6] Propagate WidgetConfigs to new widget. Use theme spaces everywhere. --- app/client/src/constants/DefaultTheme.tsx | 4 +- .../src/constants/ReduxActionConstants.tsx | 1 + .../src/editorComponents/BaseComponent.tsx | 1 + .../editorComponents/ContainerComponent.tsx | 11 ++++ .../editorComponents/ResizableComponent.tsx | 16 +++--- .../src/pages/Editor/WidgetCardsPane.tsx | 2 +- app/client/src/pages/Editor/index.tsx | 9 ++-- app/client/src/sagas/ErrorSagas.tsx | 1 + app/client/src/sagas/WidgetOperationSagas.tsx | 54 ++++++++++++------- app/client/src/sagas/selectors.tsx | 13 ++++- app/client/src/utils/AppsmithUtils.tsx | 28 ++++++++++ app/client/src/utils/WidgetPropsUtils.tsx | 6 ++- app/client/src/widgets/ButtonWidget.tsx | 1 + app/client/src/widgets/ContainerWidget.tsx | 6 ++- app/client/src/widgets/SpinnerWidget.tsx | 1 + 15 files changed, 116 insertions(+), 38 deletions(-) diff --git a/app/client/src/constants/DefaultTheme.tsx b/app/client/src/constants/DefaultTheme.tsx index 62e02cfdb7..34b6872f51 100644 --- a/app/client/src/constants/DefaultTheme.tsx +++ b/app/client/src/constants/DefaultTheme.tsx @@ -24,9 +24,9 @@ export type Theme = { }; export const theme: Theme = { - radii: [0, 4, 8, 10, 20], + radii: [0, 4, 8, 10, 20, 50], fontSizes: [0, 10, 12, 14, 16, 18, 24, 28, 32, 48, 64], - spaces: [0, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24], + spaces: [0, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24], fontWeights: [0, 400, 500, 700], colors: { primary: Colors.GREEN, diff --git a/app/client/src/constants/ReduxActionConstants.tsx b/app/client/src/constants/ReduxActionConstants.tsx index 6cecce4af4..a40adcf4e7 100644 --- a/app/client/src/constants/ReduxActionConstants.tsx +++ b/app/client/src/constants/ReduxActionConstants.tsx @@ -48,6 +48,7 @@ export const ReduxActionErrorTypes: { [key: string]: string } = { FETCH_PAGE_ERROR: "FETCH_PAGE_ERROR", SAVE_PAGE_ERROR: "SAVE_PAGE_ERROR", FETCH_WIDGET_CARDS_ERROR: "FETCH_WIDGET_CARDS_ERROR", + WIDGET_OPERATION_ERROR: "WIDGET_OPERATION_ERROR", }; export type ReduxActionErrorType = (typeof ReduxActionErrorTypes)[keyof typeof ReduxActionErrorTypes]; diff --git a/app/client/src/editorComponents/BaseComponent.tsx b/app/client/src/editorComponents/BaseComponent.tsx index 3389208508..886a8be1fe 100644 --- a/app/client/src/editorComponents/BaseComponent.tsx +++ b/app/client/src/editorComponents/BaseComponent.tsx @@ -22,6 +22,7 @@ export interface BaseStyle { export interface ComponentProps { widgetId: string; + widgetName?: string; style: BaseStyle; } diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index eb6a53b842..36da05b658 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -24,6 +24,17 @@ export const Container = styled("div")` left: 0; top: 0; width: 100%; + padding: ${props => props.theme.spaces[8]}px ${props => + props.theme.spaces[1]}px ${props => props.theme.spaces[1]}px; + &:after { + content: "${props => props.widgetName}"; + position: absolute; + left: ${props => props.theme.spaces[1]}px; + top: ${props => props.theme.spaces[1]}px; + font-size: ${props => props.theme.fontSizes[2]}px; + text-align: left; + width: 100%; + } `; export const FocusContext: Context<{ diff --git a/app/client/src/editorComponents/ResizableComponent.tsx b/app/client/src/editorComponents/ResizableComponent.tsx index d24eea983f..90404df1bf 100644 --- a/app/client/src/editorComponents/ResizableComponent.tsx +++ b/app/client/src/editorComponents/ResizableComponent.tsx @@ -16,20 +16,20 @@ const ResizableContainer = styled(Resizable)` &:before { content: ""; position: absolute; - width: 8px; - height: 8px; - border-radius: 50%; + width: ${props => props.theme.spaces[2]}px; + height: ${props => props.theme.spaces[2]}px; + border-radius: ${props => props.theme.radii[5]}%; z-index: 9; background: ${props => props.theme.colors.containerBorder}; } &:after { - right: -4px; - top: 50%; + right: -${props => props.theme.spaces[1]}px; + top: calc(50% - ${props => props.theme.spaces[1]}px); } &:before { - left: calc(50%); - top: calc(100% - 4px); + left: calc(50% - ${props => props.theme.spaces[1]}px); + bottom: -${props => props.theme.spaces[1]}px; } `; @@ -50,6 +50,8 @@ export const ResizableComponent = (props: ResizableComponentProps) => { width: props.style.componentWidth as number, height: props.style.componentHeight as number, }} + minWidth={props.parentColumnSpace} + minHeight={props.parentRowSpace} style={{ ...props.style }} onResizeStop={updateSize} grid={[props.parentColumnSpace, props.parentRowSpace]} diff --git a/app/client/src/pages/Editor/WidgetCardsPane.tsx b/app/client/src/pages/Editor/WidgetCardsPane.tsx index 6e7652af77..5c4a048979 100644 --- a/app/client/src/pages/Editor/WidgetCardsPane.tsx +++ b/app/client/src/pages/Editor/WidgetCardsPane.tsx @@ -19,7 +19,7 @@ const CardsPaneWrapper = styled.div` const CardsWrapper = styled.div` display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-gap: ${props => props.theme.spaces[2]}px; + grid-gap: ${props => props.theme.spaces[1]}px; justify-items: stretch; align-items: stretch; `; diff --git a/app/client/src/pages/Editor/index.tsx b/app/client/src/pages/Editor/index.tsx index 9c0a334015..a4c781d9ee 100644 --- a/app/client/src/pages/Editor/index.tsx +++ b/app/client/src/pages/Editor/index.tsx @@ -105,15 +105,14 @@ const mapStateToProps = (state: AppState): EditorReduxState => { state.ui.editor.pageWidgetId, state.entities, ); - const configs = state.entities.widgetConfig.config; const cards = state.ui.editor.cards; const groups: string[] = Object.keys(cards); groups.forEach((group: string) => { - cards[group] = cards[group].map((widget: WidgetCardProps) => ({ - ...widget, - ...configs[widget.type], - })); + cards[group] = cards[group].map((widget: WidgetCardProps) => { + const { rows, columns } = state.entities.widgetConfig.config[widget.type]; + return { ...widget, rows, columns }; + }); }); return { diff --git a/app/client/src/sagas/ErrorSagas.tsx b/app/client/src/sagas/ErrorSagas.tsx index 6e3ba93c51..754999101f 100644 --- a/app/client/src/sagas/ErrorSagas.tsx +++ b/app/client/src/sagas/ErrorSagas.tsx @@ -24,6 +24,7 @@ export function* validateResponse(response: ApiResponse) { export function* errorSaga(errorAction: ReduxAction<{ error: any }>) { // Just a pass through for now. // Add procedures to customize errors here + console.log(errorAction.payload.error); yield put({ type: ReduxActionTypes.REPORT_ERROR, payload: { diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index 88504f0705..f542311a2a 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -1,5 +1,6 @@ import { ReduxActionTypes, + ReduxActionErrorTypes, ReduxAction, } from "../constants/ReduxActionConstants"; import { @@ -9,13 +10,19 @@ import { WidgetDelete, } from "../actions/pageActions"; import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer"; -import { getWidgets, getWidget, getWidgetParent } from "./selectors"; +import { + getWidgets, + getWidget, + getWidgetParent, + getDefaultWidgetConfig, +} from "./selectors"; import { generateWidgetProps, updateWidgetSize, updateWidgetPosition, } from "../utils/WidgetPropsUtils"; import { put, select, takeEvery, takeLatest, all } from "redux-saga/effects"; +import { getNextWidgetName } from "../utils/AppsmithUtils"; export function* addChildSaga(addChildAction: ReduxAction) { try { @@ -31,7 +38,7 @@ export function* addChildSaga(addChildAction: ReduxAction) { } = addChildAction.payload; const widget: FlattenedWidgetProps = yield select(getWidget, widgetId); const widgets = yield select(getWidgets); - + const defaultWidgetConfig = yield select(getDefaultWidgetConfig, type); const childWidget = generateWidgetProps( widget, type, @@ -41,6 +48,8 @@ export function* addChildSaga(addChildAction: ReduxAction) { rows, parentRowSpace, parentColumnSpace, + getNextWidgetName(type, widgets), + defaultWidgetConfig, ); widgets[childWidget.widgetId] = childWidget; if (widget && widget.children) { @@ -51,11 +60,13 @@ export function* addChildSaga(addChildAction: ReduxAction) { type: ReduxActionTypes.UPDATE_LAYOUT, payload: { widgets }, }); - } catch (err) { + } catch (error) { yield put({ - type: ReduxActionTypes.WIDGET_OPERATION_ERROR, - action: ReduxActionTypes.WIDGET_ADD_CHILD, - ...err, + type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, + payload: { + action: ReduxActionTypes.WIDGET_ADD_CHILD, + error, + }, }); } } @@ -74,12 +85,13 @@ export function* deleteSaga(deleteAction: ReduxAction) { type: ReduxActionTypes.UPDATE_LAYOUT, payload: { widgets }, }); - } catch (err) { - console.log(err); + } catch (error) { yield put({ - type: ReduxActionTypes.WIDGET_OPERATION_ERROR, - action: ReduxActionTypes.WIDGET_DELETE, - ...err, + type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, + payload: { + action: ReduxActionTypes.WIDGET_DELETE, + error, + }, }); } } @@ -110,11 +122,13 @@ export function* moveSaga(moveAction: ReduxAction) { type: ReduxActionTypes.UPDATE_LAYOUT, payload: { widgets }, }); - } catch (err) { + } catch (error) { yield put({ - type: ReduxActionTypes.WIDGET_OPERATION_ERROR, - action: ReduxActionTypes.WIDGET_MOVE, - ...err, + type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, + payload: { + action: ReduxActionTypes.WIDGET_MOVE, + error, + }, }); } } @@ -133,11 +147,13 @@ export function* resizeSaga(resizeAction: ReduxAction) { type: ReduxActionTypes.UPDATE_LAYOUT, payload: { widgets }, }); - } catch (err) { + } catch (error) { yield put({ - type: ReduxActionTypes.WIDGET_OPERATION_ERROR, - action: ReduxActionTypes.WIDGET_RESIZE, - ...err, + type: ReduxActionErrorTypes.WIDGET_OPERATION_ERROR, + payload: { + action: ReduxActionTypes.WIDGET_RESIZE, + error, + }, }); } } diff --git a/app/client/src/sagas/selectors.tsx b/app/client/src/sagas/selectors.tsx index a32b31a914..fc1c5eacf8 100644 --- a/app/client/src/sagas/selectors.tsx +++ b/app/client/src/sagas/selectors.tsx @@ -1,7 +1,7 @@ import { AppState } from "../reducers"; import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer"; import { WidgetProps } from "../widgets/BaseWidget"; - +import { WidgetType } from "../constants/WidgetConstants"; export const getWidgets = ( state: AppState, ): { [widgetId: string]: FlattenedWidgetProps } => { @@ -35,3 +35,14 @@ export const getWidgetParent = ( widget.children.indexOf(widgetId) > -1, ); }; + +export const getDefaultWidgetConfig = ( + state: AppState, + type: WidgetType, +): Partial => { + const configs = state.entities.widgetConfig.config; + const widgetConfig = { ...configs[type] }; + delete widgetConfig.rows; + delete widgetConfig.columns; + return widgetConfig; +}; diff --git a/app/client/src/utils/AppsmithUtils.tsx b/app/client/src/utils/AppsmithUtils.tsx index af48741e0f..ba3636bba0 100644 --- a/app/client/src/utils/AppsmithUtils.tsx +++ b/app/client/src/utils/AppsmithUtils.tsx @@ -12,6 +12,8 @@ import FontFaceObserver from "fontfaceobserver"; import PropertyControlRegistry from "./PropertyControlRegistry"; import WidgetBuilderRegistry from "./WidgetRegistry"; import { Property } from "../api/ActionAPI"; +import { WidgetType } from "../constants/WidgetConstants"; +import { FlattenedWidgetProps } from "../reducers/entityReducers/canvasWidgetsReducer"; import _ from "lodash"; export const createReducer = ( @@ -60,3 +62,29 @@ export const mapToPropList = (map: Record): Property[] => { return { key: key, value: value }; }); }; + +export const getNextWidgetName = ( + type: WidgetType, + widgets: { + [id: string]: FlattenedWidgetProps; + }, +) => { + const prefix = type + .split("_") + .filter(token => token !== "WIDGET") + .join("") + .toLowerCase(); + const usedIndices: number[] = Object.values(widgets).map(widget => { + if (widget.type === type) { + const ind = widget.widgetName + ? parseInt(widget.widgetName.split(prefix)[1], 10) + : 0; + return Number.isNaN(ind) ? 0 : ind; + } + return 0; + }) as number[]; + + const lastIndex = Math.max(...usedIndices); + + return prefix + (lastIndex + 1); +}; diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx index 13966d9f3f..bd2f953966 100644 --- a/app/client/src/utils/WidgetPropsUtils.tsx +++ b/app/client/src/utils/WidgetPropsUtils.tsx @@ -211,6 +211,8 @@ export const generateWidgetProps = ( rows: number, parentRowSpace: number, parentColumnSpace: number, + widgetName: string, + widgetConfig: Partial, ): ContainerWidgetProps => { if (parent && parent.snapColumns && parent.snapRows) { const sizes = { @@ -229,11 +231,13 @@ export const generateWidgetProps = ( background: Colors.WHITE, }; } + console.log(widgetConfig); return { + ...widgetConfig, type, executeAction: () => {}, widgetId: generateReactKey(), - widgetName: generateReactKey(), //TODO: figure out what this is to populate appropriately + widgetName: widgetName || generateReactKey(), //TODO: figure out what this is to populate appropriately isVisible: true, parentColumnSpace, parentRowSpace, diff --git a/app/client/src/widgets/ButtonWidget.tsx b/app/client/src/widgets/ButtonWidget.tsx index 63e4a04c92..75f56b8b39 100644 --- a/app/client/src/widgets/ButtonWidget.tsx +++ b/app/client/src/widgets/ButtonWidget.tsx @@ -14,6 +14,7 @@ class ButtonWidget extends BaseWidget { { diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx index 768e95d5b8..9cbc9dbfa1 100644 --- a/app/client/src/widgets/ContainerWidget.tsx +++ b/app/client/src/widgets/ContainerWidget.tsx @@ -35,9 +35,10 @@ class ContainerWidget extends BaseWidget< super.componentDidUpdate(previousProps); let snapColumnSpace = this.state.snapColumnSpace; if (this.state.componentWidth) - snapColumnSpace = + snapColumnSpace = Math.floor( this.state.componentWidth / - (this.props.snapColumns || DEFAULT_GRID_COLUMNS); + (this.props.snapColumns || DEFAULT_GRID_COLUMNS), + ); if (this.state.snapColumnSpace !== snapColumnSpace) { this.setState({ snapColumnSpace, @@ -67,6 +68,7 @@ class ContainerWidget extends BaseWidget< }} isRoot={!this.props.parentId} orientation={this.props.orientation || "VERTICAL"} + widgetName={this.props.widgetName} > {_.map(this.props.children, this.renderChildWidget)} diff --git a/app/client/src/widgets/SpinnerWidget.tsx b/app/client/src/widgets/SpinnerWidget.tsx index 70429a8d50..3291c20e6f 100644 --- a/app/client/src/widgets/SpinnerWidget.tsx +++ b/app/client/src/widgets/SpinnerWidget.tsx @@ -10,6 +10,7 @@ class SpinnerWidget extends BaseWidget { Date: Thu, 3 Oct 2019 01:12:25 +0530 Subject: [PATCH 2/6] Use React-RND to resize on all sides. Use class selector for resize bounds --- app/client/package.json | 1 + app/client/src/actions/pageActions.tsx | 6 ++- .../editorComponents/ContainerComponent.tsx | 1 + .../editorComponents/DraggableComponent.tsx | 5 +++ .../editorComponents/ResizableComponent.tsx | 44 ++++++++++++++----- app/client/src/sagas/WidgetOperationSagas.tsx | 11 +++-- app/client/yarn.lock | 36 ++++++++++++--- 7 files changed, 83 insertions(+), 21 deletions(-) diff --git a/app/client/package.json b/app/client/package.json index eec0818de8..49f2533503 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -46,6 +46,7 @@ "react-dom": "^16.7.0", "react-netlify-identity": "^0.1.9", "react-redux": "^6.0.0", + "react-rnd": "^10.1.1", "react-router": "^5.0.1", "react-router-dom": "^5.0.1", "react-scripts": "^3.1.1", diff --git a/app/client/src/actions/pageActions.tsx b/app/client/src/actions/pageActions.tsx index ae0bfbf849..29d9137f59 100644 --- a/app/client/src/actions/pageActions.tsx +++ b/app/client/src/actions/pageActions.tsx @@ -111,8 +111,10 @@ export type WidgetDelete = { export type WidgetResize = { widgetId: string; - width: number; // delta/diff - height: number; // delta/diff + leftColumn: number; + rightColumn: number; + topRow: number; + bottomRow: number; }; export const updateWidget = ( diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 36da05b658..8e67cf1e73 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -32,6 +32,7 @@ export const Container = styled("div")` left: ${props => props.theme.spaces[1]}px; top: ${props => props.theme.spaces[1]}px; font-size: ${props => props.theme.fontSizes[2]}px; + color: ${props => props.theme.colors.containerBorder}; text-align: left; width: 100%; } diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index bb4ada102e..fa8347ec2c 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -18,6 +18,7 @@ const DraggableWrapper = styled.div<{ show: boolean }>` &:hover > div { display: block; } + display: block; `; const DragHandle = styled.div` @@ -86,6 +87,10 @@ const DraggableComponent = (props: DraggableComponentProps) => { top: props.style ? props.style.yPosition + props.style.yPositionUnit : 0, + minWidth: + props.style.componentWidth + (props.style.widthUnit || "px"), + minHeight: + props.style.componentHeight + (props.style.heightUnit || "px"), }} > diff --git a/app/client/src/editorComponents/ResizableComponent.tsx b/app/client/src/editorComponents/ResizableComponent.tsx index 90404df1bf..81f9e8d4f4 100644 --- a/app/client/src/editorComponents/ResizableComponent.tsx +++ b/app/client/src/editorComponents/ResizableComponent.tsx @@ -1,12 +1,13 @@ import React, { useContext } from "react"; import styled from "styled-components"; -import { Resizable, ResizeDirection } from "re-resizable"; +import { Rnd } from "react-rnd"; +import { XYCoord } from "react-dnd"; import { WidgetProps, WidgetOperations } from "../widgets/BaseWidget"; import { ContainerProps, ParentBoundsContext } from "./ContainerComponent"; export type ResizableComponentProps = WidgetProps & ContainerProps; -const ResizableContainer = styled(Resizable)` +const ResizableContainer = styled(Rnd)` position: relative; z-index: 10; border: ${props => { @@ -35,35 +36,58 @@ const ResizableContainer = styled(Resizable)` export const ResizableComponent = (props: ResizableComponentProps) => { const { boundingParent } = useContext(ParentBoundsContext); + let bounds = "body"; + if (boundingParent && boundingParent.current) { + bounds = "." + boundingParent.current.className.split(" ")[1]; + } const updateSize = ( e: Event, - dir: ResizeDirection, + dir: any, ref: any, delta: { width: number; height: number }, + position: XYCoord, ) => { + const leftColumn = props.leftColumn + position.x / props.parentColumnSpace; + const topRow = props.topRow + position.y / props.parentRowSpace; + + const rightColumn = + props.rightColumn + (delta.width + position.x) / props.parentColumnSpace; + const bottomRow = + props.bottomRow + (delta.height + position.y) / props.parentRowSpace; + props.updateWidget && - props.updateWidget(WidgetOperations.RESIZE, props.widgetId, delta); + props.updateWidget(WidgetOperations.RESIZE, props.widgetId, { + leftColumn, + rightColumn, + topRow, + bottomRow, + }); }; return ( diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index f542311a2a..dbb7d4faef 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -18,7 +18,6 @@ import { } from "./selectors"; import { generateWidgetProps, - updateWidgetSize, updateWidgetPosition, } from "../utils/WidgetPropsUtils"; import { put, select, takeEvery, takeLatest, all } from "redux-saga/effects"; @@ -135,12 +134,18 @@ export function* moveSaga(moveAction: ReduxAction) { export function* resizeSaga(resizeAction: ReduxAction) { try { - const { widgetId, height, width } = resizeAction.payload; + const { + widgetId, + leftColumn, + rightColumn, + topRow, + bottomRow, + } = resizeAction.payload; let widget: FlattenedWidgetProps = yield select(getWidget, widgetId); const widgets = yield select(getWidgets); - widget = updateWidgetSize(widget, height, width); + widget = { ...widget, leftColumn, rightColumn, topRow, bottomRow }; widgets[widgetId] = widget; yield put({ diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 95bc8690f1..4ac8855416 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -3031,7 +3031,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@^2.2: +classnames@^2.2, classnames@^2.2.5: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -9576,6 +9576,13 @@ rc@^1.2.7: minimist "^1.2.0" strip-json-comments "~2.0.1" +re-resizable@6.1.0: + version "6.1.0" + resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.1.0.tgz#ba4ece505b48f05691446d57837151349d7575e8" + integrity sha512-Jj9zdYW6SnUto8pmH4b/3Kms/PKPv9CuWE70W1IuUIR1HlrEibgsqhbUe8BYDRBTuagH1gav09806k7TieUeSA== + dependencies: + fast-memoize "^2.5.1" + re-resizable@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/re-resizable/-/re-resizable-6.0.0.tgz#84258f098b0dde214a39ca6d9ca9959aeefbc26d" @@ -9661,6 +9668,14 @@ react-dom@^16.7.0: prop-types "^15.6.2" scheduler "^0.15.0" +react-draggable@4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.0.3.tgz#6b9f76f66431c47b9070e9b805bbc520df8ca481" + integrity sha512-4vD6zms+9QGeZ2RQXzlUBw8PBYUXy+dzYX5r22idjp9YwQKIIvD/EojL0rbjS1GK4C3P0rAJnmKa8gDQYWUDyA== + dependencies: + classnames "^2.2.5" + prop-types "^15.6.0" + react-error-overlay@^6.0.1: version "6.0.1" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.1.tgz#b8d3cf9bb991c02883225c48044cb3ee20413e0f" @@ -9708,6 +9723,15 @@ react-redux@^6.0.0: prop-types "^15.7.2" react-is "^16.8.2" +react-rnd@^10.1.1: + version "10.1.1" + resolved "https://registry.yarnpkg.com/react-rnd/-/react-rnd-10.1.1.tgz#4f4d9d28c46a6060acb64600df7a88490862a324" + integrity sha512-KwNUbNd4Kg2DTLdw/Eb8dSC3T5nMRQIRfyyVjdoLT85hKXpeCkMRb2zo4BHCzkgdgCbFGgYLDmj1qRH5DUkTGA== + dependencies: + re-resizable "6.1.0" + react-draggable "4.0.3" + tslib "1.10.0" + react-router-dom@^5.0.1: version "5.0.1" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.0.1.tgz#ee66f4a5d18b6089c361958e443489d6bab714be" @@ -11650,16 +11674,16 @@ tsdx@^0.6.0: tslib "^1.9.3" typescript "^3.4.5" +tslib@1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: + version "1.10.0" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" + integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== + tslib@1.9.3, tslib@~1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286" integrity sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ== -tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: - version "1.10.0" - resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a" - integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ== - tsutils@^3.17.1, tsutils@^3.7.0: version "3.17.1" resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.17.1.tgz#ed719917f11ca0dee586272b2ac49e015a2dd759" From 089bc97122a3ab3b6e0e432a20d93f244e6e5754 Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Thu, 3 Oct 2019 01:31:51 +0530 Subject: [PATCH 3/6] Allow dragging from anywhere on widget. Use theme colors for dropzone. Fix container widget positioning. --- app/client/src/editorComponents/DraggableComponent.tsx | 2 +- app/client/src/editorComponents/DropTargetComponent.tsx | 2 +- app/client/src/editorComponents/Dropzone.tsx | 3 ++- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index fa8347ec2c..a260d8a07c 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -69,7 +69,7 @@ const DraggableComponent = (props: DraggableComponentProps) => { { if (setFocus) { setFocus(props.widgetId); diff --git a/app/client/src/editorComponents/DropTargetComponent.tsx b/app/client/src/editorComponents/DropTargetComponent.tsx index b6285d1714..9668faa57f 100644 --- a/app/client/src/editorComponents/DropTargetComponent.tsx +++ b/app/client/src/editorComponents/DropTargetComponent.tsx @@ -85,7 +85,7 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => {
{ width: wrapperProps.width + "px", top: wrapperProps.top + "px", height: wrapperProps.height + "px", - background: props.canDrop ? "blue" : "red", + background: props.canDrop ? theme.colors.hover : theme.colors.error, }} /> ); From 87171c6ecb1e62b981f5417eec6db195bcb5385d Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Thu, 3 Oct 2019 02:44:58 +0530 Subject: [PATCH 4/6] Fix collision with self on dragging --- app/client/src/editorComponents/ContainerComponent.tsx | 2 +- .../src/editorComponents/DropTargetComponent.tsx | 10 +++++++--- app/client/src/sagas/WidgetOperationSagas.tsx | 2 +- app/client/src/utils/WidgetPropsUtils.tsx | 6 ++++-- app/client/src/widgets/ContainerWidget.tsx | 3 ++- 5 files changed, 15 insertions(+), 8 deletions(-) diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 8e67cf1e73..880e3a264e 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -27,7 +27,7 @@ export const Container = styled("div")` padding: ${props => props.theme.spaces[8]}px ${props => props.theme.spaces[1]}px ${props => props.theme.spaces[1]}px; &:after { - content: "${props => props.widgetName}"; + content: "${props => props.widgetId}"; position: absolute; left: ${props => props.theme.spaces[1]}px; top: ${props => props.theme.spaces[1]}px; diff --git a/app/client/src/editorComponents/DropTargetComponent.tsx b/app/client/src/editorComponents/DropTargetComponent.tsx index 9668faa57f..d5697a7157 100644 --- a/app/client/src/editorComponents/DropTargetComponent.tsx +++ b/app/client/src/editorComponents/DropTargetComponent.tsx @@ -35,7 +35,7 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => { accept: Object.values(WidgetFactory.getWidgetTypes()), drop(widget: WidgetProps & Partial, monitor) { // Make sure we're dropping in this container. - if (isOver && monitor.canDrop()) { + if (isOver) { props.updateWidget && props.updateWidget( ...widgetOperationParams( @@ -52,13 +52,17 @@ export const DropTargetComponent = (props: DropTargetComponentProps) => { }, // Collect isOver for ui transforms when hovering over this component collect: monitor => ({ - isOver: !!monitor.isOver({ shallow: true }), + isOver: + (monitor.isOver({ shallow: true }) && + props.widgetId !== monitor.getItem().widgetId) || + (monitor.isOver() && props.widgetId !== monitor.getItem().widgetId), }), // Only allow drop if the drag object is directly over this component // As opposed to the drag object being over a child component, or outside the component bounds // Also only if the dropzone does not overlap any existing children canDrop: (widget, monitor) => { - if (monitor.isOver({ shallow: true })) { + // Check if the draggable is the same as the dropTarget + if (isOver) { return noCollision( monitor.getClientOffset() as XYCoord, props.snapColumnSpace, diff --git a/app/client/src/sagas/WidgetOperationSagas.tsx b/app/client/src/sagas/WidgetOperationSagas.tsx index dbb7d4faef..c5e856738c 100644 --- a/app/client/src/sagas/WidgetOperationSagas.tsx +++ b/app/client/src/sagas/WidgetOperationSagas.tsx @@ -108,7 +108,7 @@ export function* moveSaga(moveAction: ReduxAction) { // Replace widget with update widget props widgets[widgetId] = widget; // If the parent has changed i.e parentWidgetId is not parent.widgetId - if (parent.widgetId !== parentWidgetId) { + if (parent.widgetId !== parentWidgetId && widgetId !== parentWidgetId) { // Remove from the previous parent parent.children = parent.children.filter( (child: string) => child !== widgetId, diff --git a/app/client/src/utils/WidgetPropsUtils.tsx b/app/client/src/utils/WidgetPropsUtils.tsx index bd2f953966..4b4b1a7160 100644 --- a/app/client/src/utils/WidgetPropsUtils.tsx +++ b/app/client/src/utils/WidgetPropsUtils.tsx @@ -71,7 +71,10 @@ export const isDropZoneOccupied = ( ) => { if (occupied) { occupied = occupied.filter(widgetDetails => { - return widgetDetails.id !== widget.widgetId; + return ( + widgetDetails.id !== widget.widgetId && + widgetDetails.parentId !== widget.widgetId + ); }); for (let i = 0; i < occupied.length; i++) { if (areIntersecting(occupied[i], offset)) { @@ -231,7 +234,6 @@ export const generateWidgetProps = ( background: Colors.WHITE, }; } - console.log(widgetConfig); return { ...widgetConfig, type, diff --git a/app/client/src/widgets/ContainerWidget.tsx b/app/client/src/widgets/ContainerWidget.tsx index 9cbc9dbfa1..49f283bfee 100644 --- a/app/client/src/widgets/ContainerWidget.tsx +++ b/app/client/src/widgets/ContainerWidget.tsx @@ -79,6 +79,7 @@ class ContainerWidget extends BaseWidget< return this.props.children ? this.props.children.map(child => ({ id: child.widgetId, + parentId: this.props.widgetId, left: child.leftColumn, top: child.topRow, bottom: child.bottomRow, @@ -89,7 +90,6 @@ class ContainerWidget extends BaseWidget< getCanvasView() { const style = this.getPositionStyle(); const occupiedSpaces = this.getOccupiedSpaces(); - const renderDraggableComponent = ( Date: Thu, 3 Oct 2019 03:03:37 +0530 Subject: [PATCH 5/6] Revert to only handle based dragging due to conflict with resizable component --- app/client/src/editorComponents/DraggableComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/editorComponents/DraggableComponent.tsx b/app/client/src/editorComponents/DraggableComponent.tsx index a260d8a07c..fa8347ec2c 100644 --- a/app/client/src/editorComponents/DraggableComponent.tsx +++ b/app/client/src/editorComponents/DraggableComponent.tsx @@ -69,7 +69,7 @@ const DraggableComponent = (props: DraggableComponentProps) => { { if (setFocus) { setFocus(props.widgetId); From afed39a6e2976072e4294fea0a925726757e40bf Mon Sep 17 00:00:00 2001 From: Abhinav Jha Date: Thu, 3 Oct 2019 03:26:25 +0530 Subject: [PATCH 6/6] Change back to widget Name --- app/client/src/editorComponents/ContainerComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/editorComponents/ContainerComponent.tsx b/app/client/src/editorComponents/ContainerComponent.tsx index 880e3a264e..8e67cf1e73 100644 --- a/app/client/src/editorComponents/ContainerComponent.tsx +++ b/app/client/src/editorComponents/ContainerComponent.tsx @@ -27,7 +27,7 @@ export const Container = styled("div")` padding: ${props => props.theme.spaces[8]}px ${props => props.theme.spaces[1]}px ${props => props.theme.spaces[1]}px; &:after { - content: "${props => props.widgetId}"; + content: "${props => props.widgetName}"; position: absolute; left: ${props => props.theme.spaces[1]}px; top: ${props => props.theme.spaces[1]}px;