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