hang temporary tile off main state so tileform can be updated when we drag something

1 files changed, 38 insertions, 25 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 92ca750..dbf0be9 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -6,6 +6,7 @@ import { connect } from 'react-redux'
 import { session } from '../../../session'
 import actions from '../../../actions'
 import * as pageActions from '../page.actions'
+import * as tileActions from '../../tile/tile.actions'
 
 import { Loader } from '../../../common'
 import { clamp } from '../../../util'
@@ -69,29 +70,29 @@ class PageEditor extends Component {
     this.setState({ bounds: this.getBoundingClientRect() })
   }
 
-  handleMouseDown(e, page) {
+  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 } = page.settings
-    x = clamp(x, 0, 1)
-    y = clamp(y, 0, 1)
+    // 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({
-      page,
+      tile,
       draggingBox: true,
       bounds,
       mouseX,
       mouseY,
       box: {
         dx: 0, dy: 0,
-        x, y,
-        w, h,
+        // x, y,
+        // w, h,
       },
       initialBox: {
-        x, y,
-        w, h,
+        // x, y,
+        // w, h,
       }
     })
   }
@@ -104,14 +105,14 @@ class PageEditor extends Component {
     if (draggingBox) {
       e.preventDefault()
       let { x, y, w, h } = initialBox
-      let dx = (e.pageX - mouseX) / bounds.width
-      let dy = (e.pageY - mouseY) / bounds.height
+      let dx = (e.pageX - mouseX)
+      let dy = (e.pageY - mouseY)
       this.setState({
         box: {
           dx, dy,
-          x: clamp(x + dx, 0, 1.0 - w),
-          y: clamp(y + dy, 0, 1.0 - h),
-          w, h,
+          // x: clamp(x + (dx / bounds.width), 0, 1.0 - w),
+          // y: clamp(y + (dy / bounds.height), 0, 1.0 - h),
+          // w, h,
         }
       })
     }
@@ -119,10 +120,11 @@ class PageEditor extends Component {
 
   handleMouseUp(e) {
     // const { actions } = this.props
-    const { dragging, draggingBox, bounds, box, page } = this.state
+    const { dragging, draggingBox, bounds, box, tile } = this.state
     if (!dragging && !draggingBox) return
     e.preventDefault()
-    const { x, y, w, h } = box
+    // const { x, y, w, h } = box
+    const { dx, dy } = box
     let url = window.location.pathname
     this.setState({
       page: null,
@@ -132,19 +134,26 @@ class PageEditor extends Component {
       draggingBox: false,
     })
     // console.log(page)
+    if (dx + dy < 2) {
+      return
+    }
     const updatedTile = {
       ...tile,
       settings: {
         ...tile.settings,
-        x, y,
+        x: tile.settings.x + dx,
+        y: tile.settings.y + dy,
       }
     }
-    this.props.pageActions.updatePageTile(updatedTile)
-    actions.tile.update(updatedTile)
+    if (tile.id === 'new') {
+      this.props.tileActions.updateTemporaryTile(updatedTile)
+    } else {
+      this.props.pageActions.updatePageTile(updatedTile)
+      actions.tile.update(updatedTile)
+    }
   }
 
   render(){
-    // console.log(this.props.page.show.res)
     if (!this.state.bounds) {
       return (
         <div className='page' ref={this.pageRef} />
@@ -154,7 +163,6 @@ class PageEditor extends Component {
     const currentTile = this.state.tile
     const currentBox = this.state.box
     const { res } = this.props.page.show
-    // console.log(res.tiles)
     return (    
       <div className='page' ref={this.pageRef}>
         {res.tiles.map(tile => {
@@ -189,7 +197,7 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
   // console.log(tile)
   const { width, height } = tile.settings
   const style = {
-    transform: generateTransform(tile),
+    transform: generateTransform(tile, box),
   }
   // console.log(generateTransform(tile))
   let content;
@@ -226,11 +234,15 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
   )
 }
 
-const generateTransform = tile => {
+const generateTransform = (tile, box) => {
   const { x, y, align, rotation, scale, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
   }
+  if (box) {
+    x += box.dx
+    y += box.dy
+  }
   const [yalign, xalign] = align.split('_')
   let transform = ['translateZ(0)']
   if (yalign === 'center') {
@@ -260,6 +272,7 @@ const mapStateToProps = state => ({
 
 const mapDispatchToProps = dispatch => ({
   pageActions: bindActionCreators({ ...pageActions }, dispatch),
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(PageEditor)