summaryrefslogtreecommitdiff
path: root/frontend/app/views/page/components
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/app/views/page/components')
-rw-r--r--frontend/app/views/page/components/page.editor.js215
-rw-r--r--frontend/app/views/page/components/page.header.js36
-rw-r--r--frontend/app/views/page/components/tile.edit.js84
-rw-r--r--frontend/app/views/page/components/tile.form.js645
-rw-r--r--frontend/app/views/page/components/tile.handle.js139
-rw-r--r--frontend/app/views/page/components/tile.list.js142
-rw-r--r--frontend/app/views/page/components/tile.new.js55
7 files changed, 1316 insertions, 0 deletions
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 (
+ <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)
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 (
+ <header>
+ <div>
+ <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo"><b>{props.site.siteTitle}</b></Link>
+ </div>
+ <div>
+ <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
+ <button onClick={() => props.pageActions.toggleTileList()}>Sort tiles</button>
+ <button onClick={() => props.graphActions.toggleEditPageForm()}>Edit page</button>
+ </div>
+ </header>
+ )
+}
+
+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 (
+ <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/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 <div className='box' />
+ return (
+ <div className='box'>
+ <h1>{title}</h1>
+ <form onSubmit={this.handleSubmit.bind(this)}>
+ <div className="row selects">
+ <Select
+ name='type'
+ selected={temporaryTile.type}
+ options={SELECT_TYPES}
+ title=''
+ onChange={this.handleSelect.bind(this)}
+ />
+ <Select
+ name='align'
+ selected={temporaryTile.settings.align}
+ options={ALIGNMENTS}
+ title=''
+ onChange={this.handleAlignment.bind(this)}
+ />
+ </div>
+
+ {this.renderPositionInfo()}
+
+ {temporaryTile.type === 'image'
+ ? this.renderImageForm()
+ : temporaryTile.type === 'text'
+ ? this.renderTextForm()
+ : temporaryTile.type === 'link'
+ ? this.renderLinkForm()
+ : ""}
+
+ {this.renderHyperlinkForm()}
+ {this.renderMiscForm()}
+
+ <div className='row buttons'>
+ <SubmitButton
+ title={submitTitle}
+ onClick={this.handleSubmit.bind(this)}
+ />
+ {!isNew &&
+ <SubmitButton
+ title={'Delete'}
+ className='destroy'
+ onClick={this.handleDelete.bind(this)}
+ />
+ }
+ </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.bind(this)}
+ autoComplete="off"
+ />
+ </div>
+ <div className='row pair'>
+ <Checkbox
+ label="Tiled"
+ name="is_tiled"
+ checked={temporaryTile.settings.is_tiled}
+ onChange={this.handleSettingsSelect.bind(this)}
+ autoComplete="off"
+ />
+ {temporaryTile.settings.is_tiled &&
+ <Select
+ name='tile_style'
+ selected={temporaryTile.settings.tile_style || 'tile'}
+ options={IMAGE_TILE_STYLES}
+ title=''
+ onChange={this.handleSettingsSelect.bind(this)}
+ />
+ }
+ </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.bind(this)}
+ 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.bind(this)}
+ />
+ <NumberInput
+ title=''
+ name='font_size'
+ data={temporaryTile.settings}
+ min={1}
+ max={1200}
+ error={errorFields.has('font_size')}
+ onChange={this.handleSettingsChange.bind(this)}
+ autoComplete="off"
+ />
+ <Select
+ name='font_style'
+ selected={temporaryTile.settings.font_style || 'normal'}
+ options={TEXT_FONT_STYLES}
+ title=''
+ onChange={this.handleSettingsSelect.bind(this)}
+ />
+ </div>
+ <ColorInput
+ title='Text'
+ name='font_color'
+ data={temporaryTile.settings}
+ error={errorFields.has('font_color')}
+ onChange={this.handleSettingsChange.bind(this)}
+ autoComplete="off"
+ />
+ <ColorInput
+ title='BG'
+ name='background_color'
+ data={temporaryTile.settings}
+ error={errorFields.has('background_color')}
+ onChange={this.handleSettingsChange.bind(this)}
+ 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.bind(this)}
+ autoComplete="off"
+ />
+ <NumberInput
+ title="Height"
+ name="height"
+ data={temporaryTile.settings}
+ min={0}
+ max={1200}
+ error={errorFields.has('height')}
+ onChange={this.handleSettingsChange.bind(this)}
+ 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.bind(this)}
+ autoComplete="off"
+ />
+ <NumberInput
+ title="Height"
+ name="height"
+ data={temporaryTile.settings}
+ min={0}
+ max={1200}
+ error={errorFields.has('height')}
+ onChange={this.handleSettingsChange.bind(this)}
+ autoComplete="off"
+ />
+ </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.bind(this)}
+ />
+ <Select
+ title=''
+ name='cursor'
+ selected={temporaryTile.settings.cursor}
+ options={CURSORS}
+ defaultOption="Cursor"
+ onChange={this.handleSettingsSelect.bind(this)}
+ />
+ </div>
+ <div>
+ {isExternalLink &&
+ <TextInput
+ title=""
+ placeholder='http://'
+ name="external_link_url"
+ data={temporaryTile.settings}
+ onChange={this.handleSettingsChange.bind(this)}
+ autoComplete="off"
+ />
+ }
+ </div>
+ </div>
+ )
+ }
+
+ renderMiscForm() {
+ const { temporaryTile } = this.props
+ return (
+ <div>
+ <Slider
+ title='Opacity'
+ name='opacity'
+ value={temporaryTile.settings.opacity}
+ onChange={this.handleSettingsSelect.bind(this)}
+ min={0.0}
+ max={1.0}
+ step={0.01}
+ />
+ <Slider
+ title='Scale'
+ name='scale'
+ value={temporaryTile.settings.scale}
+ onChange={this.handleSettingsSelect.bind(this)}
+ min={0.01}
+ max={10.0}
+ step={0.01}
+ />
+ <Slider
+ title='Rotation'
+ name='rotation'
+ value={temporaryTile.settings.rotation}
+ onChange={this.handleSettingsSelect.bind(this)}
+ 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
new file mode 100644
index 0000000..e91f0b1
--- /dev/null
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -0,0 +1,139 @@
+import React, { Component } from 'react'
+import { Link } from 'react-router-dom'
+
+const TileHandle = ({ tile, bounds, box, viewing, onMouseDown, onDoubleClick }) => {
+ // 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 'text':
+ if (!tile.settings.content) {
+ return null
+ }
+ content = <span dangerouslySetInnerHTML={{ __html: tile.settings.content }} />
+ className += ' ' + tile.settings.align
+ style.width = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+ style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+ 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 = tile.settings.width ? tile.settings.width + 'px' : 'auto'
+ style.height = tile.settings.height ? tile.settings.height + 'px' : 'auto'
+ break
+ }
+ if (viewing && tile.href) {
+ if (tile.href.indexOf('http') === 0) {
+ return (
+ <a href={tile.href} rel='noopener'>
+ <div
+ className={className}
+ style={style}
+ >
+ {content}
+ </div>
+ </a>
+ )
+ } else {
+ return (
+ <Link to={tile.href}>
+ <div
+ className={className}
+ onMouseDown={onMouseDown}
+ style={style}
+ >
+ {content}
+ </div>
+ </Link>
+ )
+ }
+ } else {
+ return (
+ <div
+ className={className}
+ onMouseDown={onMouseDown}
+ onDoubleClick={onDoubleClick}
+ style={style}
+ >
+ {content}
+ </div>
+ )
+ }
+}
+
+const generateTransform = (tile, box) => {
+ let { x, y, align, rotation, scale, is_tiled } = tile.settings
+ if (is_tiled) {
+ return 'translateZ(0)'
+ }
+ if (box) {
+ x += box.dx
+ y += box.dy
+ }
+ 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 + 'deg)')
+ }
+ return transform.join(' ')
+}
+
+export default TileHandle
diff --git a/frontend/app/views/page/components/tile.list.js b/frontend/app/views/page/components/tile.list.js
new file mode 100644
index 0000000..c455489
--- /dev/null
+++ b/frontend/app/views/page/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/page/components/tile.new.js b/frontend/app/views/page/components/tile.new.js
new file mode 100644
index 0000000..fb609a5
--- /dev/null
+++ b/frontend/app/views/page/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.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)
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 11:54:05 +0000