@buoy-gg/image-overlay 7.0.41 → 7.0.42
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/README.md +12 -76
- package/lib/commonjs/imageOverlay/components/ImageOverlayModal.js +1 -880
- package/lib/commonjs/imageOverlay/components/ImageOverlayStandalone.js +1 -463
- package/lib/commonjs/imageOverlay/components/OverlayControls.js +1 -253
- package/lib/commonjs/imageOverlay/components/TargetList.js +1 -181
- package/lib/commonjs/imageOverlay/types/index.js +1 -1
- package/lib/commonjs/imageOverlay/utils/ImageOverlayController.js +1 -426
- package/lib/commonjs/imageOverlay/utils/componentMeasurement.js +1 -106
- package/lib/commonjs/imageOverlay/utils/devtoolsHook.js +1 -36
- package/lib/commonjs/imageOverlay/utils/fiberScanner.js +1 -104
- package/lib/commonjs/imageOverlay/utils/imageClipboard.js +1 -22
- package/lib/commonjs/imageOverlay/utils/imageClipboard.web.js +1 -44
- package/lib/commonjs/index.js +1 -59
- package/lib/commonjs/preset.js +1 -42
- package/lib/module/imageOverlay/components/ImageOverlayModal.js +1 -875
- package/lib/module/imageOverlay/components/ImageOverlayStandalone.js +1 -459
- package/lib/module/imageOverlay/components/OverlayControls.js +1 -249
- package/lib/module/imageOverlay/components/TargetList.js +1 -177
- package/lib/module/imageOverlay/types/index.js +1 -1
- package/lib/module/imageOverlay/utils/ImageOverlayController.js +1 -422
- package/lib/module/imageOverlay/utils/componentMeasurement.js +1 -102
- package/lib/module/imageOverlay/utils/devtoolsHook.js +1 -31
- package/lib/module/imageOverlay/utils/fiberScanner.js +1 -100
- package/lib/module/imageOverlay/utils/imageClipboard.js +1 -17
- package/lib/module/imageOverlay/utils/imageClipboard.web.js +1 -39
- package/lib/module/index.js +1 -35
- package/lib/module/preset.js +1 -38
- package/lib/web/index.mjs +4 -5
- package/package.json +2 -2
- package/lib/typescript/imageOverlay/components/ImageOverlayModal.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/components/ImageOverlayStandalone.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/components/OverlayControls.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/components/TargetList.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/types/index.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/ImageOverlayController.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/componentMeasurement.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/devtoolsHook.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/fiberScanner.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/imageClipboard.d.ts.map +0 -1
- package/lib/typescript/imageOverlay/utils/imageClipboard.web.d.ts.map +0 -1
- package/lib/typescript/index.d.ts.map +0 -1
- package/lib/typescript/preset.d.ts.map +0 -1
|
@@ -1,422 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Singleton state manager for the image overlay tool.
|
|
5
|
-
* Bridges the modal (controls) and standalone overlay (rendering).
|
|
6
|
-
* Supports two modes: "component" (match to tagged element) and "free" (drag anywhere).
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { Image as RNImage, Dimensions } from "react-native";
|
|
10
|
-
import { measureInstance } from "./componentMeasurement";
|
|
11
|
-
import { scanForImageTargets } from "./fiberScanner";
|
|
12
|
-
import { getDevToolsHook } from "./devtoolsHook";
|
|
13
|
-
const DEFAULT_STATE = {
|
|
14
|
-
mode: null,
|
|
15
|
-
enabled: false,
|
|
16
|
-
imageUri: null,
|
|
17
|
-
imageWidth: null,
|
|
18
|
-
imageHeight: null,
|
|
19
|
-
targetTag: null,
|
|
20
|
-
targetLabel: null,
|
|
21
|
-
targetRect: null,
|
|
22
|
-
showOutline: true,
|
|
23
|
-
opacity: 0.5,
|
|
24
|
-
scale: 1.0,
|
|
25
|
-
offsetX: 0,
|
|
26
|
-
offsetY: 0,
|
|
27
|
-
invertX: false,
|
|
28
|
-
invertY: false,
|
|
29
|
-
locked: false,
|
|
30
|
-
freeX: 0,
|
|
31
|
-
freeY: 0,
|
|
32
|
-
freeWidth: 200,
|
|
33
|
-
freeHeight: 200
|
|
34
|
-
};
|
|
35
|
-
let state = {
|
|
36
|
-
...DEFAULT_STATE
|
|
37
|
-
};
|
|
38
|
-
const listeners = new Set();
|
|
39
|
-
|
|
40
|
-
// Hold onto references so we can remeasure
|
|
41
|
-
let targetInstance = null;
|
|
42
|
-
let targetLabel = null;
|
|
43
|
-
|
|
44
|
-
// Auto-tracking via React DevTools traceUpdates
|
|
45
|
-
let autoTrackEnabled = false;
|
|
46
|
-
let traceUnsubscribe = null;
|
|
47
|
-
let trackingNativeTag = null;
|
|
48
|
-
function notify() {
|
|
49
|
-
for (const listener of listeners) {
|
|
50
|
-
listener(state);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
function getNativeTag(instance) {
|
|
54
|
-
if (!instance) return null;
|
|
55
|
-
if (typeof instance._nativeTag === "number") return instance._nativeTag;
|
|
56
|
-
if (typeof instance.canonical?._nativeTag === "number") return instance.canonical._nativeTag;
|
|
57
|
-
if (typeof instance.__nativeTag === "number") return instance.__nativeTag;
|
|
58
|
-
return null;
|
|
59
|
-
}
|
|
60
|
-
async function measureWithFallback(instance, label) {
|
|
61
|
-
let rect = await measureInstance(instance);
|
|
62
|
-
if (rect) return {
|
|
63
|
-
rect,
|
|
64
|
-
freshInstance: instance
|
|
65
|
-
};
|
|
66
|
-
const targets = scanForImageTargets();
|
|
67
|
-
const fresh = targets.find(t => t.label === label);
|
|
68
|
-
if (fresh) {
|
|
69
|
-
rect = await measureInstance(fresh.instance);
|
|
70
|
-
if (rect) return {
|
|
71
|
-
rect,
|
|
72
|
-
freshInstance: fresh.instance
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
return {
|
|
76
|
-
rect: null,
|
|
77
|
-
freshInstance: instance
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* Subscribe to React DevTools traceUpdates to remeasure our target
|
|
83
|
-
* component in real-time whenever ANY component re-renders (which
|
|
84
|
-
* includes scroll events that reposition our target).
|
|
85
|
-
*/
|
|
86
|
-
function startTraceTracking() {
|
|
87
|
-
if (traceUnsubscribe) return; // already tracking
|
|
88
|
-
|
|
89
|
-
const hook = getDevToolsHook();
|
|
90
|
-
if (!hook) return;
|
|
91
|
-
|
|
92
|
-
// Enable trace updates on all renderers (same as highlight-updates)
|
|
93
|
-
if (hook.rendererInterfaces) {
|
|
94
|
-
for (const [, renderer] of hook.rendererInterfaces) {
|
|
95
|
-
if (typeof renderer.setTraceUpdatesEnabled === "function") {
|
|
96
|
-
renderer.setTraceUpdatesEnabled(true);
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// Subscribe to traceUpdates — fires whenever components render
|
|
102
|
-
if (typeof hook.sub === "function") {
|
|
103
|
-
traceUnsubscribe = hook.sub("traceUpdates", handleTraceForAutoTrack);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
|
|
107
|
-
/**
|
|
108
|
-
* Remeasure once per frame while Auto Track is on.
|
|
109
|
-
*
|
|
110
|
-
* traceUpdates alone missed the common case: a native scroll moves the target
|
|
111
|
-
* without any React render, so the overlay stayed where the row used to be.
|
|
112
|
-
* One measure in flight at a time, so a slow bridge never queues frames.
|
|
113
|
-
*/
|
|
114
|
-
let frameHandle = null;
|
|
115
|
-
let frameMeasuring = false;
|
|
116
|
-
function startFrameTracking() {
|
|
117
|
-
if (frameHandle !== null || typeof requestAnimationFrame !== "function") return;
|
|
118
|
-
const tick = () => {
|
|
119
|
-
frameHandle = requestAnimationFrame(tick);
|
|
120
|
-
if (frameMeasuring || !autoTrackEnabled || !targetInstance) return;
|
|
121
|
-
frameMeasuring = true;
|
|
122
|
-
remeasureTarget().finally(() => {
|
|
123
|
-
frameMeasuring = false;
|
|
124
|
-
});
|
|
125
|
-
};
|
|
126
|
-
frameHandle = requestAnimationFrame(tick);
|
|
127
|
-
}
|
|
128
|
-
function stopFrameTracking() {
|
|
129
|
-
if (frameHandle !== null && typeof cancelAnimationFrame === "function") cancelAnimationFrame(frameHandle);
|
|
130
|
-
frameHandle = null;
|
|
131
|
-
}
|
|
132
|
-
function stopTraceTracking() {
|
|
133
|
-
stopFrameTracking();
|
|
134
|
-
if (traceUnsubscribe) {
|
|
135
|
-
traceUnsubscribe();
|
|
136
|
-
traceUnsubscribe = null;
|
|
137
|
-
}
|
|
138
|
-
// Note: we don't disable traceUpdates on renderers because
|
|
139
|
-
// highlight-updates may also be using them
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
/** Called on every traceUpdates event — remeasure our target */
|
|
143
|
-
function handleTraceForAutoTrack(_nodes) {
|
|
144
|
-
if (!autoTrackEnabled || !targetInstance) return;
|
|
145
|
-
|
|
146
|
-
// Don't filter by nativeTag — any render could have caused a layout
|
|
147
|
-
// shift (e.g. sibling resize, scroll). Just remeasure cheaply.
|
|
148
|
-
void remeasureTarget();
|
|
149
|
-
}
|
|
150
|
-
function remeasureTarget() {
|
|
151
|
-
return measureInstance(targetInstance).then(rect => {
|
|
152
|
-
if (rect && state.targetRect) {
|
|
153
|
-
// Only notify if position actually changed
|
|
154
|
-
const prev = state.targetRect;
|
|
155
|
-
if (Math.abs(rect.x - prev.x) > 0.5 || Math.abs(rect.y - prev.y) > 0.5 || Math.abs(rect.width - prev.width) > 0.5 || Math.abs(rect.height - prev.height) > 0.5) {
|
|
156
|
-
state = {
|
|
157
|
-
...state,
|
|
158
|
-
targetRect: rect
|
|
159
|
-
};
|
|
160
|
-
notify();
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
}).catch(() => {
|
|
164
|
-
// The target unmounted mid-measure; the next frame tries again.
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
function getImageSize(uri) {
|
|
168
|
-
return new Promise(resolve => {
|
|
169
|
-
RNImage.getSize(uri, (width, height) => resolve({
|
|
170
|
-
width,
|
|
171
|
-
height
|
|
172
|
-
}), () => resolve(null));
|
|
173
|
-
});
|
|
174
|
-
}
|
|
175
|
-
export const ImageOverlayController = {
|
|
176
|
-
subscribe(listener) {
|
|
177
|
-
listeners.add(listener);
|
|
178
|
-
listener(state);
|
|
179
|
-
return () => listeners.delete(listener);
|
|
180
|
-
},
|
|
181
|
-
getState() {
|
|
182
|
-
return state;
|
|
183
|
-
},
|
|
184
|
-
// ─── Component Match Mode ───────────────────────────────────────────
|
|
185
|
-
|
|
186
|
-
async setTarget(instance, label, fiber) {
|
|
187
|
-
targetInstance = instance;
|
|
188
|
-
targetLabel = label;
|
|
189
|
-
const instanceToMeasure = fiber?.stateNode ?? instance;
|
|
190
|
-
const {
|
|
191
|
-
rect,
|
|
192
|
-
freshInstance
|
|
193
|
-
} = await measureWithFallback(instanceToMeasure, label);
|
|
194
|
-
targetInstance = freshInstance;
|
|
195
|
-
const tag = getNativeTag(targetInstance);
|
|
196
|
-
state = {
|
|
197
|
-
...state,
|
|
198
|
-
mode: "component",
|
|
199
|
-
targetTag: tag,
|
|
200
|
-
targetLabel: label,
|
|
201
|
-
targetRect: rect
|
|
202
|
-
};
|
|
203
|
-
notify();
|
|
204
|
-
},
|
|
205
|
-
async setImageUri(uri) {
|
|
206
|
-
const size = await getImageSize(uri);
|
|
207
|
-
let autoScale = 1.0;
|
|
208
|
-
if (size && state.targetRect && size.width > 0) {
|
|
209
|
-
autoScale = state.targetRect.width / size.width;
|
|
210
|
-
}
|
|
211
|
-
state = {
|
|
212
|
-
...state,
|
|
213
|
-
imageUri: uri,
|
|
214
|
-
imageWidth: size?.width ?? null,
|
|
215
|
-
imageHeight: size?.height ?? null,
|
|
216
|
-
scale: autoScale,
|
|
217
|
-
showOutline: false
|
|
218
|
-
};
|
|
219
|
-
notify();
|
|
220
|
-
},
|
|
221
|
-
setOpacity(value) {
|
|
222
|
-
state = {
|
|
223
|
-
...state,
|
|
224
|
-
opacity: Math.max(0, Math.min(1, value))
|
|
225
|
-
};
|
|
226
|
-
notify();
|
|
227
|
-
},
|
|
228
|
-
setScale(value) {
|
|
229
|
-
state = {
|
|
230
|
-
...state,
|
|
231
|
-
scale: Math.max(0.01, Math.min(5, value))
|
|
232
|
-
};
|
|
233
|
-
notify();
|
|
234
|
-
},
|
|
235
|
-
setOffset(x, y) {
|
|
236
|
-
state = {
|
|
237
|
-
...state,
|
|
238
|
-
offsetX: x,
|
|
239
|
-
offsetY: y
|
|
240
|
-
};
|
|
241
|
-
notify();
|
|
242
|
-
},
|
|
243
|
-
toggleInvertX() {
|
|
244
|
-
state = {
|
|
245
|
-
...state,
|
|
246
|
-
invertX: !state.invertX
|
|
247
|
-
};
|
|
248
|
-
notify();
|
|
249
|
-
},
|
|
250
|
-
toggleInvertY() {
|
|
251
|
-
state = {
|
|
252
|
-
...state,
|
|
253
|
-
invertY: !state.invertY
|
|
254
|
-
};
|
|
255
|
-
notify();
|
|
256
|
-
},
|
|
257
|
-
setLocked(locked) {
|
|
258
|
-
state = {
|
|
259
|
-
...state,
|
|
260
|
-
locked
|
|
261
|
-
};
|
|
262
|
-
notify();
|
|
263
|
-
},
|
|
264
|
-
setAutoTrack(enabled) {
|
|
265
|
-
autoTrackEnabled = enabled;
|
|
266
|
-
if (enabled) {
|
|
267
|
-
startTraceTracking();
|
|
268
|
-
startFrameTracking();
|
|
269
|
-
} else {
|
|
270
|
-
stopTraceTracking();
|
|
271
|
-
}
|
|
272
|
-
},
|
|
273
|
-
isAutoTracking() {
|
|
274
|
-
return autoTrackEnabled;
|
|
275
|
-
},
|
|
276
|
-
setShowOutline(show) {
|
|
277
|
-
state = {
|
|
278
|
-
...state,
|
|
279
|
-
showOutline: show
|
|
280
|
-
};
|
|
281
|
-
notify();
|
|
282
|
-
},
|
|
283
|
-
setEnabled(enabled) {
|
|
284
|
-
state = {
|
|
285
|
-
...state,
|
|
286
|
-
enabled
|
|
287
|
-
};
|
|
288
|
-
notify();
|
|
289
|
-
},
|
|
290
|
-
toggle() {
|
|
291
|
-
state = {
|
|
292
|
-
...state,
|
|
293
|
-
enabled: !state.enabled
|
|
294
|
-
};
|
|
295
|
-
notify();
|
|
296
|
-
},
|
|
297
|
-
fitWidth() {
|
|
298
|
-
if (state.imageWidth && state.targetRect && state.imageWidth > 0) {
|
|
299
|
-
state = {
|
|
300
|
-
...state,
|
|
301
|
-
scale: state.targetRect.width / state.imageWidth
|
|
302
|
-
};
|
|
303
|
-
notify();
|
|
304
|
-
}
|
|
305
|
-
},
|
|
306
|
-
fitHeight() {
|
|
307
|
-
if (state.imageHeight && state.targetRect && state.imageHeight > 0) {
|
|
308
|
-
state = {
|
|
309
|
-
...state,
|
|
310
|
-
scale: state.targetRect.height / state.imageHeight
|
|
311
|
-
};
|
|
312
|
-
notify();
|
|
313
|
-
}
|
|
314
|
-
},
|
|
315
|
-
resetSettings() {
|
|
316
|
-
if (state.mode === "free") {
|
|
317
|
-
const screen = Dimensions.get("window");
|
|
318
|
-
const w = state.imageWidth ?? 200;
|
|
319
|
-
const h = state.imageHeight ?? 200;
|
|
320
|
-
state = {
|
|
321
|
-
...state,
|
|
322
|
-
opacity: 0.5,
|
|
323
|
-
freeX: (screen.width - w) / 2,
|
|
324
|
-
freeY: (screen.height - h) / 2,
|
|
325
|
-
freeWidth: w,
|
|
326
|
-
freeHeight: h
|
|
327
|
-
};
|
|
328
|
-
} else {
|
|
329
|
-
let autoScale = 1.0;
|
|
330
|
-
if (state.imageWidth && state.targetRect && state.imageWidth > 0) {
|
|
331
|
-
autoScale = state.targetRect.width / state.imageWidth;
|
|
332
|
-
}
|
|
333
|
-
state = {
|
|
334
|
-
...state,
|
|
335
|
-
opacity: 0.5,
|
|
336
|
-
scale: autoScale,
|
|
337
|
-
offsetX: 0,
|
|
338
|
-
offsetY: 0
|
|
339
|
-
};
|
|
340
|
-
}
|
|
341
|
-
notify();
|
|
342
|
-
},
|
|
343
|
-
async remeasure() {
|
|
344
|
-
if (!targetLabel) return;
|
|
345
|
-
const {
|
|
346
|
-
rect,
|
|
347
|
-
freshInstance
|
|
348
|
-
} = await measureWithFallback(targetInstance, targetLabel);
|
|
349
|
-
targetInstance = freshInstance;
|
|
350
|
-
if (rect) {
|
|
351
|
-
state = {
|
|
352
|
-
...state,
|
|
353
|
-
targetRect: rect
|
|
354
|
-
};
|
|
355
|
-
notify();
|
|
356
|
-
}
|
|
357
|
-
},
|
|
358
|
-
// ─── Free Placement Mode ───────────────────────────────────────────
|
|
359
|
-
|
|
360
|
-
async startFreeMode(uri) {
|
|
361
|
-
const size = await getImageSize(uri);
|
|
362
|
-
const screen = Dimensions.get("window");
|
|
363
|
-
const w = size?.width ?? 200;
|
|
364
|
-
const h = size?.height ?? 200;
|
|
365
|
-
|
|
366
|
-
// Scale down if image is larger than 80% of screen
|
|
367
|
-
let displayW = w;
|
|
368
|
-
let displayH = h;
|
|
369
|
-
const maxW = screen.width * 0.8;
|
|
370
|
-
const maxH = screen.height * 0.6;
|
|
371
|
-
if (displayW > maxW || displayH > maxH) {
|
|
372
|
-
const ratio = Math.min(maxW / displayW, maxH / displayH);
|
|
373
|
-
displayW = Math.round(displayW * ratio);
|
|
374
|
-
displayH = Math.round(displayH * ratio);
|
|
375
|
-
}
|
|
376
|
-
state = {
|
|
377
|
-
...state,
|
|
378
|
-
mode: "free",
|
|
379
|
-
enabled: true,
|
|
380
|
-
imageUri: uri,
|
|
381
|
-
imageWidth: size?.width ?? null,
|
|
382
|
-
imageHeight: size?.height ?? null,
|
|
383
|
-
opacity: 0.5,
|
|
384
|
-
freeX: Math.round((screen.width - displayW) / 2),
|
|
385
|
-
freeY: Math.round((screen.height - displayH) / 2),
|
|
386
|
-
freeWidth: Math.round(displayW),
|
|
387
|
-
freeHeight: Math.round(displayH)
|
|
388
|
-
};
|
|
389
|
-
notify();
|
|
390
|
-
},
|
|
391
|
-
setFreePosition(x, y) {
|
|
392
|
-
state = {
|
|
393
|
-
...state,
|
|
394
|
-
freeX: x,
|
|
395
|
-
freeY: y
|
|
396
|
-
};
|
|
397
|
-
notify();
|
|
398
|
-
},
|
|
399
|
-
setFreeDimensions(width, height, x, y) {
|
|
400
|
-
state = {
|
|
401
|
-
...state,
|
|
402
|
-
freeWidth: width,
|
|
403
|
-
freeHeight: height,
|
|
404
|
-
freeX: x,
|
|
405
|
-
freeY: y
|
|
406
|
-
};
|
|
407
|
-
notify();
|
|
408
|
-
},
|
|
409
|
-
// ─── Shared ─────────────────────────────────────────────────────────
|
|
410
|
-
|
|
411
|
-
reset() {
|
|
412
|
-
stopTraceTracking();
|
|
413
|
-
autoTrackEnabled = false;
|
|
414
|
-
trackingNativeTag = null;
|
|
415
|
-
targetInstance = null;
|
|
416
|
-
targetLabel = null;
|
|
417
|
-
state = {
|
|
418
|
-
...DEFAULT_STATE
|
|
419
|
-
};
|
|
420
|
-
notify();
|
|
421
|
-
}
|
|
422
|
-
};
|
|
1
|
+
"use strict";import{Image as k,Dimensions as b}from"react-native";import{measureInstance as m}from"./componentMeasurement";import{scanForImageTargets as R}from"./fiberScanner";import{getDevToolsHook as F}from"./devtoolsHook";const v={mode:null,enabled:false,imageUri:null,imageWidth:null,imageHeight:null,targetTag:null,targetLabel:null,targetRect:null,showOutline:true,opacity:.5,scale:1,offsetX:0,offsetY:0,invertX:false,invertY:false,locked:false,freeX:0,freeY:0,freeWidth:200,freeHeight:200};let t={...v};const d=new Set;let o=null;let h=null;let g=false;let u=null;let X=null;function i(){for(const e of d){e(t)}}function Y(e){if(!e)return null;if(typeof e._nativeTag==="number")return e._nativeTag;if(typeof e.canonical?._nativeTag==="number")return e.canonical._nativeTag;if(typeof e.__nativeTag==="number")return e.__nativeTag;return null}async function M(e,a){let n=await m(e);if(n)return{rect:n,freshInstance:e};const s=R();const f=s.find(r=>r.label===a);if(f){n=await m(f.instance);if(n)return{rect:n,freshInstance:f.instance}}return{rect:null,freshInstance:e}}function A(){if(u)return;const e=F();if(!e)return;if(e.rendererInterfaces){for(const[,a]of e.rendererInterfaces){if(typeof a.setTraceUpdatesEnabled==="function"){a.setTraceUpdatesEnabled(true)}}}if(typeof e.sub==="function"){u=e.sub("traceUpdates",U)}}let c=null;let w=false;function S(){if(c!==null||typeof requestAnimationFrame!=="function")return;const e=()=>{c=requestAnimationFrame(e);if(w||!g||!o)return;w=true;I().finally(()=>{w=false})};c=requestAnimationFrame(e)}function _(){if(c!==null&&typeof cancelAnimationFrame==="function")cancelAnimationFrame(c);c=null}function W(){_();if(u){u();u=null}}function U(e){if(!g||!o)return;void I()}function I(){return m(o).then(e=>{if(e&&t.targetRect){const a=t.targetRect;if(Math.abs(e.x-a.x)>.5||Math.abs(e.y-a.y)>.5||Math.abs(e.width-a.width)>.5||Math.abs(e.height-a.height)>.5){t={...t,targetRect:e};i()}}}).catch(()=>{})}function H(e){return new Promise(a=>{k.getSize(e,(n,s)=>a({width:n,height:s}),()=>a(null))})}export const ImageOverlayController={subscribe(e){d.add(e);e(t);return()=>d.delete(e)},getState(){return t},async setTarget(e,a,n){o=e;h=a;const s=n?.stateNode??e;const{rect:f,freshInstance:r}=await M(s,a);o=r;const l=Y(o);t={...t,mode:"component",targetTag:l,targetLabel:a,targetRect:f};i()},async setImageUri(e){const a=await H(e);let n=1;if(a&&t.targetRect&&a.width>0){n=t.targetRect.width/a.width}t={...t,imageUri:e,imageWidth:a?.width??null,imageHeight:a?.height??null,scale:n,showOutline:false};i()},setOpacity(e){t={...t,opacity:Math.max(0,Math.min(1,e))};i()},setScale(e){t={...t,scale:Math.max(.01,Math.min(5,e))};i()},setOffset(e,a){t={...t,offsetX:e,offsetY:a};i()},toggleInvertX(){t={...t,invertX:!t.invertX};i()},toggleInvertY(){t={...t,invertY:!t.invertY};i()},setLocked(e){t={...t,locked:e};i()},setAutoTrack(e){g=e;if(e){A();S()}else{W()}},isAutoTracking(){return g},setShowOutline(e){t={...t,showOutline:e};i()},setEnabled(e){t={...t,enabled:e};i()},toggle(){t={...t,enabled:!t.enabled};i()},fitWidth(){if(t.imageWidth&&t.targetRect&&t.imageWidth>0){t={...t,scale:t.targetRect.width/t.imageWidth};i()}},fitHeight(){if(t.imageHeight&&t.targetRect&&t.imageHeight>0){t={...t,scale:t.targetRect.height/t.imageHeight};i()}},resetSettings(){if(t.mode==="free"){const e=b.get("window");const a=t.imageWidth??200;const n=t.imageHeight??200;t={...t,opacity:.5,freeX:(e.width-a)/2,freeY:(e.height-n)/2,freeWidth:a,freeHeight:n}}else{let e=1;if(t.imageWidth&&t.targetRect&&t.imageWidth>0){e=t.targetRect.width/t.imageWidth}t={...t,opacity:.5,scale:e,offsetX:0,offsetY:0}}i()},async remeasure(){if(!h)return;const{rect:e,freshInstance:a}=await M(o,h);o=a;if(e){t={...t,targetRect:e};i()}},async startFreeMode(e){const a=await H(e);const n=b.get("window");const s=a?.width??200;const f=a?.height??200;let r=s;let l=f;const T=n.width*.8;const p=n.height*.6;if(r>T||l>p){const y=Math.min(T/r,p/l);r=Math.round(r*y);l=Math.round(l*y)}t={...t,mode:"free",enabled:true,imageUri:e,imageWidth:a?.width??null,imageHeight:a?.height??null,opacity:.5,freeX:Math.round((n.width-r)/2),freeY:Math.round((n.height-l)/2),freeWidth:Math.round(r),freeHeight:Math.round(l)};i()},setFreePosition(e,a){t={...t,freeX:e,freeY:a};i()},setFreeDimensions(e,a,n,s){t={...t,freeWidth:e,freeHeight:a,freeX:n,freeY:s};i()},reset(){W();g=false;X=null;o=null;h=null;t={...v};i()}};
|
|
@@ -1,102 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Component measurement utilities for image overlay positioning.
|
|
5
|
-
* Adapted from debug-borders/utils/componentMeasurement.js
|
|
6
|
-
*
|
|
7
|
-
* Supports both Fabric (new arch) and Paper (legacy) measurement APIs.
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import { findNodeHandle, UIManager } from "react-native";
|
|
11
|
-
/**
|
|
12
|
-
* Measures a component instance and returns its screen-space bounding rect.
|
|
13
|
-
* Tries multiple strategies to handle Fabric, Paper, and edge cases.
|
|
14
|
-
*/
|
|
15
|
-
export function measureInstance(instance) {
|
|
16
|
-
return new Promise(resolve => {
|
|
17
|
-
try {
|
|
18
|
-
// Build a list of candidates to try measuring
|
|
19
|
-
const candidates = [];
|
|
20
|
-
|
|
21
|
-
// Direct instance (ReactFabricHostComponent has measure/getBoundingClientRect)
|
|
22
|
-
if (instance) candidates.push(instance);
|
|
23
|
-
|
|
24
|
-
// Fabric: instance.canonical.publicInstance
|
|
25
|
-
if (instance?.canonical?.publicInstance) {
|
|
26
|
-
candidates.push(instance.canonical.publicInstance);
|
|
27
|
-
}
|
|
28
|
-
// Fabric fallback: instance.canonical itself
|
|
29
|
-
if (instance?.canonical && instance.canonical !== instance) {
|
|
30
|
-
candidates.push(instance.canonical);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// Try getBoundingClientRect first (modern Fabric, synchronous)
|
|
34
|
-
for (const publicInstance of candidates) {
|
|
35
|
-
if (typeof publicInstance.getBoundingClientRect === "function") {
|
|
36
|
-
try {
|
|
37
|
-
const rect = publicInstance.getBoundingClientRect();
|
|
38
|
-
if (rect && typeof rect.x === "number" && typeof rect.y === "number" && typeof rect.width === "number" && typeof rect.height === "number" && rect.width > 0 && rect.height > 0) {
|
|
39
|
-
resolve({
|
|
40
|
-
x: rect.x,
|
|
41
|
-
y: rect.y,
|
|
42
|
-
width: rect.width,
|
|
43
|
-
height: rect.height
|
|
44
|
-
});
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
} catch {
|
|
48
|
-
// Try next candidate
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
// Try measure() callback on all candidates
|
|
54
|
-
for (const publicInstance of candidates) {
|
|
55
|
-
if (typeof publicInstance.measure === "function") {
|
|
56
|
-
const timeout = setTimeout(() => resolve(null), 200);
|
|
57
|
-
publicInstance.measure((_x, _y, width, height, pageX, pageY) => {
|
|
58
|
-
clearTimeout(timeout);
|
|
59
|
-
if (pageX != null && pageY != null && width != null && height != null && width > 0 && height > 0) {
|
|
60
|
-
resolve({
|
|
61
|
-
x: pageX,
|
|
62
|
-
y: pageY,
|
|
63
|
-
width,
|
|
64
|
-
height
|
|
65
|
-
});
|
|
66
|
-
} else {
|
|
67
|
-
resolve(null);
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
return;
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
// Last resort: try findNodeHandle + UIManager.measure
|
|
75
|
-
try {
|
|
76
|
-
const nodeHandle = findNodeHandle(instance);
|
|
77
|
-
if (nodeHandle != null) {
|
|
78
|
-
const timeout = setTimeout(() => resolve(null), 200);
|
|
79
|
-
UIManager.measure(nodeHandle, (_x, _y, width, height, pageX, pageY) => {
|
|
80
|
-
clearTimeout(timeout);
|
|
81
|
-
if (pageX != null && pageY != null && width != null && height != null && width > 0 && height > 0) {
|
|
82
|
-
resolve({
|
|
83
|
-
x: pageX,
|
|
84
|
-
y: pageY,
|
|
85
|
-
width,
|
|
86
|
-
height
|
|
87
|
-
});
|
|
88
|
-
} else {
|
|
89
|
-
resolve(null);
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
return;
|
|
93
|
-
}
|
|
94
|
-
} catch {
|
|
95
|
-
// findNodeHandle not available or failed
|
|
96
|
-
}
|
|
97
|
-
resolve(null);
|
|
98
|
-
} catch {
|
|
99
|
-
resolve(null);
|
|
100
|
-
}
|
|
101
|
-
});
|
|
102
|
-
}
|
|
1
|
+
"use strict";import{findNodeHandle as m,UIManager as y}from"react-native";export function measureInstance(u){return new Promise(t=>{try{const e=[];if(u)e.push(u);if(u?.canonical?.publicInstance){e.push(u.canonical.publicInstance)}if(u?.canonical&&u.canonical!==u){e.push(u.canonical)}for(const l of e){if(typeof l.getBoundingClientRect==="function"){try{const n=l.getBoundingClientRect();if(n&&typeof n.x==="number"&&typeof n.y==="number"&&typeof n.width==="number"&&typeof n.height==="number"&&n.width>0&&n.height>0){t({x:n.x,y:n.y,width:n.width,height:n.height});return}}catch{}}}for(const l of e){if(typeof l.measure==="function"){const n=setTimeout(()=>t(null),200);l.measure((r,a,c,o,i,f)=>{clearTimeout(n);if(i!=null&&f!=null&&c!=null&&o!=null&&c>0&&o>0){t({x:i,y:f,width:c,height:o})}else{t(null)}});return}}try{const l=m(u);if(l!=null){const n=setTimeout(()=>t(null),200);y.measure(l,(r,a,c,o,i,f)=>{clearTimeout(n);if(i!=null&&f!=null&&c!=null&&o!=null&&c>0&&o>0){t({x:i,y:f,width:c,height:o})}else{t(null)}});return}}catch{}t(null)}catch{t(null)}})}
|
|
@@ -1,31 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Single accessor for the React DevTools global hook.
|
|
5
|
-
*
|
|
6
|
-
* Both the fiber scanner (target discovery) and the controller (auto-track via
|
|
7
|
-
* traceUpdates) reach for `__REACT_DEVTOOLS_GLOBAL_HOOK__`. Routing both through
|
|
8
|
-
* here gives embedded hosts — the docs-site live demo, and any future desktop
|
|
9
|
-
* port — one place to substitute their own hook, so the tool never instruments
|
|
10
|
-
* the host page's React renderer just because someone flipped Auto Track.
|
|
11
|
-
*
|
|
12
|
-
* On device nothing calls setDevToolsHookOverride, so this stays a plain
|
|
13
|
-
* passthrough to the global.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
let hookOverride = null;
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Substitute the hook the tool reads. Pass null to fall back to the global.
|
|
20
|
-
* The override only needs the parts the tool actually uses:
|
|
21
|
-
* `getFiberRoots(rendererId)`, and optionally `sub("traceUpdates", fn)` plus
|
|
22
|
-
* `rendererInterfaces` for auto-track.
|
|
23
|
-
*/
|
|
24
|
-
export function setDevToolsHookOverride(hook) {
|
|
25
|
-
hookOverride = hook ?? null;
|
|
26
|
-
}
|
|
27
|
-
export function getDevToolsHook() {
|
|
28
|
-
if (hookOverride) return hookOverride;
|
|
29
|
-
if (typeof global === "undefined") return null;
|
|
30
|
-
return global.__REACT_DEVTOOLS_GLOBAL_HOOK__ ?? null;
|
|
31
|
-
}
|
|
1
|
+
"use strict";let e=null;export function setDevToolsHookOverride(o){e=o??null}export function getDevToolsHook(){if(e)return e;if(typeof global==="undefined")return null;return global.__REACT_DEVTOOLS_GLOBAL_HOOK__??null}
|
|
@@ -1,100 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Fiber tree scanner for discovering image-overlay targets.
|
|
5
|
-
* Finds components tagged with testID="image-target:LabelName".
|
|
6
|
-
*
|
|
7
|
-
* Core traversal adapted from debug-borders/utils/fiberTreeTraversal.js
|
|
8
|
-
*/
|
|
9
|
-
|
|
10
|
-
import { getDevToolsHook } from "./devtoolsHook";
|
|
11
|
-
const IMAGE_TARGET_PREFIX = "image-target:";
|
|
12
|
-
|
|
13
|
-
// Fiber tag constants (from React internals)
|
|
14
|
-
const HostComponent = 5;
|
|
15
|
-
const OffscreenComponent = 22;
|
|
16
|
-
function getFiberRoots() {
|
|
17
|
-
const hook = getDevToolsHook();
|
|
18
|
-
if (!hook?.getFiberRoots) return [];
|
|
19
|
-
const roots = new Set();
|
|
20
|
-
const ids = hook.renderers?.keys ? Array.from(hook.renderers.keys()) : [1];
|
|
21
|
-
for (const id of ids) {
|
|
22
|
-
try {
|
|
23
|
-
hook.getFiberRoots(id)?.forEach(root => roots.add(root));
|
|
24
|
-
} catch {/* Other renderers can still provide roots. */}
|
|
25
|
-
}
|
|
26
|
-
return [...roots];
|
|
27
|
-
}
|
|
28
|
-
function isHiddenOffscreen(fiber) {
|
|
29
|
-
return fiber.tag === OffscreenComponent && fiber.memoizedState !== null;
|
|
30
|
-
}
|
|
31
|
-
function isInactiveScreen(fiber) {
|
|
32
|
-
return fiber.memoizedProps?.activityState === 0;
|
|
33
|
-
}
|
|
34
|
-
function traverseFiberTree(fiber, callback, depth = 0, visited = new Set()) {
|
|
35
|
-
if (!fiber || visited.has(fiber) || depth > 500) return;
|
|
36
|
-
visited.add(fiber);
|
|
37
|
-
if (isHiddenOffscreen(fiber)) {
|
|
38
|
-
if (fiber.sibling) traverseFiberTree(fiber.sibling, callback, depth, visited);
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
if (isInactiveScreen(fiber)) {
|
|
42
|
-
if (fiber.sibling) traverseFiberTree(fiber.sibling, callback, depth, visited);
|
|
43
|
-
return;
|
|
44
|
-
}
|
|
45
|
-
callback(fiber, depth);
|
|
46
|
-
if (fiber.child) traverseFiberTree(fiber.child, callback, depth + 1, visited);
|
|
47
|
-
if (fiber.sibling) traverseFiberTree(fiber.sibling, callback, depth, visited);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Walk the fiber tree upward to find the owning user-defined React component name.
|
|
52
|
-
*/
|
|
53
|
-
function getOwningComponentName(fiber) {
|
|
54
|
-
const internalNames = new Set(["View", "RCTView", "Text", "RCTText", "Image", "RCTImageView", "ScrollView", "RCTScrollView", "TextInput", "RCTTextInput", "TouchableOpacity", "TouchableHighlight", "TouchableWithoutFeedback", "Pressable", "FlatList", "SectionList", "SafeAreaView"]);
|
|
55
|
-
let current = fiber._debugOwner || fiber.return;
|
|
56
|
-
let depth = 0;
|
|
57
|
-
while (current && depth < 30) {
|
|
58
|
-
depth++;
|
|
59
|
-
const type = current.type;
|
|
60
|
-
if (type) {
|
|
61
|
-
const name = typeof type === "string" ? type : type.displayName || type.name;
|
|
62
|
-
if (name && !internalNames.has(name)) {
|
|
63
|
-
return name;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
current = current.return;
|
|
67
|
-
}
|
|
68
|
-
return null;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
/**
|
|
72
|
-
* Scan the React fiber tree for components with testID="image-target:*".
|
|
73
|
-
* Returns an array of discovered targets with their fiber references for measurement.
|
|
74
|
-
*/
|
|
75
|
-
export function scanForImageTargets() {
|
|
76
|
-
const roots = getFiberRoots();
|
|
77
|
-
if (roots.length === 0) return [];
|
|
78
|
-
const targets = [];
|
|
79
|
-
for (const root of roots) {
|
|
80
|
-
traverseFiberTree(root.current, fiber => {
|
|
81
|
-
if (fiber.tag !== HostComponent) return;
|
|
82
|
-
|
|
83
|
-
// react-native-web rewrites testID to data-testid before it reaches the
|
|
84
|
-
// host fiber, so read both — otherwise the scanner finds nothing in any
|
|
85
|
-
// RNW-rendered tree (example-web, the docs-site live demo).
|
|
86
|
-
const testID = fiber.memoizedProps?.testID ?? fiber.pendingProps?.testID ?? fiber.memoizedProps?.["data-testid"] ?? fiber.pendingProps?.["data-testid"];
|
|
87
|
-
if (!testID || !testID.startsWith(IMAGE_TARGET_PREFIX)) return;
|
|
88
|
-
const label = testID.slice(IMAGE_TARGET_PREFIX.length);
|
|
89
|
-
if (!label) return;
|
|
90
|
-
targets.push({
|
|
91
|
-
label,
|
|
92
|
-
testID,
|
|
93
|
-
fiber,
|
|
94
|
-
instance: fiber.stateNode,
|
|
95
|
-
componentName: getOwningComponentName(fiber)
|
|
96
|
-
});
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
return targets;
|
|
100
|
-
}
|
|
1
|
+
"use strict";import{getDevToolsHook as c}from"./devtoolsHook";const a="image-target:";const u=5;const g=22;function l(){const t=c();if(!t?.getFiberRoots)return[];const o=new Set;const n=t.renderers?.keys?Array.from(t.renderers.keys()):[1];for(const e of n){try{t.getFiberRoots(e)?.forEach(s=>o.add(s))}catch{}}return[...o]}function m(t){return t.tag===g&&t.memoizedState!==null}function d(t){return t.memoizedProps?.activityState===0}function i(t,o,n=0,e=new Set){if(!t||e.has(t)||n>500)return;e.add(t);if(m(t)){if(t.sibling)i(t.sibling,o,n,e);return}if(d(t)){if(t.sibling)i(t.sibling,o,n,e);return}o(t,n);if(t.child)i(t.child,o,n+1,e);if(t.sibling)i(t.sibling,o,n,e)}function p(t){const o=new Set(["View","RCTView","Text","RCTText","Image","RCTImageView","ScrollView","RCTScrollView","TextInput","RCTTextInput","TouchableOpacity","TouchableHighlight","TouchableWithoutFeedback","Pressable","FlatList","SectionList","SafeAreaView"]);let n=t._debugOwner||t.return;let e=0;while(n&&e<30){e++;const s=n.type;if(s){const r=typeof s==="string"?s:s.displayName||s.name;if(r&&!o.has(r)){return r}}n=n.return}return null}export function scanForImageTargets(){const t=l();if(t.length===0)return[];const o=[];for(const n of t){i(n.current,e=>{if(e.tag!==u)return;const s=e.memoizedProps?.testID??e.pendingProps?.testID??e.memoizedProps?.["data-testid"]??e.pendingProps?.["data-testid"];if(!s||!s.startsWith(a))return;const r=s.slice(a.length);if(!r)return;o.push({label:r,testID:s,fiber:e,instance:e.stateNode,componentName:p(e)})})}return o}
|
|
@@ -1,17 +1 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
export function loadImageClipboard() {
|
|
4
|
-
try {
|
|
5
|
-
return require('expo-clipboard');
|
|
6
|
-
} catch {
|
|
7
|
-
return null;
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
export function loadTextClipboard() {
|
|
11
|
-
try {
|
|
12
|
-
const mod = require('@react-native-clipboard/clipboard');
|
|
13
|
-
return mod.default ?? mod;
|
|
14
|
-
} catch {
|
|
15
|
-
return null;
|
|
16
|
-
}
|
|
17
|
-
}
|
|
1
|
+
"use strict";export function loadImageClipboard(){try{return require("expo-clipboard")}catch{return null}}export function loadTextClipboard(){try{const r=require("@react-native-clipboard/clipboard");return r.default??r}catch{return null}}
|