From 03e76928e3747167dceac3d92759a3abe5b685c7 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Wed, 3 Jun 2020 20:32:38 +0200 Subject: positioning tiles --- frontend/views/page/components/page.editor.js | 87 +++++++++++++++++++++------ frontend/views/page/components/tile.edit.js | 7 ++- frontend/views/page/components/tile.form.js | 46 +++++++++----- frontend/views/page/components/tile.new.js | 5 +- 4 files changed, 107 insertions(+), 38 deletions(-) (limited to 'frontend/views/page/components') diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js index 952e45c..5929b15 100644 --- a/frontend/views/page/components/page.editor.js +++ b/frontend/views/page/components/page.editor.js @@ -85,6 +85,7 @@ class PageEditor extends Component { mouseX, mouseY, box: { + dx: 0, dy: 0, x, y, w, h, }, @@ -107,6 +108,7 @@ class PageEditor extends Component { let dy = (e.pageY - mouseY) / bounds.height this.setState({ box: { + dx, dy, x: clamp(x + dx, 0, 1.0 - w), y: clamp(y + dy, 0, 1.0 - h), w, h, @@ -143,50 +145,97 @@ class PageEditor extends Component { render(){ // console.log(this.props.page.show.res) + if (!this.state.bounds) { + return ( +
+ ) + } + const { temporaryTile } = this.props const currentTile = this.state.tile const currentBox = this.state.box const { res } = this.props.page.show // console.log(res.tiles) return (
- {this.state.bounds && res.tiles.map(tile => ( + {res.tiles.map(tile => { + if (temporaryTile && temporaryTile.id === tile) { + tile = temporaryTile + } + return ( + this.handleMouseDown(e, tile)} + /> + ) + })} + {!!(temporaryTile && temporaryTile.id === 'new') && ( this.handleMouseDown(e, tile)} + onMouseDown={e => this.handleMouseDown(e, temporaryTile)} /> - ))} + )}
) } } const TileHandle = ({ tile, bounds, box, onMouseDown }) => { - let style; - if (box) { - style = { - top: (bounds.height) * box.y, - left: (bounds.width) * box.x, - } - } else { - style = { - top: (bounds.height) * Math.min(tile.settings.y, 0.95), - left: (bounds.width) * Math.min(tile.settings.x, 0.95), - } + console.log(tile) + const { width, height } = tile.settings + const style = { + // width, height, + transform: generateTransform(tile), + } + console.log(generateTransform(tile)) + let content; + switch (tile.type) { + case 'image': + content = + break + case 'text': + content = + break } - // console.log(style) return ( -
- {tile.title} +
+ {content}
) } +const generateTransform = tile => { + const { x, y, align, rotation, scale } = tile.settings + const [yalign, xalign] = align.split('_') + let transform = ['translateZ(0)'] + if (yalign === 'center') { + transform.push('translateY(-50%)') + } + if (xalign === 'center') { + transform.push('translateX(-50%)') + } + // if (x % 2 == 1) x += 0.5 + // if (y % 2 == 1) y += 0.5 + transform.push('translateX(' + x + 'px)') + transform.push('translateY(' + y + 'px)') + if (scale !== 1) { + transform.push('scale(' + scale + ')') + } + if (rotation !== 0) { + transform.push('rotateZ(' + rotation + 'rad)') + } + return transform.join(' ') +} + const mapStateToProps = state => ({ graph: state.graph, page: state.page, + temporaryTile: state.tile.temporaryTile, }) const mapDispatchToProps = dispatch => ({ diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js index 6d8d835..c2e3126 100644 --- a/frontend/views/page/components/tile.edit.js +++ b/frontend/views/page/components/tile.edit.js @@ -1,8 +1,9 @@ import React, { Component } from 'react' -import { Link } from 'react-router-dom' +// import { Link } from 'react-router-dom' +// import { bindActionCreators } from 'redux' import { connect } from 'react-redux' -import { history } from '../../../store' +// import { history } from '../../../store' import actions from '../../../actions' import { Loader } from '../../../common' @@ -50,7 +51,7 @@ const mapStateToProps = state => ({ }) const mapDispatchToProps = dispatch => ({ - // searchActions: bindActionCreators({ ...searchActions }, dispatch), + // tileActions: bindActionCreators({ ...tileActions }, dispatch), }) export default connect(mapStateToProps, mapDispatchToProps)(TileEdit) diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js index 9bd8f14..dc81c1a 100644 --- a/frontend/views/page/components/tile.form.js +++ b/frontend/views/page/components/tile.form.js @@ -1,10 +1,14 @@ import React, { Component } from 'react' +import { connect } from 'react-redux' +import { bindActionCreators } from 'redux' import { Link } from 'react-router-dom' import { session } from '../../../session' import { TextInput, NumberInput, Select, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from '../../../common' +import * as tileActions from '../../tile/tile.actions' + const SELECT_TYPES = [ "image", "text" ].map(s => ({ name: s, label: s })) @@ -28,20 +32,21 @@ const REQUIRED_KEYS = { // target_page_id = Column(Integer, ForeignKey('page.id'), nullable=True) const newImage = (data) => ({ + id: 'new', settings: { ...newPosition(), tile: false, - url: "", + url: "https://s3.amazonaws.com/i.asdf.us/im/1c/gradient_gold1-SpringGreen1_1321159749.jpg", }, type: 'image', ...data, }) const newText = (data) => ({ + id: 'new', settings: { ...newPosition(), - tile: false, - url: "", + content: "", width: 200, height: 200, }, @@ -56,11 +61,11 @@ const newPosition = () => ({ align: "center_center", }) -export default class TileForm extends Component { +class TileForm extends Component { state = { title: "", submitTitle: "", - data: { ...newText() }, + data: { ...newImage() }, errorFields: new Set([]), } @@ -77,7 +82,7 @@ export default class TileForm extends Component { graph_id: graph.id, page_id: page.id, }, - }) + }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } handleChange(e) { @@ -100,7 +105,7 @@ export default class TileForm extends Component { this.setState({ errorFields, data: newData, - }) + }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } this.setState({ errorFields, @@ -108,7 +113,7 @@ export default class TileForm extends Component { ...this.state.data, [name]: value, } - }) + }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } handleSettingsChange(e) { @@ -122,11 +127,11 @@ export default class TileForm extends Component { data: { ...this.state.data, settings: { - ...this.state.settings, + ...this.state.data.settings, [name]: value, } } - }) + }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } handleSelect(name, value) { @@ -140,7 +145,7 @@ export default class TileForm extends Component { ...this.state.data, [name]: value, } - }) + }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } handleSettingsSelect(name, value) { @@ -157,7 +162,7 @@ export default class TileForm extends Component { [name]: value, } } - }) + }, () => this.props.tileActions.updateTemporaryTile(this.state.data)) } handleSubmit(e) { @@ -233,6 +238,7 @@ export default class TileForm extends Component { renderPositionInfo() { const { x, y, width, height, rotation, scale } = this.state.data.settings + // console.log(this.state.data.settings) return (
{''}{parseInt(x)}{', '} @@ -246,7 +252,7 @@ export default class TileForm extends Component { renderImageForm() { // const { isNew } = this.props - const { data } = this.state + const { errorFields, data } = this.state return (