Pude evitar dejar objetos del lienzo, pero no pude evitar dejar objetos secundarios del objeto dado.

Traté de hacerlo de esta manera (vea el ejemplo de código a continuación) pero esto bloquea el objeto dejándolo en el mismo tamaño (ancho, alto) del objeto bloqueado pero posicionado absolutamente (arriba, izquierda). Necesito evitar dejar en las mismas coordenadas donde se coloca el objeto principal (ver la imagen adjunta).

Cualquier idea es bienvenida.

 preventLeavingInsideBox(e: IEvent) { let activeObject = e.target; if ((activeObject.get('left') - (activeObject.get('width') * activeObject.get('scaleX') / 2) < 0)) activeObject.set('left', activeObject.get('width') * activeObject.get('scaleX') / 2); if ((activeObject.get('top') - (activeObject.get('height') * activeObject.get('scaleY') / 2) < 0)) activeObject.set('top', activeObject.get('height') * activeObject.get('scaleY') / 2); if (activeObject.get('left') + (activeObject.get('width') * activeObject.get('scaleX') / 2) > this.rect.width) { var positionX = this.rect.width - (activeObject.get('width') * activeObject.get('scaleX')) / 2; activeObject.set('left', positionX > this.rect.width / 2 ? positionX : this.rect.width / 2); } if (activeObject.get('top') + (activeObject.get('height') * activeObject.get('scaleY') / 2) > this.rect.height) { var positionY = this.rect.height - (activeObject.get('height') * activeObject.get('scaleY') / 2); activeObject.set('top', positionY > this.rect.height / 2 ? positionY : this.rect.height / 2); } //below just prevention for object from getting width or height greater than canvas width and height if (activeObject.get('width') * activeObject.get('scaleX') > this.rect.width) { activeObject.set('scaleX', this.rect.width / activeObject.get('width')); } if (activeObject.get('height') * activeObject.get('scaleY') > this.rect.height) { activeObject.set('scaleY', this.rect.height / activeObject.get('height')); } }