fix drag/sort bug with tile order

3 files changed, 16 insertions, 5 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 2c857da..37e23a7 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -250,7 +250,6 @@ const TileHandle = ({ tile, bounds, box, onMouseDown, onDoubleClick }) => {
       style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
       style.backgroundColor = tile.settings.background_color || 'transparent'
       style.color = tile.settings.font_color || '#dddddd!important'
-      style.padding = '0.25rem'
       break
   }
   return (
diff --git a/frontend/views/page/components/tile.list.js b/frontend/views/page/components/tile.list.js
index d6e5366..5e87cb6 100644
--- a/frontend/views/page/components/tile.list.js
+++ b/frontend/views/page/components/tile.list.js
@@ -13,7 +13,6 @@ const DOUBLE_CLICK_THRESHOLD = 250
 class TileList extends Component {
   state = {
     tiles: [],
-    didDoubleClick: false,
     lastTargetId: 0,
     lastTimeStamp: 0,
   }
@@ -27,12 +26,22 @@ class TileList extends Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
-    const { tiles, didDoubleClick } = this.state
+    if (this.didDoubleClick) return
+    const { tiles } = this.state
     if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
       this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
     }
-    if (didDoubleClick) {
-      this.setState({ didDoubleClick: false })
+    // since we store the full tiles here (reversed!), they might change from under us
+    // potentially later refactor to only use a sort order / lookup
+    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
+      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, {})
+      const newTiles = this.state.tiles.map(tile => {
+        return tileLookup[tile.id]
+      })
+      this.setState({ tiles: newTiles })
     }
   }
 
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 9e84d51..4bc98f4 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -16,6 +16,9 @@
 .tile.text {
   display: block;
   white-space: break-spaces;
+  padding: 0.25rem;
+  user-select: none;
+  cursor: arrow;
 }
 
 .tile.top_left { top: 0; left: 0; }