Pointer Stuck at the Edge of Iframe Image in Clarity-Devtool - clarity

Dear Microsoft Clarity Team,
I hope this message finds you well. I have been testing the Clarity-Devtool and I noticed an issue while using it. When I move my pointer over an iframe image, the pointer gets stuck at the edge of the image and does not move inside the iframe.
I was wondering if there is a way to resolve this issue so that the pointer can move inside the iframe image as well. I understand that Clarity does not support viewing the content of the iframe, but I believe that moving the pointer over the iframe area should be allowed.
This would greatly enhance my experience with the Clarity-Devtool and provide me with more accurate insights into user behavior.
I also added it sandbox="allow-same-origin allow-scripts allow-pointer-lock" but it does not work also
enter image description here
function mouse(event: Event, root: Node, evt: MouseEvent): void {
let frame = iframe(root);
let d = frame ? frame.contentDocument.documentElement : document.documentElement;
let x = "pageX" in evt ? Math.round(evt.pageX) : ("clientX" in evt ? Math.round(evt["clientX"] + d.scrollLeft) : null);
let y = "pageY" in evt ? Math.round(evt.pageY) : ("clientY" in evt ? Math.round(evt["clientY"] + d.scrollTop) : null);
// In case of iframe, we adjust (x,y) to be relative to top parent's origin
if (frame) {
let distance = offset(frame);
x = x ? x + Math.round(distance.x) : x;
y = y ? y + Math.round(distance.y) : y;
}
console.log('pointer.ts Intersection x:' + x + ' y:' + y);
// Check for null values before processing this event
if (x !== null && y !== null) { handler({ time: time(), event, data: { target: target(evt), x, y } }); }
}
I added console.log('pointer.ts Intersection x:' + x + ' y:' + y); to the \src\interaction\pointer.ts
to track the pointer location
I see it in the console the coordinates but tbe pointer does not move into the frame image.
Here is the link to my test website https://thankful-pond-0d14a730f.2.azurestaticapps.net/
I'm using the Clarity Devtool Extension
It contains two iframes.
The Iframe on the top (green) has a source URL to a local file on the same domain src="/myLocalIframe.html, and it works as expected.
enter image description here
The one on bottom (red) has a source URL to a different website https://kind-moss-07698f50f.2.azurestaticapps.net/ , and it does not work
enter image description here
Here is the [Decoded Data (Page)]
enter link description here
Let me know if this help you debug it from your end.

Related

How to check if element is visible in viewport?

If I am at the bottom of the page how can I check if some element is visible if that element is for example at the top of the page.
I need to write a test where I scroll down to the bottom of the page and when I click on div it moves me back to the top of the page. Next step is to check if I am at that position.
My idea was that I just need to check if that element is visible but it turns out that it is not that easy to do. Any suggestions?
.isDisplayed() and .isFocused() is not what I need.
Edit:
I had an idea and I need two methods for it.
First one is to get y coordinate of the element (we need only y), but the problem is that getY() returns number relative to your current position, so I need something that will move me to that element and then get y coordinate. So my method looked something like this:
int getYCoordinat() {
// first move to the element
interact {
moveToElement(element)
}
// get y coord
return element.getY()
}
second method looked something like this:
boolean isScrolledToElement(int yCoordinateOfElement) {
int y = element.getY()
return y == yCoordinateOfElement
}
}
So first I would call getYCoordinat(), store integer into yCoordinateOfElement.
Then I would click on div that moves me to the element and call isScrolledToElement(yCoordinateOfElement).
But it doesnt work because moveToElement moves you to that element only if the element is not visible. So if we stay where we are because moveToElement() didn't move us, because element is already visible, we get the wrong Y coordinate that won't be same as the one which we get when we click on div that moves us to the element.
Here is the only solution I could find. Basically you need to see if the pixel coordinate of the bottom-right corner of your element is within the window.
Taken from the link:
private boolean isWebElementVisible(WebElement w) {
Dimension weD = w.getSize();
Point weP = w.getLocation();
Dimension d = driver.manage().window().getSize();
int x = d.getWidth();
int y = d.getHeight();
int x2 = weD.getWidth() + weP.getX();
int y2 = weD.getHeight() + weP.getY();
return x2 <= x && y2 <= y;
}

NVD3 tooltip pointer not updating position after updating chart data

I'm using the NVD3 library to draw a graph. I am using the interactive guideline and for some reason after I update the chart data + graph, the tooltip pointers stay at the old position.
When I update the data I do this:
chartData.datum(data).call(chart);
Everything updates fine except the position of the pointers of the tooltip. They seem to get stuck at the old position. I also tried calling this:
chart.update();
I noticed that when resizing my window and calling chart.update(), the pointers are set to the right position.
Someone any idea how to fix this?
Found it! I apparently had to add transition().duration(500);
So in order to update the graph I call this:
chartData.datum(data)
.transition().duration(500)
.call(chart);
Can you post a Little More description about the problem ... Becuase Previously i was having the Same .. that override the nvd3 tooltip function
`this._nvctp = nv.tooltip.calcTooltipPosition;
nv.tooltip.calcTooltipPosition = this.calcTooltipPosition;
calcTooltipPosition : function() {
this.findTotalOffsetTop = function(a, b) {
return 0;
};
this.findTotalOffsetLeft = function(a, b) {
return 0;
};
arguments[0] = [ window.event.pageX, window.event.pageY ];
var p = nvk.tooltip._nvctp.apply(this, arguments);
p.style.left = (window.event.clientX - (p.clientWidth / 2))
+ 'px';
p.style.top = (window.event.clientY - (p.clientHeight * 1.2))
+ 'px';
p.style.opacity = 1;
p.style.position = 'fixed';
return p;
}

OL3 V3.1.1 to V3.8.2 broke ol.source.xyz from PouchDB

I recently updated my Cordova mobile mapping app from OL3 V3.1.1 to V3.7.0 to V3.8.2.
Am using PouchDB to store off-line tiles, and with V3.1.1 tiles were visible.
Here is the code snippet:
OSM_bc_offline_pouchdb = new ol.layer.Tile({
//maxResolution: 5000,
//extent: BC,
//projection: spherical_mercator,
//crossOrigin: 'anonymous',
source: new ol.source.XYZ({
//adapted from: http://jsfiddle.net/gussy/LCNWC/
tileLoadFunction: function (imageTile, src) {
pouchTilesDB_osm_bc_baselayer.getAttachment(src, 'tile', function (err, res) {
if (err && err.error == 'not_found')
return;
//if(!res) return; // ?issue -> causes map refresh on movement to stop
imageTile.getImage().src = window.URL.createObjectURL(res);
});
},
tileUrlFunction: function (coordinate, projection) {
if (coordinate == null)
return undefined;
// OSM NW origin style URL
var z = coordinate[0];
var x = coordinate[1];
var y = coordinate[2];
var imgURL = ["tile", z, x, y].join('_');
return imgURL;
}
})
});
trails_mobileMap.addLayer(OSM_bc_offline_pouchdb);
OSM_bc_offline_pouchdb.setVisible(true);
Moving to both V3.7.0 and V3.8.2 causes the tiles to not display. Read the API and I'm missing why this would happen.
What in my code needs updating to work with OL-V3.8.2?
Thanks,
Peter
Your issue might be related to the changes to ol.TileCoord in OpenLayers 3.7.0. From the release notes:
Until now, the API exposed two different types of ol.TileCoord tile coordinates: internal ones that increase left to right and upward, and transformed ones that may increase downward, as defined by a transform function on the tile grid. With this change, the API now only exposes tile coordinates that increase left to right and upward.
Previously, tile grids created by OpenLayers either had their origin at the top-left or at the bottom-left corner of the extent. To make it easier for application developers to transform tile coordinates to the common XYZ tiling scheme, all tile grids that OpenLayers creates internally have their origin now at the top-left corner of the extent.
This change affects applications that configure a custom tileUrlFunction for an ol.source.Tile. Previously, the tileUrlFunction was called with rather unpredictable tile coordinates, depending on whether a tile coordinate transform took place before calling the tileUrlFunction. Now it is always called with OpenLayers tile coordinates. To transform these into the common XYZ tiling scheme, a custom tileUrlFunction has to change the y value (tile row) of the ol.TileCoord:
function tileUrlFunction = function(tileCoord, pixelRatio, projection){
var urlTemplate = '{z}/{x}/{y}';
return urlTemplate
.replace('{z}', tileCoord[0].toString())
.replace('{x}', tileCoord[1].toString())
.replace('{y}', (-tileCoord[2] - 1).toString());
}
If this is your issue, try changing your tileUrlFunction to
function (coordinate, projection) {
if (coordinate == null)
return undefined;
// OSM NW origin style URL
var z = coordinate[0];
var x = coordinate[1];
var y = (-coordinate[2] - 1);
var imgURL = ["tile", z, x, y].join('_');
return imgURL;
}

Get new crop coordinates after rotation

I have a site where one of the features lets users rotate/crop images. I'm using the following tools:
- Aspose for rotation
- Jcrop
before rotation to 90 or -90 the crop coordinates are correct but after rotation those coordinates are no longer.
I have tried to change the coordinates as follow :
newX -> croppingCoordinates.w - croppingCoordinates.y - 1
newY -> croppingCoordinates.x
Note that croppingCoordinates is the jcrop coordinate resulting from "onChange" jcrop event.
Any idea where the calculation are wrong ?!!
Thank you in advanced
I found i turn around that works for me, maybe it will help someone else.
it's simply by adding trueSize Jcrop property when attaching the Jcrop method to the div. So when i have a rotated image by 90 degree i simply set width = height and vice verse. like the following code snippet:
if (rotationDegree == 90 || rotationDegree == -90 ){
w = $('#myDiv').height();
h = $('#myDiv').width();
jQuery(function ($) {
$('#myDiv').Jcrop({
onChange: showCoords,
keySupport: false,
trueSize: [w, h]
}, function () {
jcrop_api = this;
});
});
}

JQplot tooltip for multiple y axes

For a JQplot chart with 2 y axes, I am able to set the tooltip but when i hover over a datapoint i need to know to which y axis the tooltip belongs. I need this so that i can display the tooltip after multiplying with the appropriate scale factor. The code i tried is shown below. I thought y will be null when we hover over a data point belonging to y2 axis. But y is never null.
$("#"+sTargetId).bind('jqplotcustomDataMouseOver',
function (ev, seriesIndex, pointIndex, data) {
var chart_left = $("#"+sTargetId).offset().left,
chart_right = ($(window).width() - ($("#"+sTargetId).offset().left + $("#"+sTargetId).outerWidth())),
chart_top = $("#"+sTargetId).offset().top,
x = oPlot.axes.xaxis.u2p(data[0]),
y = oPlot.axes.yaxis.u2p(data[1]),
y2 = oPlot.axes.y2axis.u2p(data[1]);;
if(y===null|| y===undefined){ //this condition doesnt work
var tooltipDataYaxis = data[1]*scaleYaxis1;
var sYDisplay = this.sYAxis1MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y, marginRight:chart_right});
}
else{
tooltipDataYaxis = data[1]*scaleYaxis2;
sYDisplay = this.sYAxis2MeasureName;
$('#tooltip').css({left:chart_left+x, top:chart_top+y2, marginRight:chart_right});
}
$('#tooltip').html(
'<span style="font-family: Arial;font-size:'+sTooltip+';font:bold;color:#000000;">'+ sYDisplay+': ' + tooltipDataYaxis +'</span>');
$('#tooltip').show();
});
$("#"+sTargetId).bind('jqplotcustomDataUnhighlight',
function (ev, seriesIndex, pointIndex, data) {
$('#tooltip').empty();
$('#tooltip').hide();
});
}
The variable seriesIndex will help to identify which series the tooltip belongs to. :)
I was just playing with jqplot for the first time. quite fun.
In the highlighter plugin jqplot.highlighter.js
I extended it on line 336
elem.html(str + " component:"+neighbor.data[2]);
You might use Chrome developer tools to get the data model at this point and look at the contents of the neighbor object.
(scope variables > Local > neighbor > data )
That's how I did it anywho. Hope it helps.

Resources