@midscene/shared 0.6.2 → 0.6.3-beta-20241017041417.0

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.
Files changed (4) hide show
  1. package/dist/es/img.js +31 -3
  2. package/dist/lib/img.js +31 -3
  3. package/package.json +1 -1
  4. package/src/img/box-select.ts +68 -4
package/dist/es/img.js CHANGED
@@ -159,9 +159,37 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
159
159
  const rectHeight = textHeight + 4;
160
160
  let rectX = paddedRect.left - rectWidth;
161
161
  let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
162
- if (rectX < 0) {
163
- rectX = paddedRect.left;
164
- rectY = paddedRect.top - rectHeight;
162
+ const checkOverlap = (x, y) => {
163
+ return elements2.slice(0, index).some((otherElement) => {
164
+ return x < otherElement.rect.left + otherElement.rect.width && x + rectWidth > otherElement.rect.left && y < otherElement.rect.top + otherElement.rect.height && y + rectHeight > otherElement.rect.top;
165
+ });
166
+ };
167
+ const isWithinBounds = (x, y) => {
168
+ return x >= 0 && x + rectWidth <= imageWidth2 && y >= 0 && y + rectHeight <= imageHeight2;
169
+ };
170
+ if (checkOverlap(rectX, rectY) || !isWithinBounds(rectX, rectY)) {
171
+ if (!checkOverlap(paddedRect.left, paddedRect.top - rectHeight - 2) && isWithinBounds(paddedRect.left, paddedRect.top - rectHeight - 2)) {
172
+ rectX = paddedRect.left;
173
+ rectY = paddedRect.top - rectHeight - 2;
174
+ } else if (!checkOverlap(
175
+ paddedRect.left,
176
+ paddedRect.top + paddedRect.height + 2
177
+ ) && isWithinBounds(
178
+ paddedRect.left,
179
+ paddedRect.top + paddedRect.height + 2
180
+ )) {
181
+ rectX = paddedRect.left;
182
+ rectY = paddedRect.top + paddedRect.height + 2;
183
+ } else if (!checkOverlap(
184
+ paddedRect.left + paddedRect.width + 2,
185
+ paddedRect.top
186
+ ) && isWithinBounds(paddedRect.left + paddedRect.width + 2, paddedRect.top)) {
187
+ rectX = paddedRect.left + paddedRect.width + 2;
188
+ rectY = paddedRect.top;
189
+ } else {
190
+ rectX = paddedRect.left;
191
+ rectY = paddedRect.top + 2;
192
+ }
165
193
  }
166
194
  image.scan(rectX, rectY, rectWidth, rectHeight, function(x, y, idx) {
167
195
  this.bitmap.data[idx + 0] = color.rect >> 24 & 255;
package/dist/lib/img.js CHANGED
@@ -205,9 +205,37 @@ var createSvgOverlay = (elements, imageWidth, imageHeight) => {
205
205
  const rectHeight = textHeight + 4;
206
206
  let rectX = paddedRect.left - rectWidth;
207
207
  let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
208
- if (rectX < 0) {
209
- rectX = paddedRect.left;
210
- rectY = paddedRect.top - rectHeight;
208
+ const checkOverlap = (x, y) => {
209
+ return elements2.slice(0, index).some((otherElement) => {
210
+ return x < otherElement.rect.left + otherElement.rect.width && x + rectWidth > otherElement.rect.left && y < otherElement.rect.top + otherElement.rect.height && y + rectHeight > otherElement.rect.top;
211
+ });
212
+ };
213
+ const isWithinBounds = (x, y) => {
214
+ return x >= 0 && x + rectWidth <= imageWidth2 && y >= 0 && y + rectHeight <= imageHeight2;
215
+ };
216
+ if (checkOverlap(rectX, rectY) || !isWithinBounds(rectX, rectY)) {
217
+ if (!checkOverlap(paddedRect.left, paddedRect.top - rectHeight - 2) && isWithinBounds(paddedRect.left, paddedRect.top - rectHeight - 2)) {
218
+ rectX = paddedRect.left;
219
+ rectY = paddedRect.top - rectHeight - 2;
220
+ } else if (!checkOverlap(
221
+ paddedRect.left,
222
+ paddedRect.top + paddedRect.height + 2
223
+ ) && isWithinBounds(
224
+ paddedRect.left,
225
+ paddedRect.top + paddedRect.height + 2
226
+ )) {
227
+ rectX = paddedRect.left;
228
+ rectY = paddedRect.top + paddedRect.height + 2;
229
+ } else if (!checkOverlap(
230
+ paddedRect.left + paddedRect.width + 2,
231
+ paddedRect.top
232
+ ) && isWithinBounds(paddedRect.left + paddedRect.width + 2, paddedRect.top)) {
233
+ rectX = paddedRect.left + paddedRect.width + 2;
234
+ rectY = paddedRect.top;
235
+ } else {
236
+ rectX = paddedRect.left;
237
+ rectY = paddedRect.top + 2;
238
+ }
211
239
  }
212
240
  image.scan(rectX, rectY, rectWidth, rectHeight, function(x, y, idx) {
213
241
  this.bitmap.data[idx + 0] = color.rect >> 24 & 255;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@midscene/shared",
3
- "version": "0.6.2",
3
+ "version": "0.6.3-beta-20241017041417.0",
4
4
  "repository": "https://github.com/web-infra-dev/midscene",
5
5
  "homepage": "https://midscenejs.com/",
6
6
  "types": "./dist/types/index.d.ts",
package/src/img/box-select.ts CHANGED
@@ -89,11 +89,75 @@ const createSvgOverlay = (
89
89
  let rectX = paddedRect.left - rectWidth;
90
90
  let rectY = paddedRect.top + paddedRect.height / 2 - textHeight / 2 - 2;
91
91
 
92
- // Check if obscured by the left
93
- if (rectX < 0) {
94
- rectX = paddedRect.left;
95
- rectY = paddedRect.top - rectHeight;
92
+ // Check if this new position overlaps with any existing boxes
93
+ // Function to check if a given position overlaps with any existing boxes
94
+ const checkOverlap = (x: number, y: number) => {
95
+ // Check against all previously processed elements
96
+ return elements.slice(0, index).some((otherElement) => {
97
+ // Check if the rectangles overlap
98
+ return (
99
+ x < otherElement.rect.left + otherElement.rect.width &&
100
+ x + rectWidth > otherElement.rect.left &&
101
+ y < otherElement.rect.top + otherElement.rect.height &&
102
+ y + rectHeight > otherElement.rect.top
103
+ );
104
+ });
105
+ };
106
+
107
+ // Function to check if a given position is within the image bounds
108
+ const isWithinBounds = (x: number, y: number) => {
109
+ return (
110
+ x >= 0 &&
111
+ x + rectWidth <= imageWidth &&
112
+ y >= 0 &&
113
+ y + rectHeight <= imageHeight
114
+ );
115
+ };
116
+
117
+ // Check left side (original position)
118
+ if (checkOverlap(rectX, rectY) || !isWithinBounds(rectX, rectY)) {
119
+ // If the original position overlaps or is out of bounds, try alternative positions
120
+
121
+ // Check top position
122
+ if (
123
+ !checkOverlap(paddedRect.left, paddedRect.top - rectHeight - 2) &&
124
+ isWithinBounds(paddedRect.left, paddedRect.top - rectHeight - 2)
125
+ ) {
126
+ rectX = paddedRect.left;
127
+ rectY = paddedRect.top - rectHeight - 2;
128
+ }
129
+ // Check bottom position
130
+ else if (
131
+ !checkOverlap(
132
+ paddedRect.left,
133
+ paddedRect.top + paddedRect.height + 2,
134
+ ) &&
135
+ isWithinBounds(
136
+ paddedRect.left,
137
+ paddedRect.top + paddedRect.height + 2,
138
+ )
139
+ ) {
140
+ rectX = paddedRect.left;
141
+ rectY = paddedRect.top + paddedRect.height + 2;
142
+ }
143
+ // Check right position
144
+ else if (
145
+ !checkOverlap(
146
+ paddedRect.left + paddedRect.width + 2,
147
+ paddedRect.top,
148
+ ) &&
149
+ isWithinBounds(paddedRect.left + paddedRect.width + 2, paddedRect.top)
150
+ ) {
151
+ rectX = paddedRect.left + paddedRect.width + 2;
152
+ rectY = paddedRect.top;
153
+ }
154
+ // If all sides are overlapped or out of bounds, place it inside the box at the top
155
+ else {
156
+ rectX = paddedRect.left;
157
+ rectY = paddedRect.top + 2;
158
+ }
96
159
  }
160
+ // Note: If the original left position doesn't overlap and is within bounds, we keep it as is
97
161
 
98
162
  // Draw text background
99
163
  image.scan(rectX, rectY, rectWidth, rectHeight, function (x, y, idx) {