Moved draggable part of dialog back to WordAlignerDialog

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",

src/components/WordAlignerArea.js

@@ -9,16 +9,13 @@ 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,
@@ -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({
       <div style={{width: `95%`, margin: '10px'}}>
         <WordAligner
           style={style}
-          verseAlignments={verseAlignments}
-          targetWords={targetWords}
+          verseAlignments={initialAlignment?.verseAlignments || []}
+          targetWords={initialAlignment?.targetWords ||[]}
           translate={translate}
           contextId={contextId}
           targetLanguage={targetLanguage}

src/components/WordAlignerDialog.js

@@ -7,31 +7,19 @@ import React, {
 import PropTypes from 'prop-types'
 import cloneDeep from 'lodash.clonedeep'
 import Dialog from '@mui/material/Dialog'
-import DialogTitle from '@mui/material/DialogTitle'
-import { AlignmentHelpers } from 'word-aligner-rcl'
-import Button from '@mui/material/Button'
 import Paper from '@mui/material/Paper'
 import Draggable from 'react-draggable'
-import {
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-} from '@mui/material'
 import { useBoundsUpdater } from 'translation-helps-rcl'
-import PopoverComponent from './PopoverComponent'
 import { StoreContext } from '@context/StoreContext'
 import WordAlignerArea from './WordAlignerArea';
 
-const alignmentIconStyle = { marginLeft:'50px' }
-
 // popup dialog for user to align verse
 export default function WordAlignerDialog({
   alignerStatus,
   height,
   translate,
   getLexiconData,
 }) {
-  const [alignmentChange, setAlignmentChange] = useState(null)
   const [aligned, setAligned] = useState(false)
   const [dialogState, setDialogState_] = useState({})
   const dialogRef = useRef(null) // for keeping track of  aligner dialog position
@@ -110,18 +98,6 @@ export default function WordAlignerDialog({
     }
   }, [currentInstance, alignerData_])
 
-  /**
-   * called on every alignment change.  We save this new alignment state so that it can be applied if user clicks accept.
-   *   We also update the aligned status so that the UI can be updated dynamically
-   * @param {object} results
-   */
-  function onAlignmentChange(results) {
-    console.log('WordAlignerDialog: onAlignmentChange')
-    const alignmentComplete = AlignmentHelpers.areAlgnmentsComplete(results?.targetWords, results?.verseAlignments);
-    setAlignmentChange(results) // save the most recent change
-    setAligned(alignmentComplete) // update alignment complete status
-  }
-
   const errorMessage = alignerStatus?.state?.errorMessage
 
   useEffect(() => { // 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 (
     <>
       <Dialog
@@ -170,7 +138,6 @@ export default function WordAlignerDialog({
         <WordAlignerArea
           aligned={aligned}
           alignmentActions={alignerStatus?.actions}
-          alignmentIconStyle={alignmentIconStyle}
           errorMessage={errorMessage}
           title={title || ''}
           style={{ maxHeight: `${height}px`, overflowY: 'auto' }}

yarn.lock

@@ -11105,11 +11105,12 @@ which@^2.0.1:
   dependencies:
     isexe "^2.0.0"
 
-"word-aligner-rcl@file:.yalc/word-aligner-rcl":
-  version "1.1.0-beta.10"
+word-aligner-rcl@1.1.0-beta.16:
+  version "1.1.0-beta.16"
+  resolved "https://registry.yarnpkg.com/word-aligner-rcl/-/word-aligner-rcl-1.1.0-beta.16.tgz#7131f1373935b034ecb1ca0ef930dd0d52f9bafe"
+  integrity sha512-3Y+fw8XcHVqrbjHoqVwwAsz6vpylXGhM5PHaHdVvniobCkOtM5Ub+I19+QtAC2xyFnGBa6fUEK6QHRjq5Pxj2A==
   dependencies:
     bible-reference-range "^1.1.0"
-    deep-diff "^1.0.2"
     deep-equal "^2.0.5"
     file-loader "^6.2.0"
     lodash.clonedeep "^4.5.0"