From 285bc89a400c2faa7b6c7c327300c7842711935b Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Mon, 22 Mar 2021 16:06:13 +0100
Subject: fix proportional sizing

---
 README.md                                         | 16 +++++-
 cli/commands/site/populate.py                     | 19 +++----
 frontend/app/common/form.component.js             | 69 ++++++++++++++++++-----
 frontend/app/views/page/components/page.editor.js |  2 +-
 frontend/app/views/tile/handles/tile.image.js     |  4 +-
 frontend/app/views/tile/handles/tile.link.js      |  8 +--
 frontend/app/views/tile/handles/tile.script.js    |  4 +-
 frontend/app/views/tile/handles/tile.text.js      |  8 +--
 frontend/app/views/tile/handles/tile.video.js     |  2 +-
 frontend/app/views/tile/tile.utils.js             | 14 ++---
 static/site.html                                  |  2 +-
 11 files changed, 98 insertions(+), 50 deletions(-)

diff --git a/README.md b/README.md
index dcfa219..9e8cca6 100644
--- a/README.md
+++ b/README.md
@@ -47,9 +47,19 @@ Generate a new migration if you've modified the database:
 ./cli.py db upgrade head
 ```
 
-## Building the site
+Run the frontend demo flask server (port 3000):
 
 ```
-npm run build:production
-./cli.py site export --graph swimmer
+yarn demo
+```
+
+To programmatically create pages, modify `cli/commands/site/populate.py`
+
+## Deploying a site
+
+A hypothetical rsync command:
+
+```
+cd data_store/exports/
+rsync -rlptuvz ./last-museum/ lens@garden:swimmer/data_store/exports/last-museum/
 ```
diff --git a/cli/commands/site/populate.py b/cli/commands/site/populate.py
index 03914b2..b1b9691 100644
--- a/cli/commands/site/populate.py
+++ b/cli/commands/site/populate.py
@@ -1,12 +1,11 @@
 import click
 
-lines = """/static/media/last-museum/juliana-cerqueira-leite/01_JCL_AndyCbs_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/02_JCL_Containers_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/04_JCL_Repshp_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/07_JCL_GmShp_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/10_JCL_StreetPrtSftwr_v1.mp4
-/static/media/last-museum/juliana-cerqueira-leite/11_JCL_Oscilloscopes_v1.mp4
-""".split("\n")
+lines = """/static/media/last-museum/nicole-foreshew/establishing1.mp4
+/static/media/last-museum/nicole-foreshew/sequence1b.mp4
+/static/media/last-museum/nicole-foreshew/sequence2.mp4
+/static/media/last-museum/nicole-foreshew/sequence3.mp4
+/static/media/last-museum/nicole-foreshew/sequence4.mp4
+/static/media/last-museum/nicole-foreshew/sequence5.mp4""".split("\n")
 
 letters = ['a','b','c','d','e','f','g','h','i','j']
 
@@ -22,19 +21,19 @@ def cli(ctx):
     return None if resp.status_code != 200 else resp.json()
 
   graph_id = 3
-  name = "Juliana Cerqueira Leite. Stalfigenia, Chapter "
+  name = "Nicole Foreshew"
   index = 0
 
   for url in lines:
     # slug = url.split("/")[5].replace(".mp4", "").lower()
-    slug = "leite-" + letters[index]
+    slug = "foreshew-" + str(index) # + letters[index]
     print(slug)
     index += 1
 
     page_data = {
       "graph_id": graph_id,
       "path": slug,
-      "title": name + str(index),
+      "title": name, # + str(index),
       "username": "jules",
       "description":"",
       "settings": {
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index d0ebea3..de1020a 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -23,21 +23,60 @@ export const LabelDescription = props => (
   </label>
 )
 
-export const NumberInput = props => (
-  <label className={props.error ? 'error' : 'text'}>
-    <span>{props.title}</span>
-    <input
-      type="number"
-      required={props.required}
-      onChange={props.onChange}
-      name={props.name}
-      value={props.data[props.name]}
-      min={props.min}
-      max={props.max}
-      step={props.step || 1}
-    />
-  </label>
-)
+export class NumberInput extends Component {
+  constructor(props) {
+    super(props)
+    this.handleKeyDown = this.handleKeyDown.bind(this)
+  }
+  handleKeyDown(e) {
+    const { min, max, step, data, name, onChange } = this.props
+    const value = data[name]
+    // console.log(e.keyCode)
+    switch (e.keyCode) {
+      case 38: // up
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.min(max, parseFloat(value) + ((step || 1) * 10))
+            }
+          })
+        }
+        break
+      case 40: // down
+        if (e.shiftKey) {
+          e.preventDefault()
+          onChange({
+            target: {
+              name,
+              value: Math.max(min, parseFloat(value) - ((step || 1) * 10))
+            }
+          })
+        }
+        break
+    }
+  }
+  render() {
+    const { props } = this
+    return (
+      <label className={props.error ? 'error' : 'text'}>
+        <span>{props.title}</span>
+        <input
+          type="number"
+          required={props.required}
+          onKeyDown={this.handleKeyDown}
+          onChange={props.onChange}
+          name={props.name}
+          value={props.data[props.name]}
+          min={props.min}
+          max={props.max}
+          step={props.step || 1}
+        />
+      </label>
+    )
+  }
+}
 
 export const ColorInput = props => (
   <label className={props.error ? 'error color' : 'text color'}>
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 7e841ef..adf8652 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -178,7 +178,7 @@ class PageEditor extends Component {
     const { res } = this.props.page.show
     const { settings } = res
     const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
-    const videoBounds = (res.tiles.length && res.tiles[0].type === 'video') ? {
+    const videoBounds = (res.tiles && res.tiles.length && res.tiles[0].type === 'video') ? {
       width: res.tiles[0].settings.width,
       height: res.tiles[0].settings.height,
     } : this.state.bounds
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index beeb36a..b6d1d78 100644
--- a/frontend/app/views/tile/handles/tile.image.js
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index a87b95f..fb6ec03 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
 
   let content = ""
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width', videoBounds)
-  style.height = unitsDimension(tile, 'height', videoBounds)
+  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
 
   return (
     <div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 444a56b..47d83a1 100644
--- a/frontend/app/views/tile/handles/tile.script.js
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
index 172212a..0bcccc9 100644
--- a/frontend/app/views/tile/handles/tile.text.js
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
 
-export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box, videoBounds),
+    transform: generateTransform(tile, box, bounds, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, videoBounds, viewing, onMouseDow
   }
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width', videoBounds)
-  style.height = unitsDimension(tile, 'height', videoBounds)
+  style.width = unitsDimension(tile, 'width', bounds, videoBounds)
+  style.height = unitsDimension(tile, 'height', bounds, videoBounds)
   style.fontFamily = tile.settings.font_family
   style.fontSize = tile.settings.font_size + 'px'
   style.lineHeight = 1.5
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
index 271a671..a34d348 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -59,7 +59,7 @@ export default class TileVideo extends Component {
     let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
     // console.log(tile)
     const style = {
-      transform: generateTransform(tile, box, videoBounds),
+      transform: generateTransform(tile, box, bounds, videoBounds),
       opacity: tile.settings.opacity,
     }
     let className = ['tile', tile.type].join(' ')
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
index ed1cbc8..46d7764 100644
--- a/frontend/app/views/tile/tile.utils.js
+++ b/frontend/app/views/tile/tile.utils.js
@@ -1,4 +1,4 @@
-export const generateTransform = (tile, box, videoBounds) => {
+export const generateTransform = (tile, box, bounds, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
@@ -18,8 +18,8 @@ export const generateTransform = (tile, box, videoBounds) => {
   }
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
-  const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
-  const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+  const xUnits = units === 'video' ? videoUnits(x, bounds, videoBounds) : x + units
+  const yUnits = units === 'video' ? videoUnits(y, bounds, videoBounds) : y + units
 
   transform.push('translateX(' + xUnits + ')')
   transform.push('translateY(' + yUnits + ')')
@@ -63,18 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
   return style
 }
 
-export const unitsDimension = (tile, dimension, videoBounds) => {
+export const unitsDimension = (tile, dimension, bounds, videoBounds) => {
   const value = tile.settings[dimension]
   if (!value) return "auto"
   if (tile.settings.units) {
     if (tile.settings.units === 'video') {
-      return videoUnits(value, videoBounds)
+      return videoUnits(value, bounds, videoBounds)
     }
     return value + tile.settings.units
   }
   return value + "px"
 }
 
-export const videoUnits = (value, videoBounds) => (
-  (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+export const videoUnits = (value, bounds, videoBounds) => (
+  Math.round(value / videoBounds.width * bounds.width) + 'px'
 )
\ No newline at end of file
diff --git a/static/site.html b/static/site.html
index e19847b..1412da5 100644
--- a/static/site.html
+++ b/static/site.html
@@ -12,7 +12,7 @@
 <body>
 <script>
   var s = document.createElement('script');
-  s.setAttribute('src', 'BUNDLE_PATH?' + (Date.now() / 3600))
+  s.setAttribute('src', 'BUNDLE_PATH?' + Math.round(Date.now() / 30000))
   document.body.appendChild(s)
 </script>
 </html>
-- 
cgit v1.2.3-70-g09d2