react-image-annotate-master-custom 0.0.3 → 0.0.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/HighlightBox/index.js +16 -51
- package/package.json +1 -1
package/HighlightBox/index.js
CHANGED
|
@@ -3,6 +3,7 @@ import React from "react";
|
|
|
3
3
|
import classnames from "classnames";
|
|
4
4
|
import { makeStyles } from "@mui/styles";
|
|
5
5
|
import { createTheme, ThemeProvider } from "@mui/material/styles";
|
|
6
|
+
import zIndex from "@mui/material/styles/zIndex";
|
|
6
7
|
var theme = createTheme();
|
|
7
8
|
var useStyles = makeStyles(function (theme) {
|
|
8
9
|
return {
|
|
@@ -71,7 +72,8 @@ export var HighlightBox = function HighlightBox(_ref) {
|
|
|
71
72
|
var styleCoordsHorizontal = r.type === "point" ? {
|
|
72
73
|
top: pbox.y + pbox.h - 12,
|
|
73
74
|
width: 600000000,
|
|
74
|
-
height:
|
|
75
|
+
height: 2,
|
|
76
|
+
zIndex: 1
|
|
75
77
|
} : {
|
|
76
78
|
left: pbox.x - 5,
|
|
77
79
|
top: pbox.y - 5,
|
|
@@ -80,8 +82,9 @@ export var HighlightBox = function HighlightBox(_ref) {
|
|
|
80
82
|
};
|
|
81
83
|
var styleCoordsVertical = r.type === "point" ? {
|
|
82
84
|
left: pbox.x + pbox.w - 15,
|
|
83
|
-
width:
|
|
84
|
-
height: 60000000
|
|
85
|
+
width: 2,
|
|
86
|
+
height: 60000000,
|
|
87
|
+
zIndex: 1
|
|
85
88
|
} : {
|
|
86
89
|
left: pbox.x - 5,
|
|
87
90
|
top: pbox.y - 5,
|
|
@@ -93,8 +96,8 @@ export var HighlightBox = function HighlightBox(_ref) {
|
|
|
93
96
|
return React.createElement(ThemeProvider, {
|
|
94
97
|
theme: theme
|
|
95
98
|
}, React.createElement("svg", Object.assign({
|
|
96
|
-
key: "".concat(r.id
|
|
97
|
-
id: "".concat(r.id
|
|
99
|
+
key: "".concat(r.id),
|
|
100
|
+
id: "".concat(r.id),
|
|
98
101
|
className: classnames(classes.highlightLight, {
|
|
99
102
|
highlighted: r.highlighted
|
|
100
103
|
})
|
|
@@ -125,65 +128,27 @@ export var HighlightBox = function HighlightBox(_ref) {
|
|
|
125
128
|
style: {
|
|
126
129
|
strokeDasharray: 5
|
|
127
130
|
}
|
|
128
|
-
})), React.createElement("svg",
|
|
131
|
+
})), React.createElement("svg", {
|
|
129
132
|
key: "".concat(r.id, "-horizontal"),
|
|
130
133
|
id: "".concat(r.id, "-horizontal"),
|
|
131
134
|
className: classnames(classes.highlightLight, {
|
|
132
135
|
highlighted: r.highlighted
|
|
133
|
-
})
|
|
134
|
-
|
|
135
|
-
onMouseDown: function onMouseDown(e) {
|
|
136
|
-
if (!r.locked && r.type === "point" && r.highlighted && e.button === 0) {
|
|
137
|
-
return onBeginMovePoint(r);
|
|
138
|
-
}
|
|
139
|
-
|
|
140
|
-
if (e.button === 0 && !createWithPrimary) {
|
|
141
|
-
return onSelectRegion(r);
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
onSelectRegion(r); //mouseEvents.onMouseDown(e)
|
|
145
|
-
}
|
|
146
|
-
} : {}, {
|
|
147
|
-
style: _objectSpread({}, r.highlighted ? {
|
|
148
|
-
pointerEvents: r.type !== "point" ? "none" : undefined,
|
|
149
|
-
cursor: "grab"
|
|
150
|
-
} : {
|
|
151
|
-
cursor: !(zoomWithPrimary || dragWithPrimary || createWithPrimary) ? "pointer" : undefined,
|
|
152
|
-
pointerEvents: zoomWithPrimary || dragWithPrimary || createWithPrimary && !r.highlighted ? "none" : undefined
|
|
153
|
-
}, {
|
|
136
|
+
}),
|
|
137
|
+
style: _objectSpread({
|
|
154
138
|
position: "absolute"
|
|
155
139
|
}, styleCoordsHorizontal)
|
|
156
|
-
}
|
|
140
|
+
}, React.createElement("path", {
|
|
157
141
|
d: pathDHorizontal
|
|
158
|
-
})), React.createElement("svg",
|
|
142
|
+
})), React.createElement("svg", {
|
|
159
143
|
key: "".concat(r.id, "-vertical"),
|
|
160
144
|
id: "".concat(r.id, "-vertical"),
|
|
161
145
|
className: classnames(classes.highlightLight, {
|
|
162
146
|
highlighted: r.highlighted
|
|
163
|
-
})
|
|
164
|
-
|
|
165
|
-
onMouseDown: function onMouseDown(e) {
|
|
166
|
-
if (!r.locked && r.type === "point" && r.highlighted && e.button === 0) {
|
|
167
|
-
return onBeginMovePoint(r);
|
|
168
|
-
}
|
|
169
|
-
|
|
170
|
-
if (e.button === 0 && !createWithPrimary) {
|
|
171
|
-
return onSelectRegion(r);
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
onSelectRegion(r); //mouseEvents.onMouseDown(e)
|
|
175
|
-
}
|
|
176
|
-
} : {}, {
|
|
177
|
-
style: _objectSpread({}, r.highlighted ? {
|
|
178
|
-
pointerEvents: r.type !== "point" ? "none" : undefined,
|
|
179
|
-
cursor: "grab"
|
|
180
|
-
} : {
|
|
181
|
-
cursor: !(zoomWithPrimary || dragWithPrimary || createWithPrimary) ? "pointer" : undefined,
|
|
182
|
-
pointerEvents: zoomWithPrimary || dragWithPrimary || createWithPrimary && !r.highlighted ? "none" : undefined
|
|
183
|
-
}, {
|
|
147
|
+
}),
|
|
148
|
+
style: _objectSpread({
|
|
184
149
|
position: "absolute"
|
|
185
150
|
}, styleCoordsVertical)
|
|
186
|
-
}
|
|
151
|
+
}, React.createElement("path", {
|
|
187
152
|
d: pathDVertical
|
|
188
153
|
})));
|
|
189
154
|
};
|