All files / src/components/music RollChannelSelectionArea.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from "react";
import { useAppSelector } from "store/hooks";
import styled, { css } from "styled-components";
import { SelectionRect } from "./SongPianoRoll";
import { Selection } from "ui/document/Selection";
 
interface RollChannelSelectionAreaProps {
  cellSize: number;
  selectionRect?: SelectionRect;
}
 
interface WrapperProps {
  $rows: number;
  $cols: number;
  $size: number;
  $canSelect: boolean;
}
 
const Wrapper = styled.div<WrapperProps>`
  position: absolute;
  top: 0;
 
  ${(props) => css`
    margin: 0 ${2 * props.$size}px ${2 * props.$size}px 10px;
    width: ${props.$cols * props.$size}px;
    height: ${props.$rows * props.$size}px;
  `}
`;
 
export const RollChannelSelectionAreaFwd = React.forwardRef<
  HTMLDivElement,
  RollChannelSelectionAreaProps
>(({ cellSize, selectionRect }: RollChannelSelectionAreaProps, ref) => {
  const tool = useAppSelector((state) => state.tracker.tool);
 
  return (
    <Wrapper
      ref={ref}
      $rows={12 * 6}
      $cols={64}
      $size={cellSize}
      $canSelect={tool === "selection"}
    >
      {tool === "selection" && selectionRect && (
        <Selection
          style={{
            pointerEvents: "none",
            left: selectionRect.x,
            top: selectionRect.y,
            width: selectionRect.width,
            height: selectionRect.height,
          }}
        />
      )}
    </Wrapper>
  );
});
 
export const RollChannelSelectionArea = React.memo(RollChannelSelectionAreaFwd);