Clipping with DistanceMeasurementsPlugin not possible if view is not full screen

[magnayn]

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 ?

[Amoki]

We had the same problem, but the PR has never been merged: #794

[magnayn]

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.