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

Code before:
            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);
          }
        }}
        onPointerDown={event => {
          event.currentTarget.setPointerCapture(event.pointerId);
        }}
        onPointerMove={event => {
          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
            labelClipDraggingSignal.value = {left: eventTime, dragging: true};
          }
        }}
        onPointerUp={event => {
          event.currentTarget.releasePointerCapture(event.pointerId);
          labelClipDraggingSignal.value = {left: null, 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):
You didn't remove the old `useDrag`.
It should pretty straightforward, just move the first callback from `useDrag` to `onPointerMove` and the second one to `onPointerUp`.
Same goes for `onMouseDown`, there's no need to have both it and `onPointerDown`.

Code after:
          }
        }}
        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)),
          )}%`,
        }}
      />
    </>
  );
}