From 0d4dcf635bc5e65d439ea3c806b915d09985c80d Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 9 Apr 2019 15:12:20 -0400 Subject: [PATCH 01/10] Determine which arrows to show on which folds --- src/components/containers/PlotlyFold.js | 13 +++++++++++-- src/components/containers/PlotlyPanel.js | 7 +++++++ src/components/containers/TraceAccordion.js | 5 +++-- src/default_panels/GraphCreatePanel.js | 1 + 4 files changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js index 87a500778..ccd104e7a 100644 --- a/src/components/containers/PlotlyFold.js +++ b/src/components/containers/PlotlyFold.js @@ -33,6 +33,8 @@ export class Fold extends Component { icon: Icon, messageIfEmpty, name, + canMoveUp, + canMoveDown, } = this.props; const contentClass = classnames('fold__content', { @@ -47,7 +49,7 @@ export class Fold extends Component { 'fold__top__arrow--open': !folded, }); - const arrowIcon = ( + const arrowDownIcon = (
@@ -70,13 +72,18 @@ export class Fold extends Component {
) : null; + const moveUpArrowIcon = canMoveUp ? 'up' : null; + const moveDownArrowIcon = canMoveDown ? 'down' : null; + const foldHeader = !hideHeader && (
- {arrowIcon} + {arrowDownIcon} {icon}
{striptags(name)}
+ {moveUpArrowIcon} + {moveDownArrowIcon} {deleteButton}
); @@ -118,6 +125,8 @@ Fold.propTypes = { icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), messageIfEmpty: PropTypes.string, name: PropTypes.string, + canMoveUp: PropTypes.bool, + canMoveDown: PropTypes.bool, }; Fold.contextTypes = { diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js index 2281dd718..e3c20d19e 100644 --- a/src/components/containers/PlotlyPanel.js +++ b/src/components/containers/PlotlyPanel.js @@ -86,6 +86,7 @@ export class Panel extends Component { render() { const {individualFoldStates, hasError} = this.state; + const {canReorder} = this.props; if (hasError) { return ; @@ -97,6 +98,11 @@ export class Panel extends Component { key: index, folded: individualFoldStates[index] || false, toggleFold: () => this.toggleFold(index), + canMoveUp: canReorder && individualFoldStates.length > 1 && index > 0, + canMoveDown: + canReorder && + individualFoldStates.length > 1 && + index !== individualFoldStates.length - 1, }); } return child; @@ -122,6 +128,7 @@ Panel.propTypes = { deleteAction: PropTypes.func, noPadding: PropTypes.bool, showExpandCollapse: PropTypes.bool, + canReorder: PropTypes.bool, }; Panel.defaultProps = { diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js index 062523521..db64c4f3d 100644 --- a/src/components/containers/TraceAccordion.js +++ b/src/components/containers/TraceAccordion.js @@ -130,7 +130,7 @@ class TraceAccordion extends Component { } render() { - const {canAdd, canGroup} = this.props; + const {canAdd, canGroup, canReorder} = this.props; const _ = this.context.localize; if (canAdd) { @@ -146,7 +146,7 @@ class TraceAccordion extends Component { }; const traceFolds = this.renderTraceFolds(); return ( - + {traceFolds ? traceFolds : this.renderTracePanelHelp()} ); @@ -190,6 +190,7 @@ TraceAccordion.contextTypes = { TraceAccordion.propTypes = { canAdd: PropTypes.bool, canGroup: PropTypes.bool, + canReorder: PropTypes.bool, children: PropTypes.node, traceFilterCondition: PropTypes.func, }; diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js index 5b6cb1045..87d812688 100644 --- a/src/default_panels/GraphCreatePanel.js +++ b/src/default_panels/GraphCreatePanel.js @@ -25,6 +25,7 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => { traceFilterCondition={t => !(t.transforms && t.transforms.some(tr => ['fit', 'moving-average'].includes(tr.type))) } + canReorder > From 06a8c91300681a28ec62210eef22f9229a497fbd Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 9 Apr 2019 16:22:13 -0400 Subject: [PATCH 02/10] add moving controls css --- src/components/containers/PlotlyFold.js | 29 +++++++++++++++--- src/styles/components/containers/_fold.scss | 34 +++++++++++++++++++-- 2 files changed, 57 insertions(+), 6 deletions(-) diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js index ccd104e7a..f13c5ad11 100644 --- a/src/components/containers/PlotlyFold.js +++ b/src/components/containers/PlotlyFold.js @@ -72,8 +72,30 @@ export class Fold extends Component {
) : null; - const moveUpArrowIcon = canMoveUp ? 'up' : null; - const moveDownArrowIcon = canMoveDown ? 'down' : null; + const movingControls = (canMoveDown || canMoveUp) && ( +
+ { + // prevents fold toggle to happen when clicking on moving arrow controls + e.stopPropagation(); + alert('up'); + }} + > + {canMoveUp ? : null} + + { + // prevents fold toggle to happen when clicking on moving arrow controls + e.stopPropagation(); + alert('down'); + }} + > + {canMoveDown ? : null} + +
+ ); const foldHeader = !hideHeader && (
@@ -82,8 +104,7 @@ export class Fold extends Component { {icon}
{striptags(name)}
- {moveUpArrowIcon} - {moveDownArrowIcon} + {movingControls} {deleteButton} ); diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss index 225ecedd9..fd749b071 100644 --- a/src/styles/components/containers/_fold.scss +++ b/src/styles/components/containers/_fold.scss @@ -13,8 +13,7 @@ height: 15px; border-radius: var(--border-radius); text-shadow: var(--text-shadow-dark-ui); - transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, - border 0.1s ease-in-out; + transition: background-color 0.1s ease-in-out, color 0.1s ease-in-out, border 0.1s ease-in-out; &:hover { cursor: pointer; @@ -87,6 +86,37 @@ } } + &__moving-controls { + height: 27px; + margin-top: -7px; + margin-right: 5px; + + svg { + font-weight: bold; + opacity: 0.75; + } + svg:hover { + opacity: 1; + } + + &--up { + height: 13px; + width: 18px; + display: block; + svg { + transform: rotate(-180deg); + transform-origin: center center; + } + } + + &--down { + height: 13px; + width: 18px; + display: block; + margin-top: -2px; + } + } + &__delete { font-size: 18px; opacity: 0.75; From 4452bc6d70e0a55bbbe3fc6978ae9914f7bee9f5 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Tue, 9 Apr 2019 18:07:06 -0400 Subject: [PATCH 03/10] add ability to move folds up and down / can be extended to other accordions --- src/EditorControls.js | 20 ++++++++++++++++++++ src/components/containers/PlotlyFold.js | 13 ++++++++++--- src/lib/connectTraceToPlot.js | 16 ++++++++++++++++ src/lib/constants.js | 1 + 4 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/EditorControls.js b/src/EditorControls.js index 0686f2c70..a94451152 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -289,6 +289,26 @@ class EditorControls extends Component { } break; + case EDITOR_ACTIONS.MOVE_TO: + // checking is fromIndex and toIndex is a number because just checking + // if not there will not work as index can be 0 and that value is falsy + if (payload.path && !isNaN(payload.fromIndex) && !isNaN(payload.toIndex)) { + if (payload.path === 'data') { + const a = graphDiv.data[payload.fromIndex]; + const b = graphDiv.data[payload.toIndex]; + graphDiv.data.splice(payload.toIndex, 1, a); + graphDiv.data.splice(payload.fromIndex, 1, b); + } + if (this.props.onUpdate) { + this.props.onUpdate( + graphDiv.data.slice(), + graphDiv.layout, + graphDiv._transitionData._frames + ); + } + } + break; + default: throw new Error(this.localize('must specify an action type to handleEditorUpdate')); } diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js index f13c5ad11..e8ce4d8f2 100644 --- a/src/components/containers/PlotlyFold.js +++ b/src/components/containers/PlotlyFold.js @@ -21,7 +21,7 @@ export class Fold extends Component { if (!this.foldVisible && !this.props.messageIfEmpty) { return null; } - const {deleteContainer} = this.context; + const {deleteContainer, moveContainer} = this.context; const { canDelete, children, @@ -79,7 +79,10 @@ export class Fold extends Component { onClick={e => { // prevents fold toggle to happen when clicking on moving arrow controls e.stopPropagation(); - alert('up'); + if (!moveContainer || typeof moveContainer !== 'function') { + throw new Error('moveContainer must be a function'); + } + moveContainer('up'); }} > {canMoveUp ? : null} @@ -89,7 +92,10 @@ export class Fold extends Component { onClick={e => { // prevents fold toggle to happen when clicking on moving arrow controls e.stopPropagation(); - alert('down'); + if (!moveContainer || typeof moveContainer !== 'function') { + throw new Error('moveContainer must be a function'); + } + moveContainer('down'); }} > {canMoveDown ? : null} @@ -205,6 +211,7 @@ PlotlyFold.plotly_editor_traits = { PlotlyFold.contextTypes = Object.assign( { deleteContainer: PropTypes.func, + moveContainer: PropTypes.func, }, containerConnectedContextTypes ); diff --git a/src/lib/connectTraceToPlot.js b/src/lib/connectTraceToPlot.js index d3420f40e..c4a72a45b 100644 --- a/src/lib/connectTraceToPlot.js +++ b/src/lib/connectTraceToPlot.js @@ -19,6 +19,7 @@ export default function connectTraceToPlot(WrappedComponent) { this.deleteTrace = this.deleteTrace.bind(this); this.updateTrace = this.updateTrace.bind(this); + this.moveTrace = this.moveTrace.bind(this); this.setLocals(props, context); } @@ -40,6 +41,7 @@ export default function connectTraceToPlot(WrappedComponent) { : plotly.PlotSchema.getTraceValObject(fullTrace, nestedProperty({}, attr).parts), updateContainer: this.updateTrace, deleteContainer: this.deleteTrace, + moveContainer: this.moveTrace, container: trace, fullContainer: fullTrace, traceIndexes: this.props.traceIndexes, @@ -178,6 +180,19 @@ export default function connectTraceToPlot(WrappedComponent) { } } + moveTrace(direction) { + const traceIndex = this.props.traceIndexes[0]; + const desiredIndex = direction === 'up' ? traceIndex - 1 : traceIndex + 1; + this.context.onUpdate({ + type: EDITOR_ACTIONS.MOVE_TO, + payload: { + fromIndex: traceIndex, + toIndex: desiredIndex, + path: 'data', + }, + }); + } + render() { return ; } @@ -206,6 +221,7 @@ export default function connectTraceToPlot(WrappedComponent) { container: PropTypes.object, fullContainer: PropTypes.object, traceIndexes: PropTypes.array, + moveContainer: PropTypes.func, }; const {plotly_editor_traits} = WrappedComponent; diff --git a/src/lib/constants.js b/src/lib/constants.js index 9f08e9fe4..8d31eb5ff 100644 --- a/src/lib/constants.js +++ b/src/lib/constants.js @@ -38,6 +38,7 @@ export const EDITOR_ACTIONS = { DELETE_IMAGE: 'plotly-editor-delete-image', DELETE_RANGESELECTOR: 'plotly-editor-delete-rangeselector', DELETE_TRANSFORM: 'plotly-editor-delete-transform', + MOVE_TO: 'plotly-editor-move-to', }; export const DEFAULT_FONTS = [ From decf4e54a0b366c1135b7fd4eee89566ad6ef031 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 11:08:40 -0400 Subject: [PATCH 04/10] always display moveUp/Down controls --- src/components/containers/PlotlyFold.js | 25 ++++++++++------- src/styles/components/containers/_fold.scss | 31 +++++++++++++++++++-- 2 files changed, 43 insertions(+), 13 deletions(-) diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js index e8ce4d8f2..e7a706877 100644 --- a/src/components/containers/PlotlyFold.js +++ b/src/components/containers/PlotlyFold.js @@ -75,30 +75,35 @@ export class Fold extends Component { const movingControls = (canMoveDown || canMoveUp) && (
{ // prevents fold toggle to happen when clicking on moving arrow controls e.stopPropagation(); - if (!moveContainer || typeof moveContainer !== 'function') { - throw new Error('moveContainer must be a function'); + + if (canMoveUp) { + if (!moveContainer || typeof moveContainer !== 'function') { + throw new Error('moveContainer must be a function'); + } + moveContainer('up'); } - moveContainer('up'); }} > - {canMoveUp ? : null} + { // prevents fold toggle to happen when clicking on moving arrow controls e.stopPropagation(); - if (!moveContainer || typeof moveContainer !== 'function') { - throw new Error('moveContainer must be a function'); + if (canMoveDown) { + if (!moveContainer || typeof moveContainer !== 'function') { + throw new Error('moveContainer must be a function'); + } + moveContainer('down'); } - moveContainer('down'); }} > - {canMoveDown ? : null} +
); diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss index fd749b071..187bd32ca 100644 --- a/src/styles/components/containers/_fold.scss +++ b/src/styles/components/containers/_fold.scss @@ -95,9 +95,6 @@ font-weight: bold; opacity: 0.75; } - svg:hover { - opacity: 1; - } &--up { height: 13px; @@ -107,6 +104,21 @@ transform: rotate(-180deg); transform-origin: center center; } + svg:hover { + opacity: 1; + } + &--disabled { + @extend .fold__top__moving-controls--up; + cursor: not-allowed; + svg { + transform: rotate(-180deg); + transform-origin: center center; + opacity: 0.3; + } + svg:hover { + opacity: 0.3; + } + } } &--down { @@ -114,6 +126,19 @@ width: 18px; display: block; margin-top: -2px; + svg:hover { + opacity: 1; + } + &--disabled { + @extend .fold__top__moving-controls--down; + cursor: not-allowed; + svg { + opacity: 0.3; + } + svg:hover { + opacity: 0.3; + } + } } } From cd95959bc4c32bd85635dd005858bd8e5d98d34a Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 12:03:18 -0400 Subject: [PATCH 05/10] don't need splice, just assign --- src/EditorControls.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/EditorControls.js b/src/EditorControls.js index a94451152..d4d11e18c 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -294,10 +294,10 @@ class EditorControls extends Component { // if not there will not work as index can be 0 and that value is falsy if (payload.path && !isNaN(payload.fromIndex) && !isNaN(payload.toIndex)) { if (payload.path === 'data') { - const a = graphDiv.data[payload.fromIndex]; - const b = graphDiv.data[payload.toIndex]; - graphDiv.data.splice(payload.toIndex, 1, a); - graphDiv.data.splice(payload.fromIndex, 1, b); + const traceMoved = graphDiv.data[payload.fromIndex]; + const traceReplaced = graphDiv.data[payload.toIndex]; + graphDiv.data[payload.toIndex] = traceMoved; + graphDiv.data[payload.fromIndex] = traceReplaced; } if (this.props.onUpdate) { this.props.onUpdate( From 6b00be8747f5853ab65ca2e4c139c028552d83aa Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 12:42:40 -0400 Subject: [PATCH 06/10] allow reordering of images --- src/EditorControls.js | 21 ++++++++++++++++----- src/components/containers/ImageAccordion.js | 5 +++-- src/default_panels/StyleImagesPanel.js | 2 +- src/lib/connectImageToLayout.js | 18 ++++++++++++++++++ 4 files changed, 38 insertions(+), 8 deletions(-) diff --git a/src/EditorControls.js b/src/EditorControls.js index d4d11e18c..ce593c0e3 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -299,12 +299,23 @@ class EditorControls extends Component { graphDiv.data[payload.toIndex] = traceMoved; graphDiv.data[payload.fromIndex] = traceReplaced; } + + if (payload.path === 'layout.images') { + const imageMoved = graphDiv.layout.images[payload.fromIndex]; + const imageReplaced = graphDiv.layout.images[payload.toIndex]; + graphDiv.layout.images[payload.toIndex] = imageMoved; + graphDiv.layout.images[payload.fromIndex] = imageReplaced; + } + + const updatedData = payload.path.startsWith('data') + ? graphDiv.data.slice() + : graphDiv.data; + const updatedLayout = payload.path.startsWith('layout') + ? Object.assign({}, graphDiv.layout) + : graphDiv.layout; + if (this.props.onUpdate) { - this.props.onUpdate( - graphDiv.data.slice(), - graphDiv.layout, - graphDiv._transitionData._frames - ); + this.props.onUpdate(updatedData, updatedLayout, graphDiv._transitionData._frames); } } break; diff --git a/src/components/containers/ImageAccordion.js b/src/components/containers/ImageAccordion.js index e9a9c488c..329e9f882 100644 --- a/src/components/containers/ImageAccordion.js +++ b/src/components/containers/ImageAccordion.js @@ -13,7 +13,7 @@ class ImageAccordion extends Component { layout: {images = []}, localize: _, } = this.context; - const {canAdd, children} = this.props; + const {canAdd, children, canReorder} = this.props; const content = images.length && @@ -48,7 +48,7 @@ class ImageAccordion extends Component { }; return ( - + {content ? ( content ) : ( @@ -74,6 +74,7 @@ ImageAccordion.contextTypes = { ImageAccordion.propTypes = { children: PropTypes.node, canAdd: PropTypes.bool, + canReorder: PropTypes.bool, }; export default ImageAccordion; diff --git a/src/default_panels/StyleImagesPanel.js b/src/default_panels/StyleImagesPanel.js index e7feae8be..71543ded8 100644 --- a/src/default_panels/StyleImagesPanel.js +++ b/src/default_panels/StyleImagesPanel.js @@ -11,7 +11,7 @@ import { } from '../components'; const StyleImagesPanel = (props, {localize: _}) => ( - + ; } @@ -83,6 +100,7 @@ export default function connectImageToLayout(WrappedComponent) { container: PropTypes.object, fullContainer: PropTypes.object, getValObject: PropTypes.func, + moveContainer: PropTypes.func, }; const {plotly_editor_traits} = WrappedComponent; From ceb0f0681ec61fe21627ddaf91c5506fd3986513 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 12:57:25 -0400 Subject: [PATCH 07/10] allow reordering of shapes --- src/EditorControls.js | 21 +++++++++++++-------- src/components/containers/ShapeAccordion.js | 5 +++-- src/default_panels/StyleShapesPanel.js | 2 +- src/lib/connectShapeToLayout.js | 18 ++++++++++++++++++ 4 files changed, 35 insertions(+), 11 deletions(-) diff --git a/src/EditorControls.js b/src/EditorControls.js index ce593c0e3..4d4ead37d 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -293,18 +293,23 @@ class EditorControls extends Component { // checking is fromIndex and toIndex is a number because just checking // if not there will not work as index can be 0 and that value is falsy if (payload.path && !isNaN(payload.fromIndex) && !isNaN(payload.toIndex)) { + function move(container) { + const movedEl = container[payload.fromIndex]; + const replacedEl = container[payload.toIndex]; + container[payload.toIndex] = movedEl; + container[payload.fromIndex] = replacedEl; + } + if (payload.path === 'data') { - const traceMoved = graphDiv.data[payload.fromIndex]; - const traceReplaced = graphDiv.data[payload.toIndex]; - graphDiv.data[payload.toIndex] = traceMoved; - graphDiv.data[payload.fromIndex] = traceReplaced; + move(graphDiv.data); } if (payload.path === 'layout.images') { - const imageMoved = graphDiv.layout.images[payload.fromIndex]; - const imageReplaced = graphDiv.layout.images[payload.toIndex]; - graphDiv.layout.images[payload.toIndex] = imageMoved; - graphDiv.layout.images[payload.fromIndex] = imageReplaced; + move(graphDiv.layout.images); + } + + if (payload.path === 'layout.shapes') { + move(graphDiv.layout.shapes); } const updatedData = payload.path.startsWith('data') diff --git a/src/components/containers/ShapeAccordion.js b/src/components/containers/ShapeAccordion.js index a321eb643..711fdb3c5 100644 --- a/src/components/containers/ShapeAccordion.js +++ b/src/components/containers/ShapeAccordion.js @@ -14,7 +14,7 @@ class ShapeAccordion extends Component { layout: {shapes = []}, localize: _, } = this.context; - const {canAdd, children} = this.props; + const {canAdd, children, canReorder} = this.props; const content = shapes.length && @@ -48,7 +48,7 @@ class ShapeAccordion extends Component { }; return ( - + {content ? ( content ) : ( @@ -74,6 +74,7 @@ ShapeAccordion.contextTypes = { ShapeAccordion.propTypes = { children: PropTypes.node, canAdd: PropTypes.bool, + canReorder: PropTypes.bool, }; export default ShapeAccordion; diff --git a/src/default_panels/StyleShapesPanel.js b/src/default_panels/StyleShapesPanel.js index ff6ca1335..9d671dcfc 100644 --- a/src/default_panels/StyleShapesPanel.js +++ b/src/default_panels/StyleShapesPanel.js @@ -13,7 +13,7 @@ import { } from '../components'; const StyleShapesPanel = (props, {localize: _}) => ( - + ; } @@ -83,6 +100,7 @@ export default function connectShapeToLayout(WrappedComponent) { container: PropTypes.object, fullContainer: PropTypes.object, getValObject: PropTypes.func, + moveContainer: PropTypes.func, }; const {plotly_editor_traits} = WrappedComponent; From f9e1bb2ea590974f3b26afe88ad464d2766c2159 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 13:06:59 -0400 Subject: [PATCH 08/10] allow reordering of annotations --- src/EditorControls.js | 4 ++++ .../containers/AnnotationAccordion.js | 5 +++-- src/default_panels/StyleNotesPanel.js | 2 +- src/lib/connectAnnotationToLayout.js | 18 ++++++++++++++++++ 4 files changed, 26 insertions(+), 3 deletions(-) diff --git a/src/EditorControls.js b/src/EditorControls.js index 4d4ead37d..e995ef471 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -312,6 +312,10 @@ class EditorControls extends Component { move(graphDiv.layout.shapes); } + if (payload.path === 'layout.annotations') { + move(graphDiv.layout.annotations); + } + const updatedData = payload.path.startsWith('data') ? graphDiv.data.slice() : graphDiv.data; diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js index 6b8a69303..0ce03d26d 100644 --- a/src/components/containers/AnnotationAccordion.js +++ b/src/components/containers/AnnotationAccordion.js @@ -13,7 +13,7 @@ class AnnotationAccordion extends Component { layout: {annotations = [], meta = []}, localize: _, } = this.context; - const {canAdd, children} = this.props; + const {canAdd, children, canReorder} = this.props; const content = annotations.length && @@ -50,7 +50,7 @@ class AnnotationAccordion extends Component { }; return ( - + {content ? ( content ) : ( @@ -76,6 +76,7 @@ AnnotationAccordion.contextTypes = { AnnotationAccordion.propTypes = { children: PropTypes.node, canAdd: PropTypes.bool, + canReorder: PropTypes.bool, }; export default AnnotationAccordion; diff --git a/src/default_panels/StyleNotesPanel.js b/src/default_panels/StyleNotesPanel.js index c2f6faf6e..4d31eed63 100644 --- a/src/default_panels/StyleNotesPanel.js +++ b/src/default_panels/StyleNotesPanel.js @@ -17,7 +17,7 @@ import { } from '../components'; const StyleNotesPanel = (props, {localize: _}) => ( - + diff --git a/src/lib/connectAnnotationToLayout.js b/src/lib/connectAnnotationToLayout.js index ea3f282be..46c3aabcf 100644 --- a/src/lib/connectAnnotationToLayout.js +++ b/src/lib/connectAnnotationToLayout.js @@ -10,6 +10,7 @@ export default function connectAnnotationToLayout(WrappedComponent) { this.deleteAnnotation = this.deleteAnnotation.bind(this); this.updateAnnotation = this.updateAnnotation.bind(this); + this.moveAnnotation = this.moveAnnotation.bind(this); this.setLocals(props, context); } @@ -35,6 +36,7 @@ export default function connectAnnotationToLayout(WrappedComponent) { deleteContainer: this.deleteAnnotation, container: this.container, fullContainer: this.fullContainer, + moveContainer: this.moveAnnotation, }; } @@ -57,6 +59,21 @@ export default function connectAnnotationToLayout(WrappedComponent) { } } + moveAnnotation(direction) { + if (this.context.onUpdate) { + const annotationIndex = this.props.annotationIndex; + const desiredIndex = direction === 'up' ? annotationIndex - 1 : annotationIndex + 1; + this.context.onUpdate({ + type: EDITOR_ACTIONS.MOVE_TO, + payload: { + fromIndex: annotationIndex, + toIndex: desiredIndex, + path: 'layout.annotations', + }, + }); + } + } + render() { return ; } @@ -85,6 +102,7 @@ export default function connectAnnotationToLayout(WrappedComponent) { container: PropTypes.object, fullContainer: PropTypes.object, getValObject: PropTypes.func, + moveContainer: PropTypes.func, }; const {plotly_editor_traits} = WrappedComponent; From d4b470ff0d80c795f3d6fa01517f3bebc249fc55 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 14:00:37 -0400 Subject: [PATCH 09/10] comment adjustment --- src/EditorControls.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/EditorControls.js b/src/EditorControls.js index e995ef471..204ca4a9e 100644 --- a/src/EditorControls.js +++ b/src/EditorControls.js @@ -290,8 +290,8 @@ class EditorControls extends Component { break; case EDITOR_ACTIONS.MOVE_TO: - // checking is fromIndex and toIndex is a number because just checking - // if not there will not work as index can be 0 and that value is falsy + // checking if fromIndex and toIndex is a number because + // gives errors if index is 0 (falsy value) if (payload.path && !isNaN(payload.fromIndex) && !isNaN(payload.toIndex)) { function move(container) { const movedEl = container[payload.fromIndex]; From f7505a614aacba9913e7e1bfcc17efd0f4be15c2 Mon Sep 17 00:00:00 2001 From: Vera Zabeida Date: Wed, 10 Apr 2019 14:46:42 -0400 Subject: [PATCH 10/10] remove cursor not allowed --- src/styles/components/containers/_fold.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/styles/components/containers/_fold.scss b/src/styles/components/containers/_fold.scss index 187bd32ca..5876e41b5 100644 --- a/src/styles/components/containers/_fold.scss +++ b/src/styles/components/containers/_fold.scss @@ -109,7 +109,6 @@ } &--disabled { @extend .fold__top__moving-controls--up; - cursor: not-allowed; svg { transform: rotate(-180deg); transform-origin: center center; @@ -131,7 +130,6 @@ } &--disabled { @extend .fold__top__moving-controls--down; - cursor: not-allowed; svg { opacity: 0.3; }