cleanup

js/tree.js

@@ -21,6 +21,7 @@ export const Branch = (props) => {
   React.useEffect(() => {
     const [{ Open, Done, Away }] = stageParent;
     const [, Shut] = stage;
+
     if (!Open && Done) {
       Shut({ Open: false, Done: true, Away });
     }
@@ -37,33 +38,12 @@ export const Button = (props) => {
   /** @type Binding */
   const [stageGet, stageSet] = React.useContext(BranchContext);
 
-  /** @type React.MutableRefObject<Handler|null> */
-  const refHandler = React.useRef(null);
-  React.useEffect(() => {
-    console.log("recreating handler", stageGet);
-    refHandler.current = (away) => {
-      console.log("set: away");
-      stageSet((state) => ({ ...state, Away: away }));
-    };
-  }, [stageGet]);
-
-  /** @type React.MutableRefObject<HTMLElement|null> */
-  const refEl = React.useRef(null);
-  useAway(refEl, refHandler);
-
   const handleClick = () => {
     console.log("set: open");
     stageSet((state) => ({ ...state, Open: !state.Open, Done: false }));
   };
 
-  React.useEffect(() => {
-    console.log("away *changed*");
-    if (stageGet.Away && stageGet.Open) {
-      handleClick();
-    }
-  }, [stageGet.Away]);
-
-  return html`<button ref=${refEl} onClick=${handleClick} class=${props.class}>stage: ${
+  return html`<button onClick=${handleClick} class=${props.class}>stage: ${
     JSON.stringify(stageGet)
   }
   ${props.children}
@@ -82,14 +62,20 @@ export const Menu = (props) => {
       (refCollapser.current = Collapser(refElement.current));
   }, []);
 
-  React.useEffect(() => {
-    const instant = stageGet.Open == false && stageGet.Done;
-    refCollapser.current && refCollapser.current(
-      stageGet.Open,
-      instant ? 0 : 600,
-      () => stageSet({ ...stageGet, Done: true }),
-    );
-  }, [stageGet]);
+  const instant = stageGet.Open == false && stageGet.Done;
+  refCollapser.current && refCollapser.current(
+    stageGet.Open,
+    instant ? 0 : 600,
+    () => stageSet({ ...stageGet, Done: true }),
+  );
+
+  /** @type React.MutableRefObject<Handler|null> */
+  const refHandler = React.useRef(null);
+  refHandler.current = (away) => {
+    console.log("set: away");
+    stageSet((state) => ({ ...state, Away: away }));
+  };
+  useAway(refElement, refHandler);
 
   return html`
   <div ref=${refElement} class=${props.class}>
@@ -99,68 +85,58 @@ export const Menu = (props) => {
 };
 
 /** @typedef {(Open:boolean)=>void} UserDone */
-/** @typedef {(inOpen:boolean, inMilliseconds:number, inUserDone:UserDone)=>void} Toggler */
+/** @typedef {(inOpen:boolean, inMilliseconds:number, inUserDone:UserDone)=>void | (()=>void) } Toggler */
 /** @typedef {(inElement:HTMLElement)=>Toggler} Collapse */
 /** @type Collapse */
 const Collapser = (inElement) => {
   /** @type UserDone */
   let userDone = () => {};
   let userMode = false;
-  const collapse = inElement;
+  /** @type number */ let frameRequest;
   /** @type {(inEvent:TransitionEvent)=>void} */
   const done = (inEvent) => {
-    if (inEvent.propertyName == "height" && inEvent.target == collapse) {
+    if (inEvent.propertyName == "height" && inEvent.target == inElement) {
       inEvent.stopPropagation();
       if (userMode) {
-        collapse.style.height = "auto";
-        collapse.style.overflow = "visible";
-        userDone(true);
-      } else {
-        userDone(false);
+        inElement.style.height = "auto";
+        inElement.style.overflow = "visible";
       }
+      userDone(userMode);
     }
   };
+
+  inElement.addEventListener("transitionend", done);
+
   /** @type Toggler */
   const show = (inOpen, inMs, inDone) => {
-    userMode = inOpen;
-    collapse.removeEventListener("transitionend", done);
-    userDone = inDone;
-    collapse.addEventListener("transitionend", done);
-
-    collapse.style.height = collapse.clientHeight + "px";
-    collapse.style.overflow = "hidden";
-    collapse.style.transition = "none";
-    requestAnimationFrame(() => {
-      collapse.style.height = `${inOpen ? collapse.scrollHeight : 0}px`;
-      collapse.style.transition = `height ${inMs / 1000}s`;
-    });
+    cancelAnimationFrame(frameRequest);
+    if ((!inOpen && !inMs) && !inDone) {
+      inElement.removeEventListener("transitionend", done);
+    } else {
+      userDone = inDone;
+      userMode = inOpen;
+      inElement.style.height = inElement.clientHeight + "px";
+      inElement.style.overflow = "hidden";
+      inElement.style.transition = "none";
+      frameRequest = requestAnimationFrame(() => {
+        inElement.style.height = `${inOpen ? inElement.scrollHeight : 0}px`;
+        inElement.style.transition = `height ${inMs / 1000}s`;
+      });
+    }
   };
   return show;
 };
 
 /** @typedef {(away:boolean, e:Event)=>void} Handler */
 /** @type {(inRef:React.MutableRefObject<HTMLElement|null>, inHandler:React.MutableRefObject<Handler|null>)=>void} */
-export const useAway = (inRef, inHandler) => {
+export const useAway = (inRef, inHandlerRef) => {
   /** @type React.MutableRefObject<(e:Event)=>void> */
   const handlerClick = React.useRef((e) => {
     const index = inRef.current ? e.composedPath().indexOf(inRef.current) : -1;
-    inHandler.current && inHandler.current(index < 0, e);
+    inHandlerRef.current && inHandlerRef.current(index < 0, e);
   });
   React.useEffect(() => {
     document.addEventListener("click", handlerClick.current);
     return () => document.removeEventListener("click", handlerClick.current);
-  });
-};
-
-const GlobalClick = {
-  Bind: () => {
-    if (!GlobalClick.Live) {
-      GlobalClick.Live = true;
-      document.addEventListener("click", (inEvent) => {
-        GlobalClick.Path = inEvent.composedPath();
-      });
-    }
-  },
-  Live: false,
-  Path: [],
+  }, []);
 };