Added a slide guide to show the size of the actual slide in the prese…

…ntation editor.

The slide guide scales with the user's browser window to give an accurate depiction
of the look of the slide in the real system.

Fixes #6

client/src/ui/editor/OperatingTable.coffee

@@ -29,6 +29,22 @@ define(["vendor/backbone",
 			# re-render ourselves
 			@render(prevModel)
 
+		resized: () ->
+			slideSize = window.slideConfig.size
+			tableSize = width: @$el.width(), height: @$el.height()
+
+			xScale = (tableSize.width) / slideSize.width
+			yScale = (tableSize.height - 20) / slideSize.height
+
+			newHeight = slideSize.height * xScale
+			if newHeight > tableSize.height
+				scale = yScale
+			else
+				scale = xScale
+
+			@$slideContainer.css(window.browserPrefix + "transform", "scale(" + scale + ")")
+
+
 		clicked: (e) ->
 			if @model?
 				@model.get("components").forEach((component) ->
@@ -75,18 +91,22 @@ define(["vendor/backbone",
 
 		_componentAdded: (model, component) ->
 			view = ComponentViewFactory.createView(component)
-			@$el.append(view.render())
+			@$slideContainer.append(view.render())
 
 		render: (prevModel) ->
 			if prevModel?
 				prevModel.trigger("unrender", true)
-			#@$el.html("")
-			#@$el.html(Templates.OperatingTable(@model))
+
+			@$el.html("<div class='slideContainer'></div>")
+			@$slideContainer = @$el.find(".slideContainer")
+			@$slideContainer.css(width: window.slideConfig.size.width, height: window.slideConfig.size.height)
+			@resized()
+
 			if @model?
 				components = @model.get("components")
 				components.forEach((component) =>
 					view = ComponentViewFactory.createView(component)
-					@$el.append(view.render())
+					@$slideContainer.append(view.render())
 				)
 			@$el
 	)

client/src/ui/editor/SlideEditor.coffee

@@ -102,7 +102,9 @@ define(["vendor/backbone", "./Templates",
 
 				@$operatingTable.css(
 					height: window.innerHeight - 80
+					width: window.innerWidth - 150
 				)
+				@operatingTable.resized()
 				#window.slideConfig.size.height
 				 #window.slideConfig.size.width
 

client/src/ui/editor/components/ComponentView.coffee

@@ -145,6 +145,9 @@ define(["vendor/backbone",
 		mousedown: (e) ->
 			@model.set("selected", true)
 			@$el.css("zIndex", zTracker.next())
+			@dragScale = @$el.parent().css(window.browserPrefix + "transform")
+			@dragScale = parseFloat(@dragScale.substring(7, @dragScale.indexOf(","))) or 1
+			console.log @dragScale
 			@_dragging = true
 			@_prevPos = {
 				x: e.pageX
@@ -209,8 +212,9 @@ define(["vendor/backbone",
 				y = @model.get("y")
 				dx = e.pageX - @_prevPos.x
 				dy = e.pageY - @_prevPos.y
-				newX = x + dx
-				newY = y + dy
+				newX = x + dx / @dragScale
+				newY = y + dy / @dragScale
+
 				@model.set("x", newX)
 				@model.set("y", newY)
 				@$el.css({

client/src/ui/editor/res/templates/Editor.bars

@@ -1,7 +1,7 @@
 <div class="navbar navbar-fixed-top menuBar">
   <div class="btn-inverse temp">
     <div class="container">
-    	<a class="brand" href="#">Strut 0.1</a>
+    	<a class="brand" href="#">Strut 0.2</a>
      	<ul class="nav">
      		<li class="dropdown active">
      			<a href="#" class="dropdown-toggle" data-toggle="dropdown">

client/web/scripts/ui/editor/res/css/SlideEditor.css

@@ -61,6 +61,18 @@
 	margin-top: 10px;
 }
 
+.slideEditor .slideContainer {
+	border: 1px solid rgba(0, 0, 0, 0.2);
+	transform-origin: 0 0;
+	-webkit-transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	margin: 10px auto;
+	overflow: hidden;
+	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+	box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+	-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
+}
+
 .lato { font-family:'Lato', sans-serif; }
 .ubuntu { font-family:'Ubuntu', sans-serif; }
 .abril { font-family:'Abril Fatface', cursive; }