xeokit-sdk
xeokit-sdk copied to clipboard
Clipping with DistanceMeasurementsPlugin not possible if view is not full screen
Describe the bug I am using a xeokit view which is not 100% of the screen; it's a section of a (flexbox) UI with sidebars.
I want to use the DistanceMeasurementsPlugin. However, I cannot seem to make this work where it both clips and positions the lines correctly (I can only get one, or the other)
To Reproduce I have the viewer in the following divs:
<div id="myViewer" ref="myViewer">
<div id="myMeasure" ref="myMeasure">
</div>
<canvas id="myCanvas">
</canvas>
I construct the distanceViewer plugin passing the DIV I require:
const viewerDiv = this.$refs["myMeasure"];
const measurementsConfig = {
container: viewerDiv
}
this.distanceMeasurements = new DistanceMeasurementsPlugin(this.viewer, measurementsConfig);
If I use the following CSS,
- The intial 'dot' is offset incorrectly in the canvas
- The measurement is OK, but
- the measurements do not clip to the canvas extents:
#myMeasure {
}
#myViewer {
display: flex;
width: 100%;
height: 100%;
}
If I adjust the CSS to the following,
- The inital dot is ok
- The measurements clip ok, but
- All measurements drawn are offset by the x, y of the myMeasure canvas.
#myMeasure {
overflow: hidden;
width:100%;
height: 100%;
left: 0;
top: 0;
position: absolute;
z-index: 5000005;
pointer-events: none;
}
#myViewer {
display: flex;
width: 100%;
height: 100%;
position: relative;
}
I think this could work if the plugin could take into account the offset of the div that it is drawing on; though I may have missed some other option ?
We had the same problem, but the PR has never been merged: https://github.com/xeokit/xeokit-sdk/pull/794
Oh, cool, I was a bit worried I was missing something. Would be good if this could be merged as it doesn't look too complicated.