debugger DebuggerControls.tsx

0% Statements 0/45
0% Branches 0/23
0% Functions 0/12
0% Lines 0/42
Press n or j to go to the next uncovered block, b, p or k for the previous block.

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  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useCallback, useEffect } from "react";
import API from "renderer/lib/api";
import l10n, { L10NKey } from "shared/lib/lang/l10n";
import { useAppDispatch, useAppSelector } from "store/hooks";
import { Button } from "ui/buttons/Button";
import { PlayStartIcon, PauseIcon, NextIcon, StepIcon } from "ui/icons/Icons";
import { FixedSpacer } from "ui/spacing/Spacing";
import debuggerActions from "store/features/debugger/debuggerActions";
import settingsActions from "store/features/settings/settingsActions";
 
const DebuggerControls = () => {
  const dispatch = useAppDispatch();
  const initialized = useAppSelector((state) => state.debug.initialized);
  const isPaused = useAppSelector((state) => state.debug.isPaused);
  const isLogOpen = useAppSelector((state) => state.debug.isLogOpen);
  const debuggerEnabled = useAppSelector(
    (state) => state.project.present.settings.debuggerEnabled
  );
 
  const onPlayPause = useCallback(() => {
    if (isPaused) {
      API.debugger.resume();
    } else {
      API.debugger.pause();
    }
  }, [isPaused]);
 
  const onStep = useCallback(() => {
    API.debugger.step();
  }, []);
 
  const onStepFrame = useCallback(() => {
    API.debugger.stepFrame();
  }, []);
 
  const onToggleBuildLog = useCallback(() => {
    if (!debuggerEnabled) {
      dispatch(settingsActions.editSettings({ debuggerEnabled: true }));
      dispatch(debuggerActions.setIsLogOpen(true));
    } else {
      dispatch(debuggerActions.setIsLogOpen(!isLogOpen));
    }
  }, [debuggerEnabled, dispatch, isLogOpen]);
 
  const onKeyDown = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "F8") {
        onPlayPause();
      } else if (e.key === "F9") {
        onStep();
      } else Iif (e.key === "F10") {
        onStepFrame();
      }
    },
    [onPlayPause, onStep, onStepFrame]
  );
 
  useEffect(() => {
    window.addEventListener("keydown", onKeyDown);
    return () => {
      window.removeEventListener("keydown", onKeyDown);
    };
  }, [onKeyDown]);
 
  return (
    <>
      {initialized && (
        <>
          <Button
            size="small"
            variant="transparent"
            onClick={onPlayPause}
            title={isPaused ? l10n("FIELD_RESUME") : l10n("FIELD_PAUSE")}
          >
            {isPaused ? <PlayStartIcon /> : <PauseIcon />}
          </Button>
          <FixedSpacer width={5} />
          <Button
            size="small"
            variant="transparent"
            disabled={!isPaused}
            onClick={isPaused ? onStep : undefined}
            title={l10n("FIELD_STEP")}
          >
            <StepIcon />
          </Button>
          <Button
            size="small"
            variant="transparent"
            disabled={!isPaused}
            onClick={isPaused ? onStepFrame : undefined}
            title={l10n("FIELD_STEP_FRAME")}
          >
            <NextIcon />
          </Button>
        </>
      )}
      <FixedSpacer width={10} />
      <Button
        size="small"
        variant={isLogOpen && debuggerEnabled ? "primary" : "transparent"}
        onClick={onToggleBuildLog}
      >
        {l10n("FIELD_BUILD_LOG" as L10NKey)}
      </Button>
    </>
  );
};
 
export default DebuggerControls;