js.foresight-devtools 1.0.4 → 1.0.6
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 +27 -101
- package/dist/index.js +115 -86
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var
|
|
1
|
+
var Pe=Object.defineProperty;var Ue=Object.getOwnPropertyDescriptor;var i=(o,s,e,t)=>{for(var n=t>1?void 0:t?Ue(s,e):s,a=o.length-1,r;a>=0;a--)(r=o[a])&&(n=(t?r(s,e,n):r(n))||n);return t&&n&&Pe(s,e,n),n};import{LitElement as Mi,css as Li,html as Ie}from"lit";import{customElement as Di,state as _i}from"lit/decorators.js";import{LitElement as oi,css as ai,html as si}from"lit";import{customElement as ri,state as q}from"lit/decorators.js";import{classMap as ee}from"lit/directives/class-map.js";import{css as pt,html as xe,LitElement as gt}from"lit";import{customElement as ht,state as y}from"lit/decorators.js";import{map as mt}from"lit/directives/map.js";import{LitElement as Ne,html as Ve,css as Fe}from"lit";import{customElement as je}from"lit/decorators.js";var F=class extends Ne{render(){return Ve`
|
|
2
2
|
<div class="tab-bar-elements">
|
|
3
3
|
<div class="tab-bar-info">
|
|
4
4
|
<div class="stats-chips">
|
|
@@ -9,7 +9,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
9
9
|
<slot name="actions"></slot>
|
|
10
10
|
</div>
|
|
11
11
|
</div>
|
|
12
|
-
`}};
|
|
12
|
+
`}};F.styles=[Fe`
|
|
13
13
|
:host {
|
|
14
14
|
}
|
|
15
15
|
.tab-bar-info {
|
|
@@ -53,11 +53,11 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
53
53
|
z-index: 5;
|
|
54
54
|
min-height: 36px;
|
|
55
55
|
}
|
|
56
|
-
`],
|
|
56
|
+
`],F=i([je("tab-header")],F);import{LitElement as ze,html as X,css as Re}from"lit";import{customElement as Ae,property as ie}from"lit/decorators.js";var M=class extends ze{constructor(){super(...arguments);this.noContentMessage="No content available.";this.hasContent=!0}render(){return X`
|
|
57
57
|
<div class="content-container">
|
|
58
|
-
${this.hasContent?
|
|
58
|
+
${this.hasContent?X`<slot></slot>`:X`<div class="no-content-message">${this.noContentMessage}</div>`}
|
|
59
59
|
</div>
|
|
60
|
-
`}};
|
|
60
|
+
`}};M.styles=[Re`
|
|
61
61
|
:host {
|
|
62
62
|
overflow: hidden;
|
|
63
63
|
}
|
|
@@ -96,7 +96,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
96
96
|
font-style: italic;
|
|
97
97
|
font-family: "Courier New", monospace;
|
|
98
98
|
}
|
|
99
|
-
`],i([ie({type:String,attribute:"no-content-message"})],
|
|
99
|
+
`],i([ie({type:String,attribute:"no-content-message"})],M.prototype,"noContentMessage",2),i([ie({type:Boolean})],M.prototype,"hasContent",2),M=i([Ae("tab-content")],M);import{html as Ke}from"lit";import{customElement as Ye,property as oe}from"lit/decorators.js";import{LitElement as He,html as ne,css as Be}from"lit";import{property as Ge,state as We}from"lit/decorators.js";var d=class d extends He{constructor(){super(...arguments);this.isDropdownOpen=!1;this.dropdownOptions=[];this._toggleDropdown=e=>{e.stopPropagation(),this.isDropdownOpen?this._closeDropdown():(d.currentlyOpen&&d.currentlyOpen!==this&&d.currentlyOpen._closeDropdown(),this.isDropdownOpen=!0,d.currentlyOpen=this,requestAnimationFrame(()=>{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),d.currentlyOpen===this&&(d.currentlyOpen=null)}_closeDropdown(){this.isDropdownOpen=!1,d.currentlyOpen===this&&(d.currentlyOpen=null)}_positionDropdown(){let e=this.shadowRoot?.querySelector(".trigger-button"),t=this.shadowRoot?.querySelector(".dropdown-menu");if(e&&t){let n=e.getBoundingClientRect(),a=t.offsetHeight||200,r=n.bottom+5,T=window.innerWidth-n.right;window.innerHeight-n.bottom<a&&n.top>a?t.style.top=`${n.top-a-5}px`:t.style.top=`${r}px`,t.style.right=`${T}px`}}render(){let e=`trigger-button ${this.isDropdownOpen?"active":""}`,t=`dropdown-menu ${this.isDropdownOpen?"active":""}`;return ne`
|
|
100
100
|
<div class="dropdown-container">
|
|
101
101
|
<button
|
|
102
102
|
class="${e}"
|
|
@@ -122,20 +122,20 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
122
122
|
</button>
|
|
123
123
|
|
|
124
124
|
<div class="${t}" id="dropdown-menu" role="menu">
|
|
125
|
-
${this.dropdownOptions.map(
|
|
125
|
+
${this.dropdownOptions.map(n=>ne`
|
|
126
126
|
<button
|
|
127
|
-
value="${
|
|
128
|
-
title="${
|
|
129
|
-
class="${this._isOptionSelected(
|
|
130
|
-
@click="${()=>this._handleOptionClick(
|
|
127
|
+
value="${n.value}"
|
|
128
|
+
title="${n.title}"
|
|
129
|
+
class="${this._isOptionSelected(n)?"active":""}"
|
|
130
|
+
@click="${()=>this._handleOptionClick(n)}"
|
|
131
131
|
role="menuitem"
|
|
132
132
|
>
|
|
133
|
-
${
|
|
133
|
+
${n.label}
|
|
134
134
|
</button>
|
|
135
135
|
`)}
|
|
136
136
|
</div>
|
|
137
137
|
</div>
|
|
138
|
-
`}};d.currentlyOpen=null,d.styles=[
|
|
138
|
+
`}};d.currentlyOpen=null,d.styles=[Be`
|
|
139
139
|
:host {
|
|
140
140
|
display: inline-block;
|
|
141
141
|
}
|
|
@@ -250,11 +250,11 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
250
250
|
color: #b0c4de;
|
|
251
251
|
font-weight: bold;
|
|
252
252
|
}
|
|
253
|
-
`],i([
|
|
253
|
+
`],i([We()],d.prototype,"isDropdownOpen",2),i([Ge({type:Array})],d.prototype,"dropdownOptions",2);var L=d;var O=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:Ke``}_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)}};i([oe({type:String})],O.prototype,"selectedOptionValue",2),i([oe({type:Function})],O.prototype,"onSelectionChange",2),O=i([Ye("single-select-dropdown")],O);import{LitElement as qe,html as Je,css as Xe}from"lit";import{customElement as Ze,property as Qe}from"lit/decorators.js";var I=class extends qe{constructor(){super(...arguments);this.title=""}render(){return Je`
|
|
254
254
|
<span class="chip" title="${this.title}">
|
|
255
255
|
<slot></slot>
|
|
256
256
|
</span>
|
|
257
|
-
`}}
|
|
257
|
+
`}};I.styles=[Xe`
|
|
258
258
|
:host {
|
|
259
259
|
display: inline-block;
|
|
260
260
|
}
|
|
@@ -274,7 +274,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
274
274
|
line-height: 1.2;
|
|
275
275
|
transition: all 0.2s ease;
|
|
276
276
|
}
|
|
277
|
-
`],i([
|
|
277
|
+
`],i([Qe({type:String})],I.prototype,"title",2),I=i([Ze("chip-element")],I);import{LitElement as rt,html as lt,css as dt}from"lit";import{customElement as ct,property as G}from"lit/decorators.js";import{LitElement as ot,html as ye,css as at}from"lit";import{customElement as st,property as j}from"lit/decorators.js";import{LitElement as et,html as tt,css as it}from"lit";import{customElement as nt,property as ve,state as fe}from"lit/decorators.js";import{html as p}from"lit";var ae=p`
|
|
278
278
|
<svg
|
|
279
279
|
xmlns="http://www.w3.org/2000/svg"
|
|
280
280
|
width="16"
|
|
@@ -291,7 +291,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
291
291
|
<line x1="7" y1="21" x2="17" y2="21"></line>
|
|
292
292
|
<line x1="12" y1="17" x2="12" y2="21"></line>
|
|
293
293
|
</svg>
|
|
294
|
-
`,
|
|
294
|
+
`,se=p`
|
|
295
295
|
<svg
|
|
296
296
|
xmlns="http://www.w3.org/2000/svg"
|
|
297
297
|
width="16"
|
|
@@ -306,7 +306,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
306
306
|
<polyline points="4 17 10 11 4 5"></polyline>
|
|
307
307
|
<line x1="12" y1="19" x2="20" y2="19"></line>
|
|
308
308
|
</svg>
|
|
309
|
-
`,re=
|
|
309
|
+
`,re=p`
|
|
310
310
|
<svg
|
|
311
311
|
xmlns="http://www.w3.org/2000/svg"
|
|
312
312
|
width="16"
|
|
@@ -322,7 +322,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
322
322
|
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
|
|
323
323
|
<line x1="1" y1="1" x2="23" y2="23"></line>
|
|
324
324
|
</svg>
|
|
325
|
-
`,le=
|
|
325
|
+
`,le=p`
|
|
326
326
|
<svg
|
|
327
327
|
xmlns="http://www.w3.org/2000/svg"
|
|
328
328
|
width="16"
|
|
@@ -340,7 +340,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
340
340
|
<circle cx="6" cy="18" r="2" />
|
|
341
341
|
<circle cx="18" cy="18" r="2" />
|
|
342
342
|
</svg>
|
|
343
|
-
`,de=
|
|
343
|
+
`,de=p`
|
|
344
344
|
<svg
|
|
345
345
|
xmlns="http://www.w3.org/2000/svg"
|
|
346
346
|
width="16"
|
|
@@ -355,7 +355,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
355
355
|
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
|
|
356
356
|
<circle cx="12" cy="12" r="3" />
|
|
357
357
|
</svg>
|
|
358
|
-
`,ce=
|
|
358
|
+
`,ce=p`
|
|
359
359
|
<svg
|
|
360
360
|
xmlns="http://www.w3.org/2000/svg"
|
|
361
361
|
width="16"
|
|
@@ -373,7 +373,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
373
373
|
<line x1="16" y1="17" x2="8" y2="17" />
|
|
374
374
|
<line x1="10" y1="9" x2="8" y2="9" />
|
|
375
375
|
</svg>
|
|
376
|
-
`,pe=
|
|
376
|
+
`,pe=p`
|
|
377
377
|
<svg
|
|
378
378
|
xmlns="http://www.w3.org/2000/svg"
|
|
379
379
|
width="16"
|
|
@@ -387,7 +387,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
387
387
|
>
|
|
388
388
|
<path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
|
|
389
389
|
</svg>
|
|
390
|
-
`,m=
|
|
390
|
+
`,m=p`
|
|
391
391
|
<svg
|
|
392
392
|
xmlns="http://www.w3.org/2000/svg"
|
|
393
393
|
width="16"
|
|
@@ -401,7 +401,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
401
401
|
>
|
|
402
402
|
<polygon points="22,3 2,3 10,12.46 10,19 14,21 14,12.46" />
|
|
403
403
|
</svg>
|
|
404
|
-
`,ge=
|
|
404
|
+
`,ge=p`
|
|
405
405
|
<svg
|
|
406
406
|
xmlns="http://www.w3.org/2000/svg"
|
|
407
407
|
width="16"
|
|
@@ -416,7 +416,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
416
416
|
<circle cx="12" cy="12" r="10" />
|
|
417
417
|
<line x1="4.93" y1="4.93" x2="19.07" y2="19.07" />
|
|
418
418
|
</svg>
|
|
419
|
-
`,he=
|
|
419
|
+
`,he=p`
|
|
420
420
|
<svg
|
|
421
421
|
xmlns="http://www.w3.org/2000/svg"
|
|
422
422
|
width="24"
|
|
@@ -431,7 +431,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
431
431
|
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
|
432
432
|
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
|
433
433
|
</svg>
|
|
434
|
-
`,me=
|
|
434
|
+
`,me=p`
|
|
435
435
|
<svg
|
|
436
436
|
xmlns="http://www.w3.org/2000/svg"
|
|
437
437
|
width="24"
|
|
@@ -445,7 +445,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
445
445
|
>
|
|
446
446
|
<polyline points="20 6 9 17 4 12"></polyline>
|
|
447
447
|
</svg>
|
|
448
|
-
`,ue=
|
|
448
|
+
`,ue=p`
|
|
449
449
|
<svg
|
|
450
450
|
xmlns="http://www.w3.org/2000/svg"
|
|
451
451
|
width="16"
|
|
@@ -463,7 +463,28 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
463
463
|
<line x1="12" y1="9" x2="12" y2="13"></line>
|
|
464
464
|
<line x1="12" y1="17" x2="12.01" y2="17"></line>
|
|
465
465
|
</svg>
|
|
466
|
-
|
|
466
|
+
`,be=p`
|
|
467
|
+
<svg
|
|
468
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
469
|
+
width="16"
|
|
470
|
+
height="16"
|
|
471
|
+
viewBox="0 0 24 24"
|
|
472
|
+
fill="none"
|
|
473
|
+
stroke="currentColor"
|
|
474
|
+
stroke-width="2"
|
|
475
|
+
stroke-linecap="round"
|
|
476
|
+
stroke-linejoin="round"
|
|
477
|
+
>
|
|
478
|
+
<circle cx="6" cy="12" r="3"></circle>
|
|
479
|
+
<circle cx="18" cy="12" r="3"></circle>
|
|
480
|
+
<path d="M9 12h6"></path>
|
|
481
|
+
<path d="M15 9l3 3-3 3"></path>
|
|
482
|
+
<circle cx="12" cy="6" r="2"></circle>
|
|
483
|
+
<circle cx="12" cy="18" r="2"></circle>
|
|
484
|
+
<path d="M10 8l2-2 2 2"></path>
|
|
485
|
+
<path d="M14 16l-2 2-2-2"></path>
|
|
486
|
+
</svg>
|
|
487
|
+
`;var v=class extends et{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 tt`
|
|
467
488
|
<button
|
|
468
489
|
class="copy-button ${this.isCopied?"copied":""}"
|
|
469
490
|
title="${this.title}"
|
|
@@ -471,7 +492,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
471
492
|
>
|
|
472
493
|
${this.isCopied?me:he}
|
|
473
494
|
</button>
|
|
474
|
-
`}};v.styles=
|
|
495
|
+
`}};v.styles=it`
|
|
475
496
|
.copy-button {
|
|
476
497
|
background: transparent;
|
|
477
498
|
border: 0px;
|
|
@@ -510,7 +531,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
510
531
|
.copy-button.copied svg {
|
|
511
532
|
stroke: #4caf50;
|
|
512
533
|
}
|
|
513
|
-
`,i([
|
|
534
|
+
`,i([ve({type:String})],v.prototype,"title",2),i([ve({type:Function})],v.prototype,"onCopy",2),i([fe()],v.prototype,"isCopied",2),i([fe()],v.prototype,"copyTimeout",2),v=i([nt("copy-icon")],v);var u=class extends ot{constructor(){super(...arguments);this.borderColor="#555";this.showCopyButton=!1;this.itemId="";this.isExpanded=!1}toggleExpand(){this.onToggle&&this.onToggle(this.itemId)}async handleCopy(e){e.stopPropagation();let t=this.shadowRoot?.querySelector('slot[name="details"]');if(t){let a=t.assignedNodes().map(r=>r.textContent).join("");try{await navigator.clipboard.writeText(a)}catch(r){console.error("Failed to copy text: ",r)}}}render(){return this.style.setProperty("--border-color",this.borderColor),ye`
|
|
514
535
|
<div class="item-entry ${this.isExpanded?"expanded":""}">
|
|
515
536
|
<div class="item-header ${this.isExpanded?"expanded":""}" @click="${this.toggleExpand}">
|
|
516
537
|
<div class="item-content">
|
|
@@ -522,7 +543,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
522
543
|
</svg>
|
|
523
544
|
</span>
|
|
524
545
|
</div>
|
|
525
|
-
${this.isExpanded?
|
|
546
|
+
${this.isExpanded?ye`
|
|
526
547
|
<div class="item-details">
|
|
527
548
|
<copy-icon
|
|
528
549
|
positioned
|
|
@@ -535,7 +556,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
535
556
|
</div>
|
|
536
557
|
`:""}
|
|
537
558
|
</div>
|
|
538
|
-
`}};u.styles=[
|
|
559
|
+
`}};u.styles=[at`
|
|
539
560
|
:host {
|
|
540
561
|
display: block;
|
|
541
562
|
}
|
|
@@ -633,7 +654,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
633
654
|
display: block;
|
|
634
655
|
overflow-x: auto;
|
|
635
656
|
}
|
|
636
|
-
`],i([
|
|
657
|
+
`],i([j()],u.prototype,"borderColor",2),i([j()],u.prototype,"showCopyButton",2),i([j()],u.prototype,"itemId",2),i([j()],u.prototype,"isExpanded",2),i([j()],u.prototype,"onToggle",2),u=i([st("expandable-item")],u);var f=class extends rt{constructor(){super(...arguments);this.isActive=!1;this.isExpanded=!1}getBorderColor(){return this.isActive?"#ffeb3b":this.elementData.isIntersectingWithViewport?"#4caf50":"#666"}getStatusIndicatorClass(){return this.isActive?"prefetching":this.elementData.isIntersectingWithViewport?"visible":"hidden"}formatElementDetails(){let e={tagName:this.elementData.element.tagName.toLowerCase(),isIntersecting:this.elementData.isIntersectingWithViewport,registerCount:this.elementData.registerCount,hitSlop:{top:this.elementData.elementBounds.hitSlop.top,right:this.elementData.elementBounds.hitSlop.right,bottom:this.elementData.elementBounds.hitSlop.bottom,left:this.elementData.elementBounds.hitSlop.left}};return JSON.stringify(e,null,2)}render(){return lt`
|
|
637
658
|
<expandable-item
|
|
638
659
|
.borderColor=${this.getBorderColor()}
|
|
639
660
|
.showCopyButton=${!0}
|
|
@@ -649,7 +670,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
649
670
|
</div>
|
|
650
671
|
<div slot="details">${this.formatElementDetails()}</div>
|
|
651
672
|
</expandable-item>
|
|
652
|
-
`}};f.styles=[
|
|
673
|
+
`}};f.styles=[dt`
|
|
653
674
|
:host {
|
|
654
675
|
display: block;
|
|
655
676
|
}
|
|
@@ -697,8 +718,8 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
697
718
|
color: #fff;
|
|
698
719
|
font-weight: 600;
|
|
699
720
|
}
|
|
700
|
-
`],i([
|
|
701
|
-
`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),this.updateVisibilityCounts(),
|
|
721
|
+
`],i([G()],f.prototype,"elementData",2),i([G()],f.prototype,"isActive",2),i([G()],f.prototype,"isExpanded",2),i([G()],f.prototype,"onToggle",2),f=i([ct("single-element")],f);import{ForesightManager as P}from"js.foresight";var c=class extends gt{constructor(){super();this.hitCount={mouse:{hover:0,trajectory:0},scroll:{down:0,left:0,right:0,up:0},tab:{forwards:0,reverse:0},total:0};this.visibleElementsCount=0;this.totalElementsCount=0;this.elementListItems=new Map;this.noContentMessage="No Elements Registered To The Foresight Manager";this.activeCallbacks=new Set;this.expandedElementIds=new Set;this.elementIdCounter=0;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 n=e.element.compareDocumentPosition(t.element);return n&Node.DOCUMENT_POSITION_FOLLOWING?-1:n&Node.DOCUMENT_POSITION_PRECEDING?1:0};this.sortOrder=l.instance.devtoolsSettings.sortElementList,this.sortDropdown=[{value:"visibility",label:"Visibility",title:"Sort by Visibility",icon:de},{value:"documentOrder",label:"Document Order",title:"Sort by Document Order",icon:ce},{value:"insertionOrder",label:"Insertion Order",title:"Sort by Insertion Order",icon:pe}]}generateElementId(){return(++this.elementIdCounter).toString()}updateVisibilityCounts(){let e=0,t=0;this.elementListItems.forEach(n=>{t++,n.isIntersectingWithViewport&&e++}),this.visibleElementsCount=e,this.totalElementsCount=t,this.dispatchEvent(new CustomEvent("visibility-count-updated",{detail:{visibleCount:e,totalCount:t},bubbles:!0,composed:!0}))}_generateHitsChipTitle(e){let t=[];return t.push(`Total Hits: ${e.total}`),t.push(""),t.push(`Mouse: Trajectory: ${e.mouse.trajectory}, Hover: ${e.mouse.hover}`),t.push(`Scroll: Up: ${e.scroll.up}, Down: ${e.scroll.down}, Left: ${e.scroll.left}, Right: ${e.scroll.right}`),t.push(`Tab: Forwards: ${e.tab.forwards}, Reverse: ${e.tab.reverse}`),t.join(`
|
|
722
|
+
`)}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;this.updateElementListFromManager(),this.updateVisibilityCounts(),P.instance.addEventListener("elementRegistered",t=>{let n={...t.elementData,elementId:this.generateElementId()};this.elementListItems.set(t.elementData.element,n),this.updateVisibilityCounts()},{signal:e}),P.instance.addEventListener("elementDataUpdated",t=>{let n=this.elementListItems.get(t.elementData.element);if(n){let a={...t.elementData,elementId:n.elementId};this.elementListItems.set(t.elementData.element,a),this.updateVisibilityCounts(),this.requestUpdate()}},{signal:e}),P.instance.addEventListener("elementUnregistered",t=>{this.elementListItems.delete(t.elementData.element),this.updateVisibilityCounts(),this.elementListItems.size||(this.noContentMessage="No Elements Registered To The Foresight Manager"),this.requestUpdate(),this.activeCallbacks.delete(t.elementData.element)},{signal:e}),P.instance.addEventListener("callbackInvoked",t=>{this.activeCallbacks.add(t.elementData.element),this.requestUpdate()},{signal:e}),P.instance.addEventListener("callbackCompleted",t=>{this.handleCallbackCompleted(t.hitType),this.activeCallbacks.delete(t.elementData.element)},{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}updateElementListFromManager(){let e=new Map;P.instance.registeredElements.forEach((t,n)=>{e.set(n,{...t,elementId:this.generateElementId()})}),this.elementListItems=e}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;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,n)=>t.isIntersectingWithViewport!==n.isIntersectingWithViewport?t.isIntersectingWithViewport?-1:1:this.sortByDocumentPosition(t,n));default:return this.sortOrder,e}}render(){return xe`
|
|
702
723
|
<tab-header>
|
|
703
724
|
<div slot="chips" class="chips-container">
|
|
704
725
|
<chip-element title="Number of visible registered elements / total registered elements">
|
|
@@ -720,7 +741,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
720
741
|
.noContentMessage=${this.noContentMessage}
|
|
721
742
|
.hasContent=${!!this.elementListItems.size}
|
|
722
743
|
>
|
|
723
|
-
${
|
|
744
|
+
${mt(this.getSortedElements(),e=>xe`
|
|
724
745
|
<single-element
|
|
725
746
|
.elementData=${e}
|
|
726
747
|
.isActive=${this.activeCallbacks.has(e.element)}
|
|
@@ -729,7 +750,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
729
750
|
></single-element>
|
|
730
751
|
`)}
|
|
731
752
|
</tab-content>
|
|
732
|
-
`}};c.styles=
|
|
753
|
+
`}};c.styles=pt`
|
|
733
754
|
:host {
|
|
734
755
|
display: flex;
|
|
735
756
|
flex-direction: column;
|
|
@@ -784,9 +805,9 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
784
805
|
color: #fff;
|
|
785
806
|
font-weight: 600;
|
|
786
807
|
}
|
|
787
|
-
`,i([y()],c.prototype,"hitCount",2),i([y()],c.prototype,"visibleElementsCount",2),i([y()],c.prototype,"totalElementsCount",2),i([y()],c.prototype,"sortDropdown",2),i([y()],c.prototype,"sortOrder",2),i([y()],c.prototype,"elementListItems",2),i([y()],c.prototype,"noContentMessage",2),i([y()],c.prototype,"activeCallbacks",2),i([y()],c.prototype,"expandedElementIds",2),c=i([
|
|
808
|
+
`,i([y()],c.prototype,"hitCount",2),i([y()],c.prototype,"visibleElementsCount",2),i([y()],c.prototype,"totalElementsCount",2),i([y()],c.prototype,"sortDropdown",2),i([y()],c.prototype,"sortOrder",2),i([y()],c.prototype,"elementListItems",2),i([y()],c.prototype,"noContentMessage",2),i([y()],c.prototype,"activeCallbacks",2),i([y()],c.prototype,"expandedElementIds",2),c=i([ht("element-tab")],c);import{css as ut,html as we,LitElement as bt}from"lit";import{customElement as vt,property as ft}from"lit/decorators.js";var U=class extends bt{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 we`
|
|
788
809
|
<div class="tab-selector-wrapper">
|
|
789
|
-
${this.tabs.map(e=>
|
|
810
|
+
${this.tabs.map(e=>we`
|
|
790
811
|
<button
|
|
791
812
|
class="tab-button ${this.activeTab===e?"active":""}"
|
|
792
813
|
@click="${()=>this._handleTabClick(e)}"
|
|
@@ -796,7 +817,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
796
817
|
</button>
|
|
797
818
|
`)}
|
|
798
819
|
</div>
|
|
799
|
-
`}};U.styles=
|
|
820
|
+
`}};U.styles=ut`
|
|
800
821
|
.tab-selector-wrapper {
|
|
801
822
|
border-bottom: 2px solid #444;
|
|
802
823
|
margin-top: 12px;
|
|
@@ -827,7 +848,8 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
827
848
|
color: #b0c4de;
|
|
828
849
|
border-bottom-color: #b0c4de;
|
|
829
850
|
}
|
|
830
|
-
`,i([
|
|
851
|
+
`,i([ft({type:String})],U.prototype,"activeTab",2),U=i([vt("tab-selector")],U);import{ForesightManager as z}from"js.foresight";import{LitElement as Mt,css as Lt,html as W}from"lit";import{customElement as Dt,property as _t,state as N}from"lit/decorators.js";import{map as $t}from"lit/directives/map.js";function Ee(o,s){let e={};o.eventListeners.forEach((n,a)=>{e[a]=n.length});let t=[];return o.registeredElements.forEach((n,a)=>{let{element:r,...T}=n;t.push({...T,elementInfo:`${a.tagName.toLowerCase()}${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:s,globalCallbackHits:o.globalCallbackHits,localizedTimestamp:new Date().toLocaleTimeString(),eventListenerCount:e,managerSettings:o.globalSettings,registeredElements:t,summary:`${t.length} elements, ${Object.values(e).flat().length} listeners,
|
|
852
|
+
${o.globalCallbackHits.total} hits`}}function ke(o,s){try{switch(o.type){case"elementRegistered":return{type:"elementRegistered",name:o.elementData.name,id:o.elementData.element.id||"",registerCount:o.elementData.registerCount,hitslop:o.elementData.elementBounds.hitSlop,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),meta:o.elementData.meta,logId:s,summary:o.elementData.registerCount===1?o.elementData.name:`${o.elementData.name} - ${xt(o.elementData.registerCount)} time`};case"elementUnregistered":return{type:"elementUnregistered",name:o.elementData.name,id:o.elementData.element.id||"",registerCount:o.elementData.registerCount,unregisterReason:o.unregisterReason,wasLastElement:o.wasLastElement,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,summary:`${o.elementData.name} - ${o.unregisterReason}`};case"elementDataUpdated":return{type:"elementDataUpdated",name:o.elementData.name,updatedProps:o.updatedProps||[],isIntersecting:o.elementData.isIntersectingWithViewport,meta:o.elementData.meta,localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:`${o.elementData.name} - ${o.updatedProps.toString()}`};case"callbackInvoked":return{type:"callbackInvoked",name:o.elementData.name,hitType:o.hitType,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,summary:`${o.elementData.name} - ${o.hitType.kind}`};case"callbackCompleted":{let e=yt(o.elapsed);return{type:"callbackCompleted",...o.status==="error"?{status:"error",errorMessage:o.errorMessage}:{status:"success"},name:o.elementData.name,hitType:o.hitType,callbackRunTimeFormatted:e,callbackRunTimeRaw:o.elapsed,meta:o.elementData.meta,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,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:s,summary:""};case"scrollTrajectoryUpdate":return{type:"scrollTrajectoryUpdate",currentPoint:o.currentPoint,predictedPoint:o.predictedPoint,scrollDirection:o.scrollDirection,localizedTimestamp:new Date().toLocaleTimeString(),logId:s,summary:o.scrollDirection};case"managerSettingsChanged":return{type:"managerSettingsChanged",globalSettings:o.managerData?.globalSettings||{},settingsChanged:o.updatedSettings,localizedTimestamp:new Date(o.timestamp).toLocaleTimeString(),logId:s,summary:o.updatedSettings.map(e=>e.setting).join(", ")};default:return{type:"serializationError",error:"Failed to serialize event data",errorMessage:JSON.stringify(o),localizedTimestamp:new Date().toLocaleTimeString(),logId:s,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:s,summary:""}}}function yt(o){return`${(o/1e3).toFixed(4)} s`}function xt(o){let s=["th","st","nd","rd"],e=o%100;return o+(s[(e-20)%10]||s[e]||s[0])}import{html as Ce,css as wt}from"lit";import{customElement as Et,property as Se}from"lit/decorators.js";var D=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 n=!t;this.onSelectionChange?.(e.value,n)}_getTriggerIcon(){return m}_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 Ce`
|
|
831
853
|
<div class="dropdown-container">
|
|
832
854
|
<button
|
|
833
855
|
class="${e}"
|
|
@@ -854,20 +876,20 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
854
876
|
</button>
|
|
855
877
|
|
|
856
878
|
<div class="${t}" id="dropdown-menu" role="menu">
|
|
857
|
-
${this.dropdownOptions.map(
|
|
879
|
+
${this.dropdownOptions.map(n=>Ce`
|
|
858
880
|
<button
|
|
859
|
-
value="${
|
|
860
|
-
title="${
|
|
861
|
-
class="${this._isOptionSelected(
|
|
862
|
-
@click="${()=>this._handleOptionClick(
|
|
881
|
+
value="${n.value}"
|
|
882
|
+
title="${n.title}"
|
|
883
|
+
class="${this._isOptionSelected(n)?"active":""}"
|
|
884
|
+
@click="${()=>this._handleOptionClick(n)}"
|
|
863
885
|
role="menuitem"
|
|
864
886
|
>
|
|
865
|
-
${
|
|
887
|
+
${n.label}
|
|
866
888
|
</button>
|
|
867
889
|
`)}
|
|
868
890
|
</div>
|
|
869
891
|
</div>
|
|
870
|
-
`}};
|
|
892
|
+
`}};D.styles=[...L.styles,wt`
|
|
871
893
|
.dropdown-menu button.active::after {
|
|
872
894
|
content: "✓";
|
|
873
895
|
position: absolute;
|
|
@@ -883,9 +905,9 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
883
905
|
color: #b0c4de;
|
|
884
906
|
margin-left: 2px;
|
|
885
907
|
}
|
|
886
|
-
`],i([
|
|
908
|
+
`],i([Se({type:Array})],D.prototype,"selectedValues",2),i([Se()],D.prototype,"onSelectionChange",2),D=i([Et("multi-select-dropdown")],D);import{LitElement as kt,html as Ct,css as St}from"lit";import{customElement as Tt,property as Z}from"lit/decorators.js";var k=class extends kt{constructor(e){super();this.isExpanded=!1;this.log=e}updated(e){if(e.has("log")&&this.log){let t=this.log,n=t.type==="callbackCompleted"&&"status"in t&&t.status==="error",a=n?"#f44336":this.getLogTypeColor(t.type),r=n?"rgba(244, 67, 54, 0.1)":"transparent";this.style.setProperty("--log-color",a),this.style.setProperty("--log-background-color",r)}}serializeLogDataWithoutSummary(e){let{summary:t,...n}=e;return JSON.stringify(n,null,2)}getLogTypeColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#555"}getEventDisplayName(e){return{elementRegistered:"Registered",elementUnregistered:"Unregistered",elementDataUpdated:"Data Updated",callbackInvoked:"Invoked",callbackCompleted:"Completed",mouseTrajectoryUpdate:"Mouse",scrollTrajectoryUpdate:"Scroll",managerSettingsChanged:"Settings",managerDataPayload:"ManagerData"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,n=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return Ct`
|
|
887
909
|
<expandable-item
|
|
888
|
-
.borderColor=${
|
|
910
|
+
.borderColor=${n}
|
|
889
911
|
.itemId=${e.logId}
|
|
890
912
|
.isExpanded=${this.isExpanded}
|
|
891
913
|
.onToggle=${this.onToggle}
|
|
@@ -899,7 +921,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
899
921
|
</div>
|
|
900
922
|
<div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
|
|
901
923
|
</expandable-item>
|
|
902
|
-
`}};
|
|
924
|
+
`}};k.styles=[St`
|
|
903
925
|
:host {
|
|
904
926
|
display: block;
|
|
905
927
|
/*
|
|
@@ -963,7 +985,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
963
985
|
* as all styling is now handled by setting CSS variables below.
|
|
964
986
|
* This makes the component's styling more self-contained.
|
|
965
987
|
*/
|
|
966
|
-
`],i([
|
|
988
|
+
`],i([Z({attribute:!1})],k.prototype,"log",2),i([Z({type:Boolean})],k.prototype,"isExpanded",2),i([Z()],k.prototype,"onToggle",2),k=i([Tt("single-log")],k);var h=class extends Mt{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:ae},{value:"console",label:"Console",title:"Log only to the console",icon:se},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:le},{value:"none",label:"None",title:"Dont log anywhere",icon:re}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:m},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:m},{value:"elementDataUpdated",label:"Element Data Updated",title:"Show element data update events",icon:m},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:m},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:m},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:m},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:m},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:m}]}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=n=>{this.handleEvent(e,n)};this._eventListeners.set(e,t),z.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(z.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{z.instance.removeEventListener(t,e)}),this._eventListeners.clear()}getEventColor(e){return{elementRegistered:"#2196f3",callbackInvoked:"#00bcd4",callbackCompleted:"#4caf50",elementDataUpdated:"#ffc107",elementUnregistered:"#ff9800",managerSettingsChanged:"#f44336",mouseTrajectoryUpdate:"#78909c",scrollTrajectoryUpdate:"#607d8b"}[e]||"#ffffff"}handleEvent(e,t){if(this.logLocation!=="none"){if(this.logLocation==="console"||this.logLocation==="both"){let n=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${n}; 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(z.instance.getManagerData),(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addManagerLog())}addManagerLog(){let e=Ee(z.instance.getManagerData,(++this.logIdCounter).toString());this.addLog(e)}addEventLog(e){let t=ke(e,(++this.logIdCounter).toString());if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}this.addLog(t)}render(){return W`
|
|
967
989
|
<tab-header>
|
|
968
990
|
<div slot="chips" class="chips-container">
|
|
969
991
|
<chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
|
|
@@ -971,7 +993,7 @@ var $e=Object.defineProperty;var Ie=Object.getOwnPropertyDescriptor;var i=(n,s,e
|
|
|
971
993
|
</chip-element>
|
|
972
994
|
</div>
|
|
973
995
|
<div slot="actions">
|
|
974
|
-
${this.shouldShowPerformanceWarning()?
|
|
996
|
+
${this.shouldShowPerformanceWarning()?W`
|
|
975
997
|
<div
|
|
976
998
|
class="warning-container"
|
|
977
999
|
title="Console logging can be slow with frequent trajectory events.
|
|
@@ -992,7 +1014,14 @@ Consider using 'Control Panel' only for better performance."
|
|
|
992
1014
|
.onSelectionChange="${this.handleFilterChange}"
|
|
993
1015
|
></multi-select-dropdown>
|
|
994
1016
|
<button
|
|
995
|
-
class="
|
|
1017
|
+
class="single-button"
|
|
1018
|
+
title="Log the state from the manager"
|
|
1019
|
+
@click="${this.logManagerData}"
|
|
1020
|
+
>
|
|
1021
|
+
${be}
|
|
1022
|
+
</button>
|
|
1023
|
+
<button
|
|
1024
|
+
class="single-button"
|
|
996
1025
|
title="Clear all logs"
|
|
997
1026
|
?disabled="${this.logs.length===0}"
|
|
998
1027
|
@click="${this.clearLogs}"
|
|
@@ -1002,7 +1031,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1002
1031
|
</div>
|
|
1003
1032
|
</tab-header>
|
|
1004
1033
|
<tab-content .noContentMessage=${this.noContentMessage} .hasContent=${!!this.logs.length}>
|
|
1005
|
-
${this.logs.length===0?
|
|
1034
|
+
${this.logs.length===0?W`<div class="no-items">${this.getNoLogsMessage()}</div>`:$t(this.logs,e=>W`
|
|
1006
1035
|
<single-log
|
|
1007
1036
|
.log=${e}
|
|
1008
1037
|
.isExpanded=${this.expandedLogIds.has(e.logId)}
|
|
@@ -1010,7 +1039,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1010
1039
|
></single-log>
|
|
1011
1040
|
`)}
|
|
1012
1041
|
</tab-content>
|
|
1013
|
-
`}};h.styles=[
|
|
1042
|
+
`}};h.styles=[Lt`
|
|
1014
1043
|
:host {
|
|
1015
1044
|
display: flex;
|
|
1016
1045
|
flex-direction: column;
|
|
@@ -1022,7 +1051,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1022
1051
|
gap: 4px;
|
|
1023
1052
|
}
|
|
1024
1053
|
|
|
1025
|
-
.
|
|
1054
|
+
.single-button {
|
|
1026
1055
|
background: none;
|
|
1027
1056
|
border: none;
|
|
1028
1057
|
color: white;
|
|
@@ -1035,31 +1064,31 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1035
1064
|
vertical-align: top;
|
|
1036
1065
|
}
|
|
1037
1066
|
|
|
1038
|
-
.
|
|
1067
|
+
.single-button svg {
|
|
1039
1068
|
width: 16px;
|
|
1040
1069
|
height: 16px;
|
|
1041
1070
|
stroke: white;
|
|
1042
1071
|
transition: stroke 0.2s;
|
|
1043
1072
|
}
|
|
1044
1073
|
|
|
1045
|
-
.
|
|
1074
|
+
.single-button:hover {
|
|
1046
1075
|
background-color: rgba(176, 196, 222, 0.1);
|
|
1047
1076
|
}
|
|
1048
1077
|
|
|
1049
|
-
.
|
|
1078
|
+
.single-button:hover svg {
|
|
1050
1079
|
stroke: #b0c4de;
|
|
1051
1080
|
}
|
|
1052
1081
|
|
|
1053
|
-
.
|
|
1082
|
+
.single-button:disabled {
|
|
1054
1083
|
opacity: 0.4;
|
|
1055
1084
|
cursor: not-allowed;
|
|
1056
1085
|
}
|
|
1057
1086
|
|
|
1058
|
-
.
|
|
1087
|
+
.single-button:disabled:hover {
|
|
1059
1088
|
background: none;
|
|
1060
1089
|
}
|
|
1061
1090
|
|
|
1062
|
-
.
|
|
1091
|
+
.single-button:disabled svg {
|
|
1063
1092
|
stroke: #666;
|
|
1064
1093
|
}
|
|
1065
1094
|
|
|
@@ -1103,7 +1132,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1103
1132
|
.warning-container:hover svg {
|
|
1104
1133
|
stroke: #ffdc3e;
|
|
1105
1134
|
}
|
|
1106
|
-
`],i([
|
|
1135
|
+
`],i([N()],h.prototype,"logDropdown",2),i([N()],h.prototype,"filterDropdown",2),i([N()],h.prototype,"logLocation",2),i([N()],h.prototype,"eventsEnabled",2),i([N()],h.prototype,"logs",2),i([N()],h.prototype,"expandedLogIds",2),i([_t()],h.prototype,"noContentMessage",2),h=i([Dt("log-tab")],h);import{ForesightManager as _e}from"js.foresight";import{css as ti,html as $e,LitElement as ii}from"lit";import{customElement as ni,state as Y}from"lit/decorators.js";var Q="points",Te="px",Me="tabs",Le="ms";import{LitElement as Nt,html as Vt,css as Ft}from"lit";import{customElement as jt,property as K}from"lit/decorators.js";import{LitElement as Ot,html as It,css as Pt}from"lit";import{customElement as Ut,property as De}from"lit/decorators.js";var _=class extends Ot{constructor(){super(...arguments);this.header="";this.description=""}render(){return It`<div class="setting-item">
|
|
1107
1136
|
<label>
|
|
1108
1137
|
<span class="setting-header">${this.header}</span>
|
|
1109
1138
|
<span class="setting-description"> ${this.description} </span>
|
|
@@ -1111,7 +1140,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1111
1140
|
<div class="setting-controls">
|
|
1112
1141
|
<slot name="controls"></slot>
|
|
1113
1142
|
</div>
|
|
1114
|
-
</div>`}};
|
|
1143
|
+
</div>`}};_.styles=[Pt`
|
|
1115
1144
|
.setting-item {
|
|
1116
1145
|
display: flex;
|
|
1117
1146
|
align-items: center;
|
|
@@ -1151,14 +1180,14 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1151
1180
|
color: #fff;
|
|
1152
1181
|
font-size: 13px;
|
|
1153
1182
|
}
|
|
1154
|
-
`],i([
|
|
1183
|
+
`],i([De({type:String})],_.prototype,"header",2),i([De({type:String})],_.prototype,"description",2),_=i([Ut("setting-item")],_);import{ForesightManager as zt}from"js.foresight";var x=class extends Nt{constructor(){super(...arguments);this.isChecked=!1;this.header="";this.description="";this.setting="enableMousePrediction"}handleCheckboxChange(e){let t=e.target;if(t instanceof HTMLInputElement){let n=t.checked;this.setting==="showNameTags"?this.dispatchEvent(new CustomEvent("setting-changed",{detail:{setting:this.setting,value:n},bubbles:!0})):zt.instance.alterGlobalSettings({[this.setting]:n})}}render(){return Vt`<setting-item header=${this.header} description=${this.description}>
|
|
1155
1184
|
<input
|
|
1156
1185
|
slot="controls"
|
|
1157
1186
|
type="checkbox"
|
|
1158
1187
|
.checked=${this.isChecked}
|
|
1159
1188
|
@change=${this.handleCheckboxChange}
|
|
1160
1189
|
/>
|
|
1161
|
-
</setting-item>`}};x.styles=[
|
|
1190
|
+
</setting-item>`}};x.styles=[Ft`
|
|
1162
1191
|
input[type="checkbox"] {
|
|
1163
1192
|
appearance: none;
|
|
1164
1193
|
-webkit-appearance: none;
|
|
@@ -1201,7 +1230,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1201
1230
|
input[type="checkbox"]:hover {
|
|
1202
1231
|
box-shadow: 0 0 0 3px rgba(176, 196, 222, 0.1);
|
|
1203
1232
|
}
|
|
1204
|
-
`],i([
|
|
1233
|
+
`],i([K({type:Boolean})],x.prototype,"isChecked",2),i([K({type:String})],x.prototype,"header",2),i([K({type:String})],x.prototype,"description",2),i([K({type:String})],x.prototype,"setting",2),x=i([jt("setting-item-checkbox")],x);import{LitElement as Rt,html as At,css as Ht}from"lit";import{customElement as Bt,property as $,state as Gt}from"lit/decorators.js";import{ForesightManager as Wt}from"js.foresight";var g=class extends Rt{constructor(){super(...arguments);this.minValue=0;this.maxValue=100;this.currentValue=50;this.unit="px";this.header="";this.description="";this.setting="tabOffset";this.displayValue=50}handleRangeInput(e){let t=e.target;t instanceof HTMLInputElement&&(this.displayValue=parseInt(t.value,10))}handleRangeChange(e){let t=e.target;if(t instanceof HTMLInputElement){let n=parseInt(t.value,10);this.displayValue=n,Wt.instance.alterGlobalSettings({[this.setting]:n})}}willUpdate(e){super.willUpdate(e),e.has("currentValue")&&(this.displayValue=this.currentValue)}render(){return At`<setting-item header=${this.header} description=${this.description}>
|
|
1205
1234
|
<div slot="controls" class="range-wrapper">
|
|
1206
1235
|
<input
|
|
1207
1236
|
slot="controls"
|
|
@@ -1215,7 +1244,7 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1215
1244
|
/>
|
|
1216
1245
|
<span class="setting-range-value">${this.displayValue} ${this.unit}</span>
|
|
1217
1246
|
</div>
|
|
1218
|
-
</setting-item>`}};
|
|
1247
|
+
</setting-item>`}};g.styles=[Ht`
|
|
1219
1248
|
.setting-range-value {
|
|
1220
1249
|
font-size: 12px;
|
|
1221
1250
|
color: #b0c4de;
|
|
@@ -1284,14 +1313,14 @@ Consider using 'Control Panel' only for better performance."
|
|
|
1284
1313
|
transform: scale(1.1);
|
|
1285
1314
|
box-shadow: 0 0 0 4px rgba(176, 196, 222, 0.2);
|
|
1286
1315
|
}
|
|
1287
|
-
`],i([
|
|
1316
|
+
`],i([$({type:Number})],g.prototype,"minValue",2),i([$({type:Number})],g.prototype,"maxValue",2),i([$({type:Number})],g.prototype,"currentValue",2),i([$({type:String})],g.prototype,"unit",2),i([$({type:String})],g.prototype,"header",2),i([$({type:String})],g.prototype,"description",2),i([$({type:String})],g.prototype,"setting",2),i([Gt()],g.prototype,"displayValue",2),g=i([Bt("setting-item-range")],g);var w=class extends ii{constructor(){super();this.changedSettings=[];this._abortController=null;let e=l.instance.devtoolsSettings,t=_e.instance.getManagerData.globalSettings;this.devtoolsSettings=Object.assign({},e),this.managerSettings=Object.assign({},t),this.initialSettings={devtools:Object.assign({},e),manager:Object.assign({},t)}}connectedCallback(){super.connectedCallback(),this._abortController=new AbortController;let{signal:e}=this._abortController;_e.instance.addEventListener("managerSettingsChanged",t=>{this.managerSettings=t.managerData.globalSettings,this._updateChangedSettings()},{signal:e}),this._updateChangedSettings()}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}_updateChangedSettings(){let e=[];this._checkManagerSettingsChanges(e),this._checkDevtoolsSettingsChanges(e),this.changedSettings=e}_checkManagerSettingsChanges(e){let t=["enableMousePrediction","enableTabPrediction","enableScrollPrediction","trajectoryPredictionTime","positionHistorySize","tabOffset","scrollMargin"];for(let n of t){let a=this.initialSettings.manager[n],r=this.managerSettings[n];a!==r&&e.push({setting:n,oldValue:a,newValue:r})}}_checkDevtoolsSettingsChanges(e){let t=["showNameTags"];for(let n of t){let a=this.initialSettings.devtools[n],r=this.devtoolsSettings[n];a!==r&&e.push({setting:n,oldValue:a,newValue:r})}}_handleDevtoolsSettingChange(e){let{setting:t,value:n}=e.detail;t==="showNameTags"&&(this.devtoolsSettings={...this.devtoolsSettings,showNameTags:n},l.instance.alterDevtoolsSettings({showNameTags:n}),this._updateChangedSettings())}async handleCopySettings(){if(this.managerSettings)try{let e=this.generateSettingsCode(this.managerSettings);navigator.clipboard&&navigator.clipboard.writeText&&await navigator.clipboard.writeText(e)}catch(e){console.error("Failed to copy settings code:",e)}}generateSettingsCode(e){let t={enableMousePrediction:e.enableMousePrediction,enableTabPrediction:e.enableTabPrediction,enableScrollPrediction:e.enableScrollPrediction,positionHistorySize:e.positionHistorySize,trajectoryPredictionTime:e.trajectoryPredictionTime,tabOffset:e.tabOffset,scrollMargin:e.scrollMargin};return`ForesightManager.initialize(${JSON.stringify(t,null,2)})`}render(){if(!this.managerSettings||!this.devtoolsSettings)return $e`<tab-content
|
|
1288
1317
|
.noContentMessage=${"Loading settings..."}
|
|
1289
1318
|
.hasContent=${!1}
|
|
1290
1319
|
></tab-content>`;let e=this.managerSettings,t=this.changedSettings.length>0?`Settings that have been changed this session compared to your initialized settings.
|
|
1291
1320
|
Click on the copy icon to easely copy the new setting into your project
|
|
1292
1321
|
|
|
1293
|
-
`+this.changedSettings.map(
|
|
1294
|
-
`):"No settings changed from initial values";return
|
|
1322
|
+
`+this.changedSettings.map(n=>`${n.setting}: ${JSON.stringify(n.oldValue)} -> ${JSON.stringify(n.newValue)}`).join(`
|
|
1323
|
+
`):"No settings changed from initial values";return $e`
|
|
1295
1324
|
<tab-header>
|
|
1296
1325
|
<div slot="chips" class="chips-container">
|
|
1297
1326
|
<chip-element .title=${t}> ${this.changedSettings.length} changed </chip-element>
|
|
@@ -1319,7 +1348,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1319
1348
|
.currentValue=${e.trajectoryPredictionTime}
|
|
1320
1349
|
.maxValue=${200}
|
|
1321
1350
|
.minValue=${10}
|
|
1322
|
-
.unit=${
|
|
1351
|
+
.unit=${Le}
|
|
1323
1352
|
header="Prediction Time"
|
|
1324
1353
|
description="How far into the future to calculate mouse trajectory path"
|
|
1325
1354
|
setting="trajectoryPredictionTime"
|
|
@@ -1348,7 +1377,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1348
1377
|
.currentValue=${e.tabOffset}
|
|
1349
1378
|
.maxValue=${20}
|
|
1350
1379
|
.minValue=${0}
|
|
1351
|
-
.unit=${
|
|
1380
|
+
.unit=${Me}
|
|
1352
1381
|
header="Tab Offset"
|
|
1353
1382
|
description="Number of tabbable elements to look ahead when predicting navigation"
|
|
1354
1383
|
setting="tabOffset"
|
|
@@ -1368,7 +1397,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1368
1397
|
.currentValue=${e.scrollMargin}
|
|
1369
1398
|
.maxValue=${300}
|
|
1370
1399
|
.minValue=${30}
|
|
1371
|
-
.unit=${
|
|
1400
|
+
.unit=${Te}
|
|
1372
1401
|
header="Scroll Margin"
|
|
1373
1402
|
description="Pixel distance to check from mouse position in scroll direction"
|
|
1374
1403
|
setting="scrollMargin"
|
|
@@ -1389,7 +1418,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1389
1418
|
</div>
|
|
1390
1419
|
</div>
|
|
1391
1420
|
</tab-content>
|
|
1392
|
-
`}};w.styles=
|
|
1421
|
+
`}};w.styles=ti`
|
|
1393
1422
|
:host {
|
|
1394
1423
|
display: flex;
|
|
1395
1424
|
flex-direction: column;
|
|
@@ -1420,7 +1449,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1420
1449
|
border-bottom: 1px solid rgba(176, 196, 222, 0.2);
|
|
1421
1450
|
padding-bottom: 8px;
|
|
1422
1451
|
}
|
|
1423
|
-
`,i([Y()],w.prototype,"managerSettings",2),i([Y()],w.prototype,"initialSettings",2),i([Y()],w.prototype,"devtoolsSettings",2),i([Y()],w.prototype,"changedSettings",2),w=i([
|
|
1452
|
+
`,i([Y()],w.prototype,"managerSettings",2),i([Y()],w.prototype,"initialSettings",2),i([Y()],w.prototype,"devtoolsSettings",2),i([Y()],w.prototype,"changedSettings",2),w=i([ni("settings-tab")],w);var b=class extends oi{constructor(){super();this.isMinimized=!1;this.visibleCount=0;this.totalCount=0;this.localStorageSelectedTabKey="foresight-devtools-control-panel-tab";this._handleVisibilityCountChange=e=>{let t=e;this.visibleCount=t.detail.visibleCount,this.totalCount=t.detail.totalCount};let e=localStorage.getItem(this.localStorageSelectedTabKey);this.activeTab=e||"logs"}_handleTabChange(e){this.activeTab=e.detail.tab,localStorage.setItem(this.localStorageSelectedTabKey,this.activeTab)}connectedCallback(){super.connectedCallback(),this.addEventListener("visibility-count-updated",this._handleVisibilityCountChange)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("visibility-count-updated",this._handleVisibilityCountChange)}render(){return si`
|
|
1424
1453
|
<div class="control-wrapper ${this.isMinimized?"minimized":""}">
|
|
1425
1454
|
<div class="title-wrapper">
|
|
1426
1455
|
<button @click="${()=>this.isMinimized=!this.isMinimized}" class="minimize-button">
|
|
@@ -1449,7 +1478,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1449
1478
|
</div>
|
|
1450
1479
|
</div>
|
|
1451
1480
|
</div>
|
|
1452
|
-
`}};b.styles=
|
|
1481
|
+
`}};b.styles=ai`
|
|
1453
1482
|
.control-wrapper {
|
|
1454
1483
|
padding: 12px;
|
|
1455
1484
|
position: fixed;
|
|
@@ -1531,7 +1560,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1531
1560
|
width: 100%;
|
|
1532
1561
|
height: 100%;
|
|
1533
1562
|
}
|
|
1534
|
-
`,i([
|
|
1563
|
+
`,i([q()],b.prototype,"activeTab",2),i([q()],b.prototype,"isMinimized",2),i([q()],b.prototype,"visibleCount",2),i([q()],b.prototype,"totalCount",2),b=i([ri("control-panel")],b);customElements.get("control-panel")||customElements.define("control-panel",b);import{LitElement as ki,css as Ci,html as Si}from"lit";import{customElement as Ti}from"lit/decorators.js";import{LitElement as li,html as di,css as ci}from"lit";import{customElement as pi,state as Oe,query as gi}from"lit/decorators.js";import{ForesightManager as R}from"js.foresight";var C=class extends li{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;R.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),R.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),R.instance.addEventListener("elementDataUpdated",t=>{t.updatedProps.includes("bounds")&&this.createOrUpdateElementOverlay(t.elementData),t.updatedProps.includes("visibility")&&(t.elementData.isIntersectingWithViewport||this.removeElementOverlay(t.elementData))},{signal:e}),R.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),R.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let n=t;this.updateNameTagVisibility(n.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let n=document.createElement("div");n.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(n);let a={expandedOverlay:t,nameLabel:n};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:n,nameLabel:a}=e,{expandedRect:r}=t.elementBounds,T=r.right-r.left,B=r.bottom-r.top;n.style.width=`${T}px`,n.style.height=`${B}px`,n.style.transform=`translate3d(${r.left}px, ${r.top}px, 0)`,l.instance.devtoolsSettings.showNameTags?(a.textContent=t.name,a.style.display="block",a.style.transform=`translate3d(${r.left}px, ${r.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 n=this.overlayMap.get(e.element);if(n)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":n.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":n.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":n.expandedOverlay.classList.add("invoked-by-tab");break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(!t)return;let n=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:n})}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let n=t.nameLabel;e?n.style.display="block":n.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 di` <div id="overlays-container"></div> `}};C.styles=[ci`
|
|
1535
1564
|
:host {
|
|
1536
1565
|
position: fixed;
|
|
1537
1566
|
top: 0;
|
|
@@ -1598,7 +1627,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1598
1627
|
white-space: nowrap;
|
|
1599
1628
|
pointer-events: none;
|
|
1600
1629
|
}
|
|
1601
|
-
`],i([
|
|
1630
|
+
`],i([Oe()],C.prototype,"overlayMap",2),i([Oe()],C.prototype,"callbackAnimations",2),i([gi("#overlays-container")],C.prototype,"containerElement",2),C=i([pi("element-overlays")],C);import{LitElement as hi,html as mi,css as ui}from"lit";import{customElement as bi,state as te}from"lit/decorators.js";import{styleMap as vi}from"lit/directives/style-map.js";import{ForesightManager as A}from"js.foresight";var S=class extends hi{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=A.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this.handleElementUnregistered=e=>{e.wasLastElement&&(this._isVisible=!1)};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:n}=e.trajectoryPositions,a=n.x-t.x,r=n.y-t.y,T=Math.sqrt(a*a+r*r),B=Math.atan2(r,a)*57.29577951308232;this._trajectoryStyles={transform:`translate3d(${t.x}px, ${t.y}px, 0) rotate(${B}deg)`,width:`${T}px`}}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;A.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),A.instance.addEventListener("elementUnregistered",this.handleElementUnregistered,{signal:e}),A.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),A.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return mi` <div class="trajectory-line" style=${vi(e)}></div> `}};S.styles=[ui`
|
|
1602
1631
|
:host {
|
|
1603
1632
|
display: block;
|
|
1604
1633
|
}
|
|
@@ -1629,7 +1658,7 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1629
1658
|
border-bottom: 4px solid transparent;
|
|
1630
1659
|
filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.6));
|
|
1631
1660
|
}
|
|
1632
|
-
`],i([te()],S.prototype,"_mousePredictionIsEnabled",2),i([te()],S.prototype,"_isVisible",2),i([te()],S.prototype,"_trajectoryStyles",2),S=i([
|
|
1661
|
+
`],i([te()],S.prototype,"_mousePredictionIsEnabled",2),i([te()],S.prototype,"_isVisible",2),i([te()],S.prototype,"_trajectoryStyles",2),S=i([bi("mouse-trajectory")],S);import{LitElement as fi,html as yi,css as xi}from"lit";import{customElement as wi,state as J}from"lit/decorators.js";import{styleMap as Ei}from"lit/directives/style-map.js";import{ForesightManager as V}from"js.foresight";var E=class extends fi{constructor(){super(...arguments);this._abortController=new AbortController;this._scrollPredictionIsEnabled=V.instance.getManagerData.globalSettings.enableScrollPrediction;this._scrollMargin=V.instance.getManagerData.globalSettings.scrollMargin;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestScrollTrajectory=null;this.handleElementUnregistered=e=>{e.wasLastElement&&(this._isVisible=!1)};this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableScrollPrediction;this._scrollPredictionIsEnabled=t,t||(this._isVisible=!1);let n=e.updatedSettings.find(a=>a.setting==="scrollMargin");n&&(this._scrollMargin=n.newValue)};this.handleScrollUpdate=e=>{this._scrollPredictionIsEnabled&&(this._isVisible=!0,this._latestScrollTrajectory={currentPoint:e.currentPoint,predictedPoint:e.predictedPoint},this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderScrollTrajectory)))};this.renderScrollTrajectory=()=>{if(!this._latestScrollTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestScrollTrajectory,n=t.x-e.x,a=t.y-e.y,r=Math.atan2(a,n)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${r}deg)`},this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;V.instance.addEventListener("scrollTrajectoryUpdate",this.handleScrollUpdate,{signal:e}),V.instance.addEventListener("mouseTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),V.instance.addEventListener("elementUnregistered",this.handleElementUnregistered,{signal:e}),V.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 yi` <div class="scroll-trajectory-line" style=${Ei(e)}></div> `}};E.styles=[xi`
|
|
1633
1662
|
:host {
|
|
1634
1663
|
display: block;
|
|
1635
1664
|
}
|
|
@@ -1689,13 +1718,13 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1689
1718
|
filter: drop-shadow(0 0 12px rgba(234, 179, 8, 0.8));
|
|
1690
1719
|
}
|
|
1691
1720
|
}
|
|
1692
|
-
`],i([
|
|
1721
|
+
`],i([J()],E.prototype,"_scrollPredictionIsEnabled",2),i([J()],E.prototype,"_scrollMargin",2),i([J()],E.prototype,"_isVisible",2),i([J()],E.prototype,"_trajectoryStyles",2),E=i([wi("scroll-trajectory")],E);var H=class extends ki{render(){return Si`
|
|
1693
1722
|
<div id="overlay-container">
|
|
1694
1723
|
<mouse-trajectory></mouse-trajectory>
|
|
1695
1724
|
<scroll-trajectory></scroll-trajectory>
|
|
1696
1725
|
<element-overlays></element-overlays>
|
|
1697
1726
|
</div>
|
|
1698
|
-
`}};
|
|
1727
|
+
`}};H.styles=[Ci`
|
|
1699
1728
|
:host {
|
|
1700
1729
|
display: block;
|
|
1701
1730
|
}
|
|
@@ -1706,9 +1735,9 @@ Click on the copy icon to easely copy the new setting into your project
|
|
|
1706
1735
|
pointer-events: none;
|
|
1707
1736
|
z-index: 9999;
|
|
1708
1737
|
}
|
|
1709
|
-
`],
|
|
1738
|
+
`],H=i([Ti("debug-overlay")],H);var l=class extends Mi{constructor(){super();this.isInitialized=!1;this.devtoolsSettings={showDebugger:!0,isControlPanelDefaultMinimized:!1,showNameTags:!0,sortElementList:"visibility",logging:{logLocation:"controlPanel",callbackCompleted:!0,callbackInvoked:!0,elementDataUpdated:!1,elementRegistered:!1,elementUnregistered:!1,managerSettingsChanged:!0,mouseTrajectoryUpdate:!1,scrollTrajectoryUpdate:!1}}}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,e!==void 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&&(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)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?Ie``:Ie`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[Li`
|
|
1710
1739
|
:host {
|
|
1711
1740
|
display: block;
|
|
1712
1741
|
}
|
|
1713
|
-
`],l._instance=null,i([
|
|
1742
|
+
`],l._instance=null,i([_i()],l.prototype,"isInitialized",2),l=i([Di("foresight-devtools")],l);export{l as ForesightDevtools};
|
|
1714
1743
|
//# sourceMappingURL=index.js.map
|