Skip to content

Commit

Permalink
Does not lose split alignments. Now to work on reset.
Browse files Browse the repository at this point in the history
  • Loading branch information
PhotoNomad0 committed May 14, 2024
1 parent 2e30781 commit f587e35
Show file tree
Hide file tree
Showing 2 changed files with 107 additions and 94 deletions.
112 changes: 105 additions & 7 deletions src/components/WordAlignerArea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,25 @@ import { RxLink2, RxLinkBreak2 } from 'react-icons/rx'
import { AlignmentHelpers, WordAligner } from 'word-aligner-rcl'
import * as isEqual from "deep-equal";
import cloneDeep from "lodash.clonedeep";
import Button from "@mui/material/Button";
import PopoverComponent from "./PopoverComponent";
import Dialog from "@mui/material/Dialog";
import {DialogActions, DialogContent, DialogContentText} from "@mui/material";
import Draggable from "react-draggable";
import Paper from "@mui/material/Paper";

const alignmentIconStyle = { marginLeft:'50px' }

// popup dialog for user to align verse
export default function WordAlignerArea({
aligned,
alignmentActions,
alignmentIconStyle,
contextId,
errorMessage,
lexiconCache,
loadLexiconEntry,
onChange,
showPopover,
sourceLanguage,
sourceLanguageFont,
sourceFontSizePercent,
Expand All @@ -29,6 +38,9 @@ export default function WordAlignerArea({
}) {
const [aligned_, setAligned] = useState(aligned)
const [alignmentChange, setAlignmentChange] = useState(null)
const [lexiconData, setLexiconData] = useState(null)
const [showResetWarning, setShowResetWarning] = useState(false)
const currentShowDialog = !!(targetWords?.length && verseAlignments?.length)

useEffect(() => {
console.log('WordAlignerArea: initialized')
Expand All @@ -49,19 +61,65 @@ export default function WordAlignerArea({
setAligned(alignmentComplete) // update alignment complete status
}

function cancelAlignment() {
console.log('WordAlignerDialog: cancelAlignment')
const cancelAlignment = alignmentActions?.cancelAlignment
cancelAlignment?.()
setAlignmentChange(null)
}

function saveAlignment() {
console.log('WordAlignerDialog: saveAlignment')
const saveAlignment = alignmentActions?.saveAlignment
saveAlignment?.(alignmentChange)
setAlignmentChange(null)
}

/**
* reset all the alignments
*/
function doReset() {
console.log('WordAlignerDialog: doReset')
// setShowDialog(false) // momentarily hide the dialog
// const alignmentData_ = AlignmentHelpers.resetAlignments(showDialog?.verseAlignments, showDialog?.targetWords)
//
// const showDialog = true;
// const dialogState_ = {
// ...alignmentData_, // merge in reset alignment data
// showDialog,
// }
//
// setDialogState(dialogState_); // this causes word aligner to redraw with empty alignments
// setAlignmentChange(cloneDeep(alignmentData_)) // clear the last alignment changes in case user next does save
}

function showPopover(PopoverTitle, wordDetails, positionCoord, rawData) {
// TODO: make show popover pretty and fix positioning
console.log(`showPopover`, rawData)
setLexiconData({
PopoverTitle,
wordDetails,
positionCoord,
rawData,
})
}


const enableResetWarning = (currentShowDialog && showResetWarning);

return (
<>
<DialogTitle style={{ cursor: 'move' }} id="draggable-aligner-dialog-title" >
<DialogTitle style={{cursor: 'move'}} id="draggable-aligner-dialog-title">
<span>
{`Aligning: ${title}`}
{aligned_? (
<RxLink2 style={alignmentIconStyle} id='valid_icon' color='#BBB' />
{aligned_ ? (
<RxLink2 style={alignmentIconStyle} id='valid_icon' color='#BBB'/>
) : (
<RxLinkBreak2 style={alignmentIconStyle} id='invalid_icon' color='#000' />
<RxLinkBreak2 style={alignmentIconStyle} id='invalid_icon' color='#000'/>
)}
</span>
</DialogTitle>
<div style={{ width : `95%`, margin: '10px' }} >
<div style={{width: `95%`, margin: '10px'}}>
<WordAligner
style={style}
verseAlignments={verseAlignments}
Expand All @@ -77,18 +135,58 @@ export default function WordAlignerArea({
onChange={onAlignmentChange}
/>
</div>
<span style={{width: `95%`, height: '60px', display: 'flex', flexDirection: 'row', justifyContent: 'center'}}>
<Button variant="outlined" style={{margin: '10px 100px'}} onClick={cancelAlignment}>
Cancel
</Button>
{!errorMessage && // only show these buttons if there is no error
<>
<Button variant="outlined" style={{margin: '10px 100px'}} onClick={() => setShowResetWarning(true)}>
Reset
</Button>
<Button variant="outlined" style={{margin: '10px 100px'}} onClick={saveAlignment}>
Accept
</Button>
</>
}
</span>
{/** Lexicon Popup dialog */}
<PopoverComponent
popoverVisibility={lexiconData}
title={lexiconData?.PopoverTitle || ''}
bodyText={lexiconData?.wordDetails || ''}
positionCoord={lexiconData?.positionCoord}
onClosePopover={() => setLexiconData(null)}
/>

<Dialog open={enableResetWarning} onClose={() => setShowResetWarning(false)} aria-labelledby="reset-warn-dialog">
<DialogTitle id="form-dialog-title">{'Warning'}</DialogTitle>
<DialogContent>
<DialogContentText>
{'Are you sure you want to clear all alignments?'}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setShowResetWarning(false)} color="primary">
No
</Button>
<Button onClick={doReset} color="secondary">
Yes
</Button>
</DialogActions>
</Dialog>
</>
)
}

WordAlignerArea.propTypes = {
aligned: PropTypes.bool,
alignmentActions: PropTypes.func,
contextId: PropTypes.object.isRequired,
errorMessage: PropTypes.string,
lexiconCache: PropTypes.object,
loadLexiconEntry: PropTypes.func.isRequired,
onChange: PropTypes.func,
showPopover: PropTypes.func.isRequired,
sourceLanguage: PropTypes.string.isRequired,
sourceLanguageFont: PropTypes.string,
sourceFontSizePercent: PropTypes.number,
Expand Down
89 changes: 2 additions & 87 deletions src/components/WordAlignerDialog.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,7 @@ export default function WordAlignerDialog({
}) {
const [alignmentChange, setAlignmentChange] = useState(null)
const [aligned, setAligned] = useState(false)
const [lexiconData, setLexiconData] = useState(null)
const [dialogState, setDialogState_] = useState({})
const [showResetWarning, setShowResetWarning] = useState(false)
const dialogRef = useRef(null) // for keeping track of aligner dialog position

const alignerData_ = alignerStatus?.state?.alignerData || null
Expand Down Expand Up @@ -124,17 +122,6 @@ export default function WordAlignerDialog({
setAligned(alignmentComplete) // update alignment complete status
}

function showPopover(PopoverTitle, wordDetails, positionCoord, rawData) {
// TODO: make show popover pretty and fix positioning
console.log(`showPopover`, rawData)
setLexiconData({
PopoverTitle,
wordDetails,
positionCoord,
rawData,
})
}

const errorMessage = alignerStatus?.state?.errorMessage

useEffect(() => { // set initial aligned state
Expand All @@ -160,19 +147,6 @@ export default function WordAlignerDialog({
)
setDialogState_(dialogState_)
}
function cancelAlignment() {
console.log('WordAlignerDialog: cancelAlignment')
const cancelAlignment = alignerStatus?.actions?.cancelAlignment
cancelAlignment?.()
setAlignmentChange(null)
}

function saveAlignment() {
console.log('WordAlignerDialog: saveAlignment')
const saveAlignment = alignerStatus?.actions?.saveAlignment
saveAlignment?.(alignmentChange)
setAlignmentChange(null)
}

function setShowDialog(show) {
console.log('WordAlignerDialog: setShowDialog', show)
Expand All @@ -182,26 +156,6 @@ export default function WordAlignerDialog({
setDialogState(_dialogState);
}

/**
* reset all the alignments
*/
function doReset() {
console.log('WordAlignerDialog: doReset')
setShowDialog(false) // momentarily hide the dialog
const alignmentData_ = AlignmentHelpers.resetAlignments(showDialog?.verseAlignments, showDialog?.targetWords)

const showDialog = true;
const dialogState_ = {
...alignmentData_, // merge in reset alignment data
showDialog,
}

setDialogState(dialogState_); // this causes word aligner to redraw with empty alignments
setAlignmentChange(cloneDeep(alignmentData_)) // clear the last alignment changes in case user next does save
}

const enableResetWarning = (currentShowDialog && showResetWarning);

return (
<>
<Dialog
Expand All @@ -215,7 +169,9 @@ export default function WordAlignerDialog({
>
<WordAlignerArea
aligned={aligned}
alignmentActions={alignerStatus?.actions}
alignmentIconStyle={alignmentIconStyle}
errorMessage={errorMessage}
title={title || ''}
style={{ maxHeight: `${height}px`, overflowY: 'auto' }}
verseAlignments={dialogState?.alignments || []}
Expand All @@ -225,51 +181,10 @@ export default function WordAlignerDialog({
targetLanguage={alignerStatus?.state?.targetLanguage || ''}
targetLanguageFont={''}
sourceLanguage={alignerStatus?.state?.sourceLanguage || ''}
showPopover={showPopover}
lexiconCache={{}}
loadLexiconEntry={getLexiconData}
/>

<span style={{ width : `95%`, height: '60px', display: 'flex', flexDirection: 'row', justifyContent: 'center' }}>
<Button variant="outlined" style={{ margin: '10px 100px' }} onClick={cancelAlignment}>
Cancel
</Button>
{!errorMessage && // only show these buttons if there is no error
<>
<Button variant="outlined" style={{ margin: '10px 100px' }} onClick={() => setShowResetWarning(true)}>
Reset
</Button>
<Button variant="outlined" style={{ margin: '10px 100px' }} onClick={saveAlignment}>
Accept
</Button>
</>
}
</span>
</Dialog>
{/** Lexicon Popup dialog */}
<PopoverComponent
popoverVisibility={lexiconData}
title={lexiconData?.PopoverTitle || ''}
bodyText={lexiconData?.wordDetails || ''}
positionCoord={lexiconData?.positionCoord}
onClosePopover={() => setLexiconData(null)}
/>

<Dialog open={enableResetWarning} onClose={() => setShowResetWarning(false)} aria-labelledby="reset-warn-dialog">
<DialogTitle id="form-dialog-title">{'Warning'}</DialogTitle>
<DialogContent>
<DialogContentText>
{'Are you sure you want to clear all alignments?'}
</DialogContentText>
</DialogContent>
<DialogActions>
<Button onClick={() => setShowResetWarning(false)} color="primary">
No
</Button>
<Button onClick={doReset} color="secondary">
Yes
</Button>
</DialogActions>
</Dialog>
</>
)
Expand Down

0 comments on commit f587e35

Please sign in to comment.