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

Code before:

  return (
    <>
      <div
        onDblClick={async () => {
          if (event.stack) {
            await findAndOpenFirstUserFile(event.stack);
          }
        }}
        onPointerDown={e => {
          e.currentTarget.setPointerCapture(e.pointerId);
          if (e.button === 1) {
            e.preventDefault();
            player.requestSeek(
              scene.firstFrame +
                player.status.secondsToFrames(event.initialTime + event.offset),
            );
          }
        }}
        onPointerMove={e => {
          if (e.currentTarget.hasPointerCapture(e.pointerId)) {
            labelClipDraggingLeftSignal.value = eventTime;
            setEventTime(
              eventTime +
                player.status.framesToSeconds(pixelsToFrames(e.movementX)),
            );
          }
        }}
        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(

Review comment (suggestion):
One final thing, notice how you assign the `eventTime` here but then in the next line its value is updated to account for the drag. This causes the gray line's position to be delayed by one frame.
You could improve that by assigning the newly calculated value to the signal, as such
```suggestion
            const newTime = eventTime +
                player.status.framesToSeconds(pixelsToFrames(e.movementX));
            labelClipDraggingLeftSignal.value = newTime;
            setEventTime(newTime);
```

Code after:

  return (
    <>
      <div
        onDblClick={async () => {
          if (event.stack) {
            await findAndOpenFirstUserFile(event.stack);
          }
        }}
        onPointerDown={e => {
          e.currentTarget.setPointerCapture(e.pointerId);
          if (e.button === 1) {
            e.preventDefault();
            player.requestSeek(
              scene.firstFrame +
                player.status.secondsToFrames(event.initialTime + event.offset),
            );
          }
        }}
        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(