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

Code before:

          setStart(pixelsToFrames(event.clientX - rect.x));
          setEnd(pixelsToFrames(event.clientX - rect.x));
        }
      }}
      onPointerMove={event => {
        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
          setEnd(end + pixelsToFrames(event.movementX));
        }
      }}
      onPointerUp={event => {
        if (event.button === MouseButton.Left) {
          event.currentTarget.releasePointerCapture(event.pointerId);
          onDrop();
        }
      }}
    >
      <div
        style={{
          flexDirection: start > end ? 'row-reverse' : 'row',
          left: `${framesToPercents(Math.ceil(Math.max(0, normalizedStart)))}%`,
          right: `${
            100 - framesToPercents(Math.ceil(Math.min(duration, normalizedEnd)))
          }%`,
        }}
        className={clsx(
          styles.range,
          shiftHeld && !controlHeld && styles.active,
        )}
        onPointerDown={event => {
          if (event.button === MouseButton.Left) {
            event.preventDefault();
            event.stopPropagation();
            event.currentTarget.setPointerCapture(event.pointerId);
          }
        }}
        onPointerMove={event => {
          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
            setStart(start + pixelsToFrames(event.movementX));
            setEnd(end + pixelsToFrames(event.movementX));
          }
        }}
        onPointerUp={event => {
          if (event.button === MouseButton.Left) {
            event.currentTarget.releasePointerCapture(event.pointerId);
            onDrop();
          }
        }}
        onDblClick={() => {
          meta.shared.range.update(0, Infinity, duration, fps);
        }}

Review comment (suggestion):
When holding `CTRL` + `SHIFT` the range should still be highlighted with the handles remaining invisible. Right now there's no indication that anything can be done with the range.

Code after:
          setEnd(pointerToFrames(event.clientX));
        }
      }}
      onPointerMove={event => {
        if (event.currentTarget.hasPointerCapture(event.pointerId)) {
          setEnd(end + pixelsToFrames(event.movementX));
        }
      }}
      onPointerUp={event => {
        if (event.button === MouseButton.Left) {
          event.currentTarget.releasePointerCapture(event.pointerId);
          onDrop();
        }
      }}
    >
      <div
        style={{
          flexDirection: start > end ? 'row-reverse' : 'row',
          left: `${framesToPercents(Math.ceil(Math.max(0, normalizedStart)))}%`,
          right: `${
            100 - framesToPercents(Math.ceil(Math.min(duration, normalizedEnd)))
          }%`,
        }}
        className={clsx(
          styles.range,
          shiftHeld && !controlHeld && styles.active,
        )}
        onPointerDown={event => {
          if (event.button === MouseButton.Left) {
            event.preventDefault();
            event.stopPropagation();
            event.currentTarget.setPointerCapture(event.pointerId);
          }
        }}
        onPointerMove={event => {
          if (event.currentTarget.hasPointerCapture(event.pointerId)) {
            setStart(start + pixelsToFrames(event.movementX));
            setEnd(end + pixelsToFrames(event.movementX));
          }
        }}
        onPointerUp={event => {
          if (event.button === MouseButton.Left) {
            event.currentTarget.releasePointerCapture(event.pointerId);
            onDrop();
          }
        }}
        onDblClick={() => {
          meta.shared.range.update(0, Infinity, duration, fps);
        }}
      >
        <RangeHandle value={start} setValue={setStart} onDrop={onDrop} />