diff options
Diffstat (limited to 'frontend/views/page/components/page.editor.js')
| -rw-r--r-- | frontend/views/page/components/page.editor.js | 215 |
1 files changed, 0 insertions, 215 deletions
diff --git a/frontend/views/page/components/page.editor.js b/frontend/views/page/components/page.editor.js deleted file mode 100644 index bee86a0..0000000 --- a/frontend/views/page/components/page.editor.js +++ /dev/null @@ -1,215 +0,0 @@ -import React, { Component } from 'react' -import { Route } from 'react-router-dom' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' - -import { session } from '../../../session' -import actions from '../../../actions' -import * as pageActions from '../page.actions' -import * as tileActions from '../../tile/tile.actions' - -import { Loader } from '../../../common' -import { clamp, dist } from '../../../util' - -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 ( - <div className='page' ref={this.pageRef} /> - ) - } - const { temporaryTile } = this.props - const currentTile = this.state.tile - const currentBox = this.state.box - const { res } = this.props.page.show - const { settings } = res - const pageStyle = { backgroundColor: settings ? settings.background_color : '#000000' } - return ( - <div className='page' ref={this.pageRef} style={pageStyle}> - {res.tiles.map(tile => { - if (temporaryTile && temporaryTile.id === tile.id) { - tile = temporaryTile - } - return ( - <TileHandle - key={tile.id} - tile={tile} - bounds={this.state.bounds} - box={currentTile && tile.id === currentTile.id && currentBox} - onMouseDown={e => this.handleMouseDown(e, tile)} - onDoubleClick={e => this.props.pageActions.showEditTileForm(tile.id)} - /> - ) - })} - {!!(temporaryTile && temporaryTile.id === 'new') && ( - <TileHandle - key={temporaryTile.id} - tile={temporaryTile} - bounds={this.state.bounds} - box={currentTile && temporaryTile.id === currentTile.id && currentBox} - onMouseDown={e => this.handleMouseDown(e, temporaryTile)} - /> - )} - </div> - ) - } -} - -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) |