Draw.io:获取EditorUI实例

Question

我正在构建一个与draw.io交互的Chrome扩展。Draw.io创建一个EditorUI实例，该实例保存有关当前打开的图表的所有信息(包括图表的SVG图像)。是否可以使用JavaScript访问该上下文？窗口变量(可通过代码插入访问)仅包含用于创建EditorUI实例的函数，而不包含实例本身。我无法获取州/本地范围。

Answer 1

下面是我解决这个问题的方法:注入一个函数是正确的方法。一开始，我希望简单地调用像getCurrentFile();这样的Draw.io函数来接收所需的信息。虽然调用它们是可能的，但除了null之外，您什么也得不到。因此，我决定覆盖该函数，保留原始内容，并将所需内容发送到自定义事件侦听器。

var svg = null;

/**
 * Function to be inserted into Draw.io. Contains a function that overrides getCurrentFile(). Original functionality
 * of getter function is kept, file data is saved to a variable.
 */
var hijackFileGetter = '(' + function() {
        window.EditorUi.prototype.getCurrentFile = function() {
            if(this.currentFile !== null) {
                var svg = this.currentFile.data;
                var event = document.createEvent("CustomEvent");
                event.initCustomEvent("listenToChanges", true, true, svg);
                document.dispatchEvent(event);
            }
            return this.currentFile;
        };
    } + ')();';

/**
 * Injection of Javascript code into Draw.io
 */
var script = document.createElement('script');
script.textContent = hijackFileGetter;
(document.head||document.documentElement).appendChild(script);
script.remove();

/**
 * EventListener for communication from our injected script to this content script
 * Receives a new SVG every time changes are made
 */
document.addEventListener('listenToChanges', function (data) {
    svg = data.detail;
});

/**
 * Message passing from content script to popup (and the other way around)
 */
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if(request.popup) {
        chrome.runtime.sendMessage({svg: svg});
        sendResponse({svgSearch: true});
    }
});

Answer 2

返回ui实例的App.main has a callback。

Answer 3

回调对我很有帮助！

我从GraphEditor移动到draw.io，但无法获取UI对象

            `var MyUi;
            App.main(function(ui) {
            MyUi = ui;
            var fmi2 = new FMI2(ui);
            fmi2.init();
            //SidebarInit.apply(Edo.sidebar, arguments);
            //About Dialog
            fmi2.OverrideAbout();
            //Graph behaviour
            fmi2.fmiGraphSettings();
            //fmiGraphSettings(Edo.editor.graph);
            //Pod & Booth Controls
            fmi2.AddFMIControls();
            //AddPodControl(Edo);
            //Hints
            AddHints();
          });`