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

3 files changed, 98 insertions, 100 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)
diff --git a/frontend/views/page/components/page.header.js b/frontend/views/page/components/page.header.js
index 3eff339..4170f8b 100644
--- a/frontend/views/page/components/page.header.js
+++ b/frontend/views/page/components/page.header.js
@@ -12,7 +12,7 @@ function PageHeader(props) {
         <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo"><b>{props.site.siteTitle}</b></Link>
       </div>
       <div>
-        <button onClick={() => props.pageActions.showAddTileForm()}>+ Add tile</button>
+        <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
       </div>
     </header>
   )
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index def9062..e5eb14d 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -66,7 +66,6 @@ class TileForm extends Component {
   state = {
     title: "",
     submitTitle: "",
-    data: { ...newText() },
     errorFields: new Set([]),
   }
 
@@ -78,108 +77,90 @@ class TileForm extends Component {
       title,
       submitTitle,
       errorFields: new Set([]),
-      data: { 
-        ...(this.props.data || this.state.data),
-        graph_id: graph.id,
-        page_id: page.id,
-      },
-    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
+    })
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.data,
+      graph_id: graph.id,
+      page_id: page.id,
+    })
   }
 
   handleChange(e) {
-    const { errorFields } = this.state
     const { name, value } = e.target
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        [name]: value,
-      }
-    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.data,
+      [name]: value,
+    })
   }
 
   handleTypeChange(type) {
     const { graph, page } = this.props
-    const { errorFields, data } = this.state
-    let newData;
+    const { data } = this.state
+    let tileReferences = {
+      id: data.id,
+      graph_id: data.graph_id,
+      page_id: data.page_id,
+    }
     switch(type) {
       case 'image':
-        newData = newImage({
-          id: data.id,
-          graph_id: data.graph_id,
-          page_id: data.page_id,
-        })
+        newData = newImage(tileReferences)
         newData.settings.align = data.settings.align
         break
       case 'text':
-        newData = newText({
-          id: data.id,
-          graph_id: data.graph_id,
-          page_id: data.page_id,
-        })
+        newData = newText(tileReferences)
         newData.settings.align = data.settings.align
         break
     }
-    console.log(">>>>>>", newData)
-    this.setState({
-      errorFields,
-      data: newData,
-    }, () => this.props.tileActions.updateTemporaryTile(newData))
+    this.setState({ errorFields: new Set([]) })
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
   }
 
   handleSettingsChange(e) {
-    const { errorFields } = this.state
     const { name, value } = e.target
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        settings: {
-          ...this.state.data.settings,
-          [name]: value,
-        }
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
       }
-    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
+    })
   }
 
   handleSelect(name, value) {
-    const { errorFields } = this.state
-    if (errorFields.has(name)) {
-      errorFields.delete(name)
-    }
+    this.clearErrorField(name)
     if (name === 'type') {
       return this.handleTypeChange(value)
     }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleSettingsSelect(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
         [name]: value,
       }
-    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
+    })
   }
 
-  handleSettingsSelect(name, value) {
+  clearErrorField(name) {
     const { errorFields } = this.state
     if (errorFields.has(name)) {
       errorFields.delete(name)
+      this.setState({
+        errorFields,
+      })
     }
-    this.setState({
-      errorFields,
-      data: {
-        ...this.state.data,
-        settings: {
-          ...this.state.data.settings,
-          [name]: value,
-        }
-      }
-    }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
   handleSubmit(e) {
@@ -206,8 +187,8 @@ class TileForm extends Component {
   }
 
   render() {
-    const { isNew } = this.props
-    const { title, submitTitle, errorFields, data } = this.state
+    const { temporaryTile: data, isNew } = this.props
+    const { title, submitTitle, errorFields } = this.state
     if (!data) return
     return (
       <div className='box'>
@@ -245,7 +226,7 @@ class TileForm extends Component {
           {!!errorFields.size &&
             <label>
               <span></span>
-              <span>Please complete the required fields =)</span>
+              <span>Please add the required fields =)</span>
             </label>
           }
         </form>
@@ -254,7 +235,8 @@ class TileForm extends Component {
   }
 
   renderPositionInfo() {
-    const { x, y, width, height, rotation, scale } = this.state.data.settings
+    const { temporaryTile: data } = this.props
+    const { x, y, width, height, rotation, scale } = data.settings
     // console.log(this.state.data.settings)
     return (
       <div className='position'>
@@ -269,7 +251,8 @@ class TileForm extends Component {
 
   renderImageForm() {
     // const { isNew } = this.props
-    const { errorFields, data } = this.state
+    const { temporaryTile: data } = this.props
+    const { errorFields } = this.state
     return (
       <div>
         <TextInput
@@ -295,7 +278,8 @@ class TileForm extends Component {
   }
 
   renderTextForm() {
-    const { errorFields, data } = this.state
+    const { temporaryTile: data } = this.props
+    const { errorFields } = this.state
     return (
       <div>
         <TextArea
@@ -338,6 +322,7 @@ const mapStateToProps = state => ({
   graph: state.graph,
   page: state.page,
   tile: state.tile,
+  temporaryTile: state.tile.temporaryTile,
 })
 
 const mapDispatchToProps = dispatch => ({