init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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 { IconContrastTool } from "@humansignal/icons";
 
const ToolView = observer(({ item }) => {
  return (
    <Tool
      active={item.selected}
      ariaLabel="contrast"
      label="Contrast"
      controlsOnHover
      controls={[
        <Range
          key="contrast"
          align="vertical"
          reverse
          continuous
          minIcon={<IconContrastTool style={{ width: 22, height: 22, opacity: 0.2 }} />}
          maxIcon={<IconContrastTool style={{ width: 22, height: 22, opacity: 0.8 }} />}
          value={item.contrast}
          max={Constants.CONTRAST_MAX}
          onChange={(val) => {
            item.setStroke(val);
          }}
        />,
      ]}
      icon={<IconContrastTool />}
    />
  );
});
 
const _Tool = types
  .model("ContrastTool", {
    contrast: types.optional(types.number, Constants.CONTRAST_VALUE),
  })
  .views((self) => ({
    get viewClass() {
      return () => <ToolView item={self} />;
    },
  }))
  .actions((self) => ({
    setStroke(val) {
      self.contrast = val;
      self.obj.setContrastGrade(val);
    },
  }));
 
const Contrast = types.compose(_Tool.name, ToolMixin, BaseTool, _Tool);
 
export { Contrast };