@supernovaio/prototyping-tooling 0.9.6 → 0.9.7-alpha.1
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/dist/client/annotation/AnnotationOverlay.d.ts +2 -4
- package/dist/client/annotation/AnnotationOverlay.d.ts.map +1 -1
- package/dist/client/general/ForgeClient.d.ts +2 -0
- package/dist/client/general/ForgeClient.d.ts.map +1 -1
- package/dist/client/select-mode/SelectModeController.d.ts +10 -4
- package/dist/client/select-mode/SelectModeController.d.ts.map +1 -1
- package/dist/client.js +181 -141
- package/dist/{constants-BXKWBfHg.js → constants-DHvpLY46.js} +10 -10
- package/dist/host.js +1 -1
- package/dist/index.js +1 -1
- package/dist/shared/constants.d.ts +1 -0
- package/dist/shared/constants.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ParentMessenger } from "../../shared/messaging.js";
|
|
2
2
|
import type { AnnotationElementInfo, RestoreAnnotationData } from "../../shared/events.js";
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Annotation interaction layer for creating and managing annotations.
|
|
5
5
|
* Supports single-click (one element) and shift+drag (multi-element) selection.
|
|
6
6
|
*/
|
|
7
7
|
export declare class AnnotationOverlay {
|
|
@@ -9,7 +9,6 @@ export declare class AnnotationOverlay {
|
|
|
9
9
|
private messenger;
|
|
10
10
|
private hoverOverlay;
|
|
11
11
|
private componentTooltip;
|
|
12
|
-
private hitTestOverlay;
|
|
13
12
|
private dragRect;
|
|
14
13
|
private dragHighlights;
|
|
15
14
|
private annotationHighlights;
|
|
@@ -55,8 +54,6 @@ export declare class AnnotationOverlay {
|
|
|
55
54
|
setMarkersVisible(visible: boolean): void;
|
|
56
55
|
/** Repositions all badge dots and visible highlights to follow their anchored elements. */
|
|
57
56
|
private repositionAll;
|
|
58
|
-
private createHitTestOverlay;
|
|
59
|
-
private removeHitTestOverlay;
|
|
60
57
|
private showHoverOverlay;
|
|
61
58
|
private removeHoverOverlay;
|
|
62
59
|
private repositionHoverOverlay;
|
|
@@ -91,6 +88,7 @@ export declare class AnnotationOverlay {
|
|
|
91
88
|
private handleMouseDown;
|
|
92
89
|
private handleMouseUp;
|
|
93
90
|
private handleClick;
|
|
91
|
+
private isAnnotationDotEventTarget;
|
|
94
92
|
private handleKeyDown;
|
|
95
93
|
private handleKeyUp;
|
|
96
94
|
private pendingAnnotations;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AnnotationOverlay.d.ts","sourceRoot":"","sources":["../../../src/client/annotation/AnnotationOverlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAEhE,OAAO,KAAK,EAAkB,qBAAqB,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AA6B1G;;;GAGG;AACH,qBAAa,iBAAiB;IAC5B,OAAO,CAAC,MAAM,CAAQ;IACtB,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,YAAY,CAA8B;IAClD,OAAO,CAAC,gBAAgB,CAA8B;IACtD,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"AnnotationOverlay.d.ts","sourceRoot":"","sources":["../../../src/client/annotation/AnnotationOverlay.ts"],"names":[],"mappings":"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"}
|
|
@@ -10,6 +10,8 @@ import type { ForgeClientOptions } from "./types.js";
|
|
|
10
10
|
export declare class ForgeClient {
|
|
11
11
|
private static instance;
|
|
12
12
|
private messenger;
|
|
13
|
+
private readyIntervalId;
|
|
14
|
+
private isConnectedToHost;
|
|
13
15
|
private selectMode;
|
|
14
16
|
private designMode;
|
|
15
17
|
private hoverDisabled;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ForgeClient.d.ts","sourceRoot":"","sources":["../../../src/client/general/ForgeClient.ts"],"names":[],"mappings":"AACA,OAAO,EAA+C,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAOhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEpD;;;;;;GAMG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAClD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,iBAAiB,CAAiC;IAC1D,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,OAAO,CAAC,CAAwB;IAExC,OAAO;IA4BP,4EAA4E;IAC5E,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,WAAW;IAO7D,6FAA6F;IAC7F,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5C,2FAA2F;IAC3F,kBAAkB,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAS9D,OAAO,CAAC,oBAAoB;
|
|
1
|
+
{"version":3,"file":"ForgeClient.d.ts","sourceRoot":"","sources":["../../../src/client/general/ForgeClient.ts"],"names":[],"mappings":"AACA,OAAO,EAA+C,KAAK,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAOhH,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAEpD;;;;;;GAMG;AACH,qBAAa,WAAW;IACtB,OAAO,CAAC,MAAM,CAAC,QAAQ,CAA2B;IAClD,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,iBAAiB,CAAQ;IACjC,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,aAAa,CAAQ;IAC7B,OAAO,CAAC,iBAAiB,CAAmB;IAC5C,OAAO,CAAC,iBAAiB,CAAiC;IAC1D,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,gBAAgB,CAAsB;IAC9C,OAAO,CAAC,OAAO,CAAC,CAAwB;IAExC,OAAO;IA4BP,4EAA4E;IAC5E,MAAM,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,kBAAkB,GAAG,WAAW;IAO7D,6FAA6F;IAC7F,oBAAoB,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI;IAI5C,2FAA2F;IAC3F,kBAAkB,CAAC,WAAW,EAAE,qBAAqB,EAAE,GAAG,IAAI;IAS9D,OAAO,CAAC,oBAAoB;IAuF5B,OAAO,CAAC,aAAa;IAerB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,iBAAiB;IAezB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,SAAS;IAwBjB,OAAO,CAAC,uBAAuB;IAkB/B,OAAO,CAAC,mBAAmB;IAO3B,OAAO,CAAC,yBAAyB;CAkBlC"}
|
|
@@ -7,13 +7,15 @@ import type { SelectModeCallbacks } from "../general/types.js";
|
|
|
7
7
|
export declare class SelectModeController {
|
|
8
8
|
private messenger;
|
|
9
9
|
private callbacks;
|
|
10
|
-
private
|
|
11
|
-
private hoveredElement;
|
|
10
|
+
private selectModeShield;
|
|
12
11
|
constructor(messenger: ParentMessenger, callbacks: SelectModeCallbacks);
|
|
13
|
-
/**
|
|
12
|
+
/** Attaches capture-phase listeners for hover/click selection. */
|
|
14
13
|
enableListeners(): void;
|
|
15
|
-
/** Removes listeners and
|
|
14
|
+
/** Removes listeners and clears any active hover highlight. */
|
|
16
15
|
disableListeners(): void;
|
|
16
|
+
private attachSelectModeShieldIfNeeded;
|
|
17
|
+
private removeSelectModeShield;
|
|
18
|
+
private handleShieldWheel;
|
|
17
19
|
/** Clears the current hover highlight. */
|
|
18
20
|
clearHover(): void;
|
|
19
21
|
/**
|
|
@@ -26,6 +28,10 @@ export declare class SelectModeController {
|
|
|
26
28
|
private handleMouseOver;
|
|
27
29
|
private handleMouseOut;
|
|
28
30
|
private handleClick;
|
|
31
|
+
private resolveTarget;
|
|
32
|
+
private resolveElementFromPoint;
|
|
33
|
+
private findScrollableAncestor;
|
|
34
|
+
private canElementScroll;
|
|
29
35
|
private handleScroll;
|
|
30
36
|
}
|
|
31
37
|
//# sourceMappingURL=SelectModeController.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectModeController.d.ts","sourceRoot":"","sources":["../../../src/client/select-mode/SelectModeController.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAE9D;;;GAGG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,
|
|
1
|
+
{"version":3,"file":"SelectModeController.d.ts","sourceRoot":"","sources":["../../../src/client/select-mode/SelectModeController.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAA;AAChE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAE9D;;;GAGG;AACH,qBAAa,oBAAoB;IAC/B,OAAO,CAAC,SAAS,CAAiB;IAClC,OAAO,CAAC,SAAS,CAAqB;IACtC,OAAO,CAAC,gBAAgB,CAA8B;gBAE1C,SAAS,EAAE,eAAe,EAAE,SAAS,EAAE,mBAAmB;IAKtE,kEAAkE;IAClE,eAAe,IAAI,IAAI;IAQvB,+DAA+D;IAC/D,gBAAgB,IAAI,IAAI;IASxB,OAAO,CAAC,8BAA8B;IAsBtC,OAAO,CAAC,sBAAsB;IAO9B,OAAO,CAAC,iBAAiB,CAexB;IAED,0CAA0C;IAC1C,UAAU,IAAI,IAAI;IAIlB;;;OAGG;IACH,4BAA4B,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW;IAiB/D,yEAAyE;IACzE,qBAAqB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI;IAShD,OAAO,CAAC,eAAe,CAgBtB;IAED,OAAO,CAAC,cAAc,CAGrB;IAED,OAAO,CAAC,WAAW,CAiBlB;IAED,OAAO,CAAC,aAAa;IAarB,OAAO,CAAC,uBAAuB;IAU/B,OAAO,CAAC,sBAAsB;IAW9B,OAAO,CAAC,gBAAgB;IAqBxB,OAAO,CAAC,YAAY,CAInB;CACF"}
|
package/dist/client.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { b as $, c as X, R as Y, d as U, Z as
|
|
1
|
+
import { b as $, c as X, R as Y, d as U, Z as x, C as v, M as E, B as N, e as B, P as W, i as G, a as V, T as P } from "./constants-DHvpLY46.js";
|
|
2
2
|
import { d as c } from "./debug-CLzmqn3R.js";
|
|
3
|
-
class
|
|
3
|
+
class j {
|
|
4
4
|
registry = /* @__PURE__ */ new Map();
|
|
5
5
|
register(e, t) {
|
|
6
6
|
this.registry.set(e, t);
|
|
@@ -23,7 +23,7 @@ class z {
|
|
|
23
23
|
return !t && n[e] && (t = this.registry.get(n[e])), t ? Object.entries(t.props).filter(([o, i]) => i.editable).map(([o, i]) => ({ name: o, type: i.type, options: i.options, default: i.default, editable: i.editable, label: i.label })) : [];
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
function
|
|
26
|
+
function R(r) {
|
|
27
27
|
if (r.id)
|
|
28
28
|
return [`*[@id="${r.id}"]`];
|
|
29
29
|
const e = [];
|
|
@@ -38,44 +38,44 @@ function H(r) {
|
|
|
38
38
|
}
|
|
39
39
|
return e;
|
|
40
40
|
}
|
|
41
|
-
function
|
|
41
|
+
function I(r) {
|
|
42
42
|
return r.length === 1 && r[0].startsWith("*[@id=") ? `//${r[0]}` : "/" + r.join("/");
|
|
43
43
|
}
|
|
44
|
-
const u = { FunctionComponent: 0, ClassComponent: 1, IndeterminateComponent: 2, HostRoot: 3, HostPortal: 4, HostComponent: 5, HostText: 6, Fragment: 7, Mode: 8, ContextConsumer: 9, ContextProvider: 10, ForwardRef: 11, Profiler: 12, SuspenseComponent: 13, MemoComponent: 14, SimpleMemoComponent: 15, LazyComponent: 16, IncompleteClassComponent: 17, DehydratedFragment: 18, SuspenseListComponent: 19, ScopeComponent: 21, OffscreenComponent: 22, LegacyHiddenComponent: 23, CacheComponent: 24, TracingMarkerComponent: 25, HostHoistable: 26, HostSingleton: 27, IncompleteFunctionComponent: 28, Throw: 29, ViewTransitionComponent: 30, ActivityComponent: 31 },
|
|
44
|
+
const u = { FunctionComponent: 0, ClassComponent: 1, IndeterminateComponent: 2, HostRoot: 3, HostPortal: 4, HostComponent: 5, HostText: 6, Fragment: 7, Mode: 8, ContextConsumer: 9, ContextProvider: 10, ForwardRef: 11, Profiler: 12, SuspenseComponent: 13, MemoComponent: 14, SimpleMemoComponent: 15, LazyComponent: 16, IncompleteClassComponent: 17, DehydratedFragment: 18, SuspenseListComponent: 19, ScopeComponent: 21, OffscreenComponent: 22, LegacyHiddenComponent: 23, CacheComponent: 24, TracingMarkerComponent: 25, HostHoistable: 26, HostSingleton: 27, IncompleteFunctionComponent: 28, Throw: 29, ViewTransitionComponent: 30, ActivityComponent: 31 }, z = /* @__PURE__ */ new Set(["Component", "PureComponent", "Fragment", "Suspense", "Profiler", "StrictMode", "Routes", "Route", "Outlet", "Root", "ErrorBoundaryHandler", "HotReload", "Hot"]), K = [/Boundary$/, /BoundaryHandler$/, /Provider$/, /Consumer$/, /^(Inner|Outer)/, /Router$/, /^Client(Page|Segment|Root)/, /^Server(Root|Component|Render)/, /^RSC/, /Context$/, /^Hot(Reload)?$/, /^(Dev|React)(Overlay|Tools|Root)/, /Overlay$/, /Handler$/, /^With[A-Z]/, /Wrapper$/, /^Root$/];
|
|
45
45
|
let b = null;
|
|
46
|
-
function
|
|
46
|
+
function O(r) {
|
|
47
47
|
const e = (t) => t.some((n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$") || n.startsWith("__reactProps$"));
|
|
48
48
|
return e(Object.keys(r)) || e(Object.getOwnPropertyNames(r));
|
|
49
49
|
}
|
|
50
|
-
function
|
|
50
|
+
function J() {
|
|
51
51
|
if (b !== null) return b;
|
|
52
52
|
if (typeof document > "u") return !1;
|
|
53
|
-
if (document.body &&
|
|
53
|
+
if (document.body && O(document.body))
|
|
54
54
|
return c("client", "Detected React on document.body"), b = !0, !0;
|
|
55
55
|
for (const e of Y) {
|
|
56
56
|
const t = document.querySelector(e);
|
|
57
57
|
if (t) {
|
|
58
|
-
if (
|
|
58
|
+
if (O(t))
|
|
59
59
|
return c("client", "Detected React on", e), b = !0, !0;
|
|
60
60
|
for (const n of t.children)
|
|
61
|
-
if (
|
|
61
|
+
if (O(n))
|
|
62
62
|
return c("client", "Detected React on child of", e), b = !0, !0;
|
|
63
63
|
}
|
|
64
64
|
}
|
|
65
65
|
if (document.body) {
|
|
66
66
|
for (const e of document.body.children)
|
|
67
|
-
if (
|
|
67
|
+
if (O(e))
|
|
68
68
|
return c("client", "Detected React on body child:", e.tagName), b = !0, !0;
|
|
69
69
|
}
|
|
70
70
|
const r = document.querySelectorAll("*");
|
|
71
71
|
for (const e of r) {
|
|
72
|
-
if (
|
|
72
|
+
if (O(e))
|
|
73
73
|
return c("client", "Detected React on deep scan:", e.tagName), b = !0, !0;
|
|
74
74
|
if (r.length > U) break;
|
|
75
75
|
}
|
|
76
76
|
return c("client", "React NOT detected on page"), b = !1, !1;
|
|
77
77
|
}
|
|
78
|
-
function
|
|
78
|
+
function q(r) {
|
|
79
79
|
const e = Object.keys(r);
|
|
80
80
|
let t = e.find((s) => s.startsWith("__reactFiber$"));
|
|
81
81
|
if (t) return r[t] || null;
|
|
@@ -91,27 +91,27 @@ function Z(r) {
|
|
|
91
91
|
});
|
|
92
92
|
return i && r[i] || null;
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function S(r) {
|
|
95
95
|
return r ? r.displayName ? r.displayName : r.name ? r.name : null : null;
|
|
96
96
|
}
|
|
97
|
-
function
|
|
97
|
+
function Z(r) {
|
|
98
98
|
const { tag: e, type: t, elementType: n } = r;
|
|
99
99
|
if ((/* @__PURE__ */ new Set([u.HostComponent, u.HostText, u.HostHoistable, u.HostSingleton, u.Fragment, u.Mode, u.Profiler, u.DehydratedFragment, u.HostRoot, u.HostPortal, u.ScopeComponent, u.OffscreenComponent, u.LegacyHiddenComponent, u.CacheComponent, u.TracingMarkerComponent, u.Throw, u.ViewTransitionComponent, u.ActivityComponent, u.SuspenseComponent, u.SuspenseListComponent])).has(e)) return null;
|
|
100
100
|
if (e === u.ForwardRef) {
|
|
101
101
|
const i = n;
|
|
102
102
|
if (i?.render) {
|
|
103
|
-
const s =
|
|
103
|
+
const s = S(i.render);
|
|
104
104
|
if (s) return s;
|
|
105
105
|
}
|
|
106
|
-
return i?.displayName ? i.displayName :
|
|
106
|
+
return i?.displayName ? i.displayName : S(t);
|
|
107
107
|
}
|
|
108
108
|
if (e === u.MemoComponent || e === u.SimpleMemoComponent) {
|
|
109
109
|
const i = n;
|
|
110
110
|
if (i?.type) {
|
|
111
|
-
const s =
|
|
111
|
+
const s = S(i.type);
|
|
112
112
|
if (s) return s;
|
|
113
113
|
}
|
|
114
|
-
return i?.displayName ? i.displayName :
|
|
114
|
+
return i?.displayName ? i.displayName : S(t);
|
|
115
115
|
}
|
|
116
116
|
if (e === u.ContextProvider) {
|
|
117
117
|
const i = t;
|
|
@@ -123,60 +123,53 @@ function Q(r) {
|
|
|
123
123
|
}
|
|
124
124
|
if (e === u.LazyComponent) {
|
|
125
125
|
const i = n;
|
|
126
|
-
return i?._status === 1 && i._result ?
|
|
126
|
+
return i?._status === 1 && i._result ? S(i._result) : null;
|
|
127
127
|
}
|
|
128
|
-
return e === u.IncompleteClassComponent || e === u.IncompleteFunctionComponent || e === u.FunctionComponent || e === u.ClassComponent || e === u.IndeterminateComponent ?
|
|
128
|
+
return e === u.IncompleteClassComponent || e === u.IncompleteFunctionComponent || e === u.FunctionComponent || e === u.ClassComponent || e === u.IndeterminateComponent ? S(t) : null;
|
|
129
129
|
}
|
|
130
|
-
function
|
|
130
|
+
function Q(r) {
|
|
131
131
|
return r.length <= 2 || r.length <= 3 && r === r.toLowerCase();
|
|
132
132
|
}
|
|
133
|
-
function
|
|
134
|
-
return !(
|
|
133
|
+
function ee(r) {
|
|
134
|
+
return !(z.has(r) || K.some((e) => e.test(r)));
|
|
135
135
|
}
|
|
136
|
-
function
|
|
137
|
-
if (!
|
|
136
|
+
function te(r, e = $, t = X) {
|
|
137
|
+
if (!J())
|
|
138
138
|
return c("client", "isReactPage() = false"), { path: null, components: [] };
|
|
139
139
|
const n = [];
|
|
140
140
|
try {
|
|
141
|
-
let i =
|
|
141
|
+
let i = q(r), s = 0;
|
|
142
142
|
for (; i && s < t && n.length < e; ) {
|
|
143
|
-
const a =
|
|
144
|
-
a && !
|
|
143
|
+
const a = Z(i);
|
|
144
|
+
a && !Q(a) && ee(a) && n.push(a), i = i.return, s++;
|
|
145
145
|
}
|
|
146
146
|
} catch (i) {
|
|
147
147
|
return c("client", "Error walking fiber tree:", i), { path: null, components: [] };
|
|
148
148
|
}
|
|
149
149
|
return n.length === 0 ? { path: null, components: [] } : { path: n.slice().reverse().map((i) => `<${i}>`).join(" "), components: n };
|
|
150
150
|
}
|
|
151
|
-
let
|
|
152
|
-
function
|
|
151
|
+
let C = null;
|
|
152
|
+
function D(r, e, t, n = "solid") {
|
|
153
153
|
const o = document.createElement("div");
|
|
154
|
-
return Object.assign(o.style, { position: "fixed", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex:
|
|
154
|
+
return Object.assign(o.style, { position: "fixed", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex: x.HOVER_OVERLAY, borderRadius: "2px" }), o;
|
|
155
155
|
}
|
|
156
|
-
function
|
|
157
|
-
|
|
156
|
+
function ne(r) {
|
|
157
|
+
M();
|
|
158
158
|
const e = r.getBoundingClientRect();
|
|
159
|
-
|
|
159
|
+
C = D(e, v.SELECT_OVERLAY_BORDER, v.SELECT_OVERLAY_BG), C.className = "forge-overlay", document.body.appendChild(C);
|
|
160
160
|
}
|
|
161
|
-
function
|
|
162
|
-
|
|
161
|
+
function M() {
|
|
162
|
+
C && (C.remove(), C = null);
|
|
163
163
|
}
|
|
164
|
+
let oe = 0;
|
|
164
165
|
function ie() {
|
|
165
|
-
return
|
|
166
|
-
}
|
|
167
|
-
function se() {
|
|
168
|
-
E && (E.remove(), E = null);
|
|
166
|
+
return `ann-${Date.now()}-${++oe}`;
|
|
169
167
|
}
|
|
170
|
-
|
|
171
|
-
function ae() {
|
|
172
|
-
return `ann-${Date.now()}-${++re}`;
|
|
173
|
-
}
|
|
174
|
-
class D {
|
|
168
|
+
class T {
|
|
175
169
|
active = !1;
|
|
176
170
|
messenger;
|
|
177
171
|
hoverOverlay = null;
|
|
178
172
|
componentTooltip = null;
|
|
179
|
-
hitTestOverlay = null;
|
|
180
173
|
dragRect = null;
|
|
181
174
|
dragHighlights = [];
|
|
182
175
|
annotationHighlights = [];
|
|
@@ -195,10 +188,10 @@ class D {
|
|
|
195
188
|
this.messenger = e, window.__forgeAnnotations = this, window.addEventListener("scroll", this.repositionAll, { capture: !0, passive: !0 }), window.addEventListener("resize", this.repositionAll, { passive: !0 });
|
|
196
189
|
}
|
|
197
190
|
activate() {
|
|
198
|
-
this.active || (this.active = !0, c("annotation", "Annotation mode activated"), this.
|
|
191
|
+
this.active || (this.active = !0, c("annotation", "Annotation mode activated"), this.addListeners(), this.setMarkersVisible(!0), document.body.style.cursor = "crosshair");
|
|
199
192
|
}
|
|
200
193
|
deactivate() {
|
|
201
|
-
this.active && (this.active = !1, c("annotation", "Annotation mode deactivated"), this.removeHoverOverlay(), this.clearAnnotationHighlights(), this.
|
|
194
|
+
this.active && (this.active = !1, c("annotation", "Annotation mode deactivated"), this.removeHoverOverlay(), this.clearAnnotationHighlights(), this.removeDragRect(), this.removeListeners(), this.setMarkersVisible(!1), document.body.style.cursor = "");
|
|
202
195
|
}
|
|
203
196
|
selectDot(e) {
|
|
204
197
|
const t = this.dots.get(e);
|
|
@@ -215,7 +208,7 @@ class D {
|
|
|
215
208
|
if (this.accumulationId !== e) {
|
|
216
209
|
this.accumulationId = e, this.accumulationElements = [], this.clearAnnotationHighlights();
|
|
217
210
|
for (const n of t) {
|
|
218
|
-
const o = { xpath:
|
|
211
|
+
const o = { xpath: I(n.xpath), forgeId: n.forgeId, forgeIdIndex: n.forgeIdIndex }, i = this.resolveLocator(o);
|
|
219
212
|
i && this.accumulationElements.push(i);
|
|
220
213
|
}
|
|
221
214
|
this.refreshAccumulationHighlights(), this.hoverSuppressed = !1, c("annotation", `Entered accumulation mode for ${e} with ${this.accumulationElements.length} elements`);
|
|
@@ -243,10 +236,10 @@ class D {
|
|
|
243
236
|
const o = document.querySelectorAll(`[data-forge-id="${t}"]`);
|
|
244
237
|
o.length > 1 && (n = Array.from(o).indexOf(e));
|
|
245
238
|
}
|
|
246
|
-
return { xpath:
|
|
239
|
+
return { xpath: I(R(e)), forgeId: t, forgeIdIndex: n };
|
|
247
240
|
}
|
|
248
241
|
elementToInfo(e) {
|
|
249
|
-
return { elementTag: e.tagName.toLowerCase(), xpath:
|
|
242
|
+
return { elementTag: e.tagName.toLowerCase(), xpath: R(e), componentName: e.getAttribute("data-component") || void 0, componentPath: this.getComponentPath(e) || void 0, forgeId: e.getAttribute("data-forge-id") || void 0, forgeIdIndex: this.resolveForgeIdIndex(e), sourcePos: e.getAttribute("data-source-pos") || void 0 };
|
|
250
243
|
}
|
|
251
244
|
resolveForgeIdIndex(e) {
|
|
252
245
|
const t = e.getAttribute("data-forge-id");
|
|
@@ -258,11 +251,11 @@ class D {
|
|
|
258
251
|
if (!this.accumulationId) return;
|
|
259
252
|
const e = this.accumulationElements;
|
|
260
253
|
if (e.length === 0) {
|
|
261
|
-
this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: 0, dotY: 0, mode: "single", elements: [], xpaths: [], elementTag: "" }, origin:
|
|
254
|
+
this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: 0, dotY: 0, mode: "single", elements: [], xpaths: [], elementTag: "" }, origin: E });
|
|
262
255
|
return;
|
|
263
256
|
}
|
|
264
|
-
const n = e[e.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom, s = e.map((g) => this.elementToInfo(g)), a = e.map((g) => this.elementToLocator(g)), l = this.getAnchorRect(a), h = o - 2, d = i -
|
|
265
|
-
this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) =>
|
|
257
|
+
const n = e[e.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom, s = e.map((g) => this.elementToInfo(g)), a = e.map((g) => this.elementToLocator(g)), l = this.getAnchorRect(a), h = o - 2, d = i - N - 2, m = l && l.width > 0 && l.height > 0 ? { x: (h - l.left) / l.width, y: (d - l.top) / l.height } : { x: 0, y: 0 }, f = s[0];
|
|
258
|
+
this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) => I(g.xpath)), elementTag: f.elementTag, componentName: f.componentName, componentPath: f.componentPath, forgeId: f.forgeId, sourcePos: f.sourcePos }, origin: E });
|
|
266
259
|
}
|
|
267
260
|
removeDot(e) {
|
|
268
261
|
const t = this.dots.get(e);
|
|
@@ -274,7 +267,7 @@ class D {
|
|
|
274
267
|
restoreDots(e) {
|
|
275
268
|
this.removeAllDots();
|
|
276
269
|
for (const t of e) {
|
|
277
|
-
const n = t.elements.map((i) => ({ xpath:
|
|
270
|
+
const n = t.elements.map((i) => ({ xpath: I(i.xpath), forgeId: i.forgeId, forgeIdIndex: i.forgeIdIndex })), o = this.getAnchorRect(n);
|
|
278
271
|
if (o && t.anchorOffset && o.width > 0 && o.height > 0) {
|
|
279
272
|
const i = { rx: t.anchorOffset.x, ry: t.anchorOffset.y }, s = o.left + i.rx * o.width, a = o.top + i.ry * o.height;
|
|
280
273
|
this.createDotAtPosition(s, a, t.mode, t.id, t.order, n, i);
|
|
@@ -307,16 +300,10 @@ class D {
|
|
|
307
300
|
} else this.annotationHighlights.length > 0 && this.pendingHighlightLocators && (this.clearAnnotationHighlightsRaw(), this.highlightLocators(this.pendingHighlightLocators.locators, this.pendingHighlightLocators.showBounding));
|
|
308
301
|
this.repositionHoverOverlay();
|
|
309
302
|
};
|
|
310
|
-
createHitTestOverlay() {
|
|
311
|
-
this.hitTestOverlay || (this.hitTestOverlay = document.createElement("div"), Object.assign(this.hitTestOverlay.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: I.HIT_TEST_OVERLAY, cursor: "crosshair" }), this.hitTestOverlay.className = "forge-annotation-hit-test", document.body.appendChild(this.hitTestOverlay));
|
|
312
|
-
}
|
|
313
|
-
removeHitTestOverlay() {
|
|
314
|
-
this.hitTestOverlay && (this.hitTestOverlay.remove(), this.hitTestOverlay = null);
|
|
315
|
-
}
|
|
316
303
|
showHoverOverlay(e, t, n) {
|
|
317
304
|
this.hoverOverlay && (this.hoverOverlay.remove(), this.hoverOverlay = null), this.lastHoveredElement = e;
|
|
318
305
|
const o = e.getBoundingClientRect(), i = t === v.ANNOTATION_MULTI ? v.ANNOTATION_MULTI_BG : v.ANNOTATION_SINGLE_BG;
|
|
319
|
-
this.hoverOverlay =
|
|
306
|
+
this.hoverOverlay = D(o, t, i, "solid"), this.hoverOverlay.style.transition = "all 0.05s ease", this.hoverOverlay.className = "forge-annotation-hover", document.body.appendChild(this.hoverOverlay), this.showComponentTooltip(n || e, o);
|
|
320
307
|
}
|
|
321
308
|
removeHoverOverlay() {
|
|
322
309
|
this.hoverOverlay && (this.hoverOverlay.remove(), this.hoverOverlay = null), this.lastHoveredElement = null, this.removeComponentTooltip();
|
|
@@ -361,12 +348,12 @@ class D {
|
|
|
361
348
|
if (i) {
|
|
362
349
|
const s = i.getBoundingClientRect();
|
|
363
350
|
n.push(s);
|
|
364
|
-
const a =
|
|
351
|
+
const a = D(s, v.ANNOTATION_SINGLE, v.ANNOTATION_SINGLE_BG, "solid");
|
|
365
352
|
a.className = "forge-annotation-highlight", document.body.appendChild(a), this.annotationHighlights.push(a);
|
|
366
353
|
}
|
|
367
354
|
}
|
|
368
355
|
if (t && n.length > 1) {
|
|
369
|
-
const o = Math.min(...n.map((d) => d.left)), i = Math.min(...n.map((d) => d.top)), s = Math.max(...n.map((d) => d.right)), a = Math.max(...n.map((d) => d.bottom)), l = new DOMRect(o, i, s - o, a - i), h =
|
|
356
|
+
const o = Math.min(...n.map((d) => d.left)), i = Math.min(...n.map((d) => d.top)), s = Math.max(...n.map((d) => d.right)), a = Math.max(...n.map((d) => d.bottom)), l = new DOMRect(o, i, s - o, a - i), h = D(l, v.ANNOTATION_SINGLE, "transparent", "dashed");
|
|
370
357
|
h.className = "forge-annotation-bounding-rect", document.body.appendChild(h), this.annotationHighlights.push(h);
|
|
371
358
|
}
|
|
372
359
|
}
|
|
@@ -399,7 +386,7 @@ class D {
|
|
|
399
386
|
const a = o.getAttribute("data-component");
|
|
400
387
|
a && !n.has(a) && (n.add(a), t.push(a)), o = o.parentElement;
|
|
401
388
|
}
|
|
402
|
-
const i =
|
|
389
|
+
const i = te(e), s = [...t];
|
|
403
390
|
if (i.components.length > 0)
|
|
404
391
|
for (const a of i.components)
|
|
405
392
|
n.has(a) || (n.add(a), s.push(a));
|
|
@@ -411,7 +398,7 @@ class D {
|
|
|
411
398
|
const n = this.getComponentPath(e);
|
|
412
399
|
if (!n) return;
|
|
413
400
|
const o = document.createElement("div");
|
|
414
|
-
Object.assign(o.style, { position: "fixed", zIndex:
|
|
401
|
+
Object.assign(o.style, { position: "fixed", zIndex: x.TOOLTIP, backgroundColor: "rgb(238, 248, 255)", color: "rgba(26, 88, 208, 1)", border: "1px solid rgba(86, 153, 255, 0.3)", padding: "4px", borderRadius: "5px", fontSize: "12px", fontFamily: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", whiteSpace: "nowrap", pointerEvents: "none", boxShadow: "0 2px 8px rgba(0,0,0,0.3)", transition: "opacity 0.1s ease" }), o.textContent = n.map((l) => `<${l}>`).join(" "), o.className = "forge-annotation-component-tooltip", document.body.appendChild(o);
|
|
415
402
|
const i = o.getBoundingClientRect();
|
|
416
403
|
let s = t.left + t.width / 2 - i.width / 2, a = t.top - i.height - 6;
|
|
417
404
|
s < 4 && (s = 4), s + i.width > window.innerWidth - 4 && (s = window.innerWidth - i.width - 4), a < 4 && (a = t.bottom + 6), o.style.left = `${s}px`, o.style.top = `${a}px`, this.componentTooltip = o;
|
|
@@ -420,7 +407,7 @@ class D {
|
|
|
420
407
|
this.componentTooltip && (this.componentTooltip.remove(), this.componentTooltip = null);
|
|
421
408
|
}
|
|
422
409
|
showDragRect(e, t, n, o) {
|
|
423
|
-
this.dragRect || (this.dragRect = document.createElement("div"), Object.assign(this.dragRect.style, { position: "fixed", border: `1px dashed ${v.ANNOTATION_MULTI}`, backgroundColor: v.DRAG_RECT_BG, pointerEvents: "none", zIndex:
|
|
410
|
+
this.dragRect || (this.dragRect = document.createElement("div"), Object.assign(this.dragRect.style, { position: "fixed", border: `1px dashed ${v.ANNOTATION_MULTI}`, backgroundColor: v.DRAG_RECT_BG, pointerEvents: "none", zIndex: x.HOVER_OVERLAY, borderRadius: "4px" }), this.dragRect.className = "forge-annotation-drag-rect", document.body.appendChild(this.dragRect)), Object.assign(this.dragRect.style, { left: `${Math.min(e, n)}px`, top: `${Math.min(t, o)}px`, width: `${Math.abs(n - e)}px`, height: `${Math.abs(o - t)}px` });
|
|
424
411
|
}
|
|
425
412
|
removeDragRect() {
|
|
426
413
|
this.dragRect && (this.dragRect.remove(), this.dragRect = null), this.clearDragHighlights();
|
|
@@ -428,7 +415,7 @@ class D {
|
|
|
428
415
|
showDragHighlights(e) {
|
|
429
416
|
this.clearDragHighlights();
|
|
430
417
|
for (const t of e) {
|
|
431
|
-
const n = t.getBoundingClientRect(), o =
|
|
418
|
+
const n = t.getBoundingClientRect(), o = D(n, v.ANNOTATION_MULTI, v.ANNOTATION_MULTI_BG, "solid");
|
|
432
419
|
o.className = "forge-annotation-drag-highlight", document.body.appendChild(o), this.dragHighlights.push(o);
|
|
433
420
|
}
|
|
434
421
|
}
|
|
@@ -437,12 +424,12 @@ class D {
|
|
|
437
424
|
this.dragHighlights = [];
|
|
438
425
|
}
|
|
439
426
|
createDot(e, t, n, o, i, s = []) {
|
|
440
|
-
const a = this.getAnchorRect(s), l = e - 2, h = t -
|
|
427
|
+
const a = this.getAnchorRect(s), l = e - 2, h = t - N - 2, d = a && a.width > 0 && a.height > 0 ? { rx: (l - a.left) / a.width, ry: (h - a.top) / a.height } : { rx: 0, ry: 0 };
|
|
441
428
|
this.createDotAtPosition(l, h, n, o, i, s, d);
|
|
442
429
|
}
|
|
443
430
|
createDotAtPosition(e, t, n, o, i, s, a) {
|
|
444
431
|
const l = document.createElement("div");
|
|
445
|
-
Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${B}px`, height: `${
|
|
432
|
+
Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${B}px`, height: `${N}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: x.ANNOTATION_DOT, transition: "transform 0.15s ease", display: this.markersVisible ? "flex" : "none", alignItems: "center", justifyContent: "center", padding: "0 4px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontSize: "11px", fontWeight: "700", color: "#1A58D0", lineHeight: "1", userSelect: "none", boxShadow: "0px 1px 3px -1px rgba(9, 18, 42, 0.06), 0px 1px 3px -3px rgba(9, 18, 42, 0.1)" }), l.textContent = String(i), l.className = "forge-annotation-dot", l.dataset.annotationId = o, l.addEventListener("mouseenter", () => {
|
|
446
433
|
l.style.transform = "scale(1.05)", this.removeHoverOverlay();
|
|
447
434
|
}), l.addEventListener("mouseleave", () => {
|
|
448
435
|
l.style.transform = "scale(1)";
|
|
@@ -451,7 +438,7 @@ class D {
|
|
|
451
438
|
const d = this.dots.get(o);
|
|
452
439
|
d && this.highlightAnnotationElements(d);
|
|
453
440
|
const m = l.getBoundingClientRect();
|
|
454
|
-
this.messenger.send({ type: "ANNOTATION_DOT_CLICKED", annotationId: o, dotX: m.left, dotY: m.bottom, origin:
|
|
441
|
+
this.messenger.send({ type: "ANNOTATION_DOT_CLICKED", annotationId: o, dotX: m.left, dotY: m.bottom, origin: E });
|
|
455
442
|
}), document.body.appendChild(l), this.dots.set(o, { id: o, element: l, mode: n, order: i, locators: s, anchorRatio: a });
|
|
456
443
|
}
|
|
457
444
|
updateOrders(e) {
|
|
@@ -461,9 +448,9 @@ class D {
|
|
|
461
448
|
}
|
|
462
449
|
}
|
|
463
450
|
elementAtPoint(e, t) {
|
|
464
|
-
this.
|
|
451
|
+
this.hoverOverlay && (this.hoverOverlay.style.pointerEvents = "none"), this.dots.forEach((o) => o.element.style.pointerEvents = "none");
|
|
465
452
|
const n = document.elementFromPoint(e, t);
|
|
466
|
-
return this.
|
|
453
|
+
return this.hoverOverlay && (this.hoverOverlay.style.pointerEvents = "none"), this.dots.forEach((o) => o.element.style.pointerEvents = "auto"), !n || n === document.body || n === document.documentElement ? null : this.escapeToSvgRoot(n);
|
|
467
454
|
}
|
|
468
455
|
escapeToSvgRoot(e) {
|
|
469
456
|
if (!(e instanceof SVGElement)) return e;
|
|
@@ -496,19 +483,19 @@ class D {
|
|
|
496
483
|
}
|
|
497
484
|
elementsInRect(e, t, n, o) {
|
|
498
485
|
const i = Math.min(e, n), s = Math.min(t, o), a = Math.max(e, n), l = Math.max(t, o), h = document.querySelectorAll("[data-forge-id]"), d = [], m = /* @__PURE__ */ new Set();
|
|
499
|
-
if (h.forEach((
|
|
500
|
-
const g =
|
|
486
|
+
if (h.forEach((f) => {
|
|
487
|
+
const g = f, y = g.getAttribute("data-forge-id");
|
|
501
488
|
if (!y || m.has(y) || g instanceof SVGElement && g.tagName.toLowerCase() !== "svg" || g.closest?.("svg") && g.tagName.toLowerCase() !== "svg") return;
|
|
502
|
-
const
|
|
503
|
-
if (m.has(
|
|
504
|
-
const
|
|
505
|
-
|
|
489
|
+
const p = this.findTopmostWithSameForgeId(g);
|
|
490
|
+
if (m.has(p.getAttribute("data-forge-id") || "")) return;
|
|
491
|
+
const L = p.getBoundingClientRect();
|
|
492
|
+
L.right >= i && L.left <= a && L.bottom >= s && L.top <= l && (m.add(y), d.push(p));
|
|
506
493
|
}), this.dragScopeParent) {
|
|
507
|
-
const
|
|
508
|
-
if (
|
|
494
|
+
const f = this.findForgeIdParent(this.dragScopeParent);
|
|
495
|
+
if (f)
|
|
509
496
|
return d.filter((y) => {
|
|
510
|
-
const
|
|
511
|
-
return
|
|
497
|
+
const p = this.findForgeIdParent(y);
|
|
498
|
+
return p ? this.findForgeIdParent(p) === f : !1;
|
|
512
499
|
});
|
|
513
500
|
const g = this.dragScopeParent;
|
|
514
501
|
return d.filter((y) => this.findForgeIdParent(y) === g);
|
|
@@ -516,6 +503,7 @@ class D {
|
|
|
516
503
|
return d;
|
|
517
504
|
}
|
|
518
505
|
handleMouseMove = (e) => {
|
|
506
|
+
if (this.isAnnotationDotEventTarget(e)) return;
|
|
519
507
|
if (this.hoverSuppressed) {
|
|
520
508
|
this.removeHoverOverlay();
|
|
521
509
|
return;
|
|
@@ -528,7 +516,7 @@ class D {
|
|
|
528
516
|
}
|
|
529
517
|
if (e.buttons === 1) {
|
|
530
518
|
const n = e.clientX - this.dragStartX, o = e.clientY - this.dragStartY;
|
|
531
|
-
if (Math.abs(n) >
|
|
519
|
+
if (Math.abs(n) > T.DRAG_THRESHOLD || Math.abs(o) > T.DRAG_THRESHOLD) {
|
|
532
520
|
this.isDragging = !0;
|
|
533
521
|
return;
|
|
534
522
|
}
|
|
@@ -542,6 +530,7 @@ class D {
|
|
|
542
530
|
};
|
|
543
531
|
static DRAG_THRESHOLD = 5;
|
|
544
532
|
handleMouseDown = (e) => {
|
|
533
|
+
if (this.isAnnotationDotEventTarget(e)) return;
|
|
545
534
|
this.dragStartX = e.clientX, this.dragStartY = e.clientY, this.isDragging = !1;
|
|
546
535
|
const t = this.elementAtPoint(e.clientX, e.clientY);
|
|
547
536
|
if (t) {
|
|
@@ -552,6 +541,7 @@ class D {
|
|
|
552
541
|
e.preventDefault();
|
|
553
542
|
};
|
|
554
543
|
handleMouseUp = (e) => {
|
|
544
|
+
if (this.isAnnotationDotEventTarget(e)) return;
|
|
555
545
|
if (this.isDragging) {
|
|
556
546
|
this.isDragging = !1;
|
|
557
547
|
const o = this.elementsInRect(this.dragStartX, this.dragStartY, e.clientX, e.clientY);
|
|
@@ -575,8 +565,12 @@ class D {
|
|
|
575
565
|
this.createAnnotationFromElements([n], "single", e.clientX, e.clientY);
|
|
576
566
|
};
|
|
577
567
|
handleClick = (e) => {
|
|
578
|
-
e.preventDefault(), e.stopPropagation();
|
|
568
|
+
this.isAnnotationDotEventTarget(e) || (e.preventDefault(), e.stopPropagation());
|
|
579
569
|
};
|
|
570
|
+
isAnnotationDotEventTarget(e) {
|
|
571
|
+
const t = e.target;
|
|
572
|
+
return t instanceof Element && t.closest(".forge-annotation-dot") !== null;
|
|
573
|
+
}
|
|
580
574
|
handleKeyDown = (e) => {
|
|
581
575
|
if (e.key === "Escape") {
|
|
582
576
|
if (this.accumulationId) {
|
|
@@ -597,39 +591,56 @@ class D {
|
|
|
597
591
|
this.pendingAnnotations.delete(e), this.accumulationId === e && (this.accumulationId = null, this.accumulationElements = []), this.clearAnnotationHighlights(), this.hoverSuppressed = !1;
|
|
598
592
|
}
|
|
599
593
|
createAnnotationFromElements(e, t, n, o, i) {
|
|
600
|
-
const s = i ||
|
|
594
|
+
const s = i || ie();
|
|
601
595
|
this.hoverSuppressed = !0, this.removeHoverOverlay();
|
|
602
|
-
const a = e.map((
|
|
596
|
+
const a = e.map((p) => this.elementToInfo(p)), l = a.map((p) => ({ xpath: I(p.xpath), forgeId: p.forgeId, forgeIdIndex: p.forgeIdIndex })), h = this.getAnchorRect(l), d = n - 2, m = o - N - 2, f = h && h.width > 0 && h.height > 0 ? { x: (d - h.left) / h.width, y: (m - h.top) / h.height } : { x: 0, y: 0 };
|
|
603
597
|
this.pendingAnnotations.set(s, { dotX: n, dotY: o, mode: t, locators: l }), this.clearDragHighlights(), this.highlightLocators(l, t === "multi");
|
|
604
|
-
const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset:
|
|
605
|
-
c("annotation", "Annotation created (pending):", y), this.messenger.send({ type: "ANNOTATION_CREATED", annotation: y, origin:
|
|
598
|
+
const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset: f, mode: t, elements: a, xpaths: a.map((p) => I(p.xpath)), elementTag: g.elementTag, componentName: g.componentName, componentPath: g.componentPath, forgeId: g.forgeId, sourcePos: g.sourcePos };
|
|
599
|
+
c("annotation", "Annotation created (pending):", y), this.messenger.send({ type: "ANNOTATION_CREATED", annotation: y, origin: E });
|
|
606
600
|
}
|
|
607
601
|
handleDocumentLeave = () => {
|
|
608
602
|
this.removeHoverOverlay();
|
|
609
603
|
};
|
|
610
604
|
addListeners() {
|
|
611
|
-
|
|
605
|
+
document.addEventListener("mousemove", this.handleMouseMove, !0), document.addEventListener("mousedown", this.handleMouseDown, !0), document.addEventListener("mouseup", this.handleMouseUp, !0), document.addEventListener("click", this.handleClick, !0), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("keyup", this.handleKeyUp), document.addEventListener("mouseleave", this.handleDocumentLeave);
|
|
612
606
|
}
|
|
613
607
|
removeListeners() {
|
|
614
|
-
|
|
608
|
+
document.removeEventListener("mousemove", this.handleMouseMove, !0), document.removeEventListener("mousedown", this.handleMouseDown, !0), document.removeEventListener("mouseup", this.handleMouseUp, !0), document.removeEventListener("click", this.handleClick, !0), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("keyup", this.handleKeyUp), document.removeEventListener("mouseleave", this.handleDocumentLeave);
|
|
615
609
|
}
|
|
616
610
|
}
|
|
617
|
-
class
|
|
611
|
+
class se {
|
|
618
612
|
messenger;
|
|
619
613
|
callbacks;
|
|
620
|
-
|
|
621
|
-
hoveredElement = null;
|
|
614
|
+
selectModeShield = null;
|
|
622
615
|
constructor(e, t) {
|
|
623
616
|
this.messenger = e, this.callbacks = t;
|
|
624
617
|
}
|
|
625
618
|
enableListeners() {
|
|
626
|
-
this.
|
|
619
|
+
this.attachSelectModeShieldIfNeeded(), document.addEventListener("mousemove", this.handleMouseOver, !0), document.addEventListener("click", this.handleClick, !0), document.addEventListener("mouseleave", this.handleMouseOut), document.addEventListener("scroll", this.handleScroll, !0);
|
|
627
620
|
}
|
|
628
621
|
disableListeners() {
|
|
629
|
-
this.
|
|
622
|
+
this.removeSelectModeShield(), document.removeEventListener("mousemove", this.handleMouseOver, !0), document.removeEventListener("click", this.handleClick, !0), document.removeEventListener("mouseleave", this.handleMouseOut), document.removeEventListener("scroll", this.handleScroll, !0), this.clearHover();
|
|
623
|
+
}
|
|
624
|
+
attachSelectModeShieldIfNeeded() {
|
|
625
|
+
if (!this.callbacks.getSelectMode() || this.callbacks.getDesignMode() || this.selectModeShield) return;
|
|
626
|
+
const e = document.createElement("div");
|
|
627
|
+
Object.assign(e.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: "9998", cursor: "crosshair" }), e.className = "forge-select-mode-shield", e.addEventListener("wheel", this.handleShieldWheel, { passive: !1 }), document.body.appendChild(e), this.selectModeShield = e;
|
|
628
|
+
}
|
|
629
|
+
removeSelectModeShield() {
|
|
630
|
+
this.selectModeShield && (this.selectModeShield.removeEventListener("wheel", this.handleShieldWheel), this.selectModeShield.remove(), this.selectModeShield = null);
|
|
630
631
|
}
|
|
632
|
+
handleShieldWheel = (e) => {
|
|
633
|
+
if (!this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) return;
|
|
634
|
+
e.preventDefault();
|
|
635
|
+
const t = this.resolveElementFromPoint(e.clientX, e.clientY), n = t instanceof HTMLElement ? t : null, o = n ? this.findScrollableAncestor(n, e.deltaX, e.deltaY) : null;
|
|
636
|
+
if (o) {
|
|
637
|
+
o.scrollBy({ left: e.deltaX, top: e.deltaY, behavior: "auto" });
|
|
638
|
+
return;
|
|
639
|
+
}
|
|
640
|
+
window.scrollBy({ left: e.deltaX, top: e.deltaY, behavior: "auto" });
|
|
641
|
+
};
|
|
631
642
|
clearHover() {
|
|
632
|
-
|
|
643
|
+
M();
|
|
633
644
|
}
|
|
634
645
|
findTopmostElementWithSameId(e) {
|
|
635
646
|
const t = e.getAttribute("data-forge-id");
|
|
@@ -643,43 +654,64 @@ class le {
|
|
|
643
654
|
return o;
|
|
644
655
|
}
|
|
645
656
|
handleSelectModeClick(e) {
|
|
646
|
-
const t =
|
|
647
|
-
c("client", "Element clicked, XPath:", t), this.messenger.send({ type: "XPATH_REPORT", xpath: t, origin:
|
|
657
|
+
const t = I(R(e));
|
|
658
|
+
c("client", "Element clicked, XPath:", t), this.messenger.send({ type: "XPATH_REPORT", xpath: t, origin: E }), this.messenger.send({ type: "SELECT_MODE_DISABLED", origin: E });
|
|
648
659
|
}
|
|
649
660
|
handleMouseOver = (e) => {
|
|
650
661
|
if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode() || this.callbacks.getHoverDisabled()) return;
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
if (this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "auto"), t && t !== document.body && t !== document.documentElement) {
|
|
662
|
+
const t = this.resolveTarget(e);
|
|
663
|
+
if (t && t !== document.body && t !== document.documentElement) {
|
|
654
664
|
const o = t.getAttribute("data-forge-id") ? this.findTopmostElementWithSameId(t) : t;
|
|
655
665
|
if (this.callbacks.getDesignMode() && o === this.callbacks.getSelectedDesignElement())
|
|
656
666
|
return;
|
|
657
|
-
|
|
667
|
+
ne(o);
|
|
658
668
|
}
|
|
659
669
|
};
|
|
660
670
|
handleMouseOut = (e) => {
|
|
661
|
-
|
|
662
|
-
e.target === this.hoveredElement && (this.hoveredElement = null, L());
|
|
671
|
+
!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode() || M();
|
|
663
672
|
};
|
|
664
673
|
handleClick = (e) => {
|
|
665
674
|
if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode()) return;
|
|
666
|
-
e.preventDefault(), e.stopPropagation()
|
|
667
|
-
const t =
|
|
668
|
-
|
|
675
|
+
e.preventDefault(), e.stopPropagation();
|
|
676
|
+
const t = this.resolveTarget(e);
|
|
677
|
+
t && t !== document.body && t !== document.documentElement && (this.callbacks.getSelectMode() && this.callbacks.onSelectClick(t), this.callbacks.getDesignMode() && (M(), this.callbacks.onDesignClick(t)));
|
|
669
678
|
};
|
|
679
|
+
resolveTarget(e) {
|
|
680
|
+
const n = this.resolveElementFromPoint(e.clientX, e.clientY) ?? e.target;
|
|
681
|
+
return !n || !(n instanceof Element) ? null : n instanceof HTMLElement || n instanceof SVGElement ? n : null;
|
|
682
|
+
}
|
|
683
|
+
resolveElementFromPoint(e, t) {
|
|
684
|
+
const n = document.elementsFromPoint(e, t);
|
|
685
|
+
for (const o of n)
|
|
686
|
+
if (!(this.selectModeShield && o === this.selectModeShield) && !o.classList.contains("forge-overlay"))
|
|
687
|
+
return o;
|
|
688
|
+
return null;
|
|
689
|
+
}
|
|
690
|
+
findScrollableAncestor(e, t, n) {
|
|
691
|
+
let o = e;
|
|
692
|
+
for (; o && o !== document.body; ) {
|
|
693
|
+
if (this.canElementScroll(o, t, n)) return o;
|
|
694
|
+
o = o.parentElement;
|
|
695
|
+
}
|
|
696
|
+
return null;
|
|
697
|
+
}
|
|
698
|
+
canElementScroll(e, t, n) {
|
|
699
|
+
const o = window.getComputedStyle(e), i = (o.overflowY === "auto" || o.overflowY === "scroll" || o.overflowY === "overlay") && e.scrollHeight > e.clientHeight, s = (o.overflowX === "auto" || o.overflowX === "scroll" || o.overflowX === "overlay") && e.scrollWidth > e.clientWidth, a = i && (n < 0 && e.scrollTop > 0 || n > 0 && e.scrollTop + e.clientHeight < e.scrollHeight), l = s && (t < 0 && e.scrollLeft > 0 || t > 0 && e.scrollLeft + e.clientWidth < e.scrollWidth);
|
|
700
|
+
return a || l;
|
|
701
|
+
}
|
|
670
702
|
handleScroll = () => {
|
|
671
|
-
(this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) && (
|
|
703
|
+
(this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) && M();
|
|
672
704
|
};
|
|
673
705
|
}
|
|
674
|
-
let w = null,
|
|
675
|
-
async function
|
|
676
|
-
if (w &&
|
|
706
|
+
let w = null, H = null, _ = null;
|
|
707
|
+
async function re() {
|
|
708
|
+
if (w && H && _) return;
|
|
677
709
|
const [r, e, t] = await Promise.all([import("@babel/parser"), import("@babel/traverse"), import("@babel/generator")]);
|
|
678
710
|
w = r.parse;
|
|
679
711
|
const n = e.default;
|
|
680
|
-
|
|
712
|
+
H = typeof n == "function" ? n : n.default;
|
|
681
713
|
const o = t.default;
|
|
682
|
-
|
|
714
|
+
_ = typeof o == "function" ? o : o.default;
|
|
683
715
|
}
|
|
684
716
|
function k(r) {
|
|
685
717
|
return typeof r == "boolean" ? { type: "JSXExpressionContainer", expression: { type: "BooleanLiteral", value: r, loc: null }, loc: null } : typeof r == "number" ? { type: "JSXExpressionContainer", expression: { type: "NumericLiteral", value: r, loc: null }, loc: null } : { type: "StringLiteral", value: String(r), loc: null };
|
|
@@ -688,19 +720,19 @@ function F(r, e, t) {
|
|
|
688
720
|
const n = r.node.attributes.find((o) => o.type === "JSXAttribute" && o.name.type === "JSXIdentifier" && o.name.name === e);
|
|
689
721
|
return n && n.type === "JSXAttribute" ? (n.value = k(t), !0) : (r.node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: e }, value: k(t), loc: null }), !0);
|
|
690
722
|
}
|
|
691
|
-
async function
|
|
723
|
+
async function ae(r, e, t, n, o) {
|
|
692
724
|
try {
|
|
693
|
-
if (await
|
|
725
|
+
if (await re(), !w || !H || !_) return r;
|
|
694
726
|
const i = w(r, { sourceType: "module", plugins: ["jsx", "typescript"] });
|
|
695
727
|
let s = !1;
|
|
696
728
|
const a = /* @__PURE__ */ new Map();
|
|
697
|
-
if (
|
|
729
|
+
if (H(i, { JSXOpeningElement(l) {
|
|
698
730
|
if (l.node.name.type !== "JSXIdentifier") return;
|
|
699
731
|
const h = l.node.loc;
|
|
700
732
|
if (!h) return;
|
|
701
733
|
const d = `${h.start.line}:${h.start.column}`;
|
|
702
734
|
a.set(d, l);
|
|
703
|
-
const m = l.node.attributes.find((
|
|
735
|
+
const m = l.node.attributes.find((f) => f.type === "JSXAttribute" && f.name.type === "JSXIdentifier" && f.name.name === "data-forge-id" && f.value?.type === "StringLiteral");
|
|
704
736
|
m && m.type === "JSXAttribute" && m.value.value === e && (s = F(l, t, n));
|
|
705
737
|
} }), !s && o) {
|
|
706
738
|
const l = o.split(":");
|
|
@@ -710,13 +742,13 @@ async function he(r, e, t, n, o) {
|
|
|
710
742
|
}
|
|
711
743
|
}
|
|
712
744
|
if (s)
|
|
713
|
-
return
|
|
745
|
+
return _(i, {}, r).code;
|
|
714
746
|
} catch (i) {
|
|
715
747
|
c("client", "Failed to parse/update AST:", i);
|
|
716
748
|
}
|
|
717
749
|
return r;
|
|
718
750
|
}
|
|
719
|
-
async function
|
|
751
|
+
async function le(r) {
|
|
720
752
|
try {
|
|
721
753
|
const e = await fetch(`/__forge-read-source?path=${r}`);
|
|
722
754
|
if (e.ok)
|
|
@@ -727,14 +759,14 @@ async function de(r) {
|
|
|
727
759
|
}
|
|
728
760
|
return null;
|
|
729
761
|
}
|
|
730
|
-
async function
|
|
762
|
+
async function ce(r, e) {
|
|
731
763
|
try {
|
|
732
764
|
return await fetch("/__forge-update-source", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ filePath: r, source: e }) }), !0;
|
|
733
765
|
} catch (t) {
|
|
734
766
|
return c("client", "Failed to write source:", t), !1;
|
|
735
767
|
}
|
|
736
768
|
}
|
|
737
|
-
class
|
|
769
|
+
class he {
|
|
738
770
|
messenger;
|
|
739
771
|
componentRegistry;
|
|
740
772
|
selectController;
|
|
@@ -757,8 +789,8 @@ class ge {
|
|
|
757
789
|
}
|
|
758
790
|
const n = this.selectController.findTopmostElementWithSameId(e), o = n.getAttribute("data-component"), i = n.getAttribute("data-source-pos"), s = o || n.tagName.toLowerCase();
|
|
759
791
|
this.clearSelection(), this.selectedElement = n, this.applyHighlight(n);
|
|
760
|
-
const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h =
|
|
761
|
-
c("client", "Element selected in design mode:", { forgeId: t, sourcePos: i, text: a, type: l, componentName: s, editableProps: d, propValues: m }), this.messenger.send({ type: "ELEMENT_SELECTED", forgeId: t, sourcePos: i || void 0, text: a, elementType: l, xpath: h, componentName: s, editableProps: d, propValues: m, origin:
|
|
792
|
+
const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h = I(R(n)), d = this.componentRegistry.getEditableProps(s), m = this.extractPropValues(n, d);
|
|
793
|
+
c("client", "Element selected in design mode:", { forgeId: t, sourcePos: i, text: a, type: l, componentName: s, editableProps: d, propValues: m }), this.messenger.send({ type: "ELEMENT_SELECTED", forgeId: t, sourcePos: i || void 0, text: a, elementType: l, xpath: h, componentName: s, editableProps: d, propValues: m, origin: E });
|
|
762
794
|
}
|
|
763
795
|
updateText(e, t) {
|
|
764
796
|
this.updateProperty(e, "children", t);
|
|
@@ -781,11 +813,11 @@ class ge {
|
|
|
781
813
|
}
|
|
782
814
|
const a = s.slice(0, -4).join(":");
|
|
783
815
|
c("client", `Updating property ${t} = ${n} for ${e} in ${a}`), this.sourceCache.delete(a);
|
|
784
|
-
const l = await
|
|
816
|
+
const l = await le(a);
|
|
785
817
|
if (!l) return;
|
|
786
818
|
this.sourceCache.set(a, l);
|
|
787
|
-
const h = this.selectedElement?.getAttribute("data-source-pos") ?? null, d = await
|
|
788
|
-
d !== l ? (this.sourceCache.set(a, d), c("client", `Updated source for ${a}`), await
|
|
819
|
+
const h = this.selectedElement?.getAttribute("data-source-pos") ?? null, d = await ae(l, e, t, n, h);
|
|
820
|
+
d !== l ? (this.sourceCache.set(a, d), c("client", `Updated source for ${a}`), await ce(a, d) && (c("client", `Source written to disk and HMR triggered for ${a}`), this.messenger.send({ type: "SOURCE_UPDATED", forgeId: e, source: d, filePath: a, origin: E }))) : c("client", `No source changes detected for ${a}`);
|
|
789
821
|
}
|
|
790
822
|
applyHighlight(e) {
|
|
791
823
|
e.style.outline = `3px solid ${v.DESIGN_SELECTION_OUTLINE}`, e.style.outlineOffset = "2px";
|
|
@@ -815,9 +847,11 @@ class ge {
|
|
|
815
847
|
return t ? e[t] : null;
|
|
816
848
|
}
|
|
817
849
|
}
|
|
818
|
-
class
|
|
850
|
+
class A {
|
|
819
851
|
static instance = null;
|
|
820
852
|
messenger;
|
|
853
|
+
readyIntervalId = null;
|
|
854
|
+
isConnectedToHost = !1;
|
|
821
855
|
selectMode = !1;
|
|
822
856
|
designMode = !1;
|
|
823
857
|
hoverDisabled = !1;
|
|
@@ -827,23 +861,23 @@ class C {
|
|
|
827
861
|
designController;
|
|
828
862
|
onError;
|
|
829
863
|
constructor(e) {
|
|
830
|
-
this.onError = e?.onError, c("client", "ForgeClient initialized"), this.messenger = new
|
|
864
|
+
this.onError = e?.onError, c("client", "ForgeClient initialized"), this.messenger = new W(), this.componentRegistry = new j(), this.selectController = new se(this.messenger, { getSelectMode: () => this.selectMode, getDesignMode: () => this.designMode, getHoverDisabled: () => this.hoverDisabled, getSelectedDesignElement: () => this.designController.getSelectedElement(), onSelectClick: (t) => this.handleSelectClick(t), onDesignClick: (t) => this.handleDesignClick(t) }), this.designController = new he(this.messenger, this.componentRegistry, this.selectController), this.setupMessageListener(), this.sendReady(), this.setupForgeIdPropagation(), window.__forgeClient = this;
|
|
831
865
|
}
|
|
832
866
|
static getInstance(e) {
|
|
833
|
-
return
|
|
867
|
+
return A.instance || (A.instance = new A(e)), A.instance;
|
|
834
868
|
}
|
|
835
869
|
enableAnnotationMode(e) {
|
|
836
870
|
this.setAnnotationMode(e);
|
|
837
871
|
}
|
|
838
872
|
restoreAnnotations(e) {
|
|
839
|
-
this.annotationOverlay || (this.annotationOverlay = new
|
|
873
|
+
this.annotationOverlay || (this.annotationOverlay = new T(this.messenger)), this.annotationOverlay.restoreDots(e);
|
|
840
874
|
}
|
|
841
875
|
setupMessageListener() {
|
|
842
876
|
c("client", "Setting up message listener..."), this.messenger.onMessage((e) => {
|
|
843
|
-
if (
|
|
877
|
+
if (G(e.data) || !e.data || typeof e.data != "object" || !("origin" in e.data)) return;
|
|
844
878
|
const t = e.data;
|
|
845
879
|
if (t.origin === V) {
|
|
846
|
-
c("client", "Received message from host:", t);
|
|
880
|
+
this.isConnectedToHost || (this.isConnectedToHost = !0, this.readyIntervalId !== null && (window.clearInterval(this.readyIntervalId), this.readyIntervalId = null, c("client", "Host connection detected, stopped CHILD_READY retries"))), c("client", "Received message from host:", t);
|
|
847
881
|
try {
|
|
848
882
|
switch (t.type) {
|
|
849
883
|
case "ENABLE_SELECT_MODE":
|
|
@@ -889,7 +923,7 @@ class C {
|
|
|
889
923
|
this.annotationOverlay?.toggleMarkers();
|
|
890
924
|
break;
|
|
891
925
|
case "RESTORE_ANNOTATIONS":
|
|
892
|
-
this.annotationOverlay || (this.annotationOverlay = new
|
|
926
|
+
this.annotationOverlay || (this.annotationOverlay = new T(this.messenger)), this.annotationOverlay.restoreDots(t.annotations);
|
|
893
927
|
break;
|
|
894
928
|
case "PING":
|
|
895
929
|
c("client", "Received PING");
|
|
@@ -908,7 +942,7 @@ class C {
|
|
|
908
942
|
this.designMode !== e && (c("client", `Setting design mode to: ${e}`), this.designMode = e, e ? (this.selectController.enableListeners(), this.hoverDisabled = !1, document.body.style.cursor = "crosshair") : (this.selectController.disableListeners(), this.hoverDisabled = !1, document.body.style.cursor = "", this.selectController.clearHover()));
|
|
909
943
|
}
|
|
910
944
|
setAnnotationMode(e) {
|
|
911
|
-
e ? (this.annotationOverlay || (this.annotationOverlay = new
|
|
945
|
+
e ? (this.annotationOverlay || (this.annotationOverlay = new T(this.messenger)), this.setSelectMode(!1), this.setDesignMode(!1), this.annotationOverlay.activate()) : this.annotationOverlay?.deactivate();
|
|
912
946
|
}
|
|
913
947
|
handleSelectClick(e) {
|
|
914
948
|
this.selectController.handleSelectModeClick(e), this.setSelectMode(!1);
|
|
@@ -918,8 +952,14 @@ class C {
|
|
|
918
952
|
}
|
|
919
953
|
sendReady() {
|
|
920
954
|
c("client", "Scheduling CHILD_READY message..."), setTimeout(() => {
|
|
921
|
-
c("client", "Sending CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin:
|
|
922
|
-
|
|
955
|
+
this.isConnectedToHost || (c("client", "Sending CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin: E }), this.readyIntervalId === null && (this.readyIntervalId = window.setInterval(() => {
|
|
956
|
+
if (this.isConnectedToHost) {
|
|
957
|
+
this.readyIntervalId !== null && (window.clearInterval(this.readyIntervalId), this.readyIntervalId = null);
|
|
958
|
+
return;
|
|
959
|
+
}
|
|
960
|
+
c("client", "Retrying CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin: E });
|
|
961
|
+
}, P.CHILD_READY_RETRY_INTERVAL)));
|
|
962
|
+
}, P.CHILD_READY_DELAY);
|
|
923
963
|
}
|
|
924
964
|
setupForgeIdPropagation() {
|
|
925
965
|
const e = () => {
|
|
@@ -948,8 +988,8 @@ class C {
|
|
|
948
988
|
}
|
|
949
989
|
}
|
|
950
990
|
}
|
|
951
|
-
|
|
991
|
+
A.getInstance();
|
|
952
992
|
export {
|
|
953
|
-
|
|
954
|
-
|
|
993
|
+
A as ForgeClient,
|
|
994
|
+
W as ParentMessenger
|
|
955
995
|
};
|
|
@@ -5,7 +5,7 @@ function o(n) {
|
|
|
5
5
|
}
|
|
6
6
|
return !1;
|
|
7
7
|
}
|
|
8
|
-
class
|
|
8
|
+
class E {
|
|
9
9
|
targetWindow;
|
|
10
10
|
targetOrigin;
|
|
11
11
|
constructor(e, s = "*") {
|
|
@@ -23,7 +23,7 @@ class a {
|
|
|
23
23
|
};
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
-
class
|
|
26
|
+
class a {
|
|
27
27
|
send(e, s) {
|
|
28
28
|
window.parent && window.parent !== window && window.parent.postMessage(e, s || "*");
|
|
29
29
|
}
|
|
@@ -36,20 +36,20 @@ class r {
|
|
|
36
36
|
};
|
|
37
37
|
}
|
|
38
38
|
}
|
|
39
|
-
const
|
|
39
|
+
const r = "host", O = "sandbox", T = { HOVER_OVERLAY: "9999", ANNOTATION_DOT: "10000", TOOLTIP: "10001" }, _ = { SELECT_OVERLAY_BORDER: "#1A58D0", SELECT_OVERLAY_BG: "#45ADFF17", DESIGN_SELECTION_OUTLINE: "#9333ea", ANNOTATION_SINGLE: "#1A58D0", ANNOTATION_MULTI: "#1A58D0", ANNOTATION_SINGLE_BG: "#45ADFF17", ANNOTATION_MULTI_BG: "#45ADFF17", DRAG_RECT_BG: "#45ADFF17" }, A = 20, N = 20, i = { CHILD_READY_DELAY: 1e3, CHILD_READY_RETRY_INTERVAL: 3e3, CONNECTION_TIMEOUT: 5e3 }, c = ["#root", "#app", "#__next", "[data-reactroot]"], I = 200, d = 30, D = 6;
|
|
40
40
|
export {
|
|
41
|
-
|
|
41
|
+
A as B,
|
|
42
42
|
_ as C,
|
|
43
43
|
O as M,
|
|
44
|
-
|
|
44
|
+
a as P,
|
|
45
45
|
c as R,
|
|
46
|
-
|
|
47
|
-
|
|
46
|
+
i as T,
|
|
47
|
+
E as W,
|
|
48
48
|
T as Z,
|
|
49
|
-
|
|
50
|
-
|
|
49
|
+
r as a,
|
|
50
|
+
D as b,
|
|
51
51
|
d as c,
|
|
52
52
|
I as d,
|
|
53
|
-
|
|
53
|
+
N as e,
|
|
54
54
|
o as i
|
|
55
55
|
};
|
package/dist/host.js
CHANGED
package/dist/index.js
CHANGED
|
@@ -2,7 +2,7 @@ import { ForgeHost as r } from "./host.js";
|
|
|
2
2
|
import { ForgeClient as t } from "./client.js";
|
|
3
3
|
import { a as S, u as m } from "./useDesignMode-VIipNUSj.js";
|
|
4
4
|
import { e as p } from "./debug-CLzmqn3R.js";
|
|
5
|
-
import { a as E, M as g } from "./constants-
|
|
5
|
+
import { a as E, M as g } from "./constants-DHvpLY46.js";
|
|
6
6
|
export {
|
|
7
7
|
t as ForgeClient,
|
|
8
8
|
r as ForgeHost,
|
|
@@ -18,6 +18,7 @@ export declare const BADGE_HEIGHT = 20;
|
|
|
18
18
|
export declare const BADGE_MIN_WIDTH = 20;
|
|
19
19
|
export declare const TIMEOUTS: {
|
|
20
20
|
readonly CHILD_READY_DELAY: 1000;
|
|
21
|
+
readonly CHILD_READY_RETRY_INTERVAL: 3000;
|
|
21
22
|
readonly CONNECTION_TIMEOUT: 5000;
|
|
22
23
|
};
|
|
23
24
|
export declare const REACT_ROOT_SELECTORS: string[];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAGV,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAGV,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,eAAe,KAAK,CAAA;AAGjC,eAAO,MAAM,QAAQ
|
|
1
|
+
{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../src/shared/constants.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO;;;;;CAKV,CAAA;AAGV,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAA;AAGV,eAAO,MAAM,YAAY,KAAK,CAAA;AAC9B,eAAO,MAAM,eAAe,KAAK,CAAA;AAGjC,eAAO,MAAM,QAAQ;;;;CAIX,CAAA;AAGV,eAAO,MAAM,oBAAoB,UAAmD,CAAA;AAGpF,eAAO,MAAM,iBAAiB,MAAM,CAAA;AACpC,eAAO,MAAM,mBAAmB,KAAK,CAAA;AACrC,eAAO,MAAM,cAAc,IAAI,CAAA"}
|