handle changing type more robustly

10 files changed, 83 insertions, 32 deletions

diff --git a/frontend/views/graph/components/graph.header.js b/frontend/views/graph/components/graph.header.js
index 6a927ec..46ad962 100644
--- a/frontend/views/graph/components/graph.header.js
+++ b/frontend/views/graph/components/graph.header.js
@@ -12,7 +12,7 @@ function GraphHeader(props) {
         <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
       </div>
       <div>
-        <button onClick={() => props.graphActions.showAddPageForm()}>+ Add page</button>
+        <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
       </div>
     </header>
   )
diff --git a/frontend/views/graph/graph.actions.js b/frontend/views/graph/graph.actions.js
index 90d0f96..1ee6999 100644
--- a/frontend/views/graph/graph.actions.js
+++ b/frontend/views/graph/graph.actions.js
@@ -8,6 +8,10 @@ export const hideAddPageForm = () => dispatch => {
   dispatch({ type: types.graph.hide_add_page_form })
 }
 
+export const toggleAddPageForm = () => dispatch => {
+  dispatch({ type: types.graph.toggle_add_page_form })
+}
+
 export const updateGraphPage = page => dispatch => {
   dispatch({ type: types.graph.update_graph_page, page })
 }
diff --git a/frontend/views/graph/graph.container.js b/frontend/views/graph/graph.container.js
index 4c7b7fc..5c6e3b5 100644
--- a/frontend/views/graph/graph.container.js
+++ b/frontend/views/graph/graph.container.js
@@ -43,7 +43,7 @@ class GraphContainer extends Component {
     })
   }
   render() {
-    if (!this.shouldShowGraph()) return null
+    if (!this.shouldShowGraph()) return <div />
     if (!this.props.graph.show.res || this.props.graph.show.loading) {
       return (
         <div>
@@ -61,8 +61,10 @@ class GraphContainer extends Component {
         <GraphHeader />
         <div className='body'>
           <GraphEditor />
-          {this.props.graph.editor.addingPage && <PageNew />}
-          {this.props.graph.editor.editingPage && <PageEdit />}
+          <div className='sidebar'>
+            {this.props.graph.editor.addingPage && <PageNew />}
+            {this.props.graph.editor.editingPage && <PageEdit />}
+          </div>
         </div>
       </div>
     )
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index 6facb9b..d6a0ff0 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -31,7 +31,7 @@
 .box h1,
 .box h2 {
   font-size: 1rem;
-  margin: 0 0 0.25rem 0;
+  margin: 0 0 0.5rem 0;
 }
 .box form label {
   display: flex;
diff --git a/frontend/views/graph/graph.reducer.js b/frontend/views/graph/graph.reducer.js
index 3dcea1d..336257d 100644
--- a/frontend/views/graph/graph.reducer.js
+++ b/frontend/views/graph/graph.reducer.js
@@ -55,6 +55,16 @@ export default function graphReducer(state = initialState, action) {
         }
       }
 
+    case types.graph.toggle_add_page_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingPage: !state.editor.addingPage,
+          editingPage: false,
+        }
+      }
+
     case types.graph.show_edit_page_form:
       return {
         ...state,
diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 35553c9..92ca750 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -186,16 +186,20 @@ class PageEditor extends Component {
 }
 
 const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
-  console.log(tile)
+  // console.log(tile)
   const { width, height } = tile.settings
   const style = {
     transform: generateTransform(tile),
   }
-  console.log(generateTransform(tile))
+  // console.log(generateTransform(tile))
   let content;
   let className = 'tile ' + tile.type
+  // console.log(tile.settings)
   switch (tile.type) {
     case 'image':
+      if (!tile.settings.url) {
+        return null
+      }
       if (tile.settings.is_tiled) {
         style.backgroundImage = 'url(' + tile.settings.url + ')'
         style.backgroundPosition = tile.settings.align.replace('_', ' ')
@@ -206,10 +210,13 @@ const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
       }
       break
     case 'text':
+      if (!tile.settings.content) {
+        return null
+      }
       content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
       className += ' ' + tile.settings.align
-      style.width = tile.settings.width + 'px'
-      style.height = tile.settings.height + 'px'
+      style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+      style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
       break
   }
   return (
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 045ef5c..def9062 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -26,7 +26,7 @@ const ALIGNMENTS = [
 
 const REQUIRED_KEYS = {
   image: ['url'],
-  text: ['content', 'width', 'height'],
+  text: ['content'],
 }
 
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
@@ -48,8 +48,8 @@ const newText = (data) => ({
     ...newPosition(),
     content: "What is up... I have no idea actually",
     color: 'rgb(255,255,255)',
-    width: 200,
-    height: 200,
+    width: 0,
+    height: 0,
   },
   type: 'text',
   ...data,
@@ -92,22 +92,6 @@ class TileForm extends Component {
     if (errorFields.has(name)) {
       errorFields.delete(name)
     }
-    if (name === 'type') {
-      const { graph, page } = this.props
-      let newData;
-      switch(type) {
-        case 'image':
-          newData = newImage({ graph_id: graph.id, page_id: page.id })
-          break
-        case 'text':
-          newData = newText({ graph_id: graph.id, page_id: page.id })
-          break
-      }
-      this.setState({
-        errorFields,
-        data: newData,
-      }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
-    }
     this.setState({
       errorFields,
       data: {
@@ -117,6 +101,35 @@ class TileForm extends Component {
     }, () => this.props.tileActions.updateTemporaryTile(this.state.data))
   }
 
+  handleTypeChange(type) {
+    const { graph, page } = this.props
+    const { errorFields, data } = this.state
+    let newData;
+    switch(type) {
+      case 'image':
+        newData = newImage({
+          id: data.id,
+          graph_id: data.graph_id,
+          page_id: data.page_id,
+        })
+        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.settings.align = data.settings.align
+        break
+    }
+    console.log(">>>>>>", newData)
+    this.setState({
+      errorFields,
+      data: newData,
+    }, () => this.props.tileActions.updateTemporaryTile(newData))
+  }
+
   handleSettingsChange(e) {
     const { errorFields } = this.state
     const { name, value } = e.target
@@ -140,6 +153,9 @@ class TileForm extends Component {
     if (errorFields.has(name)) {
       errorFields.delete(name)
     }
+    if (name === 'type') {
+      return this.handleTypeChange(value)
+    }
     this.setState({
       errorFields,
       data: {
@@ -296,7 +312,7 @@ class TileForm extends Component {
             title="Width"
             name="width"
             data={data.settings}
-            min={10}
+            min={0}
             max={1200}
             error={errorFields.has('width')}
             onChange={this.handleSettingsChange.bind(this)}
@@ -306,7 +322,7 @@ class TileForm extends Component {
             title="Height"
             name="height"
             data={data.settings}
-            min={10}
+            min={0}
             max={1200}
             error={errorFields.has('height')}
             onChange={this.handleSettingsChange.bind(this)}
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
index 941bd9b..8261515 100644
--- a/frontend/views/page/page.actions.js
+++ b/frontend/views/page/page.actions.js
@@ -10,6 +10,10 @@ export const hideAddTileForm = () => dispatch => {
   dispatch({ type: types.page.hide_add_tile_form })
 }
 
+export const toggleAddTileForm = () => dispatch => {
+  dispatch({ type: types.page.toggle_add_tile_form })
+}
+
 export const updatePageTile = tile => dispatch => {
   dispatch({ type: types.page.update_graph_tile, tile })
 }
diff --git a/frontend/views/page/page.css b/frontend/views/page/page.css
index 9bf4671..67e35df 100644
--- a/frontend/views/page/page.css
+++ b/frontend/views/page/page.css
@@ -6,7 +6,6 @@
 .tile {
   position: absolute;
 }
-
 .tile.image {
   display: block;
 }
@@ -14,9 +13,9 @@
   width: 100%;
   height: 100%;
 }
-
 .tile.text {
   display: block;
+  white-space: break-spaces;
 }
 
 .tile.top_left { top: 0; left: 0; }
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index 07acad3..b8ea7f0 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -55,6 +55,15 @@ export default function pageReducer(state = initialState, action) {
         }
       }
 
+    case types.page.toggle_add_tile_form:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          addingTile: !state.editor.addingTile,
+        }
+      }
+
     case types.page.show_edit_tile_form:
       return {
         ...state,