js.foresight 0.0.21 → 0.0.23
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 +6 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -28,6 +28,10 @@ type ElementBounds = {
|
|
|
28
28
|
/** The hit slop values applied to this element. */
|
|
29
29
|
hitSlop: Rect;
|
|
30
30
|
};
|
|
31
|
+
type DebuggerSettings = {
|
|
32
|
+
/** If the control panel should be minimized on default @default false */
|
|
33
|
+
isControlPanelDefaultMinimized: boolean;
|
|
34
|
+
};
|
|
31
35
|
/**
|
|
32
36
|
* Represents the data associated with a registered foresight element.
|
|
33
37
|
*/
|
|
@@ -79,6 +83,8 @@ type BaseForesightManagerProps = {
|
|
|
79
83
|
* @default 50
|
|
80
84
|
*/
|
|
81
85
|
resizeScrollThrottleDelay: number;
|
|
86
|
+
/** Options for the debugger */
|
|
87
|
+
debuggerSettings: DebuggerSettings;
|
|
82
88
|
};
|
|
83
89
|
/**
|
|
84
90
|
* Configuration options for the ForesightManager
|
package/dist/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=function(){return e=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var o in t=arguments[i])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},e.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var t=function(){function e(e){this.shadowRoot=null,this.controlsContainer=null,this.elementListContainer=null,this.elementCountSpan=null,this.elementListItems=new Map,this.trajectoryEnabledCheckbox=null,this.historySizeSlider=null,this.historyValueSpan=null,this.predictionTimeSlider=null,this.predictionValueSpan=null,this.throttleDelaySlider=null,this.throttleValueSpan=null,this.minimizeButton=null,this.debuggerSection=null,this.isMinimized=!1,this.foresightManagerInstance=e}return e.prototype.initialize=function(e,t){this.shadowRoot=e,this._createDOM(),this.controlsContainer&&(this.shadowRoot.appendChild(this.controlsContainer),this._queryDOMElements(),this._setupEventListeners(),this.updateControlsState(t),this.refreshElementList(),this._applyMinimizedStateVisuals())},e.prototype._createDOM=function(){this.controlsContainer=document.createElement("div"),this.controlsContainer.id="jsforesight-debug-controls";this.controlsContainer.innerHTML='\n <div class="jsforesight-debugger-title-container">\n <button class="jsforesight-minimize-button">-</button>\n <h3>Foresight Debugger</h3>\n <span class="jsforesight-info-icon" title="Changes made here are for the current session only and won\'t persist. Update initial values in the ForesightManager.initialize() props for permanent changes.">i</span>\n </div>\n\n <div class="jsforesight-debugger-section">\n <h4>Session Settings</h4>\n <div class="control-row">\n <label for="jsforesight-trajectory-enabled">\n Enable Mouse Prediction\n <span class="jsforesight-info-icon" title="Toggles mouse movement prediction. If disabled, only direct hovers trigger actions.">i</span>\n </label>\n <input type="checkbox" id="jsforesight-trajectory-enabled">\n </div>\n <div class="control-row">\n <label for="jsforesight-history-size">\n History Size\n <span class="jsforesight-info-icon" title="Number of past mouse positions for velocity calculation (Min: 2, Max: 20). Higher values smooth predictions but add latency.">i</span>\n </label>\n <input type="range" id="jsforesight-history-size" min="2" max="20">\n <span id="jsforesight-history-value"></span>\n </div>\n <div class="control-row">\n <label for="jsforesight-prediction-time">\n Prediction Time (ms)\n <span class="jsforesight-info-icon" title="How far (ms) to project trajectory (Min: 10, Max: 500). Larger values detect intent sooner.">i</span>\n </label>\n <input type="range" id="jsforesight-prediction-time" min="10" max="500" step="10">\n <span id="jsforesight-prediction-value"></span>\n </div>\n <div class="control-row">\n <label for="jsforesight-throttle-delay">\n Scroll/Resize Throttle (ms)\n <span class="jsforesight-info-icon" title="Delay (ms) for recalculating element positions on resize/scroll (Min: 0, Max: 500). Higher values improve performance during rapid events.">i</span>\n </label>\n <input type="range" id="jsforesight-throttle-delay" min="0" max="500" step="10">\n <span id="jsforesight-throttle-value"></span>\n </div>\n \n <div class="jsforesight-debugger-section">\n <h4>Registered Elements (<span id="jsforesight-element-count">0</span>)</h4>\n <div id="jsforesight-element-list-items-container" class="jsforesight-element-list">\n <em>Initializing...</em>\n </div>\n </div>\n </div>\n '},e.prototype._queryDOMElements=function(){this.controlsContainer&&(this.trajectoryEnabledCheckbox=this.controlsContainer.querySelector("#jsforesight-trajectory-enabled"),this.historySizeSlider=this.controlsContainer.querySelector("#jsforesight-history-size"),this.historyValueSpan=this.controlsContainer.querySelector("#jsforesight-history-value"),this.predictionTimeSlider=this.controlsContainer.querySelector("#jsforesight-prediction-time"),this.predictionValueSpan=this.controlsContainer.querySelector("#jsforesight-prediction-value"),this.throttleDelaySlider=this.controlsContainer.querySelector("#jsforesight-throttle-delay"),this.throttleValueSpan=this.controlsContainer.querySelector("#jsforesight-throttle-value"),this.elementListContainer=this.controlsContainer.querySelector("#jsforesight-element-list-items-container"),this.elementCountSpan=this.controlsContainer.querySelector("#jsforesight-element-count"),this.minimizeButton=this.controlsContainer.querySelector(".jsforesight-minimize-button"),this.debuggerSection=this.controlsContainer.querySelector(".jsforesight-debugger-section"))},e.prototype._setupEventListeners=function(){var e,t,i,n,o,r=this;null===(e=this.trajectoryEnabledCheckbox)||void 0===e||e.addEventListener("change",(function(e){r.foresightManagerInstance.alterGlobalSettings({enableMousePrediction:e.target.checked})})),null===(t=this.historySizeSlider)||void 0===t||t.addEventListener("input",(function(e){var t=parseInt(e.target.value);r.historyValueSpan&&(r.historyValueSpan.textContent=t.toString()),r.foresightManagerInstance.alterGlobalSettings({positionHistorySize:t})})),null===(i=this.predictionTimeSlider)||void 0===i||i.addEventListener("input",(function(e){var t=parseInt(e.target.value);r.predictionValueSpan&&(r.predictionValueSpan.textContent=t.toString()),r.foresightManagerInstance.alterGlobalSettings({trajectoryPredictionTime:t})})),null===(n=this.throttleDelaySlider)||void 0===n||n.addEventListener("input",(function(e){var t=parseInt(e.target.value);r.throttleValueSpan&&(r.throttleValueSpan.textContent=t.toString()),r.foresightManagerInstance.alterGlobalSettings({resizeScrollThrottleDelay:t})})),null===(o=this.minimizeButton)||void 0===o||o.addEventListener("click",(function(){r.isMinimized=!r.isMinimized,r._applyMinimizedStateVisuals()}))},e.prototype._applyMinimizedStateVisuals=function(){this.minimizeButton&&this.debuggerSection&&this.controlsContainer&&(this.isMinimized?(this.debuggerSection.style.display="none",this.minimizeButton.textContent="+"):(this.debuggerSection.style.display="",this.minimizeButton.textContent="-"))},e.prototype.updateControlsState=function(e){this.trajectoryEnabledCheckbox&&(this.trajectoryEnabledCheckbox.checked=e.enableMousePrediction),this.historySizeSlider&&this.historyValueSpan&&(this.historySizeSlider.value=e.positionHistorySize.toString(),this.historyValueSpan.textContent=e.positionHistorySize.toString()),this.predictionTimeSlider&&this.predictionValueSpan&&(this.predictionTimeSlider.value=e.trajectoryPredictionTime.toString(),this.predictionValueSpan.textContent=e.trajectoryPredictionTime.toString()),this.throttleDelaySlider&&this.throttleValueSpan&&(this.throttleDelaySlider.value=e.resizeScrollThrottleDelay.toString(),this.throttleValueSpan.textContent=e.resizeScrollThrottleDelay.toString())},e.prototype.refreshElementList=function(){var e=this;if(this.elementListContainer){this.elementListContainer.innerHTML="",this.elementListItems.clear();var t=this.foresightManagerInstance.elements;this.elementCountSpan&&(this.elementCountSpan.textContent=t.size.toString()),0!==t.size?t.forEach((function(t,i){var n=document.createElement("div");n.className="jsforesight-element-list-item",e._updateListItemContent(n,t),e.elementListContainer.appendChild(n),e.elementListItems.set(i,n)})):this.elementListContainer.innerHTML="<em>No elements registered.</em>"}},e.prototype._updateListItemContent=function(e,t){e.classList.toggle("hovering",t.isHovering),e.classList.toggle("trajectory-hit",t.isTrajectoryHit);var i=t.unregisterOnCallback?"Single":"Multi",n=t.unregisterOnCallback?"Callback triggers once, then element unregisters.":"Callback can trigger multiple times.";e.innerHTML="\n ".concat('<span class="status-indicator"></span>','\n <span class="element-name" title="').concat(t.name||"Unnamed Element",'">').concat(t.name||"Unnamed Element",'</span>\n <span class="hit-behavior" title="').concat(n,'">').concat(i,'</span>\n <span class="element-details">(H: ').concat(t.isHovering?"Y":"N",", T: ").concat(t.isTrajectoryHit?"Y":"N",")</span>\n ")},e.prototype.cleanup=function(){var e;null===(e=this.controlsContainer)||void 0===e||e.remove(),this.controlsContainer=null,this.elementListContainer=null,this.elementCountSpan=null,this.elementListItems.clear(),this.minimizeButton=null,this.debuggerSection=null},e}(),i=function(){function e(e){this.shadowHost=null,this.shadowRoot=null,this.debugContainer=null,this.debugLinkOverlays=new Map,this.debugPredictedMouseIndicator=null,this.debugTrajectoryLine=null,this.debugStyleElement=null,this.controlPanel=null,this.lastElementData=new Map,this.foresightManagerInstance=e,this.controlPanel=new t(this.foresightManagerInstance)}return e.prototype.initialize=function(e,t,i,n){var o,r=this;"undefined"!=typeof window&&(this.cleanup(),this.shadowHost=document.createElement("div"),this.shadowHost.id="jsforesight-debugger-shadow-host",this.shadowHost.style.pointerEvents="none",document.body.appendChild(this.shadowHost),this.shadowRoot=this.shadowHost.attachShadow({mode:"open"}),this.debugStyleElement=document.createElement("style"),this.debugStyleElement.textContent='\n #jsforesight-debug-container { /* For on-page overlays */\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 9999;\n }\n .jsforesight-link-overlay {\n position: absolute; border: 2px solid transparent;\n background-color: rgba(0, 0, 255, 0.1); box-sizing: border-box;\n transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;\n }\n .jsforesight-link-overlay.active {\n border-color: oklch(83.7% 0.128 66.29); background-color: rgba(255, 0, 0, 0.1);\n }\n .jsforesight-link-overlay.trajectory-hit {\n border-color: oklch(89.7% 0.196 126.665); background-color: rgba(0, 255, 0, 0.3);\n box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);\n }\n .jsforesight-expanded-overlay {\n position: absolute; border: 1px dashed rgba(0, 0, 255, 0.3);\n background-color: rgba(0, 0, 255, 0.05); box-sizing: border-box;\n }\n .jsforesight-mouse-predicted {\n position: absolute; width: 20px; height: 20px; border-radius: 50%;\n border: 2px solid oklch(83.7% 0.128 66.29); background-color: rgba(255, 165, 0, 0.3);\n transform: translate(-50%, -50%); z-index: 10000;\n }\n .jsforesight-trajectory-line {\n position: absolute; height: 2px; background-color: rgba(255, 100, 0, 0.5);\n transform-origin: left center; z-index: 9999;\n }\n .jsforesight-name-label {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.75);\n color: white;\n padding: 3px 6px;\n font-size: 11px;\n font-family: Arial, sans-serif;\n border-radius: 3px;\n z-index: 10001;\n white-space: nowrap;\n pointer-events: none;\n }\n /* Styles for #jsforesight-debug-controls and its children are still needed here */\n #jsforesight-debug-controls {\n position: fixed; bottom: 10px; right: 10px;\n background-color: rgba(0, 0, 0, 0.75); color: white; padding: 12px;\n border-radius: 5px; font-family: Arial, sans-serif; font-size: 13px;\n z-index: 10001; pointer-events: auto; display: flex; flex-direction: column; gap: 8px;\n min-width: 300px; max-width: 350px;\n }\n .jsforesight-debugger-title-container {\n display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px;\n }\n .jsforesight-minimize-button{\n background: none; border: none; color: white;\n font-size: 22px; cursor: pointer; padding: 0;\n position: absolute; top: 10px; left: 15px;\n }\n .jsforesight-debugger-title-container h3 { margin: 0; font-size: 15px; }\n #jsforesight-debug-controls label { display: flex; align-items: center; gap: 5px; cursor: pointer; }\n #jsforesight-debug-controls input[type="range"] { flex-grow: 1; margin: 0 5px; cursor: pointer;}\n #jsforesight-debug-controls input[type="checkbox"] { margin-right: 5px; cursor: pointer; }\n #jsforesight-debug-controls .control-row { display: flex; align-items: center; justify-content: space-between; }\n #jsforesight-debug-controls .control-row label { flex-basis: auto; }\n #jsforesight-debug-controls .control-row span:not(.jsforesight-info-icon) { min-width: 30px; text-align: right; }\n .jsforesight-info-icon {\n display: inline-flex; align-items: center; justify-content: center;\n width: 16px; height: 16px; border-radius: 50%;\n background-color: #555; color: white;\n font-size: 10px; font-style: italic; font-weight: bold;\n font-family: \'Georgia\', serif;\n cursor: help; user-select: none;\n flex-shrink: 0;\n }\n .jsforesight-debugger-section {\n display: flex; flex-direction: column; gap: 6px;\n border-top: 1px solid #444;\n }\n .jsforesight-debugger-section h4 {\n margin: 5px 0 2px 0;\n font-size: 14px;\n font-weight: bold;\n }\n .jsforesight-element-list {\n max-height: 150px;\n overflow-y: auto;\n background-color: rgba(20, 20, 20, 0.5);\n border-radius: 3px;\n padding: 5px;\n font-size: 12px;\n }\n .jsforesight-element-list-item {\n padding: 4px 6px;\n margin-bottom: 3px;\n border-radius: 2px;\n display: flex;\n align-items: center;\n gap: 6px;\n background-color: rgba(50,50,50,0.7);\n transition: background-color 0.2s ease;\n }\n .jsforesight-element-list-item:last-child {\n margin-bottom: 0;\n }\n .jsforesight-element-list-item .status-indicator {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #777;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n }\n .jsforesight-element-list-item.hovering .status-indicator {\n background-color: oklch(83.7% 0.128 66.29 / 0.7);\n }\n .jsforesight-element-list-item.trajectory-hit .status-indicator {\n background-color: oklch(89.7% 0.196 126.665 / 0.7);\n }\n .jsforesight-element-list-item.hovering.trajectory-hit .status-indicator {\n background: linear-gradient(45deg, oklch(89.7% 0.196 126.665 / 0.7) 50%, oklch(83.7% 0.128 66.29 / 0.7) 50%);\n }\n .jsforesight-element-list-item .element-name {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .jsforesight-element-list-item .element-details {\n font-size: 10px;\n color: #ccc;\n flex-shrink: 0;\n }\n .jsforesight-element-list-item .hit-behavior {\n font-size: 10px;\n color: #b0b0b0;\n margin-right: 5px;\n padding: 1px 3px;\n border-radius: 2px;\n background-color: rgba(0,0,0,0.2);\n flex-shrink: 0;\n }\n ',this.shadowRoot.appendChild(this.debugStyleElement),this.debugContainer=document.createElement("div"),this.debugContainer.id="jsforesight-debug-container",this.shadowRoot.appendChild(this.debugContainer),this.debugPredictedMouseIndicator=document.createElement("div"),this.debugPredictedMouseIndicator.className="jsforesight-mouse-predicted",this.debugContainer.appendChild(this.debugPredictedMouseIndicator),this.debugTrajectoryLine=document.createElement("div"),this.debugTrajectoryLine.className="jsforesight-trajectory-line",this.debugContainer.appendChild(this.debugTrajectoryLine),this.shadowRoot&&(null===(o=this.controlPanel)||void 0===o||o.initialize(this.shadowRoot,t)),e.forEach((function(e,t){r.createOrUpdateLinkOverlay(t,e)})),this.updateTrajectoryVisuals(i,n,t.enableMousePrediction))},e.prototype.cleanup=function(){var e,t;console.log("[ForesightDebugger] cleanup() called. All debug elements will be removed."),null===(e=this.controlPanel)||void 0===e||e.cleanup(),null===(t=this.shadowHost)||void 0===t||t.remove(),this.shadowHost=null,this.shadowRoot=null,this.debugContainer=null,this.debugLinkOverlays.clear(),this.lastElementData.clear(),this.debugPredictedMouseIndicator=null,this.debugTrajectoryLine=null,this.debugStyleElement=null},e.prototype.createOrUpdateLinkOverlay=function(e,t){var i;if(this.debugContainer&&this.shadowRoot){this.lastElementData.set(e,{isHovering:t.isHovering,isTrajectoryHit:t.isTrajectoryHit});var n=this.debugLinkOverlays.get(e);if(!n){var o=document.createElement("div");o.className="jsforesight-link-overlay",this.debugContainer.appendChild(o);var r=document.createElement("div");r.className="jsforesight-expanded-overlay",this.debugContainer.appendChild(r);var s=document.createElement("div");s.className="jsforesight-name-label",this.debugContainer.appendChild(s),n={linkOverlay:o,expandedOverlay:r,nameLabel:s},this.debugLinkOverlays.set(e,n)}var l=n.linkOverlay,a=n.expandedOverlay,d=n.nameLabel,c=e.getBoundingClientRect();l.style.left="".concat(c.left,"px"),l.style.top="".concat(c.top,"px"),l.style.width="".concat(c.width,"px"),l.style.height="".concat(c.height,"px"),l.classList.toggle("trajectory-hit",t.isTrajectoryHit),l.classList.toggle("active",t.isHovering),t.elementBounds.expandedRect?(a.style.left="".concat(t.elementBounds.expandedRect.left,"px"),a.style.top="".concat(t.elementBounds.expandedRect.top,"px"),a.style.width="".concat(t.elementBounds.expandedRect.right-t.elementBounds.expandedRect.left,"px"),a.style.height="".concat(t.elementBounds.expandedRect.bottom-t.elementBounds.expandedRect.top,"px"),a.style.display="block"):a.style.display="none",t.name&&"Unnamed"!==t.name?(d.textContent=t.name,d.style.display="block",d.style.left="".concat(c.left,"px"),d.style.top="".concat(c.top-22,"px")):d.style.display="none",null===(i=this.controlPanel)||void 0===i||i.refreshElementList()}},e.prototype.removeLinkOverlay=function(e){var t,i=this.debugLinkOverlays.get(e);i&&(i.linkOverlay.remove(),i.expandedOverlay.remove(),i.nameLabel.remove(),this.debugLinkOverlays.delete(e)),this.lastElementData.delete(e),null===(t=this.controlPanel)||void 0===t||t.refreshElementList()},e.prototype.refreshDisplayedElements=function(){var e,t=this,i=new Set(this.foresightManagerInstance.elements.keys());this.foresightManagerInstance.elements.forEach((function(e,i){t.createOrUpdateLinkOverlay(i,e)})),Array.from(this.debugLinkOverlays.keys()).filter((function(e){return!i.has(e)})).forEach((function(e){var i=t.debugLinkOverlays.get(e);null==i||i.linkOverlay.remove(),null==i||i.expandedOverlay.remove(),null==i||i.nameLabel.remove(),t.debugLinkOverlays.delete(e),t.lastElementData.delete(e)})),null===(e=this.controlPanel)||void 0===e||e.refreshElementList()},e.prototype.updateAllLinkVisuals=function(e){this.shadowRoot&&this.debugContainer&&this.refreshDisplayedElements()},e.prototype.updateTrajectoryVisuals=function(e,t,i){if(this.shadowRoot&&this.debugContainer){var n=this.foresightManagerInstance.elements.size>0,o=i&&n;if(this.debugPredictedMouseIndicator&&(o&&t?(this.debugPredictedMouseIndicator.style.left="".concat(t.x,"px"),this.debugPredictedMouseIndicator.style.top="".concat(t.y,"px"),this.debugPredictedMouseIndicator.style.display="block"):this.debugPredictedMouseIndicator.style.display="none"),this.debugTrajectoryLine)if(o&&e&&t){var r=t.x-e.x,s=t.y-e.y;if(Math.abs(r)<.1&&Math.abs(s)<.1)return void(this.debugTrajectoryLine.style.display="none");var l=Math.sqrt(r*r+s*s),a=180*Math.atan2(s,r)/Math.PI;this.debugTrajectoryLine.style.left="".concat(e.x,"px"),this.debugTrajectoryLine.style.top="".concat(e.y,"px"),this.debugTrajectoryLine.style.width="".concat(l,"px"),this.debugTrajectoryLine.style.transform="translateY(-50%) rotate(".concat(a,"deg)"),this.debugTrajectoryLine.style.display="block"}else this.debugTrajectoryLine.style.display="none"}},e.prototype.updateControlsState=function(e){var t;null===(t=this.controlPanel)||void 0===t||t.updateControlsState(e)},e}(),n=function(){function t(){var t=this;this.elements=new Map,this.isSetup=!1,this.debugger=null,this.globalSettings={debug:!1,enableMousePrediction:!0,positionHistorySize:8,trajectoryPredictionTime:80,defaultHitSlop:{top:0,left:0,right:0,bottom:0},resizeScrollThrottleDelay:50},this.positions=[],this.currentPoint={x:0,y:0},this.predictedPoint={x:0,y:0},this.lastResizeScrollCallTimestamp=0,this.resizeScrollThrottleTimeoutId=null,this.domObserver=null,this.lastDomMutationRectsUpdateTimestamp=0,this.domMutationRectsUpdateTimeoutId=null,this.elementResizeObserver=null,this.normalizeHitSlop=function(e){return"number"==typeof e?{top:e,left:e,right:e,bottom:e}:e},this.predictMousePosition=function(e){var i={point:e,time:performance.now()},n=e.x,o=e.y;if(t.positions.push(i),t.positions.length>t.globalSettings.positionHistorySize&&t.positions.shift(),t.positions.length<2)return{x:n,y:o};var r=t.positions[0],s=t.positions[t.positions.length-1],l=(s.time-r.time)/1e3;if(0===l)return{x:n,y:o};var a=(s.point.x-r.point.x)/l,d=(s.point.y-r.point.y)/l,c=t.globalSettings.trajectoryPredictionTime/1e3;return{x:n+a*c,y:o+d*c}},this.handleMouseMove=function(i){t.currentPoint={x:i.clientX,y:i.clientY},t.predictedPoint=t.globalSettings.enableMousePrediction?t.predictMousePosition(t.currentPoint):t.currentPoint;var n=null;t.debugger&&(n=[]);var o=[];t.elements.forEach((function(i,r){if(t.elements.has(r)){var s={isHovering:i.isHovering,isTrajectoryHit:i.isTrajectoryHit,trajectoryHitTime:i.trajectoryHitTime,trajectoryHitExpirationTimeoutId:i.trajectoryHitExpirationTimeoutId},l=!1,a=i.isHovering,d=i.isTrajectoryHit,c=i.trajectoryHitTime,h=i.elementBounds.expandedRect,u=t.currentPoint.x>=h.left&&t.currentPoint.x<=h.right&&t.currentPoint.y>=h.top&&t.currentPoint.y<=h.bottom,g=!1;if(!t.globalSettings.enableMousePrediction||u||i.isTrajectoryHit||t.lineSegmentIntersectsRect(t.currentPoint,t.predictedPoint,h)&&(g=!0),g&&(i.callback(),l=!0,d=!0,c=performance.now()),u&&!i.isHovering){var p=!i.isTrajectoryHit||i.isTrajectoryHit&&!t.globalSettings.enableMousePrediction;!l&&p&&(i.callback(),l=!0)}if(a=u,l&&i.unregisterOnCallback&&o.push(r),(a!==s.isHovering||d!==s.isTrajectoryHit||d&&c!==s.trajectoryHitTime)&&t.elements.has(r)){var m=e(e({},i),{isHovering:a,isTrajectoryHit:d,trajectoryHitTime:c,trajectoryHitExpirationTimeoutId:s.trajectoryHitExpirationTimeoutId});m.isTrajectoryHit&&!s.isTrajectoryHit?(m.trajectoryHitExpirationTimeoutId&&clearTimeout(m.trajectoryHitExpirationTimeoutId),m.trajectoryHitExpirationTimeoutId=setTimeout((function(){var i=t.elements.get(r);if(i&&i.isTrajectoryHit&&i.trajectoryHitTime===m.trajectoryHitTime){var n=e(e({},i),{isTrajectoryHit:!1,trajectoryHitExpirationTimeoutId:void 0});t.elements.set(r,n),t.debugger&&t.debugger.createOrUpdateLinkOverlay(r,n)}}),200)):!m.isTrajectoryHit&&s.isTrajectoryHit&&m.trajectoryHitExpirationTimeoutId&&(clearTimeout(m.trajectoryHitExpirationTimeoutId),m.trajectoryHitExpirationTimeoutId=void 0),t.elements.set(r,m),n&&n.push(r)}}})),o.length>0&&o.forEach((function(e){var i;if(t.elements.has(e)){var n=(null===(i=t.elements.get(e))||void 0===i?void 0:i.name)||"Unnamed";console.log('Unregistering element "'.concat(n,'" due to callback and unregisterOnCallback=true.')),t.unregister(e)}})),t.debugger&&(null==n||n.forEach((function(e){var i=t.elements.get(e);i&&t.debugger.createOrUpdateLinkOverlay(e,i)})),t.debugger.updateTrajectoryVisuals(t.currentPoint,t.predictedPoint,t.globalSettings.enableMousePrediction))},this.handleResizeOrScroll=function(){t.resizeScrollThrottleTimeoutId&&clearTimeout(t.resizeScrollThrottleTimeoutId);var e=performance.now(),i=e-t.lastResizeScrollCallTimestamp,n=t.globalSettings.resizeScrollThrottleDelay;i>=n?(t.updateAllRects(),t.lastResizeScrollCallTimestamp=e,t.resizeScrollThrottleTimeoutId=null):t.resizeScrollThrottleTimeoutId=setTimeout((function(){t.updateAllRects(),t.lastResizeScrollCallTimestamp=performance.now(),t.resizeScrollThrottleTimeoutId=null}),n-i)},this.handleElementResize=function(e){for(var i=0,n=e;i<n.length;i++){var o=n[i].target;t.elements.get(o)&&t.updateExpandedRect(o)}},this.handleDomMutations=function(e){for(var i=!1,n=0,o=e;n<o.length;n++){var r=o[n];if("childList"===r.type&&r.removedNodes.length>0)for(var s=0,l=Array.from(t.elements.keys());s<l.length;s++){var a=l[s];a.isConnected||t.elements.has(a)&&t.unregister(a)}"childList"!==r.type&&("attributes"!==r.type||"style"!==r.attributeName&&"class"!==r.attributeName)||(i=!0)}if(i&&t.elements.size>0){t.domMutationRectsUpdateTimeoutId&&clearTimeout(t.domMutationRectsUpdateTimeoutId);var d=performance.now(),c=t.globalSettings.resizeScrollThrottleDelay,h=d-t.lastDomMutationRectsUpdateTimestamp;h>=c?(t.updateAllRects(),t.lastDomMutationRectsUpdateTimestamp=d,t.domMutationRectsUpdateTimeoutId=null):t.domMutationRectsUpdateTimeoutId=setTimeout((function(){t.updateAllRects(),t.lastDomMutationRectsUpdateTimestamp=performance.now(),t.domMutationRectsUpdateTimeoutId=null}),c-h)}}}return t.initialize=function(e){return t.manager?e&&(console.warn("ForesightManager is already initialized. Use alterGlobalSettings to update settings. Make sure to not put the ForesightManager.initialize() in a place that rerenders often."),t.manager.alterGlobalSettings(e)):(t.manager=new t,e?t.manager.alterGlobalSettings(e):t.manager.globalSettings.debug&&t.manager.turnOnDebugMode()),t.manager},Object.defineProperty(t,"instance",{get:function(){return t.manager?t.manager:this.initialize()},enumerable:!1,configurable:!0}),t.prototype.register=function(e,t,i,n,o){var r=this;void 0===o&&(o=!0);var s=i?this.normalizeHitSlop(i):this.globalSettings.defaultHitSlop,l=e.getBoundingClientRect(),a={callback:t,elementBounds:{expandedRect:this.getExpandedRect(l,s),originalRect:l,hitSlop:s},isHovering:!1,isTrajectoryHit:!1,trajectoryHitTime:0,name:null!=n?n:"Unnamed",unregisterOnCallback:o,trajectoryHitExpirationTimeoutId:void 0};if(this.elements.set(e,a),this.isSetup||this.setupGlobalListeners(),this.elementResizeObserver&&this.elementResizeObserver.observe(e),this.debugger){var d=this.elements.get(e);d&&this.debugger.createOrUpdateLinkOverlay(e,d),this.debugger.refreshDisplayedElements()}return function(){return r.unregister(e)}},t.prototype.unregister=function(e){if(this.elements.has(e)){var t=this.elements.get(e);null==t||t.name,(null==t?void 0:t.trajectoryHitExpirationTimeoutId)&&clearTimeout(t.trajectoryHitExpirationTimeoutId),this.elementResizeObserver&&this.elementResizeObserver.unobserve(e),this.elements.delete(e),this.debugger&&(this.debugger.removeLinkOverlay(e),this.debugger.refreshDisplayedElements()),0===this.elements.size&&this.isSetup&&this.removeGlobalListeners()}else console.warn("Attempted to unregister element not found:",e)},t.prototype.alterGlobalSettings=function(t){var i=this,n=!1;if(void 0!==(null==t?void 0:t.positionHistorySize)&&this.globalSettings.positionHistorySize!==t.positionHistorySize&&(this.globalSettings.positionHistorySize=t.positionHistorySize,n=!0),void 0!==(null==t?void 0:t.trajectoryPredictionTime)&&this.globalSettings.trajectoryPredictionTime!==t.trajectoryPredictionTime&&(this.globalSettings.trajectoryPredictionTime=t.trajectoryPredictionTime,n=!0),void 0!==(null==t?void 0:t.enableMousePrediction)&&this.globalSettings.enableMousePrediction!==t.enableMousePrediction&&(this.globalSettings.enableMousePrediction=t.enableMousePrediction,n=!0,this.globalSettings.enableMousePrediction?this.predictedPoint=this.predictMousePosition(this.currentPoint):(this.predictedPoint=this.currentPoint,this.elements.forEach((function(t,n){if(t.isTrajectoryHit){t.trajectoryHitExpirationTimeoutId&&clearTimeout(t.trajectoryHitExpirationTimeoutId);var o=e(e({},t),{isTrajectoryHit:!1,trajectoryHitTime:0,trajectoryHitExpirationTimeoutId:void 0});i.elements.set(n,o),i.debugger&&i.debugger.createOrUpdateLinkOverlay(n,o)}})))),void 0!==(null==t?void 0:t.defaultHitSlop)){var o=this.normalizeHitSlop(t.defaultHitSlop);this.areRectsEqual(this.globalSettings.defaultHitSlop,o)||(this.globalSettings.defaultHitSlop=o,n=!0,this.elements.forEach((function(e,t){i.updateExpandedRect(t)})))}void 0!==(null==t?void 0:t.resizeScrollThrottleDelay)&&this.globalSettings.resizeScrollThrottleDelay!==t.resizeScrollThrottleDelay&&(this.globalSettings.resizeScrollThrottleDelay=t.resizeScrollThrottleDelay,n=!0),void 0!==(null==t?void 0:t.debug)&&this.globalSettings.debug!==t.debug&&(this.globalSettings.debug=t.debug,n=!0,this.globalSettings.debug?this.turnOnDebugMode():this.debugger&&(this.debugger.cleanup(),this.debugger=null)),n&&this.globalSettings.debug&&this.debugger&&(this.debugger.updateControlsState(this.globalSettings),this.debugger.updateTrajectoryVisuals(this.currentPoint,this.predictedPoint,this.globalSettings.enableMousePrediction),this.elements.forEach((function(e,t){i.debugger.createOrUpdateLinkOverlay(t,e)})),this.debugger.refreshDisplayedElements())},t.prototype.turnOnDebugMode=function(){this.debugger?(this.debugger.updateControlsState(this.globalSettings),this.debugger.updateAllLinkVisuals(this.elements),this.debugger.updateTrajectoryVisuals(this.currentPoint,this.predictedPoint,this.globalSettings.enableMousePrediction)):(this.debugger=new i(this),this.debugger.initialize(this.elements,this.globalSettings,this.currentPoint,this.predictedPoint))},t.prototype.getExpandedRect=function(e,t){return{left:e.left-t.left,right:e.right+t.right,top:e.top-t.top,bottom:e.bottom+t.bottom}},t.prototype.areRectsEqual=function(e,t){return e&&t?e.left===t.left&&e.right===t.right&&e.top===t.top&&e.bottom===t.bottom:e===t},t.prototype.updateExpandedRect=function(t){var i=this.elements.get(t);if(i){var n=t.getBoundingClientRect(),o=i.elementBounds.hitSlop,r=this.getExpandedRect(n,o);if((!this.areRectsEqual(r,i.elementBounds.expandedRect)||!this.areRectsEqual(n,i.elementBounds.originalRect))&&(this.elements.set(t,e(e({},i),{elementBounds:e(e({},i.elementBounds),{originalRect:n,expandedRect:r})})),this.debugger)){var s=this.elements.get(t);s&&this.debugger.createOrUpdateLinkOverlay(t,s)}}},t.prototype.updateAllRects=function(){var e=this;this.elements.forEach((function(t,i){e.updateExpandedRect(i)}))},t.prototype.lineSegmentIntersectsRect=function(e,t,i){var n=0,o=1,r=t.x-e.x,s=t.y-e.y,l=function(e,t){if(0===e){if(t<0)return!1}else{var i=t/e;if(e<0){if(i>o)return!1;i>n&&(n=i)}else{if(i<n)return!1;i<o&&(o=i)}}return!0};return!!l(-r,e.x-i.left)&&(!!l(r,i.right-e.x)&&(!!l(-s,e.y-i.top)&&(!!l(s,i.bottom-e.y)&&n<=o)))},t.prototype.setupGlobalListeners=function(){var e=this;this.isSetup||(document.addEventListener("mousemove",this.handleMouseMove),window.addEventListener("resize",this.handleResizeOrScroll),window.addEventListener("scroll",this.handleResizeOrScroll),this.domObserver||(this.domObserver=new MutationObserver(this.handleDomMutations)),this.domObserver.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),this.elementResizeObserver||(this.elementResizeObserver=new ResizeObserver(this.handleElementResize),this.elements.forEach((function(t,i){return e.elementResizeObserver.observe(i)}))),this.isSetup=!0)},t.prototype.removeGlobalListeners=function(){document.removeEventListener("mousemove",this.handleMouseMove),window.removeEventListener("resize",this.handleResizeOrScroll),window.removeEventListener("scroll",this.handleResizeOrScroll),this.resizeScrollThrottleTimeoutId&&(clearTimeout(this.resizeScrollThrottleTimeoutId),this.resizeScrollThrottleTimeoutId=null),this.domMutationRectsUpdateTimeoutId&&(clearTimeout(this.domMutationRectsUpdateTimeoutId),this.domMutationRectsUpdateTimeoutId=null),this.domObserver&&this.domObserver.disconnect(),this.elementResizeObserver&&this.elementResizeObserver.disconnect(),this.isSetup=!1},t}();exports.ForesightManager=n;
|
|
1
|
+
"use strict";var e=function(){return e=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var o in t=arguments[i])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},e.apply(this,arguments)};"function"==typeof SuppressedError&&SuppressedError;var t=function(){function e(e){this.shadowRoot=null,this.controlsContainer=null,this.elementListContainer=null,this.elementCountSpan=null,this.elementListItems=new Map,this.trajectoryEnabledCheckbox=null,this.historySizeSlider=null,this.historyValueSpan=null,this.predictionTimeSlider=null,this.predictionValueSpan=null,this.throttleDelaySlider=null,this.throttleValueSpan=null,this.minimizeButton=null,this.debuggerSection=null,this.isMinimized=!1,this.foresightManagerInstance=e}return e.prototype.initialize=function(e,t,i){this.shadowRoot=e,this._createDOM(),i.isControlPanelDefaultMinimized&&(this.isMinimized=!0),this.controlsContainer&&(this.shadowRoot.appendChild(this.controlsContainer),this._queryDOMElements(),this._setupEventListeners(),this.updateControlsState(t),this.refreshElementList(),this._applyMinimizedStateVisuals())},e.prototype._createDOM=function(){this.controlsContainer=document.createElement("div"),this.controlsContainer.id="jsforesight-debug-controls";this.controlsContainer.innerHTML='\n <div class="jsforesight-debugger-title-container">\n <button class="jsforesight-minimize-button">-</button>\n <h3>Foresight Debugger</h3>\n <span class="jsforesight-info-icon" title="Changes made here are for the current session only and won\'t persist. Update initial values in the ForesightManager.initialize() props for permanent changes.">i</span>\n </div>\n\n <div class="jsforesight-debugger-section">\n <h4>Session Settings</h4>\n <div class="control-row">\n <label for="jsforesight-trajectory-enabled">\n Enable Mouse Prediction\n <span class="jsforesight-info-icon" title="Toggles mouse movement prediction. If disabled, only direct hovers trigger actions.">i</span>\n </label>\n <input type="checkbox" id="jsforesight-trajectory-enabled">\n </div>\n <div class="control-row">\n <label for="jsforesight-history-size">\n History Size\n <span class="jsforesight-info-icon" title="Number of past mouse positions for velocity calculation (Min: 2, Max: 20). Higher values smooth predictions but add latency.">i</span>\n </label>\n <input type="range" id="jsforesight-history-size" min="2" max="20">\n <span id="jsforesight-history-value"></span>\n </div>\n <div class="control-row">\n <label for="jsforesight-prediction-time">\n Prediction Time (ms)\n <span class="jsforesight-info-icon" title="How far (ms) to project trajectory (Min: 10, Max: 500). Larger values detect intent sooner.">i</span>\n </label>\n <input type="range" id="jsforesight-prediction-time" min="10" max="500" step="10">\n <span id="jsforesight-prediction-value"></span>\n </div>\n <div class="control-row">\n <label for="jsforesight-throttle-delay">\n Scroll/Resize Throttle (ms)\n <span class="jsforesight-info-icon" title="Delay (ms) for recalculating element positions on resize/scroll (Min: 0, Max: 500). Higher values improve performance during rapid events.">i</span>\n </label>\n <input type="range" id="jsforesight-throttle-delay" min="0" max="500" step="10">\n <span id="jsforesight-throttle-value"></span>\n </div>\n \n <div class="jsforesight-debugger-section">\n <h4>Registered Elements (<span id="jsforesight-element-count">0</span>)</h4>\n <div id="jsforesight-element-list-items-container" class="jsforesight-element-list">\n <em>Initializing...</em>\n </div>\n </div>\n </div>\n '},e.prototype._queryDOMElements=function(){this.controlsContainer&&(this.trajectoryEnabledCheckbox=this.controlsContainer.querySelector("#jsforesight-trajectory-enabled"),this.historySizeSlider=this.controlsContainer.querySelector("#jsforesight-history-size"),this.historyValueSpan=this.controlsContainer.querySelector("#jsforesight-history-value"),this.predictionTimeSlider=this.controlsContainer.querySelector("#jsforesight-prediction-time"),this.predictionValueSpan=this.controlsContainer.querySelector("#jsforesight-prediction-value"),this.throttleDelaySlider=this.controlsContainer.querySelector("#jsforesight-throttle-delay"),this.throttleValueSpan=this.controlsContainer.querySelector("#jsforesight-throttle-value"),this.elementListContainer=this.controlsContainer.querySelector("#jsforesight-element-list-items-container"),this.elementCountSpan=this.controlsContainer.querySelector("#jsforesight-element-count"),this.minimizeButton=this.controlsContainer.querySelector(".jsforesight-minimize-button"),this.debuggerSection=this.controlsContainer.querySelector(".jsforesight-debugger-section"))},e.prototype._setupEventListeners=function(){var e,t,i,n,o,r=this;null===(e=this.trajectoryEnabledCheckbox)||void 0===e||e.addEventListener("change",(function(e){r.foresightManagerInstance.alterGlobalSettings({enableMousePrediction:e.target.checked})})),null===(t=this.historySizeSlider)||void 0===t||t.addEventListener("input",(function(e){var t=parseInt(e.target.value);r.historyValueSpan&&(r.historyValueSpan.textContent=t.toString()),r.foresightManagerInstance.alterGlobalSettings({positionHistorySize:t})})),null===(i=this.predictionTimeSlider)||void 0===i||i.addEventListener("input",(function(e){var t=parseInt(e.target.value);r.predictionValueSpan&&(r.predictionValueSpan.textContent=t.toString()),r.foresightManagerInstance.alterGlobalSettings({trajectoryPredictionTime:t})})),null===(n=this.throttleDelaySlider)||void 0===n||n.addEventListener("input",(function(e){var t=parseInt(e.target.value);r.throttleValueSpan&&(r.throttleValueSpan.textContent=t.toString()),r.foresightManagerInstance.alterGlobalSettings({resizeScrollThrottleDelay:t})})),null===(o=this.minimizeButton)||void 0===o||o.addEventListener("click",(function(){r.isMinimized=!r.isMinimized,r._applyMinimizedStateVisuals()}))},e.prototype._applyMinimizedStateVisuals=function(){this.minimizeButton&&this.debuggerSection&&this.controlsContainer&&(this.isMinimized?(this.debuggerSection.style.display="none",this.minimizeButton.textContent="+"):(this.debuggerSection.style.display="",this.minimizeButton.textContent="-"))},e.prototype.updateControlsState=function(e){this.trajectoryEnabledCheckbox&&(this.trajectoryEnabledCheckbox.checked=e.enableMousePrediction),this.historySizeSlider&&this.historyValueSpan&&(this.historySizeSlider.value=e.positionHistorySize.toString(),this.historyValueSpan.textContent=e.positionHistorySize.toString()),this.predictionTimeSlider&&this.predictionValueSpan&&(this.predictionTimeSlider.value=e.trajectoryPredictionTime.toString(),this.predictionValueSpan.textContent=e.trajectoryPredictionTime.toString()),this.throttleDelaySlider&&this.throttleValueSpan&&(this.throttleDelaySlider.value=e.resizeScrollThrottleDelay.toString(),this.throttleValueSpan.textContent=e.resizeScrollThrottleDelay.toString())},e.prototype.refreshElementList=function(){var e=this;if(this.elementListContainer){this.elementListContainer.innerHTML="",this.elementListItems.clear();var t=this.foresightManagerInstance.elements;this.elementCountSpan&&(this.elementCountSpan.textContent=t.size.toString()),0!==t.size?t.forEach((function(t,i){var n=document.createElement("div");n.className="jsforesight-element-list-item",e._updateListItemContent(n,t),e.elementListContainer.appendChild(n),e.elementListItems.set(i,n)})):this.elementListContainer.innerHTML="<em>No elements registered.</em>"}},e.prototype._updateListItemContent=function(e,t){e.classList.toggle("hovering",t.isHovering),e.classList.toggle("trajectory-hit",t.isTrajectoryHit);var i=t.unregisterOnCallback?"Single":"Multi",n=t.unregisterOnCallback?"Callback triggers once, then element unregisters.":"Callback can trigger multiple times.";e.innerHTML="\n ".concat('<span class="status-indicator"></span>','\n <span class="element-name" title="').concat(t.name||"Unnamed Element",'">').concat(t.name||"Unnamed Element",'</span>\n <span class="hit-behavior" title="').concat(n,'">').concat(i,'</span>\n <span class="element-details">(H: ').concat(t.isHovering?"Y":"N",", T: ").concat(t.isTrajectoryHit?"Y":"N",")</span>\n ")},e.prototype.cleanup=function(){var e;null===(e=this.controlsContainer)||void 0===e||e.remove(),this.controlsContainer=null,this.elementListContainer=null,this.elementCountSpan=null,this.elementListItems.clear(),this.minimizeButton=null,this.debuggerSection=null},e}(),i=function(){function e(e){this.shadowHost=null,this.shadowRoot=null,this.debugContainer=null,this.debugLinkOverlays=new Map,this.debugPredictedMouseIndicator=null,this.debugTrajectoryLine=null,this.debugStyleElement=null,this.controlPanel=null,this.lastElementData=new Map,this.foresightManagerInstance=e,this.controlPanel=new t(this.foresightManagerInstance)}return e.prototype.initialize=function(e,t,i,n){var o,r=this;"undefined"!=typeof window&&(this.cleanup(),this.shadowHost=document.createElement("div"),this.shadowHost.id="jsforesight-debugger-shadow-host",this.shadowHost.style.pointerEvents="none",document.body.appendChild(this.shadowHost),this.shadowRoot=this.shadowHost.attachShadow({mode:"open"}),this.debugStyleElement=document.createElement("style"),this.debugStyleElement.textContent='\n #jsforesight-debug-container { /* For on-page overlays */\n position: fixed; top: 0; left: 0; width: 100%; height: 100%;\n pointer-events: none; z-index: 9999;\n }\n .jsforesight-link-overlay {\n position: absolute; border: 2px solid transparent;\n background-color: rgba(0, 0, 255, 0.1); box-sizing: border-box;\n transition: opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;\n }\n .jsforesight-link-overlay.active {\n border-color: oklch(83.7% 0.128 66.29); background-color: rgba(255, 0, 0, 0.1);\n }\n .jsforesight-link-overlay.trajectory-hit {\n border-color: oklch(89.7% 0.196 126.665); background-color: rgba(0, 255, 0, 0.3);\n box-shadow: 0 0 10px rgba(0, 255, 0, 0.8);\n }\n .jsforesight-expanded-overlay {\n position: absolute; border: 1px dashed rgba(0, 0, 255, 0.3);\n background-color: rgba(0, 0, 255, 0.05); box-sizing: border-box;\n }\n .jsforesight-mouse-predicted {\n position: absolute; width: 20px; height: 20px; border-radius: 50%;\n border: 2px solid oklch(83.7% 0.128 66.29); background-color: rgba(255, 165, 0, 0.3);\n transform: translate(-50%, -50%); z-index: 10000;\n }\n .jsforesight-trajectory-line {\n position: absolute; height: 2px; background-color: rgba(255, 100, 0, 0.5);\n transform-origin: left center; z-index: 9999;\n }\n .jsforesight-name-label {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.75);\n color: white;\n padding: 3px 6px;\n font-size: 11px;\n font-family: Arial, sans-serif;\n border-radius: 3px;\n z-index: 10001;\n white-space: nowrap;\n pointer-events: none;\n }\n /* Styles for #jsforesight-debug-controls and its children are still needed here */\n #jsforesight-debug-controls {\n position: fixed; bottom: 10px; right: 10px;\n background-color: rgba(0, 0, 0, 0.75); color: white; padding: 12px;\n border-radius: 5px; font-family: Arial, sans-serif; font-size: 13px;\n z-index: 10001; pointer-events: auto; display: flex; flex-direction: column; gap: 8px;\n min-width: 300px; max-width: 350px;\n }\n .jsforesight-debugger-title-container {\n display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px;\n }\n .jsforesight-minimize-button{\n background: none; border: none; color: white;\n font-size: 22px; cursor: pointer; padding: 0;\n position: absolute; top: 10px; left: 15px;\n }\n .jsforesight-debugger-title-container h3 { margin: 0; font-size: 15px; }\n #jsforesight-debug-controls label { display: flex; align-items: center; gap: 5px; cursor: pointer; }\n #jsforesight-debug-controls input[type="range"] { flex-grow: 1; margin: 0 5px; cursor: pointer;}\n #jsforesight-debug-controls input[type="checkbox"] { margin-right: 5px; cursor: pointer; }\n #jsforesight-debug-controls .control-row { display: flex; align-items: center; justify-content: space-between; }\n #jsforesight-debug-controls .control-row label { flex-basis: auto; }\n #jsforesight-debug-controls .control-row span:not(.jsforesight-info-icon) { min-width: 30px; text-align: right; }\n .jsforesight-info-icon {\n display: inline-flex; align-items: center; justify-content: center;\n width: 16px; height: 16px; border-radius: 50%;\n background-color: #555; color: white;\n font-size: 10px; font-style: italic; font-weight: bold;\n font-family: \'Georgia\', serif;\n cursor: help; user-select: none;\n flex-shrink: 0;\n }\n .jsforesight-debugger-section {\n display: flex; flex-direction: column; gap: 6px;\n border-top: 1px solid #444;\n }\n .jsforesight-debugger-section h4 {\n margin: 5px 0 2px 0;\n font-size: 14px;\n font-weight: bold;\n }\n .jsforesight-element-list {\n max-height: 150px;\n overflow-y: auto;\n background-color: rgba(20, 20, 20, 0.5);\n border-radius: 3px;\n padding: 5px;\n font-size: 12px;\n }\n .jsforesight-element-list-item {\n padding: 4px 6px;\n margin-bottom: 3px;\n border-radius: 2px;\n display: flex;\n align-items: center;\n gap: 6px;\n background-color: rgba(50,50,50,0.7);\n transition: background-color 0.2s ease;\n }\n .jsforesight-element-list-item:last-child {\n margin-bottom: 0;\n }\n .jsforesight-element-list-item .status-indicator {\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: #777;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n font-size: 8px;\n }\n .jsforesight-element-list-item.hovering .status-indicator {\n background-color: oklch(83.7% 0.128 66.29 / 0.7);\n }\n .jsforesight-element-list-item.trajectory-hit .status-indicator {\n background-color: oklch(89.7% 0.196 126.665 / 0.7);\n }\n .jsforesight-element-list-item.hovering.trajectory-hit .status-indicator {\n background: linear-gradient(45deg, oklch(89.7% 0.196 126.665 / 0.7) 50%, oklch(83.7% 0.128 66.29 / 0.7) 50%);\n }\n .jsforesight-element-list-item .element-name {\n flex-grow: 1;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n .jsforesight-element-list-item .element-details {\n font-size: 10px;\n color: #ccc;\n flex-shrink: 0;\n }\n .jsforesight-element-list-item .hit-behavior {\n font-size: 10px;\n color: #b0b0b0;\n margin-right: 5px;\n padding: 1px 3px;\n border-radius: 2px;\n background-color: rgba(0,0,0,0.2);\n flex-shrink: 0;\n }\n ',this.shadowRoot.appendChild(this.debugStyleElement),this.debugContainer=document.createElement("div"),this.debugContainer.id="jsforesight-debug-container",this.shadowRoot.appendChild(this.debugContainer),this.debugPredictedMouseIndicator=document.createElement("div"),this.debugPredictedMouseIndicator.className="jsforesight-mouse-predicted",this.debugContainer.appendChild(this.debugPredictedMouseIndicator),this.debugTrajectoryLine=document.createElement("div"),this.debugTrajectoryLine.className="jsforesight-trajectory-line",this.debugContainer.appendChild(this.debugTrajectoryLine),this.shadowRoot&&(null===(o=this.controlPanel)||void 0===o||o.initialize(this.shadowRoot,t,t.debuggerSettings)),e.forEach((function(e,t){r.createOrUpdateLinkOverlay(t,e)})),this.updateTrajectoryVisuals(i,n,t.enableMousePrediction))},e.prototype.cleanup=function(){var e,t;console.log("[ForesightDebugger] cleanup() called. All debug elements will be removed."),null===(e=this.controlPanel)||void 0===e||e.cleanup(),null===(t=this.shadowHost)||void 0===t||t.remove(),this.shadowHost=null,this.shadowRoot=null,this.debugContainer=null,this.debugLinkOverlays.clear(),this.lastElementData.clear(),this.debugPredictedMouseIndicator=null,this.debugTrajectoryLine=null,this.debugStyleElement=null},e.prototype.createOrUpdateLinkOverlay=function(e,t){var i;if(this.debugContainer&&this.shadowRoot){this.lastElementData.set(e,{isHovering:t.isHovering,isTrajectoryHit:t.isTrajectoryHit});var n=this.debugLinkOverlays.get(e);if(!n){var o=document.createElement("div");o.className="jsforesight-link-overlay",this.debugContainer.appendChild(o);var r=document.createElement("div");r.className="jsforesight-expanded-overlay",this.debugContainer.appendChild(r);var s=document.createElement("div");s.className="jsforesight-name-label",this.debugContainer.appendChild(s),n={linkOverlay:o,expandedOverlay:r,nameLabel:s},this.debugLinkOverlays.set(e,n)}var l=n.linkOverlay,a=n.expandedOverlay,d=n.nameLabel,c=e.getBoundingClientRect();l.style.left="".concat(c.left,"px"),l.style.top="".concat(c.top,"px"),l.style.width="".concat(c.width,"px"),l.style.height="".concat(c.height,"px"),l.classList.toggle("trajectory-hit",t.isTrajectoryHit),l.classList.toggle("active",t.isHovering),t.elementBounds.expandedRect?(a.style.left="".concat(t.elementBounds.expandedRect.left,"px"),a.style.top="".concat(t.elementBounds.expandedRect.top,"px"),a.style.width="".concat(t.elementBounds.expandedRect.right-t.elementBounds.expandedRect.left,"px"),a.style.height="".concat(t.elementBounds.expandedRect.bottom-t.elementBounds.expandedRect.top,"px"),a.style.display="block"):a.style.display="none",t.name&&"Unnamed"!==t.name?(d.textContent=t.name,d.style.display="block",d.style.left="".concat(c.left,"px"),d.style.top="".concat(c.top-22,"px")):d.style.display="none",null===(i=this.controlPanel)||void 0===i||i.refreshElementList()}},e.prototype.removeLinkOverlay=function(e){var t,i=this.debugLinkOverlays.get(e);i&&(i.linkOverlay.remove(),i.expandedOverlay.remove(),i.nameLabel.remove(),this.debugLinkOverlays.delete(e)),this.lastElementData.delete(e),null===(t=this.controlPanel)||void 0===t||t.refreshElementList()},e.prototype.refreshDisplayedElements=function(){var e,t=this,i=new Set(this.foresightManagerInstance.elements.keys());this.foresightManagerInstance.elements.forEach((function(e,i){t.createOrUpdateLinkOverlay(i,e)})),Array.from(this.debugLinkOverlays.keys()).filter((function(e){return!i.has(e)})).forEach((function(e){var i=t.debugLinkOverlays.get(e);null==i||i.linkOverlay.remove(),null==i||i.expandedOverlay.remove(),null==i||i.nameLabel.remove(),t.debugLinkOverlays.delete(e),t.lastElementData.delete(e)})),null===(e=this.controlPanel)||void 0===e||e.refreshElementList()},e.prototype.updateAllLinkVisuals=function(e){this.shadowRoot&&this.debugContainer&&this.refreshDisplayedElements()},e.prototype.updateTrajectoryVisuals=function(e,t,i){if(this.shadowRoot&&this.debugContainer){var n=this.foresightManagerInstance.elements.size>0,o=i&&n;if(this.debugPredictedMouseIndicator&&(this.debugPredictedMouseIndicator.style.left="".concat(t.x,"px"),this.debugPredictedMouseIndicator.style.top="".concat(t.y,"px"),this.debugPredictedMouseIndicator.style.display="block"),this.debugTrajectoryLine)if(o&&e&&t){var r=t.x-e.x,s=t.y-e.y;if(Math.abs(r)<.1&&Math.abs(s)<.1)return void(this.debugTrajectoryLine.style.display="none");var l=Math.sqrt(r*r+s*s),a=180*Math.atan2(s,r)/Math.PI;this.debugTrajectoryLine.style.left="".concat(e.x,"px"),this.debugTrajectoryLine.style.top="".concat(e.y,"px"),this.debugTrajectoryLine.style.width="".concat(l,"px"),this.debugTrajectoryLine.style.transform="translateY(-50%) rotate(".concat(a,"deg)"),this.debugTrajectoryLine.style.display="block"}else this.debugTrajectoryLine.style.display="none"}},e.prototype.updateControlsState=function(e){var t;null===(t=this.controlPanel)||void 0===t||t.updateControlsState(e)},e}(),n=function(){function t(){var t=this;this.elements=new Map,this.isSetup=!1,this.debugger=null,this.globalSettings={debug:!1,enableMousePrediction:!0,positionHistorySize:8,trajectoryPredictionTime:80,defaultHitSlop:{top:0,left:0,right:0,bottom:0},resizeScrollThrottleDelay:50,debuggerSettings:{isControlPanelDefaultMinimized:!1}},this.positions=[],this.currentPoint={x:0,y:0},this.predictedPoint={x:0,y:0},this.lastResizeScrollCallTimestamp=0,this.resizeScrollThrottleTimeoutId=null,this.domObserver=null,this.lastDomMutationRectsUpdateTimestamp=0,this.domMutationRectsUpdateTimeoutId=null,this.elementResizeObserver=null,this.normalizeHitSlop=function(e){return"number"==typeof e?{top:e,left:e,right:e,bottom:e}:e},this.predictMousePosition=function(e){var i={point:e,time:performance.now()},n=e.x,o=e.y;if(t.positions.push(i),t.positions.length>t.globalSettings.positionHistorySize&&t.positions.shift(),t.positions.length<2)return{x:n,y:o};var r=t.positions[0],s=t.positions[t.positions.length-1],l=(s.time-r.time)/1e3;if(0===l)return{x:n,y:o};var a=(s.point.x-r.point.x)/l,d=(s.point.y-r.point.y)/l,c=t.globalSettings.trajectoryPredictionTime/1e3;return{x:n+a*c,y:o+d*c}},this.handleMouseMove=function(i){t.currentPoint={x:i.clientX,y:i.clientY},t.predictedPoint=t.globalSettings.enableMousePrediction?t.predictMousePosition(t.currentPoint):t.currentPoint;var n=null;t.debugger&&(n=[]);var o=[];t.elements.forEach((function(i,r){if(t.elements.has(r)){var s={isHovering:i.isHovering,isTrajectoryHit:i.isTrajectoryHit,trajectoryHitTime:i.trajectoryHitTime,trajectoryHitExpirationTimeoutId:i.trajectoryHitExpirationTimeoutId},l=!1,a=i.isHovering,d=i.isTrajectoryHit,c=i.trajectoryHitTime,h=i.elementBounds.expandedRect,u=t.currentPoint.x>=h.left&&t.currentPoint.x<=h.right&&t.currentPoint.y>=h.top&&t.currentPoint.y<=h.bottom,g=!1;if(!t.globalSettings.enableMousePrediction||u||i.isTrajectoryHit||t.lineSegmentIntersectsRect(t.currentPoint,t.predictedPoint,h)&&(g=!0),g&&(i.callback(),l=!0,d=!0,c=performance.now()),u&&!i.isHovering){var p=!i.isTrajectoryHit||i.isTrajectoryHit&&!t.globalSettings.enableMousePrediction;!l&&p&&(i.callback(),l=!0)}if(a=u,l&&i.unregisterOnCallback&&o.push(r),(a!==s.isHovering||d!==s.isTrajectoryHit||d&&c!==s.trajectoryHitTime)&&t.elements.has(r)){var m=e(e({},i),{isHovering:a,isTrajectoryHit:d,trajectoryHitTime:c,trajectoryHitExpirationTimeoutId:s.trajectoryHitExpirationTimeoutId});m.isTrajectoryHit&&!s.isTrajectoryHit?(m.trajectoryHitExpirationTimeoutId&&clearTimeout(m.trajectoryHitExpirationTimeoutId),m.trajectoryHitExpirationTimeoutId=setTimeout((function(){var i=t.elements.get(r);if(i&&i.isTrajectoryHit&&i.trajectoryHitTime===m.trajectoryHitTime){var n=e(e({},i),{isTrajectoryHit:!1,trajectoryHitExpirationTimeoutId:void 0});t.elements.set(r,n),t.debugger&&t.debugger.createOrUpdateLinkOverlay(r,n)}}),200)):!m.isTrajectoryHit&&s.isTrajectoryHit&&m.trajectoryHitExpirationTimeoutId&&(clearTimeout(m.trajectoryHitExpirationTimeoutId),m.trajectoryHitExpirationTimeoutId=void 0),t.elements.set(r,m),n&&n.push(r)}}})),o.length>0&&o.forEach((function(e){var i;if(t.elements.has(e)){var n=(null===(i=t.elements.get(e))||void 0===i?void 0:i.name)||"Unnamed";console.log('Unregistering element "'.concat(n,'" due to callback and unregisterOnCallback=true.')),t.unregister(e)}})),t.debugger&&(null==n||n.forEach((function(e){var i=t.elements.get(e);i&&t.debugger.createOrUpdateLinkOverlay(e,i)})),t.debugger.updateTrajectoryVisuals(t.currentPoint,t.predictedPoint,t.globalSettings.enableMousePrediction))},this.handleResizeOrScroll=function(){t.resizeScrollThrottleTimeoutId&&clearTimeout(t.resizeScrollThrottleTimeoutId);var e=performance.now(),i=e-t.lastResizeScrollCallTimestamp,n=t.globalSettings.resizeScrollThrottleDelay;i>=n?(t.updateAllRects(),t.lastResizeScrollCallTimestamp=e,t.resizeScrollThrottleTimeoutId=null):t.resizeScrollThrottleTimeoutId=setTimeout((function(){t.updateAllRects(),t.lastResizeScrollCallTimestamp=performance.now(),t.resizeScrollThrottleTimeoutId=null}),n-i)},this.handleElementResize=function(e){for(var i=0,n=e;i<n.length;i++){var o=n[i].target;t.elements.get(o)&&t.updateExpandedRect(o)}},this.handleDomMutations=function(e){for(var i=!1,n=0,o=e;n<o.length;n++){var r=o[n];if("childList"===r.type&&r.removedNodes.length>0)for(var s=0,l=Array.from(t.elements.keys());s<l.length;s++){var a=l[s];a.isConnected||t.elements.has(a)&&t.unregister(a)}"childList"!==r.type&&("attributes"!==r.type||"style"!==r.attributeName&&"class"!==r.attributeName)||(i=!0)}if(i&&t.elements.size>0){t.domMutationRectsUpdateTimeoutId&&clearTimeout(t.domMutationRectsUpdateTimeoutId);var d=performance.now(),c=t.globalSettings.resizeScrollThrottleDelay,h=d-t.lastDomMutationRectsUpdateTimestamp;h>=c?(t.updateAllRects(),t.lastDomMutationRectsUpdateTimestamp=d,t.domMutationRectsUpdateTimeoutId=null):t.domMutationRectsUpdateTimeoutId=setTimeout((function(){t.updateAllRects(),t.lastDomMutationRectsUpdateTimestamp=performance.now(),t.domMutationRectsUpdateTimeoutId=null}),c-h)}}}return t.initialize=function(e){return t.manager?e&&(console.warn("ForesightManager is already initialized. Use alterGlobalSettings to update settings. Make sure to not put the ForesightManager.initialize() in a place that rerenders often."),t.manager.alterGlobalSettings(e)):(t.manager=new t,e?t.manager.alterGlobalSettings(e):t.manager.globalSettings.debug&&t.manager.turnOnDebugMode()),t.manager},Object.defineProperty(t,"instance",{get:function(){return t.manager?t.manager:this.initialize()},enumerable:!1,configurable:!0}),t.prototype.register=function(e,t,i,n,o){var r=this;void 0===o&&(o=!0);var s=i?this.normalizeHitSlop(i):this.globalSettings.defaultHitSlop,l=e.getBoundingClientRect(),a={callback:t,elementBounds:{expandedRect:this.getExpandedRect(l,s),originalRect:l,hitSlop:s},isHovering:!1,isTrajectoryHit:!1,trajectoryHitTime:0,name:null!=n?n:"Unnamed",unregisterOnCallback:o,trajectoryHitExpirationTimeoutId:void 0};if(this.elements.set(e,a),this.isSetup||this.setupGlobalListeners(),this.elementResizeObserver&&this.elementResizeObserver.observe(e),this.debugger){var d=this.elements.get(e);d&&this.debugger.createOrUpdateLinkOverlay(e,d),this.debugger.refreshDisplayedElements()}return function(){return r.unregister(e)}},t.prototype.unregister=function(e){if(this.elements.has(e)){var t=this.elements.get(e);null==t||t.name,(null==t?void 0:t.trajectoryHitExpirationTimeoutId)&&clearTimeout(t.trajectoryHitExpirationTimeoutId),this.elementResizeObserver&&this.elementResizeObserver.unobserve(e),this.elements.delete(e),this.debugger&&(this.debugger.removeLinkOverlay(e),this.debugger.refreshDisplayedElements()),0===this.elements.size&&this.isSetup&&this.removeGlobalListeners()}else console.warn("Attempted to unregister element not found:",e)},t.prototype.alterGlobalSettings=function(t){var i,n=this,o=!1;if(void 0!==(null==t?void 0:t.positionHistorySize)&&this.globalSettings.positionHistorySize!==t.positionHistorySize&&(this.globalSettings.positionHistorySize=t.positionHistorySize,o=!0),void 0!==(null==t?void 0:t.trajectoryPredictionTime)&&this.globalSettings.trajectoryPredictionTime!==t.trajectoryPredictionTime&&(this.globalSettings.trajectoryPredictionTime=t.trajectoryPredictionTime,o=!0),void 0!==(null==t?void 0:t.enableMousePrediction)&&this.globalSettings.enableMousePrediction!==t.enableMousePrediction&&(this.globalSettings.enableMousePrediction=t.enableMousePrediction,o=!0,this.globalSettings.enableMousePrediction?this.predictedPoint=this.predictMousePosition(this.currentPoint):(this.predictedPoint=this.currentPoint,this.elements.forEach((function(t,i){if(t.isTrajectoryHit){t.trajectoryHitExpirationTimeoutId&&clearTimeout(t.trajectoryHitExpirationTimeoutId);var o=e(e({},t),{isTrajectoryHit:!1,trajectoryHitTime:0,trajectoryHitExpirationTimeoutId:void 0});n.elements.set(i,o),n.debugger&&n.debugger.createOrUpdateLinkOverlay(i,o)}})))),void 0!==(null===(i=null==t?void 0:t.debuggerSettings)||void 0===i?void 0:i.isControlPanelDefaultMinimized)&&(this.globalSettings.debuggerSettings.isControlPanelDefaultMinimized=t.debuggerSettings.isControlPanelDefaultMinimized,o=!0),void 0!==(null==t?void 0:t.defaultHitSlop)){var r=this.normalizeHitSlop(t.defaultHitSlop);this.areRectsEqual(this.globalSettings.defaultHitSlop,r)||(this.globalSettings.defaultHitSlop=r,o=!0,this.elements.forEach((function(e,t){n.updateExpandedRect(t)})))}void 0!==(null==t?void 0:t.resizeScrollThrottleDelay)&&this.globalSettings.resizeScrollThrottleDelay!==t.resizeScrollThrottleDelay&&(this.globalSettings.resizeScrollThrottleDelay=t.resizeScrollThrottleDelay,o=!0),void 0!==(null==t?void 0:t.debug)&&this.globalSettings.debug!==t.debug&&(this.globalSettings.debug=t.debug,o=!0,this.globalSettings.debug?this.turnOnDebugMode():this.debugger&&(this.debugger.cleanup(),this.debugger=null)),o&&this.globalSettings.debug&&this.debugger&&(this.debugger.updateControlsState(this.globalSettings),this.debugger.updateTrajectoryVisuals(this.currentPoint,this.predictedPoint,this.globalSettings.enableMousePrediction),this.elements.forEach((function(e,t){n.debugger.createOrUpdateLinkOverlay(t,e)})),this.debugger.refreshDisplayedElements())},t.prototype.turnOnDebugMode=function(){this.debugger?(this.debugger.updateControlsState(this.globalSettings),this.debugger.updateAllLinkVisuals(this.elements),this.debugger.updateTrajectoryVisuals(this.currentPoint,this.predictedPoint,this.globalSettings.enableMousePrediction)):(this.debugger=new i(this),this.debugger.initialize(this.elements,this.globalSettings,this.currentPoint,this.predictedPoint))},t.prototype.getExpandedRect=function(e,t){return{left:e.left-t.left,right:e.right+t.right,top:e.top-t.top,bottom:e.bottom+t.bottom}},t.prototype.areRectsEqual=function(e,t){return e&&t?e.left===t.left&&e.right===t.right&&e.top===t.top&&e.bottom===t.bottom:e===t},t.prototype.updateExpandedRect=function(t){var i=this.elements.get(t);if(i){var n=t.getBoundingClientRect(),o=i.elementBounds.hitSlop,r=this.getExpandedRect(n,o);if((!this.areRectsEqual(r,i.elementBounds.expandedRect)||!this.areRectsEqual(n,i.elementBounds.originalRect))&&(this.elements.set(t,e(e({},i),{elementBounds:e(e({},i.elementBounds),{originalRect:n,expandedRect:r})})),this.debugger)){var s=this.elements.get(t);s&&this.debugger.createOrUpdateLinkOverlay(t,s)}}},t.prototype.updateAllRects=function(){var e=this;this.elements.forEach((function(t,i){e.updateExpandedRect(i)}))},t.prototype.lineSegmentIntersectsRect=function(e,t,i){var n=0,o=1,r=t.x-e.x,s=t.y-e.y,l=function(e,t){if(0===e){if(t<0)return!1}else{var i=t/e;if(e<0){if(i>o)return!1;i>n&&(n=i)}else{if(i<n)return!1;i<o&&(o=i)}}return!0};return!!l(-r,e.x-i.left)&&(!!l(r,i.right-e.x)&&(!!l(-s,e.y-i.top)&&(!!l(s,i.bottom-e.y)&&n<=o)))},t.prototype.setupGlobalListeners=function(){var e=this;this.isSetup||(document.addEventListener("mousemove",this.handleMouseMove),window.addEventListener("resize",this.handleResizeOrScroll),window.addEventListener("scroll",this.handleResizeOrScroll),this.domObserver||(this.domObserver=new MutationObserver(this.handleDomMutations)),this.domObserver.observe(document.documentElement,{childList:!0,subtree:!0,attributes:!0}),this.elementResizeObserver||(this.elementResizeObserver=new ResizeObserver(this.handleElementResize),this.elements.forEach((function(t,i){return e.elementResizeObserver.observe(i)}))),this.isSetup=!0)},t.prototype.removeGlobalListeners=function(){document.removeEventListener("mousemove",this.handleMouseMove),window.removeEventListener("resize",this.handleResizeOrScroll),window.removeEventListener("scroll",this.handleResizeOrScroll),this.resizeScrollThrottleTimeoutId&&(clearTimeout(this.resizeScrollThrottleTimeoutId),this.resizeScrollThrottleTimeoutId=null),this.domMutationRectsUpdateTimeoutId&&(clearTimeout(this.domMutationRectsUpdateTimeoutId),this.domMutationRectsUpdateTimeoutId=null),this.domObserver&&this.domObserver.disconnect(),this.elementResizeObserver&&this.elementResizeObserver.disconnect(),this.isSetup=!1},t}();exports.ForesightManager=n;
|
|
2
2
|
//# sourceMappingURL=index.js.map
|