Feature/mobile friendly

package.json

@@ -36,6 +36,7 @@
     "filesaver.js": "^0.1.1",
     "font-awesome": "^4.3.0",
     "fs-promise": "^0.3.1",
+    "fullscreen": "^1.0.0",
     "jade": "^1.10.0",
     "jquery": "^2.1.1",
     "js-yaml": "^3.2.7",

public/styles/app/index.styl

@@ -31,9 +31,11 @@ h1 a
 
 	@import customButton
 
-#wrapper
-	padding-left 0
-	padding-right 0
+.canvasWrapper
+	display block
+	width 100%
+	height 100%
+	overflow hidden
 
 #canvas
 	display block

public/styles/app/sidebar.styl

@@ -8,7 +8,9 @@
 	user-select none
 
 	.navbar-toggle
-		margin-top 5px
+		margin 0 0 0 10px
+		min-height 44px
+		min-width 44px
 		.icon-bar
 			background-color white
 

public/styles/fps.styl → public/styles/fidelity.styl

@@ -1,4 +1,4 @@
-.fps-display
+.fidelity-display
 	position absolute
 	bottom 0
 	right 0

public/styles/landingpage/quickconvert.styl

@@ -3,14 +3,20 @@
 	background #404040
 	padding-bottom 15px
 
-	.quickConvertCanvas
+	.convert-arrow
+		padding-top 200px
+
+	.canvasWrapper
+		display inline-block
 		width 388px
-		max-width 388px
 		height 300px
-		max-heigth 300px
+		max-width 100%
+		overflow hidden
 
-	.convert-arrow
-		padding-top 200px
+	canvas
+		width 388px
+		height 300px
+		max-width 100%
 
 	#renderArea1
 		background-image url('../img/preview_renderArea1.png')

public/styles/screen.styl

@@ -7,7 +7,7 @@ $icon-font-path ?= '/node_modules/bootstrap-styl/fonts/'
 @import nib
 
 @import spinner
-@import fps
+@import fidelity
 @import app
 @import landingpage
 @import dropoverlay

src/client/landingpage.coffee

@@ -12,9 +12,6 @@ fileLoader = require './modelLoading/fileLoader'
 modelCache = require './modelLoading/modelCache'
 
 # Set renderer size to fit to 3 bootstrap columns
-globalConfig.staticRendererSize = true
-globalConfig.staticRendererWidth = 388
-globalConfig.staticRendererHeight = 300
 globalConfig.buildUi = false
 globalConfig.plugins.dummy = false
 globalConfig.plugins.coordinateSystem = false

src/client/pluginHooks.yaml

@@ -30,10 +30,13 @@
 # On each render frame the [renderer](render.html) will call the `on3dUpdate`
 # method of all plugins that provide it.
 #
-# The callback has one single argument, a DOMHighResTimeStamp, which indicates
+# The callback has two arguments:
+# First, a DOMHighResTimeStamp which indicates
 # the current time for when requestAnimationFrame starts to fire callbacks.
 # (according to
 # https://developer.mozilla.org/en/docs/Web/API/window.requestAnimationFrame)
+# Second, a number in milliseconds indicating the time it took to render the
+# last frame.
 
 - on3dUpdate
 

src/client/rendering/Renderer.coffee

@@ -21,6 +21,10 @@ class Renderer
 		@useBigRendertargets = false
 		@usePipelineSsao = false
 		@imageRenderQueries = []
+		window.addEventListener(
+			'resize'
+			@windowResizeHandler
+		)
 
 	# renders the current scene to an image, uses the camera if provided
 	# returns a promise which will resolve with the image
@@ -34,14 +38,18 @@ class Renderer
 			}
 
 	localRenderer: (timestamp) =>
+		startTime = window.performance.now()
+		# Call update hook
+		@pluginHooks.on3dUpdate timestamp, @lastFrameTime
+
 		if @imageRenderQueries.length == 0
 			@_renderFrame timestamp, @camera, null
 		else
 			@_renderImage timestamp
 
-		# call update hook
-		@pluginHooks.on3dUpdate timestamp
-		@animationRequestID = requestAnimationFrame @localRenderer
+		@renderPromiseResolver()
+		@renderPromise = null
+		@lastFrameTime = window.performance.now() - startTime
 
 	# Renders all plugins
 	_renderFrame: (timestamp, camera, renderTarget = null) =>
@@ -234,13 +242,13 @@ class Renderer
 	getCamera: ->
 		return @camera
 
-	windowResizeHandler: ->
-		if not @staticRendererSize
-			@camera.aspect = @size().width / @size().height
-			@camera.updateProjectionMatrix()
-			@threeRenderer.setSize @size().width, @size().height
+	windowResizeHandler: =>
+		@camera.aspect = @size().width / @size().height
+		@camera.updateProjectionMatrix()
+		@threeRenderer.setSize @size().width, @size().height
 
 		@threeRenderer.render @scene, @camera
+		@render()
 
 	zoomToNode: (threeNode) ->
 		boundingSphere = threeHelper.getBoundingSphere threeNode
@@ -254,21 +262,14 @@ class Renderer
 		@_setupCamera @globalConfig
 		@_setupControls @globalConfig, controls
 
-		@animationRequestID = requestAnimationFrame @localRenderer
-
 	_setupSize: (globalConfig) ->
-		if not globalConfig.staticRendererSize
-			@staticRendererSize = false
-		else
-			@staticRendererSize = true
-			@staticRendererWidth = globalConfig.staticRendererWidth
-			@staticRendererHeight = globalConfig.staticRendererHeight
+		@$canvasWrapper = $ '.canvasWrapper'
 
 	size: ->
-		if @staticRendererSize
-			return {width: @staticRendererWidth, height: @staticRendererHeight}
-		else
-			return {width: window.innerWidth, height: window.innerHeight}
+		return {
+			width: @$canvasWrapper.width()
+			height: @$canvasWrapper.height()
+		}
 
 	_setupRenderer: (globalConfig) ->
 		@threeRenderer = new THREE.WebGLRenderer(
@@ -322,6 +323,8 @@ class Renderer
 		)
 		@camera.up.set(0, 0, 1)
 		@camera.lookAt(new THREE.Vector3(0, 0, 0))
+		Object.observe @camera.position, =>
+			@render()
 
 	_setupControls: (globalConfig, controls) ->
 		unless controls
@@ -357,14 +360,10 @@ class Renderer
 		@_setupLighting(scene)
 		return scene
 
-	toggleRendering: =>
-		if @animationRequestID?
-			cancelAnimationFrame @animationRequestID
-			@animationRequestID = null
-			@controls.config.enabled = false
-		else
-			@animationRequestID = requestAnimationFrame @localRenderer
-			@controls.config.enabled = true
-
+	render: =>
+		if not @renderPromise?
+			@renderPromise = new Promise (@renderPromiseResolver) =>
+				requestAnimationFrame @localRenderer
+		return @renderPromise
 
 module.exports = Renderer

src/client/ui/pointerDispatcher.coffee

@@ -41,9 +41,15 @@ class PointerDispatcher
 		# Stop event if a plugin handled it (else let pointer controls work)
 		@_stop event if handled
 
+		# This was a down event not handled by any plugin --> the whole gesture will
+		# be handled by pointer controls
+		@_isPointerControlsGesture = !handled
+
 		return
 
 	onPointerMove: (event) =>
+		return if @_isPointerControlsGesture
+
 		# don't call mouse events if there is no selected node
 		if not @sceneManager.selectedNode?
 			# notify hint Ui of unhandled event
@@ -62,6 +68,11 @@ class PointerDispatcher
 		return
 
 	onPointerUp: (event) =>
+		if @_isPointerControlsGesture
+			# End this gesture.
+			@_isPointerControlsGesture = false
+			return
+
 		# Pointer capture will be implicitly released
 
 		# don't call mouse events if there is no selected node

src/client/ui/ui.coffee

@@ -28,11 +28,6 @@ module.exports = class Ui
 	_initListeners: =>
 		@pointerDispatcher.init()
 
-		window.addEventListener(
-			'resize'
-			@windowResizeHandler
-		)
-
 	_initHotkeys: =>
 		@hotkeys = new Hotkeys(@pluginHooks, @bundle.sceneManager)
 		@hotkeys.addEvents @bundle.sceneManager.getHotkeys()
@@ -57,12 +52,6 @@ module.exports = class Ui
 				}
 			]
 		}
-		if process.env.NODE_ENV is 'development'
-			gridHotkeys.events.push {
-				description: 'Toggle rendering'
-				hotkey: 'p'
-				callback: @_toggleRendering
-			}
 		@hotkeys.addEvents gridHotkeys
 
 	_toggleGridVisibility: =>
@@ -74,8 +63,3 @@ module.exports = class Ui
 
 	_toggleAssemblyView: =>
 		@workflowUi.toggleAssemblyView()
-
-	_toggleRendering: =>
-		fidelityControl = @bundle.getPlugin 'FidelityControl'
-		fidelityControl?.reset()
-		@renderer.toggleRendering()

src/client/ui/workflowUi/workflowUi.coffee

@@ -4,6 +4,7 @@ LoadUi = require './LoadUi'
 EditUi = require './EditUi'
 PreviewUi = require './PreviewUi'
 ExportUi = require './ExportUi'
+fullscreen = require 'fullscreen'
 
 class WorkflowUi
 	constructor: (@bundle) -> return
@@ -46,6 +47,7 @@ class WorkflowUi
 
 		@_initScrollbar()
 		@_initToggleButton()
+		@_initFullscreenButton()
 
 	_initScrollbar: ->
 		sidebar = document.getElementById 'leftSidebar'
@@ -55,12 +57,24 @@ class WorkflowUi
 	_initToggleButton: ->
 		$('#toggleMenu').click => @toggleMenu()
 
+	_initFullscreenButton: ->
+		if fullscreen.available()
+			$('#fullScreen').click => @toggleFullScreen()
+			$('#fullScreen').show()
+
 	toggleMenu: ->
 		$('#leftSidebar').css('height': 'auto')
 		$('#sidebar-content').slideToggle null, ->
 			$('#leftSidebar').toggleClass 'collapsed-sidebar'
 			$('#leftSidebar').css('height': '')
 
+	toggleFullScreen: =>
+		fs = fullscreen(document.documentElement)
+		if fs.target()?
+			fs.release()
+		else
+			fs.request()
+
 	hideMenuIfPossible: ->
 		return unless $('#toggleMenu:visible').length > 0
 		$('#leftSidebar').css('height': 'auto')

src/common/globals.yaml

@@ -45,9 +45,6 @@ gridStepSize: 10
 
 # render DOM
 renderAreaId: 'canvas'
-staticRendererSize: false
-staticRendererWidth: 100
-staticRendererHeight: 100
 
 #ui and interaction
 buildUi: true

src/plugins/dummy/client.coffee

@@ -48,10 +48,11 @@ class DummyPlugin
 	# method of all plugins that provide it.
 	#
 	# @param {DOMHighResTimeStamp} timestamp the current time
+	# @param {Number} lastFrameTime milliseconds it took to render the last frame
 	# @see Renderer
 	# @see https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp
 	###
-	on3dUpdate: (timestamp) ->
+	on3dUpdate: (timestamp, lastFrameTime) ->
 		return undefined
 
 	###