summaryrefslogtreecommitdiff
path: root/frontend/views
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/views')
-rw-r--r--frontend/views/graph/components/graph.editor.js35
-rw-r--r--frontend/views/graph/components/page.edit.js2
-rw-r--r--frontend/views/graph/graph.css7
-rw-r--r--frontend/views/graph/graph.reducer.js6
-rw-r--r--frontend/views/page/components/page.header.js3
-rw-r--r--frontend/views/page/components/tile.edit.js1
-rw-r--r--frontend/views/page/components/tile.form.js4
-rw-r--r--frontend/views/page/components/tile.new.js1
-rw-r--r--frontend/views/page/page.actions.js32
-rw-r--r--frontend/views/page/page.container.js13
-rw-r--r--frontend/views/page/page.reducer.js6
11 files changed, 82 insertions, 28 deletions
diff --git a/frontend/views/graph/components/graph.editor.js b/frontend/views/graph/components/graph.editor.js
index 1b2d446..5093327 100644
--- a/frontend/views/graph/components/graph.editor.js
+++ b/frontend/views/graph/components/graph.editor.js
@@ -1,14 +1,15 @@
import React, { Component } from 'react'
-import { Route } from 'react-router-dom'
+import { Route, Link } from 'react-router-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
+import { history } from '../../../store'
import { session } from '../../../session'
import actions from '../../../actions'
import * as graphActions from '../graph.actions'
import { Loader } from '../../../common'
-import { clamp } from '../../../util'
+import { clamp, dist } from '../../../util'
const defaultState = {
dragging: false,
@@ -80,7 +81,7 @@ class GraphEditor extends Component {
y = clamp(y, 0, 1)
this.setState({
page,
- draggingBox: true,
+ dragging: true,
bounds,
mouseX,
mouseY,
@@ -97,10 +98,10 @@ class GraphEditor extends Component {
handleMouseMove(e) {
const {
- dragging, draggingBox,
+ dragging,
bounds, mouseX, mouseY, initialBox, box
} = this.state
- if (draggingBox) {
+ if (dragging) {
e.preventDefault()
let { x, y, w, h } = initialBox
let dx = (e.pageX - mouseX) / bounds.width
@@ -117,9 +118,10 @@ class GraphEditor extends Component {
handleMouseUp(e) {
// const { actions } = this.props
- const { dragging, draggingBox, bounds, box, page } = this.state
- if (!dragging && !draggingBox) return
+ const { dragging, bounds, initialBox, box, page } = this.state
+ if (!dragging) return
e.preventDefault()
+ const { width, height } = bounds
const { x, y, w, h } = box
let url = window.location.pathname
this.setState({
@@ -127,9 +129,8 @@ class GraphEditor extends Component {
box: null,
initialBox: null,
dragging: false,
- draggingBox: false,
})
- // console.log(page)
+ if (dist(width * x, height * y, width * initialBox.x, height * initialBox.y) < 3) return
const updatedPage = {
...page,
settings: {
@@ -145,13 +146,14 @@ class GraphEditor extends Component {
// console.log(this.props.graph.show.res)
const currentPage = this.state.page
const currentBox = this.state.box
- const { res } = this.props.graph.show
+ const { res: graph } = this.props.graph.show
// console.log(res.pages)
return (
<div className='graph' ref={this.graphRef}>
- {this.state.bounds && res.pages.map(page => (
+ {this.state.bounds && graph.pages.map(page => (
<PageHandle
key={page.id}
+ graph={graph}
page={page}
bounds={this.state.bounds}
box={currentPage && page.id === currentPage.id && currentBox}
@@ -163,7 +165,7 @@ class GraphEditor extends Component {
}
}
-const PageHandle = ({ page, bounds, box, onMouseDown }) => {
+const PageHandle = ({ graph, page, bounds, box, onMouseDown }) => {
let style;
if (box) {
style = {
@@ -176,10 +178,17 @@ const PageHandle = ({ page, bounds, box, onMouseDown }) => {
left: (bounds.width) * Math.min(page.settings.x, 0.95),
}
}
+ const url = '/' + graph.path + '/' + page.path
// console.log(style)
return (
- <div className='handle' onMouseDown={onMouseDown} style={style}>
+ <div
+ className='handle'
+ onMouseDown={onMouseDown}
+ onDoubleClick={() => history.push(url)}
+ style={style}
+ >
{page.title}
+ <Link to={url}>{'>'}</Link>
</div>
)
}
diff --git a/frontend/views/graph/components/page.edit.js b/frontend/views/graph/components/page.edit.js
index f4f351b..1e59647 100644
--- a/frontend/views/graph/components/page.edit.js
+++ b/frontend/views/graph/components/page.edit.js
@@ -20,7 +20,7 @@ class PageEdit extends Component {
.then(response => {
// response
console.log(response)
- history.push('/' + data.path)
+ // history.push('/' + data.path)
})
}
diff --git a/frontend/views/graph/graph.css b/frontend/views/graph/graph.css
index a2ab8a4..73ac103 100644
--- a/frontend/views/graph/graph.css
+++ b/frontend/views/graph/graph.css
@@ -66,4 +66,9 @@
user-select: none;
cursor: arrow;
}
-
+.handle a {
+ margin-left: 0.25rem;
+ color: #fff;
+ font-weight: bold;
+ text-decoration: none;
+}
diff --git a/frontend/views/graph/graph.reducer.js b/frontend/views/graph/graph.reducer.js
index 9e682e4..3dcea1d 100644
--- a/frontend/views/graph/graph.reducer.js
+++ b/frontend/views/graph/graph.reducer.js
@@ -42,6 +42,7 @@ export default function graphReducer(state = initialState, action) {
editor: {
...state.editor,
addingPage: true,
+ editingPage: false,
}
}
@@ -59,7 +60,8 @@ export default function graphReducer(state = initialState, action) {
...state,
editor: {
...state.editor,
- addingPage: true,
+ addingPage: false,
+ editingPage: true,
}
}
@@ -68,7 +70,7 @@ export default function graphReducer(state = initialState, action) {
...state,
editor: {
...state.editor,
- addingPage: false,
+ editingPage: false,
}
}
diff --git a/frontend/views/page/components/page.header.js b/frontend/views/page/components/page.header.js
index a6c47ee..3eff339 100644
--- a/frontend/views/page/components/page.header.js
+++ b/frontend/views/page/components/page.header.js
@@ -9,7 +9,7 @@ function PageHeader(props) {
return (
<header>
<div>
- <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
+ <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.showAddTileForm()}>+ Add tile</button>
@@ -21,6 +21,7 @@ function PageHeader(props) {
const mapStateToProps = (state) => ({
// auth: state.auth,
site: state.site,
+ graph: state.graph,
// isAuthenticated: state.auth.isAuthenticated,
})
diff --git a/frontend/views/page/components/tile.edit.js b/frontend/views/page/components/tile.edit.js
index 3420505..6d8d835 100644
--- a/frontend/views/page/components/tile.edit.js
+++ b/frontend/views/page/components/tile.edit.js
@@ -36,6 +36,7 @@ class TileEdit extends Component {
<TileForm
data={show.res}
graph={this.props.graph.show.res}
+ page={this.props.page.show.res}
onSubmit={this.handleSubmit.bind(this)}
/>
)
diff --git a/frontend/views/page/components/tile.form.js b/frontend/views/page/components/tile.form.js
index 1e75cd8..6b9d0a7 100644
--- a/frontend/views/page/components/tile.form.js
+++ b/frontend/views/page/components/tile.form.js
@@ -25,7 +25,7 @@ export default class TileForm extends Component {
}
componentDidMount() {
- const { graph, data, isNew } = this.props
+ const { graph, page, data, isNew } = this.props
const title = isNew ? 'new tile' : 'editing ' + data.title
const submitTitle = isNew ? "Create Tile" : "Save Changes"
this.setState({
@@ -33,7 +33,7 @@ export default class TileForm extends Component {
submitTitle,
errorFields: new Set([]),
data: {
- ...newTile({ graph_id: graph.id }),
+ ...newTile({ graph_id: graph.id, page_id: page.id }),
...data,
},
})
diff --git a/frontend/views/page/components/tile.new.js b/frontend/views/page/components/tile.new.js
index 7445f27..cb5eaa8 100644
--- a/frontend/views/page/components/tile.new.js
+++ b/frontend/views/page/components/tile.new.js
@@ -28,6 +28,7 @@ class TileNew extends Component {
<TileForm
isNew
graph={this.props.graph.show.res}
+ page={this.props.page.show.res}
data={{}}
onSubmit={this.handleSubmit.bind(this)}
/>
diff --git a/frontend/views/page/page.actions.js b/frontend/views/page/page.actions.js
index cfd0f98..941bd9b 100644
--- a/frontend/views/page/page.actions.js
+++ b/frontend/views/page/page.actions.js
@@ -1,13 +1,39 @@
import * as types from '../../types'
+import { store } from '../../store'
+import actions from '../../actions'
export const showAddTileForm = () => dispatch => {
- dispatch({ type: types.graph.show_add_tile_form })
+ dispatch({ type: types.page.show_add_tile_form })
}
export const hideAddTileForm = () => dispatch => {
- dispatch({ type: types.graph.hide_add_tile_form })
+ dispatch({ type: types.page.hide_add_tile_form })
}
export const updatePageTile = tile => dispatch => {
- dispatch({ type: types.graph.update_graph_tile, tile })
+ dispatch({ type: types.page.update_graph_tile, tile })
}
+
+export const showGraphAndPageIfUnloaded = ({ graph_name, page_name }) => dispatch => (
+ new Promise((resolve, reject) => {
+ showGraphIfUnloaded({ graph_name })(dispatch)
+ .then(graph => (
+ actions.page.show('name/' + graph_name + '/' + page_name)
+ .then(resolve)
+ .catch(reject)
+ ))
+ .catch(reject)
+ })
+)
+
+export const showGraphIfUnloaded = ({ graph_name }) => dispatch => (
+ new Promise((resolve, reject) => {
+ const { res: graph } = store.getState().graph.show
+ if (graph && graph.path === graph_name) {
+ return resolve(graph)
+ }
+ actions.graph.show('name/' + graph_name)
+ .then(resolve)
+ .catch(reject)
+ })
+) \ No newline at end of file
diff --git a/frontend/views/page/page.container.js b/frontend/views/page/page.container.js
index 2de56bb..bbb1f3a 100644
--- a/frontend/views/page/page.container.js
+++ b/frontend/views/page/page.container.js
@@ -8,8 +8,10 @@ import './page.css'
import actions from '../../actions'
import { Loader } from '../../common'
-// import * as uploadActions from './upload.actions'
+import * as graphActions from '../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'
@@ -37,9 +39,12 @@ class PageContainer extends Component {
}
load() {
actions.site.setSiteTitle("loading " + this.props.match.params.page_name + "...")
- actions.page.show('name/' + this.props.match.params.graph_name + '/' + this.props.match.params.page_name)
+ this.props.pageActions.showGraphAndPageIfUnloaded(this.props.match.params)
.then(data => {
actions.site.setSiteTitle(data.res.title)
+ if (!data.res.tiles.length) {
+ this.props.pageActions.showAddTileForm()
+ }
})
}
render() {
@@ -61,6 +66,7 @@ class PageContainer extends Component {
<PageHeader />
<div className='body'>
<PageEditor />
+ {this.props.graph.editor.editingPage && <PageEdit />}
{this.props.page.editor.addingTile && <TileNew />}
{this.props.page.editor.editingTile && <TileEdit />}
</div>
@@ -75,7 +81,8 @@ const mapStateToProps = state => ({
})
const mapDispatchToProps = dispatch => ({
- // uploadActions: bindActionCreators({ ...uploadActions }, dispatch),
+ graphActions: bindActionCreators({ ...graphActions }, dispatch),
+ pageActions: bindActionCreators({ ...pageActions }, dispatch),
})
export default connect(mapStateToProps, mapDispatchToProps)(PageContainer)
diff --git a/frontend/views/page/page.reducer.js b/frontend/views/page/page.reducer.js
index d1d6510..1494bc2 100644
--- a/frontend/views/page/page.reducer.js
+++ b/frontend/views/page/page.reducer.js
@@ -42,6 +42,7 @@ export default function pageReducer(state = initialState, action) {
editor: {
...state.editor,
addingTile: true,
+ editingTile: false,
}
}
@@ -59,7 +60,8 @@ export default function pageReducer(state = initialState, action) {
...state,
editor: {
...state.editor,
- addingTile: true,
+ addingTile: false,
+ editingTile: true,
}
}
@@ -68,7 +70,7 @@ export default function pageReducer(state = initialState, action) {
...state,
editor: {
...state.editor,
- addingTile: false,
+ editingTile: false,
}
}
generated by cgit v1.2.3-70-g09d2 (git 2.51.0) at 2025-12-10 22:33:32 +0000