scaling orientation now is viewport-center instead of top left position - magnifier are clickable for scaling

4 files changed, 29 insertions, 2 deletions

diff --git a/modules-available/roomplanner/js/grid.js b/modules-available/roomplanner/js/grid.js
index 44f32123..9fdd99e4 100644
--- a/modules-available/roomplanner/js/grid.js
+++ b/modules-available/roomplanner/js/grid.js
@@ -353,6 +353,18 @@ roomplanner.grid = (function() {
 				$('#drawarea').height(h);
 			},
 			scale: function(num) {
+				
+				var area_left = parseInt($('#drawarea').css('left')) - $('#drawpanel .panel-body').width()/2 ;
+				var area_top = parseInt($('#drawarea').css('top')) - $('#drawpanel .panel-body').height()/2;
+				
+				var opts = {
+						left: ((parseInt(area_left) * num / roomplanner.settings.scale ) + $('#drawpanel .panel-body').width()/2)+ "px" ,
+						top: ((parseInt(area_top)  * num / roomplanner.settings.scale ) + $('#drawpanel .panel-body').height()/2)+ "px" 
+					};
+				
+				$('#drawarea').css(opts);
+				
+				
 				$('#drawarea').css('background-size',num);
 				roomplanner.settings.scale = num;
 				$('#draw-element-area .ui-draggable').each(function(idx,item) {
@@ -434,6 +446,10 @@ $(document).ready(function(){
 			// the element is already in drawing area
 			var el = (ui.helper == ui.draggable) ? ui.draggable : $(ui.helper.clone());
 			if ($(el).collision('[itemtype="'+$(el).attr('itemtype').replace('_drag','')+'"]').length) {
+				
+				// pathfinding zu besserer position
+				
+				
 				return;
 			}
 			
diff --git a/modules-available/roomplanner/js/init.js b/modules-available/roomplanner/js/init.js
index 1d3c18fb..efe14fea 100644
--- a/modules-available/roomplanner/js/init.js
+++ b/modules-available/roomplanner/js/init.js
@@ -31,6 +31,14 @@ function initRoomplanner() {
 		$('#serializedRoom').val(roomplanner.serialize());
 		$('#roomForm').submit();
 	});
+	
+	$('#zoom-out').click(function() {
+		roomplanner.grid.scale(roomplanner.settings.scale - 10);
+	});
+	
+	$('#zoom-in').click(function() {
+		roomplanner.grid.scale(roomplanner.settings.scale + 10);
+	});
 }
 
 var translation = {
diff --git a/modules-available/roomplanner/style.css b/modules-available/roomplanner/style.css
index 1ec55969..9fa19e8c 100644
--- a/modules-available/roomplanner/style.css
+++ b/modules-available/roomplanner/style.css
@@ -35,6 +35,9 @@ body.full #drawpanel {
 #scaleslider {
 	position:relative;}
 
+#zoom-out, #zoom-in {
+	cursor:pointer;
+}
 
 
 #scaleContainer .glyphicon {
diff --git a/modules-available/roomplanner/templates/page.html b/modules-available/roomplanner/templates/page.html
index 262d7947..6b31b2f6 100644
--- a/modules-available/roomplanner/templates/page.html
+++ b/modules-available/roomplanner/templates/page.html
@@ -303,8 +303,8 @@
 			</div>
 			<div id="scaleContainer">
 				<div id="scaleslider"></div>
-				<span class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
-				<span class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
+				<span id="zoom-out" class="glyphicon glyphicon-zoom-out" aria-hidden="true"></span>
+				<span id="zoom-in" class="glyphicon glyphicon-zoom-in" aria-hidden="true"></span>
 			</div>
 		</div>