From a17b76ac75f506f5da6fe8adf9c36632b60d4226 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sat, 26 Sep 2020 14:56:02 +0200 Subject: refactor to use app-rooted js imports --- frontend/app/views/page/components/page.editor.js | 215 ++++++++ frontend/app/views/page/components/page.header.js | 36 ++ frontend/app/views/page/components/tile.edit.js | 84 +++ frontend/app/views/page/components/tile.form.js | 645 ++++++++++++++++++++++ frontend/app/views/page/components/tile.handle.js | 139 +++++ frontend/app/views/page/components/tile.list.js | 142 +++++ frontend/app/views/page/components/tile.new.js | 55 ++ frontend/app/views/page/cursors.css | 21 + frontend/app/views/page/page.actions.js | 110 ++++ frontend/app/views/page/page.container.js | 95 ++++ frontend/app/views/page/page.css | 167 ++++++ frontend/app/views/page/page.reducer.js | 202 +++++++ 12 files changed, 1911 insertions(+) create mode 100644 frontend/app/views/page/components/page.editor.js create mode 100644 frontend/app/views/page/components/page.header.js create mode 100644 frontend/app/views/page/components/tile.edit.js create mode 100644 frontend/app/views/page/components/tile.form.js create mode 100644 frontend/app/views/page/components/tile.handle.js create mode 100644 frontend/app/views/page/components/tile.list.js create mode 100644 frontend/app/views/page/components/tile.new.js create mode 100644 frontend/app/views/page/cursors.css create mode 100644 frontend/app/views/page/page.actions.js create mode 100644 frontend/app/views/page/page.container.js create mode 100644 frontend/app/views/page/page.css create mode 100644 frontend/app/views/page/page.reducer.js (limited to 'frontend/app/views/page') diff --git a/frontend/app/views/page/components/page.editor.js b/frontend/app/views/page/components/page.editor.js new file mode 100644 index 0000000..d324874 --- /dev/null +++ b/frontend/app/views/page/components/page.editor.js @@ -0,0 +1,215 @@ +import React, { Component } from 'react' +import { Route } from 'react-router-dom' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' + +import { session } from 'app/session' +import actions from 'app/actions' +import * as pageActions from '../page.actions' +import * as tileActions from '../../tile/tile.actions' + +import { Loader } from 'app/common' +import { clamp, dist } from 'app/utils' + +import TileHandle from './tile.handle' + +const defaultState = { + dragging: false, + bounds: null, + mouseX: 0, + mouseY: 0, + box: { + x: 0, y: 0, + w: 0, h: 0, + }, + tile: null, +} + +class PageEditor extends Component { + state = { + ...defaultState, + } + + constructor() { + super() + // bind these events in the constructor, so we can remove event listeners later + this.handleMouseDown = this.handleMouseDown.bind(this) + this.handleMouseMove = this.handleMouseMove.bind(this) + this.handleMouseUp = this.handleMouseUp.bind(this) + this.handleWindowResize = this.handleWindowResize.bind(this) + this.pageRef = React.createRef() + } + + getBoundingClientRect() { + if (!this.pageRef.current) return null + const rect = this.pageRef.current.getBoundingClientRect() + const scrollTop = document.body.scrollTop || document.body.parentNode.scrollTop + const scrollLeft = document.body.scrollLeft || document.body.parentNode.scrollLeft + const bounds = { + top: rect.top + scrollTop, + left: rect.left + scrollLeft, + width: rect.width, + height: rect.height, + } + // console.log(bounds) + return bounds + } + + componentDidMount() { + document.body.addEventListener('mousemove', this.handleMouseMove) + document.body.addEventListener('mouseup', this.handleMouseUp) + window.addEventListener('resize', this.handleWindowResize) + this.setState({ bounds: this.getBoundingClientRect() }) + } + + componentDidUpdate(prevProps) { + if (!this.state.bounds) { + this.setState({ bounds: this.getBoundingClientRect() }) + } + } + + handleWindowResize() { + this.setState({ bounds: this.getBoundingClientRect() }) + } + + handleMouseDown(e, tile) { + const bounds = this.getBoundingClientRect() + const mouseX = e.pageX + const mouseY = e.pageY + // let w = 128 / bounds.width + // let h = 16 / bounds.height + let { x, y } = tile.settings + // x = clamp(x, 0, 1) + // y = clamp(y, 0, 1) + this.setState({ + tile, + draggingBox: true, + bounds, + mouseX, + mouseY, + box: { + dx: 0, dy: 0, + // x, y, + // w, h, + }, + initialBox: { + // x, y, + // w, h, + } + }) + } + + handleMouseMove(e) { + const { + dragging, draggingBox, + bounds, mouseX, mouseY, initialBox, box + } = this.state + if (draggingBox) { + e.preventDefault() + let { x, y, w, h } = initialBox + let dx = (e.pageX - mouseX) + let dy = (e.pageY - mouseY) + this.setState({ + box: { + dx, dy, + // x: clamp(x + (dx / bounds.width), 0, 1.0 - w), + // y: clamp(y + (dy / bounds.height), 0, 1.0 - h), + // w, h, + } + }) + } + } + + handleMouseUp(e) { + // const { actions } = this.props + const { temporaryTile } = this.props + const { dragging, draggingBox, bounds, box, tile } = this.state + if (!dragging && !draggingBox) return + e.preventDefault() + // const { x, y, w, h } = box + const { dx, dy } = box + let url = window.location.pathname + this.setState({ + page: null, + box: null, + initialBox: null, + dragging: false, + draggingBox: false, + }) + // console.log(page) + if (dist(0, 0, dx, dy) < 2) { + return + } + const updatedTile = { + ...tile, + settings: { + ...tile.settings, + x: tile.settings.x + dx, + y: tile.settings.y + dy, + } + } + if (temporaryTile && tile.id === temporaryTile.id) { + this.props.tileActions.updateTemporaryTile(updatedTile) + } + if (tile.id !== 'new') { + console.log(updatedTile) + this.props.pageActions.updatePageTile(updatedTile) + actions.tile.update(updatedTile) + } + } + + render(){ + if (!this.state.bounds || (!this.props.page.show.res && !this.props.page.show.res.tiles)) { + return ( +
+ ) + } + const { temporaryTile } = this.props + const currentTile = this.state.tile + const currentBox = this.state.box + const { res } = this.props.page.show + const { settings } = res + const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } + return ( +
+ {res.tiles.map(tile => { + if (temporaryTile && temporaryTile.id === tile.id) { + tile = temporaryTile + } + return ( + this.handleMouseDown(e, tile)} + onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)} + /> + ) + })} + {!!(temporaryTile && temporaryTile.id === 'new') && ( + this.handleMouseDown(e, temporaryTile)} + /> + )} +
+ ) + } +} + +const mapStateToProps = state => ({ + graph: state.graph, + page: state.page, + temporaryTile: state.tile.temporaryTile, +}) + +const mapDispatchToProps = dispatch => ({ + pageActions: bindActionCreators({ ...pageActions }, dispatch), + tileActions: bindActionCreators({ ...tileActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageEditor) diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js new file mode 100644 index 0000000..eb1c3b9 --- /dev/null +++ b/frontend/app/views/page/components/page.header.js @@ -0,0 +1,36 @@ +import React from 'react' +import { bindActionCreators } from 'redux' +import { connect } from 'react-redux' +import { Link } from 'react-router-dom' + +import * as graphActions from '../../graph/graph.actions' +import * as pageActions from '../page.actions' + +function PageHeader(props) { + return ( +
+
+ {props.site.siteTitle} +
+
+ + + +
+
+ ) +} + +const mapStateToProps = (state) => ({ + // auth: state.auth, + site: state.site, + graph: state.graph, + // isAuthenticated: state.auth.isAuthenticated, +}) + +const mapDispatchToProps = (dispatch) => ({ + graphActions: bindActionCreators({ ...graphActions }, dispatch), + pageActions: bindActionCreators({ ...pageActions }, dispatch), +}) + +export default connect(mapStateToProps, mapDispatchToProps)(PageHeader) diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/page/components/tile.edit.js new file mode 100644 index 0000000..2ea09d1 --- /dev/null +++ b/frontend/app/views/page/components/tile.edit.js @@ -0,0 +1,84 @@ +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 tile = this.props.page.show.res.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 ( +
+ +
+ ) + } + return ( + + ) + } +} + +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/page/components/tile.form.js b/frontend/app/views/page/components/tile.form.js new file mode 100644 index 0000000..5b25f13 --- /dev/null +++ b/frontend/app/views/page/components/tile.form.js @@ -0,0 +1,645 @@ +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 { preloadImage } from 'app/utils' + +import * as tileActions from '../../tile/tile.actions' + +const SELECT_TYPES = [ + "image", "text", "link" +].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'], + text: ['content'], + link: [], +} + +const IMAGE_TILE_STYLES = [ + 'tile', 'cover', 'contain', 'contain no-repeat' +].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: 'hand_up', label: 'Up', }, + { name: 'hand_down', label: 'Down', }, + { name: 'hand_left', label: 'Left', }, + { name: 'hand_right', label: 'Right', }, +] + +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 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, + 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', + }, + type: 'link', + target_page_id: null, + ...data, +}) + +const newPosition = (data) => ({ + x: 0, y: 0, + width: 0, height: 0, + rotation: 0, scale: 1, + opacity: 1, + align: "center_center", + ...data, +}) + +const TYPE_CONSTRUCTORS = { + image: newImage, + text: newText, + link: newLink, +} + +class TileForm extends Component { + state = { + title: "", + submitTitle: "", + errorFields: new Set([]), + modified: false, + pageList: [], + } + + 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, + } + }) + }) + } + + 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
+ return ( +
+

{title}

+
+
+ +
+ + {this.renderPositionInfo()} + + {temporaryTile.type === 'image' + ? this.renderImageForm() + : temporaryTile.type === 'text' + ? this.renderTextForm() + : temporaryTile.type === 'link' + ? this.renderLinkForm() + : ""} + + {this.renderHyperlinkForm()} + {this.renderMiscForm()} + +
+ + {!isNew && + + } +
+ {!!errorFields.size && + + } +
+
+ ) + } + + renderPositionInfo() { + const { temporaryTile } = this.props + const { x, y, width, height, rotation, scale } = temporaryTile.settings + return ( +
+ {parseInt(x)}{', '} + {parseInt(y)}{' '} + {parseInt(width)}{'x'}{parseInt(height)}{' '} + {rotation === 0 || {parseInt(rotation)}{'\u00B0 '}} + {scale === 1 || {'x'}{scale.toFixed(2)}} +
+ ) + } + + renderImageForm() { + // const { isNew } = this.props + const { temporaryTile } = this.props + const { errorFields } = this.state + // console.log(temporaryTile.settings) + return ( +
+
+ {temporaryTile.settings.url &&
} + +
+
+ + {temporaryTile.settings.is_tiled && +