saving nodes!!

5 files changed, 111 insertions, 71 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index dbf0be9..a806dc0 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -9,7 +9,7 @@ import * as pageActions from '../page.actions'
 import * as tileActions from '../../tile/tile.actions'
 
 import { Loader } from '../../../common'
-import { clamp } from '../../../util'
+import { clamp, dist } from '../../../util'
 
 const defaultState = {
   dragging: false,
@@ -134,7 +134,7 @@ class PageEditor extends Component {
       draggingBox: false,
     })
     // console.log(page)
-    if (dx + dy < 2) {
+    if (dist(0, 0, dx, dy) < 2) {
       return
     }
     const updatedTile = {
@@ -184,7 +184,7 @@ class PageEditor extends Component {
             key={temporaryTile.id}
             tile={temporaryTile}
             bounds={this.state.bounds}
-            box={currentTile && tile.id === currentTile.id && currentBox}
+            box={currentTile && temporaryTile.id === currentTile.id && currentBox}
             onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
           />
         )}
@@ -235,7 +235,7 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
 }
 
 const generateTransform = (tile, box) => {
-  const { x, y, align, rotation, scale, is_tiled } = tile.settings
+  let { x, y, align, rotation, scale, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
   }
diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js
index c2e3126..db85061 100644
--- a/frontend/views/page/components/tile.edit.js
+++ b/frontend/views/page/components/tile.edit.js
@@ -35,7 +35,7 @@ class TileEdit extends Component {
     }
     return (
       <TileForm
-        data={show.res}
+        initialData={show.res}
         graph={this.props.graph.show.res}
         page={this.props.page.show.res}
         onSubmit={this.handleSubmit.bind(this)}
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index e5eb14d..31d49e3 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -6,6 +6,7 @@ import { Link } from 'react-router-dom'
 import { session } from '../../../session'
 
 import { TextInput, NumberInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common'
+import { preloadImage } from '../../../util'
 
 import * as tileActions from '../../tile/tile.actions'
 
@@ -30,20 +31,20 @@ const REQUIRED_KEYS = {
 }
 
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
+// https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
 
 const newImage = (data) => ({
-  id: 'new',
   settings: {
     ...newPosition(),
     is_tiled: false,
-    url: "https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg",
+    url: "",
   },
   type: 'image',
+  target_page_id: null,
   ...data,
 })
 
 const newText = (data) => ({
-  id: 'new',
   settings: {
     ...newPosition(),
     content: "What is up... I have no idea actually",
@@ -52,6 +53,7 @@ const newText = (data) => ({
     height: 0,
   },
   type: 'text',
+  target_page_id: null,
   ...data,
 })
 
@@ -62,6 +64,11 @@ const newPosition = () => ({
   align: "center_center",
 })
 
+const TYPE_CONSTRUCTORS = {
+  image: newImage,
+  text: newText,
+}
+
 class TileForm extends Component {
   state = {
     title: "",
@@ -70,7 +77,7 @@ class TileForm extends Component {
   }
 
   componentDidMount() {
-    const { graph, page, isNew } = this.props
+    const { graph, page, isNew, initialData } = this.props
     const title = isNew ? 'new tile' : 'editing tile'
     const submitTitle = isNew ? "Create Tile" : "Save Changes"
     this.setState({
@@ -78,45 +85,36 @@ class TileForm extends Component {
       submitTitle,
       errorFields: new Set([]),
     })
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.data,
-      graph_id: graph.id,
-      page_id: page.id,
-    })
+    if (isNew) {
+      this.props.tileActions.updateTemporaryTile(newImage({
+        id: "new",
+        graph_id: graph.show.res.id,
+        page_id: page.show.res.id,
+      }))
+    } else {
+      this.props.tileActions.updateTemporaryTile({ ...initialData })
+    }
   }
 
   handleChange(e) {
     const { name, value } = e.target
     this.clearErrorField(name)
     this.props.tileActions.updateTemporaryTile({
-      ...this.props.data,
+      ...this.props.temporaryTile,
       [name]: value,
     })
   }
 
   handleTypeChange(type) {
-    const { graph, page } = this.props
-    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(tileReferences)
-        newData.settings.align = data.settings.align
-        break
-      case 'text':
-        newData = newText(tileReferences)
-        newData.settings.align = data.settings.align
-        break
-    }
-    this.setState({ errorFields: new Set([]) })
-    this.props.tileActions.updateTemporaryTile({
-      ...this.props.temporaryTile,
-      [name]: value,
+    const { graph, page, temporaryTile } = this.props
+    let newTile = TYPE_CONSTRUCTORS[type]({
+      id: temporaryTile.id,
+      graph_id: temporaryTile.graph_id,
+      page_id: temporaryTile.page_id,
     })
+    newTile.settings.align = temporaryTile.settings.align
+    this.setState({ errorFields: new Set([]) })
+    this.props.tileActions.updateTemporaryTile(newTile)
   }
 
   handleSettingsChange(e) {
@@ -153,6 +151,36 @@ class TileForm extends Component {
     })
   }
 
+  handleAlignment(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+        x: 0, y: 0,
+      }
+    })
+  }
+
+  handleImageChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+    preloadImage(value).then(img => {
+      console.log(img)
+      this.props.tileActions.updateTemporaryTile({
+        ...this.props.temporaryTile,
+        settings: {
+          ...this.props.temporaryTile.settings,
+          [name]: value,
+          width: img.naturalWidth,
+          height: img.naturalHeight,
+          x: 0, y: 0,
+        }
+      })
+    })
+  }
+
   clearErrorField(name) {
     const { errorFields } = this.state
     if (errorFields.has(name)) {
@@ -165,12 +193,11 @@ class TileForm extends Component {
 
   handleSubmit(e) {
     e.preventDefault()
-    const { isNew, onSubmit } = this.props
-    const { data } = this.state
-    const requiredKeys = REQUIRED_KEYS[data.type]
-    const validKeys = "graph_id username settings".split(" ")
-    const validData = validKeys.reduce((a,b) => { a[b] = data[b]; return a }, {})
-    const errorFields = requiredKeys.filter(key => !validData[key])
+    const { isNew, temporaryTile, onSubmit } = this.props
+    const requiredSettings = REQUIRED_KEYS[temporaryTile.type]
+    const validKeys = "id graph_id page_id target_page_id type settings".split(" ")
+    const validData = validKeys.reduce((a,b) => { a[b] = temporaryTile[b]; return a }, {})
+    const errorFields = requiredSettings.filter(key => !validData.settings[key])
     if (errorFields.length) {
       console.log('error', errorFields, validData)
       this.setState({ errorFields: new Set(errorFields) })
@@ -178,8 +205,9 @@ class TileForm extends Component {
       if (isNew) {
         // side effect: set username if we're creating a new tile
         // session.set('username', data.username)
+        delete validData.id
       } else {
-        validData.id = data.id
+        validData.id = temporaryTile.id
       }
       console.log('submit', validData)
       onSubmit(validData)
@@ -187,9 +215,9 @@ class TileForm extends Component {
   }
 
   render() {
-    const { temporaryTile: data, isNew } = this.props
+    const { temporaryTile, isNew } = this.props
     const { title, submitTitle, errorFields } = this.state
-    if (!data) return
+    if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
     return (
       <div className='box'>
         <h1>{title}</h1>
@@ -197,25 +225,25 @@ class TileForm extends Component {
           <div className="row selects">
             <Select
               name='type'
-              selected={data.type}
+              selected={temporaryTile.type}
               options={SELECT_TYPES}
               title=''
               onChange={this.handleSelect.bind(this)}
             />
             <Select
               name='align'
-              selected={data.settings.align}
+              selected={temporaryTile.settings.align}
               options={ALIGNMENTS}
               title=''
-              onChange={this.handleSettingsSelect.bind(this)}
+              onChange={this.handleAlignment.bind(this)}
             />
           </div>
 
           {this.renderPositionInfo()}
 
-          {data.type === 'image'
+          {temporaryTile.type === 'image'
             ? this.renderImageForm()
-          : data.type === 'text'
+          : temporaryTile.type === 'text'
             ? this.renderTextForm()
           : ""}
 
@@ -235,23 +263,22 @@ class TileForm extends Component {
   }
 
   renderPositionInfo() {
-    const { temporaryTile: data } = this.props
-    const { x, y, width, height, rotation, scale } = data.settings
-    // console.log(this.state.data.settings)
+    const { temporaryTile } = this.props
+    const { x, y, width, height, rotation, scale } = temporaryTile.settings
     return (
       <div className='position'>
-        {''}{parseInt(x)}{', '}
-        {''}{parseInt(y)}{' '}
+        {parseInt(x)}{', '}
+        {parseInt(y)}{' '}
         {parseInt(width)}{'x'}{parseInt(height)}{' '}
-        {parseInt(rotation * 180 / Math.PI)}{'\u00B0 '}
-        {'x'}{scale.toFixed(0.2)}
+        {rotation === 0 || <span>{parseInt(rotation * 180 / Math.PI)}{'\u00B0 '}</span>}
+        {scale === 1 || <span>{'x'}{scale.toFixed(0.2)}</span>}
       </div>
     )
   }
 
   renderImageForm() {
     // const { isNew } = this.props
-    const { temporaryTile: data } = this.props
+    const { temporaryTile } = this.props
     const { errorFields } = this.state
     return (
       <div>
@@ -260,15 +287,15 @@ class TileForm extends Component {
           placeholder='http://'
           name="url"
           required
-          data={data.settings}
+          data={temporaryTile.settings}
           error={errorFields.has('url')}
-          onChange={this.handleSettingsChange.bind(this)}
+          onChange={this.handleImageChange.bind(this)}
           autoComplete="off"
         />
         <Checkbox
           label="Tiled"
           name="is_tiled"
-          data={data.settings}
+          data={temporaryTile.settings}
           onChange={this.handleSettingsSelect.bind(this)}
           autoComplete="off"
         />
@@ -278,7 +305,7 @@ class TileForm extends Component {
   }
 
   renderTextForm() {
-    const { temporaryTile: data } = this.props
+    const { temporaryTile } = this.props
     const { errorFields } = this.state
     return (
       <div>
@@ -286,7 +313,7 @@ class TileForm extends Component {
           title=""
           name="content"
           required
-          data={data.settings}
+          data={temporaryTile.settings}
           error={errorFields.has('content')}
           onChange={this.handleSettingsChange.bind(this)}
           autoComplete="off"
@@ -295,7 +322,7 @@ class TileForm extends Component {
           <NumberInput
             title="Width"
             name="width"
-            data={data.settings}
+            data={temporaryTile.settings}
             min={0}
             max={1200}
             error={errorFields.has('width')}
@@ -305,7 +332,7 @@ class TileForm extends Component {
           <NumberInput
             title="Height"
             name="height"
-            data={data.settings}
+            data={temporaryTile.settings}
             min={0}
             max={1200}
             error={errorFields.has('height')}
diff --git a/frontend/views/page/components/tile.new.js b/frontend/views/page/components/tile.new.js
index 74d8e96..4649904 100644
--- a/frontend/views/page/components/tile.new.js
+++ b/frontend/views/page/components/tile.new.js
@@ -14,10 +14,10 @@ class TileNew extends Component {
     actions.tile.create(data)
       .then(res => {
         console.log(res)
-        const graph = this.props.graph.show.res
-        if (res.res && res.res.id) {
-          history.push('/' + graph.path + '/' + res.res.path)
-        }
+        // const graph = this.props.graph.show.res
+        // if (res.res && res.res.id) {
+        //   history.push('/' + graph.path + '/' + res.res.path)
+        // }
       })
       .catch(err => {
         console.error('error')
@@ -30,7 +30,7 @@ class TileNew extends Component {
         isNew
         graph={this.props.graph.show.res}
         page={this.props.page.show.res}
-        data={null}
+        initialData={null}
         onSubmit={this.handleSubmit.bind(this)}
       />
     )
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index b8ea7f0..2b0d102 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -15,9 +15,22 @@ const initialState = crudState('page', {
 const reducer = crudReducer('page')
 
 export default function pageReducer(state = initialState, action) {
-  // console.log(action.type, action)
+  console.log(action.type, action)
   state = reducer(state, action)
   switch (action.type) {
+    case types.tile.create:
+      console.log(action.data.res)
+      return {
+        ...state,
+        show: {
+          ...state.show,
+          res: {
+            ...state.show.res,
+            tiles: state.show.res.tiles.concat(action.data.res),
+          }
+        }
+      }
+
     case types.page.update_page_tile:
       return {
         ...state,