Public preview

README.md

@@ -0,0 +1,12 @@
+# Draw.io
+Create, edit and share drawio diagrams right within ownCloud!
+
+![Screenshot of drawio editor](screenshot.png?raw=true "Embedded drawio editor")
+
+Author: Tom Needham <tom@owncloud.com>
+
+### Configuration
+
+You can set the drawio hostname to use a self hosted instance using `occ`:  
+
+`occ config:app:set drawio host_url https://my.draw.io.host.com`

appinfo/app.php

@@ -22,5 +22,7 @@
 
 new \OCA\Drawio\Application(
 	\OC::$server->getEventDispatcher(),
-	\OC::$server->getUserSession()
+	\OC::$server->getUserSession(),
+	\OC::$server->getConfig()
 );
+

appinfo/routes.php

@@ -22,7 +22,8 @@
 
 $app = new \OCA\Drawio\Application(
 	\OC::$server->getEventDispatcher(),
-	\OC::$server->getUserSession()
+	\OC::$server->getUserSession(),
+	\OC::$server->getConfig()
 );
 $app->registerRoutes(
 	$this, [

js/editor.js

@@ -29,6 +29,15 @@
 		};
 	}
 
+	OCA.Drawio.LoadPublicFileHandler = function(eventHandler, downloadPath, editWindow) {
+		$.get( downloadPath, function( data ) {
+			editWindow.postMessage(JSON.stringify({
+				action: "load",
+				xml: data
+			}), "*");
+		});
+	};
+
 	OCA.Drawio.LoadEditorHandler = function(eventHandler, path, editWindow) {
 		// Handle the load event at the start of the page load
 		var loadMsg = OC.Notification.show(t(OCA.Drawio.AppName, "Loading diagram..."));

js/public.js

@@ -0,0 +1,41 @@
+var eventHandler = function (evt) {
+	// Only on public page
+	if ($('#isPublic').val()) {
+		if (evt.data.length > 0) {
+			var payload = JSON.parse(evt.data);
+			if (payload.event === "init") {
+				OCA.Drawio.LoadPublicFileHandler(
+					eventHandler,
+					$('#downloadURL').val(),
+					$('#drawioEditor')[0].contentWindow);
+			}
+		}
+	}
+};
+window.addEventListener("message", eventHandler);
+
+$(document).ready(function(){
+	var mimes = [
+		'application/octet-stream',
+		'application/xml'
+	];
+	if ($('#isPublic').val() && mimes.indexOf($('#mimetype').val()) !== -1 && $('#filename').val().split('.').pop() === 'drawio') {
+		var src = 'https://www.draw.io?embed=1&chrome=0&spin=1&stealth=1&proto=json';
+		var html ='<iframe ' +
+			'id="drawioEditor"' +
+			'width="100%"' +
+			'height="100%"' +
+			'align="top"' +
+			'frameborder="0"' +
+			'name="iframeEditor"' +
+			'allowfullscreen=""' +
+			'</iframe>';
+		$('#imgframe').html(html);
+		$('#drawioEditor').attr('src', src);
+		$("<style type='text/css'> img.publicpreview { display: none; } </style>").appendTo("head");
+		$('#drawioEditor').attr('height', $(window).height()*.65+'px');
+		$( window ).resize(function() {
+			$('#drawioEditor').attr('height', $(window).height()*.65+'px');
+		});
+	}
+});

lib/Application.php

@@ -22,8 +22,9 @@
 
 namespace OCA\Drawio;
 
+use OC\Security\CSP\ContentSecurityPolicy;
 use OCP\AppFramework\App;
-use OCP\IRequest;
+use OCP\IConfig;
 use OCP\IUserSession;
 use OCP\Util;
 use Symfony\Component\EventDispatcher\EventDispatcherInterface;
@@ -32,18 +33,46 @@ class Application extends App {
 
 	const APPID = 'drawio';
 
+	/** @var IConfig  */
+	protected $config;
+
 	public function __construct(
 		EventDispatcherInterface $dispatcher,
-		IUserSession $userSession) {
+		IUserSession $userSession,
+		IConfig $config) {
 		parent::__construct(self::APPID);
+		$this->config = $config;
 
+		// Add scripts for files app integration
 		if ($userSession->isLoggedIn()) {
 			$dispatcher->addListener('OCA\Files::loadAdditionalScripts', function() {
-				Util::addScript(self::APPID, "files");
-				Util::addStyle(self::APPID, "files");
+				Util::addScript(self::APPID, 'files');
+				Util::addStyle(self::APPID, 'files');
 
 			});
 		}
+
+		// Add scripts for public preview
+		$dispatcher->addListener(
+			'OCA\Files_Sharing::loadAdditionalScripts',
+			function() {
+				Util::addScript(self::APPID, 'public');
+				Util::addScript(self::APPID, 'editor');
+			}
+		);
+
+		$manager = \OC::$server->getContentSecurityPolicyManager();
+		$policy = new ContentSecurityPolicy();
+		$publicHost = 'https://www.draw.io';
+		$policy->addAllowedFrameDomain($publicHost);
+		if ($this->getDrawIoHost() !== $publicHost) {
+			$policy->addAllowedFrameDomain($this->getDrawIoHost());
+		}
+		$manager->addDefaultPolicy($policy);
+	}
+
+	public function getDrawIoHost() {
+		return $this->config->getAppValue(self::APPID, 'host_url', 'https://www.draw.io');
 	}
 
 }

lib/Controller/PageController.php

@@ -34,9 +34,6 @@
 
 class PageController extends Controller {
 
-	const SERVERURL = 'https://www.draw.io';
-	const THEME = 'minimal';
-
 	/** @var IRootFolder  */
 	protected $rootFolder;
 	/** @var IL10N  */
@@ -68,11 +65,6 @@ public function editor($fileid) {
 			'editor');
 		$csp = new ContentSecurityPolicy();
 		$csp->allowInlineScript(true);
-		$csp->addAllowedScriptDomain(self::SERVERURL);
-		$csp->addAllowedFrameDomain(self::SERVERURL);
-		$csp->addAllowedFrameDomain("blob:");
-		$csp->addAllowedChildSrcDomain(self::SERVERURL);
-		$csp->addAllowedChildSrcDomain("blob:");
 		$response->setContentSecurityPolicy($csp);
 		$UID = $this->userSession->getUser()->getUID();
 		$userFolder = $this->rootFolder->getUserFolder($UID);
@@ -96,12 +88,12 @@ public function editor($fileid) {
 			'stealth' => 1,
 			'spin' => 1,
 			'proto' => 'json',
-			'ui' => self::THEME
+			'ui' => 'minimal'
 		];
 		if (!$canEdit) {
 			$params['chrome'] = 0;
 		}
-		$dioString = self::SERVERURL . '?' . http_build_query($params);
+		$dioString = \OC::$server->query(Application::class)->getDrawIoHost() . '?' . http_build_query($params);
 		$response->setParams([
 			'path' => $filePath,
 			'dio_src_string' => $dioString,