js.foresight-devtools 1.3.3 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +90 -90
- package/dist/index.d.ts +13 -4
- package/dist/index.js +51 -46
- package/package.json +65 -64
- package/LICENSE +0 -21
package/README.md
CHANGED
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
# js.foresight-devtools
|
|
2
|
-
|
|
3
|
-
[](https://www.npmjs.com/package/js.foresight-devtools)
|
|
4
|
-
[](http://www.typescriptlang.org/)
|
|
5
|
-
[](https://opensource.org/licenses/MIT)
|
|
6
|
-
|
|
7
|
-
`ForesightJS` offers dedicated [Development Tools](https://github.com/spaansba/ForesightJS/tree/main/packages/js.foresight-devtools), written in [Lit](https://lit.dev/), to help you better understand and fine-tune how `ForesightJS` works within your application. You can see the development tools in action on the [playground page](https://foresightjs.com/#playground), which includes visual trajectory indicators, element boundaries, and a control panel in the bottom-right corner.
|
|
8
|
-
|
|
9
|
-
These tools are built entirely using `ForesightJS`'s [built-in events](/docs/events), demonstrating how you can create your own monitoring and debugging tools using the same event system.
|
|
10
|
-
|
|
11
|
-
## Installation
|
|
12
|
-
|
|
13
|
-
To install the `ForesightJS` Development Tools package, use your preferred package manager:
|
|
14
|
-
|
|
15
|
-
```bash
|
|
16
|
-
pnpm add -D js.foresight-devtools
|
|
17
|
-
# or
|
|
18
|
-
npm install -D js.foresight-devtools
|
|
19
|
-
# or
|
|
20
|
-
yarn add -D js.foresight-devtools
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
## Enabling Development Tools
|
|
24
|
-
|
|
25
|
-
```javascript
|
|
26
|
-
import { ForesightManager } from "js.foresight"
|
|
27
|
-
import { ForesightDevtools } from "js.foresight-devtools"
|
|
28
|
-
|
|
29
|
-
// Initialize ForesightJS
|
|
30
|
-
ForesightManager.initialize({})
|
|
31
|
-
|
|
32
|
-
// Initialize the development tools (all options are optional)
|
|
33
|
-
ForesightDevtools.initialize({
|
|
34
|
-
showDebugger: true,
|
|
35
|
-
isControlPanelDefaultMinimized: false, // optional setting which allows you to minimize the control panel on default
|
|
36
|
-
showNameTags: true, // optional setting which shows the name of the element
|
|
37
|
-
sortElementList: "visibility", // optional setting for how the elements in the control panel are sorted
|
|
38
|
-
logging: {
|
|
39
|
-
logLocation: "controlPanel", // Where to log the Foresight Events
|
|
40
|
-
callbackCompleted: true,
|
|
41
|
-
elementReactivated: true,
|
|
42
|
-
callbackInvoked: true,
|
|
43
|
-
elementDataUpdated: false,
|
|
44
|
-
elementRegistered: false,
|
|
45
|
-
elementUnregistered: false,
|
|
46
|
-
managerSettingsChanged: true,
|
|
47
|
-
mouseTrajectoryUpdate: false, // dont log this to the devtools
|
|
48
|
-
scrollTrajectoryUpdate: false, // dont log this to the devtools
|
|
49
|
-
deviceStrategyChanged: true,
|
|
50
|
-
},
|
|
51
|
-
})
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
## Development Tools Features
|
|
55
|
-
|
|
56
|
-
Once enabled, the `ForesightJS` Development Tools add several visual layers to your application, including mouse and scroll trajectories and element hitboxes. A control panel also appears in the bottom-right corner of the screen.
|
|
57
|
-
|
|
58
|
-
### Control Panel
|
|
59
|
-
|
|
60
|
-
The control panel provides three main tabs for debugging and configuration. Each tab serves a specific purpose in understanding and tuning ForesightJS behavior.
|
|
61
|
-
|
|
62
|
-
#### Settings Tab
|
|
63
|
-
|
|
64
|
-
The Settings tab provides real-time controls for all [Global Configurations](/docs/configuration/global-settings). Changes made through these controls immediately affect the `ForesightManager` configuration, allowing you to see how different settings impact your app without fiddling in your code.
|
|
65
|
-
|
|
66
|
-
#### Elements Tab
|
|
67
|
-
|
|
68
|
-
The Elements tab displays a overview of all currently registered elements within the `ForesightManage`r. Each element entry shows its current status through color-coded indicators:
|
|
69
|
-
|
|
70
|
-
- 🟢 **Green** - Active visible elements in desktop mode
|
|
71
|
-
- ⚫ **Grey** - Active invisible elements in desktop mode
|
|
72
|
-
- 🟣 **Purple** - Active elements while in touch device mode (all elements, we dont track visibility in this mode)
|
|
73
|
-
- 🟡 **Yellow** - Elements which callbacks are currently executing
|
|
74
|
-
- 🔘 **Light Gray** - Inactive elements
|
|
75
|
-
|
|
76
|
-
Each element can also be expanded to reveal its [`ForesightElementData`](/docs/next/getting-started/typescript#foresightelementdata) information including settings, callback status, and metadata. A countdown timer appears for elements in their reactivation cooldown period (`reactivateAfter`), clicking this timer will instantly reactivate the element.
|
|
77
|
-
|
|
78
|
-
#### Log Tab
|
|
79
|
-
|
|
80
|
-
The Log tab displays real-time [events](/docs/events) emitted by `ForesightJS`. You can see callback execution times, the full element's lifecycle and other system events. Events can be filtered through the devtools initialization configuration or in the control panel itself.
|
|
81
|
-
|
|
82
|
-
You can also print out the complete [`ForesightManager.instance.getManagerData`](/docs/debugging/static-properties#foresightmanagerinstancegetmanagerdata) state without having to call it from your code.
|
|
83
|
-
|
|
84
|
-
:::caution
|
|
85
|
-
Avoid logging frequently emitted events to the browser console, as it can noticeably slow down your development environment. Use the control panel for this instead.
|
|
86
|
-
:::
|
|
87
|
-
|
|
88
|
-
:::note
|
|
89
|
-
Element overlay visualization and visibility sorting in the control panel only work with desktop/mouse prediction strategies. When debugging `touchDeviceStrategy` configurations, these features are not available as touch strategies don't track the same positioning data.
|
|
90
|
-
:::
|
|
1
|
+
# js.foresight-devtools
|
|
2
|
+
|
|
3
|
+
[](https://www.npmjs.com/package/js.foresight-devtools)
|
|
4
|
+
[](http://www.typescriptlang.org/)
|
|
5
|
+
[](https://opensource.org/licenses/MIT)
|
|
6
|
+
|
|
7
|
+
`ForesightJS` offers dedicated [Development Tools](https://github.com/spaansba/ForesightJS/tree/main/packages/js.foresight-devtools), written in [Lit](https://lit.dev/), to help you better understand and fine-tune how `ForesightJS` works within your application. You can see the development tools in action on the [playground page](https://foresightjs.com/#playground), which includes visual trajectory indicators, element boundaries, and a control panel in the bottom-right corner.
|
|
8
|
+
|
|
9
|
+
These tools are built entirely using `ForesightJS`'s [built-in events](/docs/events), demonstrating how you can create your own monitoring and debugging tools using the same event system.
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
To install the `ForesightJS` Development Tools package, use your preferred package manager:
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
pnpm add -D js.foresight-devtools
|
|
17
|
+
# or
|
|
18
|
+
npm install -D js.foresight-devtools
|
|
19
|
+
# or
|
|
20
|
+
yarn add -D js.foresight-devtools
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
## Enabling Development Tools
|
|
24
|
+
|
|
25
|
+
```javascript
|
|
26
|
+
import { ForesightManager } from "js.foresight"
|
|
27
|
+
import { ForesightDevtools } from "js.foresight-devtools"
|
|
28
|
+
|
|
29
|
+
// Initialize ForesightJS
|
|
30
|
+
ForesightManager.initialize({})
|
|
31
|
+
|
|
32
|
+
// Initialize the development tools (all options are optional)
|
|
33
|
+
ForesightDevtools.initialize({
|
|
34
|
+
showDebugger: true,
|
|
35
|
+
isControlPanelDefaultMinimized: false, // optional setting which allows you to minimize the control panel on default
|
|
36
|
+
showNameTags: true, // optional setting which shows the name of the element
|
|
37
|
+
sortElementList: "visibility", // optional setting for how the elements in the control panel are sorted
|
|
38
|
+
logging: {
|
|
39
|
+
logLocation: "controlPanel", // Where to log the Foresight Events
|
|
40
|
+
callbackCompleted: true,
|
|
41
|
+
elementReactivated: true,
|
|
42
|
+
callbackInvoked: true,
|
|
43
|
+
elementDataUpdated: false,
|
|
44
|
+
elementRegistered: false,
|
|
45
|
+
elementUnregistered: false,
|
|
46
|
+
managerSettingsChanged: true,
|
|
47
|
+
mouseTrajectoryUpdate: false, // dont log this to the devtools
|
|
48
|
+
scrollTrajectoryUpdate: false, // dont log this to the devtools
|
|
49
|
+
deviceStrategyChanged: true,
|
|
50
|
+
},
|
|
51
|
+
})
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
## Development Tools Features
|
|
55
|
+
|
|
56
|
+
Once enabled, the `ForesightJS` Development Tools add several visual layers to your application, including mouse and scroll trajectories and element hitboxes. A control panel also appears in the bottom-right corner of the screen.
|
|
57
|
+
|
|
58
|
+
### Control Panel
|
|
59
|
+
|
|
60
|
+
The control panel provides three main tabs for debugging and configuration. Each tab serves a specific purpose in understanding and tuning ForesightJS behavior.
|
|
61
|
+
|
|
62
|
+
#### Settings Tab
|
|
63
|
+
|
|
64
|
+
The Settings tab provides real-time controls for all [Global Configurations](/docs/configuration/global-settings). Changes made through these controls immediately affect the `ForesightManager` configuration, allowing you to see how different settings impact your app without fiddling in your code.
|
|
65
|
+
|
|
66
|
+
#### Elements Tab
|
|
67
|
+
|
|
68
|
+
The Elements tab displays a overview of all currently registered elements within the `ForesightManage`r. Each element entry shows its current status through color-coded indicators:
|
|
69
|
+
|
|
70
|
+
- 🟢 **Green** - Active visible elements in desktop mode
|
|
71
|
+
- ⚫ **Grey** - Active invisible elements in desktop mode
|
|
72
|
+
- 🟣 **Purple** - Active elements while in touch device mode (all elements, we dont track visibility in this mode)
|
|
73
|
+
- 🟡 **Yellow** - Elements which callbacks are currently executing
|
|
74
|
+
- 🔘 **Light Gray** - Inactive elements
|
|
75
|
+
|
|
76
|
+
Each element can also be expanded to reveal its [`ForesightElementData`](/docs/next/getting-started/typescript#foresightelementdata) information including settings, callback status, and metadata. A countdown timer appears for elements in their reactivation cooldown period (`reactivateAfter`), clicking this timer will instantly reactivate the element.
|
|
77
|
+
|
|
78
|
+
#### Log Tab
|
|
79
|
+
|
|
80
|
+
The Log tab displays real-time [events](/docs/events) emitted by `ForesightJS`. You can see callback execution times, the full element's lifecycle and other system events. Events can be filtered through the devtools initialization configuration or in the control panel itself.
|
|
81
|
+
|
|
82
|
+
You can also print out the complete [`ForesightManager.instance.getManagerData`](/docs/debugging/static-properties#foresightmanagerinstancegetmanagerdata) state without having to call it from your code.
|
|
83
|
+
|
|
84
|
+
:::caution
|
|
85
|
+
Avoid logging frequently emitted events to the browser console, as it can noticeably slow down your development environment. Use the control panel for this instead.
|
|
86
|
+
:::
|
|
87
|
+
|
|
88
|
+
:::note
|
|
89
|
+
Element overlay visualization and visibility sorting in the control panel only work with desktop/mouse prediction strategies. When debugging `touchDeviceStrategy` configurations, these features are not available as touch strategies don't track the same positioning data.
|
|
90
|
+
:::
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as lit from 'lit';
|
|
2
2
|
import { LitElement, TemplateResult, PropertyValues } from 'lit';
|
|
3
3
|
import { ForesightEvent, ForesightElementData, ForesightManagerSettings as ForesightManagerSettings$1 } from 'js.foresight';
|
|
4
|
-
import { ForesightEvent as ForesightEvent$1, ElementCallbackInfo, HitSlop, UpdatedDataPropertyNames, CallbackHitType, Point, ScrollDirection, ForesightManagerSettings, UpdatedManagerSetting, CallbackHits, ForesightElementData as ForesightElementData$1 } from 'js.foresight/types/types';
|
|
4
|
+
import { ForesightEvent as ForesightEvent$1, ElementCallbackInfo, HitSlop, UpdatedDataPropertyNames, CallbackHitType, Point, ScrollDirection, ForesightManagerSettings, UpdatedManagerSetting, CallbackHits, ForesightElementData as ForesightElementData$1, ForesightManagerData } from 'js.foresight/types/types';
|
|
5
5
|
|
|
6
6
|
type DeepPartial<T> = T extends object ? {
|
|
7
7
|
[P in keyof T]?: DeepPartial<T[P]>;
|
|
@@ -176,7 +176,7 @@ declare class ReactivateCountdown extends LitElement {
|
|
|
176
176
|
private startTime;
|
|
177
177
|
connectedCallback(): void;
|
|
178
178
|
disconnectedCallback(): void;
|
|
179
|
-
|
|
179
|
+
willUpdate(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
180
180
|
private checkAndStartCountdown;
|
|
181
181
|
private startCountdown;
|
|
182
182
|
private clearCountdown;
|
|
@@ -223,17 +223,25 @@ declare class ElementTab extends LitElement {
|
|
|
223
223
|
private runningCallbacks;
|
|
224
224
|
private expandedElementIds;
|
|
225
225
|
private _abortController;
|
|
226
|
+
private _pendingElementUpdates;
|
|
227
|
+
private _updateDebounceId;
|
|
228
|
+
private _cachedActiveElements;
|
|
229
|
+
private _cachedInactiveElements;
|
|
230
|
+
private _elementsCacheDirty;
|
|
226
231
|
constructor();
|
|
227
232
|
private handleSortChange;
|
|
228
233
|
private handleElementToggle;
|
|
229
234
|
private _generateHitsChipTitle;
|
|
230
235
|
connectedCallback(): void;
|
|
231
236
|
disconnectedCallback(): void;
|
|
237
|
+
private _scheduleDebouncedUpdate;
|
|
238
|
+
private _flushPendingUpdates;
|
|
232
239
|
private updateElementListFromManager;
|
|
233
240
|
private handleCallbackCompleted;
|
|
234
241
|
private getSortedElements;
|
|
235
|
-
private
|
|
236
|
-
private
|
|
242
|
+
private _recomputeElementsCache;
|
|
243
|
+
private get activeElements();
|
|
244
|
+
private get inactiveElements();
|
|
237
245
|
private sortByDocumentPosition;
|
|
238
246
|
render(): lit.TemplateResult<1>;
|
|
239
247
|
}
|
|
@@ -353,6 +361,7 @@ interface ManagerDataPayload extends PayloadBase {
|
|
|
353
361
|
registeredElements: Array<Omit<ForesightElementData$1, "element"> & {
|
|
354
362
|
elementInfo: string;
|
|
355
363
|
}>;
|
|
364
|
+
loadedModules: ForesightManagerData["loadedModules"];
|
|
356
365
|
}
|
|
357
366
|
type SerializedEventData = ElementRegisteredPayload | ElementUnregisteredEvent | ElementReactivatedPayload | ElementDataUpdatedPayload | CallbackInvokedPayload | CallbackCompletedPayload | MouseTrajectoryUpdatePayload | ScrollTrajectoryUpdatePayload | ManagerSettingsChangedPayload | DeviceStrategyChangedPayload | ManagerDataPayload | SerializationErrorPayload;
|
|
358
367
|
|
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e,t)=>{for(var i=t>1?void 0:t?He(r,e):r,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(r,e,i):s(i))||i);return t&&i&&ze(r,e,i),i};import{LitElement as zn,css as Hn,html as
|
|
1
|
+
var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e,t)=>{for(var i=t>1?void 0:t?He(r,e):r,a=o.length-1,s;a>=0;a--)(s=o[a])&&(i=(t?s(r,e,i):s(i))||i);return t&&i&&ze(r,e,i),i};import{LitElement as zn,css as Hn,html as je}from"lit";import{customElement as Bn,state as Gn}from"lit/decorators.js";import{LitElement as yn,css as wn,html as xn}from"lit";import{customElement as kn,state as q}from"lit/decorators.js";import{classMap as re}from"lit/directives/class-map.js";import{ForesightManager as Fe}from"js.foresight";import{css as St,html as W,LitElement as Tt}from"lit";import{customElement as Dt,state as $}from"lit/decorators.js";import{map as Me}from"lit/directives/map.js";import{ForesightManager as I}from"js.foresight";import{html as c}from"lit";var le=c`
|
|
2
2
|
<svg
|
|
3
3
|
xmlns="http://www.w3.org/2000/svg"
|
|
4
4
|
width="16"
|
|
@@ -237,8 +237,8 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
237
237
|
stroke-linecap="round"
|
|
238
238
|
stroke-linejoin="round"
|
|
239
239
|
>
|
|
240
|
-
<path d="M18 8a6 6 0 0 0-12 0c0 2 3 4 6 6 3-2 6-4 6-6z"/>
|
|
241
|
-
<circle cx="12" cy="8" r="3"/>
|
|
240
|
+
<path d="M18 8a6 6 0 0 0-12 0c0 2 3 4 6 6 3-2 6-4 6-6z" />
|
|
241
|
+
<circle cx="12" cy="8" r="3" />
|
|
242
242
|
</svg>
|
|
243
243
|
`,Jn=c`
|
|
244
244
|
<svg
|
|
@@ -252,10 +252,10 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
252
252
|
stroke-linecap="round"
|
|
253
253
|
stroke-linejoin="round"
|
|
254
254
|
>
|
|
255
|
-
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
|
|
256
|
-
<line x1="8" y1="21" x2="16" y2="21"/>
|
|
257
|
-
<line x1="12" y1="17" x2="12" y2="21"/>
|
|
258
|
-
<circle cx="12" cy="10" r="2"/>
|
|
255
|
+
<rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
|
|
256
|
+
<line x1="8" y1="21" x2="16" y2="21" />
|
|
257
|
+
<line x1="12" y1="17" x2="12" y2="21" />
|
|
258
|
+
<circle cx="12" cy="10" r="2" />
|
|
259
259
|
</svg>
|
|
260
260
|
`,Xn=c`
|
|
261
261
|
<svg
|
|
@@ -269,14 +269,14 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
269
269
|
stroke-linecap="round"
|
|
270
270
|
stroke-linejoin="round"
|
|
271
271
|
>
|
|
272
|
-
<circle cx="12" cy="12" r="10"/>
|
|
273
|
-
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
|
|
272
|
+
<circle cx="12" cy="12" r="10" />
|
|
273
|
+
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
|
|
274
274
|
</svg>
|
|
275
|
-
`;import{LitElement as Be,html as Ge,css as We}from"lit";import{customElement as Ke,property as qe}from"lit/decorators.js";var
|
|
275
|
+
`;import{LitElement as Be,html as Ge,css as We}from"lit";import{customElement as Ke,property as qe}from"lit/decorators.js";var F=class extends Be{constructor(){super(...arguments);this.title=""}render(){return Ge`
|
|
276
276
|
<span class="chip" title="${this.title}">
|
|
277
277
|
<slot></slot>
|
|
278
278
|
</span>
|
|
279
|
-
`}};
|
|
279
|
+
`}};F.styles=[We`
|
|
280
280
|
:host {
|
|
281
281
|
display: inline-block;
|
|
282
282
|
}
|
|
@@ -296,11 +296,11 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
296
296
|
line-height: 1.2;
|
|
297
297
|
transition: all 0.2s ease;
|
|
298
298
|
}
|
|
299
|
-
`],n([qe({type:String})],
|
|
299
|
+
`],n([qe({type:String})],F.prototype,"title",2),F=n([Ke("chip-element")],F);import{LitElement as Ye,html as ne,css as Je}from"lit";import{customElement as Xe,property as xe}from"lit/decorators.js";var _=class extends Ye{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return ne`
|
|
300
300
|
<div class="content-container">
|
|
301
301
|
${this.hasContent?ne`<slot></slot>`:ne`<div class="no-content-message">${this.noContentMessage}</div>`}
|
|
302
302
|
</div>
|
|
303
|
-
`}};
|
|
303
|
+
`}};_.styles=[Je`
|
|
304
304
|
:host {
|
|
305
305
|
overflow: hidden;
|
|
306
306
|
}
|
|
@@ -340,7 +340,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
340
340
|
font-style: italic;
|
|
341
341
|
font-family: "Courier New", monospace;
|
|
342
342
|
}
|
|
343
|
-
`],n([xe({type:String,attribute:"no-content-message"})],
|
|
343
|
+
`],n([xe({type:String,attribute:"no-content-message"})],_.prototype,"noContentMessage",2),n([xe({type:Boolean})],_.prototype,"hasContent",2),_=n([Xe("tab-content")],_);import{LitElement as Ze,html as Qe,css as et}from"lit";import{customElement as tt}from"lit/decorators.js";var B=class extends Ze{render(){return Qe`
|
|
344
344
|
<div class="tab-bar-elements">
|
|
345
345
|
<div class="tab-bar-info">
|
|
346
346
|
<div class="stats-chips">
|
|
@@ -549,7 +549,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
549
549
|
color: #b0c4de;
|
|
550
550
|
font-weight: bold;
|
|
551
551
|
}
|
|
552
|
-
`],n([at()],p.prototype,"isDropdownOpen",2),n([ot({type:Array})],p.prototype,"dropdownOptions",2);var
|
|
552
|
+
`],n([at()],p.prototype,"isDropdownOpen",2),n([ot({type:Array})],p.prototype,"dropdownOptions",2);var L=p;var V=class extends L{constructor(){super(...arguments);this.selectedOptionValue=""}connectedCallback(){super.connectedCallback(),this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}willUpdate(e){e.has("dropdownOptions")&&this.dropdownOptions.length>0&&!this.selectedOptionValue&&(this.selectedOptionValue=this.dropdownOptions[0].value)}_handleOptionClick(e){e.value!==this.selectedOptionValue&&(this.selectedOptionValue=e.value,this.onSelectionChange?.(e.value)),this._closeDropdown()}_getTriggerIcon(){let e=this._getSelectedOption();return e?e.icon:rt``}_isOptionSelected(e){return e.value===this.selectedOptionValue}_getTriggerTitle(){let e=this._getSelectedOption();return e?e.title:"Change selection"}_getTriggerLabel(){let e=this._getSelectedOption();return e?`Current selection: ${e.label}`:"No selection"}_getSelectedOption(){return this.dropdownOptions.find(e=>e.value===this.selectedOptionValue)}};n([Ce({type:String})],V.prototype,"selectedOptionValue",2),n([Ce({type:Function})],V.prototype,"onSelectionChange",2),V=n([st("single-select-dropdown")],V);import{LitElement as wt,html as xt,css as kt}from"lit";import{customElement as Ct,property as X,state as Et}from"lit/decorators.js";import{LitElement as gt,html as Te,css as ht}from"lit";import{customElement as mt,property as G}from"lit/decorators.js";import{LitElement as lt,html as ct,css as dt}from"lit";import{customElement as pt,property as Ee,state as Se}from"lit/decorators.js";var x=class extends lt{constructor(){super(...arguments);this.title="Copy to clipboard";this.isCopied=!1;this.copyTimeout=null}async handleClick(e){if(!this.isCopied){if(this.onCopy)try{await this.onCopy(e)}catch(t){console.error("Error in onCopy function:",t)}this.isCopied=!0,this.copyTimeout&&clearTimeout(this.copyTimeout),this.copyTimeout=setTimeout(()=>{this.isCopied=!1,this.copyTimeout=null},2e3)}}disconnectedCallback(){super.disconnectedCallback(),this.copyTimeout&&(clearTimeout(this.copyTimeout),this.copyTimeout=null)}render(){return ct`
|
|
553
553
|
<button
|
|
554
554
|
class="copy-button ${this.isCopied?"copied":""}"
|
|
555
555
|
title="${this.title}"
|
|
@@ -718,7 +718,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
718
718
|
display: block;
|
|
719
719
|
overflow-x: auto;
|
|
720
720
|
}
|
|
721
|
-
`],n([G()],f.prototype,"borderColor",2),n([G()],f.prototype,"showCopyButton",2),n([G()],f.prototype,"itemId",2),n([G()],f.prototype,"isExpanded",2),n([G()],f.prototype,"onToggle",2),f=n([mt("expandable-item")],f);import{ForesightManager as ut}from"js.foresight";import{LitElement as bt,css as vt,html as J}from"lit";import{customElement as ft,property as yt,state as De}from"lit/decorators.js";var E=class extends bt{constructor(){super(...arguments);this.remainingTime=0;this.isCountdownActive=!1;this.intervalId=null;this.startTime=0;this.handleTimerClick=e=>{e.stopPropagation(),ut.instance.reactivate(this.elementData.element)}}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}
|
|
721
|
+
`],n([G()],f.prototype,"borderColor",2),n([G()],f.prototype,"showCopyButton",2),n([G()],f.prototype,"itemId",2),n([G()],f.prototype,"isExpanded",2),n([G()],f.prototype,"onToggle",2),f=n([mt("expandable-item")],f);import{ForesightManager as ut}from"js.foresight";import{LitElement as bt,css as vt,html as J}from"lit";import{customElement as ft,property as yt,state as De}from"lit/decorators.js";var E=class extends bt{constructor(){super(...arguments);this.remainingTime=0;this.isCountdownActive=!1;this.intervalId=null;this.startTime=0;this.handleTimerClick=e=>{e.stopPropagation(),ut.instance.reactivate(this.elementData.element)}}connectedCallback(){super.connectedCallback(),this.checkAndStartCountdown()}disconnectedCallback(){super.disconnectedCallback(),this.clearCountdown()}willUpdate(e){super.willUpdate(e),e.has("elementData")&&this.checkAndStartCountdown()}checkAndStartCountdown(){let e=this.elementData?.callbackInfo;if(!e){this.clearCountdown();return}let t=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;!e.isCallbackActive&&t&&e.reactivateAfter>0?this.startCountdown():this.clearCountdown()}startCountdown(){this.clearCountdown();let e=this.elementData?.callbackInfo;if(!e)return;if(this.isCountdownActive=!0,e.reactivateAfter===1/0){this.remainingTime=1/0;return}let t=e.reactivateAfter,i=e.lastCallbackCompletedAt||e.lastCallbackInvokedAt;if(!i){this.clearCountdown();return}this.startTime=i;let a=()=>{let s=Date.now()-this.startTime,d=Math.max(0,t-s);this.remainingTime=d,this.requestUpdate(),(d<=0||this.elementData.callbackInfo.isCallbackActive)&&this.clearCountdown()};a(),this.remainingTime>0&&typeof window<"u"&&(this.intervalId=window.setInterval(a,100))}clearCountdown(){this.intervalId!==null&&(clearInterval(this.intervalId),this.intervalId=null),this.isCountdownActive=!1,this.remainingTime=0}formatTime(e){if(e===1/0)return"\u221E";let t=Math.ceil(e/1e3);if(t<60)return`${t}s`;let i=Math.floor(t/60),a=t%60;if(i<60)return a>0?`${i}m ${a}s`:`${i}m`;let s=Math.floor(i/60),d=i%60;return d>0?`${s}h ${d}m`:`${s}h`}render(){return this.isCountdownActive?this.remainingTime===1/0?J`
|
|
722
722
|
<button
|
|
723
723
|
class="reactivate-button"
|
|
724
724
|
@click="${this.handleTimerClick}"
|
|
@@ -897,8 +897,8 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
897
897
|
.element-wrapper.not-visible {
|
|
898
898
|
opacity: 0.5;
|
|
899
899
|
}
|
|
900
|
-
`],n([X({hasChanged:()=>!0})],y.prototype,"elementData",2),n([X()],y.prototype,"isActive",2),n([X()],y.prototype,"isExpanded",2),n([X()],y.prototype,"onToggle",2),n([Et()],y.prototype,"currentDeviceStrategy",2),y=n([Ct("single-element")],y);var b=class extends Tt{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},touch:0,viewport:0,total:0};this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.runningCallbacks=new Set;this.expandedElementIds=new Set;this._abortController=null;this.handleSortChange=e=>{this.sortOrder=e};this.handleElementToggle=e=>{let t=new Set(this.expandedElementIds);t.has(e)?t.delete(e):t.add(e),this.expandedElementIds=t};this.sortByDocumentPosition=(e,t)=>{let i=e.element.compareDocumentPosition(t.element);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:ge},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:he},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:me}]}_generateHitsChipTitle(e){let t=[];t.push(`Total Callback Hits: ${e.total}`),t.push("");let i=e.mouse.trajectory+e.mouse.hover,a=e.scroll.up+e.scroll.down+e.scroll.left+e.scroll.right,s=e.tab.forwards+e.tab.reverse;t.push("Desktop Strategy"),i>0?t.push(` Mouse (${i}): ${e.mouse.trajectory} trajectory, ${e.mouse.hover} hover`):t.push(" Mouse: No hits"),a>0?t.push(` Scroll (${a}): Up ${e.scroll.up}, Down ${e.scroll.down}, Left ${e.scroll.left}, Right ${e.scroll.right}`):t.push(" Scroll: No hits"),s>0?t.push(` Tab (${s}): ${e.tab.forwards} forward, ${e.tab.reverse} reverse`):t.push(" Tab: No hits"),t.push("");let d=e.touch+e.viewport;return t.push("Touch Strategy"),e.touch>0?t.push(` Touch Start: ${e.touch}`):t.push(" Touch Start: No hits"),e.viewport>0?t.push(` Viewport Enter: ${e.viewport}`):t.push(" Viewport Enter: No hits"),d===0&&i+a+s===0&&(t.push(""),t.push("Interact with registered elements to see callback statistics")),t.join(`
|
|
901
|
-
`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),I.instance.addEventListener("elementRegistered",t=>{this.elementListItems.set(t.elementData.element,t.elementData)},{signal:e}),I.instance.addEventListener("elementDataUpdated",t=>{this.elementListItems.get(t.elementData.element)&&(this.
|
|
900
|
+
`],n([X({hasChanged:()=>!0})],y.prototype,"elementData",2),n([X()],y.prototype,"isActive",2),n([X()],y.prototype,"isExpanded",2),n([X()],y.prototype,"onToggle",2),n([Et()],y.prototype,"currentDeviceStrategy",2),y=n([Ct("single-element")],y);var b=class extends Tt{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},touch:0,viewport:0,total:0};this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.runningCallbacks=new Set;this.expandedElementIds=new Set;this._abortController=null;this._pendingElementUpdates=new Map;this._updateDebounceId=null;this._cachedActiveElements=[];this._cachedInactiveElements=[];this._elementsCacheDirty=!0;this.handleSortChange=e=>{this.sortOrder=e,this._elementsCacheDirty=!0};this.handleElementToggle=e=>{let t=new Set(this.expandedElementIds);t.has(e)?t.delete(e):t.add(e),this.expandedElementIds=t};this.sortByDocumentPosition=(e,t)=>{let i=e.element.compareDocumentPosition(t.element);return i&Node.DOCUMENT_POSITION_FOLLOWING?-1:i&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:ge},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:he},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:me}]}_generateHitsChipTitle(e){let t=[];t.push(`Total Callback Hits: ${e.total}`),t.push("");let i=e.mouse.trajectory+e.mouse.hover,a=e.scroll.up+e.scroll.down+e.scroll.left+e.scroll.right,s=e.tab.forwards+e.tab.reverse;t.push("Desktop Strategy"),i>0?t.push(` Mouse (${i}): ${e.mouse.trajectory} trajectory, ${e.mouse.hover} hover`):t.push(" Mouse: No hits"),a>0?t.push(` Scroll (${a}): Up ${e.scroll.up}, Down ${e.scroll.down}, Left ${e.scroll.left}, Right ${e.scroll.right}`):t.push(" Scroll: No hits"),s>0?t.push(` Tab (${s}): ${e.tab.forwards} forward, ${e.tab.reverse} reverse`):t.push(" Tab: No hits"),t.push("");let d=e.touch+e.viewport;return t.push("Touch Strategy"),e.touch>0?t.push(` Touch Start: ${e.touch}`):t.push(" Touch Start: No hits"),e.viewport>0?t.push(` Viewport Enter: ${e.viewport}`):t.push(" Viewport Enter: No hits"),d===0&&i+a+s===0&&(t.push(""),t.push("Interact with registered elements to see callback statistics")),t.join(`
|
|
901
|
+
`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),I.instance.addEventListener("elementRegistered",t=>{this.elementListItems.set(t.elementData.element,t.elementData),this._elementsCacheDirty=!0},{signal:e}),I.instance.addEventListener("elementDataUpdated",t=>{this.elementListItems.get(t.elementData.element)&&(this._pendingElementUpdates.set(t.elementData.element,t.elementData),this._scheduleDebouncedUpdate())},{signal:e}),I.instance.addEventListener("elementReactivated",t=>{this.elementListItems.get(t.elementData.element)&&(this.elementListItems.set(t.elementData.element,t.elementData),this._elementsCacheDirty=!0,this.requestUpdate())},{signal:e}),I.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.runningCallbacks.delete(t.elementData.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),I.instance.addEventListener("callbackInvoked",t=>{this.elementListItems.get(t.elementData.element)&&this.elementListItems.set(t.elementData.element,t.elementData),this.runningCallbacks.add(t.elementData.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e}),I.instance.addEventListener("callbackCompleted",t=>{this.elementListItems.get(t.elementData.element)&&this.elementListItems.set(t.elementData.element,t.elementData),this.handleCallbackCompleted(t.hitType),this.runningCallbacks.delete(t.elementData.element),this._elementsCacheDirty=!0,this.requestUpdate()},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null,this._updateDebounceId!==null&&(clearTimeout(this._updateDebounceId),this._updateDebounceId=null),this._pendingElementUpdates.clear()}_scheduleDebouncedUpdate(){this._updateDebounceId===null&&(this._updateDebounceId=setTimeout(()=>{this._updateDebounceId=null,this._flushPendingUpdates()},16))}_flushPendingUpdates(){if(this._pendingElementUpdates.size!==0){for(let[e,t]of this._pendingElementUpdates)this.elementListItems.set(e,t);this._pendingElementUpdates.clear(),this._elementsCacheDirty=!0,this.requestUpdate()}}updateElementListFromManager(){this.elementListItems=new Map(I.instance.registeredElements),this._elementsCacheDirty=!0}handleCallbackCompleted(e){switch(e.kind){case"mouse":this.hitCount.mouse[e.subType]++;break;case"tab":this.hitCount.tab[e.subType]++;break;case"scroll":this.hitCount.scroll[e.subType]++;break;case"touch":this.hitCount.touch++;break;case"viewport":this.hitCount.viewport++;break;default:}this.hitCount.total++,this.requestUpdate()}getSortedElements(){let e=Array.from(this.elementListItems.values());switch(this.sortOrder){case"insertionOrder":return e;case"documentOrder":return e.sort(this.sortByDocumentPosition);case"visibility":return e.sort((t,i)=>t.isIntersectingWithViewport!==i.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,i));default:return this.sortOrder,e}}_recomputeElementsCache(){if(!this._elementsCacheDirty)return;let e=this.getSortedElements();this._cachedActiveElements=e.filter(t=>t.callbackInfo.isCallbackActive),this._cachedInactiveElements=e.filter(t=>!t.callbackInfo.isCallbackActive),this._elementsCacheDirty=!1}get activeElements(){return this._recomputeElementsCache(),this._cachedActiveElements}get inactiveElements(){return this._recomputeElementsCache(),this._cachedInactiveElements}render(){return W`
|
|
902
902
|
<tab-header>
|
|
903
903
|
<div slot="chips" class="chips-container">
|
|
904
904
|
<chip-element title="${this._generateHitsChipTitle(this.hitCount)}">
|
|
@@ -917,12 +917,12 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
917
917
|
.noContentMessage=${this.noContentMessage}
|
|
918
918
|
.hasContent=${!!this.elementListItems.size}
|
|
919
919
|
>
|
|
920
|
-
${this.
|
|
920
|
+
${this.activeElements.length>0?W`
|
|
921
921
|
<div class="element-section">
|
|
922
922
|
<h3 class="section-header active">
|
|
923
|
-
Active Elements (${this.
|
|
923
|
+
Active Elements (${this.activeElements.length})
|
|
924
924
|
</h3>
|
|
925
|
-
${Me(this.
|
|
925
|
+
${Me(this.activeElements,e=>W`
|
|
926
926
|
<single-element
|
|
927
927
|
.elementData=${e}
|
|
928
928
|
.isActive=${this.runningCallbacks.has(e.element)}
|
|
@@ -933,12 +933,12 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
933
933
|
`)}
|
|
934
934
|
</div>
|
|
935
935
|
`:""}
|
|
936
|
-
${this.
|
|
936
|
+
${this.inactiveElements.length>0?W`
|
|
937
937
|
<div class="element-section">
|
|
938
938
|
<h3 class="section-header inactive">
|
|
939
|
-
Inactive Elements (${this.
|
|
939
|
+
Inactive Elements (${this.inactiveElements.length})
|
|
940
940
|
</h3>
|
|
941
|
-
${Me(this.
|
|
941
|
+
${Me(this.inactiveElements,e=>W`
|
|
942
942
|
<single-element
|
|
943
943
|
.elementData=${e}
|
|
944
944
|
.isActive=${this.runningCallbacks.has(e.element)}
|
|
@@ -983,9 +983,9 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
983
983
|
.section-header.inactive {
|
|
984
984
|
color: #999;
|
|
985
985
|
}
|
|
986
|
-
`,n([
|
|
986
|
+
`,n([$()],b.prototype,"hitCount",2),n([$()],b.prototype,"sortDropdown",2),n([$()],b.prototype,"sortOrder",2),n([$()],b.prototype,"elementListItems",2),n([$()],b.prototype,"noContentMessage",2),n([$()],b.prototype,"runningCallbacks",2),n([$()],b.prototype,"expandedElementIds",2),b=n([Dt("element-tab")],b);import{css as Mt,html as _e,LitElement as _t}from"lit";import{customElement as Lt,property as $t}from"lit/decorators.js";var A=class extends _t{constructor(){super(...arguments);this.activeTab="settings";this.tabs=["settings","elements","logs"]}_handleTabClick(e){this.dispatchEvent(new CustomEvent("tab-change",{detail:{tab:e},bubbles:!0,composed:!0}))}render(){return _e`
|
|
987
987
|
<div class="tab-selector-wrapper">
|
|
988
|
-
${this.tabs.map(e=>
|
|
988
|
+
${this.tabs.map(e=>_e`
|
|
989
989
|
<button
|
|
990
990
|
class="tab-button ${this.activeTab===e?"active":""}"
|
|
991
991
|
@click="${()=>this._handleTabClick(e)}"
|
|
@@ -995,7 +995,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
995
995
|
</button>
|
|
996
996
|
`)}
|
|
997
997
|
</div>
|
|
998
|
-
`}};
|
|
998
|
+
`}};A.styles=Mt`
|
|
999
999
|
.tab-selector-wrapper {
|
|
1000
1000
|
border-bottom: 2px solid #444;
|
|
1001
1001
|
margin-top: 12px;
|
|
@@ -1026,8 +1026,8 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
1026
1026
|
color: #b0c4de;
|
|
1027
1027
|
border-bottom-color: #b0c4de;
|
|
1028
1028
|
}
|
|
1029
|
-
`,n([
|
|
1030
|
-
${o.globalCallbackHits.total} hits`}}function Ie(o,r){try{switch(o.type){case"elementRegistered":return{type:"elementRegistered",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,hitslop:o.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${
|
|
1029
|
+
`,n([$t({type:String})],A.prototype,"activeTab",2),A=n([Lt("tab-selector")],A);import{ForesightManager as K}from"js.foresight";import{LitElement as At,css as Rt,html as Z}from"lit";import{customElement as jt,property as zt,state as R}from"lit/decorators.js";import{map as Ht}from"lit/directives/map.js";function $e(o,r){let e={};o.eventListeners.forEach((i,a)=>{e[a]=i.length});let t=[];return o.registeredElements.forEach((i,a)=>{let{element:s,...d}=i;t.push({...d,elementInfo:`${a.id?`#${a.id}`:""}${a.className?`.${a.className.replace(/\s+/g,".")}`:""}`})}),{type:"managerDataPayload",warning:"this is a lot easier to view in the console",logId:r,globalCallbackHits:o.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:e,managerSettings:o.globalSettings,registeredElements:t,loadedModules:o.loadedModules,summary:`${t.length} elements, ${Object.values(e).flat().length} listeners,
|
|
1030
|
+
${o.globalCallbackHits.total} hits`}}function Ie(o,r){try{switch(o.type){case"elementRegistered":return{type:"elementRegistered",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,hitslop:o.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Le(o.elementData.registerCount)} time`};case"elementReactivated":return{type:"elementReactivated",name:o.elementData.name,id:o.elementData.element.id||"",callbackInfo:o.elementData.callbackInfo,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:r,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${Le(o.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:o.elementData.name,id:o.elementData.element.id||"",meta:o.elementData.meta,callbackInfo:o.elementData.callbackInfo,wasLastRegisteredElement:o.wasLastRegisteredElement,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:o.elementData.name,updatedProps:o.updatedProps||[],callbackInfo:o.elementData.callbackInfo,isIntersecting:o.elementData.isIntersectingWithViewport,meta:o.elementData.meta,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.elementData.name} - ${o.hitType.kind}`};case"callbackCompleted":{let e=It(o.elementData.callbackInfo.lastCallbackRuntime||0);return{type:"callbackCompleted",name:o.elementData.name,hitType:o.hitType,callbackInfo:o.elementData.callbackInfo,meta:o.elementData.meta,wasLastActiveElement:o.wasLastActiveElement,elapsed:e,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,status:o.elementData.callbackInfo.lastCallbackStatus,errorMessage:o.elementData.callbackInfo.lastCallbackErrorMessage,summary:`${o.elementData.name} - ${e}`}}case"mouseTrajectoryUpdate":return{type:"mouseTrajectoryUpdate",currentPoint:o.trajectoryPositions?.currentPoint,predictedPoint:o.trajectoryPositions?.predictedPoint,positionCount:o.trajectoryPositions?.positions?.length||0,mousePredictionEnabled:o.predictionEnabled,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:o.currentPoint,predictedPoint:o.predictedPoint,scrollDirection:o.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:o.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:o.managerData?.globalSettings||{},settingsChanged:o.updatedSettings,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:o.updatedSettings.map(e=>e.setting).join(", ")};case"deviceStrategyChanged":return{type:"deviceStrategyChanged",oldStrategy:o.oldStrategy,newStrategy:o.newStrategy,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:r,summary:`${o.oldStrategy} \u2192 ${o.newStrategy}`};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(o),localizedTimestamp:new Date().toLocaleTimeString(),logId:r,summary:""}}}catch(e){return{type:"serializationError",error:"Failed to serialize event data",localizedTimestamp:new Date().toLocaleTimeString(),errorMessage:e instanceof Error?e.message:String(e),logId:r,summary:""}}}function It(o){return`${(o/1e3).toFixed(4)} s`}function Le(o){let r=["th","st","nd","rd"],e=o%100;return o+(r[(e-20)%10]||r[e]||r[0])}import{html as Oe,css as Ot}from"lit";import{customElement as Pt,property as Pe}from"lit/decorators.js";var O=class extends L{constructor(){super(...arguments);this.selectedValues=[]}_handleOptionClick(e){let t=this.selectedValues.includes(e.value);t?this.selectedValues=this.selectedValues.filter(a=>a!==e.value):this.selectedValues=[...this.selectedValues,e.value];let i=!t;this.onSelectionChange?.(e.value,i)}_getTriggerIcon(){return u}_isOptionSelected(e){return this.selectedValues.includes(e.value)}_getTriggerTitle(){let e=this.selectedValues.length;return e===0?"No items selected":e===1?"1 item selected":`${e} items selected`}_getTriggerLabel(){return`Filter options: ${this.selectedValues.length} selected`}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return Oe`
|
|
1031
1031
|
<div class="dropdown-container">
|
|
1032
1032
|
<button
|
|
1033
1033
|
class="${e}"
|
|
@@ -1067,7 +1067,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
1067
1067
|
`)}
|
|
1068
1068
|
</div>
|
|
1069
1069
|
</div>
|
|
1070
|
-
`}};O.styles=[
|
|
1070
|
+
`}};O.styles=[...L.styles,Ot`
|
|
1071
1071
|
.dropdown-menu button.active::after {
|
|
1072
1072
|
content: "✓";
|
|
1073
1073
|
position: absolute;
|
|
@@ -1083,7 +1083,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
1083
1083
|
color: #b0c4de;
|
|
1084
1084
|
margin-left: 2px;
|
|
1085
1085
|
}
|
|
1086
|
-
`],n([Pe({type:Array})],O.prototype,"selectedValues",2),n([Pe()],O.prototype,"onSelectionChange",2),O=n([Pt("multi-select-dropdown")],O);import{LitElement as Ut,html as Nt,css as
|
|
1086
|
+
`],n([Pe({type:Array})],O.prototype,"selectedValues",2),n([Pe()],O.prototype,"onSelectionChange",2),O=n([Pt("multi-select-dropdown")],O);import{LitElement as Ut,html as Nt,css as Ft}from"lit";import{customElement as Vt,property as oe}from"lit/decorators.js";var S=class extends Ut{constructor(e){super();this.isExpanded=!1;this.log=e}updated(e){if(e.has("log")&&this.log){let t=this.log,i=t.type==="callbackCompleted"&&"status"in t&&t.status==="error",a=i?"#f44336":this.getLogTypeColor(t.type),s=i?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",s)}}serializeLogDataWithoutSummary(e){let{summary:t,...i}=e;return JSON.stringify(i,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementReactivated:"Reactivated",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings",managerDataPayload:"ManagerData",deviceStrategyChanged:"Strategy"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,i=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return Nt`
|
|
1087
1087
|
<expandable-item
|
|
1088
1088
|
.borderColor=${i}
|
|
1089
1089
|
.itemId=${e.logId}
|
|
@@ -1099,7 +1099,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
1099
1099
|
</div>
|
|
1100
1100
|
<div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
|
|
1101
1101
|
</expandable-item>
|
|
1102
|
-
`}};S.styles=[
|
|
1102
|
+
`}};S.styles=[Ft`
|
|
1103
1103
|
:host {
|
|
1104
1104
|
display: block;
|
|
1105
1105
|
/*
|
|
@@ -1163,7 +1163,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
1163
1163
|
* as all styling is now handled by setting CSS variables below.
|
|
1164
1164
|
* This makes the component's styling more self-contained.
|
|
1165
1165
|
*/
|
|
1166
|
-
`],n([oe({attribute:!1})],S.prototype,"log",2),n([oe({type:Boolean})],S.prototype,"isExpanded",2),n([oe()],S.prototype,"onToggle",2),S=n([Vt("single-log")],S);var v=class extends
|
|
1166
|
+
`],n([oe({attribute:!1})],S.prototype,"log",2),n([oe({type:Boolean})],S.prototype,"isExpanded",2),n([oe()],S.prototype,"onToggle",2),S=n([Vt("single-log")],S);var v=class extends At{constructor(){super();this.logs=[];this.expandedLogIds=new Set;this.MAX_LOGS=100;this.logIdCounter=0;this.noContentMessage="No logs available";this._abortController=null;this._eventListeners=new Map;this.handleLogLocationChange=e=>{this.logLocation=e};this.handleFilterChange=(e,t)=>{this.eventsEnabled={...this.eventsEnabled,[e]:t},t?this.addForesightEventListener(e):this.removeForesightEventListener(e)};this.handleLogToggle=e=>{let t=new Set(this.expandedLogIds);t.has(e)?t.delete(e):t.add(e),this.expandedLogIds=t};let{logging:{logLocation:e,...t}}=l.instance.devtoolsSettings;this.eventsEnabled=t,this.logLocation=e,this.logDropdown=[{value:"controlPanel",label:"Control Panel",title:"Log only to the control panel",icon:le},{value:"console",label:"Console",title:"Log only to the console",icon:ce},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:pe},{value:"none",label:"None",title:"Dont log anywhere",icon:de}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:u},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:u},{value:"elementReactivated",label:"Element Reactivated",title:"Show when element gets reactivated after stale time has passed",icon:u},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:u},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:u},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:u},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:u},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:u},{value:"deviceStrategyChanged",label:"Strategy Changed",title:"Show strategy change events",icon:u}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([,e])=>e).map(([e])=>e)}shouldShowPerformanceWarning(){let e=this.logLocation==="console"||this.logLocation==="both",t=this.eventsEnabled.mouseTrajectoryUpdate||this.eventsEnabled.scrollTrajectoryUpdate||this.eventsEnabled.elementDataUpdated;return e&&t}getNoLogsMessage(){return Object.values(this.eventsEnabled).filter(Boolean).length===0?"Logging for all events is turned off":this.logLocation==="console"?"No logs to display. Logging location is set to console - check browser console for events.":this.logLocation==="none"?"No logs to display. Logging location is set to none":"Interact with Foresight to generate events."}clearLogs(){this.logs=[],this.expandedLogIds.clear(),this.noContentMessage="Logs cleared"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController,this.setupDynamicEventListeners()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this.removeAllEventListeners()}setupDynamicEventListeners(){Object.entries(this.eventsEnabled).forEach(([e,t])=>{t&&this.addForesightEventListener(e)})}addForesightEventListener(e){if(this._eventListeners.has(e))return;let t=i=>{this.handleEvent(e,i)};this._eventListeners.set(e,t),K.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(K.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{K.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",elementReactivated:"#ff9800",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b",deviceStrategyChanged:"#9c27b0"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let i=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${i}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addLog(e){this.logs.unshift(e),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}logManagerData(){this.logLocation!=="none"&&((this.logLocation==="console"||this.logLocation==="both")&&console.log(K.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=$e(K.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=Ie(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return Z`
|
|
1167
1167
|
<tab-header>
|
|
1168
1168
|
<div slot="chips" class="chips-container">
|
|
1169
1169
|
<chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
|
|
@@ -1310,7 +1310,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1310
1310
|
.warning-container:hover svg {
|
|
1311
1311
|
stroke: #ffdc3e;
|
|
1312
1312
|
}
|
|
1313
|
-
`],n([R()],v.prototype,"logDropdown",2),n([R()],v.prototype,"filterDropdown",2),n([R()],v.prototype,"logLocation",2),n([R()],v.prototype,"eventsEnabled",2),n([R()],v.prototype,"logs",2),n([R()],v.prototype,"expandedLogIds",2),n([zt()],v.prototype,"noContentMessage",2),v=n([
|
|
1313
|
+
`],n([R()],v.prototype,"logDropdown",2),n([R()],v.prototype,"filterDropdown",2),n([R()],v.prototype,"logLocation",2),n([R()],v.prototype,"eventsEnabled",2),n([R()],v.prototype,"logs",2),n([R()],v.prototype,"expandedLogIds",2),n([zt()],v.prototype,"noContentMessage",2),v=n([jt("log-tab")],v);import{ForesightManager as ee}from"js.foresight";import{css as bn,html as h,LitElement as vn}from"lit";import{customElement as fn,state as T}from"lit/decorators.js";var ae="points";var Ue="tabs";import{LitElement as qt,html as Yt,css as Jt}from"lit";import{customElement as Xt,property as Q}from"lit/decorators.js";import{LitElement as Bt,html as Gt,css as Wt}from"lit";import{customElement as Kt,property as Ne}from"lit/decorators.js";var P=class extends Bt{constructor(){super(...arguments);this.header="";this.description=""}render(){return Gt`<div class="setting-item">
|
|
1314
1314
|
<label>
|
|
1315
1315
|
<span class="setting-header">${this.header}</span>
|
|
1316
1316
|
<span class="setting-description"> ${this.description} </span>
|
|
@@ -1667,7 +1667,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1667
1667
|
border-bottom: 1px solid rgba(176, 196, 222, 0.2);
|
|
1668
1668
|
padding-bottom: 8px;
|
|
1669
1669
|
}
|
|
1670
|
-
`,n([T()],m.prototype,"managerSettings",2),n([T()],m.prototype,"initialSettings",2),n([T()],m.prototype,"devtoolsSettings",2),n([T()],m.prototype,"changedSettings",2),n([T()],m.prototype,"currentCorner",2),n([T()],m.prototype,"touchDeviceStrategyOptions",2),n([T()],m.prototype,"minimumConnectionTypeOptions",2),n([T()],m.prototype,"cornerOptions",2),m=n([fn("settings-tab")],m);var w=class extends yn{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.isTouchDevice=!1;this.isWarningDismissed=!1;this.corner="bottom-right";this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this.localStorageCornerKey="foresight-devtools-control-panel-corner";this._abortController=null;this.activeTab=this.getStoredTab(),this.corner=this.getStoredCorner(),this.isTouchDevice=
|
|
1670
|
+
`,n([T()],m.prototype,"managerSettings",2),n([T()],m.prototype,"initialSettings",2),n([T()],m.prototype,"devtoolsSettings",2),n([T()],m.prototype,"changedSettings",2),n([T()],m.prototype,"currentCorner",2),n([T()],m.prototype,"touchDeviceStrategyOptions",2),n([T()],m.prototype,"minimumConnectionTypeOptions",2),n([T()],m.prototype,"cornerOptions",2),m=n([fn("settings-tab")],m);var w=class extends yn{constructor(){super();this.isMinimized=l.instance.devtoolsSettings.isControlPanelDefaultMinimized;this.isTouchDevice=!1;this.isWarningDismissed=!1;this.corner="bottom-right";this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this.localStorageCornerKey="foresight-devtools-control-panel-corner";this._abortController=null;this.activeTab=this.getStoredTab(),this.corner=this.getStoredCorner(),this.isTouchDevice=Fe.instance.getManagerData.currentDeviceStrategy==="touch"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Fe.instance.addEventListener("deviceStrategyChanged",t=>{this.isTouchDevice=t.newStrategy==="touch",t.newStrategy==="touch"&&(this.isWarningDismissed=!1)},{signal:e}),this.addEventListener("corner-change",(t=>{this.setCorner(t.detail.corner)}),{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}getStoredTab(){try{return localStorage.getItem(this.localStorageSelectedTabKey)||"logs"}catch(e){return console.error(e),"logs"}}getStoredCorner(){try{let e=localStorage.getItem(this.localStorageCornerKey);if(e)return e}catch(e){console.error("ForesightDevtools: Failed to load corner from localStorage:",e)}return"bottom-right"}_handleTabChange(e){this.activeTab=e.detail.tab,this.setStoredTab(this.activeTab)}setStoredTab(e){try{localStorage.setItem(this.localStorageSelectedTabKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save tab preference to localStorage:",t)}}setStoredCorner(e){try{localStorage.setItem(this.localStorageCornerKey,e)}catch(t){console.warn("ForesightDevtools: Failed to save corner to localStorage:",t)}}dismissWarning(){this.isWarningDismissed=!0}setCorner(e){this.corner=e,this.setStoredCorner(this.corner),this.requestUpdate()}handleMinimizeClick(e){e.stopPropagation(),this.isMinimized=!this.isMinimized}getMinimizeSymbol(){return this.isMinimized?"+":"\u2212"}render(){return xn`
|
|
1671
1671
|
<div class="control-wrapper ${this.corner} ${this.isMinimized?"minimized":""}">
|
|
1672
1672
|
<div class="title-wrapper">
|
|
1673
1673
|
<button @click="${this.handleMinimizeClick}" class="minimize-button">
|
|
@@ -1719,7 +1719,9 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1719
1719
|
flex-direction: column;
|
|
1720
1720
|
width: 450px;
|
|
1721
1721
|
height: 450px;
|
|
1722
|
-
transition:
|
|
1722
|
+
transition:
|
|
1723
|
+
width 0.3s ease,
|
|
1724
|
+
height 0.3s ease;
|
|
1723
1725
|
box-sizing: border-box;
|
|
1724
1726
|
border-radius: 8px;
|
|
1725
1727
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
@@ -1842,7 +1844,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1842
1844
|
.dismiss-button:hover {
|
|
1843
1845
|
opacity: 0.7;
|
|
1844
1846
|
}
|
|
1845
|
-
`,n([q()],w.prototype,"activeTab",2),n([q()],w.prototype,"isMinimized",2),n([q()],w.prototype,"isTouchDevice",2),n([q()],w.prototype,"isWarningDismissed",2),n([q()],w.prototype,"corner",2),w=n([kn("control-panel")],w);import{LitElement as Vn,css as
|
|
1847
|
+
`,n([q()],w.prototype,"activeTab",2),n([q()],w.prototype,"isMinimized",2),n([q()],w.prototype,"isTouchDevice",2),n([q()],w.prototype,"isWarningDismissed",2),n([q()],w.prototype,"corner",2),w=n([kn("control-panel")],w);import{LitElement as Vn,css as An,html as Ae}from"lit";import{customElement as Rn,state as jn}from"lit/decorators.js";import{LitElement as Cn,html as En,css as Sn}from"lit";import{customElement as Tn,state as Ve,query as Dn}from"lit/decorators.js";import{ForesightManager as j}from"js.foresight";var D=class extends Cn{constructor(){super(...arguments);this.overlayMap=new Map;this.callbackAnimations=new Map;this._abortController=null}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;j.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementReactivated",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),j.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&t.elementData.callbackInfo.isCallbackActive&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),j.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),j.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData),this.removeElementOverlay(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let i=t;this.updateNameTagVisibility(i.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let i=document.createElement("div");i.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(i);let a={expandedOverlay:t,nameLabel:i};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:i,nameLabel:a}=e,{expandedRect:s}=t.elementBounds,d=s.right-s.left,Y=s.bottom-s.top;i.style.width=`${d}px`,i.style.height=`${Y}px`,i.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${s.left}px, ${s.top-25}px, 0)`):a.style.display="none"}createOrUpdateElementOverlay(e){let t=this.overlayMap.get(e.element);t||(t=this.createElementOverlays(e)),this.updateElementOverlays(t,e)}removeElementOverlay(e){let t=this.overlayMap.get(e.element);t&&(t.expandedOverlay.remove(),t.nameLabel.remove(),this.overlayMap.delete(e.element)),this.clearCallbackAnimationTimeout(e.element)}clearCallbackAnimationTimeout(e){let t=this.callbackAnimations.get(e);t&&(clearTimeout(t.timeoutId),this.callbackAnimations.delete(e))}highlightElementCallback(e,t){let i=this.overlayMap.get(e.element);if(i)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":i.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":i.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":i.expandedOverlay.classList.add("invoked-by-tab");break;case"touch":break;case"viewport":break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(!t)return;let i=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:i})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let i=t.nameLabel;e?i.style.display="block":i.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this.callbackAnimations.forEach(e=>{clearTimeout(e.timeoutId)}),this.callbackAnimations.clear(),this.overlayMap.clear(),this._abortController?.abort(),this._abortController=null}render(){return En` <div id="overlays-container"></div> `}};D.styles=[Sn`
|
|
1846
1848
|
:host {
|
|
1847
1849
|
position: fixed;
|
|
1848
1850
|
top: 0;
|
|
@@ -1858,7 +1860,9 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1858
1860
|
will-change: transform, box-shadow;
|
|
1859
1861
|
border: 1px dashed rgba(100, 116, 139, 0.4);
|
|
1860
1862
|
background-color: rgba(100, 116, 139, 0.05);
|
|
1861
|
-
transition:
|
|
1863
|
+
transition:
|
|
1864
|
+
border-color 0.2s ease,
|
|
1865
|
+
background-color 0.2s ease;
|
|
1862
1866
|
}
|
|
1863
1867
|
|
|
1864
1868
|
.expanded-overlay.invoked-by-scroll {
|
|
@@ -1903,13 +1907,14 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1903
1907
|
color: white;
|
|
1904
1908
|
padding: 4px 8px;
|
|
1905
1909
|
font-size: 11px;
|
|
1906
|
-
font-family:
|
|
1907
|
-
|
|
1910
|
+
font-family:
|
|
1911
|
+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
|
|
1912
|
+
"Apple Color Emoji", "Segoe UI Emoji";
|
|
1908
1913
|
z-index: 10001;
|
|
1909
1914
|
white-space: nowrap;
|
|
1910
1915
|
pointer-events: none;
|
|
1911
1916
|
}
|
|
1912
|
-
`],n([Ve()],D.prototype,"overlayMap",2),n([Ve()],D.prototype,"callbackAnimations",2),n([Dn("#overlays-container")],D.prototype,"containerElement",2),D=n([Tn("element-overlays")],D);import{LitElement as Mn,html as
|
|
1917
|
+
`],n([Ve()],D.prototype,"overlayMap",2),n([Ve()],D.prototype,"callbackAnimations",2),n([Dn("#overlays-container")],D.prototype,"containerElement",2),D=n([Tn("element-overlays")],D);import{LitElement as Mn,html as _n,css as Ln}from"lit";import{customElement as $n,state as se}from"lit/decorators.js";import{styleMap as In}from"lit/directives/style-map.js";import{ForesightManager as z}from"js.foresight";var M=class extends Mn{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=z.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate3d(0px, 0px, 0) rotate(0deg)",width:"0px"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1),this.requestUpdate()};this.handleTrajectoryUpdate=e=>{if(!this._mousePredictionIsEnabled)return;this._isVisible=!0;let{currentPoint:t,predictedPoint:i}=e.trajectoryPositions,a=i.x-t.x,s=i.y-t.y,d=Math.sqrt(a*a+s*s),Y=Math.atan2(s,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${Y}deg)`,width:`${d}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;z.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),z.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),z.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),z.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return _n` <div class="trajectory-line" style=${In(e)}></div> `}};M.styles=[Ln`
|
|
1913
1918
|
:host {
|
|
1914
1919
|
display: block;
|
|
1915
1920
|
}
|
|
@@ -1940,7 +1945,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1940
1945
|
border-bottom: 4px solid transparent;
|
|
1941
1946
|
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
|
|
1942
1947
|
}
|
|
1943
|
-
`],n([se()],M.prototype,"_mousePredictionIsEnabled",2),n([se()],M.prototype,"_isVisible",2),n([se()],M.prototype,"_trajectoryStyles",2),M=n([
|
|
1948
|
+
`],n([se()],M.prototype,"_mousePredictionIsEnabled",2),n([se()],M.prototype,"_isVisible",2),n([se()],M.prototype,"_trajectoryStyles",2),M=n([$n("mouse-trajectory")],M);import{LitElement as On,html as Pn,css as Un}from"lit";import{customElement as Nn,state as te}from"lit/decorators.js";import{styleMap as Fn}from"lit/directives/style-map.js";import{ForesightManager as N}from"js.foresight";var C=class extends On{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=N.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=N.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleTrajectoryReset=e=>{("wasLastActiveElement"in e&&e.wasLastActiveElement||"wasLastRegisteredElement"in e&&e.wasLastRegisteredElement)&&(this._isVisible=!1,this._trajectoryStyles={transform:"translate(0px, 0px) rotate(0deg)"})};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let i=e.updatedSettings.find(a=>a.setting==="scrollMargin");i&&(this._scrollMargin=i.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,this.renderScrollTrajectory()))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,i=t.x-e.x,a=t.y-e.y,s=Math.atan2(a,i)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${s}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;N.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),N.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),N.instance.addEventListener("callbackCompleted",this.handleTrajectoryReset,{signal:e}),N.instance.addEventListener("elementUnregistered",this.handleTrajectoryReset,{signal:e}),N.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",width:`${this._scrollMargin}px`,...this._trajectoryStyles};return Pn` <div class="scroll-trajectory-line" style=${Fn(e)}></div> `}};C.styles=[Un`
|
|
1944
1949
|
:host {
|
|
1945
1950
|
display: block;
|
|
1946
1951
|
}
|
|
@@ -2000,15 +2005,15 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
2000
2005
|
filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
|
|
2001
2006
|
}
|
|
2002
2007
|
}
|
|
2003
|
-
`],n([te()],C.prototype,"_scrollPredictionIsEnabled",2),n([te()],C.prototype,"_scrollMargin",2),n([te()],C.prototype,"_isVisible",2),n([te()],C.prototype,"_trajectoryStyles",2),C=n([Nn("scroll-trajectory")],C);import{ForesightManager as Re}from"js.foresight";var H=class extends Vn{constructor(){super(...arguments);this._abortController=null;this._strategy=Re.instance.getManagerData.currentDeviceStrategy;this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Re.instance.addEventListener("deviceStrategyChanged",this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return
|
|
2008
|
+
`],n([te()],C.prototype,"_scrollPredictionIsEnabled",2),n([te()],C.prototype,"_scrollMargin",2),n([te()],C.prototype,"_isVisible",2),n([te()],C.prototype,"_trajectoryStyles",2),C=n([Nn("scroll-trajectory")],C);import{ForesightManager as Re}from"js.foresight";var H=class extends Vn{constructor(){super(...arguments);this._abortController=null;this._strategy=Re.instance.getManagerData.currentDeviceStrategy;this.handleDeviceStrategyChange=e=>this._strategy=e.newStrategy}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Re.instance.addEventListener("deviceStrategyChanged",this.handleDeviceStrategyChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort()}render(){return Ae`
|
|
2004
2009
|
<div id="overlay-container">
|
|
2005
|
-
${this._strategy==="mouse"?
|
|
2010
|
+
${this._strategy==="mouse"?Ae`
|
|
2006
2011
|
<mouse-trajectory></mouse-trajectory>
|
|
2007
2012
|
<scroll-trajectory></scroll-trajectory>
|
|
2008
2013
|
<element-overlays></element-overlays>
|
|
2009
2014
|
`:""}
|
|
2010
2015
|
</div>
|
|
2011
|
-
`}};H.styles=[
|
|
2016
|
+
`}};H.styles=[An`
|
|
2012
2017
|
:host {
|
|
2013
2018
|
display: block;
|
|
2014
2019
|
}
|
|
@@ -2019,7 +2024,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
2019
2024
|
pointer-events: none;
|
|
2020
2025
|
z-index: 9999;
|
|
2021
2026
|
}
|
|
2022
|
-
`],n([
|
|
2027
|
+
`],n([jn()],H.prototype,"_strategy",2),H=n([Rn("debug-overlay")],H);var l=class extends zn{constructor(){super();this.isInitialized=!1;this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,elementReactivated:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1,deviceStrategyChanged:!0}}}static createAndAppendInstance(){typeof window>"u"||typeof document>"u"||(l._instance=document.createElement("foresight-devtools"),document.body.appendChild(l._instance))}static initialize(e){if(l._instance||l.createAndAppendInstance(),!l._instance)return l._instance;let t=l._instance;return t.isInitialized=!0,t.alterDevtoolsSettings(e),t}static get instance(){return l._instance?l._instance:l.initialize()}disconnectedCallback(){super.disconnectedCallback(),this.cleanup()}shouldUpdateSetting(e,t){return e!==void 0&&e!==t}updateLoggingSetting(e,t){this.shouldUpdateSetting(t,this.devtoolsSettings.logging[e])&&(this.devtoolsSettings.logging[e]=t)}alterDevtoolsSettings(e){e!==void 0&&(this.shouldUpdateSetting(e.showNameTags,this.devtoolsSettings.showNameTags)&&(this.devtoolsSettings.showNameTags=e.showNameTags,this.dispatchEvent(new CustomEvent("showNameTagsChanged",{detail:{showNameTags:e.showNameTags},bubbles:!0}))),this.shouldUpdateSetting(e.showDebugger,this.devtoolsSettings.showDebugger)&&(this.devtoolsSettings.showDebugger=e.showDebugger,this.requestUpdate()),this.shouldUpdateSetting(e.isControlPanelDefaultMinimized,this.devtoolsSettings.isControlPanelDefaultMinimized)&&(this.devtoolsSettings.isControlPanelDefaultMinimized=e.isControlPanelDefaultMinimized),this.shouldUpdateSetting(e.sortElementList,this.devtoolsSettings.sortElementList)&&(this.devtoolsSettings.sortElementList=e.sortElementList),e.logging&&(this.shouldUpdateSetting(e.logging.logLocation,this.devtoolsSettings.logging.logLocation)&&(this.devtoolsSettings.logging.logLocation=e.logging.logLocation),this.updateLoggingSetting("callbackCompleted",e.logging.callbackCompleted),this.updateLoggingSetting("callbackInvoked",e.logging.callbackInvoked),this.updateLoggingSetting("elementDataUpdated",e.logging.elementDataUpdated),this.updateLoggingSetting("elementRegistered",e.logging.elementRegistered),this.updateLoggingSetting("elementUnregistered",e.logging.elementUnregistered),this.updateLoggingSetting("managerSettingsChanged",e.logging.managerSettingsChanged),this.updateLoggingSetting("mouseTrajectoryUpdate",e.logging.mouseTrajectoryUpdate),this.updateLoggingSetting("scrollTrajectoryUpdate",e.logging.scrollTrajectoryUpdate),this.updateLoggingSetting("deviceStrategyChanged",e.logging.deviceStrategyChanged)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?je``:je`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[Hn`
|
|
2023
2028
|
:host {
|
|
2024
2029
|
display: block;
|
|
2025
2030
|
}
|
package/package.json
CHANGED
|
@@ -1,64 +1,65 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "js.foresight-devtools",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "Visual debugging tools for ForesightJS - mouse trajectory prediction and element interaction visualization",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
"
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
"
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
"
|
|
44
|
-
"
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
"
|
|
51
|
-
"
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
"
|
|
56
|
-
"
|
|
57
|
-
"
|
|
58
|
-
"
|
|
59
|
-
"
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"
|
|
63
|
-
|
|
64
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "js.foresight-devtools",
|
|
3
|
+
"version": "1.4.0",
|
|
4
|
+
"description": "Visual debugging tools for ForesightJS - mouse trajectory prediction and element interaction visualization",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"build": "tsup --sourcemap",
|
|
8
|
+
"build:prod": "tsup",
|
|
9
|
+
"dev": "tsup --watch",
|
|
10
|
+
"test": "vitest",
|
|
11
|
+
"test:watch": "vitest --watch",
|
|
12
|
+
"test:run": "vitest run",
|
|
13
|
+
"prettier": "prettier --write .",
|
|
14
|
+
"lint": "eslint . --fix",
|
|
15
|
+
"prepublishOnly": "pnpm lint && pnpm test:run && pnpm build:prod"
|
|
16
|
+
},
|
|
17
|
+
"main": "./dist/index.js",
|
|
18
|
+
"module": "./dist/index.js",
|
|
19
|
+
"types": "./dist/index.d.ts",
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"default": "./dist/index.js"
|
|
24
|
+
}
|
|
25
|
+
},
|
|
26
|
+
"homepage": "https://foresightjs.com/docs/getting_started/development_tools",
|
|
27
|
+
"repository": {
|
|
28
|
+
"type": "git",
|
|
29
|
+
"url": "git+https://github.com/spaansba/ForesightJS/tree/main/packages/devpage"
|
|
30
|
+
},
|
|
31
|
+
"files": [
|
|
32
|
+
"dist",
|
|
33
|
+
"README.md",
|
|
34
|
+
"LICENSE"
|
|
35
|
+
],
|
|
36
|
+
"keywords": [
|
|
37
|
+
"foresight",
|
|
38
|
+
"debugger",
|
|
39
|
+
"mouse-trajectory",
|
|
40
|
+
"visualization",
|
|
41
|
+
"debug-tools",
|
|
42
|
+
"development",
|
|
43
|
+
"foresightjs",
|
|
44
|
+
"devtools"
|
|
45
|
+
],
|
|
46
|
+
"author": "Bart Spaans",
|
|
47
|
+
"license": "MIT",
|
|
48
|
+
"llms": "https://foresightjs.com/llms.txt",
|
|
49
|
+
"llmsFull": "https://foresightjs.com/llms-full.txt",
|
|
50
|
+
"peerDependencies": {
|
|
51
|
+
"js.foresight": "^3.4.0"
|
|
52
|
+
},
|
|
53
|
+
"devDependencies": {
|
|
54
|
+
"@types/node": "^24.10.1",
|
|
55
|
+
"js.foresight": "workspace:*",
|
|
56
|
+
"tslib": "^2.8.1",
|
|
57
|
+
"tsup": "^8.5.1",
|
|
58
|
+
"typescript": "^5.9.3",
|
|
59
|
+
"vitest": "^4.0.9"
|
|
60
|
+
},
|
|
61
|
+
"dependencies": {
|
|
62
|
+
"@thednp/position-observer": "^1.1.0",
|
|
63
|
+
"lit": "^3.3.2"
|
|
64
|
+
}
|
|
65
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Bart Spaans
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|