displaying custom cursors on the frontend

1 files changed, 12 insertions, 1 deletions

diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index a3e8513..cd61932 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -24,6 +24,7 @@ const defaultState = {
     w: 0, h: 0,
   },
   tile: null,
+  cursors: {},
 }
 
 class PageEditor extends Component {
@@ -62,7 +63,15 @@ class PageEditor extends Component {
     document.body.addEventListener('mouseup', this.handleMouseUp)
     window.addEventListener('resize', this.handleWindowResize)
     const bounds = this.getBoundingClientRect()
-    this.setState({ bounds })
+
+    let cursors = this.props.graph.show.res.uploads
+      .filter(upload => upload.tag === 'cursor')
+      .reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, {})
+
+    this.setState({ bounds, cursors })
   }
 
   componentDidUpdate(prevProps) {
@@ -196,6 +205,7 @@ class PageEditor extends Component {
               tile={tile}
               bounds={this.state.bounds}
               videoBounds={videoBounds}
+              cursors={this.state.cursors}
               box={currentTile && tile.id === currentTile.id && currentBox}
               onMouseDown={e => this.handleMouseDown(e, tile)}
               onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
@@ -210,6 +220,7 @@ class PageEditor extends Component {
             tile={temporaryTile}
             bounds={this.state.bounds}
             videoBounds={videoBounds}
+            cursors={this.state.cursors}
             box={currentTile && temporaryTile.id === currentTile.id && currentBox}
             onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
             onMouseEnter={e => {}}