positioning tiles

1 files changed, 68 insertions, 19 deletions

diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js
index 952e45c..5929b15 100644
--- a/frontend/views/page/components/page.editor.js
+++ b/frontend/views/page/components/page.editor.js
@@ -85,6 +85,7 @@ class PageEditor extends Component {
       mouseX,
       mouseY,
       box: {
+        dx: 0, dy: 0,
         x, y,
         w, h,
       },
@@ -107,6 +108,7 @@ class PageEditor extends Component {
       let dy = (e.pageY - mouseY) / bounds.height
       this.setState({
         box: {
+          dx, dy,
           x: clamp(x + dx, 0, 1.0 - w),
           y: clamp(y + dy, 0, 1.0 - h),
           w, h,
@@ -143,50 +145,97 @@ class PageEditor extends Component {
 
   render(){
     // console.log(this.props.page.show.res)
+    if (!this.state.bounds) {
+      return (
+        <div className='page' ref={this.pageRef} />
+      )
+    }
+    const { temporaryTile } = this.props
     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}>
-        {this.state.bounds && res.tiles.map(tile => (
+        {res.tiles.map(tile => {
+          if (temporaryTile && temporaryTile.id === tile) {
+            tile = temporaryTile
+          }
+          return (
+            <TileHandle
+              key={tile.id}
+              tile={tile}
+              bounds={this.state.bounds}
+              box={currentTile && tile.id === currentTile.id && currentBox}
+              onMouseDown={e => this.handleMouseDown(e, tile)}
+            />
+          )
+        })}
+        {!!(temporaryTile && temporaryTile.id === 'new') && (
           <TileHandle
-            key={tile.id}
-            tile={tile}
+            key={temporaryTile.id}
+            tile={temporaryTile}
             bounds={this.state.bounds}
             box={currentTile && tile.id === currentTile.id && currentBox}
-            onMouseDown={e => this.handleMouseDown(e, tile)}
+            onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
           />
-        ))}
+        )}
       </div>
     )
   }
 }
 
 const TileHandle = ({ tile, bounds, box, onMouseDown }) => {
-  let style;
-  if (box) {
-    style = {
-      top: (bounds.height) * box.y,
-      left: (bounds.width) * box.x,
-    }
-  } else {
-    style = {
-      top: (bounds.height) * Math.min(tile.settings.y, 0.95),
-      left: (bounds.width) * Math.min(tile.settings.x, 0.95),
-    }
+  console.log(tile)
+  const { width, height } = tile.settings
+  const style = {
+    // width, height,
+    transform: generateTransform(tile),
+  }
+  console.log(generateTransform(tile))
+  let content;
+  switch (tile.type) {
+    case 'image':
+      content = <img src={tile.settings.url} />
+      break
+    case 'text':
+      content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+      break
   }
-  // console.log(style)
   return (
-    <div className='handle' onMouseDown={onMouseDown} style={style}>
-      {tile.title}
+    <div className={'tile ' + tile.type + ' ' + tile.settings.align} onMouseDown={onMouseDown} style={style}>
+      {content}
     </div>
   )
 }
 
+const generateTransform = tile => {
+  const { x, y, align, rotation, scale } = tile.settings
+  const [yalign, xalign] = align.split('_')
+  let transform = ['translateZ(0)']
+  if (yalign === 'center') {
+    transform.push('translateY(-50%)')
+  }
+  if (xalign === 'center') {
+    transform.push('translateX(-50%)')
+  }
+  // if (x % 2 == 1) x += 0.5
+  // if (y % 2 == 1) y += 0.5
+  transform.push('translateX(' + x + 'px)')
+  transform.push('translateY(' + y + 'px)')
+  if (scale !== 1) {
+    transform.push('scale(' + scale + ')')
+  }
+  if (rotation !== 0) {
+    transform.push('rotateZ(' + rotation + 'rad)')
+  }
+  return transform.join(' ')
+}
+
 const mapStateToProps = state => ({
   graph: state.graph,
   page: state.page,
+  temporaryTile: state.tile.temporaryTile,
 })
 
 const mapDispatchToProps = dispatch => ({