Develop Reference

How to stop multiple running mouse event functions

I want to resize squares drawn on canvas (created by clicking) with mouse by moving from corners. Should only resize selected square. I have four different functions for each corner, and after resizing from more than one corner functions keep executing. How to prevent this?
var isMouseDown = false;
var canvas;
var ctx, size;
$(document).ready(function() {
canvas = $('#area')[0];
ctx = canvas.getContext('2d');
$('#area').on('mousedown', canvasClick);
$('#area').on('mouseup', up);
});
function up(event) {
isMouseDown = false;
resizing = false;
console.log("up");
return;
}
function Square(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.isSelected = false;
}
var x, y;
function addSquare(event) {
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
var size = parseInt(Math.random() * 81 + 49);
x -= size / 2;
y -= size / 2;
ctx.fillRect(x, y, size, size);
var square = new Square(x, y, size);
squares.push(square);
drawSquares();
}
var squares = new Array;
var previousSelectedSquare;
function drawSquares() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < squares.length; i++) {
var Square = squares[i];
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.rect(Square.x, Square.y, Square.size, Square.size);
ctx.strokeStyle = "black";
if (Square.isSelected) {
ctx.lineWidth = 4;
} else {
ctx.lineWidth = 1;
}
ctx.fill();
ctx.stroke();
}
}
function canvasClick(event) {
isMouseDown = true;
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
if (squares.length < 1) {
addSquare(event);
return;
}
var Square;
if (previousSelectedSquare) {
var prevX = previousSelectedSquare.x;
var prevY = previousSelectedSquare.y;
size = previousSelectedSquare.size;
}
var change = 7;
if (((x <= prevX + size + change) && (x >= prevX + size - change)) ||
((x >= prevX - change) && (x <= prevX + change)))
if (((y <= prevY + size + change) && (y >= prevY + size - change)) ||
((y <= prevY + change) && (y >= prevY - change))) {
console.log("borders");
$('#area').on('mousemove', resize(event));
return;
}
for (var i = squares.length - 1; i >= 0; i--) {
Square = squares[i];
if ((x >= Square.x && x <= Square.x + Square.size) && (y <= Square.y + Square.size && y >= Square.y)) {
Square.isSelected = true;
if (previousSelectedSquare != null)
previousSelectedSquare.isSelected = false;
if (previousSelectedSquare == Square)
previousSelectedSquare = null;
else
previousSelectedSquare = Square;
drawSquares();
return;
}
if (i === 0) {
addSquare(event);
return;
}
}
return;
}
// Part that resizes
var resizing = false;
function resize(event) {
if (!isMouseDown)
return;
resizing = true;
x = (event.pageX - canvas.offsetLeft);
y = (event.pageY - canvas.offsetTop);
size = previousSelectedSquare.size;
var centreX = previousSelectedSquare.x + size / 2;
var centreY = previousSelectedSquare.y + size / 2;
if (x > centreX && y < centreY) {
topr = true;
//top right
$('#area').on('mousemove', topR);
return;
}
if (x < centreX && y < centreY) {
//top left
$('#area').on('mousemove', topL);
return;
}
if (x > centreX && y > centreY) {
//bot right
$('#area').on('mousemove', botR);
return;
}
if (x < centreX && y > centreY) {
//bot left
$('#area').on('mousemove', botL);
return;
}
resizing = false;
return;
}
function topR(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("top right");
size = previousSelectedSquare.size;
var yb = previousSelectedSquare.y + size;
if (parseInt(yb - (event.pageY - canvas.offsetTop)) < 60)
return;
previousSelectedSquare.size = parseInt(yb - (event.pageY - canvas.offsetTop));
previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
drawSquares();
return;
}
function topL(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("top left");
x = previousSelectedSquare.x + previousSelectedSquare.size;
y = previousSelectedSquare.y + previousSelectedSquare.size;
if (parseInt(y - (event.pageY - canvas.offsetTop)) < 60)
return;
previousSelectedSquare.size = parseInt(y - (event.pageY - canvas.offsetTop));
previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
drawSquares();
return;
}
function botR(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("bot right");
size = previousSelectedSquare.size;
if ((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2 < 60)
return;
previousSelectedSquare.size = parseInt((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2);
drawSquares();
return;
}
function botL(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("bot left");
var xr = previousSelectedSquare.x + previousSelectedSquare.size;
if (xr - event.pageX - canvas.offsetLeft < 60)
return;
previousSelectedSquare.size = parseInt(previousSelectedSquare.x + previousSelectedSquare.size - (event.pageX - canvas.offsetLeft));
previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
drawSquares();
return;
}
#area {
margin-top: 0;
border: 4px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="area" width="1250" height="550"></canvas>

Using namespace events, after you check the position, remove other handlers then add the one for the current corner.
e.g.: $('#area').off('mousemove.botR').off('mousemove.topL').off('mousemove.botL').on('mousemove.topR', topR);
var isMouseDown = false;
var canvas;
var ctx, size;
$(document).ready(function() {
canvas = $('#area')[0];
ctx = canvas.getContext('2d');
$('#area').on('mousedown', canvasClick);
$('#area').on('mouseup', up);
});
function up(event) {
isMouseDown = false;
resizing = false;
console.log("up");
return;
}
function Square(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.isSelected = false;
}
var x, y;
function addSquare(event) {
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
var size = parseInt(Math.random() * 81 + 49);
x -= size / 2;
y -= size / 2;
ctx.fillRect(x, y, size, size);
var square = new Square(x, y, size);
squares.push(square);
drawSquares();
}
var squares = new Array;
var previousSelectedSquare;
function drawSquares() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (var i = 0; i < squares.length; i++) {
var Square = squares[i];
ctx.beginPath();
ctx.fillStyle = "orange";
ctx.rect(Square.x, Square.y, Square.size, Square.size);
ctx.strokeStyle = "black";
if (Square.isSelected) {
ctx.lineWidth = 4;
} else {
ctx.lineWidth = 1;
}
ctx.fill();
ctx.stroke();
}
}
function canvasClick(event) {
isMouseDown = true;
x = event.pageX - canvas.offsetLeft;
y = event.pageY - canvas.offsetTop;
if (squares.length < 1) {
addSquare(event);
return;
}
var Square;
if (previousSelectedSquare) {
var prevX = previousSelectedSquare.x;
var prevY = previousSelectedSquare.y;
size = previousSelectedSquare.size;
}
var change = 7;
if (((x <= prevX + size + change) && (x >= prevX + size - change)) ||
((x >= prevX - change) && (x <= prevX + change)))
if (((y <= prevY + size + change) && (y >= prevY + size - change)) ||
((y <= prevY + change) && (y >= prevY - change))) {
console.log("borders");
$('#area').on('mousemove', resize(event));
return;
}
for (var i = squares.length - 1; i >= 0; i--) {
Square = squares[i];
if ((x >= Square.x && x <= Square.x + Square.size) && (y <= Square.y + Square.size && y >= Square.y)) {
Square.isSelected = true;
if (previousSelectedSquare != null)
previousSelectedSquare.isSelected = false;
if (previousSelectedSquare == Square)
previousSelectedSquare = null;
else
previousSelectedSquare = Square;
drawSquares();
return;
}
if (i === 0) {
addSquare(event);
return;
}
}
return;
}
// Part that resizes
var resizing = false;
function resize(event) {
if (!isMouseDown)
return;
resizing = true;
x = (event.pageX - canvas.offsetLeft);
y = (event.pageY - canvas.offsetTop);
size = previousSelectedSquare.size;
var centreX = previousSelectedSquare.x + size / 2;
var centreY = previousSelectedSquare.y + size / 2;
if (x > centreX && y < centreY) {
topr = true;
//top right
$('#area').off('mousemove.botR').off('mousemove.topL').off('mousemove.botL').on('mousemove.topR', topR);
return;
}
if (x < centreX && y < centreY) {
//top left
$('#area').off('mousemove.topR').off('mousemove.botL').off('mousemove.botR').on('mousemove.topL', topL);
return;
}
if (x > centreX && y > centreY) {
//bot right
$('#area').off('mousemove.topR').off('mousemove.topL').off('mousemove.botL').on('mousemove.botR', botR);
return;
}
if (x < centreX && y > centreY) {
//bot left
$('#area').off('mousemove.topR').off('mousemove.topL').off('mousemove.botR').on('mousemove.botL', botL);
return;
}
resizing = false;
return;
}
function topR(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("top right");
size = previousSelectedSquare.size;
var yb = previousSelectedSquare.y + size;
if (parseInt(yb - (event.pageY - canvas.offsetTop)) < 60)
return;
previousSelectedSquare.size = parseInt(yb - (event.pageY - canvas.offsetTop));
previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
drawSquares();
return;
}
function topL(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("top left");
x = previousSelectedSquare.x + previousSelectedSquare.size;
y = previousSelectedSquare.y + previousSelectedSquare.size;
if (parseInt(y - (event.pageY - canvas.offsetTop)) < 60)
return;
previousSelectedSquare.size = parseInt(y - (event.pageY - canvas.offsetTop));
previousSelectedSquare.y = parseInt(event.pageY - canvas.offsetTop);
previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
drawSquares();
return;
}
function botR(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("bot right");
size = previousSelectedSquare.size;
if ((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2 < 60)
return;
previousSelectedSquare.size = parseInt((event.pageX - canvas.offsetLeft - previousSelectedSquare.x + size) / 2);
drawSquares();
return;
}
function botL(event) {
if (!resizing || !isMouseDown)
return;
$('#area').on('mouseup', up);
console.log("bot left");
var xr = previousSelectedSquare.x + previousSelectedSquare.size;
if (xr - event.pageX - canvas.offsetLeft < 60)
return;
previousSelectedSquare.size = parseInt(previousSelectedSquare.x + previousSelectedSquare.size - (event.pageX - canvas.offsetLeft));
previousSelectedSquare.x = parseInt(event.pageX - canvas.offsetLeft);
drawSquares();
return;
}
#area {
margin-top: 0;
border: 4px black solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="area" width="1250" height="550"></canvas>

How to set zoom focus based on pinch location using hammer.js

I am able to perform pinch for div content when passing the element to the method below, but whilst the pinch is performing the focus is always at the center.
How can I change the focus based on pinch location?
function hammerIt(elm) {
hammertime = new Hammer(elm, {});
hammertime.get('pinch').set({
enable: true
});
var posX = 0,
posY = 0,
scale = 1,
last_scale = 1,
last_posX = 0,
last_posY = 0,
max_pos_x = 0,
max_pos_y = 0,
transform = "",
el = elm;
hammertime.on('doubletap pan pinch panend pinchend', function(ev) {
if (ev.type == "doubletap") {
transform =
"translate3d(0, 0, 0) " +
"scale3d(2, 2, 1) ";
scale = 2;
last_scale = 2;
try {
if (window.getComputedStyle(el, null).getPropertyValue('-webkit-transform').toString() != "matrix(1, 0, 0, 1, 0, 0)") {
transform =
"translate3d(0, 0, 0) " +
"scale3d(1, 1, 1) ";
scale = 1;
last_scale = 1;
}
} catch (err) {}
el.style.webkitTransform = transform;
transform = "";
}
//pan
if (scale != 1) {
posX = last_posX + ev.deltaX;
posY = last_posY + ev.deltaY;
max_pos_x = Math.ceil((scale - 1) * el.clientWidth / 2);
max_pos_y = Math.ceil((scale - 1) * el.clientHeight / 2);
if (posX > max_pos_x) {
posX = max_pos_x;
}
if (posX < -max_pos_x) {
posX = -max_pos_x;
}
if (posY > max_pos_y) {
posY = max_pos_y;
}
if (posY < -max_pos_y) {
posY = -max_pos_y;
}
}
//pinch
if (ev.type == "pinch") {
scale = Math.max(.999, Math.min(last_scale * (ev.scale), 4));
}
if(ev.type == "pinchend"){last_scale = scale;}
//panend
if(ev.type == "panend"){
last_posX = posX < max_pos_x ? posX : max_pos_x;
last_posY = posY < max_pos_y ? posY : max_pos_y;
}
if (scale != 1) {
transform =
"translate3d(" + posX + "px," + posY + "px, 0) " +
"scale3d(" + scale + ", " + scale + ", 1)";
}
if (transform) {
el.style.webkitTransform = transform;
}
});
}

Stay div in his actual position when zoom the map

I had done a multi-layer map, then I placed one div on it. But problem is that when I zoom an image that div should changed its position to anywhere else. For example if I placed div on India but when I zoom and drag it that div is USA or anywhere. But I want it placed in its actual position.
Here is my code:
window.wheelzoom = (function() {
var defaults = {
zoom: 0.10
};
var canvas1 = document.createElement('canvas');
var canvas = document.createElement('div');
var main = function(img1, options) {
//if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; }
var settings = {};
var width;
var width1;
var height;
var height1;
var bgWidth;
var bgHeight;
var bgPosX;
var bgPosY;
var previousEvent;
var cachedDataUrl;
//console.log(img1.childNodes);
var img = img1.childNodes[1];
img1 = img1.childNodes[3]
function setSrcToBackground(img, id) {
img.style.backgroundImage = 'url("' + img.src + '")';
//$("#"+id).append("<h1 style='z-index:1;'>BHumoiraj</h1>")
canvas.width = img.naturalWidth;
canvas.id = "raj";
canvas.height = img.naturalHeight;
cachedDataUrl = canvas1.toDataURL();
img.src = cachedDataUrl;
}
function updateBgStyle() {
if (bgPosX > 0) {
bgPosX = 0;
} else if (bgPosX < width - bgWidth) {
bgPosX = width - bgWidth;
}
if (bgPosY > 0) {
bgPosY = 0;
} else if (bgPosY < height - bgHeight) {
bgPosY = height - bgHeight;
}
img.style.backgroundSize = bgWidth + 'px ' + bgHeight + 'px';
var bd = Math.abs(bgPosY);
var cd = Math.abs(bgPosX);
if (bgWidth < 1281) {
img.style.backgroundImage = 'url("http://blogs-images.forbes.com/trevornace/files/2016/02/political-map-world-1200x813.jpg")';
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
}
if (bgWidth > 1281 && bgWidth < 2283) {
img.style.backgroundImage = 'url("http://www.vector-eps.com/wp-content/gallery/administrative-europe-map-vector-and-images/administrative-europe-map-image2.jpg")';
img.style.border = "2px solid red";
}
if (bgWidth > 2283) {
img.style.backgroundImage = 'url("http://laraveldaily.com/wp-content/uploads/2016/08/World-Map-Blue.jpg")';
//img.style.backgroundSize = 2000+'px '+bgHeight+'px';
}
img.style.backgroundPosition = bgPosX + 'px ' + bgPosY + 'px';
// img1.style.top = bgPosY;//"-90px" ;
// img1.style.left = bgPosX;//"120px";
}
function reset() {
bgWidth = width;
bgHeight = height;
img1.style.top = height1 //"-90px" ;
img1.style.left = width1; //"120px";
bgPosX = bgPosY = 0;
updateBgStyle();
}
function onwheel(e) {
var deltaY = 0;
e.preventDefault();
if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?)
deltaY = e.deltaY;
} else if (e.wheelDelta) {
deltaY = -e.wheelDelta;
}
var rect = img.getBoundingClientRect();
var offsetX = e.pageX - rect.left - window.pageXOffset;
var offsetY = e.pageY - rect.top - window.pageYOffset;
var bgCursorX = offsetX - bgPosX;
var bgCursorY = offsetY - bgPosY;
var bgRatioX = bgCursorX / bgWidth;
var bgRatioY = bgCursorY / bgHeight;
if (deltaY < 0) {
bgWidth += bgWidth * settings.zoom;
bgHeight += bgHeight * settings.zoom;
} else {
bgWidth -= bgWidth * settings.zoom;
bgHeight -= bgHeight * settings.zoom;
}
// Take the percent offset and apply it to the new size:
bgPosX = offsetX - (bgWidth * bgRatioX);
bgPosY = offsetY - (bgHeight * bgRatioY);
// Prevent zooming out beyond the starting size
if (bgWidth <= width || bgHeight <= height) {
reset();
} else {
updateBgStyle();
}
}
function set(a, b, e) {
console.log("top=" + a + "left=" + b);
img1.style.top = b + "px"; //"-90px" ;
img1.style.left = a + "px"; //"120px";
}
function drag(e) {
e.preventDefault();
bgPosX += (e.pageX - previousEvent.pageX);
bgPosY += (e.pageY - previousEvent.pageY);
bgPosX += (e.pageX - previousEvent.pageX);
set(bgPosX, bgPosY, e);
previousEvent = e;
updateBgStyle();
}
function removeDrag() {
document.removeEventListener('mouseup', removeDrag);
document.removeEventListener('mousemove', drag);
}
// Make the background draggable
function draggable(e) {
e.preventDefault();
previousEvent = e;
document.addEventListener('mousemove', drag);
document.addEventListener('mouseup', removeDrag);
}
function load() {
if (img.src === cachedDataUrl)
return;
var computedStyle = window.getComputedStyle(img, null);
var computedStyle1 = window.getComputedStyle(img1, null);
width = parseInt(computedStyle.width, 10);
height = parseInt(computedStyle.height, 10);
width1 = parseInt(computedStyle1.top, 10);
height1 = parseInt(computedStyle1.top, 10);
bgWidth = width;
bgHeight = height;
bgPosX = 0;
bgPosY = 0;
setSrcToBackground(img);
img.style.backgroundSize = width + 'px ' + height + 'px';
img.style.backgroundPosition = '0 0';
img.addEventListener('wheelzoom.reset', reset);
img.addEventListener('wheel', onwheel);
img.addEventListener('mousedown', draggable);
img1.addEventListener('wheelzoom.reset', reset);
img1.addEventListener('wheel', onwheel);
img1.addEventListener('mousedown', draggable);
}
var destroy = function(originalProperties) {
img.removeEventListener('wheelzoom.destroy', destroy);
img.removeEventListener('wheelzoom.reset', reset);
img.removeEventListener('load', load);
img.removeEventListener('mouseup', removeDrag);
img.removeEventListener('mousemove', drag);
img.removeEventListener('mousedown', draggable);
img.removeEventListener('wheel', onwheel);
img1.removeEventListener('wheelzoom.destroy', destroy);
img1.removeEventListener('wheelzoom.reset', reset);
img1.removeEventListener('load', load);
img1.removeEventListener('mouseup', removeDrag);
img1.removeEventListener('mousemove', drag);
img1.removeEventListener('mousedown', draggable);
img1.removeEventListener('wheel', onwheel);
img.style.backgroundImage = originalProperties.backgroundImage;
img.style.backgroundRepeat = originalProperties.backgroundRepeat;
//img.src = originalProperties.src;
}.bind(null, {
backgroundImage: img.style.backgroundImage,
backgroundRepeat: img.style.backgroundRepeat
//src: img.src
});
img.addEventListener('wheelzoom.destroy', destroy);
options = options || {};
Object.keys(defaults).forEach(function(key) {
settings[key] = options[key] !== undefined ? options[key] : defaults[key];
});
if (img.complete) {
load();
}
img.addEventListener('load', load);
};
// Do nothing in IE8
if (typeof window.getComputedStyle !== 'function') {
return function(elements) {
return elements;
};
} else {
return function(elements, options) {
if (elements && elements.length) {
Array.prototype.forEach.call(elements, main, options);
} else if (elements && elements.nodeName) {
main(elements, options);
}
return elements;
};
}
}());
wheelzoom(document.querySelector('div.zoom', "id"));
<body>
<div class='zoom' style="width: 760px;height:520px;border: 1px solid red;overflow:hidden;" id="target">
<img class='zoom1' id="img" src='http://blogs-images.forbes.com/trevornace/files/2016/02/political-map-world-1200x813.jpg' alt='Daisy!' width='755px' height='520px' />
<div style="position: relative;border: 1px solid red; width: 200px; height: 100px;top:-190px;">
<img src='camera.png' alt='Daisy!' width='55px' height='20px' />
</div>
</div>
</body>

don't use width and height.you can use bootstrap with col-md-... class.use divs with this kind of classes.Its helpfull to responsive.

How to zoom image with angularJS

How can i zoom the image when i click on the image itself using angularJS. I cant happen to do it when i using this website given: https://github.com/owlsomely/angular-image-zoom?utm_source=angular-js.in&utm_medium=website&utm_campaign=content-curation . Anyone can help?
My js file:
var camListApp = angular.module('camListApp', ['ui.bootstrap'])
camListApp.filter('unique', function() {
return function(input, key) {
var unique = {};
var uniqueList = [];
for(var i = 0; i < input.length; i++){
if(typeof unique[input[i][key]] == "undefined"){
unique[input[i][key]] = "";
uniqueList.push(input[i]);
}
}
return uniqueList;
};
});
camListApp.controller("Hello", ["$scope", "$http", function($scope, $http){
$scope.custom = true;
$scope.toggleCustom = function(url) {
$scope.custom = ! $scope.custom;
$scope.imageView = url;
};
$http.get('http://localhost:8082/camera/list').then(function(response) {
console.log(response);
$scope.records= response.data;
});
}]);
My html file:
<div ng-controller="Hello" class="col-xs-12">
<b>Search:</b><br>
<input type = "text" ng-model="searchBox" uib-typeahead="state.cameraid as state.cameraid for state in records | filter:searchBox | limitTo:8 | unique:'cameraid'">
<br>
<br>
<br>
<br>
<table border = 1 class="table table-striped table-hover" style="width:45%">
<thead>
<tr>
<th><center>CamID</th></center>
<th><center>Timestamp</th></center>
<th><center>View Image</center></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in records | filter:searchBox | orderBy:'+timestamp'">
<td>{{record.cameraid}}</td>
<td>{{record.timestamp}}</td>
<td><center> <button class="btn btn-primary" ng-click="toggleCustom(record.filename)" onclick="myFunction()">View</center></button></td>
</tr>
</tbody>
</table>
<span id="myDIV" ng-hide="custom">
<img ng-src="http://localhost:9100/Images/{{imageView}}.png" image-zoom width="500" height="400">
</span>
<!--<span ng-hide="custom">To:
<input type="text" id="to" />
</span>-->
<span ng-show="custom"></span>
</div>
<script>
function myFunction() {
document.getElementById("myDIV").style.position = "absolute";
}
</script>
</body>
</html>

Created ng-click on image
HTML
<span id="myDIV" ng-hide="custom">
<img id="view" ng-src="http://www.w3schools.com/css/{{imageView}}" width="300" height="300" ng-click="zoom()">
</span>
JS
$scope.zoom = function() {
var imageId = document.getElementById('view');
if(imageId.style.width == "400px"){
imageId.style.width = "300px";
imageId.style.height = "300px";
}else{
imageId.style.width = "400px";
imageId.style.height = "400px";
}
Codepen- http://codepen.io/nagasai/pen/jrMzER

my simple directive to increase the image reduction and image movement. I hope will be useful to you.
(function () {
angular
.module('app')
.directive('zoom', [function () {
return {
restrict: 'A',
link: function (scope, elem, attrs) {
var img = elem[0];
$(img).css({
"position": "absolute",
"top": "0",
"bottom": "0",
"left": "0",
"right": "0",
"margin": "auto",
"padding-left": "1px",
"padding-right": "1px",
"padding-top": "1px",
"padding-bottom": "1px",
"-webkit - user - select": "none",
"-webkit - user - drag": "none"
});
var imageContainer = img.parentNode.parentNode;
$(imageContainer).css({
"text-align": "center",
"margin": "0",
"padding": "0",
"height": "100%",
"max- height": "100%",
"width": "100%",
"background-color": "#000",
"overflow": "hidden",
"-webkit - user - select": "none",
"cursor": "context - menu",
});
var parent = img.parentNode;
$(parent).css({
"width": "100%",
"height": "auto",
"margin": 0,
"padding": 0,
"display": "-webkit - box",
"-webkit - box - pack": "center",
"-webkit - box - align": "center",
"z-index": "5"
});
var currentScale = 1;
var currentRotation = 90
let transformOriginX = 0, transformOriginY = 0;
let translateX = 0, translateY = 0;
function setTransformOrigin() {
let imgRect = img.getBoundingClientRect();
let parentRect = parent.getBoundingClientRect();
let visibleWidth = (imgRect.width > parent.offsetWidth) ? imgRect.left + parentRect.width : imgRect.width;
let visibleHeight = (imgRect.height > parent.offsetHeight) ? imgRect.top + parentRect.height : imgRect.height;
let beginX = parentRect.right - visibleWidth, beginY = parentRect.bottom - visibleHeight;
let endX = beginX + visibleWidth, endY = beginY + visibleHeight;
let midX = beginX + ((endX - beginX) / 2), midY = beginY + ((endY - beginY) / 2);
// if (midY > imageContainer.clientHeight / 2) midY = imageContainer.clientHeight / 2;
//if (midX > imageContainer.clientWidth / 2) midX = imageContainer.clientWidth / 2;
if (midY > imageContainer.clientHeight / 2) { parent.style.transformOrigin = midX + 'px ' + midY + 'px' } else {
parent.style.transformOrigin = midX + 'px ' + imageContainer.clientHeight / 2 + 'px'
}
}
function scaleImage(scale, event) {
img.style.transform = 'scale(' + scale + ') ' + 'rotate(' + (currentRotation - 90) + 'deg)';
if (scale < currentScale) {
let imgRect = img.getBoundingClientRect();
let imageContainerRect = imageContainer.getBoundingClientRect();
if (parent.style.transform.match('translate')) {
let parentTransform = parent.style.transform.replace('translate(', '').replace(')', '').split(', ');
let moveX = parentTransform[0].replace('px', ''), moveY = parentTransform[1].replace('px', '');
if ((imageContainerRect.right - imgRect.right) > 0 || (imageContainerRect.left - imgRect.left) < 0) {
let moveBy = ((imageContainerRect.right - imgRect.right) > 0) ? (imageContainerRect.right - imgRect.right) : (imageContainerRect.left - imgRect.left);
moveX = (imgRect.width > parent.offsetWidth) ? (parseFloat(parentTransform[0]) + moveBy) : 0;
transformOriginX = (transformOriginX - moveBy);
}
if ((imageContainerRect.bottom - imgRect.bottom) > 0 || (imageContainerRect.top - imgRect.top) < 0) {
let moveBy = ((imageContainerRect.bottom - imgRect.bottom) > 0) ? (imageContainerRect.bottom - imgRect.bottom) : (imageContainerRect.top - imgRect.top);
moveY = (imgRect.height > parent.offsetHeight) ? (parseFloat(parentTransform[1]) + moveBy) : 0;
transformOriginY = (transformOriginY + moveBy);
}
if (scale <= 1) { translateX = 0; translateY = 0; }
parent.style.transformOrigin = transformOriginX + 'px ' + transformOriginY + 'px';
}
}
currentScale = scale;
let imgRect = img.getBoundingClientRect();
let parentRect = parent.getBoundingClientRect();
let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
let startX = event.pageX - translateX, startY = event.pageY - translateY;
let max_left = parentRect.left - imgRect.left;
let max_top = parentRect.top - imgRect.top;
var evt = window.event;
translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
if ((translateX != 0) && (translateY != 0)) {
if (translateY > imageContainer.clientHeight/2) { parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)' } else {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight / 2+'px)'
}
} else {
parent.style['-webkit-transform'] = ''
};
return false;
}
function tap() {
let imgRect = img.getBoundingClientRect();
let parentRect = parent.getBoundingClientRect();
let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
let startX = event.pageX - translateX, startY = event.pageY - translateY;
let max_left = parentRect.left - imgRect.left;
let max_top = parentRect.top - imgRect.top;
var evt = window.event;
translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
if ((translateX != 0) && (translateY != 0)) {
if (translateY > imageContainer.clientHeight / 2) {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)'
} else {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight / 2+ 'px)'
}
} else {
parent.style['-webkit-transform'] = ''
};
}
function makeDraggable(event) {
parent = img.parentNode;
imageContainer = img.parentNode.parentNode;
$(parent).css({
"display": "-webkit - box",
"-webkit - box - pack": "center",
"-webkit - box - align": "center",
"z-index": "5"
});
$(imageContainer).css({
"text-align": "center",
"margin": "0",
"padding": "0",
"overflow": "hidden",
"-webkit - user - select": "none",
"cursor": "context - menu",
});
let imgRect = img.getBoundingClientRect();
let parentRect =parent.getBoundingClientRect();
let overflow_horizontal = (imgRect.width > parent.offsetWidth ? true : false);
let overflow_vertical = (imgRect.height > parent.offsetHeight ? true : false);
let startX = event.pageX - translateX, startY = event.pageY - translateY;
let max_left = parentRect.left - imgRect.left;
let max_top = parentRect.top - imgRect.top;
window.onmousemove = function (evt) {
if (evt == null) { evt = window.event; }
translateX = (Math.abs(evt.pageX - startX) >= max_left ? (max_left * Math.sign(evt.pageX - startX)) : (evt.pageX - startX));
translateY = (Math.abs(evt.pageY - startY) >= max_top ? (max_top * Math.sign(evt.pageY - startY)) : (evt.pageY - startY));
translateX = overflow_horizontal ? translateX : 0, translateY = overflow_vertical ? translateY : 0;
if ((translateX != 0) && (translateY != 0)) {
if (translateY > imageContainer.clientHeight) {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + translateY + 'px)'
} else {
parent.style['-webkit-transform'] = 'translate(' + translateX + 'px, ' + imageContainer.clientHeight / 2+ 'px)'
}
} else {
parent.style['-webkit-transform'] = ''
};
return false;
}
window.onmouseup = function (evt) {
setTransformOrigin();
window.onmousemove = null;
}
return false;
};
img.addEventListener('mousedown', function () { makeDraggable(event); });
elem.bind('mousewheel', function (e) {
var img = e.currentTarget.style.width;
var scaleX = e.currentTarget.getBoundingClientRect().width / e.currentTarget.offsetWidth;
var w = "";
var resW = "";
var resL = "";
var resT = "";
var zValue = 1.2;
var newScale = scaleX * zValue;
var newScale = "scale(1)";
var val = parseInt(w.replace('%', ''));
if (e.originalEvent.wheelDelta / 120 > 0) {
newScale = scaleX * zValue;
}
else {
if ((scaleX / zValue) > 1) {
newScale = scaleX / zValue
} else {
newScale = 1.0;
}
}
scaleImage(newScale, e);
setTransformOrigin();
window.onmousemove = null;
});
}
}
}]);
})();
Use at HTML as
<image zoom src="" ></image>

using querySelectorAll to move more than one div

I'm trying to use the queryselectorall to be able to move more than one div, but I'm getting trouble for not knowing how to adapt. I thought of using a while that style:
[].forEach.call(els, function(el) {
...
});
But not got success, how can I fix my script to make it work?
My code:
var draggableEl = document.querySelectorAll('[data-drag]'), magnet = document.querySelector('.magnet-zone');
function isOverlapping(el1, el2) {
var rect1 = el1.getBoundingClientRect(), rect2 = el2.getBoundingClientRect();
return !(rect1.top > rect2.bottom || rect1.right < rect2.left || rect1.bottom < rect2.top || rect1.left > rect2.right);
}
function moveToPos(x, y) {
var el = draggableEl;
el.style.transform = 'translate(' + Math.round(x, 10) + 'px, ' + Math.round(y, 10) + 'px) translateZ(0)';
el.style.webkitTransform = 'translate(' + Math.round(x, 10) + 'px, ' + Math.round(y, 10) + 'px) translateZ(0)';
}
function moveMagnet(x, y) {
var dist = 12, width = $('body').width() / 2, height = $('body').height(), direction = x > width ? 1 : -1, percX = x > width ? (x - width) / width : -(width - x) / width, percY = Math.min(1, (height - y) / (height / 2));
magnet.style.marginLeft = Math.round(dist / 1.5 * percX) + 'px';
magnet.style.marginBottom = Math.round(dist * percY) + 'px';
}
function move(event) {
var el = draggableEl, magnetRect = magnet.getBoundingClientRect(), elRect = el.getBoundingClientRect();
x = this._posOrigin.x + event.pageX - this._touchOrigin.x;
y = this._posOrigin.y + event.pageY - this._touchOrigin.y;
moveMagnet(x + elRect.width / 2, y + elRect.height / 2);
$('body').addClass('moving');
var touchPos = {
top: y,
right: x + elRect.width,
bottom: y + elRect.height,
left: x
};
overlapping = !(touchPos.top > magnetRect.bottom || touchPos.right < magnetRect.left || touchPos.bottom < magnetRect.top || touchPos.left > magnetRect.right);
if (overlapping) {
var mx = magnetRect.width / 2 + magnetRect.left;
var my = magnetRect.height / 2 + magnetRect.top;
x = mx - elRect.width / 2;
y = my - elRect.height / 2;
if (!$(el).hasClass('overlap')) {
$(el).addClass('transition');
setTimeout(function () {
$(el).removeClass('transition');
}, 150);
setTimeout(function () {
el.remove();
setTimeout(function () {
$('body').removeClass('moving touching');
}, 900);
}, 1000);
}
magnet.className = magnet.className.replace(' overlap', '') + ' overlap';
el.className = el.className.replace(' overlap', '') + ' overlap';
} else {
if ($(el).hasClass('transition')) {
$(el).removeClass('transition');
}
if ($(el).hasClass('overlap')) {
$(el).addClass('transition');
setTimeout(function () {
$(el).removeClass('transition');
}, 100);
}
magnet.className = magnet.className.replace(' overlap', '');
el.className = el.className.replace(' overlap', '');
}
moveToPos(x, y);
}
$(draggableEl).on('touchstart mousedown', onTouchStart).on('touchmove drag', move).on('touchend mouseup', onTouchEnd);
function onTouchStart(event) {
var rect = this.getBoundingClientRect();
$('body').addClass('touching');
$(this).removeClass('edge transition');
this._touchOrigin = {
x: event.pageX,
y: event.pageY
};
this._posOrigin = {
x: rect.left,
y: rect.top
};
}
function onTouchEnd(event) {
var el = draggableEl, rect = el.getBoundingClientRect(), width = $('body').width(), halfScreen = width / 2;
if (!$(el).hasClass('overlap')) {
$('body').removeClass('moving touching');
magnet.style.marginBottom = magnet.style.marginLeft = '0px';
var x = rect.left + rect.width / 2 < halfScreen ? +10 : width - 10 - rect.width;
$(el).addClass('edge');
moveToPos(x, rect.top);
setTimeout(function () {
$(el).removeClass('edge');
}, 500);
}
}
source: http://jsfiddle.net/4yt1roa6/