refactor to use app-rooted js imports

1 files changed, 215 insertions, 0 deletions

diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
new file mode 100644
index 0000000..d324874
--- /dev/null
+++ b/frontend/app/views/page/components/page.editor.js
@@ -0,0 +1,215 @@
+import React, { Component } from 'react'
+import { Route } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { session } from 'app/session'
+import actions from 'app/actions'
+import * as pageActions from '../page.actions'
+import * as tileActions from '../../tile/tile.actions'
+
+import { Loader } from 'app/common'
+import { clamp, dist } from 'app/utils'
+
+import TileHandle from './tile.handle'
+
+const defaultState = {
+  dragging: false,
+  bounds: null,
+  mouseX: 0,
+  mouseY: 0,
+  box: {
+    x: 0, y: 0,
+    w: 0, h: 0,
+  },
+  tile: null,
+}
+
+class PageEditor extends Component {
+  state = {
+    ...defaultState,
+  }
+
+  constructor() {
+    super()
+    // bind these events in the constructor, so we can remove event listeners later
+    this.handleMouseDown = this.handleMouseDown.bind(this)
+    this.handleMouseMove = this.handleMouseMove.bind(this)
+    this.handleMouseUp = this.handleMouseUp.bind(this)
+    this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.pageRef = React.createRef()
+  }
+
+  getBoundingClientRect() {
+    if (!this.pageRef.current) return null
+    const rect = this.pageRef.current.getBoundingClientRect()
+    const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop
+    const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft
+    const bounds = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft,
+      width: rect.width,
+      height: rect.height,
+    }
+    // console.log(bounds)
+    return bounds
+  }
+
+  componentDidMount() {
+    document.body.addEventListener('mousemove', this.handleMouseMove)
+    document.body.addEventListener('mouseup', this.handleMouseUp)
+    window.addEventListener('resize', this.handleWindowResize)
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.state.bounds) {
+      this.setState({ bounds: this.getBoundingClientRect() })
+    }
+  }
+
+  handleWindowResize() {
+    this.setState({ bounds: this.getBoundingClientRect() })
+  }
+
+  handleMouseDown(e, tile) {
+    const bounds = this.getBoundingClientRect()
+    const mouseX = e.pageX
+    const mouseY = e.pageY
+    // let w = 128 / bounds.width
+    // let h = 16 / bounds.height
+    let { x, y } = tile.settings
+    // x = clamp(x, 0, 1)
+    // y = clamp(y, 0, 1)
+    this.setState({
+      tile,
+      draggingBox: true,
+      bounds,
+      mouseX,
+      mouseY,
+      box: {
+        dx: 0, dy: 0,
+        // x, y,
+        // w, h,
+      },
+      initialBox: {
+        // x, y,
+        // w, h,
+      }
+    })
+  }
+
+  handleMouseMove(e) {
+    const {
+      dragging, draggingBox,
+      bounds, mouseX, mouseY, initialBox, box
+    } = this.state
+    if (draggingBox) {
+      e.preventDefault()
+      let { x, y, w, h } = initialBox
+      let dx = (e.pageX - mouseX)
+      let dy = (e.pageY - mouseY)
+      this.setState({
+        box: {
+          dx, dy,
+          // x: clamp(x + (dx / bounds.width), 0, 1.0 - w),
+          // y: clamp(y + (dy / bounds.height), 0, 1.0 - h),
+          // w, h,
+        }
+      })
+    }
+  }
+
+  handleMouseUp(e) {
+    // const { actions } = this.props
+    const { temporaryTile } = this.props
+    const { dragging, draggingBox, bounds, box, tile } = this.state
+    if (!dragging && !draggingBox) return
+    e.preventDefault()
+    // const { x, y, w, h } = box
+    const { dx, dy } = box
+    let url = window.location.pathname
+    this.setState({
+      page: null,
+      box: null,
+      initialBox: null,
+      dragging: false,
+      draggingBox: false,
+    })
+    // console.log(page)
+    if (dist(0, 0, dx, dy) < 2) {
+      return
+    }
+    const updatedTile = {
+      ...tile,
+      settings: {
+        ...tile.settings,
+        x: tile.settings.x + dx,
+        y: tile.settings.y + dy,
+      }
+    }
+    if (temporaryTile && tile.id === temporaryTile.id) {
+      this.props.tileActions.updateTemporaryTile(updatedTile)
+    }
+    if (tile.id !== 'new') {
+      console.log(updatedTile)
+      this.props.pageActions.updatePageTile(updatedTile)
+      actions.tile.update(updatedTile)
+    }
+  }
+
+  render(){
+    if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) {
+      return (
+        <div className='page' ref={this.pageRef} />
+      )
+    }
+    const { temporaryTile } = this.props
+    const currentTile = this.state.tile
+    const currentBox = this.state.box
+    const { res } = this.props.page.show
+    const { settings } = res
+    const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    return (
+      <div className='page' ref={this.pageRef} style={pageStyle}>
+        {res.tiles.map(tile => {
+          if (temporaryTile && temporaryTile.id === tile.id) {
+            tile = temporaryTile
+          }
+          return (
+            <TileHandle
+              key={tile.id}
+              tile={tile}
+              bounds={this.state.bounds}
+              box={currentTile && tile.id === currentTile.id && currentBox}
+              onMouseDown={e => this.handleMouseDown(e, tile)}
+              onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
+            />
+          )
+        })}
+        {!!(temporaryTile && temporaryTile.id === 'new') && (
+          <TileHandle
+            key={temporaryTile.id}
+            tile={temporaryTile}
+            bounds={this.state.bounds}
+            box={currentTile && temporaryTile.id === currentTile.id && currentBox}
+            onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
+          />
+        )}
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  temporaryTile: state.tile.temporaryTile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(PageEditor)