diff --git a/package.json b/package.json index 42981fc7..6d3d84a8 100644 --- a/package.json +++ b/package.json @@ -60,7 +60,7 @@ "translation-helps-rcl": "3.6.0-beta", "use-deep-compare-effect": "^1.3.1", "word-aligner": "^1.0.0", - "word-aligner-rcl": "file:.yalc/word-aligner-rcl" + "word-aligner-rcl": "1.1.0-beta.16" }, "devDependencies": { "@cypress/code-coverage": "^3.9.11", diff --git a/src/components/WordAlignerArea.js b/src/components/WordAlignerArea.js index cc35d4ee..13bd4927 100644 --- a/src/components/WordAlignerArea.js +++ b/src/components/WordAlignerArea.js @@ -9,8 +9,6 @@ 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' } @@ -18,7 +16,6 @@ const alignmentIconStyle = { marginLeft:'50px' } export default function WordAlignerArea({ aligned, alignmentActions, - alignmentIconStyle, contextId, errorMessage, lexiconCache, @@ -38,13 +35,34 @@ export default function WordAlignerArea({ }) { const [aligned_, setAligned] = useState(aligned) const [alignmentChange, setAlignmentChange] = useState(null) + const [initialAlignment, setInitialAlignment] = useState(null) const [lexiconData, setLexiconData] = useState(null) const [showResetWarning, setShowResetWarning] = useState(false) const currentShowDialog = !!(targetWords?.length && verseAlignments?.length) useEffect(() => { - console.log('WordAlignerArea: initialized') - }, []) + // see if alignment data has changed + const verseAlignments_ = initialAlignment?.verseAlignments; + const targetWords_ = initialAlignment?.targetWords; + const changedTW = !isEqual(targetWords, targetWords_); + if (changedTW) { + // const differences = diff(targetWords, targetWords_); + console.log("targetWords differences") + } + const changedVA = !isEqual(verseAlignments, verseAlignments_); + if (changedVA) { + // const differences = diff(verseAlignments, verseAlignments_); + console.log("verseAlignments differences") + } + + if (changedTW || changedVA) { + const newAlignment = { + verseAlignments, + targetWords, + } + setInitialAlignment(cloneDeep(newAlignment)) + } + }, [targetWords, verseAlignments]) useEffect(() => { if (aligned !== aligned_) { @@ -54,8 +72,6 @@ export default function WordAlignerArea({ }, [aligned]) function onAlignmentChange(results) { - // const onAlignmentsChange = alignerStatus?.actions?.onAlignmentsChange - // const alignmentComplete = onAlignmentsChange?.(results) const alignmentComplete = AlignmentHelpers.areAlgnmentsComplete(results.targetWords, results.verseAlignments); setAlignmentChange(results) // save the most recent change setAligned(alignmentComplete) // update alignment complete status @@ -80,21 +96,18 @@ export default function WordAlignerArea({ */ 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 alignmentData_ = AlignmentHelpers.resetAlignments(initialAlignment?.verseAlignments, initialAlignment?.targetWords) + setInitialAlignment(cloneDeep(alignmentData_)) + const alignmentChange_ = { + ...alignmentChange, + targetWords: alignmentData_?.targetWords, + verseAlignments: alignmentData_?.verseAlignments, + } + setAlignmentChange(cloneDeep(alignmentChange_)) + setShowResetWarning(false) } function showPopover(PopoverTitle, wordDetails, positionCoord, rawData) { - // TODO: make show popover pretty and fix positioning console.log(`showPopover`, rawData) setLexiconData({ PopoverTitle, @@ -122,8 +135,8 @@ export default function WordAlignerArea({
{ // set initial aligned state @@ -148,14 +124,6 @@ export default function WordAlignerDialog({ setDialogState_(dialogState_) } - function setShowDialog(show) { - console.log('WordAlignerDialog: setShowDialog', show) - const _dialogState = { - showDialog: !!show, - } - setDialogState(_dialogState); - } - return ( <>