Finish up UI for looping keyframe

Author: Wyn-Price

apps/studio/src/contexts/CreatePortalContext.tsx

@@ -11,7 +11,7 @@ const CreatePortalContext = ({ children }: PropsWithChildren<{}>) => {
   const { darkMode } = useOptions()
   return (
     <Context.Provider value={node => overlay.current === null ? null : createPortal(node, overlay.current)}>
-      <div ref={overlay} className={"absolute z-10 pointer-events-none overflow-hidden h-full w-full " + (darkMode ? "dark" : "")}></div>
+      <div ref={overlay} className={"absolute z-30 pointer-events-none overflow-hidden h-full w-full " + (darkMode ? "dark" : "")}></div>
       {children}
     </Context.Provider>
   )

apps/studio/src/contexts/TooltipContext.tsx

@@ -79,7 +79,7 @@ const TooltipContextProvider = ({ children }: PropsWithChildren<{}>) => {
       {tooltipValue !== null && tooltipValue !== undefined && createPortal(
         <div
           ref={containerRef}
-          className="absolute text-center border border-black p-0.5 dark:text-gray-300 dark:bg-gray-800 bg-gray-300"
+          className="z-50 absolute text-center border border-black p-0.5 dark:text-gray-300 dark:bg-gray-800 bg-gray-300"
         >
           {tooltipValue}
         </div>

apps/studio/src/studio/formats/animations/DcaAnimation.ts

@@ -102,6 +102,8 @@ export default class DcaAnimation extends AnimatorGumballConsumer {
   displayTimeMatch: boolean = true
 
   readonly loopData: KeyframeLoopData
+  readonly shouldContinueLooping = new LO(false)
+
   readonly keyframeLayers = new LO<readonly KeyframeLayerData[]>([], this.onDirty)
 
   readonly scroll = new LO(0, this.onDirty)

apps/studio/src/studio/keycombos/KeyCombos.ts

@@ -108,6 +108,7 @@ const keyCombos = {
       pause_or_play: new KeyCombo('Pause/Play', "Pause or play the animation", 'Space', false),
       restart_animation: new KeyCombo('Restart Animation', "Restart the animation", 'Space', true),
       stop_animation: new KeyCombo('Stop Animation', "Stop the animation", 'Space', false, true),
+      toggle_looping: new KeyCombo('Toggle Looping', "Toggle looping", 'L', true),
     }
   },
 }

apps/studio/src/views/animator/components/AnimatorScrubBar.tsx

@@ -1,4 +1,4 @@
-import { SVGPause, SVGPlay, SVGRestart, SVGStop } from "@dumbcode/shared/icons";
+import { SVGLink, SVGPause, SVGPlay, SVGRestart, SVGStop } from "@dumbcode/shared/icons";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import NumericInput from "../../../components/NumericInput";
 import { ButtonWithTooltip } from "../../../components/Tooltips";
@@ -22,6 +22,8 @@ const AnimatorScrubBar = ({ animation }: { animation: DcaAnimation | null }) =>
     const [maxGiven] = useListenableObjectNullable(animation?.maxTime)
     const max = maxGiven ?? 1
 
+    const [shouldContinueLooping, setShouldContinueLooping] = useListenableObjectNullable(animation?.shouldContinueLooping)
+
     const ref = useRef<HTMLDivElement>(null)
 
     const isMoving = isHovering || isDragging
@@ -80,18 +82,26 @@ const AnimatorScrubBar = ({ animation }: { animation: DcaAnimation | null }) =>
 
     const onToggle = useCallback(() => {
         setPlaying(!isPlaying)
+        if (!isPlaying && animation?.time.value === 0) {
+            setShouldContinueLooping(true)
+        }
     }, [isPlaying, setPlaying])
 
     const onRestart = useCallback(() => {
         setTimeAt(0)
         setPlaying(true)
+        setShouldContinueLooping(true)
     }, [setTimeAt, setPlaying])
 
     const onStop = useCallback(() => {
         setTimeAt(0)
         setPlaying(false)
     }, [setTimeAt, setPlaying])
 
+    const toggleLooping = () => {
+        setShouldContinueLooping(!shouldContinueLooping)
+    }
+
     useKeyComboPressed(
         useMemo(() => ({
             animator: {
@@ -108,6 +118,8 @@ const AnimatorScrubBar = ({ animation }: { animation: DcaAnimation | null }) =>
     const [stopName] = useListenableObject(keycombos.stop_animation.displayName)
     const [pauseName] = useListenableObject(keycombos.pause_or_play.displayName)
     const [resetName] = useListenableObject(keycombos.restart_animation.displayName)
+    const [loopingName] = useListenableObject(keycombos.toggle_looping.displayName)
+
 
     return (
         <div className="flex flex-col items-center justify-end h-full dark:bg-gray-800 bg-white">
@@ -123,9 +135,13 @@ const AnimatorScrubBar = ({ animation }: { animation: DcaAnimation | null }) =>
                             : <SVGPlay className="h-8 w-8" />
                         }
                     </ButtonWithTooltip>
-                    <ButtonWithTooltip tooltip={`Restart Animation (${resetName})`} onClick={onRestart} className="z-10 dark:bg-gray-900 bg-gray-200 px-1 rounded-tr-md pt-1 dark:text-gray-400 text-black hover:text-yellow-400 border-r-2 border-t-2 dark:border-black border-white">
+                    <ButtonWithTooltip tooltip={`Restart Animation (${resetName})`} onClick={onRestart} className="z-10 dark:bg-gray-900 bg-gray-200 px-1 pt-1 dark:text-gray-400 text-black hover:text-yellow-400 border-t-2 dark:border-black border-white">
                         <SVGRestart className="h-6 w-6" />
                     </ButtonWithTooltip>
+                    <ButtonWithTooltip tooltip={`Toggle Looping (${loopingName})`} onClick={toggleLooping}
+                        className={"z-10 dark:bg-gray-900 bg-gray-200 px-1 rounded-tr-md pt-1 border-r-2 border-t-2 dark:border-black border-white " + (shouldContinueLooping ? "text-blue-500" : "dark:text-gray-400 text-black")}>
+                        <SVGLink className="h-6 w-6" />
+                    </ButtonWithTooltip>
                     <div className="flex-grow"></div>
                 </div>
             </div>

apps/studio/src/views/animator/components/AnimatorTimeline.tsx

@@ -644,25 +644,25 @@ const LoopingMarker = ({ lo }: { lo: LO<number> }) => {
     const [entry, setEntry] = useListenableObject(lo)
     const { getPixelsPerSecond, getScroll, addAndRunListener, removeListener } = useContext(ScrollZoomContext)
 
+    const ref = useDraggbleRef<HTMLDivElement, number>(
+        useCallback(() => entry, [entry]),
+        useCallback(({ dx, initial }) => {
+            setEntry(Math.max(initial + dx / getPixelsPerSecond(), 0))
+        }, [setEntry, getPixelsPerSecond]),
+        useCallback(() => { }, [])
+    )
+
     const updateRefStyle = useCallback((scroll = getScroll(), pixelsPerSecond = getPixelsPerSecond()) => {
         if (ref.current !== null) {
             ref.current.style.left = `${entry * pixelsPerSecond - scroll}px`
         }
-    }, [entry, getPixelsPerSecond, getScroll])
+    }, [entry, getPixelsPerSecond, getScroll, ref])
 
     useEffect(() => {
         addAndRunListener(updateRefStyle)
         return () => removeListener(updateRefStyle)
     }, [addAndRunListener, removeListener, updateRefStyle])
 
-    const ref = useDraggbleRef<HTMLDivElement, number>(
-        useCallback(() => entry, [entry]),
-        useCallback(({ dx, initial }) => {
-            setEntry(Math.max(initial + dx / getPixelsPerSecond(), 0))
-        }, [setEntry, getPixelsPerSecond]),
-        useCallback(() => { }, [])
-    )
-
     return (
         <div
             ref={ref}

packages/shared/tsconfig.json

@@ -1,5 +1,11 @@
 {
-  "extends": "tsconfig/react-library.json",
-  "include": ["."],
-  "exclude": ["dist", "build", "node_modules"]
-}
+  "extends": "@dumbcode/tsconfig/react-library.json",
+  "include": [
+    "."
+  ],
+  "exclude": [
+    "dist",
+    "build",
+    "node_modules"
+  ]
+}