js.foresight-devtools 1.3.2 → 1.3.4
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/index.d.ts +11 -3
- package/dist/index.js +52 -47
- package/package.json +8 -8
package/dist/index.d.ts
CHANGED
|
@@ -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
|
}
|
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 Ve}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 V=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
|
+
`}};V.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})],V.prototype,"title",2),V=n([Ke("chip-element")],V);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">
|
|
@@ -395,7 +395,7 @@ var ze=Object.defineProperty;var He=Object.getOwnPropertyDescriptor;var n=(o,r,e
|
|
|
395
395
|
z-index: 5;
|
|
396
396
|
min-height: 36px;
|
|
397
397
|
}
|
|
398
|
-
`],B=n([tt("tab-header")],B);import{html as rt}from"lit";import{customElement as st,property as Ce}from"lit/decorators.js";import{LitElement as nt,html as ke,css as it}from"lit";import{property as ot,state as at}from"lit/decorators.js";var p=class p extends nt{constructor(){super(...arguments);this.isDropdownOpen=!1;this.dropdownOptions=[];this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(p.currentlyOpen&&p.currentlyOpen!==this&&p.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,p.currentlyOpen=this,
|
|
398
|
+
`],B=n([tt("tab-header")],B);import{html as rt}from"lit";import{customElement as st,property as Ce}from"lit/decorators.js";import{LitElement as nt,html as ke,css as it}from"lit";import{property as ot,state as at}from"lit/decorators.js";var p=class p extends nt{constructor(){super(...arguments);this.isDropdownOpen=!1;this.dropdownOptions=[];this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(p.currentlyOpen&&p.currentlyOpen!==this&&p.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,p.currentlyOpen=this,this._positionDropdown())};this._handleOutsideClick=e=>{this.isDropdownOpen&&(e.composedPath().includes(this)||this._closeDropdown())}}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this._handleOutsideClick)}disconnectedCallback(){super.disconnectedCallback(),document.removeEventListener("click",this._handleOutsideClick),p.currentlyOpen===this&&(p.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,p.currentlyOpen===this&&(p.currentlyOpen=null)}_positionDropdown(){if(typeof window>"u")return;let e=this.shadowRoot?.querySelector(".trigger-button"),t=this.shadowRoot?.querySelector(".dropdown-menu");if(e&&t){let i=e.getBoundingClientRect(),a=t.offsetHeight||200,s=i.bottom+5,d=window.innerWidth-i.right;window.innerHeight-i.bottom<a&&i.top>a?t.style.top=`${i.top-a-5}px`:t.style.top=`${s}px`,t.style.right=`${d}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ke`
|
|
399
399
|
<div class="dropdown-container">
|
|
400
400
|
<button
|
|
401
401
|
class="${e}"
|
|
@@ -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 A=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})],A.prototype,"selectedOptionValue",2),n([Ce({type:Function})],A.prototype,"onSelectionChange",2),A=n([st("single-select-dropdown")],A);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 F=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
|
+
`}};F.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})],F.prototype,"activeTab",2),F=n([Lt("tab-selector")],F);import{ForesightManager as K}from"js.foresight";import{LitElement as Ft,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,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 Vt}from"lit";import{customElement as At,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=[Vt`
|
|
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([
|
|
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([At("single-log")],S);var v=class extends Ft{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=Ve.instance.getManagerData.currentDeviceStrategy==="touch"}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;Ve.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
|
|
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 An,css as Fn,html as Fe}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 Ae,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([
|
|
1917
|
+
`],n([Ae()],D.prototype,"overlayMap",2),n([Ae()],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 Vn}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=${Vn(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
|
|
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 An{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 Fe`
|
|
2004
2009
|
<div id="overlay-container">
|
|
2005
|
-
${this._strategy==="mouse"?
|
|
2010
|
+
${this._strategy==="mouse"?Fe`
|
|
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=[Fn`
|
|
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,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "js.foresight-devtools",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.4",
|
|
4
4
|
"description": "Visual debugging tools for ForesightJS - mouse trajectory prediction and element interaction visualization",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -37,19 +37,19 @@
|
|
|
37
37
|
"llms": "https://foresightjs.com/llms.txt",
|
|
38
38
|
"llmsFull": "https://foresightjs.com/llms-full.txt",
|
|
39
39
|
"peerDependencies": {
|
|
40
|
-
"js.foresight": "^3.3.
|
|
40
|
+
"js.foresight": "^3.3.5"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@types/node": "^24.
|
|
43
|
+
"@types/node": "^24.10.1",
|
|
44
44
|
"tslib": "^2.8.1",
|
|
45
|
-
"tsup": "^8.5.
|
|
46
|
-
"typescript": "^5.9.
|
|
47
|
-
"vitest": "^
|
|
48
|
-
"js.foresight": "3.3.
|
|
45
|
+
"tsup": "^8.5.1",
|
|
46
|
+
"typescript": "^5.9.3",
|
|
47
|
+
"vitest": "^4.0.9",
|
|
48
|
+
"js.foresight": "3.3.5"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"@thednp/position-observer": "^1.1.0",
|
|
52
|
-
"lit": "^3.3.
|
|
52
|
+
"lit": "^3.3.2"
|
|
53
53
|
},
|
|
54
54
|
"scripts": {
|
|
55
55
|
"build": "tsup --sourcemap",
|