All files / src/components/music/piano PianoRollPatternBlock.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import { useAppSelector } from "store/hooks";
import { PatternChannelNotes } from "./PatternChannelNotes";
import { PianoRollCrosshair } from "./PianoRollCrosshair";
import {
  StyledPianoRollPatternBlockGrid,
  StyledPianoRollPatternBlock,
} from "./style";
 
interface PianoRollPatternBlockProps {
  patternId: number;
  sequenceId: number;
  displayChannels: number[];
  isDragging: boolean;
}
 
export const PianoRollPatternBlock = ({
  patternId,
  sequenceId,
  displayChannels,
  isDragging,
}: PianoRollPatternBlockProps) => {
  const songDocument = useAppSelector(
    (state) => state.trackerDocument.present.song,
  );
  const playing = useAppSelector((state) => state.tracker.playing);
 
  const selectedChannel = useAppSelector(
    (state) => state.tracker.selectedChannel,
  );
 
  const hoverColumn = useAppSelector((state) => state.tracker.hoverColumn);
  const hoverNote = useAppSelector((state) => state.tracker.hoverNote);
  const hoverSequence = useAppSelector((state) => state.tracker.hoverSequence);
 
  const selectedPatternCells = useAppSelector(
    (state) => state.tracker.selectedPatternCells,
  );
 
  const pattern = songDocument?.patterns[patternId] ?? [];
 
  const isSequenceHovered =
    hoverSequence === sequenceId ||
    (hoverSequence === null && sequenceId === 0);
 
  return (
    <StyledPianoRollPatternBlock
      $hovered={isSequenceHovered}
      $isPlaying={playing}
    >
      <StyledPianoRollPatternBlockGrid $size="small" />
      <StyledPianoRollPatternBlockGrid $size="large" />
 
      <PianoRollCrosshair
        hoverColumn={hoverColumn}
        hoverRow={hoverNote}
        isSequenceHovered={isSequenceHovered}
      />
 
      {displayChannels.map((channelId) => (
        <PatternChannelNotes
          key={channelId}
          channelId={channelId}
          sequenceId={sequenceId}
          isActive={selectedChannel === channelId}
          pattern={pattern}
          selectedPatternCells={selectedPatternCells}
          isDragging={isDragging}
        />
      ))}
    </StyledPianoRollPatternBlock>
  );
};