js.foresight-devtools 1.0.0 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.mts CHANGED
@@ -568,6 +568,8 @@ declare class ForesightDevtools extends LitElement {
568
568
  private isInitialized;
569
569
  private static _instance;
570
570
  devtoolsSettings: Required<DevtoolsSettings>;
571
+ private constructor();
572
+ private static createAndAppendInstance;
571
573
  static initialize(props?: DeepPartial<DevtoolsSettings>): ForesightDevtools;
572
574
  static get instance(): ForesightDevtools;
573
575
  disconnectedCallback(): void;
package/dist/index.d.ts CHANGED
@@ -568,6 +568,8 @@ declare class ForesightDevtools extends LitElement {
568
568
  private isInitialized;
569
569
  private static _instance;
570
570
  devtoolsSettings: Required<DevtoolsSettings>;
571
+ private constructor();
572
+ private static createAndAppendInstance;
571
573
  static initialize(props?: DeepPartial<DevtoolsSettings>): ForesightDevtools;
572
574
  static get instance(): ForesightDevtools;
573
575
  disconnectedCallback(): void;
package/dist/index.js CHANGED
@@ -1,4 +1,4 @@
1
- "use strict";var Ce=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var at=Object.prototype.hasOwnProperty;var rt=(n,s)=>{for(var e in s)Ce(n,e,{get:s[e],enumerable:!0})},lt=(n,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of st(s))!at.call(n,o)&&o!==e&&Ce(n,o,{get:()=>s[o],enumerable:!(t=Pe(s,o))||t.enumerable});return n};var dt=n=>lt(Ce({},"__esModule",{value:!0}),n),i=(n,s,e,t)=>{for(var o=t>1?void 0:t?Pe(s,e):s,a=n.length-1,r;a>=0;a--)(r=n[a])&&(o=(t?r(s,e,o):r(o))||o);return t&&o&&Ce(s,e,o),o};var xt={};rt(xt,{ForesightDevtools:()=>l});module.exports=dt(xt);var q=require("lit"),Le=require("lit/decorators.js");var re=require("lit"),G=require("lit/decorators.js"),De=require("lit/directives/class-map.js");var F=require("lit"),h=require("lit/decorators.js"),qe=require("lit/directives/map.js");var K=require("lit"),Ue=require("lit/decorators.js");var be=class extends K.LitElement{render(){return K.html`
1
+ "use strict";var Ce=Object.defineProperty;var Pe=Object.getOwnPropertyDescriptor;var st=Object.getOwnPropertyNames;var at=Object.prototype.hasOwnProperty;var rt=(n,s)=>{for(var e in s)Ce(n,e,{get:s[e],enumerable:!0})},lt=(n,s,e,t)=>{if(s&&typeof s=="object"||typeof s=="function")for(let o of st(s))!at.call(n,o)&&o!==e&&Ce(n,o,{get:()=>s[o],enumerable:!(t=Pe(s,o))||t.enumerable});return n};var dt=n=>lt(Ce({},"__esModule",{value:!0}),n),i=(n,s,e,t)=>{for(var o=t>1?void 0:t?Pe(s,e):s,a=n.length-1,r;a>=0;a--)(r=n[a])&&(o=(t?r(s,e,o):r(o))||o);return t&&o&&Ce(s,e,o),o};var xt={};rt(xt,{ForesightDevtools:()=>l});module.exports=dt(xt);var q=require("lit"),De=require("lit/decorators.js");var re=require("lit"),G=require("lit/decorators.js"),Le=require("lit/directives/class-map.js");var F=require("lit"),h=require("lit/decorators.js"),qe=require("lit/directives/map.js");var K=require("lit"),Ue=require("lit/decorators.js");var be=class extends K.LitElement{render(){return K.html`
2
2
  <div class="tab-bar-elements">
3
3
  <div class="tab-bar-info">
4
4
  <div class="stats-chips">
@@ -877,7 +877,7 @@
877
877
  color: #b0c4de;
878
878
  margin-left: 2px;
879
879
  }
880
- `],i([(0,xe.property)({type:Array})],z.prototype,"selectedValues",2),i([(0,xe.property)()],z.prototype,"onSelectionChange",2),z=i([(0,xe.customElement)("multi-select-dropdown")],z);var oe=require("lit"),ie=require("lit/decorators.js");var D=class extends oe.LitElement{constructor(e){super();this.isExpanded=!1;this.log=e}serializeLogDataWithoutSummary(e){let{summary:t,...o}=e;return JSON.stringify(o,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"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,t=`log-${e.type}`;e.type==="callbackCompleted"&&"status"in e&&e.status==="error"&&(t+=" error-status"),this.className=t;let o=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return oe.html`
880
+ `],i([(0,xe.property)({type:Array})],z.prototype,"selectedValues",2),i([(0,xe.property)()],z.prototype,"onSelectionChange",2),z=i([(0,xe.customElement)("multi-select-dropdown")],z);var oe=require("lit"),ie=require("lit/decorators.js");var L=class extends oe.LitElement{constructor(e){super();this.isExpanded=!1;this.log=e}serializeLogDataWithoutSummary(e){let{summary:t,...o}=e;return JSON.stringify(o,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"}[e]||e}truncateLogSummary(e,t=50){return e.length<=t?e:e.substring(0,t)+"..."}render(){let e=this.log,t=`log-${e.type}`;e.type==="callbackCompleted"&&"status"in e&&e.status==="error"&&(t+=" error-status"),this.className=t;let o=e.type==="callbackCompleted"&&"status"in e&&e.status==="error"?"#f44336":this.getLogTypeColor(e.type);return oe.html`
881
881
  <expandable-item
882
882
  .borderColor=${o}
883
883
  .itemId=${e.logId}
@@ -893,7 +893,7 @@
893
893
  </div>
894
894
  <div slot="details">${this.serializeLogDataWithoutSummary(e)}</div>
895
895
  </expandable-item>
896
- `}};D.styles=[oe.css`
896
+ `}};L.styles=[oe.css`
897
897
  :host {
898
898
  display: block;
899
899
  }
@@ -975,7 +975,7 @@
975
975
  --log-color: #f44336;
976
976
  background-color: rgba(244, 67, 54, 0.1);
977
977
  }
978
- `],i([(0,ie.property)()],D.prototype,"log",2),i([(0,ie.property)()],D.prototype,"isExpanded",2),i([(0,ie.property)()],D.prototype,"onToggle",2),D=i([(0,ie.customElement)("single-log")],D);var m=class extends k.LitElement{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:je},{value:"console",label:"Console",title:"Log only to the console",icon:Fe},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:ze},{value:"none",label:"None",title:"Dont log anywhere",icon:Ve}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:b},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:b},{value:"elementDataUpdated",label:"Element Data Updated",title:"Show element data update events",icon:b},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:b},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:b},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:b},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:b},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:b}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([e,t])=>t).map(([e,t])=>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=o=>{this.handleEvent(e,o)};this._eventListeners.set(e,t),_e.ForesightManager.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(_e.ForesightManager.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{_e.ForesightManager.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 o=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${o}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addEventLog(e){let t=Ke(e);if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}let o={...t,logId:(++this.logIdCounter).toString()};this.logs.unshift(o),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}render(){return k.html`
978
+ `],i([(0,ie.property)()],L.prototype,"log",2),i([(0,ie.property)()],L.prototype,"isExpanded",2),i([(0,ie.property)()],L.prototype,"onToggle",2),L=i([(0,ie.customElement)("single-log")],L);var m=class extends k.LitElement{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:je},{value:"console",label:"Console",title:"Log only to the console",icon:Fe},{value:"both",label:"Both",title:"Log to both the control panel and the console",icon:ze},{value:"none",label:"None",title:"Dont log anywhere",icon:Ve}],this.filterDropdown=[{value:"elementRegistered",label:"Element Registered",title:"Show element registration events",icon:b},{value:"elementUnregistered",label:"Element Unregistered",title:"Show element unregistration events",icon:b},{value:"elementDataUpdated",label:"Element Data Updated",title:"Show element data update events",icon:b},{value:"callbackInvoked",label:"Callback Invoked",title:"Show callback invoked events",icon:b},{value:"callbackCompleted",label:"Callback Completed",title:"Show callback completed events",icon:b},{value:"mouseTrajectoryUpdate",label:"Mouse Trajectory Update",title:"Show mouse trajectory update events",icon:b},{value:"scrollTrajectoryUpdate",label:"Scroll Trajectory Update",title:"Show scroll trajectory update events",icon:b},{value:"managerSettingsChanged",label:"Manager Settings Changed",title:"Show manager settings change events",icon:b}]}getSelectedEventFilters(){return Object.entries(this.eventsEnabled).filter(([e,t])=>t).map(([e,t])=>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=o=>{this.handleEvent(e,o)};this._eventListeners.set(e,t),_e.ForesightManager.instance.addEventListener(e,t,{signal:this._abortController?.signal})}removeForesightEventListener(e){let t=this._eventListeners.get(e);t&&(_e.ForesightManager.instance.removeEventListener(e,t),this._eventListeners.delete(e))}removeAllEventListeners(){this._eventListeners.forEach((e,t)=>{_e.ForesightManager.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 o=this.getEventColor(e);console.log(`%c[ForesightJS] ${e}`,`color: ${o}; font-weight: bold;`,t)}(this.logLocation==="controlPanel"||this.logLocation==="both")&&this.addEventLog(t)}}addEventLog(e){let t=Ke(e);if(t.type==="serializationError"){console.error(t.error,t.errorMessage);return}let o={...t,logId:(++this.logIdCounter).toString()};this.logs.unshift(o),this.logs.length>this.MAX_LOGS&&this.logs.pop(),this.requestUpdate()}render(){return k.html`
979
979
  <tab-header>
980
980
  <div slot="chips" class="chips-container">
981
981
  <chip-element title="Number of logged events (Max ${this.MAX_LOGS})">
@@ -1453,10 +1453,10 @@ Click on the copy icon to easely copy the new setting into your project
1453
1453
  ></tab-selector>
1454
1454
 
1455
1455
  <div class="tab-content">
1456
- <log-tab class=${(0,De.classMap)({active:this.activeTab==="logs"})}></log-tab>
1457
- <element-tab class=${(0,De.classMap)({active:this.activeTab==="elements"})}></element-tab>
1456
+ <log-tab class=${(0,Le.classMap)({active:this.activeTab==="logs"})}></log-tab>
1457
+ <element-tab class=${(0,Le.classMap)({active:this.activeTab==="elements"})}></element-tab>
1458
1458
  <settings-tab
1459
- class=${(0,De.classMap)({active:this.activeTab==="settings"})}
1459
+ class=${(0,Le.classMap)({active:this.activeTab==="settings"})}
1460
1460
  ></settings-tab>
1461
1461
  </div>
1462
1462
  </div>
@@ -1541,7 +1541,7 @@ Click on the copy icon to easely copy the new setting into your project
1541
1541
  width: 100%;
1542
1542
  height: 100%;
1543
1543
  }
1544
- `,i([(0,G.state)()],y.prototype,"activeTab",2),i([(0,G.state)()],y.prototype,"isMinimized",2),i([(0,G.state)()],y.prototype,"visibleCount",2),i([(0,G.state)()],y.prototype,"totalCount",2),y=i([(0,G.customElement)("control-panel")],y);customElements.get("control-panel")||customElements.define("control-panel",y);var me=require("lit"),nt=require("lit/decorators.js");var de=require("lit"),W=require("lit/decorators.js"),le=require("js.foresight");var L=class extends de.LitElement{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;le.ForesightManager.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),le.ForesightManager.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),le.ForesightManager.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}),le.ForesightManager.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),le.ForesightManager.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let o=t;this.updateNameTagVisibility(o.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let o=document.createElement("div");o.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(o);let a={expandedOverlay:t,nameLabel:o};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:o,nameLabel:a}=e,{expandedRect:r}=t.elementBounds,ue=r.right-r.left,Ie=r.bottom-r.top;o.style.width=`${ue}px`,o.style.height=`${Ie}px`,o.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 o=this.overlayMap.get(e.element);if(o)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":o.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":o.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":o.expandedOverlay.classList.add("invoked-by-tab");break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(t){let o=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:o})}}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let o=t.nameLabel;e?o.style.display="block":o.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}render(){return de.html` <div id="overlays-container"></div> `}};L.styles=[de.css`
1544
+ `,i([(0,G.state)()],y.prototype,"activeTab",2),i([(0,G.state)()],y.prototype,"isMinimized",2),i([(0,G.state)()],y.prototype,"visibleCount",2),i([(0,G.state)()],y.prototype,"totalCount",2),y=i([(0,G.customElement)("control-panel")],y);customElements.get("control-panel")||customElements.define("control-panel",y);var me=require("lit"),nt=require("lit/decorators.js");var de=require("lit"),W=require("lit/decorators.js"),le=require("js.foresight");var D=class extends de.LitElement{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;le.ForesightManager.instance.addEventListener("elementRegistered",t=>{t.elementData.isIntersectingWithViewport&&this.createOrUpdateElementOverlay(t.elementData)},{signal:e}),le.ForesightManager.instance.addEventListener("elementUnregistered",t=>{this.removeElementOverlay(t.elementData)},{signal:e}),le.ForesightManager.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}),le.ForesightManager.instance.addEventListener("callbackInvoked",t=>{this.highlightElementCallback(t.elementData,t.hitType)},{signal:e}),le.ForesightManager.instance.addEventListener("callbackCompleted",t=>{this.unhighlightElementCallback(t.elementData)},{signal:e}),document.addEventListener("showNameTagsChanged",t=>{let o=t;this.updateNameTagVisibility(o.detail.showNameTags)},{signal:e})}createElementOverlays(e){let t=document.createElement("div");t.className="expanded-overlay";let o=document.createElement("div");o.className="name-label",this.containerElement.appendChild(t),this.containerElement.appendChild(o);let a={expandedOverlay:t,nameLabel:o};return this.overlayMap.set(e.element,a),a}updateElementOverlays(e,t){let{expandedOverlay:o,nameLabel:a}=e,{expandedRect:r}=t.elementBounds,ue=r.right-r.left,Ie=r.bottom-r.top;o.style.width=`${ue}px`,o.style.height=`${Ie}px`,o.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 o=this.overlayMap.get(e.element);if(o)switch(this.clearCallbackAnimationTimeout(e.element),t.kind){case"mouse":o.expandedOverlay.classList.add("invoked-by-mouse");break;case"scroll":o.expandedOverlay.classList.add("invoked-by-scroll");break;case"tab":o.expandedOverlay.classList.add("invoked-by-tab");break;default:}}unhighlightElementCallback(e){let t=this.overlayMap.get(e.element);if(t){let o=setTimeout(()=>{t.expandedOverlay.classList.remove("callback-invoked"),this.callbackAnimations.delete(e.element)},400);this.callbackAnimations.set(e.element,{element:e.element,timeoutId:o})}}updateNameTagVisibility(e){this.overlayMap.forEach(t=>{let o=t.nameLabel;e?o.style.display="block":o.style.display="none"})}disconnectedCallback(){super.disconnectedCallback(),this._abortController?.abort(),this._abortController=null}render(){return de.html` <div id="overlays-container"></div> `}};D.styles=[de.css`
1545
1545
  :host {
1546
1546
  position: fixed;
1547
1547
  top: 0;
@@ -1608,7 +1608,7 @@ Click on the copy icon to easely copy the new setting into your project
1608
1608
  white-space: nowrap;
1609
1609
  pointer-events: none;
1610
1610
  }
1611
- `],i([(0,W.state)()],L.prototype,"overlayMap",2),i([(0,W.state)()],L.prototype,"callbackAnimations",2),i([(0,W.query)("#overlays-container")],L.prototype,"containerElement",2),L=i([(0,W.customElement)("element-overlays")],L);var pe=require("lit"),ce=require("lit/decorators.js"),it=require("lit/directives/style-map.js"),ke=require("js.foresight");var O=class extends pe.LitElement{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=ke.ForesightManager.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestTrajectory=null;this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1)};this.handleTrajectoryUpdate=e=>{this._mousePredictionIsEnabled&&(this._isVisible=!0,this._latestTrajectory=e.trajectoryPositions,this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderTrajectory)))};this.renderTrajectory=()=>{if(!this._latestTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestTrajectory,o=t.x-e.x,a=t.y-e.y,r=Math.sqrt(o*o+a*a);if(r===0)this._trajectoryStyles={display:"none"};else{let ue=Math.atan2(a,o)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${ue}deg)`,width:`${r}px`}}this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;ke.ForesightManager.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),ke.ForesightManager.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),ke.ForesightManager.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return pe.html` <div class="trajectory-line" style=${(0,it.styleMap)(e)}></div> `}};O.styles=[pe.css`
1611
+ `],i([(0,W.state)()],D.prototype,"overlayMap",2),i([(0,W.state)()],D.prototype,"callbackAnimations",2),i([(0,W.query)("#overlays-container")],D.prototype,"containerElement",2),D=i([(0,W.customElement)("element-overlays")],D);var pe=require("lit"),ce=require("lit/decorators.js"),it=require("lit/directives/style-map.js"),ke=require("js.foresight");var O=class extends pe.LitElement{constructor(){super(...arguments);this._abortController=new AbortController;this._mousePredictionIsEnabled=ke.ForesightManager.instance.getManagerData.globalSettings.enableMousePrediction;this._isVisible=!1;this._trajectoryStyles={};this._isUpdateScheduled=!1;this._latestTrajectory=null;this.handleSettingsChange=e=>{let t=e.managerData.globalSettings.enableMousePrediction;this._mousePredictionIsEnabled=t,t||(this._isVisible=!1)};this.handleTrajectoryUpdate=e=>{this._mousePredictionIsEnabled&&(this._isVisible=!0,this._latestTrajectory=e.trajectoryPositions,this._isUpdateScheduled||(this._isUpdateScheduled=!0,requestAnimationFrame(this.renderTrajectory)))};this.renderTrajectory=()=>{if(!this._latestTrajectory){this._isUpdateScheduled=!1;return}let{currentPoint:e,predictedPoint:t}=this._latestTrajectory,o=t.x-e.x,a=t.y-e.y,r=Math.sqrt(o*o+a*a);if(r===0)this._trajectoryStyles={display:"none"};else{let ue=Math.atan2(a,o)*180/Math.PI;this._trajectoryStyles={transform:`translate(${e.x}px, ${e.y}px) rotate(${ue}deg)`,width:`${r}px`}}this._isUpdateScheduled=!1,this.requestUpdate()}}connectedCallback(){super.connectedCallback();let{signal:e}=this._abortController;ke.ForesightManager.instance.addEventListener("mouseTrajectoryUpdate",this.handleTrajectoryUpdate,{signal:e}),ke.ForesightManager.instance.addEventListener("scrollTrajectoryUpdate",()=>{this._isVisible=!1},{signal:e}),ke.ForesightManager.instance.addEventListener("managerSettingsChanged",this.handleSettingsChange,{signal:e})}disconnectedCallback(){super.disconnectedCallback(),this._abortController.abort()}render(){let e={display:this._isVisible?"block":"none",...this._trajectoryStyles};return pe.html` <div class="trajectory-line" style=${(0,it.styleMap)(e)}></div> `}};O.styles=[pe.css`
1612
1612
  :host {
1613
1613
  display: block;
1614
1614
  }
@@ -1716,9 +1716,9 @@ Click on the copy icon to easely copy the new setting into your project
1716
1716
  pointer-events: none;
1717
1717
  z-index: 9999;
1718
1718
  }
1719
- `],Ee=i([(0,nt.customElement)("debug-overlay")],Ee);var l=class extends q.LitElement{constructor(){super(...arguments);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 initialize(e){l._instance||(l._instance=document.createElement("foresight-devtools"),document.body.appendChild(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}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.shouldUpdateSetting(e.logging.callbackCompleted,this.devtoolsSettings.logging.callbackCompleted)&&(this.devtoolsSettings.logging.callbackCompleted=e.logging.callbackCompleted),this.shouldUpdateSetting(e.logging.callbackInvoked,this.devtoolsSettings.logging.callbackInvoked)&&(this.devtoolsSettings.logging.callbackInvoked=e.logging.callbackInvoked),this.shouldUpdateSetting(e.logging.elementDataUpdated,this.devtoolsSettings.logging.elementDataUpdated)&&(this.devtoolsSettings.logging.elementDataUpdated=e.logging.elementDataUpdated),this.shouldUpdateSetting(e.logging.elementRegistered,this.devtoolsSettings.logging.elementRegistered)&&(this.devtoolsSettings.logging.elementRegistered=e.logging.elementRegistered),this.shouldUpdateSetting(e.logging.elementUnregistered,this.devtoolsSettings.logging.elementUnregistered)&&(this.devtoolsSettings.logging.elementUnregistered=e.logging.elementUnregistered),this.shouldUpdateSetting(e.logging.managerSettingsChanged,this.devtoolsSettings.logging.managerSettingsChanged)&&(this.devtoolsSettings.logging.managerSettingsChanged=e.logging.managerSettingsChanged),this.shouldUpdateSetting(e.logging.mouseTrajectoryUpdate,this.devtoolsSettings.logging.mouseTrajectoryUpdate)&&(this.devtoolsSettings.logging.mouseTrajectoryUpdate=e.logging.mouseTrajectoryUpdate),this.shouldUpdateSetting(e.logging.scrollTrajectoryUpdate,this.devtoolsSettings.logging.scrollTrajectoryUpdate)&&(this.devtoolsSettings.logging.scrollTrajectoryUpdate=e.logging.scrollTrajectoryUpdate)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?q.html``:q.html`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[q.css`
1719
+ `],Ee=i([(0,nt.customElement)("debug-overlay")],Ee);var l=class extends q.LitElement{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}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.shouldUpdateSetting(e.logging.callbackCompleted,this.devtoolsSettings.logging.callbackCompleted)&&(this.devtoolsSettings.logging.callbackCompleted=e.logging.callbackCompleted),this.shouldUpdateSetting(e.logging.callbackInvoked,this.devtoolsSettings.logging.callbackInvoked)&&(this.devtoolsSettings.logging.callbackInvoked=e.logging.callbackInvoked),this.shouldUpdateSetting(e.logging.elementDataUpdated,this.devtoolsSettings.logging.elementDataUpdated)&&(this.devtoolsSettings.logging.elementDataUpdated=e.logging.elementDataUpdated),this.shouldUpdateSetting(e.logging.elementRegistered,this.devtoolsSettings.logging.elementRegistered)&&(this.devtoolsSettings.logging.elementRegistered=e.logging.elementRegistered),this.shouldUpdateSetting(e.logging.elementUnregistered,this.devtoolsSettings.logging.elementUnregistered)&&(this.devtoolsSettings.logging.elementUnregistered=e.logging.elementUnregistered),this.shouldUpdateSetting(e.logging.managerSettingsChanged,this.devtoolsSettings.logging.managerSettingsChanged)&&(this.devtoolsSettings.logging.managerSettingsChanged=e.logging.managerSettingsChanged),this.shouldUpdateSetting(e.logging.mouseTrajectoryUpdate,this.devtoolsSettings.logging.mouseTrajectoryUpdate)&&(this.devtoolsSettings.logging.mouseTrajectoryUpdate=e.logging.mouseTrajectoryUpdate),this.shouldUpdateSetting(e.logging.scrollTrajectoryUpdate,this.devtoolsSettings.logging.scrollTrajectoryUpdate)&&(this.devtoolsSettings.logging.scrollTrajectoryUpdate=e.logging.scrollTrajectoryUpdate)))}cleanup(){this.requestUpdate()}render(){return!this.isInitialized||!this.devtoolsSettings.showDebugger?q.html``:q.html`<control-panel></control-panel> <debug-overlay></debug-overlay>`}};l.styles=[q.css`
1720
1720
  :host {
1721
1721
  display: block;
1722
1722
  }
1723
- `],l._instance=null,i([(0,Le.state)()],l.prototype,"isInitialized",2),l=i([(0,Le.customElement)("foresight-devtools")],l);0&&(module.exports={ForesightDevtools});
1723
+ `],l._instance=null,i([(0,De.state)()],l.prototype,"isInitialized",2),l=i([(0,De.customElement)("foresight-devtools")],l);0&&(module.exports={ForesightDevtools});
1724
1724
  //# sourceMappingURL=index.js.map