handle changing type more robustly

2 files changed, 48 insertions, 25 deletions

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)}