[SOLVED] What is the simplest way to control the translation and resize of inner rectangle within a fixed outer rectangle

Hi,

I want to dynamically change the size and position of an inner rectangle within an outer rectangle. The outer rectangle is fixed.
I am using a mesh of type Geometry to define the 2 rectangles, and vertex helpers for the corners of the inner rectangle.

I can translate the inner rectangle and scale within the limits of the outer rectangle but I’m having trouble with the math.

I tried the following options:

Option1

  • express the translation / resize via change in the position / scale of the inner rectangle, and clamp the position.
  • this is simple when only translation occurs, but combination of translation and resize complicates the clamping.

Option2

  • express the translation / resize via change in the vertices of the inner rectangle, and clamp the vertices.
    (for example in the case of translation, I’m updating the vertices by converting the position to a new absolute vertices position by calling
    obj.updateMatrixWorld()
    applyMatrix4( obj.matrixWorld )
    obj.position.copy( positionOrig );
    obj.geometry.verticesNeedUpdate = true;)
  • this causes artifacts such as shrinking of the inner rectangle when dragging it over the outer rectangle.

What would be the simplest way to control the translation and resizing in this case?

Thanks,
Avner

I was able to control the resize comparing the distances to the center of the bounding box of the inner rectangle from:

  • the intersection point (after clicking on the vertex of the rectangle and moving it)
  • the position of the vertex before moving it