Repository: motion-canvas/motion-canvas
File: packages/ui/src/components/timeline/Label.tsx (TypeScript)

Code before:
  useLayoutEffect(() => {
    setEventTime(event.offset);
  }, [event.offset]);

  return (
    <>
      <div
        onDblClick={async () => {
          if (event.stack) {
            await findAndOpenFirstUserFile(event.stack);
          }
        }}
        onMouseDown={e => {
          if (e.button === 1) {
            e.preventDefault();
            player.requestSeek(
              scene.firstFrame +
                player.status.secondsToFrames(event.initialTime + event.offset),
            );
          } else {
            handleDrag(e);
          }
        }}
        onMouseLeave={() =>
          (labelClipDragging.value = {left: 0, dragging: false})
        }
        className={styles.labelClip}
        data-name={event.name}
        style={{
          left: `${framesToPercents(
            scene.firstFrame +
              scene.playback.secondsToFrames(
                event.initialTime + Math.max(0, eventTime),
              ),
          )}%`,
        }}
      />
      <div
        className={styles.labelClipTarget}
        style={{
          left: `${framesToPercents(
            scene.firstFrame + scene.playback.secondsToFrames(event.targetTime),
          )}%`,
        }}
      />
      <div
        className={styles.labelClipStart}
        style={{
          left: `${framesToPercents(
            scene.firstFrame +
              scene.playback.secondsToFrames(event.initialTime),

Review comment (suggestion):
The second callback passed to `useDrag` is called when the dragging ends. That's when this signal should be reset.

Code after:
        }}
        onPointerMove={e => {
          if (e.currentTarget.hasPointerCapture(e.pointerId)) {
            const newTime =
              eventTime +
              player.status.framesToSeconds(pixelsToFrames(e.movementX));
            labelClipDraggingLeftSignal.value = newTime;
            setEventTime(newTime);
          }
        }}
        onPointerUp={e => {
          e.currentTarget.releasePointerCapture(e.pointerId);
          labelClipDraggingLeftSignal.value = null;
          const newFrame = Math.max(0, eventTime);
          if (event.offset !== newFrame) {
            scene.timeEvents.set(event.name, newFrame, e.shiftKey);
          }
        }}
        className={styles.labelClip}
        data-name={event.name}
        style={{
          left: `${framesToPercents(
            scene.firstFrame +
              scene.playback.secondsToFrames(
                event.initialTime + Math.max(0, eventTime),
              ),
          )}%`,
        }}
      />
      <div
        className={styles.labelClipTarget}
        style={{
          left: `${framesToPercents(
            scene.firstFrame + scene.playback.secondsToFrames(event.targetTime),
          )}%`,
        }}
      />
      <div
        className={styles.labelClipStart}
        style={{
          left: `${framesToPercents(
            scene.firstFrame +
              scene.playback.secondsToFrames(event.initialTime),
          )}%`,
          width: `${Math.max(
            0,
            framesToPercents(scene.playback.secondsToFrames(eventTime)),
          )}%`,
        }}
      />
    </>