warn before leaving dirty pose editing

jakmeier · Oct 22, 2024 · 3318b77 · 3318b77
1 parent a8b0529
commit 3318b77
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/bouncy_frontend/src/lib/components/editor/PoseWeightsForm.svelte b/bouncy_frontend/src/lib/components/editor/PoseWeightsForm.svelte
@@ -17,6 +17,8 @@
   let weightedLimbs = [];
   let poseName = '';
 
+  export let onChange = () => {};
+
   /** @param {PoseWrapper} newPose */
   export function loadPose(newPose) {
     // using an indirect setting, rather than a property, to better control when
@@ -66,6 +68,7 @@
     if (pose && limb) {
       pose.setWeight(limb.index, limb.weight);
       onPoseUpdated(pose);
+      onChange();
     } else {
       console.log('Pose or limb not available');
     }
@@ -109,7 +112,6 @@
     //   /** @type {number[]}*/
     //   []
     // );
-
   }
 
   function limbTranslationKey(enumName) {

diff --git a/bouncy_frontend/src/routes/editor/pose/[poseId]/+page.svelte b/bouncy_frontend/src/routes/editor/pose/[poseId]/+page.svelte
@@ -6,6 +6,7 @@
   import { getContext, onMount } from 'svelte';
   import Header from '$lib/components/ui/Header.svelte';
   import { t } from '$lib/i18n';
+  import { beforeNavigate } from '$app/navigation';
 
   const poseId = $page.params.poseId;
 
@@ -24,18 +25,30 @@
   /** @type {()=>import("$lib/instructor/bouncy_instructor").PoseWrapper} */
   let getPose;
 
+  let isDirty = false;
+
   function copyPose() {
     let pose = poseFromForm();
     if (pose) {
       loadPoseToWeights(pose);
+      isDirty = true;
     }
   }
 
   function savePose() {
     let pose = getPose();
     localCollectionCtx.addPose(pose);
+    isDirty = false;
   }
 
+  beforeNavigate(({ cancel }) => {
+    if (isDirty) {
+      if (!confirm($t('editor.confirm-leave'))) {
+        cancel();
+      }
+    }
+  });
+
   onMount(() => {
     let pose = $poses.find((p) => p.id() === poseId);
     if (pose) {
@@ -51,12 +64,15 @@
 <h2 class="box">{$t('editor.pose.angles-subtitle')}</h2>
 
 <PoseAnglesForm
-bind:loadPose={loadPoseToAngles}
-bind:readPose={poseFromForm}
-onChange={copyPose}
+  bind:loadPose={loadPoseToAngles}
+  bind:readPose={poseFromForm}
+  onChange={copyPose}
 />
 
 <h2 class="box">{$t('editor.pose.weights-subtitle')}</h2>
 
-<PoseWeightsForm bind:loadPose={loadPoseToWeights} bind:getPose
-></PoseWeightsForm>
+<PoseWeightsForm
+  bind:loadPose={loadPoseToWeights}
+  bind:getPose
+  onChange={() => (isDirty = true)}
+/>