How to check the margin of an element?

1

I have a code to resize an element, I need to capture the resize from a margin of 18 pixels:

$(document).on("mousedown",".image",function(me) {
         var move = $(this);
         var fm = matrix(this);
         var sv = scaleValue(this);
         //--
         var data = move.offset();
         data.width = move.width();
         data.height = move.height();

         var sx = me.clientX;
         var sy = me.clientY;

         var x = (me.offsetX != null) ? me.offsetX : me.originalEvent.layerX;
         var y = (me.offsetY != null) ? me.offsetY : me.originalEvent.layerY;
         //--

         var elementW = move.width();
         var elementH = move.height();
         var relX = me.pageX - move.offset().left;
         var relY = me.pageY - move.offset().top;
         var isSizingRight = false, isSizingLeft = false, isSizingHeight = false;

         var margin = 18;


         var img_crop_margin_width = (elementW - margin);
         var img_crop_margin_height = (elementH - margin);

         if ((data.height - x) < 18) {
             isSizingRight = true;
         } else if((data.height - y) < 18) {
             isSizingHeight = true;
         } else {
             if (x < 18 || y < 18) {
                isSizingLeft = true;
             }
         }

        // console.log(isSizing + " - " + isSizingLeft);
         //--

         var lastOffset = move.data('lastTransform');
         var lastOffsetX = lastOffset ? lastOffset.dx : 0,
             lastOffsetY = lastOffset ? lastOffset.dy : 0;

         lastOffsetX = lastOffsetY = 0;
         var startX = me.pageX - lastOffsetX, startY = me.pageY - lastOffsetY;

         $(document).on("mousemove",function(e) {

            if(!isEraser && !drawPen) {
                var newDx = (e.pageX - startX),
                    newDy = (e.pageY - startY);


                if (isSizingRight) {
                   // console.log('aumento para direita - x');
                    var dif = e.pageX - startX;
                    var startScale = (((dif - 48) / 100) / 2.5);
                    var scaleVal = ((elementW + dif) / elementW) + startScale;
                    var t = scale(fm, scaleVal);
                    startScale = 0;


                    move.css('transform', t);

                } else if (isSizingHeight) {
                  //  console.log('aumento para direita - y');
                    var dif = startX - e.pageX;

                    var startScale = (((dif - 48) / 100) / 2.5);
                    var scaleVal = ((elementH + dif) / elementH) + startScale;
                    var t = scale(fm, scaleVal);
                    startScale = 0;
                    move.css('transform', t);
                } else {
                    if (isSizingLeft) {
                      //  console.log('aumento para esquerda - x');
                        var dif = startX - e.pageX;

                        var startScale = (((dif - 48) / 100) / 2.5);
                        var scaleVal = ((elementW + dif) / elementW) + startScale;
                        var t = scale(fm, scaleVal);
                        startScale = 0;
                        move.css('transform', t);


                    } else {
                        var t = translate(fm, newDx / sv, newDy / sv);
                       // console.log('arrastar');
                        move.css('transform', t);

                        //move.css('transform','translate(' + newDx + 'px, ' + newDy + 'px)');

                        // we need to save last made offset
                        move.data('lastTransform', {dx: newDx, dy: newDy});
                    }
                }
            }
         });
     });

The problem is that it is not working very well on the right side. It should only drag the object and resize only when it is on the margin.

See example:

    
asked by anonymous 08.08.2017 / 15:55

0 answers