[roomplanner] Add "fit to content" zoom button

Implements #2965

4 files changed, 61 insertions, 13 deletions

diff --git a/modules-available/roomplanner/js/grid.js b/modules-available/roomplanner/js/grid.js
index cc09e21d..334057bf 100644
--- a/modules-available/roomplanner/js/grid.js
+++ b/modules-available/roomplanner/js/grid.js
@@ -17,6 +17,7 @@ if (!roomplanner) var roomplanner = {
 		},
 		settings: {
 			cellsep: 4,
+			cellsize: 25,
 			scale: 100,
 			room: {
 				width: 33,
@@ -363,6 +364,7 @@ if (!roomplanner) var roomplanner = {
 			});
 			
 			roomplanner.grid.scale(roomplanner.settings.scale);
+			roomplanner.fitContent();
 		},
 		clear: function() {
 			$('#draw-element-area').html('');
@@ -393,20 +395,18 @@ roomplanner.grid = (function() {
 				$('#drawarea').css('background-size',num);
 				roomplanner.settings.scale = num;
 				$('#draw-element-area .ui-draggable').each(function(idx,item) {
-					var h = $(item).attr('data-height') * roomplanner.getScaleFactor();
-					var w = $(item).attr('data-width') * roomplanner.getScaleFactor();
+					var $item = $(item);
+					var h = $item.attr('data-height') * roomplanner.getScaleFactor();
+					var w = $item.attr('data-width') * roomplanner.getScaleFactor();
 					//var pos = roomplanner.getCelloffset()
+
+					var pos = roomplanner.getCellPositionFromGrid($item.attr('gridRow'),$item.attr('gridCol'));
 					
-					var l = parseInt($(item).css('left')) * roomplanner.getScaleFactor();
-					var t = parseInt($(item).css('top')) * roomplanner.getScaleFactor();
-					
-					var pos = roomplanner.getCellPositionFromGrid($(item).attr('gridRow'),$(item).attr('gridCol'));
-					
-					$(item).css({width: w+"px", height: h+"px", left: pos[0]+"px", top: pos[1]+"px"});
-					$(item).draggable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]);
+					$item.css({width: w+"px", height: h+"px", left: pos[0]+"px", top: pos[1]+"px"});
+					$item.draggable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]);
 					
 					if (roomplanner.isElementResizable(item)) {
-						$(item).resizable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]);
+						$item.resizable("option","grid",[(roomplanner.settings.scale / 4), (roomplanner.settings.scale / 4)]);
 					}
 				});
 				this.resize();
@@ -423,6 +423,44 @@ roomplanner.grid = (function() {
 }
 )();
 
+roomplanner.fitContent = function() {
+	var minX = 99999;
+	var minY = 99999;
+	var maxX = -99999;
+	var maxY = -99999;
+	$('#draw-element-area .ui-draggable').each(function(idx,item) {
+		var $item = $(item);
+
+		var l = parseInt($item.attr('gridcol')) * roomplanner.settings.cellsize;
+		var r = l + parseInt($item.attr('data-width'));
+		var t = parseInt($item.attr('gridrow')) * roomplanner.settings.cellsize;
+		var b = t + parseInt($item.attr('data-height'));
+
+		if (l < minX) minX = l;
+		if (t < minY) minY = t;
+		if (r > maxX) maxX = r;
+		if (b > maxY) maxY = b;
+	});
+	if (minX > maxX)
+		return;
+	var width = (maxX - minX) / $('#drawpanel .panel-body').width();
+	var height = (maxY - minY) / $('#drawpanel .panel-body').height();
+	var scale;
+	if (width > height) {
+		scale = Math.floor(100 / width);
+	} else {
+		scale = Math.floor(100 / height);
+	}
+	roomplanner.slider.slider('value', scale);
+	scale = roomplanner.settings.scale;
+	var opts = {
+		left: -(minX * (scale / 100)) + "px",
+		top: -(minY * (scale / 100)) + "px"
+	};
+
+	$('#drawarea').css(opts);
+};
+
 $(document).ready(function(){
 	roomplanner.grid.init();
 
diff --git a/modules-available/roomplanner/js/init.js b/modules-available/roomplanner/js/init.js
index ef3d15a7..7cada0dd 100644
--- a/modules-available/roomplanner/js/init.js
+++ b/modules-available/roomplanner/js/init.js
@@ -59,6 +59,10 @@ function initRoomplanner() {
 	$('#zoom-in').click(function() {
 		roomplanner.slider.slider('value', roomplanner.settings.scale + 10);
 	});
+
+	$('#zoom-fit').click(function() {
+		roomplanner.fitContent();
+	});
 }
 
 var translation = {
diff --git a/modules-available/roomplanner/style.css b/modules-available/roomplanner/style.css
index 1460364a..6a68a444 100644
--- a/modules-available/roomplanner/style.css
+++ b/modules-available/roomplanner/style.css
@@ -40,7 +40,7 @@ body {
 #scaleContainer {
 	position: absolute;
 	bottom: 5px;
-	right: 30px;
+	right: 50px;
 	width: 15%;
 	z-index:1000;
 	}
@@ -48,7 +48,7 @@ body {
 #scaleslider {
 	position:relative;}
 
-#zoom-out, #zoom-in {
+#zoom-out, #zoom-in, #zoom-fit {
 	cursor:pointer;
 }
 
@@ -61,6 +61,9 @@ body {
 #scaleContainer .glyphicon-zoom-out {
 	left:-20px;}
 
+#scaleContainer .glyphicon-move {
+	right:-40px;}
+
 #scaleContainer .glyphicon-zoom-in {
 	right:-20px; }
 
diff --git a/modules-available/roomplanner/templates/page.html b/modules-available/roomplanner/templates/page.html
index 8bfa0ca4..e8544ce8 100644
--- a/modules-available/roomplanner/templates/page.html
+++ b/modules-available/roomplanner/templates/page.html
@@ -301,9 +301,12 @@
 				<div id="draw-element-area" style="width:100%; height:100%;"></div>
 			</div>
 			<div id="scaleContainer">
+				<span id="zoom-fit" class="glyphicon glyphicon-move" aria-hidden="true"></span>
+				<div>
 				<div id="scaleslider"></div>
 				<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>
 		</div>
 
@@ -311,7 +314,7 @@
 	</div>
 
 <div class="pull-left">
-	<div class="input-group" style="width:400px">
+	<div class="input-group" style="width:1px">
 		<div class="input-group-addon">{{lang_managerIp}}</div>
 		<input class="form-control" type="text" id="manager-ip" value="{{managerip}}" placeholder="1.2.3.4" style="width:120px">
 		<div class="input-group-addon checkbox"><input id="dedi-mgr" type="checkbox" {{dediMgrChecked}}> <label for="dedi-mgr">{{lang_dedicatedManager}}</label></div>