Page MenuHomePhorge

Makes extension usable with configured alternative file domain
ClosedPublic

Authored by bekay on Apr 13 2024, 16:13.

Details

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
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

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

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:

  1. Removed my original extension from src/extension.
  2. Cloned the extension repo again in another directory (outside of the Phorge directory),
  3. Cloned the drawio repo in the extension directory
  4. Applied this differential (downloaded the raw diff and ran git apply).
  5. Executed bin/storage upgrade
  6. Updated the conf/local/local.json file according to the readme
  7. Restarted httpd
  8. 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

@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?

image.png (372×236 px, 12 KB)

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...

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

@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

@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!

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

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