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, @@ -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); 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' => '464b2344', + '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' => '464b2344', ), '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 @@ 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' + ) + )); } }