diff --git a/src/javascript/components/DebugView.jsx b/src/javascript/components/DebugView.jsx index 1deb8c8..09f7d9f 100644 --- a/src/javascript/components/DebugView.jsx +++ b/src/javascript/components/DebugView.jsx @@ -1,11 +1,13 @@ import React from 'react'; import ButtonToolbar from 'react-bootstrap/lib/ButtonToolbar' +import ButtonGroup from 'react-bootstrap/lib/ButtonGroup' import Button from 'react-bootstrap/lib/Button' import DropdownButton from 'react-bootstrap/lib/DropdownButton' import Pagination from 'react-bootstrap/lib/Pagination' import MenuItem from 'react-bootstrap/lib/MenuItem' import Label from 'react-bootstrap/lib/Label' +import Checkbox from 'react-bootstrap/lib/Checkbox' import ContentView from '../models/ContentView.jsx'; import PdfPageView from './PdfPageView.jsx'; @@ -23,7 +25,8 @@ export default class DebugView extends React.Component { super(props); this.state = { currentTransformation: 0, - pageNr: -1 + pageNr: -1, + modificationsOnly: false }; } @@ -51,6 +54,12 @@ export default class DebugView extends React.Component { }); } + showModifications() { + this.setState({ + modificationsOnly: !this.state.modificationsOnly + }); + } + render() { const {currentTransformation, pageNr} = this.state; @@ -72,9 +81,11 @@ export default class DebugView extends React.Component { transformedPages = transformedPages.filter((elem, i) => pageNr == -1 || i == pageNr); var pageComponents; + var showModificationCheckbox = false; switch (contentView) { case ContentView.PDF: - pageComponents = transformedPages.map(page => ); + pageComponents = transformedPages.map(page => ); + showModificationCheckbox = true; break; case ContentView.TEXT: //transformedPages.forEach(p => console.debug(p)); @@ -117,18 +128,30 @@ export default class DebugView extends React.Component { - - { ' ' } - - - { transformations.map((transformation, i) => - { transformation.name } - ) } - + + + + + { ' ' } + + + + + { transformations.map((transformation, i) => + { transformation.name } + ) } + + + + { showModificationCheckbox && + + Show only modifications + } + diff --git a/src/javascript/components/PdfPageView.jsx b/src/javascript/components/PdfPageView.jsx index f61c24d..85a693c 100644 --- a/src/javascript/components/PdfPageView.jsx +++ b/src/javascript/components/PdfPageView.jsx @@ -6,69 +6,79 @@ export default class PdfPageView extends React.Component { static propTypes = { pdfPage: React.PropTypes.object.isRequired, + modificationsOnly: React.PropTypes.bool.isRequired, }; render() { const header = "Page " + (this.props.pdfPage.index + 1); + var textItems = this.props.pdfPage.textItems; + var content =
+ if (this.props.modificationsOnly) { + textItems = textItems.filter(item => item.annotation); + } + + if (!this.props.modificationsOnly || textItems.length > 0) { + content =
+

{ header }

+ + + + + + + + + + + + + + { textItems.map((textItem, i) => + + + + + + + + + ) } + +
+ # + + Text + + X + + Y + + Width + + Height + + Annotation +
+ { i } + + { textItem.text } + + { textItem.x } + + { textItem.y } + + { textItem.width } + + { textItem.height } + + { textItem.annotation ? textItem.annotation.category : '' } +
+
+ } return ( -
-

{ header }

- - - - - - - - - - - - - - { this.props.pdfPage.textItems.map((textItem, i) => - - - - - - - - - ) } - -
- # - - Text - - X - - Y - - Width - - Height - - Annotation -
- { i } - - { textItem.text } - - { textItem.x } - - { textItem.y } - - { textItem.width } - - { textItem.height } - - { textItem.annotation ? textItem.annotation.category : '' } -
-
+ content ); } } \ No newline at end of file