Bin
2025-12-17 bc6aa38242b0a7dea4b18bc90e2d78740436a58b
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
import { observer } from "mobx-react";
import { types } from "mobx-state-tree";
 
import BaseTool from "./Base";
import Constants from "../core/Constants";
import ToolMixin from "../mixins/Tool";
 
import { Tool } from "../components/Toolbar/Tool";
import { Range } from "../common/Range/Range";
import { IconBrightnessTool } from "@humansignal/icons";
 
const ToolView = observer(({ item }) => {
  return (
    <Tool
      active={item.selected}
      ariaLabel="brightness"
      label="Brightness"
      controlsOnHover
      controls={[
        <Range
          key="brightness"
          align="vertical"
          reverse
          continuous
          minIcon={<IconBrightnessTool style={{ width: 22, height: 22, opacity: 0.2 }} />}
          maxIcon={<IconBrightnessTool style={{ width: 22, height: 22, opacity: 0.8 }} />}
          value={item.brightness}
          max={Constants.BRIGHTNESS_MAX}
          onChange={(val) => {
            item.setStroke(val);
          }}
        />,
      ]}
      icon={<IconBrightnessTool />}
    />
  );
});
 
const _Tool = types
  .model({
    brightness: types.optional(types.number, Constants.BRIGHTNESS_VALUE),
  })
  .views((self) => ({
    get viewClass() {
      return () => <ToolView item={self} />;
    },
  }))
  .actions((self) => ({
    setStroke(val) {
      self.brightness = val;
      self.obj.setBrightnessGrade(val);
    },
  }));
 
const Brightness = types.compose(_Tool.name, ToolMixin, BaseTool, _Tool);
 
export { Brightness };