diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/page/components/tile.edit.js index 2ea09d1..cae9f73 100644 --- a/frontend/app/views/page/components/tile.edit.js +++ b/frontend/app/views/page/components/tile.edit.js @@ -29,7 +29,9 @@ class TileEdit extends Component { load() { const { currentEditTileId } = this.props.page.editor - const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0] + const { tiles } = this.props.page.show.res + if (!tiles) return + const tile = tiles.filter(tile => tile.id === currentEditTileId)[0] console.log('edit', currentEditTileId) this.setState({ tile }) } diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js index 9331cb3..f47c3cd 100644 --- a/frontend/app/views/page/components/tile.handle.js +++ b/frontend/app/views/page/components/tile.handle.js @@ -151,7 +151,6 @@ const generateTransform = (tile, box) => { if (xalign === 'center') { transform.push('translateX(-50%)') } - console.log(units) // if (x % 2 == 1) x += 0.5 // if (y % 2 == 1) y += 0.5 transform.push('translateX(' + x + units + ')') diff --git a/static/uploads b/static/uploads new file mode 120000 index 0000000..79c5899 --- /dev/null +++ b/static/uploads @@ -0,0 +1 @@ +../data_store/uploads \ No newline at end of file -- cgit v1.2.3-70-g09d2 From 1cfe96ca6ef5c54eadd986c951dade0f56d72440 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 16 Mar 2021 16:54:28 +0100 Subject: migrating to mysql --- cli/app/settings/app_cfg.py | 6 ++ cli/app/sql/common.py | 23 ++-- cli/app/sql/env.py | 2 +- cli/app/sql/models/graph.py | 3 + cli/app/sql/models/upload.py | 4 +- .../202103161645_add_foreign_key_constraint.py | 29 +++++ cli/commands/admin/migrate_to_mysql.py | 120 +++++++++++++++++++++ docs/migrate_to_mysql.md | 1 + env-sample | 7 ++ frontend/app/views/index/containers/graph.index.js | 1 + 10 files changed, 181 insertions(+), 15 deletions(-) create mode 100644 cli/app/sql/versions/202103161645_add_foreign_key_constraint.py create mode 100644 cli/commands/admin/migrate_to_mysql.py create mode 100644 docs/migrate_to_mysql.md (limited to 'cli') diff --git a/cli/app/settings/app_cfg.py b/cli/app/settings/app_cfg.py index 3865abd..af6cf89 100644 --- a/cli/app/settings/app_cfg.py +++ b/cli/app/settings/app_cfg.py @@ -33,6 +33,7 @@ load_dotenv(dotenv_path=fp_env) CLICK_GROUPS = { # 'process': 'commands/process', 'site': 'commands/site', + 'admin': 'commands/admin', 'db': '', 'flask': '', } @@ -65,6 +66,11 @@ HASH_BRANCH_SIZE = 3 # for sha256 subdirs DIR_PUBLIC_EXPORTS = os.getenv('DIR_PUBLIC_EXPORTS') or DIR_EXPORTS +# ----------------------------------------------------------------------------- +# Database +# ----------------------------------------------------------------------------- + +USE_SQLITE = os.getenv("USE_SQLITE") == "True" # ----------------------------------------------------------------------------- # S3 storage diff --git a/cli/app/sql/common.py b/cli/app/sql/common.py index c8bd557..8e1d2b3 100644 --- a/cli/app/sql/common.py +++ b/cli/app/sql/common.py @@ -2,7 +2,6 @@ import os import glob import time -# import mysql.connector from sqlalchemy import create_engine from sqlalchemy.orm import sessionmaker from sqlalchemy.ext.declarative import declarative_base @@ -11,16 +10,16 @@ from flask_sqlalchemy import SQLAlchemy from app.settings import app_cfg -# connection_url = "mysql+mysqlconnector://{}:{}@{}/{}?charset=utf8mb4".format( -# os.getenv("DB_USER"), -# os.getenv("DB_PASS"), -# os.getenv("DB_HOST"), -# os.getenv("DB_NAME") -# ) - -os.makedirs(app_cfg.DIR_DATABASE, exist_ok=True) - -connection_url = "sqlite:///{}".format(os.path.join(app_cfg.DIR_DATABASE, 'swimmer.sqlite3')) +if app_cfg.USE_SQLITE: + os.makedirs(app_cfg.DIR_DATABASE, exist_ok=True) + connection_url = "sqlite:///{}".format(os.path.join(app_cfg.DIR_DATABASE, 'swimmer.sqlite3')) +else: + connection_url = "mysql+pymysql://{}:{}@{}/{}?charset=utf8mb4".format( + os.getenv("DB_USER"), + os.getenv("DB_PASS"), + os.getenv("DB_HOST"), + os.getenv("DB_NAME") + ) engine = create_engine(connection_url, encoding="utf-8", pool_recycle=3600) @@ -31,7 +30,7 @@ Base.metadata.bind = engine db = SQLAlchemy() # include the models in reverse dependency order, so relationships work +from app.sql.models.upload import Upload from app.sql.models.tile import Tile from app.sql.models.page import Page from app.sql.models.graph import Graph -from app.sql.models.upload import Upload diff --git a/cli/app/sql/env.py b/cli/app/sql/env.py index 7753565..3e015b5 100644 --- a/cli/app/sql/env.py +++ b/cli/app/sql/env.py @@ -14,10 +14,10 @@ config.set_main_option("sqlalchemy.url", connection_url) target_metadata = Base.metadata # include the models in reverse dependency order, so relationships work +from app.sql.models.upload import Upload from app.sql.models.tile import Tile from app.sql.models.page import Page from app.sql.models.graph import Graph -from app.sql.models.upload import Upload def run_migrations_offline(): """Run migrations in 'offline' mode. diff --git a/cli/app/sql/models/graph.py b/cli/app/sql/models/graph.py index 8e068a0..08f4d3c 100644 --- a/cli/app/sql/models/graph.py +++ b/cli/app/sql/models/graph.py @@ -23,6 +23,7 @@ class Graph(Base): updated_at = Column(UtcDateTime(), onupdate=utcnow()) pages = relationship('Page', lazy='dynamic') + uploads = relationship('Upload', lazy='dynamic') def toJSON(self): return { @@ -40,11 +41,13 @@ class Graph(Base): def toFullJSON(self): data = self.toJSON() data['pages'] = [ page.toLinkJSON() for page in self.pages ] + data['uploads'] = [ upload.toJSON() for upload in self.uploads ] return data def toSiteJSON(self): data = self.toJSON() data['pages'] = [ page.toFullJSON() for page in self.pages ] + data['uploads'] = [ upload.toJSON() for upload in self.uploads ] return data class GraphForm(ModelForm): diff --git a/cli/app/sql/models/upload.py b/cli/app/sql/models/upload.py index 87f758a..30e53dc 100644 --- a/cli/app/sql/models/upload.py +++ b/cli/app/sql/models/upload.py @@ -1,4 +1,4 @@ -from sqlalchemy import create_engine, Table, Column, String, Integer, DateTime +from sqlalchemy import create_engine, Table, Column, ForeignKey, String, Integer, DateTime import sqlalchemy.sql.functions as func from sqlalchemy_utc import UtcDateTime, utcnow from wtforms_alchemy import ModelForm @@ -14,7 +14,7 @@ class Upload(Base): """Table for storing references to various media""" __tablename__ = 'upload' id = Column(Integer, primary_key=True) - graph_id = Column(Integer) + graph_id = Column(Integer, ForeignKey('graph.id'), nullable=True) sha256 = Column(String(256), nullable=False) fn = Column(String(256), nullable=False) ext = Column(String(4, convert_unicode=True), nullable=False) diff --git a/cli/app/sql/versions/202103161645_add_foreign_key_constraint.py b/cli/app/sql/versions/202103161645_add_foreign_key_constraint.py new file mode 100644 index 0000000..673f9e4 --- /dev/null +++ b/cli/app/sql/versions/202103161645_add_foreign_key_constraint.py @@ -0,0 +1,29 @@ +"""add foreign key constraint + +Revision ID: 3f7df6bf63b8 +Revises: 645f315e651d +Create Date: 2021-03-16 16:45:39.455892 + +""" +from alembic import op +import sqlalchemy as sa +import sqlalchemy_utc + + +# revision identifiers, used by Alembic. +revision = '3f7df6bf63b8' +down_revision = '645f315e651d' +branch_labels = None +depends_on = None + + +def upgrade(): + # ### commands auto generated by Alembic - please adjust! ### + op.create_foreign_key(None, 'upload', 'graph', ['graph_id'], ['id']) + # ### end Alembic commands ### + + +def downgrade(): + # ### commands auto generated by Alembic - please adjust! ### + op.drop_constraint(None, 'upload', type_='foreignkey') + # ### end Alembic commands ### diff --git a/cli/commands/admin/migrate_to_mysql.py b/cli/commands/admin/migrate_to_mysql.py new file mode 100644 index 0000000..32ff7cf --- /dev/null +++ b/cli/commands/admin/migrate_to_mysql.py @@ -0,0 +1,120 @@ +import click +import os +import glob +import time + +from sqlalchemy import create_engine +from sqlalchemy.orm import sessionmaker +from sqlalchemy.ext.declarative import declarative_base + +from flask_sqlalchemy import SQLAlchemy + +from app.settings import app_cfg + +@click.command('migrate_to_mysql') +@click.pass_context +def cli(ctx): + """ + - Create connections to both databases + - For each table, for each row, insert from one to the other + """ + mysql_session, mysql_base = make_mysql_base() + sqlite_session, sqlite_base = make_sqlite3_base() + mysql_classes = make_classes(mysql_base) + sqlite_classes = make_classes(sqlite_base) + + for mysql_class, sqlite_class in zip(mysql_classes, sqlite_classes): + sqlite_objs = sqlite_session.query(sqlite_class).order_by(sqlite_class.id).all() + for sqlite_obj in sqlite_objs: + mysql_obj = mysql_class() + for column in sqlite_class.__table__.columns: + table_name, column_name = str(column).split(".") + # print(f"{table_name} => {column_name}") + # if column_name != 'id': + setattr(mysql_obj, column_name, getattr(sqlite_obj, column_name)) + mysql_session.add(mysql_obj) + mysql_session.commit() + +def make_mysql_base(): + """Make a Mysql connection""" + connection_url = "mysql+pymysql://{}:{}@{}/{}?charset=utf8mb4".format( + os.getenv("DB_USER"), + os.getenv("DB_PASS"), + os.getenv("DB_HOST"), + os.getenv("DB_NAME") + ) + return make_base(connection_url) + +def make_sqlite3_base(): + """Make a SQLite3 connection""" + connection_url = "sqlite:///{}".format(os.path.join(app_cfg.DIR_DATABASE, 'animism.sqlite3')) + return make_base(connection_url) + +def make_base(connection_url): + """Make a connection base from a connection URL""" + engine = create_engine(connection_url, encoding="utf-8", pool_recycle=3600) + Session = sessionmaker(bind=engine) + Base = declarative_base() + Base.metadata.bind = engine + db = SQLAlchemy() + return Session(), Base + +def make_classes(Base): + """Make classes from a base""" + + from sqlalchemy import create_engine, Table, Column, Text, String, Integer, \ + Boolean, Float, DateTime, JSON, ForeignKey + from sqlalchemy_utc import UtcDateTime, utcnow + + class Upload(Base): + """Table for storing references to various media""" + __tablename__ = 'upload' + id = Column(Integer, primary_key=True) + graph_id = Column(Integer, ForeignKey('graph.id'), nullable=True) + sha256 = Column(String(256), nullable=False) + fn = Column(String(256), nullable=False) + ext = Column(String(4, convert_unicode=True), nullable=False) + tag = Column(String(64, convert_unicode=True), nullable=True) + username = Column(String(16, convert_unicode=True), nullable=False) + created_at = Column(UtcDateTime(), default=utcnow()) + + class Tile(Base): + """Table for storing references to tiles""" + __tablename__ = 'tile' + id = Column(Integer, primary_key=True) + graph_id = Column(Integer, ForeignKey('graph.id'), nullable=True) + page_id = Column(Integer, ForeignKey('page.id'), nullable=True) + target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True) + type = Column(String(16, convert_unicode=True), nullable=False) + sort_order = Column(Integer, default=0) + settings = Column(JSON, default={}, nullable=True) + created_at = Column(UtcDateTime(), default=utcnow()) + updated_at = Column(UtcDateTime(), onupdate=utcnow()) + + class Page(Base): + """Table for storing references to pages""" + __tablename__ = 'page' + id = Column(Integer, primary_key=True) + graph_id = Column(Integer, ForeignKey('graph.id'), nullable=True) + path = Column(String(64, convert_unicode=True), nullable=False) + title = Column(String(64, convert_unicode=True), nullable=False) + username = Column(String(32, convert_unicode=True), nullable=False) + description = Column(Text(convert_unicode=True), nullable=False) + settings = Column(JSON, default={}, nullable=True) + created_at = Column(UtcDateTime(), default=utcnow()) + updated_at = Column(UtcDateTime(), onupdate=utcnow()) + + class Graph(Base): + """Table for storing references to graphs""" + __tablename__ = 'graph' + id = Column(Integer, primary_key=True) + home_page_id = Column(Integer, nullable=True) + path = Column(String(64, convert_unicode=True), nullable=False) + title = Column(String(64, convert_unicode=True), nullable=False) + username = Column(String(32, convert_unicode=True), nullable=False) + description = Column(Text(convert_unicode=True), nullable=False) + settings = Column(JSON, default={}, nullable=True) + created_at = Column(UtcDateTime(), default=utcnow()) + updated_at = Column(UtcDateTime(), onupdate=utcnow()) + + return [ Upload, Graph, Page, Tile ] diff --git a/docs/migrate_to_mysql.md b/docs/migrate_to_mysql.md new file mode 100644 index 0000000..45fe7de --- /dev/null +++ b/docs/migrate_to_mysql.md @@ -0,0 +1 @@ +migrate_to_mysql.md diff --git a/env-sample b/env-sample index 1a23be3..83c36e4 100644 --- a/env-sample +++ b/env-sample @@ -2,3 +2,10 @@ FLASK_RUN_PORT=7500 SERVER_NAME=swim.neural.garden HTTP_EXTERNAL_HOST=https://swim.neural.garden +USE_SQLITE=False + +DB_USER=swimmer +DB_PASS= +DB_HOST=localhost +DB_NAME=swimmer + diff --git a/frontend/app/views/index/containers/graph.index.js b/frontend/app/views/index/containers/graph.index.js index 91098a7..bf3d75e 100644 --- a/frontend/app/views/index/containers/graph.index.js +++ b/frontend/app/views/index/containers/graph.index.js @@ -11,6 +11,7 @@ class GraphIndex extends Component { componentDidMount() { actions.graph.index() } + render() { const { index } = this.props // console.log(this.props) -- cgit v1.2.3-70-g09d2 From 901beb4df2c074ba54fedc91dd6e780cebe093d1 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 16 Mar 2021 17:04:54 +0100 Subject: migrate to mysql --- cli/commands/admin/migrate_to_mysql.py | 4 ++-- docs/migrate_to_mysql.md | 18 +++++++++++++++++- 2 files changed, 19 insertions(+), 3 deletions(-) (limited to 'cli') diff --git a/cli/commands/admin/migrate_to_mysql.py b/cli/commands/admin/migrate_to_mysql.py index 32ff7cf..0ad9929 100644 --- a/cli/commands/admin/migrate_to_mysql.py +++ b/cli/commands/admin/migrate_to_mysql.py @@ -47,7 +47,7 @@ def make_mysql_base(): def make_sqlite3_base(): """Make a SQLite3 connection""" - connection_url = "sqlite:///{}".format(os.path.join(app_cfg.DIR_DATABASE, 'animism.sqlite3')) + connection_url = "sqlite:///{}".format(os.path.join(app_cfg.DIR_DATABASE, 'swimmer.sqlite3')) return make_base(connection_url) def make_base(connection_url): @@ -117,4 +117,4 @@ def make_classes(Base): created_at = Column(UtcDateTime(), default=utcnow()) updated_at = Column(UtcDateTime(), onupdate=utcnow()) - return [ Upload, Graph, Page, Tile ] + return [ Graph, Page, Tile, Upload ] diff --git a/docs/migrate_to_mysql.md b/docs/migrate_to_mysql.md index 45fe7de..f414a1e 100644 --- a/docs/migrate_to_mysql.md +++ b/docs/migrate_to_mysql.md @@ -1 +1,17 @@ -migrate_to_mysql.md +# Migrate to MySQL + +1. Create a MySQL user and database + +``` +CREATE USER 'swimmer'@'localhost' IDENTIFIED BY 'swimmer'; +CREATE DATABASE swimmer; +GRANT ALL PRIVILEGES ON swimmer.* TO 'swimmer'@'localhost'; +``` + +2. Set up the `.env` which should disable SQLite. + +3. Run `./cli.py db upgrade head` + +4. Run `./cli.py admin migrate_to_mysql` + +5. Restart the server. -- cgit v1.2.3-70-g09d2 From 15d9d864b539e221c6494b3535abef724517f207 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 16 Mar 2021 18:19:26 +0100 Subject: uploading audio files and displaying them in a list --- cli/app/sql/models/upload.py | 4 +- frontend/app/types.js | 1 + frontend/app/views/graph/components/audio.list.js | 150 +++++++++++++++++++++ .../app/views/graph/components/graph.header.js | 1 + frontend/app/views/graph/graph.actions.js | 4 + frontend/app/views/graph/graph.container.js | 2 + frontend/app/views/graph/graph.css | 53 ++++++++ frontend/app/views/graph/graph.reducer.js | 31 +++++ static/img/icons_pause_white.svg | 6 + static/img/icons_play_white.svg | 6 + 10 files changed, 256 insertions(+), 2 deletions(-) create mode 100644 frontend/app/views/graph/components/audio.list.js create mode 100755 static/img/icons_pause_white.svg create mode 100755 static/img/icons_play_white.svg (limited to 'cli') diff --git a/cli/app/sql/models/upload.py b/cli/app/sql/models/upload.py index 30e53dc..d9307ff 100644 --- a/cli/app/sql/models/upload.py +++ b/cli/app/sql/models/upload.py @@ -37,5 +37,5 @@ class Upload(Base): def url(self): if self.tag: - return join('/static/data_store/uploads', str(self.graph_id), self.tag, self.fn) - return join('/static/data_store/uploads', str(self.graph_id), self.fn) + return join('/static/uploads', str(self.graph_id), self.tag, self.fn) + return join('/static/uploads', str(self.graph_id), self.fn) diff --git a/frontend/app/types.js b/frontend/app/types.js index 7120a91..19d1e69 100644 --- a/frontend/app/types.js +++ b/frontend/app/types.js @@ -6,6 +6,7 @@ export const graph = crud_type('graph', [ 'show_add_page_form', 'hide_add_page_form', 'toggle_add_page_form', 'show_edit_page_form', 'hide_edit_page_form', 'toggle_edit_page_form', 'update_graph_page', + 'toggle_audio_list', ]) export const page = crud_type('page', [ diff --git a/frontend/app/views/graph/components/audio.list.js b/frontend/app/views/graph/components/audio.list.js new file mode 100644 index 0000000..bd8fe16 --- /dev/null +++ b/frontend/app/views/graph/components/audio.list.js @@ -0,0 +1,150 @@ +import React, { Component } from 'react' +import { Link } from 'react-router-dom' +import { connect } from 'react-redux' + +import { history } from 'app/store' +import actions from 'app/actions' + +class AudioList extends Component { + state = { + playing: false, + play_id: -1, + } + + constructor(props) { + super(props) + this.toggleAudio = this.toggleAudio.bind(this) + this.upload = this.upload.bind(this) + this.audioDidEnd = this.audioDidEnd.bind(this) + } + + componentDidMount() { + this.audioElement = document.createElement('audio') + this.audioElement.addEventListener('ended', this.audioDidEnd) + } + + componentWillUnmount() { + this.audioElement.removeEventListener('ended', this.audioDidEnd) + this.audioElement.pause() + this.audioElement = null + } + + audioDidEnd() { + this.setState({ playing: false }) + } + + upload(e) { + e.preventDefault() + document.body.className = '' + const files = e.dataTransfer ? e.dataTransfer.files : e.target.files + let i + if (!files.length) return + Array.from(files).forEach(file => this.uploadTaggedFile(file, 'audio', file.filename)) + } + + uploadTaggedFile(file, tag, fn) { + return new Promise((resolve, reject) => { + this.setState({ status: "Uploading " + tag + "..." }) + const uploadData = { + tag, + file, + __file_filename: fn, + graph_id: this.props.graph.id, + username: 'swimmer', + } + // console.log(uploadData) + return actions.upload.upload(uploadData).then(data => { + // console.log(data) + resolve({ + ...data.res, + }) + }) + }) + } + + destroyFile(upload) { + return new Promise((resolve, reject) => { + actions.upload.destroy(upload) + .then(() => { + console.log('Destroy successful') + resolve() + }) + .catch(() => { + console.log('Error deleting the file') + reject() + }) + }) + } + + toggleAudio(upload) { + console.log(upload) + let playing = false + if (this.state.play_id === upload.id && this.state.playing) { + this.audioElement.pause() + } else { + this.audioElement.src = upload.url + this.audioElement.currentTime = 0 + this.audioElement.play() + playing = true + } + this.setState({ + playing, + play_id: upload.id, + }) + } + + render() { + const { playing, play_id } = this.state + const { graph } = this.props + // console.log(graph.uploads) + console.log(playing, play_id) + return ( +

+ + +

+ {graph.uploads.map(upload => ( +

this.toggleAudio(upload)} > +

{unslugify(upload.fn)}

+ ))} +

+ ) + } +} + +const unslugify = fn => fn.replace(/-/g, ' ').replace(/_/g, ' ').replace('.mp3', '') + +const mapStateToProps = state => ({ + graph: state.graph.show.res, +}) + +const mapDispatchToProps = dispatch => ({ +}) + +export default connect(mapStateToProps, mapDispatchToProps)(AudioList) + + +/* + - upload new audio file + */ \ No newline at end of file diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js index b969400..0766580 100644 --- a/frontend/app/views/graph/components/graph.header.js +++ b/frontend/app/views/graph/components/graph.header.js @@ -14,6 +14,7 @@ function GraphHeader(props) {

- -

-        <div className='row font'>
-          <Select
-            title="Font"
-            name='font_family'
-            selected={temporaryTile.settings.font_family || 'sans-serif'}
-            options={TEXT_FONT_FAMILIES}
-            title=''
-            onChange={this.handleSettingsSelect}
-          />
-          <NumberInput
-            title=''
-            name='font_size'
-            data={temporaryTile.settings}
-            min={1}
-            max={1200}
-            error={errorFields.has('font_size')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
-          <Select
-            name='font_style'
-            selected={temporaryTile.settings.font_style || 'normal'}
-            options={TEXT_FONT_STYLES}
-            title=''
-            onChange={this.handleSettingsSelect}
-          />
-        </div>
-        <ColorInput
-          title='Text'
-          name='font_color'
-          data={temporaryTile.settings}
-          error={errorFields.has('font_color')}
-          onChange={this.handleSettingsChange}
-          autoComplete="off"
-        />
-        <ColorInput
-          title='BG'
-          name='background_color'
-          data={temporaryTile.settings}
-          error={errorFields.has('background_color')}
-          onChange={this.handleSettingsChange}
-          autoComplete="off"
-        />
-        <div className='row pair'>
-          <NumberInput
-            title="Width"
-            name="width"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('width')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
-          <NumberInput
-            title="Height"
-            name="height"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('height')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderLinkForm() {
-    const { temporaryTile } = this.props
-    const { errorFields } = this.state
-    return (
-      <div>
-        <div className='row pair'>
-          <NumberInput
-            title="Width"
-            name="width"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('width')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
-          <NumberInput
-            title="Height"
-            name="height"
-            data={temporaryTile.settings}
-            min={0}
-            max={1200}
-            error={errorFields.has('height')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
-        </div>
-        <div className='row pair'>
-          <TextInput
-            title="Units"
-            name="units"
-            data={temporaryTile.settings}
-            error={errorFields.has('units')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
-          />
-        </div>
-      </div>
-    )
-  }
-
-  renderScriptForm() {
-    const { temporaryTile } = this.props
-    const { errorFields } = this.state
-    return (
-      <div>
-        <TextArea
-          title=""
-          name="content"
-          required
-          data={temporaryTile.settings}
-          error={errorFields.has('content')}
-          onChange={this.handleSettingsChange}
-          autoComplete="off"
-        />
-        <div>
-          Scripts will be run on the live site when this page loads.
-        </div>
-      </div>
-    )
-  }
-
-  renderHyperlinkForm() {
-    const { temporaryTile } = this.props
-    const { pageList } = this.state
-    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
-    return (
-      <div>
-        <div className={'row selects'}>
-          <Select
-            title=''
-            name='target_page_id'
-            selected={temporaryTile.target_page_id || NO_LINK}
-            options={pageList}
-            onChange={this.handleSelect}
-          />
-          <Select
-            title=''
-            name='cursor'
-            selected={temporaryTile.settings.cursor}
-            options={CURSORS}
-            defaultOption="Cursor"
-            onChange={this.handleSettingsSelect}
-          />
-        </div>
-        <div>
-          {isExternalLink &&
-            <TextInput
-              title=""
-              placeholder='http://'
-              name="external_link_url"
-              data={temporaryTile.settings}
-              onChange={this.handleSettingsChange}
-              autoComplete="off"
-            />
-          }
-        </div>
-      </div>
-    )
-  }
-
-  renderAudioForm() {
-    const { temporaryTile } = this.props
-    return (
-      <div>
-        <Checkbox
-          label="Play audio"
-          name="has_audio"
-          checked={temporaryTile.settings.has_audio}
-          onChange={this.handleSettingsSelect}
-        />
-        {temporaryTile.settings.has_audio && (
-          <div >
-            <AudioSelect
-              title="On click"
-              name="audio_on_click_id"
-              selected={temporaryTile.settings.audio_on_click_id}
-              onChange={this.handleSettingsSelect}
-            />
-
-            <Checkbox
-              label="Navigate when audio finishes"
-              name="navigate_when_audio_finishes"
-              checked={temporaryTile.settings.navigate_when_audio_finishes}
-              onChange={this.handleSettingsSelect}
-              autoComplete="off"
-            />
-
-            <AudioSelect
-              title="On hover"
-              name="audio_on_hover_id"
-              selected={temporaryTile.settings.audio_on_hover_id}
-              onChange={this.handleSettingsSelect}
-            />
-          </div>
-        )}
-      </div>
-    )
-  }
-
-  renderMiscForm() {
-    const { temporaryTile } = this.props
-    return (
-      <div>
-        <Slider
-          title='Opacity'
-          name='opacity'
-          value={temporaryTile.settings.opacity}
-          onChange={this.handleSettingsSelect}
-          min={0.0}
-          max={1.0}
-          step={0.01}
-        />
-        <Slider
-          title='Scale'
-          name='scale'
-          value={temporaryTile.settings.scale}
-          onChange={this.handleSettingsSelect}
-          min={0.01}
-          max={10.0}
-          step={0.01}
-        />
-        <Slider
-          title='Rotation'
-          name='rotation'
-          value={temporaryTile.settings.rotation}
-          onChange={this.handleSettingsSelect}
-          min={-180.0}
-          max={180.0}
-          step={1}
-          type='int'
-        />
-      </div>
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-  tile: state.tile,
-  temporaryTile: state.tile.temporaryTile,
-})
-
-const mapDispatchToProps = dispatch => ({
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileForm)
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
deleted file mode 100644
index d8184d3..0000000
--- a/frontend/app/views/page/components/tile.handle.js
+++ /dev/null
@@ -1,209 +0,0 @@
-import React, { Component } from 'react'
-
-export default class TileHandle extends Component {
-  constructor(props) {
-    super(props)
-    this.videoRef = React.createRef()
-    this.handleEnded = this.handleEnded.bind(this)
-  }
-  componentDidMount() {
-    if (this.props.tile.type === 'video') {
-      this.videoRef.current.addEventListener('ended', this.handleEnded)
-    }
-  }
-  componentWillUnmount() {
-    if (this.props.tile.type === 'video') {
-      this.videoRef.current.removeEventListener('ended', this.handleEnded)
-    }
-  }
-  handleEnded() {
-    this.props.onPlaybackEnded(this.props.tile)
-  }
-  render() {
-    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
-    // console.log(tile)
-    const { width, height } = tile.settings
-    const style = {
-      transform: generateTransform(tile, box),
-      opacity: tile.settings.opacity,
-    }
-    // console.log(generateTransform(tile))
-    let content;
-    let className = ['tile', tile.type].join(' ')
-    if (tile.target_page_id || (viewing && tile.href)) {
-      className += ' ' + (tile.settings.cursor || 'hand_up')
-    }
-    // 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('_', ' ')
-          switch (tile.settings.tile_style) {
-            default:
-            case 'tile':
-              break
-            case 'cover':
-              style.backgroundSize = 'cover'
-              break
-            case 'contain':
-              style.backgroundSize = 'contain'
-              break
-            case 'contain no-repeat':
-              style.backgroundSize = 'contain'
-              style.backgroundRepeat = 'no-repeat'
-              break
-          }
-          className += ' is_tiled'
-        } else {
-          className += ' ' + tile.settings.align
-          content = <img src={tile.settings.url} />
-        }
-        break
-
-      case 'video':
-        if (!tile.settings.url) {
-          return null
-        }
-        className += ' ' + tile.settings.align
-        content = (
-          <video
-            ref={this.videoRef}
-            src={tile.settings.url}
-            autoPlay={true}
-            controls={false}
-            loop={tile.settings.loop}
-            muted={tile.settings.muted}
-            style={generateVideoStyle(tile, bounds)}
-          />
-        )
-        break
-
-      case 'text':
-        if (!tile.settings.content) {
-          return null
-        }
-        content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
-        className += ' ' + tile.settings.align
-        style.width = unitsDimension(tile, 'width')
-        style.height = unitsDimension(tile, 'height')
-        style.fontFamily = tile.settings.font_family
-        style.fontSize = tile.settings.font_size + 'px'
-        style.lineHeight = 1.5
-        style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
-        style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
-        style.backgroundColor = tile.settings.background_color || 'transparent'
-        style.color = tile.settings.font_color || '#dddddd!important'
-        break
-
-      case 'link':
-        content = ""
-        className += ' ' + tile.settings.align
-        style.width = unitsDimension(tile, 'width')
-        style.height = unitsDimension(tile, 'height')
-        break
-
-      case 'script':
-        content = ""
-        if (viewing) {
-          eval(tile.settings.content)
-        } else {
-          content = "SCRIPT"
-        }
-    }
-    if (viewing) {
-      return (
-        <div
-          className={className}
-          onMouseDown={onMouseDown}
-          style={style}
-        >
-          {content}
-        </div>
-      )
-    } else {
-      return (
-        <div
-          className={className}
-          onMouseDown={onMouseDown}
-          onDoubleClick={onDoubleClick}
-          style={style}
-        >
-          {content}
-        </div>
-      )
-    }
-  }
-}
-
-const generateTransform = (tile, box) => {
-  let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
-  if (is_tiled) {
-    return 'translateZ(0)'
-  }
-  if (box) {
-    x += box.dx
-    y += box.dy
-  }
-  units = units || 'px'
-  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 + units + ')')
-  transform.push('translateY(' + y + units + ')')
-  if (scale !== 1) {
-    transform.push('scale(' + scale + ')')
-  }
-  if (rotation !== 0) {
-    transform.push('rotateZ(' + rotation + 'deg)')
-  }
-  return transform.join(' ')
-}
-
-const generateVideoStyle = (tile, bounds) => {
-  const style = {
-    pointerEvents: "none",
-  }
-  switch (tile.settings.video_style) {
-    case 'normal':
-      style.width = "auto"
-      style.height = "auto"
-      break
-    case 'cover':
-      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
-        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
-        style.height = bounds.height
-      } else {
-        style.width = bounds.width
-        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
-      }
-      break
-    case 'contain':
-      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
-        style.width = bounds.width
-        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
-      } else {
-        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
-        style.height = bounds.height
-      }
-      break
-  }
-  return style
-}
-
-const unitsDimension = (tile, dimension) => {
-  const value = tile.settings[dimension]
-  if (!value) return "auto"
-  if (tile.settings.units) return value + tile.settings.units
-  return value + "px"
-}
diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/page/components/tile.list.js
deleted file mode 100644
index c455489..0000000
--- a/frontend/app/views/page/components/tile.list.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { ReactSortable } from "react-sortablejs"
-
-// import actions from 'app/actions'
-import * as tileActions from '../../tile/tile.actions'
-import * as pageActions from '../../page/page.actions'
-
-const DOUBLE_CLICK_THRESHOLD = 250
-
-class TileList extends Component {
-  state = {
-    tiles: [],
-    lastTargetId: 0,
-    lastTimeStamp: 0,
-  }
-  
-  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
-  didDoubleClick = false
-
-  componentDidMount(prevProps) {
-    const { tiles } = this.props.page.show.res
-    const { pages } = this.props.graph.show.res
-    const pageTitles = pages.reduce((a,b) => {
-      a[b.id] = b.title
-      return a
-    }, {})
-    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.didDoubleClick) return
-    const { tiles } = this.state
-    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
-      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
-    }
-    // since we store the full tiles here (reversed!), they might change from under us
-    // potentially later refactor to only use a sort order / lookup
-    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
-      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
-        a[b.id] = b
-        return a
-      }, {})
-      const newTiles = this.state.tiles.map(tile => {
-        return tileLookup[tile.id]
-      })
-      this.setState({ tiles: newTiles })
-    }
-  }
-
-  handleChoose(e) {
-    const { lastTargetId, lastTimeStamp } = this.state
-    if (lastTimeStamp
-      && parseInt(e.item.dataset.id) === lastTargetId
-      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
-      ) {
-      // console.log('selected', lastTargetId)
-      this.didDoubleClick = true
-      this.props.pageActions.showEditTileForm(lastTargetId)
-    } else {
-      this.setState({
-        lastTargetId: parseInt(e.item.dataset.id),
-        lastTimeStamp: e.timeStamp,
-      })
-    }
-  }
-
-  handleUpdate(newTiles) {
-    if (this.didDoubleClick) return
-    this.setState({ tiles: newTiles })
-  }
-
-  render() {
-    const { tiles, pageTitles } = this.state
-    return (
-      <div className='box tileList'>
-        <ReactSortable
-          list={tiles}
-          setList={newTiles => this.handleUpdate(newTiles)}
-          onChoose={e => this.handleChoose(e)}
-        >
-          {tiles.map(tile => (
-            tile.type === 'image'
-            ? <TileListImage key={tile.id} tile={tile} />
-            : tile.type === 'text'
-            ? <TileListText key={tile.id} tile={tile} />
-            : tile.type === 'link'
-            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
-            : <TileListMisc key={tile.id} tile={tile} />
-          ))}
-        </ReactSortable>
-      </div>
-    )
-  }
-}
-
-const TileListImage = ({ tile }) => (
-  <div className='row' data-id={tile.id}>
-    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
-  </div>
-)
-
-const TileListText = ({ tile }) => (
-  <div className='row' data-id={tile.id}>
-    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
-  </div>
-)
-
-const TileListLink = ({ tile, pageTitles }) => (
-  <div className='row link' data-id={tile.id}>
-    <span className='snippet'>
-      {'Link: '}
-      {tile.target_page_id === -1
-        ? 'External'
-        : !tile.target_page_id
-        ? 'No link specified!'
-        : tile.target_page_id in pageTitles
-        ? pageTitles[tile.target_page_id]
-        : 'Error, broken link!'}
-    </span>
-  </div>
-)
-
-const TileListMisc = ({ tile }) => (
-  <div className='row' data-id={tile.id}>
-    <span className='snippet'>{"Tile: "}{tile.type}</span>
-  </div>
-)
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/app/views/page/components/tile.new.js b/frontend/app/views/page/components/tile.new.js
deleted file mode 100644
index b491fdd..0000000
--- a/frontend/app/views/page/components/tile.new.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, { Component } from 'react'
-// import { Link } from 'react-router-dom'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-
-import { history } from 'app/store'
-import actions from 'app/actions'
-import * as tileActions from '../../tile/tile.actions'
-import * as pageActions from '../../page/page.actions'
-
-import TileForm from '../components/tile.form'
-
-class TileNew extends Component {
-  handleSubmit(data) {
-    console.log(data)
-    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)
-        // }
-        this.props.pageActions.hideAddTileForm()
-        this.props.tileActions.clearTemporaryTile()
-      })
-      .catch(err => {
-        console.error('error')
-      })
-  }
-
-  render() {
-    return (
-      <TileForm
-        isNew
-        graph={this.props.graph.show.res}
-        page={this.props.page.show.res}
-        initialData={null}
-        sortOrder={this.props.page.show.res.tiles ? this.props.page.show.res.tiles.length : []}
-        onSubmit={this.handleSubmit.bind(this)}
-      />
-    )
-  }
-}
-
-const mapStateToProps = state => ({
-  graph: state.graph,
-  page: state.page,
-})
-
-const mapDispatchToProps = dispatch => ({
-  tileActions: bindActionCreators({ ...tileActions }, dispatch),
-  pageActions: bindActionCreators({ ...pageActions }, dispatch),
-})
-
-export default connect(mapStateToProps, mapDispatchToProps)(TileNew)
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index dc85f5e..68347b7 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -9,13 +9,13 @@ import './cursors.css'
 import actions from 'app/actions'
 import { Loader } from 'app/common'
 
-import * as graphActions from '../graph/graph.actions'
+import * as graphActions from 'app/views/graph/graph.actions'
 import * as pageActions from './page.actions'
 
-import PageEdit from '../graph/components/page.edit'
-import TileNew from './components/tile.new'
-import TileEdit from './components/tile.edit'
-import TileList from './components/tile.list'
+import PageEdit from 'app/views/graph/components/page.edit'
+import TileNew from 'app/views/tile/components/tile.new'
+import TileEdit from 'app/views/tile/components/tile.edit'
+import TileList from 'app/views/tile/components/tile.list'
 
 import PageHeader from './components/page.header'
 import PageEditor from './components/page.editor'
diff --git a/frontend/app/views/tile/components/tile.edit.js b/frontend/app/views/tile/components/tile.edit.js
new file mode 100644
index 0000000..cae9f73
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.edit.js
@@ -0,0 +1,86 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+// import { history } from 'app/store'
+import actions from 'app/actions'
+import * as pageActions from '../../page/page.actions'
+import * as tileActions from '../../tile/tile.actions'
+
+import { Loader } from 'app/common'
+
+import TileForm from '../components/tile.form'
+
+class TileEdit extends Component {
+  state = {
+    tile: null
+  }
+
+  componentDidMount() {
+    this.load()
+  }
+
+  componentDidUpdate(prevProps) {
+    if (prevProps.page.editor.currentEditTileId !== this.props.page.editor.currentEditTileId) {
+      this.load()
+    }
+  }
+
+  load() {
+    const { currentEditTileId } = this.props.page.editor
+    const { tiles } = this.props.page.show.res
+    if (!tiles) return
+    const tile = tiles.filter(tile => tile.id === currentEditTileId)[0]
+    console.log('edit', currentEditTileId)
+    this.setState({ tile })
+  }
+
+  handleSubmit(data) {
+    actions.tile.update(data)
+      .then(response => {
+        // console.log(response)
+        if (response.status === 'ok') {
+          this.props.pageActions.updatePageTile(response.res)
+        }
+      })
+  }
+
+  handleClose() {
+    this.props.pageActions.hideEditTileForm()
+    this.props.tileActions.clearTemporaryTile()
+  }
+
+  render() {
+    const { tile } = this.state
+    if (!tile) {
+      return (
+        <div className='form'>
+          <Loader />
+        </div>
+      )
+    }
+    return (
+      <TileForm
+        initialData={tile}
+        graph={this.props.graph.show.res}
+        page={this.props.page.show.res}
+        onSubmit={this.handleSubmit.bind(this)}
+        onClose={this.handleClose.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileEdit)
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
new file mode 100644
index 0000000..49b34b1
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -0,0 +1,879 @@
+import React, { Component } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link } from 'react-router-dom'
+
+import actions from 'app/actions'
+import { session } from 'app/session'
+
+import {
+  TextInput, NumberInput, ColorInput, Slider,
+  Select, LabelDescription, TextArea, Checkbox,
+  SubmitButton, Loader } from 'app/common'
+import AudioSelect from 'app/views/audio/components/audio.select'
+import { preloadImage, preloadVideo } from 'app/utils'
+
+import * as tileActions from '../../tile/tile.actions'
+
+const SELECT_TYPES = [
+  "image", "text", "video", "link", "script",
+].map(s => ({ name: s, label: s }))
+
+const ALIGNMENTS = [
+  "top_left", "top_center", "top_right",
+  "center_left", "center_center", "center_right",
+  "bottom_left", "bottom_center", "bottom_right",
+].map(align => ({
+  name: align,
+  label: align === 'center_center'
+    ? 'center'
+    : align.replace('_', ' ')
+  }))
+
+const REQUIRED_KEYS = {
+  image: ['url'],
+  video: ['url'],
+  text: ['content'],
+  link: [],
+  script: [],
+}
+
+const IMAGE_TILE_STYLES = [
+  'tile', 'cover', 'contain', 'contain no-repeat'
+].map(style => ({ name: style, label: style }))
+
+const VIDEO_STYLES = [
+  'normal', 'cover', 'contain',
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_FAMILIES = [
+  'sans-serif', 'serif', 'fantasy', 'monospace', 'cursive',
+].map(style => ({ name: style, label: style }))
+
+const TEXT_FONT_STYLES = [
+  'normal', 'bold', 'italic', 'bold-italic',
+].map(style => ({ name: style, label: style }))
+
+const CURSORS = [
+  { name: 'none', label: 'None', },
+  { name: 'hand_up', label: 'Up', },
+  { name: 'hand_down', label: 'Down', },
+  { name: 'hand_left', label: 'Left', },
+  { name: 'hand_right', label: 'Right', },
+  { name: 'unclickable', label: 'Unclickable', },
+]
+
+const NO_LINK = 0
+const EXTERNAL_LINK = -1
+const PAGE_LIST_TOP_OPTIONS = [
+  { name: NO_LINK, label: 'No link' },
+  { name: EXTERNAL_LINK, label: 'External link' },
+  { name: -2, label: '──────────', disabled: true },
+]
+
+// 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) => ({
+  settings: {
+    ...newPosition(),
+    is_tiled: false,
+    tile_style: 'tile',
+    url: "",
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'image',
+  target_page_id: null,
+  ...data,
+})
+
+const newVideo = (data) => ({
+  settings: {
+    ...newPosition(),
+    video_style: 'cover',
+    url: "",
+    external_link_url: "",
+    cursor: 'none',
+    muted: false,
+    loop_style: false,
+    autoadvance: false,
+    loop_section: false,
+    loop_start: 0,
+    loop_end: 0,
+  },
+  type: 'video',
+  target_page_id: null,
+  ...data,
+})
+
+const newText = (data) => ({
+  settings: {
+    ...newPosition(),
+    content: "",
+    font_family: 'sans-serif',
+    font_size: 16,
+    font_style: 'normal',
+    font_color: '#dddddd',
+    background_color: 'transparent',
+    width: 0,
+    height: 0,
+    units: 'px',
+    external_link_url: "",
+    cursor: 'hand_up',
+  },
+  type: 'text',
+  target_page_id: null,
+  ...data,
+})
+
+const newLink = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+    external_link_url: "",
+    cursor: 'hand_up',
+    units: 'px',
+  },
+  type: 'link',
+  target_page_id: null,
+  ...data,
+})
+
+const newScript = (data) => ({
+  settings: {
+    ...newPosition({ width: 100, height: 100, }),
+  },
+  type: 'script',
+  ...data,
+})
+
+const newPosition = (data) => ({
+  x: 0, y: 0,
+  width: 0, height: 0,
+  rotation: 0, scale: 1,
+  opacity: 1,
+  units: false,
+  align: "center_center",
+  has_audio: false,
+  audio_on_click_id: 0,
+  audio_on_hover_id: 0,
+  navigate_when_audio_finishes: false,
+  ...data,
+})
+
+const TYPE_CONSTRUCTORS = {
+  image: newImage,
+  video: newVideo,
+  text: newText,
+  link: newLink,
+  script: newScript,
+}
+
+class TileForm extends Component {
+  state = {
+    title: "",
+    submitTitle: "",
+    errorFields: new Set([]),
+    modified: false,
+    pageList: [],
+  }
+
+  constructor(props){
+    super(props)
+    this.handleChange = this.handleChange.bind(this)
+    this.handleSelect = this.handleSelect.bind(this)
+    this.handleSettingsChange = this.handleSettingsChange.bind(this)
+    this.handleSettingsSelect = this.handleSettingsSelect.bind(this)
+    this.handleAlignment = this.handleAlignment.bind(this)
+    this.handleImageChange = this.handleImageChange.bind(this)
+    this.handleVideoChange = this.handleVideoChange.bind(this)
+    this.handleSubmit = this.handleSubmit.bind(this)
+    this.handleDelete = this.handleDelete.bind(this)
+  }
+
+  componentDidMount() {
+    const { graph, page, isNew, initialData, sortOrder } = this.props
+    const title = isNew ? 'new tile' : 'editing tile'
+    const submitTitle = isNew ? "Create Tile" : "Save Changes"
+    this.setState({
+      title,
+      submitTitle,
+      errorFields: new Set([]),
+    })
+    const { pages } = graph.show.res
+    const linkPages = initialData ? pages.filter(page => page.id !== initialData.id) : pages
+    let pageList = [
+      ...PAGE_LIST_TOP_OPTIONS,
+      ...linkPages.map(page => ({ name: page.id, label: page.path }))
+    ]
+    this.setState({ pageList })
+    if (isNew) {
+      const newTile = newImage({
+        id: "new",
+        graph_id: graph.show.res.id,
+        page_id: page.show.res.id,
+        sort_order: sortOrder,
+      })
+      this.props.tileActions.updateTemporaryTile(newTile)
+    } else {
+      this.props.tileActions.updateTemporaryTile({ ...initialData })
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    if (!this.props.isNew && this.props.initialData !== prevProps.initialData) {
+      this.handleSubmit()
+      this.props.tileActions.updateTemporaryTile({ ...this.props.initialData })
+      this.setState({
+        errorFields: new Set([]),
+      })
+    }
+  }
+
+  componentWillUnmount() {
+    // if the item has changed, save before we close the form!
+    if (!this.props.isNew && this.state.modified) {
+      this.handleSubmit()
+    }
+  }
+
+  handleChange(e) {
+    const { name, value } = e.target
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleTypeChange(type) {
+    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.clearErrorField('type')
+    this.props.tileActions.updateTemporaryTile(newTile)
+  }
+
+  handleSettingsChange(e) {
+    const { name, value } = e.target
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+      }
+    })
+  }
+
+  handleSelect(name, value) {
+    this.clearErrorField(name)
+    if (name === 'type') {
+      return this.handleTypeChange(value)
+    }
+    if (name === 'target_page_id') {
+      value = parseInt(value)
+    }
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      [name]: value,
+    })
+  }
+
+  handleSettingsSelect(name, value) {
+    this.clearErrorField(name)
+    this.props.tileActions.updateTemporaryTile({
+      ...this.props.temporaryTile,
+      settings: {
+        ...this.props.temporaryTile.settings,
+        [name]: value,
+      }
+    })
+  }
+
+  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,
+        }
+      })
+    })
+  }
+
+  handleVideoChange(e) {
+    const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+    preloadVideo(value).then(video => {
+      // console.log(img)
+      this.props.tileActions.updateTemporaryTile({
+        ...this.props.temporaryTile,
+        settings: {
+          ...this.props.temporaryTile.settings,
+          [name]: value,
+          width: video.videoWidth,
+          height: video.videoHeight,
+          x: 0, y: 0,
+        }
+      })
+    })
+  }
+
+  clearErrorField(name) {
+    const { errorFields } = this.state
+    if (errorFields.has(name)) {
+      errorFields.delete(name)
+      this.setState({
+        errorFields,
+        modified: true,
+      })
+    } else if (!this.state.modified) {
+      this.setState({
+        errorFields,
+        modified: true,
+      })
+    }
+  }
+
+  handleSubmit(e) {
+    if (e) e.preventDefault()
+    const { isNew, temporaryTile, onSubmit, onClose } = 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)
+      if (e) {
+        this.setState({ errorFields: new Set(errorFields) })
+      }
+    } else {
+      if (isNew) {
+        // side effect: set username if we're creating a new tile
+        // session.set('username', data.username)
+        delete validData.id
+      } else {
+        validData.id = temporaryTile.id
+      }
+      this.setState({ modified: false })
+      console.log('submit', validData)
+      onSubmit(validData)
+      // if submitting after switching elements, don't close the form
+      if (e && onClose) {
+        onClose()
+      }
+    }
+  }
+
+  handleDelete() {
+    const { temporaryTile, isNew, onClose } = this.props
+    if (confirm('Really delete this tile?')) {
+      actions.tile.destroy(temporaryTile)
+      .then(() => {
+        onClose()
+      })
+    }
+  }
+
+  render() {
+    const { temporaryTile, isNew } = this.props
+    const { title, submitTitle, errorFields } = this.state
+    if (!temporaryTile || !temporaryTile.settings) return <div className='box' />
+    return (
+      <div className='box'>
+        <h1>{title}</h1>
+        <form onSubmit={this.handleSubmit}>
+          <div className="row selects">
+            <Select
+              name='type'
+              selected={temporaryTile.type}
+              options={SELECT_TYPES}
+              title=''
+              onChange={this.handleSelect}
+            />
+            <Select
+              name='align'
+              selected={temporaryTile.settings.align}
+              options={ALIGNMENTS}
+              title=''
+              onChange={this.handleAlignment}
+            />
+          </div>
+
+          {this.renderPositionInfo()}
+
+          {temporaryTile.type === 'image'
+            ? this.renderImageForm()
+          : temporaryTile.type === 'video'
+            ? this.renderVideoForm()
+          : temporaryTile.type === 'text'
+            ? this.renderTextForm()
+          : temporaryTile.type === 'link'
+            ? this.renderLinkForm()
+          : temporaryTile.type === 'script'
+            ? this.renderScriptForm()
+          : ""}
+
+          {this.renderHyperlinkForm()}
+          {this.renderMiscForm()}
+          {this.renderAudioForm()}
+
+          <div className='row buttons'>
+            <SubmitButton
+              title={submitTitle}
+              onClick={this.handleSubmit}
+            />
+            {!isNew && 
+              <SubmitButton
+                title={'Delete'}
+                className='destroy'
+                onClick={this.handleDelete}
+              />
+            }
+          </div>
+          {!!errorFields.size &&
+            <label>
+              <span></span>
+              <span>Please add the required fields =)</span>
+            </label>
+          }
+        </form>
+      </div>
+    )
+  }
+
+  renderPositionInfo() {
+    const { temporaryTile } = this.props
+    const { x, y, width, height, rotation, scale } = temporaryTile.settings
+    return (
+      <div className='position'>
+        {parseInt(x)}{', '}
+        {parseInt(y)}{' '}
+        {parseInt(width)}{'x'}{parseInt(height)}{' '}
+        {rotation === 0 || <span>{parseInt(rotation)}{'\u00B0 '}</span>}
+        {scale === 1 || <span>{'x'}{scale.toFixed(2)}</span>}
+      </div>
+    )
+  }
+
+  renderImageForm() {
+    // const { isNew } = this.props
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    // console.log(temporaryTile.settings)
+    return (
+      <div>
+        <div className='row imageUrl'>
+          {temporaryTile.settings.url && <div className='thumb'><img src={temporaryTile.settings.url} /></div>}
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="url"
+            required
+            data={temporaryTile.settings}
+            error={errorFields.has('url')}
+            onChange={this.handleImageChange}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Checkbox
+            label="Tiled"
+            name="is_tiled"
+            checked={temporaryTile.settings.is_tiled}
+            onChange={this.handleSettingsSelect}
+            autoComplete="off"
+          />
+          {temporaryTile.settings.is_tiled &&
+            <Select
+              name='tile_style'
+              selected={temporaryTile.settings.tile_style || 'tile'}
+              options={IMAGE_TILE_STYLES}
+              title=''
+              onChange={this.handleSettingsSelect}
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderVideoForm() {
+    // const { isNew } = this.props
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    // console.log(temporaryTile.settings)
+    return (
+      <div>
+        <div className='row imageUrl'>
+          <TextInput
+            title=""
+            placeholder='http://'
+            name="url"
+            required
+            data={temporaryTile.settings}
+            error={errorFields.has('url')}
+            onChange={this.handleVideoChange}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Select
+            name='video_style'
+            selected={temporaryTile.settings.video_style || 'none'}
+            options={VIDEO_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect}
+          />
+          <Checkbox
+            label="Loop"
+            name="loop"
+            checked={temporaryTile.settings.loop}
+            onChange={this.handleSettingsSelect}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <Checkbox
+            label="Muted"
+            name="muted"
+            checked={temporaryTile.settings.muted}
+            onChange={this.handleSettingsSelect}
+          />
+          <Checkbox
+            label="Autoadvance"
+            name="autoadvance"
+            checked={temporaryTile.settings.autoadvance}
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
+        {temporaryTile.settings.loop && (
+          <div className='row'>
+            <Checkbox
+              label="Loop section?"
+              name="loop_section"
+              checked={temporaryTile.settings.loop_section}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
+        {temporaryTile.settings.loop && temporaryTile.settings.loop_section && (
+          <div className='row pair'>
+            <TextInput
+              title="From"
+              placeholder='0:00'
+              name="loop_start"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+            <TextInput
+              title="To"
+              placeholder='0:00'
+              name="loop_end"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  renderTextForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <TextArea
+          title=""
+          name="content"
+          required
+          data={temporaryTile.settings}
+          error={errorFields.has('content')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <div className='row font'>
+          <Select
+            title="Font"
+            name='font_family'
+            selected={temporaryTile.settings.font_family || 'sans-serif'}
+            options={TEXT_FONT_FAMILIES}
+            title=''
+            onChange={this.handleSettingsSelect}
+          />
+          <NumberInput
+            title=''
+            name='font_size'
+            data={temporaryTile.settings}
+            min={1}
+            max={1200}
+            error={errorFields.has('font_size')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <Select
+            name='font_style'
+            selected={temporaryTile.settings.font_style || 'normal'}
+            options={TEXT_FONT_STYLES}
+            title=''
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
+        <ColorInput
+          title='Text'
+          name='font_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('font_color')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <ColorInput
+          title='BG'
+          name='background_color'
+          data={temporaryTile.settings}
+          error={errorFields.has('background_color')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderLinkForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <div className='row pair'>
+          <NumberInput
+            title="Width"
+            name="width"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('width')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+          <NumberInput
+            title="Height"
+            name="height"
+            data={temporaryTile.settings}
+            min={0}
+            max={1200}
+            error={errorFields.has('height')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+        <div className='row pair'>
+          <TextInput
+            title="Units"
+            name="units"
+            data={temporaryTile.settings}
+            error={errorFields.has('units')}
+            onChange={this.handleSettingsChange}
+            autoComplete="off"
+          />
+        </div>
+      </div>
+    )
+  }
+
+  renderScriptForm() {
+    const { temporaryTile } = this.props
+    const { errorFields } = this.state
+    return (
+      <div>
+        <TextArea
+          title=""
+          name="content"
+          required
+          data={temporaryTile.settings}
+          error={errorFields.has('content')}
+          onChange={this.handleSettingsChange}
+          autoComplete="off"
+        />
+        <div>
+          Scripts will be run on the live site when this page loads.
+        </div>
+      </div>
+    )
+  }
+
+  renderHyperlinkForm() {
+    const { temporaryTile } = this.props
+    const { pageList } = this.state
+    const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
+    return (
+      <div>
+        <div className={'row selects'}>
+          <Select
+            title=''
+            name='target_page_id'
+            selected={temporaryTile.target_page_id || NO_LINK}
+            options={pageList}
+            onChange={this.handleSelect}
+          />
+          <Select
+            title=''
+            name='cursor'
+            selected={temporaryTile.settings.cursor}
+            options={CURSORS}
+            defaultOption="Cursor"
+            onChange={this.handleSettingsSelect}
+          />
+        </div>
+        <div>
+          {isExternalLink &&
+            <TextInput
+              title=""
+              placeholder='http://'
+              name="external_link_url"
+              data={temporaryTile.settings}
+              onChange={this.handleSettingsChange}
+              autoComplete="off"
+            />
+          }
+        </div>
+      </div>
+    )
+  }
+
+  renderAudioForm() {
+    const { temporaryTile } = this.props
+    return (
+      <div>
+        <Checkbox
+          label="Add audio events"
+          name="has_audio"
+          checked={temporaryTile.settings.has_audio}
+          onChange={this.handleSettingsSelect}
+        />
+        {temporaryTile.settings.has_audio && (
+          <div >
+            <AudioSelect
+              title="On click"
+              name="audio_on_click_id"
+              selected={temporaryTile.settings.audio_on_click_id}
+              onChange={this.handleSettingsSelect}
+            />
+
+            <Checkbox
+              label="Navigate when audio finishes"
+              name="navigate_when_audio_finishes"
+              checked={temporaryTile.settings.navigate_when_audio_finishes}
+              onChange={this.handleSettingsSelect}
+              autoComplete="off"
+            />
+
+            <AudioSelect
+              title="On hover"
+              name="audio_on_hover_id"
+              selected={temporaryTile.settings.audio_on_hover_id}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  renderMiscForm() {
+    const { temporaryTile } = this.props
+    return (
+      <div>
+        <Slider
+          title='Opacity'
+          name='opacity'
+          value={temporaryTile.settings.opacity}
+          onChange={this.handleSettingsSelect}
+          min={0.0}
+          max={1.0}
+          step={0.01}
+        />
+        <Slider
+          title='Scale'
+          name='scale'
+          value={temporaryTile.settings.scale}
+          onChange={this.handleSettingsSelect}
+          min={0.01}
+          max={10.0}
+          step={0.01}
+        />
+        <Slider
+          title='Rotation'
+          name='rotation'
+          value={temporaryTile.settings.rotation}
+          onChange={this.handleSettingsSelect}
+          min={-180.0}
+          max={180.0}
+          step={1}
+          type='int'
+        />
+      </div>
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+  tile: state.tile,
+  temporaryTile: state.tile.temporaryTile,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileForm)
diff --git a/frontend/app/views/tile/components/tile.handle.js b/frontend/app/views/tile/components/tile.handle.js
new file mode 100644
index 0000000..03b9f88
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.handle.js
@@ -0,0 +1,8 @@
+import React from 'react'
+
+import handles from 'app/views/tile/handles'
+
+export default function TileHandle (props) {
+  const Tile = handles[props.tile.type]
+  return <Tile {...props} />
+}
diff --git a/frontend/app/views/tile/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js
new file mode 100644
index 0000000..c455489
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.list.js
@@ -0,0 +1,142 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { ReactSortable } from "react-sortablejs"
+
+// import actions from 'app/actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+const DOUBLE_CLICK_THRESHOLD = 250
+
+class TileList extends Component {
+  state = {
+    tiles: [],
+    lastTargetId: 0,
+    lastTimeStamp: 0,
+  }
+  
+  // store doubleclick state as a class property because ReactSortable calls setState promiscuously
+  didDoubleClick = false
+
+  componentDidMount(prevProps) {
+    const { tiles } = this.props.page.show.res
+    const { pages } = this.props.graph.show.res
+    const pageTitles = pages.reduce((a,b) => {
+      a[b.id] = b.title
+      return a
+    }, {})
+    this.setState({ tiles: tiles.slice(0).reverse(), pageTitles })
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.didDoubleClick) return
+    const { tiles } = this.state
+    if (prevState.tiles.length && !pageActions.isSameTileOrder(tiles, prevState.tiles)) {
+      this.props.pageActions.setTileSortOrder(tiles.slice(0).reverse())
+    }
+    // since we store the full tiles here (reversed!), they might change from under us
+    // potentially later refactor to only use a sort order / lookup
+    else if (prevProps.page.show.res.tiles !== this.props.page.show.res.tiles) {
+      const tileLookup = this.props.page.show.res.tiles.reduce((a,b) => {
+        a[b.id] = b
+        return a
+      }, {})
+      const newTiles = this.state.tiles.map(tile => {
+        return tileLookup[tile.id]
+      })
+      this.setState({ tiles: newTiles })
+    }
+  }
+
+  handleChoose(e) {
+    const { lastTargetId, lastTimeStamp } = this.state
+    if (lastTimeStamp
+      && parseInt(e.item.dataset.id) === lastTargetId
+      && (e.timeStamp - lastTimeStamp) < DOUBLE_CLICK_THRESHOLD
+      ) {
+      // console.log('selected', lastTargetId)
+      this.didDoubleClick = true
+      this.props.pageActions.showEditTileForm(lastTargetId)
+    } else {
+      this.setState({
+        lastTargetId: parseInt(e.item.dataset.id),
+        lastTimeStamp: e.timeStamp,
+      })
+    }
+  }
+
+  handleUpdate(newTiles) {
+    if (this.didDoubleClick) return
+    this.setState({ tiles: newTiles })
+  }
+
+  render() {
+    const { tiles, pageTitles } = this.state
+    return (
+      <div className='box tileList'>
+        <ReactSortable
+          list={tiles}
+          setList={newTiles => this.handleUpdate(newTiles)}
+          onChoose={e => this.handleChoose(e)}
+        >
+          {tiles.map(tile => (
+            tile.type === 'image'
+            ? <TileListImage key={tile.id} tile={tile} />
+            : tile.type === 'text'
+            ? <TileListText key={tile.id} tile={tile} />
+            : tile.type === 'link'
+            ? <TileListLink key={tile.id} tile={tile} pageTitles={pageTitles} />
+            : <TileListMisc key={tile.id} tile={tile} />
+          ))}
+        </ReactSortable>
+      </div>
+    )
+  }
+}
+
+const TileListImage = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <div className='thumb' style={{ backgroundImage: 'url(' + tile.settings.url + ')' }} />
+  </div>
+)
+
+const TileListText = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{(tile.settings.content || "").substr(0, 100)}</span>
+  </div>
+)
+
+const TileListLink = ({ tile, pageTitles }) => (
+  <div className='row link' data-id={tile.id}>
+    <span className='snippet'>
+      {'Link: '}
+      {tile.target_page_id === -1
+        ? 'External'
+        : !tile.target_page_id
+        ? 'No link specified!'
+        : tile.target_page_id in pageTitles
+        ? pageTitles[tile.target_page_id]
+        : 'Error, broken link!'}
+    </span>
+  </div>
+)
+
+const TileListMisc = ({ tile }) => (
+  <div className='row' data-id={tile.id}>
+    <span className='snippet'>{"Tile: "}{tile.type}</span>
+  </div>
+)
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileList)
diff --git a/frontend/app/views/tile/components/tile.new.js b/frontend/app/views/tile/components/tile.new.js
new file mode 100644
index 0000000..b491fdd
--- /dev/null
+++ b/frontend/app/views/tile/components/tile.new.js
@@ -0,0 +1,55 @@
+import React, { Component } from 'react'
+// import { Link } from 'react-router-dom'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+
+import { history } from 'app/store'
+import actions from 'app/actions'
+import * as tileActions from '../../tile/tile.actions'
+import * as pageActions from '../../page/page.actions'
+
+import TileForm from '../components/tile.form'
+
+class TileNew extends Component {
+  handleSubmit(data) {
+    console.log(data)
+    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)
+        // }
+        this.props.pageActions.hideAddTileForm()
+        this.props.tileActions.clearTemporaryTile()
+      })
+      .catch(err => {
+        console.error('error')
+      })
+  }
+
+  render() {
+    return (
+      <TileForm
+        isNew
+        graph={this.props.graph.show.res}
+        page={this.props.page.show.res}
+        initialData={null}
+        sortOrder={this.props.page.show.res.tiles ? this.props.page.show.res.tiles.length : []}
+        onSubmit={this.handleSubmit.bind(this)}
+      />
+    )
+  }
+}
+
+const mapStateToProps = state => ({
+  graph: state.graph,
+  page: state.page,
+})
+
+const mapDispatchToProps = dispatch => ({
+  tileActions: bindActionCreators({ ...tileActions }, dispatch),
+  pageActions: bindActionCreators({ ...pageActions }, dispatch),
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(TileNew)
diff --git a/frontend/app/views/tile/handles/index.js b/frontend/app/views/tile/handles/index.js
new file mode 100644
index 0000000..8aaeb06
--- /dev/null
+++ b/frontend/app/views/tile/handles/index.js
@@ -0,0 +1,14 @@
+
+import TileImage from './tile.image'
+import TileVideo from './tile.video'
+import TileLink from './tile.link'
+import TileText from './tile.text'
+import TileScript from './tile.script'
+
+export default {
+  image: TileImage,
+  video: TileVideo,
+  link: TileLink,
+  text: TileText,
+  script: TileScript,
+}
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
new file mode 100644
index 0000000..fd34876
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.image.js
@@ -0,0 +1,54 @@
+import React from 'react'
+import { generateTransform } from 'app/views/tile/tile.utils'
+
+export default function TileImage({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let content
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+
+  if (!tile.settings.url) {
+    return null
+  }
+  if (tile.settings.is_tiled) {
+    style.backgroundImage = 'url(' + tile.settings.url + ')'
+    style.backgroundPosition = tile.settings.align.replace('_', ' ')
+    switch (tile.settings.tile_style) {
+      default:
+      case 'tile':
+        break
+      case 'cover':
+        style.backgroundSize = 'cover'
+        break
+      case 'contain':
+        style.backgroundSize = 'contain'
+        break
+      case 'contain no-repeat':
+        style.backgroundSize = 'contain'
+        style.backgroundRepeat = 'no-repeat'
+        break
+    }
+    className += ' is_tiled'
+  } else {
+    className += ' ' + tile.settings.align
+    content = <img src={tile.settings.url} />
+  }
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
new file mode 100644
index 0000000..839c18c
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+
+export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+
+  if (!tile.settings.content) {
+    return null
+  }
+  let content = ""
+  className += ' ' + tile.settings.align
+  style.width = unitsDimension(tile, 'width')
+  style.height = unitsDimension(tile, 'height')
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
new file mode 100644
index 0000000..6996cc0
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.script.js
@@ -0,0 +1,34 @@
+import React from 'react'
+import { generateTransform } from 'app/views/tile/tile.utils'
+
+export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let content;
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+
+  content = ""
+  if (viewing) {
+    eval(tile.settings.content)
+  } else {
+    content = "SCRIPT"
+  }
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.text.js b/frontend/app/views/tile/handles/tile.text.js
new file mode 100644
index 0000000..5d38c85
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.text.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import { generateTransform, unitsDimension } from 'app/views/tile/tile.utils'
+
+export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleClick }) {
+  // console.log(tile)
+  const style = {
+    transform: generateTransform(tile, box),
+    opacity: tile.settings.opacity,
+  }
+  // console.log(generateTransform(tile))
+  let className = ['tile', tile.type].join(' ')
+  if (tile.target_page_id || (viewing && tile.href)) {
+    className += ' ' + (tile.settings.cursor || 'hand_up')
+  }
+
+  if (!tile.settings.content) {
+    return null
+  }
+  let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+  className += ' ' + tile.settings.align
+  style.width = unitsDimension(tile, 'width')
+  style.height = unitsDimension(tile, 'height')
+  style.fontFamily = tile.settings.font_family
+  style.fontSize = tile.settings.font_size + 'px'
+  style.lineHeight = 1.5
+  style.fontWeight = (tile.settings.font_style || "").indexOf('bold') !== -1 ? 'bold' : 'normal'
+  style.fontStyle = (tile.settings.font_style || "").indexOf('italic') !== -1 ? 'italic' : 'normal'
+  style.backgroundColor = tile.settings.background_color || 'transparent'
+  style.color = tile.settings.font_color || '#dddddd!important'
+
+  return (
+    <div
+      className={className}
+      onMouseDown={onMouseDown}
+      onDoubleClick={onDoubleClick}
+      style={style}
+    >
+      {content}
+    </div>
+  )
+}
diff --git a/frontend/app/views/tile/handles/tile.video.js b/frontend/app/views/tile/handles/tile.video.js
new file mode 100644
index 0000000..001cce2
--- /dev/null
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -0,0 +1,72 @@
+import React, { Component } from 'react'
+
+import { generateTransform, generateVideoStyle } from 'app/views/tile/tile.utils'
+import { timestampToSeconds } from 'app/utils'
+
+export default class TileVideo extends Component {
+  constructor(props) {
+    super(props)
+    this.videoRef = React.createRef()
+    this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
+    this.handleEnded = this.handleEnded.bind(this)
+  }
+  componentDidMount() {
+    this.videoRef.current.addEventListener('ended', this.handleEnded)
+    this.videoRef.current.addEventListener('timeupdate', this.handleTimeUpdate)
+  }
+  componentWillUnmount() {
+    this.videoRef.current.removeEventListener('timeupdate', this.handleTimeUpdate)
+    this.videoRef.current.removeEventListener('ended', this.handleEnded)
+  }
+  handleTimeUpdate() {
+    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
+      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
+      const loop_end = timestampToSeconds(this.props.tile.settings.loop_end) || this.videoRef.current.duration
+      if (this.videoRef.current.currentTime > loop_end) {
+        this.videoRef.current.currentTime = loop_start
+      }
+    }
+  }
+  handleEnded() {
+    this.props.onPlaybackEnded(this.props.tile)
+    if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
+      const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
+      this.videoRef.current.currentTime = loop_start
+    }
+  }
+  render() {
+    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+    // console.log(tile)
+    const style = {
+      transform: generateTransform(tile, box),
+      opacity: tile.settings.opacity,
+    }
+    let className = ['tile', tile.type].join(' ')
+    if (tile.target_page_id || (viewing && tile.href)) {
+      className += ' ' + (tile.settings.cursor || 'hand_up')
+    }
+    // console.log(tile.settings)
+    if (!tile.settings.url) {
+      return null
+    }
+    className += ' ' + tile.settings.align
+    return (
+      <div
+        className={className}
+        onMouseDown={onMouseDown}
+        onDoubleClick={onDoubleClick}
+        style={style}
+      >
+        <video
+          ref={this.videoRef}
+          src={tile.settings.url}
+          autoPlay={true}
+          controls={false}
+          loop={tile.settings.loop}
+          muted={tile.settings.muted}
+          style={generateVideoStyle(tile, bounds)}
+        />
+      </div>
+    )
+  }
+}
diff --git a/frontend/app/views/tile/tile.utils.js b/frontend/app/views/tile/tile.utils.js
new file mode 100644
index 0000000..8782f85
--- /dev/null
+++ b/frontend/app/views/tile/tile.utils.js
@@ -0,0 +1,68 @@
+export const generateTransform = (tile, box) => {
+  let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
+  if (is_tiled) {
+    return 'translateZ(0)'
+  }
+  if (box) {
+    x += box.dx
+    y += box.dy
+  }
+  units = units || 'px'
+  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 + units + ')')
+  transform.push('translateY(' + y + units + ')')
+  if (scale !== 1) {
+    transform.push('scale(' + scale + ')')
+  }
+  if (rotation !== 0) {
+    transform.push('rotateZ(' + rotation + 'deg)')
+  }
+  return transform.join(' ')
+}
+
+export const generateVideoStyle = (tile, bounds) => {
+  const style = {
+    pointerEvents: "none",
+  }
+  switch (tile.settings.video_style) {
+    case 'normal':
+      style.width = "auto"
+      style.height = "auto"
+      break
+    case 'cover':
+      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
+        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
+        style.height = bounds.height
+      } else {
+        style.width = bounds.width
+        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
+      }
+      break
+    case 'contain':
+      if (tile.settings.width && (tile.settings.width / tile.settings.height) > (bounds.width / bounds.height)) {
+        style.width = bounds.width
+        style.height = Math.round((tile.settings.height / tile.settings.width) * bounds.width)
+      } else {
+        style.width = Math.round((tile.settings.width / tile.settings.height) * bounds.height)
+        style.height = bounds.height
+      }
+      break
+  }
+  return style
+}
+
+export const unitsDimension = (tile, dimension) => {
+  const value = tile.settings[dimension]
+  if (!value) return "auto"
+  if (tile.settings.units) return value + tile.settings.units
+  return value + "px"
+}
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index fa90b1f..6f6b850 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -6,7 +6,7 @@ import { connect } from 'react-redux'
 import { history } from 'site/store'
 import actions from 'site/actions'
 import { Loader } from 'app/common/loader.component'
-import TileHandle from 'app/views/page/components/tile.handle'
+import TileHandle from 'app/views/tile/components/tile.handle'
 
 import 'app/views/page/page.css'
 
-- 
cgit v1.2.3-70-g09d2

From 50d5c3c2f10725af8ebb6db47c209f7000abc8f4 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 19:24:13 +0100
Subject: remove foreignkey constraint on target_page_id. toggle popups. show
 list of popups, if a tile link is open/close popup

---
 cli/app/sql/models/page.py                         |  6 ++--
 cli/app/sql/models/tile.py                         |  2 +-
 ...03201916_remove_foreign_key_constraint_from_.py | 29 ++++++++++++++++++
 frontend/app/types.js                              |  2 +-
 frontend/app/views/page/components/page.editor.js  |  2 ++
 frontend/app/views/page/page.actions.js            | 14 +++++++++
 frontend/app/views/page/page.container.js          |  1 +
 frontend/app/views/page/page.reducer.js            | 12 +++++++-
 frontend/app/views/tile/components/tile.form.js    | 34 ++++++++++++++++++----
 frontend/app/views/tile/components/tile.list.js    |  4 +++
 frontend/app/views/tile/components/tile.new.js     |  1 +
 frontend/app/views/tile/handles/tile.link.js       |  3 --
 12 files changed, 95 insertions(+), 15 deletions(-)
 create mode 100644 cli/app/sql/versions/202103201916_remove_foreign_key_constraint_from_.py

(limited to 'cli')

diff --git a/cli/app/sql/models/page.py b/cli/app/sql/models/page.py
index 2f7065b..35efa39 100644
--- a/cli/app/sql/models/page.py
+++ b/cli/app/sql/models/page.py
@@ -1,11 +1,11 @@
 from sqlalchemy import create_engine, Table, Column, Text, String, Integer, DateTime, JSON, ForeignKey
-from sqlalchemy.orm import relationship
+from sqlalchemy.orm import relationship, foreign, remote
 import sqlalchemy.sql.functions as func
 from sqlalchemy_utc import UtcDateTime, utcnow
 from wtforms_alchemy import ModelForm
 
 from app.sql.common import db, Base, Session
-# from app.sql.models.graph import Graph
+from app.sql.models.tile import Tile
 
 from app.settings import app_cfg
 
@@ -23,7 +23,7 @@ class Page(Base):
   updated_at = Column(UtcDateTime(), onupdate=utcnow())
 
   tiles = relationship("Tile", foreign_keys="Tile.page_id", lazy='dynamic', order_by="asc(Tile.sort_order)")
-  backlinks = relationship("Tile", foreign_keys="Tile.target_page_id", lazy='dynamic')
+  backlinks = relationship("Tile", primaryjoin=id == foreign(Tile.target_page_id), lazy='dynamic')
 
   def toJSON(self):
     return {
diff --git a/cli/app/sql/models/tile.py b/cli/app/sql/models/tile.py
index 3f6ce31..ed4a5f8 100644
--- a/cli/app/sql/models/tile.py
+++ b/cli/app/sql/models/tile.py
@@ -18,7 +18,7 @@ class Tile(Base):
   id = Column(Integer, primary_key=True)
   graph_id = Column(Integer, ForeignKey('graph.id'), nullable=True)
   page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
-  target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
+  target_page_id = Column(Integer, nullable=True)
   type = Column(String(16, convert_unicode=True), nullable=False)
   sort_order = Column(Integer, default=0)
   settings = Column(JSON, default={}, nullable=True)
diff --git a/cli/app/sql/versions/202103201916_remove_foreign_key_constraint_from_.py b/cli/app/sql/versions/202103201916_remove_foreign_key_constraint_from_.py
new file mode 100644
index 0000000..ed19feb
--- /dev/null
+++ b/cli/app/sql/versions/202103201916_remove_foreign_key_constraint_from_.py
@@ -0,0 +1,29 @@
+"""remove foreign key constraint from target_page_id
+
+Revision ID: 9b687880918d
+Revises: 3f7df6bf63b8
+Create Date: 2021-03-20 19:16:21.582373
+
+"""
+from alembic import op
+import sqlalchemy as sa
+import sqlalchemy_utc
+
+
+# revision identifiers, used by Alembic.
+revision = '9b687880918d'
+down_revision = '3f7df6bf63b8'
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.drop_constraint('tile_ibfk_3', 'tile', type_='foreignkey')
+    # ### end Alembic commands ###
+
+
+def downgrade():
+    # ### commands auto generated by Alembic - please adjust! ###
+    op.create_foreign_key('tile_ibfk_3', 'tile', 'page', ['target_page_id'], ['id'])
+    # ### end Alembic commands ###
diff --git a/frontend/app/types.js b/frontend/app/types.js
index bcd8053..f0f1e27 100644
--- a/frontend/app/types.js
+++ b/frontend/app/types.js
@@ -15,7 +15,7 @@ export const page = crud_type('page', [
   'update_page_tile',
   'set_tile_sort_order', 'update_tile_sort_order',
   'show_tile_list', 'hide_tile_list', 'toggle_tile_list',
-  'toggle_popups',
+  'toggle_popups', 'load_popups',
   'toggle_sidebar_side',
 ])
 
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 2f14ffb..03190e3 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -174,6 +174,8 @@ class PageEditor extends Component {
     return (
       <div className='page' ref={this.pageRef} style={pageStyle}>
         {res.tiles && res.tiles.map(tile => {
+          console.log(tile.type, tile.settings.is_popup)
+          if (!this.props.page.editor.showingPopups && tile.settings.is_popup) return
           if (temporaryTile && temporaryTile.id === tile.id) {
             tile = temporaryTile
           }
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
index c584848..0ae38e0 100644
--- a/frontend/app/views/page/page.actions.js
+++ b/frontend/app/views/page/page.actions.js
@@ -52,6 +52,20 @@ export const toggleTileList = () => dispatch => {
 
 // Popups
 
+export const loadPopups = (page, popups) => dispatch => {
+  const state = store.getState()
+  page = page || state.page.show.res
+  popups = popups || state.page.editor.popups
+  popups = page.tiles.reduce((acc, tile) => {
+    const { is_popup, popup_group } = tile.settings
+    if (is_popup) {
+      acc[popup_group] = acc[popup_group] || false
+    }
+    return acc
+  }, { ...popups })
+  console.log(popups)
+  dispatch({ type: types.page.load_popups, popups })
+}
 export const togglePopups = () => dispatch => {
   dispatch({ type: types.page.toggle_popups })
 }
diff --git a/frontend/app/views/page/page.container.js b/frontend/app/views/page/page.container.js
index decdf79..0ad9806 100644
--- a/frontend/app/views/page/page.container.js
+++ b/frontend/app/views/page/page.container.js
@@ -44,6 +44,7 @@ class PageContainer extends Component {
     this.props.pageActions.showGraphAndPageIfUnloaded(this.props.match.params)
     .then(data => {
       actions.site.setSiteTitle(data.res.title)
+      this.props.pageActions.loadPopups(data.res, {})
       if (!data.res.tiles.length) {
         this.props.pageActions.showAddTileForm()
       } else {
diff --git a/frontend/app/views/page/page.reducer.js b/frontend/app/views/page/page.reducer.js
index b0c4553..a1f281a 100644
--- a/frontend/app/views/page/page.reducer.js
+++ b/frontend/app/views/page/page.reducer.js
@@ -11,6 +11,7 @@ const initialState = crudState('page', {
     tileList: false,
     showingPopups: true,
     sidebarOnRight: true,
+    popups: {},
   },
   options: {
   }
@@ -202,7 +203,16 @@ export default function pageReducer(state = initialState, action) {
         ...state,
         editor: {
           ...state.editor,
-          togglePopups: !state.editor.togglePopups,
+          showingPopups: !state.editor.showingPopups,
+        }
+      }
+
+    case types.page.load_popups:
+      return {
+        ...state,
+        editor: {
+          ...state.editor,
+          popups: action.popups,
         }
       }
 
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index 728bc05..b33f7b8 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -76,6 +76,12 @@ const PAGE_LIST_TOP_OPTIONS = [
   { name: -99, label: '──────────', disabled: true },
 ]
 
+const NO_POPUP = 0
+const POPUP_LIST_TOP_OPTIONS = [
+  { name: NO_POPUP, label: 'Select a popup group' },
+  { name: -99, label: '──────────', disabled: true },
+]
+
 // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True)
 // https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg
 
@@ -181,6 +187,7 @@ class TileForm extends Component {
     errorFields: new Set([]),
     modified: false,
     pageList: [],
+    popupList: [],
   }
 
   constructor(props){
@@ -211,7 +218,11 @@ class TileForm extends Component {
       ...PAGE_LIST_TOP_OPTIONS,
       ...linkPages.map(page => ({ name: page.id, label: page.path }))
     ]
-    this.setState({ pageList })
+    let popupList = [
+      ...POPUP_LIST_TOP_OPTIONS,
+      ...Object.keys(page.editor.popups).map(popup_group => ({ name: popup_group, label: popup_group }))
+    ]
+    this.setState({ pageList, popupList })
     if (isNew) {
       const newTile = newImage({
         id: "new",
@@ -760,7 +771,7 @@ class TileForm extends Component {
 
   renderHyperlinkForm() {
     const { temporaryTile } = this.props
-    const { pageList } = this.state
+    const { pageList, popupList } = this.state
     const isExternalLink = temporaryTile.target_page_id === EXTERNAL_LINK
     const isPopupLink = (
       temporaryTile.target_page_id === OPEN_POPUP_LINK ||
@@ -785,8 +796,8 @@ class TileForm extends Component {
             onChange={this.handleSettingsSelect}
           />
         </div>
-        <div>
-          {isExternalLink &&
+        {isExternalLink && (
+          <div>
             <TextInput
               title=""
               placeholder='http://'
@@ -795,8 +806,19 @@ class TileForm extends Component {
               onChange={this.handleSettingsChange}
               autoComplete="off"
             />
-          }
-        </div>
+          </div>
+        )}
+        {(temporaryTile.target_page_id === OPEN_POPUP_LINK || temporaryTile.target_page_id === CLOSE_POPUP_LINK) && (
+          <div>
+            <Select
+              title="Popup"
+              name='target_popup'
+              selected={temporaryTile.settings.target_popup || NO_POPUP}
+              options={popupList}
+              onChange={this.handleSettingsSelect}
+            />
+          </div>
+        )}
       </div>
     )
   }
diff --git a/frontend/app/views/tile/components/tile.list.js b/frontend/app/views/tile/components/tile.list.js
index 9ceb999..127ca52 100644
--- a/frontend/app/views/tile/components/tile.list.js
+++ b/frontend/app/views/tile/components/tile.list.js
@@ -114,6 +114,10 @@ const TileListLink = ({ tile, pageTitles }) => (
       {'Link: '}
       {tile.target_page_id === -1
         ? 'External'
+        : tile.target_page_id === -2
+        ? 'Open popup'
+        : tile.target_page_id === -3
+        ? 'Close popup'
         : !tile.target_page_id
         ? 'No link specified!'
         : tile.target_page_id in pageTitles
diff --git a/frontend/app/views/tile/components/tile.new.js b/frontend/app/views/tile/components/tile.new.js
index b491fdd..e0f61a6 100644
--- a/frontend/app/views/tile/components/tile.new.js
+++ b/frontend/app/views/tile/components/tile.new.js
@@ -21,6 +21,7 @@ class TileNew extends Component {
         //   history.push('/' + graph.path + '/' + res.res.path)
         // }
         this.props.pageActions.hideAddTileForm()
+        this.props.pageActions.loadPopups()
         this.props.tileActions.clearTemporaryTile()
       })
       .catch(err => {
diff --git a/frontend/app/views/tile/handles/tile.link.js b/frontend/app/views/tile/handles/tile.link.js
index 839c18c..20d881b 100644
--- a/frontend/app/views/tile/handles/tile.link.js
+++ b/frontend/app/views/tile/handles/tile.link.js
@@ -13,9 +13,6 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
     className += ' ' + (tile.settings.cursor || 'hand_up')
   }
 
-  if (!tile.settings.content) {
-    return null
-  }
   let content = ""
   className += ' ' + tile.settings.align
   style.width = unitsDimension(tile, 'width')
-- 
cgit v1.2.3-70-g09d2

From 19cf3a296741b92548849b1f40e0d3cc517f2fcc Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 22:14:21 +0100
Subject: dimensions based on video

---
 cli/app/site/export.py                            |  4 +++
 frontend/app/views/graph/graph.css                | 10 ++++++-
 frontend/app/views/page/components/page.editor.js | 18 +++++++++++--
 frontend/app/views/page/page.css                  |  3 +++
 frontend/app/views/tile/components/tile.form.js   | 32 ++++++++++++++---------
 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     | 12 +++++++--
 frontend/app/views/tile/tile.utils.js             | 22 ++++++++++++----
 frontend/site/viewer/viewer.container.js          | 29 +++++++++++++++++---
 12 files changed, 117 insertions(+), 37 deletions(-)

(limited to 'cli')

diff --git a/cli/app/site/export.py b/cli/app/site/export.py
index c301a60..4ce8b64 100644
--- a/cli/app/site/export.py
+++ b/cli/app/site/export.py
@@ -93,6 +93,10 @@ def sanitize_graph(graph):
       if tile['target_page_id']:
         if tile['target_page_id'] == -1:
           tile['href'] = tile['settings']['external_link_url']
+        elif tile['target_page_id'] == -2:
+          tile['href'] = '__open_popup'
+        elif tile['target_page_id'] == -3:
+          tile['href'] = '__close_popup'
         elif tile['target_page_id'] > 0:
           tile['href'] = page_path_lookup[tile['target_page_id']]
       if 'url' in tile['settings'] and tile['settings']['url'].startswith('/static'):
diff --git a/frontend/app/views/graph/graph.css b/frontend/app/views/graph/graph.css
index a557280..bfdbe5c 100644
--- a/frontend/app/views/graph/graph.css
+++ b/frontend/app/views/graph/graph.css
@@ -114,10 +114,17 @@
   padding: 0.25rem;
 }
 
+.box form .single label span,
 .box form .pair label span {
   min-width: 3rem;
   padding: 0.25rem 0;
 }
+.box .single label {
+  flex-direction: row;
+  width: 100%;
+  margin-right: 0.5px;
+  min-width: auto;
+}
 .box .pair label {
   flex-direction: row;
   width: 6.5rem;
@@ -138,13 +145,14 @@ button.box_corner {
   background: transparent;
   border: 0;
   border-radius: 4px;
+  transform: scaleX(-1);
 }
 button.box_corner:hover {
   color: #fff;
   background: rgba(64,64,128,0.5);
 }
 .sidebar.left button.box_corner {
-  transform: scaleX(-1);
+  transform: scaleX(1);
 }
 
 .box .slider {
diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js
index 03190e3..7e841ef 100644
--- a/frontend/app/views/page/components/page.editor.js
+++ b/frontend/app/views/page/components/page.editor.js
@@ -16,6 +16,7 @@ import TileHandle from 'app/views/tile/components/tile.handle'
 const defaultState = {
   dragging: false,
   bounds: null,
+  videoBounds: null,
   mouseX: 0,
   mouseY: 0,
   box: {
@@ -37,6 +38,7 @@ class PageEditor extends Component {
     this.handleMouseMove = this.handleMouseMove.bind(this)
     this.handleMouseUp = this.handleMouseUp.bind(this)
     this.handleWindowResize = this.handleWindowResize.bind(this)
+    this.handlePlaybackEnded = this.handlePlaybackEnded.bind(this)
     this.pageRef = React.createRef()
   }
 
@@ -59,7 +61,8 @@ class PageEditor extends Component {
     document.body.addEventListener('mousemove', this.handleMouseMove)
     document.body.addEventListener('mouseup', this.handleMouseUp)
     window.addEventListener('resize', this.handleWindowResize)
-    this.setState({ bounds: this.getBoundingClientRect() })
+    const bounds = this.getBoundingClientRect()
+    this.setState({ bounds })
   }
 
   componentDidUpdate(prevProps) {
@@ -72,6 +75,10 @@ class PageEditor extends Component {
     this.setState({ bounds: this.getBoundingClientRect() })
   }
 
+  handlePlaybackEnded() {
+    //
+  }
+
   handleMouseDown(e, tile) {
     if (e.metaKey || e.ctrlKey || e.altKey || e.button !== 0) return
     const bounds = this.getBoundingClientRect()
@@ -171,10 +178,13 @@ 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') ? {
+      width: res.tiles[0].settings.width,
+      height: res.tiles[0].settings.height,
+    } : this.state.bounds
     return (
       <div className='page' ref={this.pageRef} style={pageStyle}>
         {res.tiles && res.tiles.map(tile => {
-          console.log(tile.type, tile.settings.is_popup)
           if (!this.props.page.editor.showingPopups && tile.settings.is_popup) return
           if (temporaryTile && temporaryTile.id === tile.id) {
             tile = temporaryTile
@@ -184,9 +194,11 @@ class PageEditor extends Component {
               key={tile.id}
               tile={tile}
               bounds={this.state.bounds}
+              videoBounds={videoBounds}
               box={currentTile && tile.id === currentTile.id && currentBox}
               onMouseDown={e => this.handleMouseDown(e, tile)}
               onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)}
+              onPlaybackEnded={this.handlePlaybackEnded}
             />
           )
         })}
@@ -195,8 +207,10 @@ class PageEditor extends Component {
             key={temporaryTile.id}
             tile={temporaryTile}
             bounds={this.state.bounds}
+            videoBounds={videoBounds}
             box={currentTile && temporaryTile.id === currentTile.id && currentBox}
             onMouseDown={e => this.handleMouseDown(e, temporaryTile)}
+            onPlaybackEnded={this.handlePlaybackEnded}
           />
         )}
       </div>
diff --git a/frontend/app/views/page/page.css b/frontend/app/views/page/page.css
index 2014289..2998007 100644
--- a/frontend/app/views/page/page.css
+++ b/frontend/app/views/page/page.css
@@ -117,6 +117,9 @@
 .box .row.pair {
   justify-content: space-between;
 }
+.box .row.single {
+  justify-content: space-between;
+}
 .box .pair label:last-child {
   margin-right: 0;
 }
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index b33f7b8..3066da3 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -64,6 +64,14 @@ const CURSORS = [
   { name: 'unclickable', label: 'Unclickable', },
 ]
 
+const UNITS = [
+  { name: 'px', label: 'pixels' },
+  { name: '%', label: 'percent' },
+  { name: 'video', label: 'video' },
+  { name: 'vmin', label: 'screen min' },
+  { name: 'vmax', label: 'screen max' },
+]
+
 const NO_LINK = 0
 const EXTERNAL_LINK = -1
 const OPEN_POPUP_LINK = -2
@@ -95,7 +103,7 @@ const newImage = (data) => ({
     cursor: 'hand_up',
   },
   type: 'image',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -114,7 +122,7 @@ const newVideo = (data) => ({
     loop_end: 0,
   },
   type: 'video',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -134,7 +142,7 @@ const newText = (data) => ({
     cursor: 'hand_up',
   },
   type: 'text',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -146,7 +154,7 @@ const newLink = (data) => ({
     units: 'px',
   },
   type: 'link',
-  target_page_id: null,
+  target_page_id: 0,
   ...data,
 })
 
@@ -395,6 +403,7 @@ class TileForm extends Component {
       } else {
         validData.id = temporaryTile.id
       }
+      validData.target_page_id = validData.target_page_id || 0
       this.setState({ modified: false })
       console.log('submit', validData)
       onSubmit(validData)
@@ -734,14 +743,13 @@ class TileForm extends Component {
             autoComplete="off"
           />
         </div>
-        <div className='row pair'>
-          <TextInput
-            title="Units"
-            name="units"
-            data={temporaryTile.settings}
-            error={errorFields.has('units')}
-            onChange={this.handleSettingsChange}
-            autoComplete="off"
+        <div className='row single'>
+          <Select
+            name='units'
+            selected={temporaryTile.settings.units}
+            options={UNITS}
+            title='Units'
+            onChange={this.handleSettingsSelect}
           />
         </div>
       </div>
diff --git a/frontend/app/views/tile/handles/tile.image.js b/frontend/app/views/tile/handles/tile.image.js
index fd34876..beeb36a 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileImage({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, 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 20d881b..a87b95f 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -15,8 +15,8 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
 
   let content = ""
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width')
-  style.height = unitsDimension(tile, 'height')
+  style.width = unitsDimension(tile, 'width', videoBounds)
+  style.height = unitsDimension(tile, 'height', videoBounds)
 
   return (
     <div
diff --git a/frontend/app/views/tile/handles/tile.script.js b/frontend/app/views/tile/handles/tile.script.js
index 6996cc0..444a56b 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, 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 5d38c85..172212a 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, viewing, onMouseDown, onDoubleClick }) {
+export default function TileScript({ tile, box, videoBounds, viewing, onMouseDown, onDoubleClick }) {
   // console.log(tile)
   const style = {
-    transform: generateTransform(tile, box),
+    transform: generateTransform(tile, box, videoBounds),
     opacity: tile.settings.opacity,
   }
   // console.log(generateTransform(tile))
@@ -18,8 +18,8 @@ export default function TileScript({ tile, box, viewing, onMouseDown, onDoubleCl
   }
   let content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
   className += ' ' + tile.settings.align
-  style.width = unitsDimension(tile, 'width')
-  style.height = unitsDimension(tile, 'height')
+  style.width = unitsDimension(tile, 'width', videoBounds)
+  style.height = unitsDimension(tile, 'height', 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 a9f0d09..271a671 100644
--- a/frontend/app/views/tile/handles/tile.video.js
+++ b/frontend/app/views/tile/handles/tile.video.js
@@ -10,27 +10,33 @@ export default class TileVideo extends Component {
     this.handleTimeUpdate = this.handleTimeUpdate.bind(this)
     this.handleEnded = this.handleEnded.bind(this)
   }
+  
   componentDidMount() {
     this.bind()
   }
+
   componentDidUpdate() {
     this.unbind()
     this.bind()
   }
+
   componentWillUnmount() {
     this.unbind()
   }
+
   bind() {
     if (!this.videoRef.current) return
     this.el = this.videoRef.current
     this.el.addEventListener('ended', this.handleEnded)
     this.el.addEventListener('timeupdate', this.handleTimeUpdate)
   }
+
   unbind() {
     if (!this.el) return
     this.el.removeEventListener('timeupdate', this.handleTimeUpdate)
     this.el.removeEventListener('ended', this.handleEnded)
   }
+
   handleTimeUpdate() {
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
       const loop_start = timestampToSeconds(this.props.tile.settings.loop_start) || 0
@@ -40,6 +46,7 @@ export default class TileVideo extends Component {
       }
     }
   }
+
   handleEnded() {
     this.props.onPlaybackEnded(this.props.tile)
     if (this.props.tile.settings.loop && this.props.tile.settings.loop_section) {
@@ -47,11 +54,12 @@ export default class TileVideo extends Component {
       this.videoRef.current.currentTime = loop_start
     }
   }
+
   render() {
-    let { tile, bounds, box, viewing, onMouseDown, onDoubleClick } = this.props
+    let { tile, box, bounds, videoBounds, viewing, onMouseDown, onDoubleClick } = this.props
     // console.log(tile)
     const style = {
-      transform: generateTransform(tile, box),
+      transform: generateTransform(tile, box, 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 8782f85..ed1cbc8 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) => {
+export const generateTransform = (tile, box, videoBounds) => {
   let { x, y, align, rotation, scale, units, is_tiled } = tile.settings
   if (is_tiled) {
     return 'translateZ(0)'
@@ -18,8 +18,11 @@ export const generateTransform = (tile, box) => {
   }
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
-  transform.push('translateX(' + x + units + ')')
-  transform.push('translateY(' + y + units + ')')
+  const xUnits = units === 'video' ? videoUnits(x, videoBounds) : x + units
+  const yUnits = units === 'video' ? videoUnits(y, videoBounds) : y + units
+
+  transform.push('translateX(' + xUnits + ')')
+  transform.push('translateY(' + yUnits + ')')
   if (scale !== 1) {
     transform.push('scale(' + scale + ')')
   }
@@ -60,9 +63,18 @@ export const generateVideoStyle = (tile, bounds) => {
   return style
 }
 
-export const unitsDimension = (tile, dimension) => {
+export const unitsDimension = (tile, dimension, videoBounds) => {
   const value = tile.settings[dimension]
   if (!value) return "auto"
-  if (tile.settings.units) return value + tile.settings.units
+  if (tile.settings.units) {
+    if (tile.settings.units === 'video') {
+      return videoUnits(value, videoBounds)
+    }
+    return value + tile.settings.units
+  }
   return value + "px"
 }
+
+export const videoUnits = (value, videoBounds) => (
+  (value / 1000 * Math.max(videoBounds.width, videoBounds.height)) + 'px'
+)
\ No newline at end of file
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index 6f6b850..d1fa885 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -15,6 +15,7 @@ class ViewerContainer extends Component {
     page: {},
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
+    popups: {},
   }
 
   constructor(props) {
@@ -44,9 +45,9 @@ class ViewerContainer extends Component {
     const { pages, home_page } = this.props.graph
     const page = pages[page_path] || pages[home_page]
     if (!this.props.interactive && hasAutoplay(page)) {
-      this.setState({ page, roadblock: true })
+      this.setState({ page, popups: {}, roadblock: true })
     } else {
-      this.setState({ page, roadblock: false })
+      this.setState({ page, popups: {}, roadblock: false })
       actions.site.interact()
       this.props.audio.player.playPage(page)
     }
@@ -67,6 +68,22 @@ class ViewerContainer extends Component {
         window.location.href = tile.href
         return
       }
+      else if (tile.href === '__open_popup') {
+        this.setState({
+          popups: {
+            ...this.state.popups,
+            [tile.settings.target_popup]: true,
+          }
+        })
+      }
+      else if (tile.href === '__close_popup') {
+        this.setState({
+          popups: {
+            ...this.state.popups,
+            [tile.settings.target_popup]: false,
+          }
+        })
+      }
       else if (!tile.settings.navigate_when_audio_finishes) {
         history.push(tile.href)
       }
@@ -86,7 +103,7 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio } = this.state
+    const { page, audio, popups } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -103,11 +120,16 @@ class ViewerContainer extends Component {
     }
     const { settings } = page
     const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' }
+    const videoBounds = (page.tiles.length && page.tiles[0].type === 'video') ? {
+      width: page.tiles[0].settings.width,
+      height: page.tiles[0].settings.height,
+    } : this.state.bounds
     // console.log(page)
     return (
       <div className='body'>
         <div className='page' ref={this.pageRef} style={pageStyle}>
           {page.tiles.map(tile => {
+            if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
             return (
               <TileHandle
                 viewing
@@ -115,6 +137,7 @@ class ViewerContainer extends Component {
                 tile={tile}
                 audio={audio}
                 bounds={this.state.bounds}
+                videoBounds={videoBounds}
                 onMouseDown={e => this.handleMouseDown(e, tile)}
                 onPlaybackEnded={e => this.handlePlaybackEnded(e, tile)}
                 onDoubleClick={e => {}}
-- 
cgit v1.2.3-70-g09d2

From 5bd7c56c63559d6f8c05d50735895efa429d6dd6 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 22:49:06 +0100
Subject: timestampToSeconds converts to float

---
 cli/app/site/export.py                  | 10 ++++++++++
 frontend/app/views/page/page.actions.js |  2 +-
 2 files changed, 11 insertions(+), 1 deletion(-)

(limited to 'cli')

diff --git a/cli/app/site/export.py b/cli/app/site/export.py
index 4ce8b64..67b9538 100644
--- a/cli/app/site/export.py
+++ b/cli/app/site/export.py
@@ -101,6 +101,8 @@ def sanitize_graph(graph):
           tile['href'] = page_path_lookup[tile['target_page_id']]
       if 'url' in tile['settings'] and tile['settings']['url'].startswith('/static'):
         tile['settings']['url'] = '/' + graph['path'] + tile['settings']['url']
+      if len(tile['settings'].get('appear_after', "")):
+        tile['settings']['appear_after'] = timestampToSeconds(tile['settings']['appear_after'])
       sanitize_tile(tile)
     page_path = page_path_lookup[page['id']]
     page_lookup[page_path] = page
@@ -142,3 +144,11 @@ def sanitize_tile(data):
     del data['page_id']
   if 'target_page_id' in data:
     del data['target_page_id']
+
+def timestampToSeconds(time_str):
+  time_str_parts = list(map(float, time_str.strip().split(":")))
+  if len(time_str_parts) == 3:
+    return (time_str_parts[0] * 60 + time_str_parts[1]) * 60 + time_str_parts[2]
+  if len(time_str_parts) == 2:
+    return time_str_parts[0] * 60 + time_str_parts[1]
+  return time_str_parts[0]
diff --git a/frontend/app/views/page/page.actions.js b/frontend/app/views/page/page.actions.js
index 0ae38e0..e42d539 100644
--- a/frontend/app/views/page/page.actions.js
+++ b/frontend/app/views/page/page.actions.js
@@ -63,7 +63,7 @@ export const loadPopups = (page, popups) => dispatch => {
     }
     return acc
   }, { ...popups })
-  console.log(popups)
+  // console.log(popups)
   dispatch({ type: types.page.load_popups, popups })
 }
 export const togglePopups = () => dispatch => {
-- 
cgit v1.2.3-70-g09d2

From 30265efd64167e9fd6b5a489bd7f8239b496ed35 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sat, 20 Mar 2021 23:28:50 +0100
Subject: defer appearance of items on a timer. setup ok for julia and charles
 popups

---
 cli/app/site/export.py                          |  2 +-
 frontend/app/views/tile/components/tile.form.js |  2 +-
 frontend/site/viewer/viewer.container.js        | 25 ++++++++++++++++++++++++-
 3 files changed, 26 insertions(+), 3 deletions(-)

(limited to 'cli')

diff --git a/cli/app/site/export.py b/cli/app/site/export.py
index 67b9538..aa74165 100644
--- a/cli/app/site/export.py
+++ b/cli/app/site/export.py
@@ -102,7 +102,7 @@ def sanitize_graph(graph):
       if 'url' in tile['settings'] and tile['settings']['url'].startswith('/static'):
         tile['settings']['url'] = '/' + graph['path'] + tile['settings']['url']
       if len(tile['settings'].get('appear_after', "")):
-        tile['settings']['appear_after'] = timestampToSeconds(tile['settings']['appear_after'])
+        tile['settings']['appear_after'] = timestampToSeconds(tile['settings']['appear_after']) or 0
       sanitize_tile(tile)
     page_path = page_path_lookup[page['id']]
     page_lookup[page_path] = page
diff --git a/frontend/app/views/tile/components/tile.form.js b/frontend/app/views/tile/components/tile.form.js
index c2f2f60..c2a8f79 100644
--- a/frontend/app/views/tile/components/tile.form.js
+++ b/frontend/app/views/tile/components/tile.form.js
@@ -811,7 +811,7 @@ class TileForm extends Component {
           </div>
         )}
         {(temporaryTile.target_page_id === OPEN_POPUP_LINK || temporaryTile.target_page_id === CLOSE_POPUP_LINK) && (
-          <div>
+          <div className='row single'>
             <Select
               title="Popup"
               name='target_popup'
diff --git a/frontend/site/viewer/viewer.container.js b/frontend/site/viewer/viewer.container.js
index d1fa885..f68a1d3 100644
--- a/frontend/site/viewer/viewer.container.js
+++ b/frontend/site/viewer/viewer.container.js
@@ -16,6 +16,8 @@ class ViewerContainer extends Component {
     bounds: { width: window.innerWidth, height: window.innerHeight },
     roadblock: false,
     popups: {},
+    time: 0,
+    maxDeferTime: 0,
   }
 
   constructor(props) {
@@ -24,6 +26,7 @@ class ViewerContainer extends Component {
     this.handleMouseDown = this.handleMouseDown.bind(this)
     this.handleResize = this.handleResize.bind(this)
     this.removeRoadblock = this.removeRoadblock.bind(this)
+    this.updateTimer = this.updateTimer.bind(this)
     window.addEventListener('resize', this.handleResize)
   }
 
@@ -50,6 +53,24 @@ class ViewerContainer extends Component {
       this.setState({ page, popups: {}, roadblock: false })
       actions.site.interact()
       this.props.audio.player.playPage(page)
+      this.resetTimer(page)
+    }
+  }
+
+  resetTimer(page) {
+    clearTimeout(this.timeout)
+    const maxDeferTime = page.tiles.reduce((max_time, tile) => Math.max(tile.settings.appear_after || 0, max_time), 0)
+    if (maxDeferTime) {
+      this.setState({ time: 0, maxDeferTime })
+      this.timeout = setTimeout(this.updateTimer, 500)
+    }
+  }
+
+  updateTimer() {
+    clearTimeout(this.timeout)
+    this.setState({ time: this.state.time + 0.500 })
+    if (this.state.time < this.state.maxDeferTime) {
+      this.timeout = setTimeout(this.updateTimer, 500)
     }
   }
 
@@ -103,7 +124,7 @@ class ViewerContainer extends Component {
   }
 
   render() {
-    const { page, audio, popups } = this.state
+    const { page, audio, popups, time } = this.state
     if (this.state.roadblock) {
       return this.renderRoadblock()
     }
@@ -130,6 +151,7 @@ class ViewerContainer extends Component {
         <div className='page' ref={this.pageRef} style={pageStyle}>
           {page.tiles.map(tile => {
             if (tile.settings.is_popup && !popups[tile.settings.popup_group]) return
+            if (tile.settings.appear_after && time < tile.settings.appear_after) return
             return (
               <TileHandle
                 viewing
@@ -154,6 +176,7 @@ class ViewerContainer extends Component {
     actions.site.interact()
     this.setState({ roadblock: false })
     this.props.audio.player.playPage(this.state.page)
+    this.resetTimer(this.state.page)
   }
   
   renderRoadblock() {
-- 
cgit v1.2.3-70-g09d2

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

(limited to 'cli')

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