diff --git a/rsrc/behavior-diagram-extension.js b/rsrc/behavior-diagram-extension.js
--- a/rsrc/behavior-diagram-extension.js
+++ b/rsrc/behavior-diagram-extension.js
@@ -11,27 +11,11 @@
var iframeInitializedEvent = new CustomEvent('initReceived');
iframe.setAttribute('title', 'diagrams.net editor');
iframe.setAttribute('frameborder', '0');
- iframe.style.width = '100%';
- iframe.style.height = 'calc(100vh - 91px)';
- iframe.style.marginTop = '30px';
- iframe.style.marginBottom = '-16px';
var receive = function (evt) {
if (evt.data.length > 0) {
var msg = JSON.parse(evt.data);
if (msg.event == 'init') {
- if (phorge_extension.diagramBase64) {
-
- var diagramName = document.querySelector('.diagramName');
- diagramName.style.display = 'inline-block';
- diagramName.querySelector('a').innerText = phorge_extension.diagramName;
- if (phorge_extension.diagramVersion != '') {
- diagramName.querySelector('.version').innerText = '(#'
- + phorge_extension.diagramVersion
- + ')';
- }
- }
-
iframe.contentWindow.postMessage(JSON.stringify({
action: 'load',
autosave: 1,
@@ -45,7 +29,7 @@
setupButtonsInMenuToolbar();
}
else if (msg.event == 'export') {
- saveFlowchart(name, msg.data, iframe);
+ saveFlowchart(msg.data, iframe);
}
else if (msg.event == 'save') {
iframe.contentWindow.postMessage(JSON.stringify({
@@ -60,7 +44,7 @@
window.addEventListener('message', receive);
iframe.setAttribute('src', phorge_extension.editor);
- document.querySelector('#mainScreen').appendChild(iframe);
+ document.querySelector('#diagram-editor-wrapper').appendChild(iframe);
iframe.contentWindow.addEventListener('DOMContentLoaded', addToolbarResourcesToIframe);
iframe.dispatchEvent(iframeInitializedEvent);
@@ -108,8 +92,8 @@
createIframe();
}
- function saveFlowchart(name, flowchartData, iframe) {
- var diagramID = document.querySelector('.diagramName a').innerText.replace(/^DIAG/, '');
+ function saveFlowchart(flowchartData, iframe) {
+ var diagramID = phorge_extension.diagramName.replace(/^DIAG/, '');
var csrf = document.querySelector('input[name="__csrf__"]')?.value;
var data = new URLSearchParams();
data.append('data', flowchartData);
diff --git a/rsrc/diagram-extension.css b/rsrc/diagram-extension.css
new file mode 100644
--- /dev/null
+++ b/rsrc/diagram-extension.css
@@ -0,0 +1,35 @@
+/**
+ * @provides diagram-css-extension
+ */
+
+html,
+.diagram-editor-page,
+.diagram-editor-page #main-page-frame,
+.diagram-editor-page #phabricator-standard-page {
+ height: 100%
+}
+
+.diagram-editor-page #phabricator-standard-page,
+.diagram-editor-page #phabricator-standard-page-body {
+ display: flex;
+ flex-direction: column;
+}
+
+.diagram-editor-page #phabricator-standard-page-body {
+ flex-grow: 1;
+}
+
+.diagram-editor-page .phui-crumbs-view {
+ padding: 0 8px;
+}
+
+#diagram-editor-wrapper {
+ flex-grow: 1;
+ position: relative;
+}
+
+#diagram-editor-wrapper > iframe {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
diff --git a/src/application/DiagramApplication.php b/src/application/DiagramApplication.php
--- a/src/application/DiagramApplication.php
+++ b/src/application/DiagramApplication.php
@@ -17,7 +17,7 @@
. "UML, ER and network diagrams");
}
public function getTitleGlyph() {
- return '\xE2\x98\x85';
+ return "\xF0\x9F\x93\x8A";
}
public function getApplicationGroup() {
return self::GROUP_UTILITIES;
diff --git a/src/celerity/map.php b/src/celerity/map.php
--- a/src/celerity/map.php
+++ b/src/celerity/map.php
@@ -7,18 +7,20 @@
*/
return array(
'names' => array(
- 'behavior-diagram-extension.js' => 'adc38334',
+ 'behavior-diagram-extension.js' => 'a0b36dca',
+ 'diagram-extension.css' => '7ad39d5d',
'iframe-toolbtn.css' => '35ad6f49',
'iframe-toolbtn.js' => '26d75a35',
'remarkup-image.css' => '42b46bf1',
'remarkup-image.js' => '64e7e9e1',
),
'symbols' => array(
+ 'diagram-css-extension' => '7ad39d5d',
'diagram-css-iframe-toolbtn' => '35ad6f49',
'diagram-js-iframe-toolbtn' => '26d75a35',
'diagram-remarkup-image-css' => '42b46bf1',
'diagram-remarkup-image-js' => '64e7e9e1',
- 'javelin-behavior-diagram-extension' => 'adc38334',
+ 'javelin-behavior-diagram-extension' => 'a0b36dca',
),
'requires' => array(),
'packages' => array(),
diff --git a/src/controller/DiagramController.php b/src/controller/DiagramController.php
--- a/src/controller/DiagramController.php
+++ b/src/controller/DiagramController.php
@@ -1,4 +1,5 @@
<?php
+
final class DiagramController extends PhabricatorController {
/**
* Processes incoming HTTP requests from Diagram application
@@ -33,12 +34,11 @@
}
}
-
if (isset($versioninfoDiagramID) && !empty(trim($versioninfoDiagramID))) {
// return diagram version info
if (!isset($versioninfoPage) || empty(trim($versioninfoPage))) {
// versioninfoPage was dismissed -> initialize to 1
- $versioninfoPage = "1";
+ $versioninfoPage = '1';
}
$diagramVersions = id(new DiagramVersion())->loadByDiagramID(
@@ -53,10 +53,11 @@
// filter out some of the versions we want to show
$pageSize = 10;
- $diagramVersions = array_slice($diagramVersions,
- ($versioninfoPage - 1) * $pageSize,
- $pageSize
- );
+ $diagramVersions = array_slice(
+ $diagramVersions,
+ ($versioninfoPage - 1) * $pageSize,
+ $pageSize
+ );
// calculate number of pages
$totalpages = ceil($totalcount / $pageSize);
@@ -75,26 +76,26 @@
$dateModified = $diagramVersion->getDateModified();
$result[] = array(
- "id" => $diagramVersion->getVersion(),
- "datetime" => phabricator_datetime($dateModified, $viewer),
- "author" => $user->getUsername()
+ 'id' => $diagramVersion->getVersion(),
+ 'datetime' => phabricator_datetime($dateModified, $viewer),
+ 'author' => $user->getUsername()
);
}
// reply back
$response = id(new AphrontJSONResponse())->setAddJSONShield(false)
->setContent(array(
- "data" => $result,
- "pagecount" => $totalpages,
- "nopager" => $totalcount <= $pageSize
+ 'data' => $result,
+ 'pagecount' => $totalpages,
+ 'nopager' => $totalcount <= $pageSize
));
return $response;
} else {
// version info requested for inexistant diagram
$response = id(new AphrontJSONResponse())->setAddJSONShield(false)
->setContent(array(
- "data" => array(),
- "pagecount" => 0
+ 'data' => array(),
+ 'pagecount' => 0
));
return $response;
}
@@ -113,18 +114,18 @@
$file .= '/index.html';
if ($versioneddiagramid != null && $version != null) {
$file = preg_replace(
- "/^\/diagram\/$versioneddiagramid\/$version" ."iframe\//",
- "drawio/src/main/webapp/",
+ '/^\/diagram\/' . $versioneddiagramid . '\/'. $version . 'iframe\//',
+ 'drawio/src/main/webapp/',
$file);
} else {
$file = preg_replace("/^\/diagram\/($diagramid\/?)?iframe\//",
- "drawio/src/main/webapp/",
+ 'drawio/src/main/webapp/',
$file);
}
} else {
// load from extension source
if (rtrim($file, '/') == '/diagram') {
- return $this->showApplication($request);
+ return $this->showApplication();
}
if ($versioneddiagramid !== null && $version !== null) {
@@ -163,10 +164,9 @@
$diagram = id(new Diagram())->loadByID($diagram_id);
return $this->showApplication(
- $request,
'DIAG' . $diagram_id,
$diagram->getPHID(),
- $version ?? "",
+ $version ?? '',
$base64_data
);
}
@@ -315,18 +315,18 @@
// reply back
$response = id(new AphrontJSONResponse())->setAddJSONShield(false)
->setContent(array(
- "subscribed" => $isSubscribed
+ 'subscribed' => $isSubscribed
));
return $response;
}
- $base64_data = $request->getStr("data");
- $diagram_id = $request->getStr("diagramID");
+ $base64_data = $request->getStr('data');
+ $diagram_id = $request->getStr('diagramID');
// cut off "data:image/png;base64,"
$base64_data = substr($base64_data, strpos($base64_data, ',') + 1);
- if ($diagram_id != "") {
+ if ($diagram_id != '') {
// check if we are trying to save the same data as the current data
$diagram = id(new DiagramVersion())->loadLatestByDiagramID($diagram_id);
if ($diagram !== null) {
@@ -338,9 +338,9 @@
// => do not create new version
$response = id(new AphrontJSONResponse())->setAddJSONShield(false)
->setContent(array(
- "Status" => "OK",
- "DiagramID" => $diagram->getDiagramID(),
- "Version" => $diagram->getVersion()
+ 'Status' => 'OK',
+ 'DiagramID' => $diagram->getDiagramID(),
+ 'Version' => $diagram->getVersion()
));
return $response;
}
@@ -364,16 +364,16 @@
$response = id(new AphrontJSONResponse())->setAddJSONShield(false)
->setContent(array(
- "Status" => "OK",
- "DiagramID" => $diagram->getDiagramID(),
- "Version" => $diagram->getVersion()
+ 'Status' => 'OK',
+ 'DiagramID' => $diagram->getDiagramID(),
+ 'Version' => $diagram->getVersion()
));
return $response;
} catch (Exception $e) {
$response = id(new AphrontJSONResponse())->setAddJSONShield(false)
->setContent(array(
- "Status" => "ERROR",
- "Error" => $e->getMessage(),
+ 'Status' => 'ERROR',
+ 'Error' => $e->getMessage(),
));
return $response;
}
@@ -417,14 +417,11 @@
* Shows the draw.io application integrated in Phorge's layout
*/
private function showApplication(
- AphrontRequest $request,
string $diagramName = '',
string $diagramPHID = '',
string $diagramVersion = '',
string $base64_data = ''
) {
- $applicationUrl = "/" . explode("/", $request->getPath())[1];
-
$behaviorConfig = array();
$behaviorConfig['initParams'] = array(
$diagramName,
@@ -432,93 +429,43 @@
$diagramVersion,
$base64_data
);
- $behaviorConfig['toolbarCss'] = celerity_get_resource_uri('/iframe-toolbtn.css', 'diagram-resources');
- $behaviorConfig['toolbarJs'] = celerity_get_resource_uri('/iframe-toolbtn.js', 'diagram-resources');
+ $behaviorConfig['toolbarCss'] = celerity_get_resource_uri(
+ '/iframe-toolbtn.css',
+ 'diagram-resources'
+ );
+ $behaviorConfig['toolbarJs'] = celerity_get_resource_uri(
+ '/iframe-toolbtn.js',
+ 'diagram-resources'
+ );
require_celerity_resource('javelin-behavior');
+ require_celerity_resource('diagram-css-extension', 'diagram-resources');
Javelin::initBehavior('diagram-extension', $behaviorConfig, 'diagram-resources');
- $content = phutil_tag(
- 'div',
- array(),
- array(
- phutil_tag(
- 'div',
- array(
- 'id' => 'mainScreen',
- )),
- phutil_tag(
- 'div',
- array(
- 'class' => 'crumbs',
- 'style' => 'top:48px;'
- . 'margin-left: 4px;'
- . 'position: fixed;'
- . 'font-weight: bold;'
- ),
- array(
- phutil_tag(
- 'a',
- array(
- 'href' => $applicationUrl
- ),
- array(
- phutil_tag(
- 'span',
- array(
- 'class' => 'phui-font-fa fa-sitemap',
- 'style' => 'padding-right:5px;'
- ))
- )),
- phutil_tag(
- 'a',
- array(
- 'href' => $applicationUrl
- ),
- 'Diagram'
- ),
- phutil_tag(
- 'span',
- array(
- 'class' => 'diagramName',
- 'style' => 'display:none'
- ),
- array(
- phutil_tag(
- 'span',
- array(
- 'style' => 'margin: 5px;'
- . 'opacity: .5;'
- ),
- '>'
- ),
- phutil_tag(
- 'a',
- array(),
- ''
- ),
- phutil_tag(
- 'span',
- array(
- 'class' => 'version',
- 'style' => 'margin-left: 8px;'
- . 'color: #999;'),
- ''),
- ))
- ))
- ));
-
- $view = id(new PhabricatorStandardPageView())
- ->setRequest($request)
- ->setController($this)
- ->setDeviceReady(true)
- ->setTitle("Diagrams")
- ->appendChild($content);
+ $crumbs = $this->buildApplicationCrumbs()->setBorder(true);
+ if (!$diagramName) {
+ $crumbs->addTextCrumb('Create Diagram');
+ } else {
+ $crumbs->addTextCrumb(
+ $diagramName,
+ $this->getApplicationURI('/' . $diagramName)
+ );
- $response = id(new AphrontWebpageResponse())
- ->setContent($view->render());
+ if ($diagramVersion) {
+ $crumbs->addTextCrumb('Version ' . $diagramVersion);
+ }
+ }
- return $response;
+ return $this->newPage()
+ ->addClass('diagram-editor-page')
+ ->setTitle('Diagrams')
+ ->setCrumbs($crumbs)
+ ->appendChild(phutil_tag(
+ 'div',
+ array(
+ 'id' => 'diagram-editor-wrapper'
+ )
+ ));
}
}