overleaf/services/web/public/coffee/ide/pdfng/directives/pdfJs.coffee

define [
	"base"
	"ide/pdfng/directives/pdfViewer"
	"text!libs/pdfListView/TextLayer.css"
	"text!libs/pdfListView/AnnotationsLayer.css"
	"text!libs/pdfListView/HighlightsLayer.css"
], (
	App
	pdfViewer
	textLayerCss
	annotationsLayerCss
	highlightsLayerCss
) ->
	if PDFJS?
		PDFJS.workerSrc = window.pdfJsWorkerPath

	style = $("<style/>")
	style.text(textLayerCss + "\n" + annotationsLayerCss + "\n" + highlightsLayerCss)
	$("body").append(style)

	App.directive "pdfng", ["$timeout", "localStorage", ($timeout, localStorage) ->
		return {
			scope: {
					"pdfSrc": "="
					"highlights": "="
					"position": "="
					"dblClickCallback": "="
			}
			link: (scope, element, attrs) ->
				# pdfListView = new PDFListView element.find(".pdfjs-viewer")[0],
				#		textLayerBuilder: TextLayerBuilder
				#		annotationsLayerBuilder: AnnotationsLayerBuilder
				#		highlightsLayerBuilder: HighlightsLayerBuilder
				#		ondblclick: (e) -> onDoubleClick(e)
				#		# logLevel: PDFListView.Logger.DEBUG
				# pdfListView.listView.pageWidthOffset = 20
				# pdfListView.listView.pageHeightOffset = 20

				scope.loading = false
				scope.pleaseJumpTo = null
				scope.scale = null
				initializedPosition = false
				initializePosition = () ->
					return if initializedPosition
					initializedPosition = true

					if (scale = localStorage("pdf.scale"))?
						scope.scale = { scaleMode: scale.scaleMode, scale: +scale.scale}
					else
						scope.scale = { scaleMode: 'scale_mode_fit_width' }

					if (position = localStorage("pdf.position.#{attrs.key}"))
						scope.position = { page: +position.page, offset: { "top": +position.offset.top, "left": +position.offset.left } }

					#scope.position = pdfListView.getPdfPosition(true)

					scope.$on "$destroy", () =>
						localStorage "pdf.scale", scope.scale
						localStorage "pdf.position.#{attrs.key}", scope.position

					$(window).unload () =>
						localStorage "pdf.scale", scope.scale
						localStorage "pdf.position.#{attrs.key}", scope.position

				flashControls = () ->
					scope.$evalAsync () ->
						scope.flashControls = true
						$timeout () ->
							scope.flashControls = false
						, 1000

				scope.$on 'pdfDoubleClick', (event, e) ->
					scope.dblClickCallback?(page: e.page - 1, offset: { top: e.y, left: e.x })

				scope.$on 'flash-controls', () ->
					flashControls()

				scope.$watch "pdfSrc", (url) ->
					if url
						scope.loading = true
						# console.log 'pdfSrc =', url
						initializePosition()
						flashControls()
						# pdfListView
						#		.loadPdf(url, onProgress)
						#		.then () ->
						#			scope.$apply () ->
						#				scope.loading = false
						#				delete scope.progress
						#				initializePosition()
						#				flashControls()
				
				scope.$on "loaded", () ->
					scope.progress = 100
					scope.$apply()
					$timeout () ->
						scope.loading = false
						delete scope.progress
					, 250

				#scope.$watch "highlights", (areas) ->
					# console.log 'got HIGHLIGHTS in pdfJS', areas
					
					# return if !areas?
					# highlights = for area in areas or []
					# 	{
					# 		page: area.page
					# 		highlight:
					# 			left: area.h
					# 			top: area.v
					# 			height: area.height
					# 			width: area.width
					# 	}

					# if highlights.length > 0
					# 	first = highlights[0]
					# 	position = {
					# 		page: first.page
					# 		offset:
					# 			left: first.highlight.left
					# 			top: first.highlight.top - 80
					# 	}
					# 	console.log 'position is', position, 'in highlights'
					# 	scope.pleaseJumpTo = position
					# pdfListView.clearHighlights()
					# pdfListView.setHighlights(highlights, true)

					# setTimeout () =>
					#		pdfListView.clearHighlights()
					# , 1000

				scope.fitToHeight = () ->
					scale = angular.copy (scope.scale)
					scale.scaleMode = 'scale_mode_fit_height'
					scope.scale = scale

				scope.fitToWidth = () ->
					scale = angular.copy (scope.scale)
					scale.scaleMode = 'scale_mode_fit_width'
					scope.scale = scale

				scope.zoomIn = () ->
					scale = angular.copy (scope.scale)
					scale.scaleMode = 'scale_mode_value'
					scale.scale = scale.scale * 1.2
					scope.scale = scale

				scope.zoomOut = () ->
					scale = angular.copy (scope.scale)
					scale.scaleMode = 'scale_mode_value'
					scale.scale = scale.scale / 1.2
					scope.scale = scale

				if attrs.resizeOn?
					for event in attrs.resizeOn.split(",")
						scope.$on event, (e) ->
							#console.log 'got a resize event', event, e
							#

				scope.$on 'progress', (event, progress) ->
					scope.$apply () ->
						scope.progress = Math.floor(progress.loaded/progress.total*100)
						scope.progress = 100 if scope.progress > 100
						scope.progress = 0 if scope.progress < 0

				scope.$on '$destroy', () ->
					# console.log 'pdfjs destroy event'

			template: """
				<div data-pdf-viewer class="pdfjs-viewer" pdf-src='pdfSrc' position='position' scale='scale' highlights='highlights' please-jump-to='pleaseJumpTo'></div>
				<div class="pdfjs-controls" ng-class="{'flash': flashControls }">
					<div class="btn-group">
						<a href
							class="btn btn-info btn-lg"
							ng-click="fitToWidth()"
							tooltip="Fit to Width"
							tooltip-append-to-body="true"
							tooltip-placement="bottom"
						>
							<i class="fa fa-fw fa-arrows-h"></i>
						</a>
						<a href
							class="btn btn-info btn-lg"
							ng-click="fitToHeight()"
							tooltip="Fit to Height"
							tooltip-append-to-body="true"
							tooltip-placement="bottom"
						>
							<i class="fa fa-fw fa-arrows-v"></i>
						</a>
						<a href
							class="btn btn-info btn-lg"
							ng-click="zoomIn()"
							tooltip="Zoom In"
							tooltip-append-to-body="true"
							tooltip-placement="bottom"
						>
							<i class="fa fa-fw fa-search-plus"></i>
						</a>
						<a href
							class="btn btn-info btn-lg"
							ng-click="zoomOut()"
							tooltip="Zoom Out"
							tooltip-append-to-body="true"
							tooltip-placement="bottom"
						>
							<i class="fa fa-fw fa-search-minus"></i>
						</a>
					</div>
				</div>
				<div class="progress-thin" ng-show="loading">
					<div class="progress-bar" ng-style="{ 'width': progress + '%' }"></div>
				</div>
			"""
		}
	]