Details

Reviewers

mturdus

Maniphest Tasks

T15782: Diagrams Extension is not installable/usable in its current form

Commits

R5:6fa25e4097aa: Makes extension usable with configured alternative file domain

Summary

adds library map
updates readme to
- use specific draw.io version
- install extension in another dir than phorge (because that is the cleaner approach)
reworks the js/css
- use celerity to load the files from the alternative file domain
- use javelin behavior to load the diagram data (loadJsExtension route is not needed anymore)
- adds the toolbar button js/css with javascript from the phorge parent window
with the last point there is no reason to reverse engineer the contents of the index.html of the draw.io app. We just pass-through the contents from the original index.html and add the toolbar assets from the parent window.
dumps base64 image data directly while remarkup rendering and adds js/css files for remarkup object rule

Fixes T15782

Test Plan

Install it like described in the readme and test it.

Diff Detail

Repository

R5 Diagrams

Branch

master

Lint

No Lint Coverage

Unit

No Test Coverage

Build Status

Buildable 1169
Build 1169: arc lint + arc unit

Event Timeline

bekay created this revision.Apr 13 2024, 16:13

Herald added subscribers: Cigaryno, Matthew, valerio.bozzolan, tobiaswiese. · View Herald TranscriptApr 13 2024, 16:13

bekay requested review of this revision.Apr 13 2024, 16:13

Harbormaster completed remote builds in B1166: Diff 1842.Apr 13 2024, 16:13

bekay mentioned this in T15782: Diagrams Extension is not installable/usable in its current form.Apr 13 2024, 16:16

I might be doing something wrong.
When I open Diagrams, I see an empty screen with only the application's title "Diagram" and its corresponding icon on top

These are the steps I executed:

Removed my original extension from src/extension.
Cloned the extension repo again in another directory (outside of the Phorge directory),
Cloned the drawio repo in the extension directory
Applied this differential (downloaded the raw diff and ran git apply).
Executed bin/storage upgrade
Updated the conf/local/local.json file according to the readme
Restarted httpd
Open Diagrams application in browser

I don't see any console log errors in the browser.

This is the HTML part of the application when I open the Diagrams application:

<div>
  <div id="mainScreen"></div>
  <div>
    <img class="drawio">
  </div>
  <div class="crumbs" style="top:48px;margin-left: 4px;position: fixed;font-weight: bold;">
    <a href="/diagram">
      <span class="phui-font-fa fa-sitemap" style="padding-right:5px;"></span>
    </a>
    <a href="/diagram">Diagram</a>
    <span class="diagramName" style="display:none">
      <span style="margin: 5px;opacity: .5;">&gt;</span>
      <a></a>
      <span class="version" style="margin-left: 8px;color: #999;"></span>
    </span>
  </div>
</div>

@mturdus Is the phorge_extension.js file loaded?

Dumps base64 image data directly while remarkup rendering and adds js/css files for remarkup object rule

Harbormaster completed remote builds in B1167: Diff 1843.Apr 13 2024, 19:54

bekay edited the summary of this revision. (Show Details)Apr 13 2024, 19:56

@mturdus You don't have to download the diff, you can do an arc patch D25577 (and you should, because I have changed something again). Mh, but I don't know why it should not work.... 🤔

Your folder structure and content of rsrc looks like this?

I'm on branch arcpatch-D25577 now but I still have an empty screen.

The directory structure looks the same. Also the files in rsrc are the same.
The phorge_extension.js file is loaded.

It seems that the DOMContentLoaded or edit() function is not fired.
I'm using Firefox btw.
I will look at it further later this evening.

Firefox does work for me. Does Chrome work for you?

What is the content of <Phorge-Base-URI>diagram/iframe/?embed=1&spin=0&proto=json&noExitBtn=1&lang=en&ui=min? It just should be the contents of somewhere/safe/diagrams/drawio/src/main/webapp/index.html...

bekay added a project: Diagrams (Extension).Apr 14 2024, 07:39

Caches draw.io assets, uses base64 method of diagram and adds some console logs for js debugging

Harbormaster completed remote builds in B1168: Diff 1844.Apr 14 2024, 08:39

@mturdus I have added some console logs in the js code (so patch and purge the caches on <phorge-base>config/cache/!)

The log should look like this:

diagram-extension behavior called with config: 
Object { loadJsExtensionArgs: (4) […], toolbarCss: ".../res/diagram-resources/35ad6f49/iframe-toolbtn.css", toolbarJs: ".../res/diagram-resources/26d75a35/iframe-toolbtn.js" }
phorge_extension.js:2:29

loadJsExtension called with args: <empty string> <empty string> <empty string> <empty string>
phorge_extension.js:17:79

Iframe appended: 
<iframe title="diagrams.net editor" frameborder="0" style="width: 100%; height: cal…; margin-bottom: -16px;" src="...">
phorge_extension.js:12:308

Iframe DOM loaded: 
<div id="geInfo">
	<div class="geBlock">
		<h1>Flowchart Maker and Online Diagram Software</h1>
		<p>
			draw.io is free online diagram software. You can use it as a flowchart maker, network diagram software, to create UML online, as an ER diagram tool, 
			to design database schema, to build BPMN online, as a circuit diagram maker, and more. draw.io can import .vsdx, Gliffy™ and Lucidchart™ files .
		</p>
		<h2 id="geStatus">Loading...</h2>
		<p>
			Please ensure JavaScript is enabled.
		</p>
	</div>
</div>
<script id="geMain" type="text/javascript">
/**
 * Main
 */
if (urlParams['dev'] != '1' && typeof document.createElement('canvas').getContext === "function")
{
	window.addEventListener('load', function()
	{
		mxWinLoaded = true;
		checkAllLoaded();
	});
}
else
{
	App.main();
}
</script>
phorge_extension.js:16:202

This is the console log I got when running in Firefox:

Navigated to http://phorge.blackbird.turdus.local/diagram/
diagram-extension behavior called with config: 
Object { loadJsExtensionArgs: (4) […], toolbarCss: "http://phorge.blackbird.turdus.local/res/diagram-resources/35ad6f49/iframe-toolbtn.css", toolbarJs: "http://phorge.blackbird.turdus.local/res/diagram-resources/26d75a35/iframe-toolbtn.js" }

loadJsExtensionArgs: Array(4) [ "", "", "", … ]

0: ""

1: ""

2: ""

3: ""

length: 4

<prototype>: Array []

toolbarCss: "http://phorge.blackbird.turdus.local/res/diagram-resources/35ad6f49/iframe-toolbtn.css"

toolbarJs: "http://phorge.blackbird.turdus.local/res/diagram-resources/26d75a35/iframe-toolbtn.js"

<prototype>: Object { … }
phorge_extension.js:8:11
loadJsExtension called with args: <empty string> <empty string> <empty string> <empty string> phorge_extension.js:95:13

I debugged it a bit further.
It's this code in phorge_extension.js that is not working correctly:

document.addEventListener('DOMContentLoaded', function () {
  edit(document.querySelector('img.drawio'));
}, false);

the document.addEventListener call is executed, but the DOMContentLoaded event is never fired (and thus edit (which creates the iframe) is never executed).

I also disabled all extensions in Firefox but it still doesn't show up.

I think it's a timing issue.
The code is now running in a Javelin scope.
It could be that the DOMContentLoaded event is already fired before the document.addEventListener('DOMContentLoaded") call is executed.
In this case the edit function will not be executed.

I also tried Chromium. In here, the application does correctly show up.
But I prefer Firefox :-P

Renames behavior and some functions and gets rid of unnecessary image proxy

Harbormaster completed remote builds in B1169: Diff 1845.Apr 14 2024, 18:56

@mturdus right, I don't have the whole picture of this little bit wild codebase 😁 Thanks for the pointer. As far as I can see, this image and the DOMContentLoaded event handler serves no purpose anymore. All is working without it. I have renamed the main js and some functions in it for clarity. Would love if you could give it a try.

Now it's working!

In D25577#16640, @mturdus wrote:

Now it's working!

Well, if you can accept the diff, I would land it. But I will send more 😁

mturdus accepted this revision.Apr 15 2024, 20:41

This revision is now accepted and ready to land.Apr 15 2024, 20:41

avivey retitled this revision from [WIP] Makes extension usable with configured alternative file domain to Makes extension usable with configured alternative file domain.Apr 16 2024, 06:28

bekay edited the summary of this revision. (Show Details)Apr 16 2024, 07:11

bekay added a task: T15782: Diagrams Extension is not installable/usable in its current form.

Closed by commit R5:6fa25e4097aa: Makes extension usable with configured alternative file domain. · Explain WhyApr 16 2024, 07:14

This revision was automatically updated to reflect the committed changes.

bekay added a commit: R5:6fa25e4097aa: Makes extension usable with configured alternative file domain.

Makes extension usable with configured alternative file domain
ClosedPublic
Actions

Details

Diff Detail

Event Timeline

Revision Contents
Changeset List

Diff 1845

.arcconfig

.gitignore

README.md

data/iframe-toolbtn.css

data/iframe-toolbtn.js

data/iframe.css

data/iframe1.js

data/iframe2.js

data/phorge_extension.js

rsrc/behavior-diagram-extension.js

rsrc/iframe-toolbtn.css

rsrc/iframe-toolbtn.js

rsrc/remarkup-image.css

rsrc/remarkup-image.js

src/__phutil_library_init__.php

src/__phutil_library_map__.php

src/application/DiagramApplication.php

src/celerity/DiagramCelerityResources.php

src/celerity/map.php

src/controller/DiagramController.php

src/remarkup/PhabricatorRemarkupDiagramRule.php

Makes extension usable with configured alternative file domainClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 1845

.arcconfig

.gitignore

README.md

data/iframe-toolbtn.css

data/iframe-toolbtn.js

data/iframe.css

data/iframe1.js

data/iframe2.js

data/phorge_extension.js

rsrc/behavior-diagram-extension.js

rsrc/iframe-toolbtn.css

rsrc/iframe-toolbtn.js

rsrc/remarkup-image.css

rsrc/remarkup-image.js

src/__phutil_library_init__.php

src/__phutil_library_map__.php

src/application/DiagramApplication.php

src/celerity/DiagramCelerityResources.php

src/celerity/map.php

src/controller/DiagramController.php

src/remarkup/PhabricatorRemarkupDiagramRule.php

Makes extension usable with configured alternative file domain
ClosedPublic
Actions

Revision Contents
Changeset List