From 505545ff556f9d1fdeae4eb5ef79ba718521dff6 Mon Sep 17 00:00:00 2001
From: Seth Trowbridge <seth111@gmail.com>
Date: Sun, 28 May 2023 10:53:56 -0400
Subject: [PATCH] resize if interrupted

---
 example/tree-menu.tsx | 55 ++++++++++++++++++++++++-------------------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/example/tree-menu.tsx b/example/tree-menu.tsx
index ff92c59..41a43b4 100644
--- a/example/tree-menu.tsx
+++ b/example/tree-menu.tsx
@@ -67,7 +67,7 @@ const StyleCalc =(inElement:HTMLElement, inClasses:StylePack)=>
   const initialClass = inElement.getAttribute("class")||"";
   const output = {} as StyleCalc;
 
-  inElement.setAttribute("style", `transition: none; overflow: hidden;`);
+  inElement.setAttribute("style", `transition: none;`);
   Object.entries(inClasses).forEach(([key, value])=>
   {
     inElement.setAttribute("class", value);
@@ -88,31 +88,42 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
     let userMode = initialState;
     let frameRequest = 0;
     let inTransition = false;
+    let interrupted = false;
     let measurements:StyleCalc;
     const transitions:Set<string> = new Set();
 
     const run = (inEvent:TransitionEvent)=>
     {
-      console.log("+", inEvent.propertyName);
+      //console.log("+", inEvent.propertyName);
       (inEvent.target == inElement) && transitions.add(inEvent.propertyName);
     };
     const end = (inEvent:TransitionEvent)=>
     {
-      console.log("-", inEvent.propertyName);
+      //console.log("-", inEvent.propertyName);
       if (inEvent.target == inElement)
       {
         transitions.delete(inEvent.propertyName);
         if(transitions.size === 0)
         {
-          console.log("--done--", userMode);
-          inElement.setAttribute("style", "transition:none;");
-          inElement.clientHeight;
-          frameRequest = requestAnimationFrame(()=>
+          console.log("--done--", userMode, "interrupted?", interrupted);
+
+          measurements = StyleCalc(inElement, library);
+          const [, w, h] = measurements[userMode];
+          
+          if(inElement.offsetHeight != h || inElement.offsetWidth != w)
           {
-            inElement.setAttribute("style", "");
-            inTransition = false;
-            userDone(userMode);   
-          });       
+            console.log(inElement.offsetHeight, "VERSUS", h);
+            anim(userMode, userDone);
+          }
+          else
+          {
+            frameRequest = requestAnimationFrame(()=>
+            {
+              inElement.setAttribute("style", "");
+              inTransition = false;
+              userDone(userMode);   
+            });  
+          }
         }
       }
     };
@@ -120,19 +131,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
     const child =(e:CustomEvent)=>
     {
       if(e.target == inElement || !inTransition){ return; }
-      console.log("resize", e.detail);
-      const oldWidth = inElement.offsetWidth;
-      const oldHeight = inElement.offsetHeight;
-      //inElement.style.overflow = "hidden";
-      inElement.style.width  = oldWidth  + e.detail[0] + "px";
-      inElement.style.height = oldHeight + e.detail[1] + "px";
+      interrupted = true;
+      //console.log("resize", e.detail);
     }
 
     inElement.addEventListener("transitionend", end);
     inElement.addEventListener("transitionrun", run);
     inElement.addEventListener("childresize", child);
 
-    return function(inState:string, inDone)
+    const anim = function(inState:string, inDone)
     {
       cancelAnimationFrame(frameRequest);
 
@@ -146,7 +153,7 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
         if(!inTransition)
         {
           measurements = StyleCalc(inElement, library);
-          console.log("measurements taken", measurements)
+         //console.log("measurements taken", measurements)
         }
 
         if(measurements)
@@ -158,16 +165,15 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
             inElement.style.width  = oldWidth  + "px";
             inElement.style.height = oldHeight + "px";
             inTransition = true;
-            console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
-
-            inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
+            //console.log(`from: {${inElement.offsetWidth} ${inElement.offsetHeight}}`);
+            //inElement.dispatchEvent(new CustomEvent("childresize", {bubbles:true, detail:[width-oldWidth, height-oldHeight]}))
 
             frameRequest = requestAnimationFrame(()=>
             {
               inElement.style.height = height + "px";
               inElement.style.width = width + "px";
               inElement.className = classes;
-              console.log(`  to: {${width} ${height}}`)
+              //console.log(`  to: {${width} ${height}}`)
             });
         }
       }
@@ -178,4 +184,5 @@ export function Collapser(inElement:HTMLElement, initialState:string, library:Re
       }
     } as CollapseControls;
 
-}
\ No newline at end of file
+    return anim;
+} 
\ No newline at end of file