Draw.io: 获取EditorUI实例

Question

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

Answer 1

App.main has a callback returns ui 实例。

Answer 2

我是这样解决的：注入函数是正确的方法。起初我希望简单地调用 Draw.io 函数，如 getCurrentFile(); 来接收所需的信息。虽然可以调用它们，但除了 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 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();
          });`

Draw.io: 获取EditorUI实例

Draw.io: Get instance of EditorUI

javascript

google-chrome-extension

draw.io