extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2024-11-22 07:43:46 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add show modification only checkbox

Browse Source
This commit is contained in:
Johannes Zillmann 2017-02-03 13:14:42 +01:00
parent 12f6105d90
commit 9977814d34
2 changed files with 105 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/javascript/components/DebugView.jsx
View File

@ -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 => <PdfPageView key={ page.index } pdfPage={ page } />);
pageComponents = transformedPages.map(page => <PdfPageView key={ page.index } pdfPage={ page } modificationsOnly={ this.state.modificationsOnly } />);
showModificationCheckbox = true;
break;
case ContentView.TEXT:
//transformedPages.forEach(p => console.debug(p));
@ -117,18 +128,30 @@ export default class DebugView extends React.Component {
<tr>
<td>
<ButtonToolbar>
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
← Previous
</Button>
{ ' ' }
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
Next →
</Button>
<DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
{ transformations.map((transformation, i) => <MenuItem key={ i } eventKey={ i } onSelect={ this.selectTransformation.bind(this, i) }>
{ transformation.name }
</MenuItem>) }
</DropdownButton>
<ButtonGroup>
<Button className={ currentTransformation > 0 ? 'btn-round' : 'btn-round disabled' } onClick={ this.prevTransformation.bind(this) }>
← Previous
</Button>
</ButtonGroup>
<ButtonGroup>
{ ' ' }
<Button className={ currentTransformation < transformations.length - 1 ? 'btn-round' : 'btn-round disabled' } onClick={ this.nextTransformation.bind(this) }>
Next →
</Button>
</ButtonGroup>
<ButtonGroup>
<DropdownButton title={ currentTransformationName } id="dropdown-size-medium">
{ transformations.map((transformation, i) => <MenuItem key={ i } eventKey={ i } onSelect={ this.selectTransformation.bind(this, i) }>
{ transformation.name }
</MenuItem>) }
</DropdownButton>
</ButtonGroup>
<ButtonGroup>
{ showModificationCheckbox &&
<Checkbox onClick={ this.showModifications.bind(this) }>
Show only modifications
</Checkbox> }
</ButtonGroup>
</ButtonToolbar>
</td>
<td style={ { padding: '5px' } }>

126
src/javascript/components/PdfPageView.jsx
View File

@ -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 = <div/>
if (this.props.modificationsOnly) {
textItems = textItems.filter(item => item.annotation);
}
if (!this.props.modificationsOnly || textItems.length > 0) {
content = <div>
<h2>{ header }</h2>
<Table responsive>
<thead>
<tr>
<th>
#
</th>
<th>
Text
</th>
<th>
X
</th>
<th>
Y
</th>
<th>
Width
</th>
<th>
Height
</th>
<th>
Annotation
</th>
</tr>
</thead>
<tbody>
{ textItems.map((textItem, i) => <tr key={ i } style={ textItem.annotation ? {
color: textItem.annotation.color
} : null }>
<td>
{ i }
</td>
<td>
{ textItem.text }
</td>
<td>
{ textItem.x }
</td>
<td>
{ textItem.y }
</td>
<td>
{ textItem.width }
</td>
<td>
{ textItem.height }
</td>
<td>
{ textItem.annotation ? textItem.annotation.category : '' }
</td>
</tr>
) }
</tbody>
</Table>
</div>
}
return (
<div>
<h2>{ header }</h2>
<Table responsive>
<thead>
<tr>
<th>
#
</th>
<th>
Text
</th>
<th>
X
</th>
<th>
Y
</th>
<th>
Width
</th>
<th>
Height
</th>
<th>
Annotation
</th>
</tr>
</thead>
<tbody>
{ this.props.pdfPage.textItems.map((textItem, i) => <tr key={ i } style={ textItem.annotation ? {
color: textItem.annotation.color
} : null }>
<td>
{ i }
</td>
<td>
{ textItem.text }
</td>
<td>
{ textItem.x }
</td>
<td>
{ textItem.y }
</td>
<td>
{ textItem.width }
</td>
<td>
{ textItem.height }
</td>
<td>
{ textItem.annotation ? textItem.annotation.category : '' }
</td>
</tr>
) }
</tbody>
</Table>
</div>
content
);
}
}