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
| import { getEnv, getSnapshot, getType, types } from "mobx-state-tree";
| import { observer } from "mobx-react";
| import { Tool } from "../components/Toolbar/Tool";
| import kebabCase from "lodash/kebabCase";
|
| const ToolView = observer(({ item }) => {
| return (
| <Tool
| ariaLabel={kebabCase(getType(item).name)}
| active={item.selected}
| icon={item.iconClass}
| label={item.viewTooltip}
| shortcut={item.shortcut}
| extraShortcuts={item.extraShortcuts}
| tool={item}
| onClick={() => {
| item.manager.selectTool(item, true);
| }}
| />
| );
| });
|
| const BaseTool = types
| .model("BaseTool", {
| smart: false,
| unselectRegionOnToolChange: false,
| removeDuplicatesNamed: types.maybeNull(types.string),
| })
| .volatile(() => ({
| dynamic: false,
| index: 1,
| canInteractWithRegions: true,
| }))
| .views((self) => {
| return {
| get toolName() {
| return getType(self).name;
| },
| get isSeparated() {
| return self.control.isSeparated;
| },
| get viewClass() {
| return () => (self.shouldRenderView ? <ToolView item={self} /> : null);
| },
| get viewTooltip() {
| return null;
| },
| get controls() {
| return null;
| },
| get shouldRenderView() {
| return (self.isSeparated || self.smartEnabled) && self.iconClass;
| },
| get iconClass() {
| if (self.iconComponent) {
| const Icon = self.iconComponent;
|
| return <Icon />;
| }
| return null;
| },
| get iconComponent() {
| return null;
| },
| get smartEnabled() {
| return self.control?.smartEnabled ?? false;
| },
| };
| })
| .actions((self) => {
| return {
| afterCreate() {
| if (self.smart && self.control?.smart) {
| const currentEnv = getEnv(self);
| const toolType = getType(self);
| const snapshot = {
| ...getSnapshot(self),
| smart: false,
| default: false,
| };
| const env = {
| ...currentEnv,
| };
|
| const smartCopy = toolType.create(snapshot, env);
|
| smartCopy.makeDynamic();
|
| getEnv(self).manager.addTool(`${toolType.name}-smart`, smartCopy, self.control.removeDuplicatesNamed);
| }
| },
|
| makeDynamic() {
| self.dynamic = true;
| },
| };
| });
|
| export const MIN_SIZE = { X: 3, Y: 3 };
|
| export const DEFAULT_DIMENSIONS = {
| rect: { width: 30, height: 30 },
| ellipse: { radius: 30 },
| polygon: { length: 30 },
| vector: { length: 30 },
| };
|
| export default BaseTool;
|
|
