All files / src/components/music/tracker SongTrackerPatternChannelRow.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
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React, { memo } from "react";
import { useAppSelector } from "store/hooks";
import {
  renderEffect,
  renderEffectParam,
  renderInstrument,
  renderNote,
} from "shared/lib/uge/display";
import { TRACKER_CHANNEL_FIELDS, TRACKER_ROW_SIZE } from "consts";
import { createPatternCell } from "shared/lib/uge/song";
import {
  StyledTrackerEffectCodeField,
  StyledTrackerEffectParamField,
  StyledTrackerInstrumentField,
  StyledTrackerNoteField,
  StyledTrackerPatternChannelRow,
} from "./style";
import {
  decodePatternChannelRowState,
  getPatternChannelRowState,
} from "./helpers";
 
const EMPTY_CELL = createPatternCell();
 
interface SongTrackerPatternChannelRowProps {
  patternId: number;
  channelId: 0 | 1 | 2 | 3;
  rowIndex: number;
  renderSequenceId: number;
  activeFieldRef: React.RefObject<HTMLSpanElement | null>;
}
 
export const SongTrackerPatternChannelRow = memo(
  ({
    patternId,
    channelId,
    rowIndex,
    renderSequenceId,
    activeFieldRef,
  }: SongTrackerPatternChannelRowProps) => {
    const cell = useAppSelector(
      (state) =>
        state.trackerDocument.present.song?.patterns[patternId]?.[rowIndex] ??
        EMPTY_CELL,
    );
 
    const rowState = useAppSelector((state) =>
      getPatternChannelRowState({
        trackerActiveField: state.tracker.trackerActiveField,
        selectionSequenceId: state.tracker.trackerSelectionOrigin?.sequenceId,
        selectedTrackerFields: state.tracker.selectedTrackerFields,
        renderSequenceId,
        channelId,
        rowIndex,
      }),
    );
 
    const {
      rowActive,
      noteActive,
      noteSelected,
      instrumentActive,
      instrumentSelected,
      effectCodeActive,
      effectCodeSelected,
      effectParamActive,
      effectParamSelected,
    } = decodePatternChannelRowState(rowState);
    const channelFieldBase = channelId * TRACKER_CHANNEL_FIELDS;
    const localField = rowIndex * TRACKER_ROW_SIZE + channelFieldBase;
 
    return (
      <StyledTrackerPatternChannelRow
        $isStepMarker={rowIndex % 8 === 0}
        $isActive={rowActive}
      >
        <StyledTrackerNoteField
          id={`cell_${renderSequenceId}_${rowIndex}_${channelId}_note`}
          $active={noteActive}
          ref={noteActive ? activeFieldRef : null}
          data-sequenceid={renderSequenceId}
          data-fieldid={localField}
          $selected={noteSelected}
        >
          {renderNote(cell.note)}
        </StyledTrackerNoteField>
 
        <StyledTrackerInstrumentField
          id={`cell_${renderSequenceId}_${rowIndex}_${channelId}_instrument`}
          $active={instrumentActive}
          ref={instrumentActive ? activeFieldRef : null}
          data-sequenceid={renderSequenceId}
          data-fieldid={localField + 1}
          $selected={instrumentSelected}
        >
          {renderInstrument(cell.instrument)}
        </StyledTrackerInstrumentField>
 
        <StyledTrackerEffectCodeField
          id={`cell_${renderSequenceId}_${rowIndex}_${channelId}_effectCode`}
          $active={effectCodeActive}
          ref={effectCodeActive ? activeFieldRef : null}
          data-sequenceid={renderSequenceId}
          data-fieldid={localField + 2}
          $selected={effectCodeSelected}
        >
          {renderEffect(cell.effectCode)}
        </StyledTrackerEffectCodeField>
 
        <StyledTrackerEffectParamField
          id={`cell_${renderSequenceId}_${rowIndex}_${channelId}_effectParam`}
          $active={effectParamActive}
          ref={effectParamActive ? activeFieldRef : null}
          data-sequenceid={renderSequenceId}
          data-fieldid={localField + 3}
          $selected={effectParamSelected}
        >
          {renderEffectParam(cell.effectParam)}
        </StyledTrackerEffectParamField>
      </StyledTrackerPatternChannelRow>
    );
  },
);