chore: del dist folder

-/**
- * Copyright (c) 2006-2012, JGraph Ltd
- */
-Format = function (editorUi, container) {
-    this.editorUi = editorUi;
-    this.container = container;
-};
-
-/**
- * Background color for inactive tabs.
- * 没有激活的tab栏 背景色
- */
-Format.inactiveTabBackgroundColor = "#f1f3f4";
-
-/**
- * Icons for markers (24x16).
- */
-Format.classicFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 10 2 L 5 8 L 10 14 Z M 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.classicThinFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 4 L 3 8 L 8 12 Z M 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.openFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 8 0 L 0 8 L 8 16 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.openThinFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 8 4 L 0 8 L 8 12 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.openAsyncFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 8 4 L 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.blockFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 2 L 8 14 Z M 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.blockThinFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 4 L 8 12 Z M 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.asyncFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 6 8 L 6 4 L 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.ovalFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 A 5 5 0 0 1 5 3 A 5 5 0 0 1 11 8 A 5 5 0 0 1 5 13 A 5 5 0 0 1 0 8 Z M 10 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.diamondFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 6 2 L 12 8 L 6 14 Z M 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.diamondThinFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 3 L 16 8 L 8 13 Z M 0 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-Format.classicMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 10 2 L 5 8 L 10 14 Z M 5 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.classicThinMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 4 L 5 8 L 8 12 Z M 5 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.blockMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 2 L 8 14 Z M 8 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.blockThinMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 4 L 8 12 Z M 8 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.asyncMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 6 8 L 6 4 L 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.ovalMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 A 5 5 0 0 1 5 3 A 5 5 0 0 1 11 8 A 5 5 0 0 1 5 13 A 5 5 0 0 1 0 8 Z M 10 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.diamondMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 6 2 L 12 8 L 6 14 Z M 12 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.diamondThinMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 3 L 16 8 L 8 13 Z M 16 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.boxMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 3 L 10 3 L 10 13 L 0 13 Z M 10 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.halfCircleMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 3 A 5 5 0 0 1 5 8 A 5 5 0 0 1 0 13 M 5 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.dashMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 2 L 12 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.crossMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 2 L 12 14 M 12 2 L 0 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.circlePlusMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 A 6 6 0 0 1 6 2 A 6 6 0 0 1 12 8 A 6 6 0 0 1 6 14 A 6 6 0 0 1 0 8 Z M 6 2 L 6 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.circleMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 A 6 6 0 0 1 6 2 A 6 6 0 0 1 12 8 A 6 6 0 0 1 6 14 A 6 6 0 0 1 0 8 Z M 12 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.ERmandOneMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 6 2 L 6 14 M 9 2 L 9 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.ERmanyMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 2 L 12 8 L 0 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.ERoneToManyMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 2 L 12 8 L 0 14 M 15 2 L 15 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.ERzeroToOneMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 8 8 A 5 5 0 0 1 13 3 A 5 5 0 0 1 18 8 A 5 5 0 0 1 13 13 A 5 5 0 0 1 8 8 Z M 0 8 L 8 8 M 18 8 L 24 8 M 4 3 L 4 13" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.ERzeroToManyMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 8 8 A 5 5 0 0 1 13 3 A 5 5 0 0 1 18 8 A 5 5 0 0 1 13 13 A 5 5 0 0 1 8 8 Z M 0 8 L 8 8 M 18 8 L 24 8 M 0 3 L 8 8 L 0 13" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.EROneMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 5 2 L 5 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.baseDashMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 2 L 0 14 M 0 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.doubleBlockMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 2 L 8 14 Z M 8 8 L 16 2 L 16 14 Z M 16 8 L 24 8" stroke="#404040" fill="transparent"/>',
-    32,
-    20,
-);
-Format.doubleBlockFilledMarkerImage = Graph.createSvgImage(
-    20,
-    22,
-    '<path transform="translate(4,2)" stroke-width="2" d="M 0 8 L 8 2 L 8 14 Z M 8 8 L 16 2 L 16 14 Z M 16 8 L 24 8" stroke="#404040" fill="#404040"/>',
-    32,
-    20,
-);
-
-/**
- * Adds a style change item to the given menu.
- */
-Format.processMenuIcon = function (elt, transform) {
-    var imgs = elt.getElementsByTagName("img");
-
-    if (imgs.length > 0) {
-        if (Editor.isDarkMode()) {
-            imgs[0].style.filter = "invert(100%)";
-        }
-
-        imgs[0].className = "geIcon";
-        imgs[0].style.padding = "0px";
-        imgs[0].style.margin = "0 0 0 2px";
-
-        if (transform != null) {
-            mxUtils.setPrefixedStyle(imgs[0].style, "transform", transform);
-        }
-    }
-
-    return elt;
-};
-
-/**
- * Returns information about the current selection.
- */
-Format.prototype.labelIndex = 0;
-
-/**
- * Returns information about the current selection.
- * 默认选中的formatBar的tab栏索引 / 0是第一个
- */
-Format.prototype.diagramIndex = 0;
-
-/**
- * Returns information about the current selection.
- */
-Format.prototype.currentIndex = 0;
-
-/**
- * Returns information about the current selection.
- * 是否显示关闭按钮
- */
-Format.prototype.showCloseButton = false;
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-Format.prototype.init = function () {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    this.update = mxUtils.bind(this, function (sender, evt) {
-        this.refresh();
-    });
-
-    graph.getSelectionModel().addListener(mxEvent.CHANGE, this.update);
-    graph.getModel().addListener(mxEvent.CHANGE, this.update);
-    graph.addListener(mxEvent.EDITING_STARTED, this.update);
-    graph.addListener(mxEvent.EDITING_STOPPED, this.update);
-    graph.getView().addListener("unitChanged", this.update);
-    editor.addListener("autosaveChanged", this.update);
-    graph.addListener(mxEvent.ROOT, this.update);
-    ui.addListener("styleChanged", this.update);
-
-    this.refresh();
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-Format.prototype.clear = function () {
-    this.container.innerHTML = "";
-
-    // Destroy existing panels
-    if (this.panels != null) {
-        for (var i = 0; i < this.panels.length; i++) {
-            this.panels[i].destroy();
-        }
-    }
-
-    this.panels = [];
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-Format.prototype.refresh = function () {
-    if (this.pendingRefresh != null) {
-        window.clearTimeout(this.pendingRefresh);
-        this.pendingRefresh = null;
-    }
-
-    this.pendingRefresh = window.setTimeout(
-        mxUtils.bind(this, function () {
-            this.immediateRefresh();
-        }),
-    );
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-Format.prototype.immediateRefresh = function () {
-    // Performance tweak: No refresh needed if not visible
-    if (this.container.style.width == "0px") {
-        return;
-    }
-
-    this.clear();
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-
-    var div = document.createElement("div");
-    div.style.whiteSpace = "nowrap";
-    div.style.color = "rgb(112, 112, 112)";
-    div.style.textAlign = "left";
-    div.style.cursor = "default";
-    // div.style.display = 'flex'
-
-    var label = document.createElement("div");
-    label.className = "geFormatSection";
-    label.style.textAlign = "center";
-    label.style.fontWeight = "bold";
-    label.style.paddingTop = "8px";
-    label.style.fontSize = "13px";
-    label.style.borderWidth = "0px 0px 1px 1px";
-    label.style.borderStyle = "solid";
-    label.style.display = "inline-block";
-    label.style.height = "25px";
-    label.style.overflow = "hidden";
-    label.style.width = "100%";
-    label.style.flex = 'auto'
-    this.container.appendChild(div);
-
-    // Prevents text selection
-    mxEvent.addListener(
-        label,
-        mxClient.IS_POINTER ? "pointerdown" : "mousedown",
-        mxUtils.bind(this, function (evt) {
-            evt.preventDefault();
-        }),
-    );
-
-    var ss = ui.getSelectionState();
-    var containsLabel = ss.containsLabel;
-    var currentLabel = null;
-    var currentPanel = null;
-
-
-    /**
-     * @description 验证是否有数据绑定面板
-     * @returns {boolean}
-     */
-    const validateHasDataSourcePanel = () => {
-        const ui = this.editorUi;
-        const ss = ui.getSelectionState();
-        const vertices = ss.vertices || []
-        const sidebarInstance = ui.sidebar
-        const cell = vertices[0]
-        if (!cell) return false
-        const basicAttr = sidebarInstance.enumCellBasicAttribute
-        const componentType = cell.getAttribute(basicAttr.COMPONENT_TYPE)
-        const hasPermission = sidebarInstance.getComponentPermission(componentType)
-        return !!hasPermission.length && hasSavePermission()
-    }
-
-    var addClickHandler = mxUtils.bind(
-        this,
-        function (elt, panel, index, lastEntry) {
-            var clickHandler = mxUtils.bind(this, function (evt) {
-                if (currentLabel != elt) {
-                    if (containsLabel) {
-                        this.labelIndex = index;
-                    } else if (graph.isSelectionEmpty()) {
-                        this.diagramIndex = index;
-                    } else {
-                        this.currentIndex = index;
-                    }
-
-                    if (currentLabel != null) {
-                        currentLabel.style.backgroundColor =
-                            Format.inactiveTabBackgroundColor;
-                        currentLabel.style.borderBottomWidth = "1px";
-                    }
-
-                    currentLabel = elt;
-                    currentLabel.style.backgroundColor = "";
-                    currentLabel.style.borderBottomWidth = "0px";
-
-                    if (currentPanel != panel) {
-                        if (currentPanel != null) {
-                            currentPanel.style.display = "none";
-                        }
-
-                        currentPanel = panel;
-                        currentPanel.style.display = "";
-                    }
-                }
-
-                if (!validateHasDataSourcePanel()) this.currentIndex = 0
-            });
-
-            mxEvent.addListener(elt, "click", clickHandler);
-
-            // Prevents text selection
-            mxEvent.addListener(
-                elt,
-                mxClient.IS_POINTER ? "pointerdown" : "mousedown",
-                mxUtils.bind(this, function (evt) {
-                    evt.preventDefault();
-                }),
-            );
-
-            if (
-                (lastEntry && currentLabel == null) ||
-                index ==
-                (containsLabel
-                    ? this.labelIndex
-                    : graph.isSelectionEmpty()
-                        ? this.diagramIndex
-                        : this.currentIndex)
-            ) {
-                // Invokes handler directly as a workaround for no click on DIV in KHTML.
-                clickHandler();
-            }
-        },
-    );
-
-    var idx = 0;
-
-    if (graph.isSelectionEmpty()) {
-        mxUtils.write(label, mxResources.get("diagram"));
-        label.style.borderLeftWidth = "0px";
-
-        div.appendChild(label);
-        var diagramPanel = div.cloneNode(false);
-        this.panels.push(new DiagramFormatPanel(this, ui, diagramPanel));
-        this.container.appendChild(diagramPanel);
-
-        if (Editor.styles != null) {
-            diagramPanel.style.display = "none";
-            label.style.width = this.showCloseButton ? "106px" : "50%";
-            label.style.cursor = "pointer";
-            label.style.backgroundColor = Format.inactiveTabBackgroundColor;
-
-            var label2 = label.cloneNode(false);
-            label2.style.borderLeftWidth = "1px";
-            label2.style.borderRightWidth = "1px";
-            label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
-
-            addClickHandler(label, diagramPanel, idx++);
-
-            var stylePanel = div.cloneNode(false);
-            stylePanel.style.display = "none";
-            mxUtils.write(label2, mxResources.get("style"));
-            div.appendChild(label2);
-            this.panels.push(new DiagramStylePanel(this, ui, stylePanel));
-            this.container.appendChild(stylePanel);
-
-            addClickHandler(label2, stylePanel, idx++);
-        }
-
-        // Adds button to hide the format panel since
-        // people don't seem to find the toolbar button
-        // and the menu item in the format menu
-        if (this.showCloseButton) {
-            var label2 = label.cloneNode(false);
-            label2.style.borderLeftWidth = "1px";
-            label2.style.borderRightWidth = "1px";
-            label2.style.borderBottomWidth = "1px";
-            label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
-            label2.style.position = "absolute";
-            label2.style.right = "0px";
-            label2.style.top = "0px";
-            label2.style.width = "25px";
-
-            var img = document.createElement("img");
-            img.setAttribute("border", "0");
-            img.setAttribute("src", Dialog.prototype.closeImage);
-            img.setAttribute("title", mxResources.get("hide"));
-            img.style.position = "absolute";
-            img.style.display = "block";
-            img.style.right = "0px";
-            img.style.top = "8px";
-            img.style.cursor = "pointer";
-            img.style.marginTop = "1px";
-            img.style.marginRight = "6px";
-            img.style.border = "1px solid transparent";
-            img.style.padding = "1px";
-            img.style.opacity = 0.5;
-            label2.appendChild(img);
-
-            mxEvent.addListener(img, "click", function () {
-                ui.actions.get("formatPanel").funct();
-            });
-
-            div.appendChild(label2);
-        }
-    } else if (graph.isEditing()) {
-        mxUtils.write(label, mxResources.get("text"));
-        div.appendChild(label);
-        this.panels.push(new TextFormatPanel(this, ui, div));
-    } else {
-        //选中图形，右侧FormatBar添加样式 TODO add other style
-        label.style.backgroundColor = Format.inactiveTabBackgroundColor;
-        label.style.borderLeftWidth = "1px";
-        label.style.cursor = "pointer";
-        label.style.width = containsLabel || ss.cells.length == 0 ? "50%" : validateHasDataSourcePanel() ? "25%" : "33.333%";
-        var label2 = label.cloneNode(false);
-        var label3 = label2.cloneNode(false);
-        var label4 = label3.cloneNode(false);
-
-        // Workaround for ignored background in IE
-        label2.style.backgroundColor = Format.inactiveTabBackgroundColor;
-        label3.style.backgroundColor = Format.inactiveTabBackgroundColor;
-        label4.style.backgroundColor = Format.inactiveTabBackgroundColor;
-
-        // Style
-        if (containsLabel) {
-            label2.style.borderLeftWidth = "0px";
-        } else {
-            label.style.borderLeftWidth = "0px";
-            mxUtils.write(label, mxResources.get("style"));
-            div.appendChild(label);
-
-            var stylePanel = div.cloneNode(false);
-            stylePanel.style.display = "none";
-            this.panels.push(new StyleFormatPanel(this, ui, stylePanel));
-            this.container.appendChild(stylePanel);
-
-            addClickHandler(label, stylePanel, idx++);
-        }
-
-        if (validateHasDataSourcePanel()) {
-            // bind data
-            mxUtils.write(label4, "数据绑定");
-            div.appendChild(label4);
-
-            var dataPanel = div.cloneNode(false);
-            dataPanel.style.display = "none";
-            this.panels.push(new DataFormatPanel(this, ui, dataPanel));
-            this.container.appendChild(dataPanel);
-        }
-
-        // Text
-        mxUtils.write(label2, mxResources.get("text"));
-        div.appendChild(label2);
-
-        var textPanel = div.cloneNode(false);
-        textPanel.style.display = "none";
-        this.panels.push(new TextFormatPanel(this, ui, textPanel));
-        this.container.appendChild(textPanel);
-
-        // Arrange
-        mxUtils.write(label3, mxResources.get("arrange"));
-        div.appendChild(label3);
-
-        var arrangePanel = div.cloneNode(false);
-        arrangePanel.style.display = "none";
-        this.panels.push(new ArrangePanel(this, ui, arrangePanel));
-        this.container.appendChild(arrangePanel);
-
-        if (ss.cells.length > 0) {
-            addClickHandler(label2, textPanel, idx++);
-        } else {
-            label2.style.display = "none";
-        }
-        addClickHandler(label3, arrangePanel, idx++);
-        if (ss.cells.length > 0) {
-            addClickHandler(label4, dataPanel, idx++, true);
-        } else {
-            label4.style.display = "none";
-        }
-    }
-};
-
-/**
- * Base class for format panels.
- */
-BaseFormatPanel = function (format, editorUi, container) {
-    this.format = format;
-    this.editorUi = editorUi;
-    this.container = container;
-    this.listeners = [];
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.buttonBackgroundColor = "white";
-
-/**
- * Install input handler.
- */
-BaseFormatPanel.prototype.installInputHandler = function (
-    input,
-    key,
-    defaultValue,
-    min,
-    max,
-    unit,
-    textEditFallback,
-    isFloat,
-) {
-    unit = unit != null ? unit : "";
-    isFloat = isFloat != null ? isFloat : false;
-
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-
-    min = min != null ? min : 1;
-    max = max != null ? max : 999;
-
-    var selState = null;
-    var updating = false;
-
-    var update = mxUtils.bind(this, function (evt) {
-        var value = isFloat ? parseFloat(input.value) : parseInt(input.value);
-
-        // Special case: angle mod 360
-        if (!isNaN(value) && key == mxConstants.STYLE_ROTATION) {
-            // Workaround for decimal rounding errors in floats is to
-            // use integer and round all numbers to two decimal point
-            value = mxUtils.mod(Math.round(value * 100), 36000) / 100;
-        }
-
-        value = Math.min(max, Math.max(min, isNaN(value) ? defaultValue : value));
-
-        if (graph.cellEditor.isContentEditing() && textEditFallback) {
-            if (!updating) {
-                updating = true;
-
-                if (selState != null) {
-                    graph.cellEditor.restoreSelection(selState);
-                    selState = null;
-                }
-
-                textEditFallback(value);
-                input.value = value + unit;
-
-                // Restore focus and selection in input
-                updating = false;
-            }
-        } else if (
-            value != mxUtils.getValue(ui.getSelectionState().style, key, defaultValue)
-        ) {
-            if (graph.isEditing()) {
-                graph.stopEditing(true);
-            }
-            // TODO update data ？？
-            graph.getModel().beginUpdate();
-            try {
-                var cells = ui.getSelectionState().cells;
-                graph.setCellStyles(key, value, cells);
-
-                // Handles special case for fontSize where HTML labels are parsed and updated
-                if (key == mxConstants.STYLE_FONTSIZE) {
-                    graph.updateLabelElements(cells, function (elt) {
-                        elt.style.fontSize = value + "px";
-                        elt.removeAttribute("size");
-                    });
-                }
-
-                for (var i = 0; i < cells.length; i++) {
-                    if (graph.model.getChildCount(cells[i]) == 0) {
-                        graph.autoSizeCell(cells[i], false);
-                    }
-                }
-
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [key],
-                        "values",
-                        [value],
-                        "cells",
-                        cells,
-                    ),
-                );
-            } finally {
-                graph.getModel().endUpdate();
-            }
-        }
-
-        input.value = value + unit;
-        mxEvent.consume(evt);
-    });
-
-    if (textEditFallback && graph.cellEditor.isContentEditing()) {
-        // KNOWN: Arrow up/down clear selection text in quirks/IE 8
-        // Text size via arrow button limits to 16 in IE11. Why?
-        mxEvent.addListener(input, "mousedown", function () {
-            if (document.activeElement == graph.cellEditor.textarea) {
-                selState = graph.cellEditor.saveSelection();
-            }
-        });
-
-        mxEvent.addListener(input, "touchstart", function () {
-            if (document.activeElement == graph.cellEditor.textarea) {
-                selState = graph.cellEditor.saveSelection();
-            }
-        });
-    }
-
-    mxEvent.addListener(input, "change", update);
-    mxEvent.addListener(input, "blur", update);
-
-    return update;
-};
-
-/**
- * Adds the given option.
- */
-BaseFormatPanel.prototype.createPanel = function () {
-    var div = document.createElement("div");
-    div.className = "geFormatSection";
-    div.style.padding = "12px 0px 12px 14px";
-
-    return div;
-};
-
-/**
- * Adds the given option.
- */
-BaseFormatPanel.prototype.createTitle = function (title) {
-    var div = document.createElement("div");
-    div.style.padding = "0px 0px 6px 0px";
-    div.style.whiteSpace = "nowrap";
-    div.style.overflow = "hidden";
-    div.style.width = "200px";
-    div.style.fontWeight = "bold";
-    mxUtils.write(div, title);
-
-    return div;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.addAction = function (div, name) {
-    var action = this.editorUi.actions.get(name);
-    var btn = null;
-
-    if (action != null && action.isEnabled()) {
-        btn = mxUtils.button(action.label, function (evt) {
-            action.funct(evt, evt);
-        });
-
-        var short = action.shortcut != null ? " (" + action.shortcut + ")" : "";
-        btn.setAttribute("title", action.label + short);
-        btn.style.marginBottom = "2px";
-        btn.style.width = "210px";
-        div.appendChild(btn);
-        result = true;
-    }
-
-    return btn;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.addActions = function (div, names) {
-    var lastBr = null;
-    var last = null;
-    var count = 0;
-
-    for (var i = 0; i < names.length; i++) {
-        var btn = this.addAction(div, names[i]);
-
-        if (btn != null) {
-            count++;
-
-            if (mxUtils.mod(count, 2) == 0) {
-                last.style.marginRight = "2px";
-                last.style.width = "104px";
-                btn.style.width = "104px";
-                lastBr.parentNode.removeChild(lastBr);
-            }
-
-            lastBr = mxUtils.br(div);
-            last = btn;
-        }
-    }
-
-    return count;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.createStepper = function (
-    input,
-    update,
-    step,
-    height,
-    disableFocus,
-    defaultValue,
-    isFloat,
-) {
-    step = step != null ? step : 1;
-    height = height != null ? height : 9;
-    var bigStep = 10 * step;
-
-    var stepper = document.createElement("div");
-    mxUtils.setPrefixedStyle(stepper.style, "borderRadius", "3px");
-    stepper.style.border = "1px solid rgb(192, 192, 192)";
-    stepper.style.position = "absolute";
-
-    var up = document.createElement("div");
-    up.style.borderBottom = "1px solid rgb(192, 192, 192)";
-    up.style.position = "relative";
-    up.style.height = height + "px";
-    up.style.width = "10px";
-    up.className = "geBtnUp";
-    stepper.appendChild(up);
-
-    var down = up.cloneNode(false);
-    down.style.border = "none";
-    down.style.height = height + "px";
-    down.className = "geBtnDown";
-    stepper.appendChild(down);
-
-    mxEvent.addGestureListeners(
-        down,
-        function (evt) {
-            // Stops text selection on shift+click
-            mxEvent.consume(evt);
-        },
-        null,
-        function (evt) {
-            if (input.value == "") {
-                input.value = defaultValue || "2";
-            }
-
-            var val = isFloat ? parseFloat(input.value) : parseInt(input.value);
-
-            if (!isNaN(val)) {
-                input.value = val - (mxEvent.isShiftDown(evt) ? bigStep : step);
-
-                if (update != null) {
-                    update(evt);
-                }
-            }
-
-            mxEvent.consume(evt);
-        },
-    );
-
-    mxEvent.addGestureListeners(
-        up,
-        function (evt) {
-            // Stops text selection on shift+click
-            mxEvent.consume(evt);
-        },
-        null,
-        function (evt) {
-            if (input.value == "") {
-                input.value = defaultValue || "0";
-            }
-
-            var val = isFloat ? parseFloat(input.value) : parseInt(input.value);
-
-            if (!isNaN(val)) {
-                input.value = val + (mxEvent.isShiftDown(evt) ? bigStep : step);
-
-                if (update != null) {
-                    update(evt);
-                }
-            }
-
-            mxEvent.consume(evt);
-        },
-    );
-
-    // Disables transfer of focus to DIV but also :active CSS
-    // so it's only used for fontSize where the focus should
-    // stay on the selected text, but not for any other input.
-    if (disableFocus) {
-        var currentSelection = null;
-
-        mxEvent.addGestureListeners(
-            stepper,
-            function (evt) {
-                mxEvent.consume(evt);
-            },
-            null,
-            function (evt) {
-                // Workaround for lost current selection in page because of focus in IE
-                if (currentSelection != null) {
-                    try {
-                        currentSelection.select();
-                    } catch (e) {
-                        // ignore
-                    }
-
-                    currentSelection = null;
-                    mxEvent.consume(evt);
-                }
-            },
-        );
-    } else {
-        // Stops propagation on checkbox labels
-        mxEvent.addListener(stepper, "click", function (evt) {
-            mxEvent.consume(evt);
-        });
-    }
-
-    return stepper;
-};
-
-/**
- * Adds the given option.
- */
-BaseFormatPanel.prototype.createOption = function (
-    label,
-    isCheckedFn,
-    setCheckedFn,
-    listener,
-    fn,
-) {
-    var div = document.createElement("div");
-    div.style.padding = "3px 0px 3px 0px";
-    div.style.whiteSpace = "nowrap";
-    div.style.textOverflow = "ellipsis";
-    div.style.overflow = "hidden";
-    div.style.width = "200px";
-    div.style.height = "18px";
-
-    var cb = document.createElement("input");
-    cb.setAttribute("type", "checkbox");
-    cb.style.margin = "1px 6px 0px 0px";
-    cb.style.verticalAlign = "top";
-    div.appendChild(cb);
-
-    var span = document.createElement("span");
-    span.style.verticalAlign = "top";
-    span.style.userSelect = "none";
-    mxUtils.write(span, label);
-    div.appendChild(span);
-
-    var applying = false;
-    var value = isCheckedFn();
-
-    var apply = function (newValue, evt) {
-        if (!applying) {
-            applying = true;
-
-            if (newValue) {
-                cb.setAttribute("checked", "checked");
-                cb.defaultChecked = true;
-                cb.checked = true;
-            } else {
-                cb.removeAttribute("checked");
-                cb.defaultChecked = false;
-                cb.checked = false;
-            }
-
-            if (value != newValue) {
-                value = newValue;
-
-                // Checks if the color value needs to be updated in the model
-                if (isCheckedFn() != value) {
-                    setCheckedFn(value, evt);
-                }
-            }
-
-            applying = false;
-        }
-    };
-
-    mxEvent.addListener(div, "click", function (evt) {
-        if (cb.getAttribute("disabled") != "disabled") {
-            // Toggles checkbox state for click on label
-            var source = mxEvent.getSource(evt);
-
-            if (source == div || source == span) {
-                cb.checked = !cb.checked;
-            }
-
-            apply(cb.checked, evt);
-        }
-    });
-
-    apply(value);
-
-    if (listener != null) {
-        listener.install(apply);
-        this.listeners.push(listener);
-    }
-
-    if (fn != null) {
-        fn(div);
-    }
-
-    return div;
-};
-
-/**
- * The string 'null' means use null in values.
- */
-BaseFormatPanel.prototype.createCellOption = function (
-    label,
-    key,
-    defaultValue,
-    enabledValue,
-    disabledValue,
-    fn,
-    action,
-    stopEditing,
-    cells,
-) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    enabledValue =
-        enabledValue != null ? (enabledValue == "null" ? null : enabledValue) : 1;
-    disabledValue =
-        disabledValue != null
-            ? disabledValue == "null"
-                ? null
-                : disabledValue
-            : 0;
-
-    var style =
-        cells != null ? graph.getCommonStyle(cells) : ui.getSelectionState().style;
-
-    return this.createOption(
-        label,
-        function () {
-            return mxUtils.getValue(style, key, defaultValue) != disabledValue;
-        },
-        function (checked) {
-            if (stopEditing) {
-                graph.stopEditing();
-            }
-
-            if (action != null) {
-                action.funct();
-            } else {
-                graph.getModel().beginUpdate();
-                try {
-                    var temp = cells != null ? cells : ui.getSelectionState().cells;
-                    var value = checked ? enabledValue : disabledValue;
-                    graph.setCellStyles(key, value, temp);
-
-                    if (fn != null) {
-                        fn(temp, value);
-                    }
-
-                    ui.fireEvent(
-                        new mxEventObject(
-                            "styleChanged",
-                            "keys",
-                            [key],
-                            "values",
-                            [value],
-                            "cells",
-                            temp,
-                        ),
-                    );
-                } finally {
-                    graph.getModel().endUpdate();
-                }
-            }
-        },
-        {
-            install: function (apply) {
-                this.listener = function () {
-                    apply(mxUtils.getValue(style, key, defaultValue) != disabledValue);
-                };
-
-                graph.getModel().addListener(mxEvent.CHANGE, this.listener);
-            },
-            destroy: function () {
-                graph.getModel().removeListener(this.listener);
-            },
-        },
-    );
-};
-
-/**
- * Adds the given color option.
- */
-BaseFormatPanel.prototype.createColorOption = function (
-    label,
-    getColorFn,
-    setColorFn,
-    defaultColor,
-    listener,
-    callbackFn,
-    hideCheckbox,
-    defaultColorValue,
-) {
-    var div = document.createElement("div");
-    div.style.padding = "3px 0px 3px 0px";
-    div.style.whiteSpace = "nowrap";
-    div.style.overflow = "hidden";
-    div.style.width = "200px";
-    div.style.height = "18px";
-
-    var cb = document.createElement("input");
-    cb.setAttribute("type", "checkbox");
-    cb.style.margin = "1px 6px 0px 0px";
-    cb.style.verticalAlign = "top";
-
-    if (!hideCheckbox) {
-        div.appendChild(cb);
-    }
-
-    var span = document.createElement("span");
-    span.style.verticalAlign = "top";
-    mxUtils.write(span, label);
-    div.appendChild(span);
-
-    var title = "Shift+Click for Color Dropper";
-    var value = getColorFn();
-    var applying = false;
-    var btn = null;
-
-    var apply = function (color, disableUpdate, forceUpdate) {
-        if (!applying) {
-            var defaultValue = defaultColor == "null" ? null : defaultColor;
-
-            applying = true;
-            color = /(^#?[a-zA-Z0-9]*$)/.test(color) ? color : defaultValue;
-            var tempColor =
-                color != null && color != mxConstants.NONE ? color : defaultValue;
-
-            var div = document.createElement("div");
-            div.style.width = "36px";
-            div.style.height = "12px";
-            div.style.margin = "3px";
-            div.style.border = "1px solid black";
-            div.style.backgroundColor =
-                tempColor == "default" ? defaultColorValue : tempColor;
-            btn.innerHTML = "";
-            btn.appendChild(div);
-
-            if (
-                color != null &&
-                color != mxConstants.NONE &&
-                color.length > 1 &&
-                typeof color === "string"
-            ) {
-                var clr =
-                    color.charAt(0) == "#" ? color.substring(1).toUpperCase() : color;
-                var name = ColorDialog.prototype.colorNames[clr];
-                btn.setAttribute(
-                    "title",
-                    name != null ? name + " (" + title + ")" : title,
-                );
-            }
-
-            if (color != null && color != mxConstants.NONE) {
-                cb.setAttribute("checked", "checked");
-                cb.defaultChecked = true;
-                cb.checked = true;
-            } else {
-                cb.removeAttribute("checked");
-                cb.defaultChecked = false;
-                cb.checked = false;
-            }
-
-            btn.style.display = cb.checked || hideCheckbox ? "" : "none";
-
-            if (callbackFn != null) {
-                callbackFn(color == "null" ? null : color);
-            }
-
-            value = color;
-
-            if (!disableUpdate) {
-                // Checks if the color value needs to be updated in the model
-                if (forceUpdate || hideCheckbox || getColorFn() != value) {
-                    setColorFn(value == "null" ? null : value, value);
-                }
-            }
-
-            applying = false;
-        }
-    };
-
-    var clrInput = document.createElement("input");
-    clrInput.setAttribute("type", "color");
-    clrInput.style.visibility = "hidden";
-    clrInput.style.width = "0px";
-    clrInput.style.height = "0px";
-    clrInput.style.border = "none";
-    div.appendChild(clrInput);
-
-    btn = mxUtils.button(
-        "",
-        mxUtils.bind(this, function (evt) {
-            var color = value;
-
-            if (color == "default") {
-                color = defaultColorValue;
-            }
-
-            if (mxEvent.isShiftDown(evt) && !mxClient.IS_IE && !mxClient.IS_IE11) {
-                clrInput.value = color;
-                clrInput.click();
-
-                mxEvent.addListener(clrInput, "input", function () {
-                    apply(clrInput.value, null, true);
-                });
-            } else {
-                this.editorUi.pickColor(
-                    color,
-                    function (newColor) {
-                        apply(newColor, null, true);
-                    },
-                    defaultColorValue,
-                );
-            }
-
-            mxEvent.consume(evt);
-        }),
-    );
-
-    btn.style.position = "absolute";
-    btn.style.marginTop = "-3px";
-    btn.style.left = "178px";
-    btn.style.height = "22px";
-    btn.className = "geColorBtn";
-    btn.style.display = cb.checked || hideCheckbox ? "" : "none";
-    div.appendChild(btn);
-
-    var clr =
-        value != null && typeof value === "string" && value.charAt(0) == "#"
-            ? value.substring(1).toUpperCase()
-            : value;
-    var name = ColorDialog.prototype.colorNames[clr];
-    btn.setAttribute("title", name != null ? name + " (" + title + ")" : title);
-
-    mxEvent.addListener(div, "click", function (evt) {
-        var source = mxEvent.getSource(evt);
-
-        if (source == cb || source.nodeName != "INPUT") {
-            // Toggles checkbox state for click on label
-            if (source != cb) {
-                cb.checked = !cb.checked;
-            }
-
-            // Overrides default value with current value to make it easier
-            // to restore previous value if the checkbox is clicked twice
-            if (
-                !cb.checked &&
-                value != null &&
-                value != mxConstants.NONE &&
-                defaultColor != mxConstants.NONE
-            ) {
-                defaultColor = value;
-            }
-
-            apply(cb.checked ? defaultColor : mxConstants.NONE);
-        }
-    });
-
-    apply(value, true);
-
-    if (listener != null) {
-        listener.install(apply);
-        this.listeners.push(listener);
-    }
-
-    return div;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.createCellColorOption = function (
-    label,
-    colorKey,
-    defaultColor,
-    callbackFn,
-    setStyleFn,
-    defaultColorValue,
-) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    return this.createColorOption(
-        label,
-        function () {
-            // Seems to be null sometimes, not sure why...
-            var state = graph.view.getState(ui.getSelectionState().cells[0]);
-
-            if (state != null) {
-                return mxUtils.getValue(state.style, colorKey, null);
-            }
-
-            return null;
-        },
-        function (color, realValue) {
-            graph.getModel().beginUpdate();
-            try {
-                var cells = ui.getSelectionState().cells;
-                graph.setCellStyles(colorKey, color, cells);
-
-                if (setStyleFn != null) {
-                    setStyleFn(color);
-                }
-
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [colorKey],
-                        "values",
-                        [color],
-                        "cells",
-                        cells,
-                    ),
-                );
-            } finally {
-                graph.getModel().endUpdate();
-            }
-        },
-        defaultColor || mxConstants.NONE,
-        {
-            install: function (apply) {
-                this.listener = function () {
-                    // Seems to be null sometimes, not sure why...
-                    var state = graph.view.getState(ui.getSelectionState().cells[0]);
-
-                    if (state != null) {
-                        apply(mxUtils.getValue(state.style, colorKey, null), true);
-                    }
-                };
-
-                graph.getModel().addListener(mxEvent.CHANGE, this.listener);
-            },
-            destroy: function () {
-                graph.getModel().removeListener(this.listener);
-            },
-        },
-        callbackFn,
-        null,
-        defaultColorValue,
-    );
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.addArrow = function (elt, height) {
-    height = height != null ? height : 10;
-
-    var arrow = document.createElement("div");
-    arrow.style.display = "inline-block";
-    arrow.style.paddingRight = "4px";
-    arrow.style.padding = "6px";
-
-    var m = 10 - height;
-
-    if (m == 2) {
-        arrow.style.paddingTop = 6 + "px";
-    } else if (m > 0) {
-        arrow.style.paddingTop = 6 - m + "px";
-    } else {
-        arrow.style.marginTop = "-2px";
-    }
-
-    arrow.style.height = height + "px";
-    arrow.style.borderLeft = "1px solid #a0a0a0";
-
-    var img = document.createElement("img");
-    img.setAttribute("border", "0");
-    img.setAttribute("valign", "middle");
-    img.setAttribute("src", Toolbar.prototype.dropDownImage);
-    arrow.appendChild(img);
-
-    var img = arrow.getElementsByTagName("img")[0];
-    img.style.position = "relative";
-    img.style.left = "1px";
-    img.style.top = mxClient.IS_FF ? "0px" : "-4px";
-    mxUtils.setOpacity(arrow, 70);
-
-    var symbol = elt.getElementsByTagName("div")[0];
-
-    if (symbol != null) {
-        symbol.style.paddingRight = "6px";
-        symbol.style.marginLeft = "4px";
-        symbol.style.marginTop = "-1px";
-        symbol.style.display = "inline-block";
-        mxUtils.setOpacity(symbol, 60);
-    }
-
-    mxUtils.setOpacity(elt, 100);
-    elt.style.border = "1px solid #a0a0a0";
-    elt.style.backgroundColor = this.buttonBackgroundColor;
-    elt.style.backgroundImage = "none";
-    elt.style.width = "auto";
-    elt.className += " geColorBtn";
-    mxUtils.setPrefixedStyle(elt.style, "borderRadius", "3px");
-
-    elt.appendChild(arrow);
-
-    return symbol;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.addUnitInput = function (
-    container,
-    unit,
-    right,
-    width,
-    update,
-    step,
-    marginTop,
-    disableFocus,
-    isFloat,
-) {
-    marginTop = marginTop != null ? marginTop : 0;
-
-    var input = document.createElement("input");
-    input.style.position = "absolute";
-    input.style.textAlign = "right";
-    input.style.marginTop = "-2px";
-    input.style.left = 228 - right - width + "px";
-    input.style.width = width + "px";
-    input.style.height = "21px";
-    input.style.border = "1px solid rgb(160, 160, 160)";
-    input.style.borderRadius = "4px";
-    input.style.boxSizing = "border-box";
-
-    container.appendChild(input);
-
-    var stepper = this.createStepper(
-        input,
-        update,
-        step,
-        null,
-        disableFocus,
-        null,
-        isFloat,
-    );
-    stepper.style.marginTop = marginTop - 2 + "px";
-    stepper.style.left = 228 - right + "px";
-    container.appendChild(stepper);
-
-    return input;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.createRelativeOption = function (
-    label,
-    key,
-    width,
-    handler,
-    init,
-) {
-    width = width != null ? width : 52;
-
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var div = this.createPanel();
-    div.style.paddingTop = "10px";
-    div.style.paddingBottom = "10px";
-    mxUtils.write(div, label);
-    div.style.fontWeight = "bold";
-
-    var update = mxUtils.bind(this, function (evt) {
-        if (handler != null) {
-            handler(input);
-        } else {
-            var value = parseInt(input.value);
-            value = Math.min(100, Math.max(0, isNaN(value) ? 100 : value));
-            var state = graph.view.getState(ui.getSelectionState().cells[0]);
-
-            if (state != null && value != mxUtils.getValue(state.style, key, 100)) {
-                // Removes entry in style (assumes 100 is default for relative values)
-                if (value == 100) {
-                    value = null;
-                }
-
-                var cells = ui.getSelectionState().cells;
-                graph.setCellStyles(key, value, cells);
-                this.editorUi.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [key],
-                        "values",
-                        [value],
-                        "cells",
-                        cells,
-                    ),
-                );
-            }
-
-            input.value = (value != null ? value : "100") + " %";
-        }
-
-        mxEvent.consume(evt);
-    });
-
-    var input = this.addUnitInput(
-        div,
-        "%",
-        16,
-        width,
-        update,
-        10,
-        -15,
-        handler != null,
-    );
-
-    if (key != null) {
-        var listener = mxUtils.bind(this, function (sender, evt, force) {
-            if (force || input != document.activeElement) {
-                var ss = ui.getSelectionState();
-                var tmp = parseInt(mxUtils.getValue(ss.style, key, 100));
-                input.value = isNaN(tmp) ? "" : tmp + " %";
-            }
-        });
-
-        mxEvent.addListener(input, "keydown", function (e) {
-            if (e.keyCode == 13) {
-                graph.container.focus();
-                mxEvent.consume(e);
-            } else if (e.keyCode == 27) {
-                listener(null, null, true);
-                graph.container.focus();
-                mxEvent.consume(e);
-            }
-        });
-
-        graph.getModel().addListener(mxEvent.CHANGE, listener);
-        this.listeners.push({
-            destroy: function () {
-                graph.getModel().removeListener(listener);
-            },
-        });
-        listener();
-    }
-
-    mxEvent.addListener(input, "blur", update);
-    mxEvent.addListener(input, "change", update);
-
-    if (init != null) {
-        init(input);
-    }
-
-    return div;
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.addLabel = function (div, title, right, width) {
-    width = width != null ? width : 61;
-
-    var label = document.createElement("div");
-    mxUtils.write(label, title);
-    label.style.position = "absolute";
-    label.style.left = 240 - right - width + "px";
-    label.style.width = width + "px";
-    label.style.marginTop = "6px";
-    label.style.textAlign = "center";
-    div.appendChild(label);
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.addKeyHandler = function (input, listener) {
-    mxEvent.addListener(
-        input,
-        "keydown",
-        mxUtils.bind(this, function (e) {
-            if (e.keyCode == 13) {
-                this.editorUi.editor.graph.container.focus();
-                mxEvent.consume(e);
-            } else if (e.keyCode == 27) {
-                if (listener != null) {
-                    listener(null, null, true);
-                }
-
-                this.editorUi.editor.graph.container.focus();
-                mxEvent.consume(e);
-            }
-        }),
-    );
-};
-
-/**
- *
- */
-BaseFormatPanel.prototype.styleButtons = function (elts) {
-    for (var i = 0; i < elts.length; i++) {
-        mxUtils.setPrefixedStyle(elts[i].style, "borderRadius", "3px");
-        mxUtils.setOpacity(elts[i], 100);
-        elts[i].style.border = "1px solid #a0a0a0";
-        elts[i].style.padding = "4px";
-        elts[i].style.paddingTop = "3px";
-        elts[i].style.paddingRight = "1px";
-        elts[i].style.margin = "1px";
-        elts[i].style.marginRight = "2px";
-        elts[i].style.width = "24px";
-        elts[i].style.height = "20px";
-        elts[i].className += " geColorBtn";
-    }
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-BaseFormatPanel.prototype.destroy = function () {
-    if (this.listeners != null) {
-        for (var i = 0; i < this.listeners.length; i++) {
-            this.listeners[i].destroy();
-        }
-
-        this.listeners = null;
-    }
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-ArrangePanel = function (format, editorUi, container) {
-    BaseFormatPanel.call(this, format, editorUi, container);
-    this.init();
-};
-
-mxUtils.extend(ArrangePanel, BaseFormatPanel);
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-ArrangePanel.prototype.init = function () {
-    var ss = this.editorUi.getSelectionState();
-
-    if (ss.cells.length > 0) {
-        this.container.appendChild(this.addLayerOps(this.createPanel()));
-
-        // Special case that adds two panels
-        this.addGeometry(this.container);
-        this.addEdgeGeometry(this.container);
-
-        if (!ss.containsLabel || ss.edges.length == 0) {
-            this.container.appendChild(this.addAngle(this.createPanel()));
-        }
-
-        if (!ss.containsLabel) {
-            this.container.appendChild(this.addFlip(this.createPanel()));
-        }
-
-        this.container.appendChild(this.addAlign(this.createPanel()));
-
-        if (ss.vertices.length > 1 && !ss.cell && !ss.row) {
-            this.container.appendChild(this.addDistribute(this.createPanel()));
-        }
-
-        this.container.appendChild(this.addTable(this.createPanel()));
-        this.container.appendChild(this.addGroupOps(this.createPanel()));
-    }
-
-    if (ss.containsLabel) {
-        // Adds functions from hidden style format panel
-        var span = document.createElement("div");
-        span.style.width = "100%";
-        span.style.marginTop = "0px";
-        span.style.fontWeight = "bold";
-        span.style.padding = "10px 0 0 14px";
-        mxUtils.write(span, mxResources.get("style"));
-        this.container.appendChild(span);
-
-        new StyleFormatPanel(this.format, this.editorUi, this.container);
-    }
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addTable = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var ss = ui.getSelectionState();
-    div.style.paddingTop = "6px";
-    div.style.paddingBottom = "10px";
-
-    var span = document.createElement("div");
-    span.style.marginTop = "0px";
-    span.style.marginBottom = "6px";
-    span.style.fontWeight = "bold";
-    mxUtils.write(span, mxResources.get("table"));
-    div.appendChild(span);
-
-    var panel = document.createElement("div");
-    panel.style.position = "relative";
-    panel.style.paddingLeft = "0px";
-    panel.style.borderWidth = "0px";
-    panel.style.width = "220px";
-    panel.className = "geToolbarContainer";
-
-    var cell = ss.vertices[0];
-
-    if (graph.getSelectionCount() > 1) {
-        if (graph.isTableCell(cell)) {
-            cell = graph.model.getParent(cell);
-        }
-
-        if (graph.isTableRow(cell)) {
-            cell = graph.model.getParent(cell);
-        }
-    }
-
-    var isTable = ss.table || ss.row || ss.cell;
-    var isStack = graph.isStack(cell) || graph.isStackChild(cell);
-
-    var showCols = isTable;
-    var showRows = isTable;
-
-    if (isStack) {
-        var style = graph.isStack(cell)
-            ? ss.style
-            : graph.getCellStyle(graph.model.getParent(cell));
-
-        showRows = style["horizontalStack"] == "0";
-        showCols = !showRows;
-    }
-
-    var btns = [];
-
-    if (showCols) {
-        btns = btns.concat([
-            ui.toolbar.addButton(
-                "geSprite-insertcolumnbefore",
-                mxResources.get("insertColumnBefore"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (isStack) {
-                            graph.insertLane(cell, true);
-                        } else {
-                            graph.insertTableColumn(cell, true);
-                        }
-                    } catch (e) {
-                        ui.handleError(e);
-                    }
-                }),
-                panel,
-            ),
-            ui.toolbar.addButton(
-                "geSprite-insertcolumnafter",
-                mxResources.get("insertColumnAfter"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (isStack) {
-                            graph.insertLane(cell, false);
-                        } else {
-                            graph.insertTableColumn(cell, false);
-                        }
-                    } catch (e) {
-                        ui.handleError(e);
-                    }
-                }),
-                panel,
-            ),
-            ui.toolbar.addButton(
-                "geSprite-deletecolumn",
-                mxResources.get("deleteColumn"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (isStack) {
-                            graph.deleteLane(cell);
-                        } else {
-                            graph.deleteTableColumn(cell);
-                        }
-                    } catch (e) {
-                        ui.handleError(e);
-                    }
-                }),
-                panel,
-            ),
-        ]);
-    }
-
-    if (showRows) {
-        btns = btns.concat([
-            ui.toolbar.addButton(
-                "geSprite-insertrowbefore",
-                mxResources.get("insertRowBefore"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (isStack) {
-                            graph.insertLane(cell, true);
-                        } else {
-                            graph.insertTableRow(cell, true);
-                        }
-                    } catch (e) {
-                        ui.handleError(e);
-                    }
-                }),
-                panel,
-            ),
-            ui.toolbar.addButton(
-                "geSprite-insertrowafter",
-                mxResources.get("insertRowAfter"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (isStack) {
-                            graph.insertLane(cell, false);
-                        } else {
-                            graph.insertTableRow(cell, false);
-                        }
-                    } catch (e) {
-                        ui.handleError(e);
-                    }
-                }),
-                panel,
-            ),
-            ui.toolbar.addButton(
-                "geSprite-deleterow",
-                mxResources.get("deleteRow"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (isStack) {
-                            graph.deleteLane(cell);
-                        } else {
-                            graph.deleteTableRow(cell);
-                        }
-                    } catch (e) {
-                        ui.handleError(e);
-                    }
-                }),
-                panel,
-            ),
-        ]);
-    }
-
-    if (btns.length > 0) {
-        this.styleButtons(btns);
-        div.appendChild(panel);
-
-        if (btns.length > 3) {
-            btns[2].style.marginRight = "10px";
-        }
-
-        var count = 0;
-
-        if (ss.mergeCell != null) {
-            count += this.addActions(div, ["mergeCells"]);
-        } else if (ss.style["colspan"] > 1 || ss.style["rowspan"] > 1) {
-            count += this.addActions(div, ["unmergeCells"]);
-        }
-
-        if (count > 0) {
-            panel.style.paddingBottom = "2px";
-        }
-    } else {
-        div.style.display = "none";
-    }
-
-    return div;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addLayerOps = function (div) {
-    this.addActions(div, ["toFront", "toBack"]);
-    this.addActions(div, ["bringForward", "sendBackward"]);
-
-    return div;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addGroupOps = function (div) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var ss = ui.getSelectionState();
-
-    div.style.paddingTop = "8px";
-    div.style.paddingBottom = "6px";
-
-    var count = 0;
-
-    if (!ss.cell && !ss.row) {
-        count +=
-            this.addActions(div, ["group", "ungroup", "copySize", "pasteSize"]) +
-            this.addActions(div, ["removeFromGroup"]);
-    }
-
-    var copyBtn = null;
-
-    if (
-        ss.cells.length == 1 &&
-        ss.cells[0].value != null &&
-        !isNaN(ss.cells[0].value.nodeType)
-    ) {
-        copyBtn = mxUtils.button(mxResources.get("copyData"), function (evt) {
-            if (mxEvent.isShiftDown(evt)) {
-                var result = graph.getDataForCells(graph.getSelectionCells());
-
-                var dlg = new EmbedDialog(
-                    ui,
-                    JSON.stringify(result, null, 2),
-                    null,
-                    null,
-                    function () {
-                        console.log(result);
-                        ui.alert("Written to Console (Dev Tools)");
-                    },
-                    mxResources.get("copyData"),
-                    null,
-                    "Console",
-                    "data.json",
-                );
-                ui.showDialog(dlg.container, 450, 240, true, true);
-                dlg.init();
-            } else {
-                ui.actions.get("copyData").funct(evt);
-            }
-        });
-
-        copyBtn.setAttribute(
-            "title",
-            mxResources.get("copyData") +
-            " (" +
-            this.editorUi.actions.get("copyData").shortcut +
-            ")" +
-            " Shift+Click to Extract Data",
-        );
-        copyBtn.style.marginBottom = "2px";
-        copyBtn.style.width = "210px";
-        div.appendChild(copyBtn);
-        count++;
-    }
-
-    var pasteBtn = null;
-
-    if (ui.copiedValue != null && ss.cells.length > 0) {
-        pasteBtn = mxUtils.button(mxResources.get("pasteData"), function (evt) {
-            ui.actions.get("pasteData").funct(evt);
-        });
-
-        pasteBtn.setAttribute(
-            "title",
-            mxResources.get("pasteData") +
-            " (" +
-            this.editorUi.actions.get("pasteData").shortcut +
-            ")",
-        );
-        pasteBtn.style.marginBottom = "2px";
-        pasteBtn.style.width = "210px";
-        div.appendChild(pasteBtn);
-        count++;
-
-        if (copyBtn != null) {
-            copyBtn.style.width = "104px";
-            pasteBtn.style.width = "104px";
-            pasteBtn.style.marginBottom = "2px";
-            copyBtn.style.marginBottom = "2px";
-            copyBtn.style.marginRight = "2px";
-        }
-    }
-
-    if (copyBtn != null || pasteBtn != null) {
-        mxUtils.br(div);
-    }
-
-    var clearWaypoints = this.addAction(div, "clearWaypoints");
-
-    if (clearWaypoints != null) {
-        mxUtils.br(div);
-        clearWaypoints.setAttribute(
-            "title",
-            mxResources.get("clearWaypoints") +
-            " (" +
-            this.editorUi.actions.get("clearWaypoints").shortcut +
-            ")" +
-            " Shift+Click to Clear Anchor Points",
-        );
-        count++;
-    }
-
-    if (graph.getSelectionCount() == 1) {
-        count += this.addActions(div, ["editData", "editLink"]);
-    }
-
-    if (count == 0) {
-        div.style.display = "none";
-    }
-
-    return div;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addAlign = function (div) {
-    var ss = this.editorUi.getSelectionState();
-    var graph = this.editorUi.editor.graph;
-    div.style.paddingTop = "6px";
-    div.style.paddingBottom = "8px";
-    div.appendChild(this.createTitle(mxResources.get("align")));
-
-    var stylePanel = document.createElement("div");
-    stylePanel.style.position = "relative";
-    stylePanel.style.whiteSpace = "nowrap";
-    stylePanel.style.paddingLeft = "0px";
-    stylePanel.style.paddingBottom = "2px";
-    stylePanel.style.borderWidth = "0px";
-    stylePanel.style.width = "220px";
-    stylePanel.className = "geToolbarContainer";
-
-    if (ss.vertices.length > 1) {
-        var left = this.editorUi.toolbar.addButton(
-            "geSprite-alignleft",
-            mxResources.get("left"),
-            function () {
-                graph.alignCells(mxConstants.ALIGN_LEFT);
-            },
-            stylePanel,
-        );
-        var center = this.editorUi.toolbar.addButton(
-            "geSprite-aligncenter",
-            mxResources.get("center"),
-            function () {
-                graph.alignCells(mxConstants.ALIGN_CENTER);
-            },
-            stylePanel,
-        );
-        var right = this.editorUi.toolbar.addButton(
-            "geSprite-alignright",
-            mxResources.get("right"),
-            function () {
-                graph.alignCells(mxConstants.ALIGN_RIGHT);
-            },
-            stylePanel,
-        );
-
-        var top = this.editorUi.toolbar.addButton(
-            "geSprite-aligntop",
-            mxResources.get("top"),
-            function () {
-                graph.alignCells(mxConstants.ALIGN_TOP);
-            },
-            stylePanel,
-        );
-        var middle = this.editorUi.toolbar.addButton(
-            "geSprite-alignmiddle",
-            mxResources.get("middle"),
-            function () {
-                graph.alignCells(mxConstants.ALIGN_MIDDLE);
-            },
-            stylePanel,
-        );
-        var bottom = this.editorUi.toolbar.addButton(
-            "geSprite-alignbottom",
-            mxResources.get("bottom"),
-            function () {
-                graph.alignCells(mxConstants.ALIGN_BOTTOM);
-            },
-            stylePanel,
-        );
-
-        this.styleButtons([left, center, right, top, middle, bottom]);
-        right.style.marginRight = "10px";
-    }
-
-    div.appendChild(stylePanel);
-    this.addActions(div, ["snapToGrid"]);
-
-    return div;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addFlip = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    div.style.paddingTop = "6px";
-    div.style.paddingBottom = "10px";
-    var ss = this.editorUi.getSelectionState();
-
-    var span = document.createElement("div");
-    span.style.marginTop = "2px";
-    span.style.marginBottom = "8px";
-    span.style.fontWeight = "bold";
-    mxUtils.write(span, mxResources.get("flip"));
-    div.appendChild(span);
-
-    var btn = mxUtils.button(mxResources.get("horizontal"), function (evt) {
-        graph.flipCells(ss.cells, true);
-    });
-
-    btn.setAttribute("title", mxResources.get("horizontal"));
-    btn.style.width = "104px";
-    btn.style.marginRight = "2px";
-    div.appendChild(btn);
-
-    var btn = mxUtils.button(mxResources.get("vertical"), function (evt) {
-        graph.flipCells(ss.cells, false);
-    });
-
-    btn.setAttribute("title", mxResources.get("vertical"));
-    btn.style.width = "104px";
-    div.appendChild(btn);
-
-    return div;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addDistribute = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    div.style.paddingTop = "6px";
-    div.style.paddingBottom = "12px";
-
-    div.appendChild(this.createTitle(mxResources.get("distribute")));
-
-    var btn = mxUtils.button(mxResources.get("horizontal"), function (evt) {
-        graph.distributeCells(true);
-    });
-
-    btn.setAttribute("title", mxResources.get("horizontal"));
-    btn.style.width = "104px";
-    btn.style.marginRight = "2px";
-    div.appendChild(btn);
-
-    var btn = mxUtils.button(mxResources.get("vertical"), function (evt) {
-        graph.distributeCells(false);
-    });
-
-    btn.setAttribute("title", mxResources.get("vertical"));
-    btn.style.width = "104px";
-    div.appendChild(btn);
-
-    return div;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addAngle = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var ss = ui.getSelectionState();
-
-    div.style.paddingBottom = "8px";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "70px";
-    span.style.marginTop = "0px";
-    span.style.fontWeight = "bold";
-
-    var input = null;
-    var update = null;
-    var btn = null;
-
-    if (ss.rotatable && !ss.table && !ss.row && !ss.cell) {
-        mxUtils.write(span, mxResources.get("angle"));
-        div.appendChild(span);
-
-        input = this.addUnitInput(div, "°", 16, 52, function () {
-            update.apply(this, arguments);
-        });
-
-        mxUtils.br(div);
-        div.style.paddingTop = "10px";
-    } else {
-        div.style.paddingTop = "8px";
-    }
-
-    if (!ss.containsLabel) {
-        var label = mxResources.get("reverse");
-
-        if (ss.vertices.length > 0 && ss.edges.length > 0) {
-            label = mxResources.get("turn") + " / " + label;
-        } else if (ss.vertices.length > 0) {
-            label = mxResources.get("turn");
-        }
-
-        btn = mxUtils.button(label, function (evt) {
-            ui.actions.get("turn").funct(evt);
-        });
-
-        btn.setAttribute(
-            "title",
-            label + " (" + this.editorUi.actions.get("turn").shortcut + ")",
-        );
-        btn.style.width = "210px";
-        div.appendChild(btn);
-
-        if (input != null) {
-            btn.style.marginTop = "8px";
-        }
-    }
-
-    if (input != null) {
-        var listener = mxUtils.bind(this, function (sender, evt, force) {
-            if (force || document.activeElement != input) {
-                ss = ui.getSelectionState();
-                var tmp = parseFloat(
-                    mxUtils.getValue(ss.style, mxConstants.STYLE_ROTATION, 0),
-                );
-                input.value = isNaN(tmp) ? "" : tmp + "°";
-            }
-        });
-
-        update = this.installInputHandler(
-            input,
-            mxConstants.STYLE_ROTATION,
-            0,
-            0,
-            360,
-            "°",
-            null,
-            true,
-        );
-        this.addKeyHandler(input, listener);
-
-        graph.getModel().addListener(mxEvent.CHANGE, listener);
-        this.listeners.push({
-            destroy: function () {
-                graph.getModel().removeListener(listener);
-            },
-        });
-        listener();
-    }
-
-    return div;
-};
-
-BaseFormatPanel.prototype.getUnit = function () {
-    var unit = this.editorUi.editor.graph.view.unit;
-
-    switch (unit) {
-        case mxConstants.POINTS:
-            return "pt";
-        case mxConstants.INCHES:
-            return '"';
-        case mxConstants.MILLIMETERS:
-            return "mm";
-        case mxConstants.METERS:
-            return "m";
-    }
-};
-
-BaseFormatPanel.prototype.inUnit = function (pixels) {
-    return this.editorUi.editor.graph.view.formatUnitText(pixels);
-};
-
-BaseFormatPanel.prototype.fromUnit = function (value) {
-    var unit = this.editorUi.editor.graph.view.unit;
-
-    switch (unit) {
-        case mxConstants.POINTS:
-            return value;
-        case mxConstants.INCHES:
-            return value * mxConstants.PIXELS_PER_INCH;
-        case mxConstants.MILLIMETERS:
-            return value * mxConstants.PIXELS_PER_MM;
-        case mxConstants.METERS:
-            return value * mxConstants.PIXELS_PER_MM * 1000;
-    }
-};
-
-BaseFormatPanel.prototype.isFloatUnit = function () {
-    return this.editorUi.editor.graph.view.unit != mxConstants.POINTS;
-};
-
-BaseFormatPanel.prototype.getUnitStep = function () {
-    var unit = this.editorUi.editor.graph.view.unit;
-
-    switch (unit) {
-        case mxConstants.POINTS:
-            return 1;
-        case mxConstants.INCHES:
-            return 0.1;
-        case mxConstants.MILLIMETERS:
-            return 0.5;
-        case mxConstants.METERS:
-            return 0.001;
-    }
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addGeometry = function (container) {
-    var panel = this;
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var model = graph.getModel();
-    var rect = ui.getSelectionState();
-
-    var div = this.createPanel();
-    div.style.paddingBottom = "8px";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "50px";
-    span.style.marginTop = "0px";
-    span.style.fontWeight = "bold";
-    mxUtils.write(span, mxResources.get("size"));
-    div.appendChild(span);
-
-    var widthUpdate, heightUpdate, leftUpdate, topUpdate;
-    var width = this.addUnitInput(
-        div,
-        this.getUnit(),
-        87,
-        52,
-        function () {
-            widthUpdate.apply(this, arguments);
-        },
-        this.getUnitStep(),
-        null,
-        null,
-        this.isFloatUnit(),
-    );
-    var height = this.addUnitInput(
-        div,
-        this.getUnit(),
-        16,
-        52,
-        function () {
-            heightUpdate.apply(this, arguments);
-        },
-        this.getUnitStep(),
-        null,
-        null,
-        this.isFloatUnit(),
-    );
-
-    var autosizeBtn = document.createElement("div");
-    autosizeBtn.className = "geSprite geSprite-fit";
-    autosizeBtn.setAttribute(
-        "title",
-        mxResources.get("autosize") +
-        " (" +
-        this.editorUi.actions.get("autosize").shortcut +
-        ")",
-    );
-    autosizeBtn.style.position = "relative";
-    autosizeBtn.style.cursor = "pointer";
-    autosizeBtn.style.marginTop = "-3px";
-    autosizeBtn.style.border = "0px";
-    autosizeBtn.style.left = "42px";
-    mxUtils.setOpacity(autosizeBtn, 50);
-
-    mxEvent.addListener(autosizeBtn, "mouseenter", function () {
-        mxUtils.setOpacity(autosizeBtn, 100);
-    });
-
-    mxEvent.addListener(autosizeBtn, "mouseleave", function () {
-        mxUtils.setOpacity(autosizeBtn, 50);
-    });
-
-    mxEvent.addListener(autosizeBtn, "click", function () {
-        ui.actions.get("autosize").funct();
-    });
-
-    div.appendChild(autosizeBtn);
-
-    if (rect.row) {
-        width.style.visibility = "hidden";
-        width.nextSibling.style.visibility = "hidden";
-    } else {
-        this.addLabel(div, mxResources.get("width"), 87);
-    }
-
-    this.addLabel(div, mxResources.get("height"), 16);
-    mxUtils.br(div);
-
-    var wrapper = document.createElement("div");
-    wrapper.style.paddingTop = "8px";
-    wrapper.style.paddingRight = "20px";
-    wrapper.style.whiteSpace = "nowrap";
-    wrapper.style.textAlign = "right";
-    var opt = this.createCellOption(
-        mxResources.get("constrainProportions"),
-        mxConstants.STYLE_ASPECT,
-        null,
-        "fixed",
-        "null",
-    );
-    opt.style.width = "210px";
-    wrapper.appendChild(opt);
-
-    if (!rect.cell && !rect.row) {
-        div.appendChild(wrapper);
-    } else {
-        autosizeBtn.style.visibility = "hidden";
-    }
-
-    var constrainCheckbox = opt.getElementsByTagName("input")[0];
-    this.addKeyHandler(width, listener);
-    this.addKeyHandler(height, listener);
-
-    widthUpdate = this.addGeometryHandler(width, function (geo, value, cell) {
-        if (graph.isTableCell(cell)) {
-            graph.setTableColumnWidth(cell, value - geo.width, true);
-
-            // Blocks processing in caller
-            return true;
-        } else if (geo.width > 0) {
-            var value = Math.max(1, panel.fromUnit(value));
-
-            if (constrainCheckbox.checked) {
-                geo.height = Math.round((geo.height * value * 100) / geo.width) / 100;
-            }
-
-            geo.width = value;
-        }
-    });
-    heightUpdate = this.addGeometryHandler(height, function (geo, value, cell) {
-        if (graph.isTableCell(cell)) {
-            cell = graph.model.getParent(cell);
-        }
-
-        if (graph.isTableRow(cell)) {
-            graph.setTableRowHeight(cell, value - geo.height);
-
-            // Blocks processing in caller
-            return true;
-        } else if (geo.height > 0) {
-            var value = Math.max(1, panel.fromUnit(value));
-
-            if (constrainCheckbox.checked) {
-                geo.width = Math.round((geo.width * value * 100) / geo.height) / 100;
-            }
-
-            geo.height = value;
-        }
-    });
-
-    if (rect.resizable || rect.row || rect.cell) {
-        container.appendChild(div);
-    }
-
-    var div2 = this.createPanel();
-    div2.style.paddingBottom = "30px";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "70px";
-    span.style.marginTop = "0px";
-    span.style.fontWeight = "bold";
-    mxUtils.write(span, mxResources.get("position"));
-    div2.appendChild(span);
-
-    var left = this.addUnitInput(
-        div2,
-        this.getUnit(),
-        87,
-        52,
-        function () {
-            leftUpdate.apply(this, arguments);
-        },
-        this.getUnitStep(),
-        null,
-        null,
-        this.isFloatUnit(),
-    );
-    var top = this.addUnitInput(
-        div2,
-        this.getUnit(),
-        16,
-        52,
-        function () {
-            topUpdate.apply(this, arguments);
-        },
-        this.getUnitStep(),
-        null,
-        null,
-        this.isFloatUnit(),
-    );
-
-    mxUtils.br(div2);
-
-    this.addLabel(div2, mxResources.get("left"), 87);
-    this.addLabel(div2, mxResources.get("top"), 16);
-
-    var listener = mxUtils.bind(this, function (sender, evt, force) {
-        rect = ui.getSelectionState();
-
-        if (
-            !rect.containsLabel &&
-            rect.vertices.length == graph.getSelectionCount() &&
-            rect.width != null &&
-            rect.height != null
-        ) {
-            div.style.display = "";
-
-            if (force || document.activeElement != width) {
-                width.value =
-                    this.inUnit(rect.width) +
-                    (rect.width == "" ? "" : " " + this.getUnit());
-            }
-
-            if (force || document.activeElement != height) {
-                height.value =
-                    this.inUnit(rect.height) +
-                    (rect.height == "" ? "" : " " + this.getUnit());
-            }
-        } else {
-            div.style.display = "none";
-        }
-
-        if (
-            rect.vertices.length == graph.getSelectionCount() &&
-            rect.x != null &&
-            rect.y != null
-        ) {
-            div2.style.display = "";
-
-            if (force || document.activeElement != left) {
-                left.value =
-                    this.inUnit(rect.x) + (rect.x == "" ? "" : " " + this.getUnit());
-            }
-
-            if (force || document.activeElement != top) {
-                top.value =
-                    this.inUnit(rect.y) + (rect.y == "" ? "" : " " + this.getUnit());
-            }
-        } else {
-            div2.style.display = "none";
-        }
-    });
-
-    this.addKeyHandler(left, listener);
-    this.addKeyHandler(top, listener);
-
-    model.addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            model.removeListener(listener);
-        },
-    });
-    listener();
-
-    leftUpdate = this.addGeometryHandler(left, function (geo, value) {
-        value = panel.fromUnit(value);
-
-        if (geo.relative) {
-            geo.offset.x = value;
-        } else {
-            geo.x = value;
-        }
-    });
-    topUpdate = this.addGeometryHandler(top, function (geo, value) {
-        value = panel.fromUnit(value);
-
-        if (geo.relative) {
-            geo.offset.y = value;
-        } else {
-            geo.y = value;
-        }
-    });
-
-    if (rect.movable) {
-        if (
-            rect.edges.length == 0 &&
-            rect.vertices.length == 1 &&
-            model.isEdge(model.getParent(rect.vertices[0]))
-        ) {
-            var geo = graph.getCellGeometry(rect.vertices[0]);
-
-            if (geo != null && geo.relative) {
-                var btn = mxUtils.button(
-                    mxResources.get("center"),
-                    mxUtils.bind(this, function (evt) {
-                        model.beginUpdate();
-                        try {
-                            geo = geo.clone();
-                            geo.x = 0;
-                            geo.y = 0;
-                            geo.offset = new mxPoint();
-                            model.setGeometry(rect.vertices[0], geo);
-                        } finally {
-                            model.endUpdate();
-                        }
-                    }),
-                );
-
-                btn.setAttribute("title", mxResources.get("center"));
-                btn.style.width = "210px";
-                btn.style.position = "absolute";
-                mxUtils.br(div2);
-                mxUtils.br(div2);
-                div2.appendChild(btn);
-            }
-        }
-        container.appendChild(div2);
-    }
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addGeometryHandler = function (input, fn) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var initialValue = null;
-    var panel = this;
-
-    function update(evt) {
-        if (input.value != "") {
-            var value = parseFloat(input.value);
-
-            if (isNaN(value)) {
-                input.value = initialValue + " " + panel.getUnit();
-            } else if (value != initialValue) {
-                graph.getModel().beginUpdate();
-                try {
-                    var cells = ui.getSelectionState().cells;
-
-                    for (var i = 0; i < cells.length; i++) {
-                        if (graph.getModel().isVertex(cells[i])) {
-                            var geo = graph.getCellGeometry(cells[i]);
-
-                            if (geo != null) {
-                                geo = geo.clone();
-
-                                if (!fn(geo, value, cells[i])) {
-                                    var state = graph.view.getState(cells[i]);
-
-                                    if (state != null && graph.isRecursiveVertexResize(state)) {
-                                        graph.resizeChildCells(cells[i], geo);
-                                    }
-
-                                    graph.getModel().setGeometry(cells[i], geo);
-                                    graph.constrainChildCells(cells[i]);
-                                }
-                            }
-                        }
-                    }
-                } finally {
-                    graph.getModel().endUpdate();
-                }
-
-                initialValue = value;
-                input.value = value + " " + panel.getUnit();
-            }
-        }
-
-        mxEvent.consume(evt);
-    }
-
-    mxEvent.addListener(input, "blur", update);
-    mxEvent.addListener(input, "change", update);
-    mxEvent.addListener(input, "focus", function () {
-        initialValue = input.value;
-    });
-
-    return update;
-};
-
-ArrangePanel.prototype.addEdgeGeometryHandler = function (input, fn) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var initialValue = null;
-
-    function update(evt) {
-        if (input.value != "") {
-            var value = parseFloat(input.value);
-
-            if (isNaN(value)) {
-                input.value = initialValue + " pt";
-            } else if (value != initialValue) {
-                graph.getModel().beginUpdate();
-                try {
-                    var cells = ui.getSelectionState().cells;
-
-                    for (var i = 0; i < cells.length; i++) {
-                        if (graph.getModel().isEdge(cells[i])) {
-                            var geo = graph.getCellGeometry(cells[i]);
-
-                            if (geo != null) {
-                                geo = geo.clone();
-                                fn(geo, value);
-
-                                graph.getModel().setGeometry(cells[i], geo);
-                            }
-                        }
-                    }
-                } finally {
-                    graph.getModel().endUpdate();
-                }
-
-                initialValue = value;
-                input.value = value + " pt";
-            }
-        }
-
-        mxEvent.consume(evt);
-    }
-
-    mxEvent.addListener(input, "blur", update);
-    mxEvent.addListener(input, "change", update);
-    mxEvent.addListener(input, "focus", function () {
-        initialValue = input.value;
-    });
-
-    return update;
-};
-
-/**
- *
- */
-ArrangePanel.prototype.addEdgeGeometry = function (container) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var rect = ui.getSelectionState();
-    var div = this.createPanel();
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "70px";
-    span.style.marginTop = "0px";
-    span.style.fontWeight = "bold";
-    mxUtils.write(span, mxResources.get("width"));
-    div.appendChild(span);
-
-    var widthUpdate, xtUpdate, ytUpdate, xsUpdate, ysUpdate;
-    var width = this.addUnitInput(div, "pt", 12, 44, function () {
-        widthUpdate.apply(this, arguments);
-    });
-
-    mxUtils.br(div);
-    this.addKeyHandler(width, listener);
-
-    var widthUpdate = mxUtils.bind(this, function (evt) {
-        // Maximum stroke width is 999
-        var value = parseInt(width.value);
-        value = Math.min(999, Math.max(1, isNaN(value) ? 1 : value));
-
-        if (
-            value !=
-            mxUtils.getValue(
-                rect.style,
-                "width",
-                mxCellRenderer.defaultShapes["flexArrow"].prototype.defaultWidth,
-            )
-        ) {
-            var cells = ui.getSelectionState().cells;
-            graph.setCellStyles("width", value, cells);
-            ui.fireEvent(
-                new mxEventObject(
-                    "styleChanged",
-                    "keys",
-                    ["width"],
-                    "values",
-                    [value],
-                    "cells",
-                    cells,
-                ),
-            );
-        }
-
-        width.value = value + " pt";
-        mxEvent.consume(evt);
-    });
-
-    mxEvent.addListener(width, "blur", widthUpdate);
-    mxEvent.addListener(width, "change", widthUpdate);
-
-    container.appendChild(div);
-
-    var divs = this.createPanel();
-    divs.style.paddingBottom = "30px";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "70px";
-    span.style.marginTop = "0px";
-    mxUtils.write(span, mxResources.get("linestart"));
-    divs.appendChild(span);
-
-    var xs = this.addUnitInput(divs, "pt", 87, 52, function () {
-        xsUpdate.apply(this, arguments);
-    });
-    var ys = this.addUnitInput(divs, "pt", 16, 52, function () {
-        ysUpdate.apply(this, arguments);
-    });
-
-    mxUtils.br(divs);
-    this.addLabel(divs, mxResources.get("left"), 87);
-    this.addLabel(divs, mxResources.get("top"), 16);
-    container.appendChild(divs);
-    this.addKeyHandler(xs, listener);
-    this.addKeyHandler(ys, listener);
-
-    var divt = this.createPanel();
-    divt.style.paddingBottom = "30px";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "70px";
-    span.style.marginTop = "0px";
-    mxUtils.write(span, mxResources.get("lineend"));
-    divt.appendChild(span);
-
-    var xt = this.addUnitInput(divt, "pt", 87, 52, function () {
-        xtUpdate.apply(this, arguments);
-    });
-    var yt = this.addUnitInput(divt, "pt", 16, 52, function () {
-        ytUpdate.apply(this, arguments);
-    });
-
-    mxUtils.br(divt);
-    this.addLabel(divt, mxResources.get("left"), 87);
-    this.addLabel(divt, mxResources.get("top"), 16);
-    container.appendChild(divt);
-    this.addKeyHandler(xt, listener);
-    this.addKeyHandler(yt, listener);
-
-    var listener = mxUtils.bind(this, function (sender, evt, force) {
-        rect = ui.getSelectionState();
-        var cell = rect.cells[0];
-
-        if (rect.style.shape == "link" || rect.style.shape == "flexArrow") {
-            div.style.display = "";
-
-            if (force || document.activeElement != width) {
-                var value = mxUtils.getValue(
-                    rect.style,
-                    "width",
-                    mxCellRenderer.defaultShapes["flexArrow"].prototype.defaultWidth,
-                );
-                width.value = value + " pt";
-            }
-        } else {
-            div.style.display = "none";
-        }
-
-        if (rect.cells.length == 1 && graph.model.isEdge(cell)) {
-            var geo = graph.model.getGeometry(cell);
-
-            if (
-                geo.sourcePoint != null &&
-                graph.model.getTerminal(cell, true) == null
-            ) {
-                xs.value = geo.sourcePoint.x;
-                ys.value = geo.sourcePoint.y;
-            } else {
-                divs.style.display = "none";
-            }
-
-            if (
-                geo.targetPoint != null &&
-                graph.model.getTerminal(cell, false) == null
-            ) {
-                xt.value = geo.targetPoint.x;
-                yt.value = geo.targetPoint.y;
-            } else {
-                divt.style.display = "none";
-            }
-        } else {
-            divs.style.display = "none";
-            divt.style.display = "none";
-        }
-    });
-
-    xsUpdate = this.addEdgeGeometryHandler(xs, function (geo, value) {
-        geo.sourcePoint.x = value;
-    });
-
-    ysUpdate = this.addEdgeGeometryHandler(ys, function (geo, value) {
-        geo.sourcePoint.y = value;
-    });
-
-    xtUpdate = this.addEdgeGeometryHandler(xt, function (geo, value) {
-        geo.targetPoint.x = value;
-    });
-
-    ytUpdate = this.addEdgeGeometryHandler(yt, function (geo, value) {
-        geo.targetPoint.y = value;
-    });
-
-    graph.getModel().addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            graph.getModel().removeListener(listener);
-        },
-    });
-    listener();
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-TextFormatPanel = function (format, editorUi, container) {
-    BaseFormatPanel.call(this, format, editorUi, container);
-    this.init();
-};
-
-mxUtils.extend(TextFormatPanel, BaseFormatPanel);
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-TextFormatPanel.prototype.init = function () {
-    this.container.style.borderBottom = "none";
-    this.addFont(this.container);
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-TextFormatPanel.prototype.addFont = function (container) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var ss = ui.getSelectionState();
-
-    var title = this.createTitle(mxResources.get("font"));
-    title.style.paddingLeft = "14px";
-    title.style.paddingTop = "10px";
-    title.style.paddingBottom = "6px";
-    container.appendChild(title);
-
-    var stylePanel = this.createPanel();
-    stylePanel.style.paddingTop = "2px";
-    stylePanel.style.paddingBottom = "2px";
-    stylePanel.style.position = "relative";
-    stylePanel.style.marginLeft = "-2px";
-    stylePanel.style.borderWidth = "0px";
-    stylePanel.className = "geToolbarContainer";
-
-    if (graph.cellEditor.isContentEditing()) {
-        var cssPanel = stylePanel.cloneNode();
-
-        var cssMenu = this.editorUi.toolbar.addMenu(
-            mxResources.get("style"),
-            mxResources.get("style"),
-            true,
-            "formatBlock",
-            cssPanel,
-            null,
-            true,
-        );
-        cssMenu.style.color = "rgb(112, 112, 112)";
-        cssMenu.style.whiteSpace = "nowrap";
-        cssMenu.style.overflow = "hidden";
-        cssMenu.style.margin = "0px";
-        this.addArrow(cssMenu);
-        cssMenu.style.width = "200px";
-        cssMenu.style.height = "15px";
-
-        var arrow = cssMenu.getElementsByTagName("div")[0];
-        arrow.style.cssFloat = "right";
-        container.appendChild(cssPanel);
-    }
-
-    container.appendChild(stylePanel);
-
-    var colorPanel = this.createPanel();
-    colorPanel.style.marginTop = "8px";
-    colorPanel.style.borderTop = "1px solid #c0c0c0";
-    colorPanel.style.paddingTop = "6px";
-    colorPanel.style.paddingBottom = "6px";
-
-    var fontMenu = this.editorUi.toolbar.addMenu(
-        "Helvetica",
-        mxResources.get("fontFamily"),
-        true,
-        "fontFamily",
-        stylePanel,
-        null,
-        true,
-    );
-    fontMenu.style.color = "rgb(112, 112, 112)";
-    fontMenu.style.whiteSpace = "nowrap";
-    fontMenu.style.overflow = "hidden";
-    fontMenu.style.margin = "0px";
-
-    this.addArrow(fontMenu);
-    fontMenu.style.width = "200px";
-    fontMenu.style.height = "15px";
-
-    var stylePanel2 = stylePanel.cloneNode(false);
-    stylePanel2.style.marginLeft = "-3px";
-    var fontStyleItems = this.editorUi.toolbar.addItems(
-        ["bold", "italic", "underline"],
-        stylePanel2,
-        true,
-    );
-    fontStyleItems[0].setAttribute(
-        "title",
-        mxResources.get("bold") +
-        " (" +
-        this.editorUi.actions.get("bold").shortcut +
-        ")",
-    );
-    fontStyleItems[1].setAttribute(
-        "title",
-        mxResources.get("italic") +
-        " (" +
-        this.editorUi.actions.get("italic").shortcut +
-        ")",
-    );
-    fontStyleItems[2].setAttribute(
-        "title",
-        mxResources.get("underline") +
-        " (" +
-        this.editorUi.actions.get("underline").shortcut +
-        ")",
-    );
-
-    var verticalItem = this.editorUi.toolbar.addItems(
-        ["vertical"],
-        stylePanel2,
-        true,
-    )[0];
-
-    container.appendChild(stylePanel2);
-
-    this.styleButtons(fontStyleItems);
-    this.styleButtons([verticalItem]);
-
-    var stylePanel3 = stylePanel.cloneNode(false);
-    stylePanel3.style.marginLeft = "-3px";
-    stylePanel3.style.paddingBottom = "0px";
-
-    // Helper function to return a wrapper function does not pass any arguments
-    var callFn = function (fn) {
-        return function () {
-            return fn();
-        };
-    };
-
-    var left = this.editorUi.toolbar.addButton(
-        "geSprite-left",
-        mxResources.get("left"),
-        graph.cellEditor.isContentEditing()
-            ? function (evt) {
-                graph.cellEditor.alignText(mxConstants.ALIGN_LEFT, evt);
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [mxConstants.STYLE_ALIGN],
-                        "values",
-                        [mxConstants.ALIGN_LEFT],
-                        "cells",
-                        ss.cells,
-                    ),
-                );
-            }
-            : callFn(
-                this.editorUi.menus.createStyleChangeFunction(
-                    [mxConstants.STYLE_ALIGN],
-                    [mxConstants.ALIGN_LEFT],
-                ),
-            ),
-        stylePanel3,
-    );
-    var center = this.editorUi.toolbar.addButton(
-        "geSprite-center",
-        mxResources.get("center"),
-        graph.cellEditor.isContentEditing()
-            ? function (evt) {
-                graph.cellEditor.alignText(mxConstants.ALIGN_CENTER, evt);
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [mxConstants.STYLE_ALIGN],
-                        "values",
-                        [mxConstants.ALIGN_CENTER],
-                        "cells",
-                        ss.cells,
-                    ),
-                );
-            }
-            : callFn(
-                this.editorUi.menus.createStyleChangeFunction(
-                    [mxConstants.STYLE_ALIGN],
-                    [mxConstants.ALIGN_CENTER],
-                ),
-            ),
-        stylePanel3,
-    );
-    var right = this.editorUi.toolbar.addButton(
-        "geSprite-right",
-        mxResources.get("right"),
-        graph.cellEditor.isContentEditing()
-            ? function (evt) {
-                graph.cellEditor.alignText(mxConstants.ALIGN_RIGHT, evt);
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [mxConstants.STYLE_ALIGN],
-                        "values",
-                        [mxConstants.ALIGN_RIGHT],
-                        "cells",
-                        ss.cells,
-                    ),
-                );
-            }
-            : callFn(
-                this.editorUi.menus.createStyleChangeFunction(
-                    [mxConstants.STYLE_ALIGN],
-                    [mxConstants.ALIGN_RIGHT],
-                ),
-            ),
-        stylePanel3,
-    );
-
-    this.styleButtons([left, center, right]);
-
-    // Quick hack for strikethrough
-    // TODO: Add translations and toggle state
-    if (graph.cellEditor.isContentEditing()) {
-        var strike = this.editorUi.toolbar.addButton(
-            "geSprite-removeformat",
-            mxResources.get("strikethrough"),
-            function () {
-                document.execCommand("strikeThrough", false, null);
-            },
-            stylePanel2,
-        );
-        this.styleButtons([strike]);
-
-        strike.firstChild.style.background =
-            "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMFYweiIvPjwvZGVmcz48Y2xpcFBhdGggaWQ9ImIiPjx1c2UgeGxpbms6aHJlZj0iI2EiIG92ZXJmbG93PSJ2aXNpYmxlIi8+PC9jbGlwUGF0aD48cGF0aCBjbGlwLXBhdGg9InVybCgjYikiIGZpbGw9IiMwMTAxMDEiIGQ9Ik03LjI0IDguNzVjLS4yNi0uNDgtLjM5LTEuMDMtLjM5LTEuNjcgMC0uNjEuMTMtMS4xNi40LTEuNjcuMjYtLjUuNjMtLjkzIDEuMTEtMS4yOS40OC0uMzUgMS4wNS0uNjMgMS43LS44My42Ni0uMTkgMS4zOS0uMjkgMi4xOC0uMjkuODEgMCAxLjU0LjExIDIuMjEuMzQuNjYuMjIgMS4yMy41NCAxLjY5Ljk0LjQ3LjQuODMuODggMS4wOCAxLjQzLjI1LjU1LjM4IDEuMTUuMzggMS44MWgtMy4wMWMwLS4zMS0uMDUtLjU5LS4xNS0uODUtLjA5LS4yNy0uMjQtLjQ5LS40NC0uNjgtLjItLjE5LS40NS0uMzMtLjc1LS40NC0uMy0uMS0uNjYtLjE2LTEuMDYtLjE2LS4zOSAwLS43NC4wNC0xLjAzLjEzLS4yOS4wOS0uNTMuMjEtLjcyLjM2LS4xOS4xNi0uMzQuMzQtLjQ0LjU1LS4xLjIxLS4xNS40My0uMTUuNjYgMCAuNDguMjUuODguNzQgMS4yMS4zOC4yNS43Ny40OCAxLjQxLjdINy4zOWMtLjA1LS4wOC0uMTEtLjE3LS4xNS0uMjV6TTIxIDEydi0ySDN2Mmg5LjYyYy4xOC4wNy40LjE0LjU1LjIuMzcuMTcuNjYuMzQuODcuNTEuMjEuMTcuMzUuMzYuNDMuNTcuMDcuMi4xMS40My4xMS42OSAwIC4yMy0uMDUuNDUtLjE0LjY2LS4wOS4yLS4yMy4zOC0uNDIuNTMtLjE5LjE1LS40Mi4yNi0uNzEuMzUtLjI5LjA4LS42My4xMy0xLjAxLjEzLS40MyAwLS44My0uMDQtMS4xOC0uMTNzLS42Ni0uMjMtLjkxLS40MmMtLjI1LS4xOS0uNDUtLjQ0LS41OS0uNzUtLjE0LS4zMS0uMjUtLjc2LS4yNS0xLjIxSDYuNGMwIC41NS4wOCAxLjEzLjI0IDEuNTguMTYuNDUuMzcuODUuNjUgMS4yMS4yOC4zNS42LjY2Ljk4LjkyLjM3LjI2Ljc4LjQ4IDEuMjIuNjUuNDQuMTcuOS4zIDEuMzguMzkuNDguMDguOTYuMTMgMS40NC4xMy44IDAgMS41My0uMDkgMi4xOC0uMjhzMS4yMS0uNDUgMS42Ny0uNzljLjQ2LS4zNC44Mi0uNzcgMS4wNy0xLjI3cy4zOC0xLjA3LjM4LTEuNzFjMC0uNi0uMS0xLjE0LS4zMS0xLjYxLS4wNS0uMTEtLjExLS4yMy0uMTctLjMzSDIxeiIvPjwvc3ZnPg==)";
-        strike.firstChild.style.backgroundPosition = "2px 2px";
-        strike.firstChild.style.backgroundSize = "18px 18px";
-
-        this.styleButtons([strike]);
-    }
-
-    var top = this.editorUi.toolbar.addButton(
-        "geSprite-top",
-        mxResources.get("top"),
-        callFn(
-            this.editorUi.menus.createStyleChangeFunction(
-                [mxConstants.STYLE_VERTICAL_ALIGN],
-                [mxConstants.ALIGN_TOP],
-            ),
-        ),
-        stylePanel3,
-    );
-    var middle = this.editorUi.toolbar.addButton(
-        "geSprite-middle",
-        mxResources.get("middle"),
-        callFn(
-            this.editorUi.menus.createStyleChangeFunction(
-                [mxConstants.STYLE_VERTICAL_ALIGN],
-                [mxConstants.ALIGN_MIDDLE],
-            ),
-        ),
-        stylePanel3,
-    );
-    var bottom = this.editorUi.toolbar.addButton(
-        "geSprite-bottom",
-        mxResources.get("bottom"),
-        callFn(
-            this.editorUi.menus.createStyleChangeFunction(
-                [mxConstants.STYLE_VERTICAL_ALIGN],
-                [mxConstants.ALIGN_BOTTOM],
-            ),
-        ),
-        stylePanel3,
-    );
-
-    this.styleButtons([top, middle, bottom]);
-
-    container.appendChild(stylePanel3);
-
-    // Hack for updating UI state below based on current text selection
-    // currentTable is the current selected DOM table updated below
-    var sub, sup, full, tableWrapper, currentTable, tableCell, tableRow;
-
-    if (graph.cellEditor.isContentEditing()) {
-        top.style.display = "none";
-        middle.style.display = "none";
-        bottom.style.display = "none";
-        verticalItem.style.display = "none";
-
-        full = this.editorUi.toolbar.addButton(
-            "geSprite-justifyfull",
-            mxResources.get("block"),
-            function () {
-                if (full.style.opacity == 1) {
-                    document.execCommand("justifyfull", false, null);
-                }
-            },
-            stylePanel3,
-        );
-        full.style.marginRight = "9px";
-        full.style.opacity = 1;
-
-        this.styleButtons([
-            full,
-            (sub = this.editorUi.toolbar.addButton(
-                "geSprite-subscript",
-                mxResources.get("subscript") + " (" + Editor.ctrlKey + "+,)",
-                function () {
-                    document.execCommand("subscript", false, null);
-                },
-                stylePanel3,
-            )),
-            (sup = this.editorUi.toolbar.addButton(
-                "geSprite-superscript",
-                mxResources.get("superscript") + " (" + Editor.ctrlKey + "+.)",
-                function () {
-                    document.execCommand("superscript", false, null);
-                },
-                stylePanel3,
-            )),
-        ]);
-        sub.style.marginLeft = "10px";
-
-        var tmp = stylePanel3.cloneNode(false);
-        tmp.style.paddingTop = "4px";
-        var btns = [
-            this.editorUi.toolbar.addButton(
-                "geSprite-orderedlist",
-                mxResources.get("numberedList"),
-                function () {
-                    document.execCommand("insertorderedlist", false, null);
-                },
-                tmp,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-unorderedlist",
-                mxResources.get("bulletedList"),
-                function () {
-                    document.execCommand("insertunorderedlist", false, null);
-                },
-                tmp,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-outdent",
-                mxResources.get("decreaseIndent"),
-                function () {
-                    document.execCommand("outdent", false, null);
-                },
-                tmp,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-indent",
-                mxResources.get("increaseIndent"),
-                function () {
-                    document.execCommand("indent", false, null);
-                },
-                tmp,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-removeformat",
-                mxResources.get("removeFormat"),
-                function () {
-                    document.execCommand("removeformat", false, null);
-                },
-                tmp,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-code",
-                mxResources.get("html"),
-                function () {
-                    graph.cellEditor.toggleViewMode();
-                },
-                tmp,
-            ),
-        ];
-        this.styleButtons(btns);
-        btns[btns.length - 2].style.marginLeft = "10px";
-
-        container.appendChild(tmp);
-    } else {
-        fontStyleItems[2].style.marginRight = "12px";
-        right.style.marginRight = "12px";
-    }
-
-    // Label position
-    var stylePanel4 = stylePanel.cloneNode(false);
-    stylePanel4.style.marginLeft = "0px";
-    stylePanel4.style.paddingTop = "8px";
-    stylePanel4.style.paddingBottom = "4px";
-    stylePanel4.style.fontWeight = "normal";
-
-    mxUtils.write(stylePanel4, mxResources.get("position"));
-
-    // Adds label position options
-    var positionSelect = document.createElement("select");
-    positionSelect.style.position = "absolute";
-    positionSelect.style.left = "126px";
-    positionSelect.style.width = "98px";
-    positionSelect.style.border = "1px solid rgb(160, 160, 160)";
-    positionSelect.style.borderRadius = "4px";
-    positionSelect.style.marginTop = "-2px";
-
-    var directions = [
-        "topLeft",
-        "top",
-        "topRight",
-        "left",
-        "center",
-        "right",
-        "bottomLeft",
-        "bottom",
-        "bottomRight",
-    ];
-    var lset = {
-        topLeft: [
-            mxConstants.ALIGN_LEFT,
-            mxConstants.ALIGN_TOP,
-            mxConstants.ALIGN_RIGHT,
-            mxConstants.ALIGN_BOTTOM,
-        ],
-        top: [
-            mxConstants.ALIGN_CENTER,
-            mxConstants.ALIGN_TOP,
-            mxConstants.ALIGN_CENTER,
-            mxConstants.ALIGN_BOTTOM,
-        ],
-        topRight: [
-            mxConstants.ALIGN_RIGHT,
-            mxConstants.ALIGN_TOP,
-            mxConstants.ALIGN_LEFT,
-            mxConstants.ALIGN_BOTTOM,
-        ],
-        left: [
-            mxConstants.ALIGN_LEFT,
-            mxConstants.ALIGN_MIDDLE,
-            mxConstants.ALIGN_RIGHT,
-            mxConstants.ALIGN_MIDDLE,
-        ],
-        center: [
-            mxConstants.ALIGN_CENTER,
-            mxConstants.ALIGN_MIDDLE,
-            mxConstants.ALIGN_CENTER,
-            mxConstants.ALIGN_MIDDLE,
-        ],
-        right: [
-            mxConstants.ALIGN_RIGHT,
-            mxConstants.ALIGN_MIDDLE,
-            mxConstants.ALIGN_LEFT,
-            mxConstants.ALIGN_MIDDLE,
-        ],
-        bottomLeft: [
-            mxConstants.ALIGN_LEFT,
-            mxConstants.ALIGN_BOTTOM,
-            mxConstants.ALIGN_RIGHT,
-            mxConstants.ALIGN_TOP,
-        ],
-        bottom: [
-            mxConstants.ALIGN_CENTER,
-            mxConstants.ALIGN_BOTTOM,
-            mxConstants.ALIGN_CENTER,
-            mxConstants.ALIGN_TOP,
-        ],
-        bottomRight: [
-            mxConstants.ALIGN_RIGHT,
-            mxConstants.ALIGN_BOTTOM,
-            mxConstants.ALIGN_LEFT,
-            mxConstants.ALIGN_TOP,
-        ],
-    };
-
-    for (var i = 0; i < directions.length; i++) {
-        var positionOption = document.createElement("option");
-        positionOption.setAttribute("value", directions[i]);
-        mxUtils.write(positionOption, mxResources.get(directions[i]));
-        positionSelect.appendChild(positionOption);
-    }
-
-    stylePanel4.appendChild(positionSelect);
-
-    // Writing direction
-    var stylePanel5 = stylePanel.cloneNode(false);
-    stylePanel5.style.marginLeft = "0px";
-    stylePanel5.style.paddingTop = "4px";
-    stylePanel5.style.paddingBottom = "4px";
-    stylePanel5.style.fontWeight = "normal";
-
-    mxUtils.write(stylePanel5, mxResources.get("writingDirection"));
-
-    // Adds writing direction options
-    // LATER: Handle reselect of same option in all selects (change event
-    // is not fired for same option so have opened state on click) and
-    // handle multiple different styles for current selection
-    var dirSelect = document.createElement("select");
-    dirSelect.style.position = "absolute";
-    dirSelect.style.border = "1px solid rgb(160, 160, 160)";
-    dirSelect.style.left = "126px";
-    dirSelect.style.width = "98px";
-    dirSelect.style.borderRadius = "4px";
-    dirSelect.style.marginTop = "-2px";
-
-    // NOTE: For automatic we use the value null since automatic
-    // requires the text to be non formatted and non-wrapped
-    var dirs = ["automatic", "leftToRight", "rightToLeft"];
-    var dirSet = {
-        automatic: null,
-        leftToRight: mxConstants.TEXT_DIRECTION_LTR,
-        rightToLeft: mxConstants.TEXT_DIRECTION_RTL,
-    };
-
-    for (var i = 0; i < dirs.length; i++) {
-        var dirOption = document.createElement("option");
-        dirOption.setAttribute("value", dirs[i]);
-        mxUtils.write(dirOption, mxResources.get(dirs[i]));
-        dirSelect.appendChild(dirOption);
-    }
-
-    stylePanel5.appendChild(dirSelect);
-
-    if (!graph.isEditing()) {
-        container.appendChild(stylePanel4);
-
-        mxEvent.addListener(positionSelect, "change", function (evt) {
-            graph.getModel().beginUpdate();
-            try {
-                var vals = lset[positionSelect.value];
-
-                if (vals != null) {
-                    graph.setCellStyles(
-                        mxConstants.STYLE_LABEL_POSITION,
-                        vals[0],
-                        ss.cells,
-                    );
-                    graph.setCellStyles(
-                        mxConstants.STYLE_VERTICAL_LABEL_POSITION,
-                        vals[1],
-                        ss.cells,
-                    );
-                    graph.setCellStyles(mxConstants.STYLE_ALIGN, vals[2], ss.cells);
-                    graph.setCellStyles(
-                        mxConstants.STYLE_VERTICAL_ALIGN,
-                        vals[3],
-                        ss.cells,
-                    );
-                }
-            } finally {
-                graph.getModel().endUpdate();
-            }
-
-            mxEvent.consume(evt);
-        });
-
-        // LATER: Update dir in text editor while editing and update style with label
-        // NOTE: The tricky part is handling and passing on the auto value
-        container.appendChild(stylePanel5);
-
-        mxEvent.addListener(dirSelect, "change", function (evt) {
-            graph.setCellStyles(
-                mxConstants.STYLE_TEXT_DIRECTION,
-                dirSet[dirSelect.value],
-                ss.cells,
-            );
-            mxEvent.consume(evt);
-        });
-    }
-
-    // Fontsize
-    var input = document.createElement("input");
-    input.style.position = "absolute";
-    input.style.border = "1px solid rgb(160, 160, 160)";
-    input.style.textAlign = "right";
-    input.style.marginTop = "4px";
-    input.style.left = "161px";
-    input.style.width = "53px";
-    input.style.borderRadius = "4px";
-    input.style.height = "23px";
-    input.style.boxSizing = "border-box";
-    stylePanel2.appendChild(input);
-
-    // Workaround for font size 4 if no text is selected is update font size below
-    // after first character was entered (as the font element is lazy created)
-    var pendingFontSize = null;
-
-    var inputUpdate = this.installInputHandler(
-        input,
-        mxConstants.STYLE_FONTSIZE,
-        Menus.prototype.defaultFontSize,
-        1,
-        999,
-        " pt",
-        function (fontSize) {
-            // IE does not support containsNode
-            // KNOWN: Fixes font size issues but bypasses undo
-            if (window.getSelection && !mxClient.IS_IE && !mxClient.IS_IE11) {
-                var selection = window.getSelection();
-                var container =
-                    selection.rangeCount > 0
-                        ? selection.getRangeAt(0).commonAncestorContainer
-                        : graph.cellEditor.textarea;
-
-                function updateSize(elt, ignoreContains) {
-                    if (
-                        graph.cellEditor.textarea != null &&
-                        elt != graph.cellEditor.textarea &&
-                        graph.cellEditor.textarea.contains(elt) &&
-                        (ignoreContains || selection.containsNode(elt, true))
-                    ) {
-                        if (elt.nodeName == "FONT") {
-                            elt.removeAttribute("size");
-                            elt.style.fontSize = fontSize + "px";
-                        } else {
-                            var css = mxUtils.getCurrentStyle(elt);
-
-                            if (css.fontSize != fontSize + "px") {
-                                if (
-                                    mxUtils.getCurrentStyle(elt.parentNode).fontSize !=
-                                    fontSize + "px"
-                                ) {
-                                    elt.style.fontSize = fontSize + "px";
-                                } else {
-                                    elt.style.fontSize = "";
-                                }
-                            }
-                        }
-                    }
-
-                    ui.fireEvent(
-                        new mxEventObject(
-                            "styleChanged",
-                            "keys",
-                            [mxConstants.STYLE_FONTSIZE],
-                            "values",
-                            [fontSize],
-                            "cells",
-                            ss.cells,
-                        ),
-                    );
-                }
-
-                // Wraps text node or mixed selection with leading text in a font element
-                if (
-                    container == graph.cellEditor.textarea ||
-                    container.nodeType != mxConstants.NODETYPE_ELEMENT
-                ) {
-                    document.execCommand("fontSize", false, "1");
-                }
-
-                if (container != graph.cellEditor.textarea) {
-                    container = container.parentNode;
-                }
-
-                if (
-                    container != null &&
-                    container.nodeType == mxConstants.NODETYPE_ELEMENT
-                ) {
-                    var elts = container.getElementsByTagName("*");
-                    updateSize(container);
-
-                    for (var i = 0; i < elts.length; i++) {
-                        updateSize(elts[i]);
-                    }
-                }
-
-                input.value = fontSize + " pt";
-            } else if (window.getSelection || document.selection) {
-                // Checks selection
-                var par = null;
-
-                if (document.selection) {
-                    par = document.selection.createRange().parentElement();
-                } else {
-                    var selection = window.getSelection();
-
-                    if (selection.rangeCount > 0) {
-                        par = selection.getRangeAt(0).commonAncestorContainer;
-                    }
-                }
-
-                // Node.contains does not work for text nodes in IE11
-                function isOrContains(container, node) {
-                    while (node != null) {
-                        if (node === container) {
-                            return true;
-                        }
-
-                        node = node.parentNode;
-                    }
-
-                    return false;
-                }
-
-                if (par != null && isOrContains(graph.cellEditor.textarea, par)) {
-                    pendingFontSize = fontSize;
-
-                    // Workaround for can't set font size in px is to change font size afterwards
-                    document.execCommand("fontSize", false, "4");
-                    var elts = graph.cellEditor.textarea.getElementsByTagName("font");
-
-                    for (var i = 0; i < elts.length; i++) {
-                        if (elts[i].getAttribute("size") == "4") {
-                            elts[i].removeAttribute("size");
-                            elts[i].style.fontSize = pendingFontSize + "px";
-
-                            // Overrides fontSize in input with the one just assigned as a workaround
-                            // for potential fontSize values of parent elements that don't match
-                            window.setTimeout(function () {
-                                input.value = pendingFontSize + " pt";
-                                pendingFontSize = null;
-                            }, 0);
-
-                            break;
-                        }
-                    }
-                }
-            }
-        },
-        true,
-    );
-
-    var stepper = this.createStepper(
-        input,
-        inputUpdate,
-        1,
-        10,
-        true,
-        Menus.prototype.defaultFontSize,
-    );
-    stepper.style.display = input.style.display;
-    stepper.style.marginTop = "4px";
-    stepper.style.left = "214px";
-
-    stylePanel2.appendChild(stepper);
-
-    var arrow = fontMenu.getElementsByTagName("div")[0];
-    arrow.style.cssFloat = "right";
-
-    var bgColorApply = null;
-    var currentBgColor = graph.shapeBackgroundColor;
-
-    var fontColorApply = null;
-    var currentFontColor = graph.shapeForegroundColor;
-
-    var bgPanel = graph.cellEditor.isContentEditing()
-        ? this.createColorOption(
-            mxResources.get("backgroundColor"),
-            function () {
-                return currentBgColor;
-            },
-            function (color) {
-                document.execCommand(
-                    "backcolor",
-                    false,
-                    color != mxConstants.NONE ? color : "transparent",
-                );
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        [mxConstants.STYLE_LABEL_BACKGROUNDCOLOR],
-                        "values",
-                        [color],
-                        "cells",
-                        ss.cells,
-                    ),
-                );
-            },
-            graph.shapeBackgroundColor,
-            {
-                install: function (apply) {
-                    bgColorApply = apply;
-                },
-                destroy: function () {
-                    bgColorApply = null;
-                },
-            },
-            null,
-            true,
-        )
-        : this.createCellColorOption(
-            mxResources.get("backgroundColor"),
-            mxConstants.STYLE_LABEL_BACKGROUNDCOLOR,
-            "default",
-            null,
-            function (color) {
-                graph.updateLabelElements(ss.cells, function (elt) {
-                    elt.style.backgroundColor = null;
-                });
-            },
-            graph.shapeBackgroundColor,
-        );
-    bgPanel.style.fontWeight = "bold";
-
-    var borderPanel = this.createCellColorOption(
-        mxResources.get("borderColor"),
-        mxConstants.STYLE_LABEL_BORDERCOLOR,
-        "default",
-        null,
-        null,
-        graph.shapeForegroundColor,
-    );
-    borderPanel.style.fontWeight = "bold";
-
-    var defs =
-        ss.vertices.length >= 1
-            ? graph.stylesheet.getDefaultVertexStyle()
-            : graph.stylesheet.getDefaultEdgeStyle();
-
-    var panel = graph.cellEditor.isContentEditing()
-        ? this.createColorOption(
-            mxResources.get("fontColor"),
-            function () {
-                return currentFontColor;
-            },
-            function (color) {
-                if (mxClient.IS_FF) {
-                    // Workaround for Firefox that adds the font element around
-                    // anchor elements which ignore inherited colors is to move
-                    // the font element inside anchor elements
-                    var tmp = graph.cellEditor.textarea.getElementsByTagName("font");
-                    var oldFonts = [];
-
-                    for (var i = 0; i < tmp.length; i++) {
-                        oldFonts.push({
-                            node: tmp[i],
-                            color: tmp[i].getAttribute("color"),
-                        });
-                    }
-
-                    document.execCommand(
-                        "forecolor",
-                        false,
-                        color != mxConstants.NONE ? color : "transparent",
-                    );
-                    ui.fireEvent(
-                        new mxEventObject(
-                            "styleChanged",
-                            "keys",
-                            [mxConstants.STYLE_FONTCOLOR],
-                            "values",
-                            [color],
-                            "cells",
-                            ss.cells,
-                        ),
-                    );
-
-                    // Finds the new or changed font element
-                    var newFonts =
-                        graph.cellEditor.textarea.getElementsByTagName("font");
-
-                    for (var i = 0; i < newFonts.length; i++) {
-                        if (
-                            i >= oldFonts.length ||
-                            newFonts[i] != oldFonts[i].node ||
-                            (newFonts[i] == oldFonts[i].node &&
-                                newFonts[i].getAttribute("color") != oldFonts[i].color)
-                        ) {
-                            var child = newFonts[i].firstChild;
-
-                            // Moves the font element to inside the anchor element and adopts all children
-                            if (
-                                child != null &&
-                                child.nodeName == "A" &&
-                                child.nextSibling == null &&
-                                child.firstChild != null
-                            ) {
-                                var parent = newFonts[i].parentNode;
-                                parent.insertBefore(child, newFonts[i]);
-                                var tmp = child.firstChild;
-
-                                while (tmp != null) {
-                                    var next = tmp.nextSibling;
-                                    newFonts[i].appendChild(tmp);
-                                    tmp = next;
-                                }
-
-                                child.appendChild(newFonts[i]);
-                            }
-
-                            break;
-                        }
-                    }
-                } else {
-                    document.execCommand(
-                        "forecolor",
-                        false,
-                        color != mxConstants.NONE ? color : "transparent",
-                    );
-                    ui.fireEvent(
-                        new mxEventObject(
-                            "styleChanged",
-                            "keys",
-                            [mxConstants.STYLE_FONTCOLOR],
-                            "values",
-                            [color],
-                            "cells",
-                            ss.cells,
-                        ),
-                    );
-                }
-            },
-            defs[mxConstants.STYLE_FONTCOLOR] != null
-                ? defs[mxConstants.STYLE_FONTCOLOR]
-                : graph.shapeForegroundColor,
-            {
-                install: function (apply) {
-                    fontColorApply = apply;
-                },
-                destroy: function () {
-                    fontColorApply = null;
-                },
-            },
-            null,
-            true,
-        )
-        : this.createCellColorOption(
-            mxResources.get("fontColor"),
-            mxConstants.STYLE_FONTCOLOR,
-            "default",
-            function (color) {
-                if (color == mxConstants.NONE) {
-                    bgPanel.style.display = "none";
-                } else {
-                    bgPanel.style.display = "";
-                }
-
-                borderPanel.style.display = bgPanel.style.display;
-            },
-            function (color) {
-                if (color == mxConstants.NONE) {
-                    graph.setCellStyles(mxConstants.STYLE_NOLABEL, "1", ss.cells);
-                } else {
-                    graph.setCellStyles(mxConstants.STYLE_NOLABEL, null, ss.cells);
-                }
-
-                graph.setCellStyles(mxConstants.STYLE_FONTCOLOR, color, ss.cells);
-
-                graph.updateLabelElements(ss.cells, function (elt) {
-                    elt.removeAttribute("color");
-                    elt.style.color = null;
-                });
-            },
-            graph.shapeForegroundColor,
-        );
-    panel.style.fontWeight = "bold";
-
-    colorPanel.appendChild(panel);
-    colorPanel.appendChild(bgPanel);
-
-    if (!graph.cellEditor.isContentEditing()) {
-        colorPanel.appendChild(borderPanel);
-    }
-
-    container.appendChild(colorPanel);
-
-    var extraPanel = this.createPanel();
-    extraPanel.style.paddingTop = "2px";
-    extraPanel.style.paddingBottom = "4px";
-
-    var wwCells = graph.filterSelectionCells(
-        mxUtils.bind(this, function (cell) {
-            var state = graph.view.getState(cell);
-
-            return (
-                state == null ||
-                graph.isAutoSizeState(state) ||
-                graph.getModel().isEdge(cell) ||
-                (!graph.isTableRow(cell) &&
-                    !graph.isTableCell(cell) &&
-                    !graph.isCellResizable(cell))
-            );
-        }),
-    );
-
-    var wwOpt = this.createCellOption(
-        mxResources.get("wordWrap"),
-        mxConstants.STYLE_WHITE_SPACE,
-        null,
-        "wrap",
-        "null",
-        null,
-        null,
-        true,
-        wwCells,
-    );
-    wwOpt.style.fontWeight = "bold";
-
-    // Word wrap in edge labels only supported via labelWidth style
-    if (wwCells.length > 0) {
-        extraPanel.appendChild(wwOpt);
-    }
-
-    // Delegates switch of style to formattedText action as it also convertes newlines
-    var htmlOpt = this.createCellOption(
-        mxResources.get("formattedText"),
-        "html",
-        0,
-        null,
-        null,
-        null,
-        ui.actions.get("formattedText"),
-    );
-    htmlOpt.style.fontWeight = "bold";
-    extraPanel.appendChild(htmlOpt);
-
-    var spacingPanel = this.createPanel();
-    spacingPanel.style.paddingTop = "10px";
-    spacingPanel.style.paddingBottom = "28px";
-    spacingPanel.style.fontWeight = "normal";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.width = "70px";
-    span.style.marginTop = "0px";
-    span.style.fontWeight = "bold";
-    mxUtils.write(span, mxResources.get("spacing"));
-    spacingPanel.appendChild(span);
-
-    var topUpdate, globalUpdate, leftUpdate, bottomUpdate, rightUpdate;
-    var topSpacing = this.addUnitInput(spacingPanel, "pt", 87, 52, function () {
-        topUpdate.apply(this, arguments);
-    });
-    var globalSpacing = this.addUnitInput(
-        spacingPanel,
-        "pt",
-        16,
-        52,
-        function () {
-            globalUpdate.apply(this, arguments);
-        },
-    );
-
-    mxUtils.br(spacingPanel);
-    this.addLabel(spacingPanel, mxResources.get("top"), 87);
-    this.addLabel(spacingPanel, mxResources.get("global"), 16);
-    mxUtils.br(spacingPanel);
-    mxUtils.br(spacingPanel);
-
-    var leftSpacing = this.addUnitInput(spacingPanel, "pt", 158, 52, function () {
-        leftUpdate.apply(this, arguments);
-    });
-    var bottomSpacing = this.addUnitInput(
-        spacingPanel,
-        "pt",
-        87,
-        52,
-        function () {
-            bottomUpdate.apply(this, arguments);
-        },
-    );
-    var rightSpacing = this.addUnitInput(spacingPanel, "pt", 16, 52, function () {
-        rightUpdate.apply(this, arguments);
-    });
-
-    mxUtils.br(spacingPanel);
-    this.addLabel(spacingPanel, mxResources.get("left"), 158);
-    this.addLabel(spacingPanel, mxResources.get("bottom"), 87);
-    this.addLabel(spacingPanel, mxResources.get("right"), 16);
-
-    if (!graph.cellEditor.isContentEditing()) {
-        container.appendChild(extraPanel);
-        container.appendChild(
-            this.createRelativeOption(
-                mxResources.get("opacity"),
-                mxConstants.STYLE_TEXT_OPACITY,
-            ),
-        );
-        container.appendChild(spacingPanel);
-    } else {
-        var selState = null;
-        var lineHeightInput = null;
-
-        container.appendChild(
-            this.createRelativeOption(
-                mxResources.get("lineheight"),
-                null,
-                null,
-                function (input) {
-                    var value = input.value == "" ? 120 : parseInt(input.value);
-                    value = Math.max(0, isNaN(value) ? 120 : value);
-
-                    if (selState != null) {
-                        graph.cellEditor.restoreSelection(selState);
-                        selState = null;
-                    }
-
-                    var selectedElement = graph.getSelectedElement();
-                    var node = selectedElement;
-
-                    while (
-                        node != null &&
-                        node.nodeType != mxConstants.NODETYPE_ELEMENT
-                    ) {
-                        node = node.parentNode;
-                    }
-
-                    if (
-                        node != null &&
-                        node == graph.cellEditor.textarea &&
-                        graph.cellEditor.textarea.firstChild != null
-                    ) {
-                        if (graph.cellEditor.textarea.firstChild.nodeName != "P") {
-                            graph.cellEditor.textarea.innerHTML =
-                                "<p>" + graph.cellEditor.textarea.innerHTML + "</p>";
-                        }
-
-                        node = graph.cellEditor.textarea.firstChild;
-                    }
-
-                    if (
-                        node != null &&
-                        graph.cellEditor.textarea != null &&
-                        node != graph.cellEditor.textarea &&
-                        graph.cellEditor.textarea.contains(node)
-                    ) {
-                        node.style.lineHeight = value / 100;
-                    }
-
-                    input.value = value + " %";
-                },
-                function (input) {
-                    // Used in CSS handler to update current value
-                    lineHeightInput = input;
-
-                    // KNOWN: Arrow up/down clear selection text in quirks/IE 8
-                    // Text size via arrow button limits to 16 in IE11. Why?
-                    mxEvent.addListener(input, "mousedown", function () {
-                        if (document.activeElement == graph.cellEditor.textarea) {
-                            selState = graph.cellEditor.saveSelection();
-                        }
-                    });
-
-                    mxEvent.addListener(input, "touchstart", function () {
-                        if (document.activeElement == graph.cellEditor.textarea) {
-                            selState = graph.cellEditor.saveSelection();
-                        }
-                    });
-
-                    input.value = "120 %";
-                },
-            ),
-        );
-
-        var insertPanel = stylePanel.cloneNode(false);
-        insertPanel.style.paddingLeft = "0px";
-        var insertBtns = this.editorUi.toolbar.addItems(
-            ["link", "image"],
-            insertPanel,
-            true,
-        );
-
-        var btns = [
-            this.editorUi.toolbar.addButton(
-                "geSprite-horizontalrule",
-                mxResources.get("insertHorizontalRule"),
-                function () {
-                    document.execCommand("inserthorizontalrule", false);
-                },
-                insertPanel,
-            ),
-            this.editorUi.toolbar.addMenuFunctionInContainer(
-                insertPanel,
-                "geSprite-table",
-                mxResources.get("table"),
-                false,
-                mxUtils.bind(this, function (menu) {
-                    this.editorUi.menus.addInsertTableItem(menu, null, null, false);
-                }),
-            ),
-        ];
-        this.styleButtons(insertBtns);
-        this.styleButtons(btns);
-
-        var wrapper2 = this.createPanel();
-        wrapper2.style.paddingTop = "10px";
-        wrapper2.style.paddingBottom = "10px";
-        wrapper2.appendChild(this.createTitle(mxResources.get("insert")));
-        wrapper2.appendChild(insertPanel);
-        container.appendChild(wrapper2);
-
-        var tablePanel = stylePanel.cloneNode(false);
-        tablePanel.style.paddingLeft = "0px";
-
-        var btns = [
-            this.editorUi.toolbar.addButton(
-                "geSprite-insertcolumnbefore",
-                mxResources.get("insertColumnBefore"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (currentTable != null) {
-                            graph.insertColumn(
-                                currentTable,
-                                tableCell != null ? tableCell.cellIndex : 0,
-                            );
-                        }
-                    } catch (e) {
-                        this.editorUi.handleError(e);
-                    }
-                }),
-                tablePanel,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-insertcolumnafter",
-                mxResources.get("insertColumnAfter"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (currentTable != null) {
-                            graph.insertColumn(
-                                currentTable,
-                                tableCell != null ? tableCell.cellIndex + 1 : -1,
-                            );
-                        }
-                    } catch (e) {
-                        this.editorUi.handleError(e);
-                    }
-                }),
-                tablePanel,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-deletecolumn",
-                mxResources.get("deleteColumn"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (currentTable != null && tableCell != null) {
-                            graph.deleteColumn(currentTable, tableCell.cellIndex);
-                        }
-                    } catch (e) {
-                        this.editorUi.handleError(e);
-                    }
-                }),
-                tablePanel,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-insertrowbefore",
-                mxResources.get("insertRowBefore"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (currentTable != null && tableRow != null) {
-                            graph.insertRow(currentTable, tableRow.sectionRowIndex);
-                        }
-                    } catch (e) {
-                        this.editorUi.handleError(e);
-                    }
-                }),
-                tablePanel,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-insertrowafter",
-                mxResources.get("insertRowAfter"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (currentTable != null && tableRow != null) {
-                            graph.insertRow(currentTable, tableRow.sectionRowIndex + 1);
-                        }
-                    } catch (e) {
-                        this.editorUi.handleError(e);
-                    }
-                }),
-                tablePanel,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-deleterow",
-                mxResources.get("deleteRow"),
-                mxUtils.bind(this, function () {
-                    try {
-                        if (currentTable != null && tableRow != null) {
-                            graph.deleteRow(currentTable, tableRow.sectionRowIndex);
-                        }
-                    } catch (e) {
-                        this.editorUi.handleError(e);
-                    }
-                }),
-                tablePanel,
-            ),
-        ];
-        this.styleButtons(btns);
-        btns[2].style.marginRight = "10px";
-
-        var wrapper3 = this.createPanel();
-        wrapper3.style.paddingTop = "10px";
-        wrapper3.style.paddingBottom = "10px";
-        wrapper3.appendChild(this.createTitle(mxResources.get("table")));
-        wrapper3.appendChild(tablePanel);
-
-        var tablePanel2 = stylePanel.cloneNode(false);
-        tablePanel2.style.paddingLeft = "0px";
-
-        var btns = [
-            this.editorUi.toolbar.addButton(
-                "geSprite-strokecolor",
-                mxResources.get("borderColor"),
-                mxUtils.bind(this, function (evt) {
-                    if (currentTable != null) {
-                        // Converts rgb(r,g,b) values
-                        var color = currentTable.style.borderColor.replace(
-                            /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
-                            function ($0, $1, $2, $3) {
-                                return (
-                                    "#" +
-                                    ("0" + Number($1).toString(16)).substr(-2) +
-                                    ("0" + Number($2).toString(16)).substr(-2) +
-                                    ("0" + Number($3).toString(16)).substr(-2)
-                                );
-                            },
-                        );
-                        this.editorUi.pickColor(color, function (newColor) {
-                            var targetElt =
-                                tableCell != null && (evt == null || !mxEvent.isShiftDown(evt))
-                                    ? tableCell
-                                    : currentTable;
-
-                            graph.processElements(targetElt, function (elt) {
-                                elt.style.border = null;
-                            });
-
-                            if (newColor == null || newColor == mxConstants.NONE) {
-                                targetElt.removeAttribute("border");
-                                targetElt.style.border = "";
-                                targetElt.style.borderCollapse = "";
-                            } else {
-                                targetElt.setAttribute("border", "1");
-                                targetElt.style.border = "1px solid " + newColor;
-                                targetElt.style.borderCollapse = "collapse";
-                            }
-                        });
-                    }
-                }),
-                tablePanel2,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-fillcolor",
-                mxResources.get("backgroundColor"),
-                mxUtils.bind(this, function (evt) {
-                    // Converts rgb(r,g,b) values
-                    if (currentTable != null) {
-                        var color = currentTable.style.backgroundColor.replace(
-                            /\brgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/g,
-                            function ($0, $1, $2, $3) {
-                                return (
-                                    "#" +
-                                    ("0" + Number($1).toString(16)).substr(-2) +
-                                    ("0" + Number($2).toString(16)).substr(-2) +
-                                    ("0" + Number($3).toString(16)).substr(-2)
-                                );
-                            },
-                        );
-                        this.editorUi.pickColor(color, function (newColor) {
-                            var targetElt =
-                                tableCell != null && (evt == null || !mxEvent.isShiftDown(evt))
-                                    ? tableCell
-                                    : currentTable;
-
-                            graph.processElements(targetElt, function (elt) {
-                                elt.style.backgroundColor = null;
-                            });
-
-                            if (newColor == null || newColor == mxConstants.NONE) {
-                                targetElt.style.backgroundColor = "";
-                            } else {
-                                targetElt.style.backgroundColor = newColor;
-                            }
-                        });
-                    }
-                }),
-                tablePanel2,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-fit",
-                mxResources.get("spacing"),
-                function () {
-                    if (currentTable != null) {
-                        var value = currentTable.getAttribute("cellPadding") || 0;
-
-                        var dlg = new FilenameDialog(
-                            ui,
-                            value,
-                            mxResources.get("apply"),
-                            mxUtils.bind(this, function (newValue) {
-                                if (newValue != null && newValue.length > 0) {
-                                    currentTable.setAttribute("cellPadding", newValue);
-                                } else {
-                                    currentTable.removeAttribute("cellPadding");
-                                }
-                            }),
-                            mxResources.get("spacing"),
-                        );
-                        ui.showDialog(dlg.container, 300, 80, true, true);
-                        dlg.init();
-                    }
-                },
-                tablePanel2,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-left",
-                mxResources.get("left"),
-                function () {
-                    if (currentTable != null) {
-                        currentTable.setAttribute("align", "left");
-                    }
-                },
-                tablePanel2,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-center",
-                mxResources.get("center"),
-                function () {
-                    if (currentTable != null) {
-                        currentTable.setAttribute("align", "center");
-                    }
-                },
-                tablePanel2,
-            ),
-            this.editorUi.toolbar.addButton(
-                "geSprite-right",
-                mxResources.get("right"),
-                function () {
-                    if (currentTable != null) {
-                        currentTable.setAttribute("align", "right");
-                    }
-                },
-                tablePanel2,
-            ),
-        ];
-        this.styleButtons(btns);
-        btns[2].style.marginRight = "10px";
-
-        wrapper3.appendChild(tablePanel2);
-        container.appendChild(wrapper3);
-
-        tableWrapper = wrapper3;
-    }
-
-    function setSelected(elt, selected) {
-        elt.style.backgroundImage = selected
-            ? Editor.isDarkMode()
-                ? "linear-gradient(rgb(0 161 241) 0px, rgb(0, 97, 146) 100%)"
-                : "linear-gradient(#c5ecff 0px,#87d4fb 100%)"
-            : "";
-    }
-
-    var listener = mxUtils.bind(this, function (sender, evt, force) {
-        ss = ui.getSelectionState();
-        var fontStyle = mxUtils.getValue(ss.style, mxConstants.STYLE_FONTSTYLE, 0);
-        setSelected(
-            fontStyleItems[0],
-            (fontStyle & mxConstants.FONT_BOLD) == mxConstants.FONT_BOLD,
-        );
-        setSelected(
-            fontStyleItems[1],
-            (fontStyle & mxConstants.FONT_ITALIC) == mxConstants.FONT_ITALIC,
-        );
-        setSelected(
-            fontStyleItems[2],
-            (fontStyle & mxConstants.FONT_UNDERLINE) == mxConstants.FONT_UNDERLINE,
-        );
-        fontMenu.firstChild.nodeValue = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_FONTFAMILY,
-            Menus.prototype.defaultFont,
-        );
-
-        setSelected(
-            verticalItem,
-            mxUtils.getValue(ss.style, mxConstants.STYLE_HORIZONTAL, "1") == "0",
-        );
-
-        if (force || document.activeElement != input) {
-            var tmp = parseFloat(
-                mxUtils.getValue(
-                    ss.style,
-                    mxConstants.STYLE_FONTSIZE,
-                    Menus.prototype.defaultFontSize,
-                ),
-            );
-            input.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        var align = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_ALIGN,
-            mxConstants.ALIGN_CENTER,
-        );
-        setSelected(left, align == mxConstants.ALIGN_LEFT);
-        setSelected(center, align == mxConstants.ALIGN_CENTER);
-        setSelected(right, align == mxConstants.ALIGN_RIGHT);
-
-        var valign = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_VERTICAL_ALIGN,
-            mxConstants.ALIGN_MIDDLE,
-        );
-        setSelected(top, valign == mxConstants.ALIGN_TOP);
-        setSelected(middle, valign == mxConstants.ALIGN_MIDDLE);
-        setSelected(bottom, valign == mxConstants.ALIGN_BOTTOM);
-
-        var pos = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_LABEL_POSITION,
-            mxConstants.ALIGN_CENTER,
-        );
-        var vpos = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_VERTICAL_LABEL_POSITION,
-            mxConstants.ALIGN_MIDDLE,
-        );
-
-        if (pos == mxConstants.ALIGN_LEFT && vpos == mxConstants.ALIGN_TOP) {
-            positionSelect.value = "topLeft";
-        } else if (
-            pos == mxConstants.ALIGN_CENTER &&
-            vpos == mxConstants.ALIGN_TOP
-        ) {
-            positionSelect.value = "top";
-        } else if (
-            pos == mxConstants.ALIGN_RIGHT &&
-            vpos == mxConstants.ALIGN_TOP
-        ) {
-            positionSelect.value = "topRight";
-        } else if (
-            pos == mxConstants.ALIGN_LEFT &&
-            vpos == mxConstants.ALIGN_BOTTOM
-        ) {
-            positionSelect.value = "bottomLeft";
-        } else if (
-            pos == mxConstants.ALIGN_CENTER &&
-            vpos == mxConstants.ALIGN_BOTTOM
-        ) {
-            positionSelect.value = "bottom";
-        } else if (
-            pos == mxConstants.ALIGN_RIGHT &&
-            vpos == mxConstants.ALIGN_BOTTOM
-        ) {
-            positionSelect.value = "bottomRight";
-        } else if (pos == mxConstants.ALIGN_LEFT) {
-            positionSelect.value = "left";
-        } else if (pos == mxConstants.ALIGN_RIGHT) {
-            positionSelect.value = "right";
-        } else {
-            positionSelect.value = "center";
-        }
-
-        var dir = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_TEXT_DIRECTION,
-            mxConstants.DEFAULT_TEXT_DIRECTION,
-        );
-
-        if (dir == mxConstants.TEXT_DIRECTION_RTL) {
-            dirSelect.value = "rightToLeft";
-        } else if (dir == mxConstants.TEXT_DIRECTION_LTR) {
-            dirSelect.value = "leftToRight";
-        } else if (dir == mxConstants.TEXT_DIRECTION_AUTO) {
-            dirSelect.value = "automatic";
-        }
-
-        if (force || document.activeElement != globalSpacing) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING, 2),
-            );
-            globalSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != topSpacing) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_TOP, 0),
-            );
-            topSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != rightSpacing) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_RIGHT, 0),
-            );
-            rightSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != bottomSpacing) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_BOTTOM, 0),
-            );
-            bottomSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != leftSpacing) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_SPACING_LEFT, 0),
-            );
-            leftSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-    });
-
-    globalUpdate = this.installInputHandler(
-        globalSpacing,
-        mxConstants.STYLE_SPACING,
-        2,
-        -999,
-        999,
-        " pt",
-    );
-    topUpdate = this.installInputHandler(
-        topSpacing,
-        mxConstants.STYLE_SPACING_TOP,
-        0,
-        -999,
-        999,
-        " pt",
-    );
-    rightUpdate = this.installInputHandler(
-        rightSpacing,
-        mxConstants.STYLE_SPACING_RIGHT,
-        0,
-        -999,
-        999,
-        " pt",
-    );
-    bottomUpdate = this.installInputHandler(
-        bottomSpacing,
-        mxConstants.STYLE_SPACING_BOTTOM,
-        0,
-        -999,
-        999,
-        " pt",
-    );
-    leftUpdate = this.installInputHandler(
-        leftSpacing,
-        mxConstants.STYLE_SPACING_LEFT,
-        0,
-        -999,
-        999,
-        " pt",
-    );
-
-    this.addKeyHandler(input, listener);
-    this.addKeyHandler(globalSpacing, listener);
-    this.addKeyHandler(topSpacing, listener);
-    this.addKeyHandler(rightSpacing, listener);
-    this.addKeyHandler(bottomSpacing, listener);
-    this.addKeyHandler(leftSpacing, listener);
-
-    graph.getModel().addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            graph.getModel().removeListener(listener);
-        },
-    });
-    listener();
-
-    if (graph.cellEditor.isContentEditing()) {
-        var updating = false;
-
-        var updateCssHandler = function () {
-            if (!updating) {
-                updating = true;
-
-                window.setTimeout(function () {
-                    var node = graph.getSelectedEditingElement();
-
-                    if (node != null) {
-                        function getRelativeLineHeight(fontSize, css, elt) {
-                            if (elt.style != null && css != null) {
-                                var lineHeight = css.lineHeight;
-
-                                if (
-                                    elt.style.lineHeight != null &&
-                                    elt.style.lineHeight.substring(
-                                        elt.style.lineHeight.length - 1,
-                                    ) == "%"
-                                ) {
-                                    return parseInt(elt.style.lineHeight) / 100;
-                                } else {
-                                    return lineHeight.substring(lineHeight.length - 2) == "px"
-                                        ? parseFloat(lineHeight) / fontSize
-                                        : parseInt(lineHeight);
-                                }
-                            } else {
-                                return "";
-                            }
-                        }
-
-                        function getAbsoluteFontSize(css) {
-                            var fontSize = css != null ? css.fontSize : null;
-
-                            if (
-                                fontSize != null &&
-                                fontSize.substring(fontSize.length - 2) == "px"
-                            ) {
-                                return parseFloat(fontSize);
-                            } else {
-                                return mxConstants.DEFAULT_FONTSIZE;
-                            }
-                        }
-
-                        var css = mxUtils.getCurrentStyle(node);
-                        var fontSize = getAbsoluteFontSize(css);
-                        var lineHeight = getRelativeLineHeight(fontSize, css, node);
-
-                        // Finds common font size
-                        var elts = node.getElementsByTagName("*");
-
-                        // IE does not support containsNode
-                        if (
-                            elts.length > 0 &&
-                            window.getSelection &&
-                            !mxClient.IS_IE &&
-                            !mxClient.IS_IE11
-                        ) {
-                            var selection = window.getSelection();
-
-                            for (var i = 0; i < elts.length; i++) {
-                                if (selection.containsNode(elts[i], true)) {
-                                    temp = mxUtils.getCurrentStyle(elts[i]);
-                                    fontSize = Math.max(getAbsoluteFontSize(temp), fontSize);
-                                    var lh = getRelativeLineHeight(fontSize, temp, elts[i]);
-
-                                    if (lh != lineHeight || isNaN(lh)) {
-                                        lineHeight = "";
-                                    }
-                                }
-                            }
-                        }
-
-                        function hasParentOrOnlyChild(name) {
-                            if (
-                                graph.getParentByName(node, name, graph.cellEditor.textarea) !=
-                                null
-                            ) {
-                                return true;
-                            } else {
-                                var child = node;
-
-                                while (child != null && child.childNodes.length == 1) {
-                                    child = child.childNodes[0];
-
-                                    if (child.nodeName == name) {
-                                        return true;
-                                    }
-                                }
-                            }
-
-                            return false;
-                        }
-
-                        function isEqualOrPrefixed(str, value) {
-                            if (str != null && value != null) {
-                                if (str == value) {
-                                    return true;
-                                } else if (str.length > value.length + 1) {
-                                    return (
-                                        str.substring(str.length - value.length - 1, str.length) ==
-                                        "-" + value
-                                    );
-                                }
-                            }
-
-                            return false;
-                        }
-
-                        if (css != null) {
-                            setSelected(
-                                fontStyleItems[0],
-                                css.fontWeight == "bold" ||
-                                css.fontWeight > 400 ||
-                                hasParentOrOnlyChild("B") ||
-                                hasParentOrOnlyChild("STRONG"),
-                            );
-                            setSelected(
-                                fontStyleItems[1],
-                                css.fontStyle == "italic" ||
-                                hasParentOrOnlyChild("I") ||
-                                hasParentOrOnlyChild("EM"),
-                            );
-                            setSelected(fontStyleItems[2], hasParentOrOnlyChild("U"));
-                            setSelected(sup, hasParentOrOnlyChild("SUP"));
-                            setSelected(sub, hasParentOrOnlyChild("SUB"));
-
-                            if (!graph.cellEditor.isTableSelected()) {
-                                var align =
-                                    graph.cellEditor.align ||
-                                    mxUtils.getValue(
-                                        ss.style,
-                                        mxConstants.STYLE_ALIGN,
-                                        mxConstants.ALIGN_CENTER,
-                                    );
-
-                                if (isEqualOrPrefixed(css.textAlign, "justify")) {
-                                    setSelected(
-                                        full,
-                                        isEqualOrPrefixed(css.textAlign, "justify"),
-                                    );
-                                    setSelected(left, false);
-                                    setSelected(center, false);
-                                    setSelected(right, false);
-                                } else {
-                                    setSelected(full, false);
-                                    setSelected(left, align == mxConstants.ALIGN_LEFT);
-                                    setSelected(center, align == mxConstants.ALIGN_CENTER);
-                                    setSelected(right, align == mxConstants.ALIGN_RIGHT);
-                                }
-                            } else {
-                                setSelected(full, isEqualOrPrefixed(css.textAlign, "justify"));
-                                setSelected(left, isEqualOrPrefixed(css.textAlign, "left"));
-                                setSelected(center, isEqualOrPrefixed(css.textAlign, "center"));
-                                setSelected(right, isEqualOrPrefixed(css.textAlign, "right"));
-                            }
-
-                            currentTable = graph.getParentByName(
-                                node,
-                                "TABLE",
-                                graph.cellEditor.textarea,
-                            );
-                            tableRow =
-                                currentTable == null
-                                    ? null
-                                    : graph.getParentByName(node, "TR", currentTable);
-                            tableCell =
-                                currentTable == null
-                                    ? null
-                                    : graph.getParentByNames(node, ["TD", "TH"], currentTable);
-                            tableWrapper.style.display = currentTable != null ? "" : "none";
-
-                            if (document.activeElement != input) {
-                                if (
-                                    node.nodeName == "FONT" &&
-                                    node.getAttribute("size") == "4" &&
-                                    pendingFontSize != null
-                                ) {
-                                    node.removeAttribute("size");
-                                    node.style.fontSize = pendingFontSize + " pt";
-                                    pendingFontSize = null;
-                                } else {
-                                    input.value = isNaN(fontSize) ? "" : fontSize + " pt";
-                                }
-
-                                var lh = parseFloat(lineHeight);
-
-                                if (!isNaN(lh)) {
-                                    lineHeightInput.value = Math.round(lh * 100) + " %";
-                                } else {
-                                    lineHeightInput.value = "100 %";
-                                }
-                            }
-
-                            // Updates the color picker for the current font
-                            if (fontColorApply != null) {
-                                if (
-                                    css.color == "rgba(0, 0, 0, 0)" ||
-                                    css.color == "transparent"
-                                ) {
-                                    currentFontColor = mxConstants.NONE;
-                                } else {
-                                    currentFontColor = mxUtils.rgba2hex(css.color);
-                                }
-
-                                fontColorApply(currentFontColor, true);
-                            }
-
-                            if (bgColorApply != null) {
-                                if (
-                                    css.backgroundColor == "rgba(0, 0, 0, 0)" ||
-                                    css.backgroundColor == "transparent"
-                                ) {
-                                    currentBgColor = mxConstants.NONE;
-                                } else {
-                                    currentBgColor = mxUtils.rgba2hex(css.backgroundColor);
-                                }
-
-                                bgColorApply(currentBgColor, true);
-                            }
-
-                            // Workaround for firstChild is null or not an object
-                            // in the log which seems to be IE8- only / 29.01.15
-                            if (fontMenu.firstChild != null) {
-                                fontMenu.firstChild.nodeValue = Graph.stripQuotes(
-                                    css.fontFamily,
-                                );
-                            }
-                        }
-                    }
-
-                    updating = false;
-                }, 0);
-            }
-        };
-
-        if (
-            mxClient.IS_FF ||
-            mxClient.IS_EDGE ||
-            mxClient.IS_IE ||
-            mxClient.IS_IE11
-        ) {
-            mxEvent.addListener(
-                graph.cellEditor.textarea,
-                "DOMSubtreeModified",
-                updateCssHandler,
-            );
-        }
-
-        mxEvent.addListener(graph.cellEditor.textarea, "input", updateCssHandler);
-        mxEvent.addListener(
-            graph.cellEditor.textarea,
-            "touchend",
-            updateCssHandler,
-        );
-        mxEvent.addListener(graph.cellEditor.textarea, "mouseup", updateCssHandler);
-        mxEvent.addListener(graph.cellEditor.textarea, "keyup", updateCssHandler);
-        this.listeners.push({
-            destroy: function () {
-                // No need to remove listener since textarea is destroyed after edit
-            },
-        });
-        updateCssHandler();
-    }
-
-    return container;
-};
-
-/**
- * 数据绑定格式化面板
- */
-DataFormatPanel = function (format, editorUi, container) {
-    BaseFormatPanel.call(this, format, editorUi, container);
-    this.init();
-};
-
-mxUtils.extend(DataFormatPanel, BaseFormatPanel);
-
-/**
- * 数据绑定面板初始化
- */
-DataFormatPanel.prototype.init = function () {
-    this.container.style.borderBottom = "none";
-    this.addDataFont(this.container);
-};
-
-// TODO 数据绑定
-DataFormatPanel.prototype.addDataFont = function (container) {
-    const ui = this.editorUi;
-    const editor = ui.editor;
-    const graph = editor.graph;
-    const ss = ui.getSelectionState();
-    const vertices = ss.vertices || []
-    const sidebarInstance = ui.sidebar
-    console.log(vertices)
-    console.log(ui)
-
-    const hasModifyNotSave = editor.status
-
-    /**
-     * @description 不是单一节点则不进入数据绑定
-     */
-    if (!isSingleNode(vertices)) return
-
-    // 组态id
-    const configurationId = getRequest().configurationId;
-    // 当前内容页的id
-    const currentPageId = ui.currentPage.node;
-
-    // 图形的id
-    const graphId = vertices[0].id;
-
-    // 解构全局属性layui要用到的模块
-    const { layer, form, jquery: $, colorpicker, upload, element } = layui;
-
-    const CONTAINER_FILTER = 'containerFilter'
-    $(container).addClass('layui-form').attr('lay-filter', CONTAINER_FILTER)
-
-    /**
-     * @description 创建面版
-     */
-    const createPanel = this.createPanel
-
-    /**
-     * @description 创建标题
-     */
-    const createTitle = this.createTitle
-
-
-    /**
-     * @description 选中节点信息来源
-     * @param {string} nodeInfo.id - 节点ID
-     */
-    const nodeInfo = getNodeInfo(vertices)
-
-
-    /**
-     * @description 组织树
-     * @type {*[]}
-     */
-    let treeList = []
-
-    /**
-     * @description 当前选中的组织树节点
-     * @type {null | string}
-     */
-    let currentCheckedOrgNode = null
-
-    /**
-     * @description 当前节点绑定数据
-     * @type {null | {act: [], event: [], dataSources: []}}
-     */
-    let currentNodeData = null
-
-    /**
-     * @description 覆盖当前节点数据
-     * @param {'act' | 'dataSources' | 'event'} key 
-     * @param {string} 
-     */
-    function overrideCurrentData(key, uuid = 'id', value = {}) {
-        if (!currentNodeData[key]) currentNodeData[key] = []
-        const index = currentNodeData[key].findIndex(item => item[uuid] === value[uuid])
-        ~index ? currentNodeData[key][index] = value : currentNodeData[key].push(value)
-    }
-
-    /**
-     * @description 保存页面信息
-     */
-    async function autoSaveGraphInfo() {
-        if (!hasModifyNotSave) return
-        ui.actions.get(
-            (ui.currentFile.mode == null || !ui.currentFile.isEditable())
-                ? 'saveAs'
-                : 'save')
-            .funct();
-    }
-
-    /**
-     * @description 获取弹出层绑定信息
-     * @param {'DOWN' | 'UP' | 'SINGLE' | 'DOUBLE' | 'DISPLAY' | 'FLASH' | 'ROTATE' | 'IMAGE'} type - 类型
-     * @param {'event' | 'act' } category - 类别
-     */
-    function getLayerBindInfo(category, type) {
-        if (currentNodeData) {
-            return currentNodeData[category]?.find(item => item.type === type) || {}
-        }
-        return {}
-    }
-
-    const enumCategory = {
-        ACT: 'act',
-        EVENT: 'event',
-        DATA_SOURCE: 'dataSources',
-    }
-
-    const enumInteractionType = {
-        DOWN: 'DOWN',
-        UP: 'UP',
-        SINGLE: 'SINGLE',
-        DOUBLE: 'DOUBLE',
-    }
-
-    const enumDynamicEffectType = {
-        DISPLAY: 'DISPLAY',
-        FLASH: 'FLASH',
-        ROTATE: 'ROTATE',
-        IMAGE: 'IMAGE',
-        SWITCH: 'SWITCH',
-        RUNNING: 'RUNNING'
-    }
-
-    const interactionList = [
-        {
-            label: "按下",
-            type: enumInteractionType.DOWN,
-            category: enumCategory.EVENT,
-        },
-        {
-            label: "抬起",
-            type: enumInteractionType.UP,
-            category: enumCategory.EVENT,
-        },
-        {
-            label: "单击",
-            type: enumInteractionType.SINGLE,
-            category: enumCategory.EVENT,
-        },
-        {
-            label: "双击",
-            type: enumInteractionType.DOUBLE,
-            category: enumCategory.EVENT,
-        },
-    ];
-
-    const dynamicEffectList = [
-        {
-            label: "闪烁",
-            type: enumDynamicEffectType.FLASH,
-            category: enumCategory.ACT,
-        },
-        {
-            label: "显示/隐藏",
-            type: enumDynamicEffectType.DISPLAY,
-            category: enumCategory.ACT,
-        },
-        {
-            label: "旋转",
-            type: enumDynamicEffectType.ROTATE,
-            category: enumCategory.ACT,
-        }
-    ];
-
-    const enumDataSourceConst = {
-        ORG_ID: 'orgId',
-        DEVICE_ID: 'deviceId',
-        SLAVE_DEVICE_ID: 'slaveDeviceId',
-        ATTR: 'attr',
-        GATEWAY: 'GATEWAY',
-        ADDITIONAL: 'additional'
-    }
-
-    /**
-     * @description 刷新页面 用于在其他位置调用更新数据面板的操作，默认是个空函数，在生成数据源面板中进行了拓展
-     */
-    function echoRefreshFn() {
-    }
-
-    /**
-     * @description 用于在其他位置获取数据源绑定的数据，在生成数据源面板中进行了改写
-     * @return  {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
-     */
-    function getDataSourceBindValue() {
-
-    }
-
-
-    // 获取url的请求参数函数
-    function getRequest() {
-        let url = location.search; //获取url中"?"符后的字串
-        let theRequest = new Object();
-        if (url.indexOf("?") != -1) {
-            var str = url.substring(1);
-            string = str.split("&");
-            for (var i = 0; i < string.length; i++) {
-                theRequest[string[i].split("=")[0]] = decodeURI(string[i].split("=")[1]);
-            }
-        }
-        return theRequest;
-    }
-
-    /**
-     * @description 单一节点
-     */
-    function isSingleNode(vertices) {
-        return Array.isArray(vertices) && vertices.length === 1
-    }
-
-    /**
-     * @description 获取节点信息
-     * @returns {{id: string}} - 当前选中节点源信息
-     */
-    function getNodeInfo(node) {
-        if (isSingleNode(node)) {
-            return node[0]
-        }
-        return {}
-    }
-
-    /**
-     * @description 初始化节点
-     */
-    async function initNode() {
-        const basicAttr = sidebarInstance.enumCellBasicAttribute
-        const permissionKey = sidebarInstance.enumPermissionPanel
-        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
-
-        const renderMapping = {
-            [permissionKey.DATA_SOURCE]: createDataSourcePanel,
-            [permissionKey.LINE_CHART_EXPAND]: createChartBindPanel.bind(this, LINE_CHART),
-            [permissionKey.BAR_CHART_EXPAND]: createChartBindPanel.bind(this, BAR_CHART),
-            [permissionKey.DASHBOARD_CHART_EXPAND]: createChartBindPanel.bind(this, DASHBOARD_CHART),
-            [permissionKey.INTERACTION]: createInteractionPanel,
-            [permissionKey.DYNAMIC_EFFECT]: createDynamicEffectPanel,
-            [permissionKey.VAR_IMAGE]: createVarImagePanel,
-            [permissionKey.VIDEO]: createVideoBindPanel,
-            [permissionKey.SWITCH_STATE_SETTING]: createSwitchStateSettingPanel,
-            [permissionKey.ONLY_SINGLE_EVENT]: createParamsSettingButtonPanel,
-            [permissionKey.RUNNING_AND_STOP]: createRunningAndStopPanel
-        }
-
-
-        function permissionRender() {
-            try {
-                const cell = vertices[0]
-                const permission = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
-                const needDisplayPanel = sidebarInstance.getComponentPermission(permission)
-                for (const key of needDisplayPanel) {
-                    renderMapping[key]()
-                }
-                if (needDisplayPanel.length) createSubmitPanel()
-                UseLayUi.nextTick(() => form.render())
-            } catch (e) {
-                throw Error('component permission setting has some problem, please check your component permission bind on "Sidebar.prototype.init" method setComponentPermission')
-            }
-        }
-
-        permissionRender()
-        await getNodeBindInfo()
-    }
-
-    initNode();
-
-
-    /**
-     * @description 获取节点绑定信息
-     */
-    async function getNodeBindInfo() {
-        const { id } = nodeInfo
-        const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('NODE', id))
-        currentNodeData = res
-        if (echoRefreshFn && typeof echoRefreshFn === 'function') echoRefreshFn()
-        await echoActionType()
-    }
-
-    /**
-     * @description 回显动效类型
-     */
-    async function echoActionType() {
-        const act = currentNodeData.act ?? []
-        const event = currentNodeData.event ?? []
-        const actionType = {}
-
-        const hasExistEl = $(`.layui-form[lay-filter="${CONTAINER_FILTER}"]`).find('input[type="checkbox"]')
-        $(hasExistEl).each((i) => {
-            $(hasExistEl[i]).attr('disabled', true)
-        })
-
-        for (const item of act) {
-            const flag = !item.condition || !item.condition?.length
-            $(`.interaction__container input[name="${item.type}"]`).attr('disabled', flag)
-            actionType[item.type] = item.enabled
-        }
-        for (const item of event) {
-            const flag = !item.content
-            $(`.interaction__container input[name="${item.type}"]`).attr('disabled', flag)
-            actionType[item.type] = item.enabled
-        }
-
-        form.val(CONTAINER_FILTER, actionType)
-    }
-
-    /**
-     * @description 生成操作节点
-     * @param {object[]} list
-     */
-    function generateActionEventNode(list) {
-        const eventList = []
-        const eventNodeCls = 'interaction__container'
-        for (const item of list) {
-            const checkbox = UseLayUi.createCheckBox({
-                dataSource: item,
-                layFilter: item.type,
-                valueField: 'type',
-                labelField: 'label',
-            })
-            const template = `
-                <div class="${eventNodeCls}">
-                <div>${checkbox}</div>
-                <i id="${item.type}"></i>
-                </div>`
-            eventList.push(template)
-        }
-        return eventList
-    }
-
-    /**
-     * @description 创建数据面板
-     */
-    function createDataSourcePanel() {
-        const fragment = document.createDocumentFragment()
-        const defaultPanel = createPanel()
-        const title = createTitle('数据源')
-        $(defaultPanel).addClass('override__panel--default')
-        $(title).css({ padding: '6px 0 6px 6px' })
-
-
-        async function mount() {
-            const { component, echoDataSource, getValue } = generateDataSourceComponent({ validate: false })
-            $(fragment).append(title).append(component)
-            $(container).append(fragment)
-
-            /**
-             * @description 回显数据
-             * @type {Function}
-             */
-            const refreshFn = echoRefreshFn
-            echoRefreshFn = function () {
-                refreshFn.apply(this)
-                const { dataSources: [dataSource] = [] } = currentNodeData || {}
-                echoDataSource(dataSource)
-                form.render(null, CONTAINER_FILTER)
-            }
-
-            // 改写获取数据源绑定的值
-            getDataSourceBindValue = getValue
-        }
-
-        mount()
-    }
-
-    function createLineChartPanel() {
-        const { LINE_CHART } = Sidebar.prototype.enumComponentType
-        createChartBindPanel(true)
-    }
-
-    function createBarChartPanel() {
-        const { LINE_CHART } = Sidebar.prototype.enumComponentType
-
-        createChartBindPanel(false)
-    }
-
-    function createDashboardPanel() {
-        const { LINE_CHART } = Sidebar.prototype.enumComponentType
-
-    }
-    /**
-     * @description 创建视频绑定面板
-     */
-    function createVideoBindPanel() {
-
-        const enumConst = {
-            ORG_ID: 'orgId',
-            RECORD_ID: 'id',
-            VIDEO_URL: 'videoUrl',
-            ACCESSMODE: 'accessMode',
-            VIDEO_FLAG: 'videoComponentFlag'
-        }
-
-        const enumActionEL = {
-            VIDEO_FILTER: 'videoFilter',
-            PANEL_EL: 'videoPanelControl',
-            ORG_EL: 'orgTreeEl'
-        }
-
-        const fragment = document.createDocumentFragment()
-        const title = createTitle('视频绑定')
-        $(title).addClass('override__title--default')
-
-        const defaultPanel = createPanel()
-        $(defaultPanel).addClass('override__panel--default')
-        $(defaultPanel).append(`<div id="${enumActionEL.ORG_EL}" class="video-panel-org__override"></div>`)
-        $(defaultPanel).append(`<div class="layui-form-item" style="display: none;"><input name="${enumConst.ACCESSMODE}" /></div>`)
-        $(defaultPanel).append(`<div class="layui-form-item" style="display: none;"><input name="${enumConst.VIDEO_FLAG}" value="true" /></div>`)
-        $(defaultPanel).append(`<div class="layui-form-item" style="display: none;"><input name="${enumConst.VIDEO_URL}" /></div>`)
-
-        const videoBindSelect = UseLayUi.createSelect({
-            label: '视频流',
-            layFilter: enumActionEL.VIDEO_FILTER,
-            className: 'data-source__component-select',
-            bindValueFiled: enumConst.RECORD_ID
-        })
-        $(defaultPanel).append(`<div id="${enumActionEL.PANEL_EL}">${videoBindSelect}</div>`)
-
-        fragment.append(title)
-        fragment.append(defaultPanel)
-        $(container).append(fragment)
-
-        function init() {
-
-            let orgId = null;
-
-            let recordOptions = []
-
-            let treeList = []
-
-            const refreshFN = echoRefreshFn
-            echoRefreshFn = async function () {
-                refreshFN.apply(this, arguments)
-                await echoData()
-            }
-            async function echoData() {
-                const { videoUrl, orgId: organizationId, accessMode, id } = currentNodeData?.dataSources?.[0]?.additional || {}
-                orgId = organizationId
-                await getStreamingMediaByOrgId()
-                form.val(CONTAINER_FILTER, { videoUrl, accessMode, id })
-                UseLayUi.nextTick(() => {
-                    const node = UseLayUi.findTreeObjectByField(treeList, organizationId)
-                    $(`#${enumActionEL.ORG_EL} input[name="${enumConst.ORG_ID}"]`).val(organizationId).parent().find('span').html(node?.name)
-                })
-            }
-
-
-
-            /**
-             * @description 创建组织树
-             */
-            async function createOrgTreeSelect() {
-                const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
-                treeList = res
-                if (err) return
-                UseLayUi.createTreeSelect({
-                    elem: `#${enumActionEL.ORG_EL}`,
-                    layFilter: enumConst.ORG_ID,
-                    label: '组织',
-                    singleUsage: false,
-                    layVerify: 'required',
-                    layVerType: 'tips',
-                    treeProps: {
-                        data: res,
-                        onlyIconControl: true,
-                        click(node) {
-                            orgId = node.data.id
-                            getStreamingMediaByOrgId()
-                            form.val(CONTAINER_FILTER, {
-                                [enumConst.RECORD_ID]: null
-                            })
-                        },
-                    },
-                })
-            }
-
-            async function getStreamingMediaByOrgId() {
-                const [err, res] = await to(ConfigurationNodeApi.getStreamingMediaList(orgId))
-                recordOptions = res.items
-                const options = UseLayUi.generateOptionTemplate({ dataSource: res.items || [] })
-                $(`#${enumActionEL.PANEL_EL} select[name="${enumConst.RECORD_ID}"]`).html(options)
-                form.render()
-            }
-
-            function createLinsten() {
-                form.on(`select(${enumActionEL.VIDEO_FILTER})`, event => {
-                    const { value } = event
-                    const item = recordOptions.find(item => item.id === value)
-                    form.val(CONTAINER_FILTER, {
-                        [enumConst.ACCESSMODE]: item[enumConst.ACCESSMODE],
-                        [enumConst.VIDEO_URL]: item[enumConst.VIDEO_URL],
-                    })
-                })
-            }
-
-            createOrgTreeSelect()
-            createLinsten()
-        }
-
-        init()
-    }
-
-    /**
-     * @description 创建开关组件的状态设置面板
-     */
-    function createSwitchStateSettingPanel() {
-        dynamicEffectList.length = 0
-        dynamicEffectList.push({
-            label: '状态设置',
-            type: enumDynamicEffectType.SWITCH,
-            category: enumCategory.ACT,
-        })
-        createDynamicEffectPanel()
-        createParamsSettingButtonPanel()
-    }
-
-    /**
-     * @description 参数设置按钮面板创建
-     */
-    function createParamsSettingButtonPanel() {
-        const singleClick = interactionList.find(item => item.type === enumInteractionType.SINGLE)
-        interactionList.length = 0
-        interactionList.push(singleClick)
-        createInteractionPanel()
-    }
-
-    /**
-     * @description 水流动效
-     */
-    function createRunningAndStopPanel() {
-        dynamicEffectList.push({
-            label: '水流动效',
-            type: enumDynamicEffectType.RUNNING,
-            category: enumCategory.ACT
-        })
-    }
-
-    /**
-     * @description 是否是折线图
-     * @param {boolean} isLineChart 
-     */
-    function createChartBindPanel(chartType) {
-        const fragment = document.createDocumentFragment()
-        const chartBindContainer = document.createElement('div')
-        chartBindContainer.setAttribute('class', 'chart-panel__style')
-        chartBindContainer.style.padding = '10px'
-        const title = createTitle('展示类型')
-        $(title).addClass('override__title--default')
-
-        const enumActionEL = {
-            SCOPE_FILTER: 'bindChartScopeFilter',
-
-            INTERVAL_EL: 'bindChartIntervalSelect',
-
-            UNIT_EL: 'bindChartUnit'
-        }
-        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
-
-        const enumBindKey = HandleDataSource.enumConst
-        const enumDataType = HandleDataSource.enumDataBindType
-        const enumConst = {
-            DATA_TYPE: enumBindKey.DATA_TYPE,
-
-            REAL: enumDataType.REAL,
-
-            HISTORY: enumDataType.HISTORY,
-
-            /**
-             * @description 范围
-             */
-            EFFECT_SCOPE: enumBindKey.EFFECT_SCOPE,
-
-            /**
-             * @description 聚合
-             */
-            AGG: enumBindKey.AGG,
-
-            /**
-             * @description 间隔
-             */
-            INTERVAL: enumBindKey.INTERVAL,
-
-            /**
-             * @description 单位
-             */
-            UNIT: enumBindKey.UNIT
-        }
-
-        const enumTimeUnit = {
-            SECOND: 'second',
-            MINUTE: 'MINUTE',
-            HOUR: 'HOUR',
-            DAY: 'DAY',
-        }
-
-        const unitMapping = {
-            [enumTimeUnit.SECOND]: '秒',
-            [enumTimeUnit.MINUTE]: '分',
-            [enumTimeUnit.HOUR]: '小时',
-            [enumTimeUnit.DAY]: '天',
-        }
-
-        const unitConversion = {
-            [enumTimeUnit.SECOND]: 1 * 1000,
-            [enumTimeUnit.MINUTE]: 1 * 60 * 1000,
-            [enumTimeUnit.HOUR]: 1 * 60 * 60 * 1000,
-            [enumTimeUnit.DAY]: 1 * 60 * 60 * 24 * 1000,
-        }
-
-        const defaultIntervalOptions = [
-            {
-                id: 1,
-                unit: enumTimeUnit.SECOND,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND }
-                ]
-            },
-            {
-                id: 5,
-                unit: enumTimeUnit.SECOND,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND }
-                ]
-            },
-            {
-                id: 10,
-                unit: enumTimeUnit.SECOND,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND }
-                ]
-            },
-            {
-                id: 15,
-                unit: enumTimeUnit.SECOND,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND }
-                ]
-            },
-            {
-                id: 30,
-                unit: enumTimeUnit.SECOND,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND }
-                ]
-            },
-            {
-                id: 1,
-                unit: enumTimeUnit.MINUTE,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND },
-                    { id: 5, unit: enumTimeUnit.SECOND },
-                ]
-            },
-            {
-                id: 2,
-                unit: enumTimeUnit.MINUTE,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND },
-                    { id: 5, unit: enumTimeUnit.SECOND },
-                    { id: 10, unit: enumTimeUnit.SECOND },
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                ]
-            },
-            {
-                id: 5,
-                unit: enumTimeUnit.MINUTE,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.SECOND },
-                    { id: 5, unit: enumTimeUnit.SECOND },
-                    { id: 10, unit: enumTimeUnit.SECOND },
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                    { id: 30, unit: enumTimeUnit.SECOND },
-                ]
-            },
-            {
-                id: 10,
-                unit: enumTimeUnit.MINUTE,
-                linkage: [
-                    { id: 5, unit: enumTimeUnit.SECOND },
-                    { id: 10, unit: enumTimeUnit.SECOND },
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                    { id: 30, unit: enumTimeUnit.SECOND },
-                    { id: 1, unit: enumTimeUnit.MINUTE },
-                ]
-            },
-            {
-                id: 15,
-                unit: enumTimeUnit.MINUTE,
-                linkage: [
-                    { id: 5, unit: enumTimeUnit.SECOND },
-                    { id: 10, unit: enumTimeUnit.SECOND },
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                    { id: 30, unit: enumTimeUnit.SECOND },
-                    { id: 1, unit: enumTimeUnit.MINUTE },
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                ]
-            },
-            {
-                id: 30,
-                unit: enumTimeUnit.MINUTE,
-                linkage: [
-                    { id: 5, unit: enumTimeUnit.SECOND },
-                    { id: 10, unit: enumTimeUnit.SECOND },
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                    { id: 30, unit: enumTimeUnit.SECOND },
-                    { id: 1, unit: enumTimeUnit.MINUTE },
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                ]
-            },
-            {
-                id: 1,
-                unit: enumTimeUnit.HOUR,
-                linkage: [
-                    { id: 10, unit: enumTimeUnit.SECOND },
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                    { id: 30, unit: enumTimeUnit.SECOND },
-                    { id: 1, unit: enumTimeUnit.MINUTE },
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                    { id: 5, unit: enumTimeUnit.MINUTE },
-                ]
-            },
-            {
-                id: 2,
-                unit: enumTimeUnit.HOUR,
-                linkage: [
-                    { id: 15, unit: enumTimeUnit.SECOND },
-                    { id: 30, unit: enumTimeUnit.SECOND },
-                    { id: 1, unit: enumTimeUnit.MINUTE },
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                    { id: 5, unit: enumTimeUnit.MINUTE },
-                    { id: 10, unit: enumTimeUnit.MINUTE },
-                    { id: 15, unit: enumTimeUnit.MINUTE },
-                ]
-            },
-            {
-                id: 5,
-                unit: enumTimeUnit.HOUR,
-                linkage: [
-                    { id: 1, unit: enumTimeUnit.MINUTE },
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                    { id: 5, unit: enumTimeUnit.MINUTE },
-                    { id: 10, unit: enumTimeUnit.MINUTE },
-                    { id: 15, unit: enumTimeUnit.MINUTE },
-                    { id: 30, unit: enumTimeUnit.MINUTE },
-                ]
-            },
-            {
-                id: 10,
-                unit: enumTimeUnit.HOUR,
-                linkage: [
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                    { id: 5, unit: enumTimeUnit.MINUTE },
-                    { id: 10, unit: enumTimeUnit.MINUTE },
-                    { id: 15, unit: enumTimeUnit.MINUTE },
-                    { id: 30, unit: enumTimeUnit.MINUTE },
-                    { id: 1, unit: enumTimeUnit.HOUR },
-                ]
-            },
-            {
-                id: 12,
-                unit: enumTimeUnit.HOUR,
-                linkage: [
-                    { id: 2, unit: enumTimeUnit.MINUTE },
-                    { id: 5, unit: enumTimeUnit.MINUTE },
-                    { id: 10, unit: enumTimeUnit.MINUTE },
-                    { id: 15, unit: enumTimeUnit.MINUTE },
-                    { id: 30, unit: enumTimeUnit.MINUTE },
-                    { id: 1, unit: enumTimeUnit.HOUR },
-                ]
-            },
-            {
-                id: 1,
-                unit: enumTimeUnit.DAY,
-                linkage: [
-                    { id: 5, unit: enumTimeUnit.MINUTE },
-                    { id: 10, unit: enumTimeUnit.MINUTE },
-                    { id: 15, unit: enumTimeUnit.MINUTE },
-                    { id: 30, unit: enumTimeUnit.MINUTE },
-                    { id: 1, unit: enumTimeUnit.HOUR },
-                    { id: 2, unit: enumTimeUnit.HOUR },
-                ]
-            },
-            {
-                id: 7,
-                unit: enumTimeUnit.DAY,
-                linkage: [
-                    { id: 30, unit: enumTimeUnit.MINUTE },
-                    { id: 1, unit: enumTimeUnit.HOUR },
-                    { id: 2, unit: enumTimeUnit.HOUR },
-                    { id: 5, unit: enumTimeUnit.HOUR },
-                    { id: 10, unit: enumTimeUnit.HOUR },
-                    { id: 12, unit: enumTimeUnit.HOUR },
-                    { id: 1, unit: enumTimeUnit.DAY },
-                ]
-            },
-            {
-                id: 30,
-                unit: enumTimeUnit.DAY,
-                linkage: [
-                    { id: 2, unit: enumTimeUnit.HOUR },
-                    { id: 5, unit: enumTimeUnit.HOUR },
-                    { id: 10, unit: enumTimeUnit.HOUR },
-                    { id: 12, unit: enumTimeUnit.HOUR },
-                    { id: 1, unit: enumTimeUnit.DAY },
-                ]
-            },
-        ].map(item => {
-            return {
-                id: item.id * unitConversion[item.unit],
-                name: item.id + unitMapping[item.unit],
-                linkage: item.linkage.map(item => {
-                    return {
-                        id: item.id * unitConversion[item.unit],
-                        name: item.id + unitMapping[item.unit],
-                    }
-                })
-            }
-        })
-
-        const aggergationOptions = [
-            { id: 'AVG', name: '平均值' },
-            { id: 'MIN', name: '最小值' },
-            { id: 'MAX', name: '最大值' },
-            { id: 'SUM', name: '求和' },
-            { id: 'COUNT', name: '计数' },
-            { id: 'NONE', name: '空' },
-        ]
-
-        function generateDataType() {
-            const realOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.REAL}" title="实时" ${checked ? 'checked' : ''}>`
-            const historyOption = (checked) => `<input type="radio" name="${enumConst.DATA_TYPE}" value="${enumConst.HISTORY}" title="历史" ${checked ? 'checked' : ''}>`
-
-            if (chartType === LINE_CHART) {
-                return realOption() + historyOption(true)
-            } else if (chartType === BAR_CHART) {
-                return historyOption(true)
-            } else if (chartType === DASHBOARD_CHART) {
-                return realOption(true)
-            }
-            return realOption() + historyOption(true)
-        }
-
-        function createSwitchBindTypeRadio() {
-            return `
-			<div class="layui-form-item">
-				<label class="layui-form-label">数据类型</label>
-				<div class="layui-input-block">
-                    ${generateDataType()}
-				</div>
-			</div>`
-        }
-
-        function createQueryScopeSelect() {
-            const template = UseLayUi.generateOptionTemplate({
-                dataSource: defaultIntervalOptions,
-                addPlaceholderOption: false
-            })
-            return `
-			<div class="layui-form-item">
-				<label class="layui-form-label">时间周期</label>
-				<div class="layui-input-block">
-					<select name="${enumConst.EFFECT_SCOPE}" lay-filter="${enumActionEL.SCOPE_FILTER}">
-						${template}
-					</select>
-				</div>
-			</div>`
-        }
-
-        function createAggregationSelect() {
-            const template = UseLayUi.generateOptionTemplate({
-                dataSource: aggergationOptions,
-                addPlaceholderOption: false
-            })
-            return `
-			<div class="layui-form-item">
-				<label class="layui-form-label">聚合方式</label>
-				<div class="layui-input-block">
-					<select name="${enumConst.AGG}">
-						${template}
-					</select>
-				</div>
-			</div>`
-        }
-
-        function createIntervalSelect() {
-            return `
-			<div class="layui-form-item">
-				<label class="layui-form-label">间隔时间</label>
-				<div class="layui-input-block">
-					<select id="${enumActionEL.INTERVAL_EL}" name="${enumConst.INTERVAL}" lay-filter="${enumConst.INTERVAL}">
-						<option value="1000">1秒</option>
-					</select>
-				</div>
-			</div>`
-        }
-
-        function createUnitInput() {
-            return `
-			<div class="layui-form-item">
-				<label class="layui-form-label">单位</label>
-				<div class="layui-input-block" style="flex: 1;">
-                    <input id="${enumActionEL.UNIT_EL}" class="layui-input" value="°C" name="${enumConst.UNIT}" lay-filter="${enumConst.UNIT}" />
-				</div>
-			</div>`
-        }
-
-        function generatorEventlisten() {
-            form.on(`select(${enumActionEL.SCOPE_FILTER})`, event => {
-                const value = event.value || 0
-                linkageIntervalSelect(value)
-            })
-        }
-
-        function linkageIntervalSelect(value) {
-            const options = defaultIntervalOptions.find(item => Number(item.id) === Number(value))?.linkage
-            const template = UseLayUi.generateOptionTemplate({
-                dataSource: options,
-                addPlaceholderOption: false
-            })
-            $(`#${enumActionEL.INTERVAL_EL}`).html(template)
-            form.render('select')
-        }
-
-        /**
-         * @description 回显
-         */
-        function echoData() {
-            const { dataSources = [] } = currentNodeData
-            const { additional = {} } = dataSources[0] || {}
-            const { [enumBindKey.EFFECT_SCOPE]: effectScope = 1000 } = additional
-            linkageIntervalSelect(effectScope)
-            form.val(CONTAINER_FILTER, additional)
-        }
-
-        const refresh = echoRefreshFn
-        echoRefreshFn = function () {
-            refresh.apply(this, arguments)
-            echoData()
-        }
-
-        fragment.append(title)
-        $(chartBindContainer).append(createSwitchBindTypeRadio())
-        $(chartBindContainer).append(createQueryScopeSelect())
-        $(chartBindContainer).append(createAggregationSelect())
-        $(chartBindContainer).append(createIntervalSelect())
-        chartType === DASHBOARD_CHART && $(chartBindContainer).append(createUnitInput())
-        fragment.append(chartBindContainer)
-        $(container).append(fragment)
-        generatorEventlisten()
-    }
-
-    /**
-     * @description 创建数据交互模块
-     */
-    function createInteractionPanel() {
-        const fragment = document.createDocumentFragment()
-        const title = createTitle('数据交互')
-        $(title).addClass('override__title--default')
-        fragment.append(title)
-        generateActionEventNode(interactionList).forEach(item => {
-            const panel = createPanel()
-            $(panel).addClass('override__panel--default').append(item)
-            $(fragment).append(panel)
-        })
-        $(container).append(fragment)
-    }
-
-
-    /**
-     * @description 创建动效面版
-     */
-    function createDynamicEffectPanel() {
-        const fragment = document.createDocumentFragment()
-        const title = createTitle('数据动效')
-        $(title).addClass('override__title--default')
-        fragment.append(title)
-        generateActionEventNode(dynamicEffectList).forEach(item => {
-            const panel = createPanel()
-            $(panel).addClass('override__panel--default').append(item)
-            $(fragment).append(panel)
-        })
-        $(container).append(fragment)
-    }
-
-    /**
-     * @description 变量图片动效面板
-     */
-    function createVarImagePanel() {
-        dynamicEffectList.push({
-            label: '设置变量值图片',
-            type: enumDynamicEffectType.IMAGE,
-            category: enumCategory.ACT,
-        })
-        createDynamicEffectPanel()
-    }
-
-    /**
-     * @description 创建提交按钮
-     */
-    function createSubmitPanel() {
-        const panel = createPanel()
-        $(panel).addClass('data-source__submit-panel').append(`<button type="button" lay-submit lay-filter="formDataSource" class="layui-btn">保存</button>`)
-        $(container).append(panel)
-        form.on('submit(formDataSource)', async function (data) {
-            if (!hasSavePermission()) {
-                UseLayUi.topErrorMsg('没有权限')
-                return
-            }
-            const { field } = data
-            const value = getValueOnSubmit(field)
-            await to(autoSaveGraphInfo())
-            const [err, res] = await to(ConfigurationNodeApi.updateNodeInfo(value))
-            if (err) return
-            UseLayUi.successMsg()
-            await getNodeBindInfo()
-            return false;
-        });
-    }
-
-    function getValueOnSubmit(field) {
-        const basicAttr = sidebarInstance.enumCellBasicAttribute
-        const componentType = sidebarInstance.enumComponentType
-
-        const renderMapping = {
-            [componentType.VAR_IMAGE]: getSubmitValue,
-            [componentType.CHARTS]: getSubmitValue,
-            [componentType.TITLE]: getSubmitValue,
-            [componentType.VARIABLE]: getSubmitValue,
-            [componentType.LINE]: getSubmitValue,
-            [componentType.REAL_TIME]: getSubmitValue,
-            [componentType.LINE_CHART]: getSubmitValue,
-            [componentType.BAR_CHART]: getSubmitValue,
-            [componentType.DASHBOARD_CHART]: getSubmitValue,
-            [componentType.DEFAULT]: getSubmitValue,
-            [componentType.VIDEO]: getVideoSubmitValue,
-            [componentType.SWITCH]: getSwitchSubmitValue,
-            [componentType.PARAMS_SETTING_BUTTON]: getSwitchSubmitValue,
-            [componentType.IMAGE]: getSubmitValue
-        }
-
-        const cell = vertices[0]
-        const type = graph.getAttributeForCell(cell, basicAttr.COMPONENT_TYPE)
-        return renderMapping[type]?.(field) || {}
-
-        function getSubmitValue(field) {
-            const ENABLED_FLAG = 'on'
-            const additionalKey = HandleDataSource.enumConst
-
-            const value = {
-                configurationId,
-                contentId: currentPageId.id,
-                nodeId: graphId,
-                [enumCategory.ACT]: [],
-                [enumCategory.EVENT]: [],
-                [enumCategory.DATA_SOURCE]: {
-                    [enumDataSourceConst.ORG_ID]: field[enumDataSourceConst.ORG_ID],
-                    [enumDataSourceConst.DEVICE_ID]: field[enumDataSourceConst.DEVICE_ID],
-                    [enumDataSourceConst.SLAVE_DEVICE_ID]: field[enumDataSourceConst.SLAVE_DEVICE_ID] ? field[enumDataSourceConst.SLAVE_DEVICE_ID] : '',
-                    [enumDataSourceConst.ATTR]: field[enumDataSourceConst.ATTR],
-                    [enumDataSourceConst.ADDITIONAL]: field[additionalKey.DATA_TYPE] ? {
-                        [additionalKey.AGG]: field[additionalKey.AGG],
-                        [additionalKey.DATA_TYPE]: field[additionalKey.DATA_TYPE],
-                        [additionalKey.INTERVAL]: field[additionalKey.INTERVAL],
-                        [additionalKey.EFFECT_SCOPE]: field[additionalKey.EFFECT_SCOPE],
-                        ...(field[additionalKey.UNIT] ? { [additionalKey.UNIT]: field[additionalKey.UNIT] } : {})
-                    } : null
-                },
-            }
-            const allType = [...interactionList, ...dynamicEffectList]
-            for (const item of allType) {
-                if (field[item.type] === ENABLED_FLAG) {
-                    const enableItem = currentNodeData[item.category].find(each => each.type === item.type)
-                    if (!enableItem) continue
-                    value[item.category].push({
-                        type: item.type,
-                        enabled: true,
-                    })
-                } else {
-                    value[item.category].push({
-                        type: item.type,
-                        enabled: false,
-                    })
-                }
-            }
-
-            return value
-        }
-
-        function getVideoSubmitValue() {
-            const value = {
-                configurationId,
-                contentId: currentPageId.id,
-                nodeId: graphId,
-                [enumCategory.DATA_SOURCE]: {
-                    [enumDataSourceConst.ORG_ID]: 'b4dd6e2b-6e0f-413c-bf5a-70133bd571e8',
-                    [enumDataSourceConst.DEVICE_ID]: '6d9043f0-f1f7-11ec-98ad-a9680487d1e0',
-                    [enumDataSourceConst.ATTR]: 'attr',
-                    [enumDataSourceConst.ADDITIONAL]: field
-                },
-            }
-            return value
-        }
-
-        /**
-         * @description 处理开关组件的保存值 
-         * @returns 
-         */
-        function getSwitchSubmitValue(field) {
-            const dataSources = getDataSourceBindValue()
-            const enableStatus = getEnableStatus(field)
-            return { configurationId, contentId: currentPageId.id, nodeId: graphId, dataSources, ...enableStatus }
-        }
-
-
-        /**
-         * @description 获取开启状态
-         */
-        function getEnableStatus(field = {}) {
-            const ENABLED_FLAG = 'on'
-            const value = {}
-            const hasExistEl = $(`.layui-form[lay-filter="${CONTAINER_FILTER}"]`).find('input[type="checkbox"]')
-
-            // 筛选页面中存在的数据动效事件交互复选框
-            const allState = []
-            $(hasExistEl).each((i) => {
-                const state = $(hasExistEl[i]).attr('name')
-                allState.push(state)
-            })
-            const allType = [...interactionList, ...dynamicEffectList].filter(item => allState.includes(item.type))
-
-            for (const item of allType) {
-                !value[item.category] && (value[item.category] = [])
-                value[item.category].push({
-                    type: item.type,
-                    enabled: field[item.type] === ENABLED_FLAG,
-                })
-            }
-            return value
-        }
-    }
-
-    /**
-     * @description 处理设置变量图片
-     */
-    function handleSettingVarImage(event) {
-
-        const enumActionEl = {
-            /**
-             * @description layer 保存按钮
-             */
-            LAYER_SUBMIT_FILTER: 'varImageLayerFilter',
-
-            /**
-             * @description 上传图片layer 按钮控制
-             */
-            IMAGE_LAYER_FILTER: 'uploadImageLayerFilter',
-
-            /**
-             * @description 行控制
-             */
-            ROW_FILTER: 'varImageTableRowFilter',
-
-            /**
-             * @description 颜色控制
-             */
-            COLOR_PICKER_FILTER: 'varImageTableColorPickerFilter',
-
-            /**
-             * @description 最小值控制
-             */
-            MIN_FILTER: 'varImageTableMinFilter',
-
-            /**
-             * @description 最大值控制
-             */
-            MAX_FILTER: 'varImageTableMaxFilter',
-
-            /**
-             * @description 表体
-             */
-            TABLE_BODY_EL: 'variableImageTable',
-
-            /**
-             * @description 添加行控制
-             */
-            ADD_ROW_EL: 'variableImageTableAddRow',
-
-            /**
-             * @description 设置图片控制
-             */
-            SET_IMG_EL: 'variableImageTableSetImgEl',
-
-            /**
-             * @description 预览区域控制
-             */
-            PREVIEW_IMG_CONTAINER: 'img__container',
-
-            /**
-             * @description 删除图片控制
-             */
-            DEL_PREVIEW_IMG: 'img__delete',
-
-            /**
-             * @description 删除行控制
-             */
-            DEL_ROW_EL: 'variableImageTableDelRow',
-
-            /**
-             * @description
-             */
-            DATA_SOURCE_COMP_EL: 'varImgDataSourceEl',
-
-            /**
-             * @description 默认图片
-             */
-            DEFAULT_IMAGE_EL: 'defaultImageEl',
-
-            /**
-             * @description 行预览
-             */
-            ROW_PREVIEW_IMG: 'rowPreviewImg',
-
-            /**
-             * @description 默认图片filter
-             */
-            DEFAULT_IMAGE_FILTER: 'defaultImageFilter'
-        }
-
-        const enumConst = HandleDynamicEffect.enumVarImageConst
-
-        let addRowNumber = 0
-
-        let getDataSourceValue = () => {
-        }
-
-        const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
-
-        /**
-         * @description 监听表格中的事件
-         */
-        function generatorEventListen() {
-            createInputListener()
-            createAddRowEvent()
-            createDelRowEvent()
-        }
-
-        /**
-         * @description 删除行
-         */
-        function createDelRowEvent() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.DEL_ROW_EL}`, (event) => {
-                $(event.target).parents('tr').remove()
-            })
-        }
-
-        /**
-         * @description 添加行事件
-         */
-        function createAddRowEvent() {
-            $(`#${enumActionEl.ADD_ROW_EL}`).on('click', () => {
-                addRecord()
-            })
-        }
-
-        /**
-         * @description 创建输入验证
-         */
-        function createInputListener() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`)
-                .on('input', `.${enumActionEl.MIN_FILTER}`, event => {
-                    const minVal = $(event.target).val()
-                    const maxVal = $(event.target).parents('tr').find(`input.${enumActionEl.MAX_FILTER}`).val()
-                    if (maxVal !== '' && Number(minVal) > Number(maxVal)) {
-                        layer.tips('输入值大于最大值', $(event.target), {
-                            tips: 1,
-                        });
-                    }
-                })
-                .on('input', `.${enumActionEl.MAX_FILTER}`, event => {
-                    const maxVal = $(event.target).val()
-                    const minVal = $(event.target).parents('tr').find(`input.${enumActionEl.MIN_FILTER}`).val()
-                    if (minVal !== '' && Number(maxVal) < Number(minVal)) {
-                        layer.tips('输入值小于最小值', $(event.target), {
-                            tips: 1,
-                        });
-                    }
-                })
-        }
-
-        /**
-         * @description 添加记录
-         */
-        function addRecord() {
-            const rowFormFilter = getRowFilter(addRowNumber)
-            const content = `
-              <tr class="layui-form" lay-filter="${rowFormFilter}">
-                <td>
-                    <div class="layui-form-item">
-                        <input class="layui-input ${enumActionEl.MIN_FILTER}" autocomplete="off" type="number" name="${enumConst.MIN}" lay-filter="${enumConst.MIN}" lay-verType="tips" lay-verify="required" />
-                    </div>
-                </td>
-                <td>
-                    <div class="layui-form-item">
-                        <input class="layui-input ${enumActionEl.MAX_FILTER}"" autocomplete="off" type="number" name="${enumConst.MAX}" lay-filter="${enumConst.MAX}" lay-verType="tips" lay-verify="required" />
-                    </div>
-                </td>
-                <td>
-                    <div class="${enumActionEl.ROW_PREVIEW_IMG}"></div>
-                </td>
-                <td style="text-align: center">
-                  <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_ROW_EL}">删除</button>
-                </td>
-              </tr>
-            `
-            $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
-            form.render()
-            const el = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${rowFormFilter}"] .${enumActionEl.ROW_PREVIEW_IMG}`)
-            generateUploadImgContainer({ el })
-            addRowNumber++
-        }
-
-
-        /**
-         * @description 回显数据
-         */
-        function echoFormData(info) {
-            const { condition = [] } = info
-            for (let index = 0; index < condition.length; index++) {
-                const item = condition[index]
-                if (item[enumConst.DEFAULT_IMAGE_FLAG]) continue
-                addRecord()
-                const rowFilter = getRowFilter(index)
-                $(`#${enumActionEl.TABLE_BODY_EL}`).find(`tr[lay-filter="${rowFilter}"] .${enumActionEl.PREVIEW_IMG_CONTAINER}>img`).attr('src', item[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-                form.val(rowFilter, { ...item })
-            }
-        }
-
-        function echoDefaultImage(info) {
-            const { condition } = info
-            const data = condition.find(item => item[enumConst.DEFAULT_IMAGE_FLAG])
-            if (data) {
-                $(`#${enumActionEl.DEFAULT_IMAGE_EL}`).find(`.${enumActionEl.PREVIEW_IMG_CONTAINER}>img`).attr('src', data[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-                form.val(enumActionEl.DEFAULT_IMAGE_FILTER, { ...data })
-            }
-        }
-
-        /**
-         * @description 验证最大最小值
-         * @param tableData
-         * @returns {boolean}
-         */
-        function validate(tableData) {
-            let validateFlag = true
-            for (let i = 0; i < tableData.length; i++) {
-                const { min, max } = tableData[i]
-                if (Number(min) > Number(max)) {
-                    validateFlag = false
-                    layer.tips('输入值大于最大值', $(`#${enumActionEl.TABLE_BODY_EL} tr`).eq(i).find(`input[name="${enumConst.MIN}"]`))
-                    break
-                } else if (Number(max) < Number(min)) {
-                    validateFlag = false
-                    layer.tips('输入值小于最小值', $(`#${enumActionEl.TABLE_BODY_EL} tr`).eq(i).find(`input[name="${enumConst.MAX}"]`))
-                    break
-                }
-            }
-            return validateFlag
-        }
-
-        /**
-         * @description
-         */
-        async function submit(callback) {
-            if (!hasPermission()) return
-            const data = Array.from({ length: addRowNumber }).map((_, row) => form.val(getRowFilter(row))).filter(item => Object.keys(item).length)
-            const defaultImageConfig = form.val(enumActionEl.DEFAULT_IMAGE_FILTER)
-            defaultImageConfig[enumConst.DEFAULT_IMAGE_FLAG] = true
-            data.push(defaultImageConfig)
-            if (!validate(data)) return
-            const formVal = getDataSourceValue()
-            const formModel = {
-                configurationId,
-                contentId: currentPageId.id,
-                ...formVal,
-                id: graphId,
-                condition: data,
-                type: event.data.type,
-            }
-            await to(autoSaveGraphInfo())
-            const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
-            if (err) return
-            UseLayUi.successMsg()
-            callback()
-        }
-
-        function createLayerForm(type) {
-            const content = `
-                <div class="layui-form" lay-filter="${enumActionEl.DEFAULT_IMAGE_FILTER}" style="display: flex; align-items: center; padding-top: 10px;">
-                    <div style="width: 60px; padding: 9px 10px 9px 20px;">默认图片</div>
-                    <div id="${enumActionEl.DEFAULT_IMAGE_EL}" style="padding: 0;"></div>
-                </div>
-				<div style="width: 300px; padding: 0 0 0 20px;" id="${enumActionEl.DATA_SOURCE_COMP_EL}"></div>
-                <div class="override__table" style="padding: 0 20px">
-                    <table class="layui-table" >
-                        <thead>
-	                        <tr>
-	                            <th style="text-align:center">最小值(>=)</th>
-	                            <th style="text-align:center">最大值(<=)</th>
-	                            <th style="text-align:center">对应图片</th>
-	                            <th style="text-align:center">操作</th>
-	                        </tr>
-                        </thead>
-                        <tbody id="${enumActionEl.TABLE_BODY_EL}"></tbody>
-                    </table>
-                </div>
-				<div style="display:flex;justify-content:center;">
-					<button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_ROW_EL}">添加一条</button>
-				</div>
-				`
-
-            layer.open({
-                title: '变量值图片功能',
-                type: 1,
-                content,
-                skin: 'event-layer__override',
-                area: '700px',
-                btn: ["保存", "取消"],
-                shade: ["0.7", "#fafafa"],
-                offset: '100px',
-                yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
-                        submit(() => {
-                            layer.close(index)
-                            getNodeBindInfo()
-                        })
-                    })
-                },
-                but2(index, layero) {
-                    return false
-                },
-                async success(layero, index) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-                        'lay-submit': '',
-                        'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
-                    })
-                    const { component, echoDataSource, getValue } = generateDataSourceComponent()
-                    getDataSourceValue = getValue
-
-                    const el = $(`#${enumActionEl.DEFAULT_IMAGE_EL}`)
-                    generateUploadImgContainer({ el })
-
-                    $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
-                    form.render()
-                    const info = getLayerBindInfo('act', type)
-                    const { condition = [] } = info
-                    if (!condition.length) {
-                        addRecord()
-                    } else {
-                        echoDataSource(info)
-                        echoFormData(info)
-                        echoDefaultImage(info)
-                    }
-                    generatorEventListen()
-                },
-            })
-        }
-
-        createLayerForm(event.data.type)
-    }
-
-    /**
-     * @description 处理数据交互 - down || up  按下与抬起
-     */
-    function handleDownOrUpEvent(event) {
-
-        // 事件类型
-        const enumEventType = {
-            DOWN: "按下",
-            UP: "抬起",
-            SINGLE: "单击",
-            DOUBLE: "双击",
-        };
-
-        const enumActionEl = {
-
-            /**
-             * @description 表单控制 filter
-             */
-            FORM_FILTER: 'interactionFormFilter',
-
-            /**
-             * @description 表体节点
-             */
-            DEVICE_DATA_BODY_EL: 'deviceDataTbody',
-
-            /**
-             * @description 删除行节点
-             */
-            DEL_ROW_EL: 'deleteRow',
-
-            /**
-             * @description 增加行节点
-             */
-            ADD_ROW_EL: 'addRow',
-
-            /**
-             * @descripton
-             */
-            ROW_FILTER: 'interactionRowFilter',
-
-            /**
-             * @description json editor
-             */
-            EDITOR_JSON: 'editor__json-',
-
-            /**
-             * @description 弹出层保存 filter
-             */
-            LAYER_SUBMIT_FILTER: 'interactionLayerSubmit',
-
-            /**
-             * @description ace builder
-             */
-            JSON: 'ace__builder-json',
-
-            /**
-             * @description 组织树节点
-             */
-            ORG_EL: 'interactionOrgTree',
-        }
-
-
-        /**
-         * @description 所有设备选项
-         * @type {{id: string, name: string, deviceType: string}[]}
-         */
-        let allDeviceOptions = []
-
-        let addRowNumber = 0
-
-        /**
-         * @description 组织id
-         * @type {null}
-         */
-        let orgId = null
-
-        const recordData = {
-            orgId: null,
-            enabled: false
-        }
-
-        const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
-
-        /**
-         * @description 枚举常量
-         * @enum DEVICE
-         */
-        const enumConst = {
-            /**
-             * @description 设备
-             */
-            DEVICE: 'deviceId',
-            /**
-             * @description 子设备
-             */
-            SLAVE_DEVICE: 'slaveDeviceId',
-            /**
-             * @description 变量
-             */
-            ATTR: 'attr',
-            /**
-             * @description 下发值
-             */
-            VALUE: 'value',
-
-            /**
-             * @description 方式
-             */
-            WAY: 'way',
-
-            /**
-             * @description 组织id
-             */
-            ORG_ID: 'orgId',
-        }
-
-        const sendInstructionWay = {
-            ONE_WAY: 'oneway',
-            TWO_WAY: 'twoway',
-        }
-
-        /**
-         * @description 创建回显数据 查询出所有网关设备和直连设备
-         */
-        async function getAllGatewayDeviceAndConnectionDevice() {
-            if (!recordData.orgId) return
-            const [err, res] = await to(ConfigurationNodeApi.getAllGatewayDeviceAndConnectionDevice(recordData.orgId))
-            allDeviceOptions = res
-            mountAllDeviceToSelect()
-        }
-
-        /**
-         * @description 将设备选项挂载到节点中
-         */
-        function mountAllDeviceToSelect() {
-            const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
-            UseLayUi.nextTick(() => form.render('select'))
-        }
-
-        /**
-         * @description 创建JSON编辑器
-         * @param el
-         * @param datum
-         */
-        function createEditor(el, datum = {}) {
-            const editor = ace.edit(el, {
-                maxLines: 10, // 最大行数，超过会自动出现滚动条
-                minLines: 5, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-                fontSize: 14, // 编辑器内字体大小
-                tabSize: 2, // 制表符设置为 4 个空格大小
-            });
-            editor.session.setMode("ace/mode/json");
-            editor.getSession().on('change', (event, editor) => {
-                $(`#${el}`).parent().find(`textarea[name="${enumConst.VALUE}"]`).val(editor.getValue())
-            })
-            editor.setValue(datum[enumConst.VALUE] ? datum[enumConst.VALUE] : "{}")
-        }
-
-        /**
-         * @description 创建组织树
-         */
-        async function createOrgTreeSelect() {
-            const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
-            treeList = res
-            if (err) return
-            UseLayUi.createTreeSelect({
-                elem: `#${enumActionEl.ORG_EL}`,
-                layFilter: enumConst.ORG_ID,
-                label: '组织',
-                singleUsage: false,
-                layVerify: 'required',
-                layVerType: 'tips',
-                treeProps: {
-                    data: res,
-                    onlyIconControl: true,
-                    click(node) {
-                        recordData.orgId = node.data.id
-                        getAllGatewayDeviceAndConnectionDevice()
-                    },
-                },
-            })
-        }
-
-
-
-        /**
-         * @description 添加行
-         * @param datum
-         */
-        function addRecord(datum) {
-            const content = `
-              <tr class="layui-form" lay-filter="${getRowFilter(addRowNumber)}">
-                <td>
-                  <select name="${enumConst.DEVICE}" lay-filter="${enumConst.DEVICE}" lay-verType="tips" lay-verify="required"></select>
-                </td>
-                <td>
-                    <form action="" style="display: flex">
-                        <div class="override__radio-default">
-                            <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAY}" type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.ONE_WAY}" title="单向" checked="">
-                            <label for="${getRowFilter(addRowNumber)}${sendInstructionWay.ONE_WAY}" class="override__radio-label">单向</label>
-                        </div>
-                        <div class="override__radio-default">
-                            <input id="${getRowFilter(addRowNumber)}${sendInstructionWay.TWO_WAY}"  type="radio" name="${enumConst.WAY}" lay-ignore value="${sendInstructionWay.TWO_WAY}" title="双向">
-                            <label for="${getRowFilter(addRowNumber)}${sendInstructionWay.TWO_WAY}" class="override__radio-label">双向</label>
-                        </div>
-                    </form>
-                </td>
-                <td class="${enumActionEl.JSON}">
-                  <div style="width: 100%;height: 100%;">
-                    <div id="${enumActionEl.EDITOR_JSON}${addRowNumber}"></div>
-                    <textarea style="display: none" name="${enumConst.VALUE}" placeholder="请输入命令" lay-verType="tips" class="layui-textarea"></textarea>
-                  </div>
-                </td>
-                <td>
-                  <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_ROW_EL}">删除</button>
-                </td>
-              </tr>
-            `
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).append(content)
-            setDeviceOptions(addRowNumber)
-            createEditor(`${enumActionEl.EDITOR_JSON}${addRowNumber}`, datum)
-            form.render('select', getRowFilter(addRowNumber))
-            addRowNumber++
-        }
-
-
-        /**
-         * @description 删除行
-         */
-        function createDeleteRowListenEvent() {
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).on('click', `.${enumActionEl.DEL_ROW_EL}`, (event) => {
-                // $(event.target).parents('tr').find('editor')
-                $(event.target).parents('tr').remove()
-            })
-        }
-
-        /**
-         * @description 新增行
-         */
-        function createAddRowListenEvent() {
-            $(`#${enumActionEl.ADD_ROW_EL}`).on('click', () => {
-                addRecord()
-                const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-                $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr`).last().find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
-                form.render('select')
-            })
-        }
-
-        /**
-         * @description 设置设备选项
-         */
-        function setDeviceOptions(row) {
-            const generateOption = UseLayUi.generateOptionTemplate({ dataSource: allDeviceOptions })
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr[lay-filter="${getRowFilter(row)}"]`).find(`select[name="${enumConst.DEVICE}"]`).html(generateOption)
-        }
-
-        /**
-         * @description 下拉选项挂载
-         */
-        function createSelectOptionMountEvent() {
-            $(`#${enumActionEl.DEVICE_DATA_BODY_EL}`).on('click', '.layui-form-select', event => {
-                const width = event.currentTarget.offsetWidth || 200
-                const height = event.currentTarget.offsetHeight || 38
-                const offset = $(event.currentTarget).offset()
-                $(event.currentTarget).find('dl').css({
-                    position: 'fixed',
-                    'min-width': width + 'px',
-                    top: offset.top + height + 'px',
-                    left: offset.left + 'px'
-                })
-            })
-        }
-
-        /**
-         * @description 生成事件监听
-         */
-        function generatorEventListen() {
-            createDeleteRowListenEvent()
-            createAddRowListenEvent()
-            createSelectOptionMountEvent()
-        }
-
-        /**
-         * @description 回显表单数据
-         */
-        function echoFormData(info) {
-            const { content: { data = [] } = {} } = info
-            data.forEach((datum, index) => {
-                addRecord(datum)
-                form.val(getRowFilter(index), datum)
-            })
-        }
-
-        /**
-         * @description 回显组织树
-         */
-        function echoOrgTree(id) {
-            recordData.orgId = id
-            const node = UseLayUi.findTreeObjectByField(treeList, id)
-            UseLayUi.nextTick(() => {
-                $(`#${enumActionEl.ORG_EL} input[name="${enumConst.ORG_ID}"]`).val(recordData.orgId).parent().find('span').html(node?.name)
-            })
-        }
-
-        /**
-         * @description 判断是否为正确的JSON结构
-         * @param {string} string
-         * @returns
-         */
-        function isJson(string) {
-            if (typeof string === 'string') {
-                try {
-                    const obj = JSON.parse(string)
-                    if (typeof obj === 'object' && obj !== null) {
-                        return true
-                    }
-                } catch (e) {
-                    return false
-                }
-            }
-            return false
-        }
-
-        /**
-         * @description 表单验证
-         * @param tableData
-         * @returns {boolean}
-         */
-        function validate(tableData) {
-            let validateFlag = true
-
-            const formModel = form.val(enumActionEl.FORM_FILTER)
-            if (!formModel[enumConst.ORG_ID]) return false
-
-            for (let i = 0; i < tableData.length; i++) {
-                const { value } = tableData[i]
-                if (!isJson(value)) {
-                    validateFlag = false
-                    layer.tips('下发值不正确', $(`#${enumActionEl.DEVICE_DATA_BODY_EL} tr`).eq(i).find(`td.${enumActionEl.JSON}`), { tips: 1 })
-                    break
-                }
-            }
-            return validateFlag
-        }
-
-
-
-        /**
-         * @description 保存
-         */
-        async function submit(callback) {
-            if (!hasPermission()) return
-            const data = Array.from({ length: addRowNumber }).map((_, row) => form.val(getRowFilter(row))).filter(item => Object.keys(item).length)
-            if (!validate(data)) return
-            const formModal = {
-                ...recordData,
-                configurationId,
-                // orgId,
-                contentId: currentPageId.id,
-                id: graphId,
-                content: {
-                    data,
-                },
-                type: event.data.type,
-            };
-            await to(autoSaveGraphInfo())
-            const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(formModal))
-            if (err) return
-            UseLayUi.successMsg()
-            callback()
-        }
-
-        /**
-         * @description 创建弹出层表单
-         * @param event
-         */
-        function createLayerForm(type) {
-            const content = `
-                <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
-                    <div style="width:400px">
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">事件</label>
-                            <div class="layui-input-block">
-                                <input type="text" name="event" class="layui-input" value="${enumEventType[type]}" disabled>
-                            </div>
-                        </div>
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">动作</label>
-                            <div class="layui-input-block">
-                                <select name="action" lay-verify="required">
-                                    <option value="0" selected>给变量赋值</option>
-                                </select>
-                            </div>
-                        </div>
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">类型</label>
-                            <div class="layui-input-block">
-                                <input type="radio" name="type" value="1" title="联网设备" checked>
-                                <input type="radio" name="type" value="2" title="产品/场景" disabled>
-                            </div>
-                        </div>
-                        <div id="${enumActionEl.ORG_EL}"></div>
-                    </div>
-                </form>
-                <div class="override__table">
-                    <table class="layui-table" >
-                        <thead>
-                        <tr>
-                            <th style="text-align:center">选择设备</th>
-                            <th style="text-align:center">单向 / 双向</th>
-                            <th style="text-align:center">下发值</th>
-                            <th style="text-align:center">操作</th>
-                        </tr>
-                        </thead>
-                        <tbody id="${enumActionEl.DEVICE_DATA_BODY_EL}"></tbody>
-                    </table>
-                    <div style="display:flex;justify-content:center;">
-                        <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_ROW_EL}">添加一条</button>
-                    </div>
-                </div>`
-
-            layer.open({
-                title: '创建交互',
-                content,
-                skin: 'event-layer__override',
-                // area: ["1100px", "700px"],
-                area: '1100px',
-                offset: '100px',
-                btn: ["保存", "取消"],
-                shade: ["0.7", "#fafafa"],
-                yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
-                        submit(() => {
-                            layer.close(index)
-                            getNodeBindInfo()
-                        })
-                    })
-                },
-                but2(index, layero) {
-                    return false
-                },
-                async success(layero, index) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-                        'lay-submit': '',
-                        'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
-                    })
-                    await createOrgTreeSelect()
-                    const info = getLayerBindInfo('event', type)
-                    const { content: { data = [] } = {}, orgId, enabled } = info
-                    Object.assign(recordData, { orgId, enabled })
-                    await getAllGatewayDeviceAndConnectionDevice()
-                    if (!info || !data.length) {
-                        addRecord()
-                    } else {
-                        echoFormData(info)
-                    }
-                    generatorEventListen()
-                    form.render()
-                    echoOrgTree(orgId)
-                },
-            })
-        }
-
-        createLayerForm(event.data.type)
-    }
-
-    /**
-     * @description 处理单击 or 双击事件
-     */
-    function handleClickOrDbClick(event) {
-        const basicAttr = sidebarInstance.enumCellBasicAttribute
-        const componentType = sidebarInstance.enumComponentType
-        const currentNodeType = nodeInfo.getAttribute(basicAttr.COMPONENT_TYPE)
-        const isControlComponent = [componentType.SWITCH, componentType.PARAMS_SETTING_BUTTON].includes(currentNodeType)
-
-        const enumEventType = {
-            DOWN: "按下",
-            UP: "抬起",
-            SINGLE: "单击",
-            DOUBLE: "双击",
-        };
-
-        /**
-         * @description
-         */
-        const enumConst = {
-            EVENT: 'event',
-            ACTION: 'actionType',
-            PAGE_VALUE: 'pageValue',
-            LINK_VALUE: 'linkValue',
-
-            /**
-             * @description 下发指令
-             */
-            COMMAND: 'command',
-
-            /**
-             * @description 属性占位符
-             */
-            ATTR_PLACEHOLDER: 'attrPlaceholder',
-
-            WAY: 'way'
-        }
-
-        /**
-         * @description 动作类型
-         */
-        const enumActionType = DispatchCenter.enumPageType
-
-        const enumGetValue = {
-            [enumActionType.PAGE]: enumConst.PAGE_VALUE,
-            [enumActionType.LINK]: enumConst.LINK_VALUE,
-        }
-
-        const enumWayType = {
-            ONE_WAY: 'oneway',
-            TWO_WAY: 'twoway'
-        }
-
-        const enumActionEl = {
-            /**
-             * @description 表单 lay-filter
-             */
-            FORM_FILTER: 'formModelFilter',
-
-            /**
-             * @description 动作 lay-filter
-             */
-            ACTION_SELECT_FILTER: 'actionSelectFilter',
-
-            /**
-             * @description 链接 ID
-             */
-            LINK_EL_ID: 'staticlinkPage',
-
-            /**
-             * @description 页面 ID
-             */
-            PAGE_EL_ID: 'dynamicInputPage',
-
-            /**
-             * @description layer submit filter
-             */
-            LAYER_SUBMIT_FILTER: 'dynamicLinkLayerFilter',
-
-            /**
-             * @description JSON 编辑器容器
-             */
-            EDITOR_CONTAINER: 'editorContainerEL',
-
-            /**
-             * @description JSON 编辑器
-             */
-            EDITOR: 'EDITOR',
-
-            WAY_SELECT: 'dynamicWaySelectEl'
-        }
-
-        /**
-         * @description 
-         */
-        const recordData = {
-            enabled: false
-        }
-
-        /**
-         * @description 回显数据
-         */
-        function echoFormData(data) {
-            const { content = {} } = data
-            const val = {
-                [enumConst.ACTION]: content.type,
-                [enumGetValue[content.type]]: content.value,
-                [enumConst.WAY]: content[enumConst.WAY]
-            }
-            controlFormDisplay(content.type)
-            form.val(enumActionEl.FORM_FILTER, val)
-        }
-
-        /**
-         * @description 控制form
-         * @param {enumActionType} value 
-         */
-        function controlFormDisplay(value) {
-            if (value === enumActionType.PAGE) {
-                $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
-                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'block' })
-                $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'none' })
-                $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'none' })
-            } else if (value === enumActionType.LINK) {
-                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
-                $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'block' })
-                $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'none' })
-                $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'none' })
-            } else if (value === enumActionType.PARAMS_SETTING) {
-                $(`#${enumActionEl.LINK_EL_ID}`).css({ display: 'none' })
-                $(`#${enumActionEl.PAGE_EL_ID}`).css({ display: 'none' })
-                $(`#${enumActionEl.EDITOR_CONTAINER}`).css({ display: 'flex' })
-                $(`#${enumActionEl.WAY_SELECT}`).css({ display: 'block' })
-            }
-        }
-
-        /**
-         * @description 编辑数据交互
-         */
-        async function submit(callback) {
-            if (!hasPermission()) return
-            const formVal = form.val(enumActionEl.FORM_FILTER)
-            const isParamsSetting = formVal[enumConst.ACTION] === enumActionType.PARAMS_SETTING
-            const { COMPONENT_TYPE } = Sidebar.prototype.enumCellBasicAttribute
-            const { SWITCH } = Sidebar.prototype.enumComponentType
-            const isSwitchComponent = vertices[0].getAttribute(COMPONENT_TYPE) === SWITCH
-
-            if (isParamsSetting && isSwitchComponent && (!currentNodeData.act || !currentNodeData.act.find(item => item.type === enumDynamicEffectType.SWITCH))) {
-                UseLayUi.topErrorMsg('请先配置数据动效中的状态设置')
-                return
-            }
-
-            if (isParamsSetting) {
-                if (!isJson(formVal[enumConst.COMMAND])) {
-                    UseLayUi.topErrorMsg('命令配置存在错误')
-                    return
-                }
-            }
-
-            const data = {
-                type: event.data.type,
-                configurationId,
-                contentId: currentPageId.id,
-                id: graphId,
-                orgId: 'b4dd6e2b-6e0f-413c-bf5a-70133bd571e8',
-                ...recordData,
-                content: {
-                    type: formVal[enumConst.ACTION],
-                    value: formVal[enumGetValue[formVal[enumConst.ACTION]]],
-                    ...(isParamsSetting ? {
-                        [enumConst.COMMAND]: formVal[enumConst.COMMAND],
-                        [enumConst.WAY]: formVal[enumConst.WAY]
-                    } : {}),
-                },
-            }
-            await to(autoSaveGraphInfo())
-            const [err, res] = await to(ConfigurationNodeApi.updateNodeEvent(data))
-            if (err) return
-            isControlComponent && overrideCurrentData('event', 'type', res)
-            isControlComponent && echoActionType()
-            UseLayUi.successMsg()
-            callback()
-        }
-
-        /**
-         * @description 生成 动作选项
-         */
-        function generatorActionOptions() {
-            const options = [
-                { name: '打开链接', id: enumActionType.LINK },
-                { name: '打开页面', id: enumActionType.PAGE },
-                ...(isControlComponent ? [{ name: '参数设置', id: enumActionType.PARAMS_SETTING }] : []),
-                { name: '给变量赋值', id: enumActionType.PROPS, disabled: true },
-            ]
-            return UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false })
-        }
-
-        /**
-         * @description 生产页面选项
-         */
-        function generatorPageOptions() {
-            const options = ui.pages.map(item => ({ name: item.getName(), id: item.getId() }))
-            return UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false })
-        }
-
-        function generatorEventListen() {
-            form.on(`select(${enumActionEl.ACTION_SELECT_FILTER})`, (data) => {
-                const { value } = data
-                controlFormDisplay(value)
-            })
-        }
-
-        function isJson(string) {
-            if (typeof string === 'string') {
-                try {
-                    const obj = JSON.parse(string)
-                    if (typeof obj === 'object' && obj !== null) {
-                        return true
-                    }
-                } catch (e) {
-                    return false
-                }
-            }
-            return false
-        }
-
-        function jsonParse(value) {
-            try {
-                return JSON.parse(value)
-            } catch (error) {
-                return {}
-            }
-        }
-
-
-        /**
-         * @description 创建JSON编辑器
-         * @param el
-         * @param datum
-         */
-        function createEditor(record) {
-            let defaultValue = { [enumConst.ATTR_PLACEHOLDER]: 0 }
-            const editor = ace.edit(enumActionEl.EDITOR, {
-                maxLines: 18, // 最大行数，超过会自动出现滚动条
-                minLines: 10, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
-                fontSize: 14, // 编辑器内字体大小
-                tabSize: 2, // 制表符设置为 4 个空格大小
-            });
-            if (record.content && record.content[enumConst.COMMAND]) defaultValue = jsonParse(record.content[enumConst.COMMAND])
-            const stringValue = JSON.stringify(defaultValue, null, 2)
-            editor.insert(stringValue)
-            $(`#${enumActionEl.EDITOR_CONTAINER}`).parent().find(`textarea[name="${enumConst.COMMAND}"]`).val(stringValue)
-            editor.session.setMode("ace/mode/json");
-            editor.getSession().on('change', (event, editor) => {
-                $(`#${enumActionEl.EDITOR_CONTAINER}`).parent().find(`textarea[name="${enumConst.COMMAND}"]`).val(editor.getValue())
-            })
-        }
-
-        /**
-         * @description 创建弹窗表单
-         */
-        function createLayerForm(type) {
-
-            const content = `
-            <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
-                <div style="width: 450px">
-                    <div class="layui-form-item">
-                        <label class="layui-form-label">事件</label>
-                        <div class="layui-input-block">
-                            <input type="text" name="${enumConst.EVENT}" disabled class="layui-input" value="${enumEventType[type]}">
-                        </div>
-                    </div>
-                    <div class="layui-form-item">
-                        <label class="layui-form-label">动作</label>
-                        <div class="layui-input-block">
-                            <select name="${enumConst.ACTION}" lay-verType="tips" lay-verify="required" lay-filter="${enumActionEl.ACTION_SELECT_FILTER}">
-                                ${generatorActionOptions()}
-                            </select>
-                        </div>
-                    </div>
-                    <div class="layui-form-item" id="${enumActionEl.LINK_EL_ID}">
-                        <label class="layui-form-label">链接</label>
-                        <div class="layui-input-block">
-                            <input type="text" lay-verType="tips" name="${enumConst.LINK_VALUE}" class="layui-input">
-                        </div>
-                    </div>
-                    <div class="layui-form-item" id="${enumActionEl.PAGE_EL_ID}" style="display:none">
-                        <label class="layui-form-label">页面</label>
-                        <div class="layui-input-block">
-                            <select name="${enumConst.PAGE_VALUE}" lay-verType="tips" id="pageSelect">
-                                ${generatorPageOptions()}
-                            </select>
-                        </div>
-                    </div>
-                    <div class="layui-form-item" id="${enumActionEl.WAY_SELECT}" style="display:none">
-                        <label class="layui-form-label">单向/双向 ${createHelpMessage(`单向：服务器向网关设备、直连设备发送指令。发送指令后，设备不会返回任何信息。\n
-                        双向：服务器向网关设备、直连设备发送指令。发送指令后，设备返回响应信息。`, 'way')}</label>
-                        <div class="layui-input-block">
-                            <input type="radio" name="${enumConst.WAY}" value="${enumWayType.ONE_WAY}" title="单向" checked="">
-                            <input type="radio" name="${enumConst.WAY}" value="${enumWayType.TWO_WAY}" title="双向">
-                        </div>
-                    </div>
-                    <div id="${enumActionEl.EDITOR_CONTAINER}" style="display: none;">
-                        <div style="width: 80px; text-align: right; padding: 9px 15px;flex: 0 0 80px;">命令 ${createHelpMessage('用户预览模式下，点击参数设置后。输入的变量值将作为"attrPlaceholder"的值,并以JSON格式下发给服务器。', 'command')}</div>
-                        <div id="${enumActionEl.EDITOR}" style="width: 100%; height: 100%;border: 2px solid #eee;"></div>
-                        <textarea name="${enumConst.COMMAND}" style="display: none;" />
-                    </div>
-                </div>
-            </form>
-            `
-
-            layer.open({
-                title: "创建交互",
-                content,
-                area: ["800px", "500px"],
-                btn: ["保存", "取消"],
-                yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
-                        submit(() => {
-                            layer.close(index)
-                            !isControlComponent && getNodeBindInfo()
-                        })
-                    })
-                },
-                btn2(index) {
-                    layer.close(index);
-                },
-                success(layero) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-                        'lay-submit': '',
-                        'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
-                    })
-                    generatorEventListen()
-                    const info = getLayerBindInfo('event', type)
-                    Object.assign(recordData, { enabled: info.enabled })
-                    createEditor(info)
-                    form.render(null, enumActionEl.FORM_FILTER)
-                    if (info) echoFormData(info)
-                },
-                shade: ["0.7", "#fafafa"],
-            });
-        }
-
-        createLayerForm(event.data.type)
-    }
-
-    /**
-     * @description 处理数据动效
-     */
-    function handleDataDynamicEffect(event) {
-
-        const IS_DISPLAY = event.data.type === enumDynamicEffectType.DISPLAY
-        const IS_RUNNING = event.data.type === enumDynamicEffectType.RUNNING
-
-        const enumEventType = {
-            FLASH: '闪烁',
-            DISPLAY: '显示/隐藏',
-            ROTATE: '旋转',
-            RUNNING: '水流动效'
-        }
-
-        const enumActionEl = {
-            ROW_FILTER: 'dataDynamicEffectRowFilter',
-            FORM_FILTER: 'dataDynamicEffectFormFilter',
-            TABLE_BODY_EL: 'dataDynamicEffectTbody',
-            TYPE_EL: 'dataDynamicEffectType',
-            DEL_BTN_EL: 'dataDynamicEffectDelBtn',
-            ADD_BTN_EL: 'dataDynamicEffectAddBtn',
-            DISPLAY_SWITCH_EL: 'visibleOrHidden',
-            LAYER_SUBMIT_FILTER: 'dynamicEffectLayerFilter',
-            MIN_FILTER: 'dynamicEffectMinFilter',
-            MAX_FILTER: 'dynamicEffectMaxFilter',
-            DATA_SOURCE_COMP_EL: 'dynamicDataSourceCompEl',
-        }
-
-        const getRowFilter = (rowNumber) => `${enumActionEl.ROW_FILTER}${rowNumber}`
-
-        /**
-         * @description
-         */
-        const enumConst = {
-            MIN: 'min',
-            MAX: 'max',
-            TYPE: 'type',
-            ORG_ID: 'orgId',
-            DEVICE_ID: 'deviceId',
-            SLAVE_DEVICE_ID: 'slaveDeviceId',
-            ATTR: 'attr',
-            GATEWAY: 'GATEWAY',
-        }
-
-        const enumDisplayType = HandleDynamicEffect.enumDisplayType
-
-        const enumRunningType = HandleDynamicEffect.enumRunningType
-
-        const displayOptions = [
-            { name: '显示', id: enumDisplayType.SHOW },
-            { name: '隐藏', id: enumDisplayType.HIDDEN },
-        ]
-
-        const runningOptions = [
-            { name: '流动', id: enumRunningType.RUN },
-            { name: '静止', id: enumRunningType.STOP },
-        ]
-
-        /**
-         * @description
-         */
-        let addRowNumber = 0
-
-        const recordData = {
-            enabled: false
-        }
-
-        function generateStateOptions(options = []) {
-            const template = UseLayUi.generateOptionTemplate({ dataSource: options, addPlaceholderOption: false })
-            return `
-                <div class="layui-form-item" style="margin-bottom: 0px">
-                    <div class="layui-input-block" style="margin-left: 0px;">
-                        <select name="${enumConst.TYPE}" lay-verType="tips" lay-verify="required">${template}</select>
-                    </div>
-                </div>
-                `
-        }
-
-        /**
-         * @description 添加一条记录
-         */
-        function addRecord() {
-            const content = `
-            <tr class="layui-form" lay-filter="${getRowFilter(addRowNumber)}">
-              ${IS_DISPLAY && `<td>${generateStateOptions(displayOptions)}</td>`}
-              ${IS_RUNNING && `<td>${generateStateOptions(runningOptions)}</td>`}
-              <td>
-                <input autocomplete="off" lay-verType="tips" lay-verify="required" type="number" name="${enumConst.MIN}" class="layui-input ${enumActionEl.MIN_FILTER}">
-              </td>
-              <td>
-                <input autocomplete="off" lay-verType="tips" lay-verify="required" type="number" name="${enumConst.MAX}" class="layui-input ${enumActionEl.MAX_FILTER}">
-              </td>
-              <td style="text-align: center;">
-                <button type="button" class="layui-btn layui-btn-primary layui-border-red ${enumActionEl.DEL_BTN_EL}">删除</button>
-              </td>
-            </tr>
-            `
-            addRowNumber++
-            $(`#${enumActionEl.TABLE_BODY_EL}`).append(content)
-            if (IS_DISPLAY || IS_RUNNING) {
-                form.render()
-            }
-        }
-
-        /**
-         * @description 创建添加记录事件
-         */
-        function createAddRowListenEvent() {
-            $(`#${enumActionEl.ADD_BTN_EL}`).on('click', () => {
-                addRecord()
-            })
-        }
-
-        /**
-         * @description 创建删除行事件
-         */
-        function createDeleteRowListenEvent() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', `.${enumActionEl.DEL_BTN_EL}`, (event) => {
-                $(event.target).parents('tr').remove()
-            })
-        }
-
-
-        /**
-         * @description 创建输入监听
-         */
-        function createInputListener() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`)
-                .on('input', `.${enumActionEl.MIN_FILTER}`, event => {
-                    const minVal = $(event.target).val()
-                    const maxVal = $(event.target).parents('tr').find(`input.${enumActionEl.MAX_FILTER}`).val()
-                    if (maxVal !== '' && Number(minVal) > Number(maxVal)) {
-                        layer.tips('输入值大于最大值', $(event.target), {
-                            tips: 1,
-                        });
-                    }
-                })
-                .on('input', `.${enumActionEl.MAX_FILTER}`, event => {
-                    const maxVal = $(event.target).val()
-                    const minVal = $(event.target).parents('tr').find(`input.${enumActionEl.MIN_FILTER}`).val()
-                    if (minVal !== '' && Number(maxVal) < Number(minVal)) {
-                        layer.tips('输入值小于最小值', $(event.target), {
-                            tips: 1,
-                        });
-                    }
-                })
-        }
-
-
-        /**
-         * @description 下拉选项挂载
-         */
-        function createSelectOptionMountEvent() {
-            $(`#${enumActionEl.TABLE_BODY_EL}`).on('click', '.layui-form-select', event => {
-                const width = event.currentTarget.offsetWidth || 200
-                const height = event.currentTarget.offsetHeight || 38
-                const offset = $(event.currentTarget).offset()
-                $(event.currentTarget).find('dl').css({
-                    position: 'fixed',
-                    'min-width': width + 'px',
-                    top: offset.top + height + 'px',
-                    left: offset.left + 'px'
-                })
-            })
-        }
-
-        /**
-         * @description 创建事件监听
-         */
-        function createEventListen() {
-            createInputListener()
-            createAddRowListenEvent()
-            createDeleteRowListenEvent()
-            createSelectOptionMountEvent()
-        }
-
-        /**
-         * @description 回显数据
-         */
-        function echoData(info) {
-            const { condition = [] } = info
-            echoEachData(condition)
-        }
-
-        /**
-         * @description 回显行数据
-         */
-        function echoEachData(condition = []) {
-            condition.forEach((item, index) => {
-                addRecord()
-                form.val(getRowFilter(index), { ...item })
-            })
-        }
-
-        function validate(tableData) {
-            let validateFlag = true
-            for (let i = 0; i < tableData.length; i++) {
-                const { min, max } = tableData[i]
-                if (Number(min) > Number(max)) {
-                    validateFlag = false
-                    layer.tips('输入值大于最大值', $(`#${enumActionEl.TABLE_BODY_EL} tr`).eq(i).find(`input[name="${enumConst.MIN}"]`), { tips: 1 })
-                    break
-                } else if (Number(max) < Number(min)) {
-                    validateFlag = false
-                    layer.tips('输入值小于最小值', $(`#${enumActionEl.TABLE_BODY_EL} tr`).eq(i).find(`input[name="${enumConst.MAX}"]`), { tips: 1 })
-                    break
-                }
-            }
-            return validateFlag
-        }
-
-        async function submit(callback) {
-            if (!hasPermission()) return
-            const tableData = Array.from({ length: addRowNumber }).map((_, index) => form.val(getRowFilter(index))).filter(obj => Object.keys(obj).length)
-            if (!validate(tableData)) return
-            const formVal = form.val(enumActionEl.FORM_FILTER)
-            const formModel = {
-                configurationId,
-                contentId: currentPageId.id,
-                ...formVal,
-                id: graphId,
-                condition: tableData,
-                type: event.data.type,
-                ...recordData
-            }
-            await to(autoSaveGraphInfo())
-            const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
-            if (err) return
-            UseLayUi.successMsg()
-            callback()
-        }
-
-        function isExistInArea(min, max, value) {
-            return Number(value) >= Number(min) && Number(value) <= Number(max)
-        }
-
-        function createLayerForm(type) {
-            const content = `
-                <form class="layui-form" lay-filter="${enumActionEl.FORM_FILTER}">
-                    <div style="width:400px">
-                        <div class="layui-form-item">
-                            <label class="layui-form-label">类型</label>
-                            <div class="layui-input-block">
-                                <input type="radio" name="type" value="1" title="联网设备" checked>
-                                <input type="radio" name="type" value="2" title="产品/场景" disabled>
-                            </div>
-                        </div>
-                        
-                        <div id="${enumActionEl.DATA_SOURCE_COMP_EL}"></div>
-                        
-                    </div>
-                </form>
-                <div class="override__table">
-                    <table class="layui-table" >
-                        <thead>
-                        <tr>
-                            ${IS_DISPLAY ? '<th style="text-align:center">类型</th>' : ''}
-                            ${IS_RUNNING ? '<th style="text-align:center">类型</th>' : ''}
-                            <th style="text-align:center">最小值(>=)</th>
-                            <th style="text-align:center">最大值(<=)</th>
-                            <th style="text-align:center">操作</th>
-                        </tr>
-                        </thead>
-                        <tbody id="${enumActionEl.TABLE_BODY_EL}"></tbody>
-                    </table>
-                    <div style="display:flex;justify-content:center;">
-                        <button type="button" class="layui-btn layui-btn-primary layui-border-blue" id="${enumActionEl.ADD_BTN_EL}">添加一条</button>
-                    </div>
-                </div>
-                `
-
-            layer.open({
-                title: enumEventType[type],
-                content,
-                skin: 'event-layer__override',
-                btn: ['保存', '取消'],
-                offset: '100px',
-                area: (IS_DISPLAY || IS_RUNNING) ? '1000px' : '800PX',
-                success(layero) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-                        'lay-submit': '',
-                        'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
-                    })
-
-                    // render data source tree
-                    const {
-                        component,
-                        echoDataSource,
-                    } = generateDataSourceComponent({ overrideClass: 'dynamic-effect__data-source-comp--override' })
-                    $(`#${enumActionEl.DATA_SOURCE_COMP_EL}`).append(component)
-                    form.render()
-
-                    const info = getLayerBindInfo('act', type)
-                    const { condition = [], enabled } = info
-                    Object.assign(recordData, { enabled })
-                    if (info && condition.length) {
-                        echoDataSource(info)
-                        echoData(info)
-                    } else {
-                        addRecord()
-                    }
-                    createEventListen()
-                    form.render()
-                },
-                yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
-                        submit(() => {
-                            layer.close(index)
-                            getNodeBindInfo()
-                        })
-                    })
-                },
-                btn2() {
-
-                },
-            })
-        }
-
-        createLayerForm(event.data.type)
-
-    }
-
-
-    /**
-     * @description
-     * @param {} event 
-     */
-    function handleStateSetting(event) {
-
-        const enumActionEl = {
-            TABLE_BODY_EL: 'stateTableBodyEl',
-            LAYER_SUBMIT_FILTER: 'stateSettingSubmitFilter',
-            ENABLE_FILTER: 'enableFilter',
-            CLOSE_FILTER: 'closeFilter',
-            SET_IMG_EL: 'variableImageTableSetImgEl',
-            PREVIEW_IMG_CONTAINER: 'img__container',
-            DEL_PREVIEW_IMG: 'img__delete',
-            PREVIEW_CONTAINER: 'previewContainer'
-        }
-
-        const enumConst = {
-
-            TYPE: 'type',
-
-            /**
-             * @description 开启类型
-             */
-            ENABLE_TYPE: 'enable',
-
-            /**
-             * @description 关闭类型
-             */
-            CLOSE_TYPE: 'close',
-
-            /**
-             * @description 图片来源
-             */
-            IMAGE_ORIGIN: 'imageOrigin',
-
-            /**
-             * @description 图库图形类别
-             */
-            IMAGE_GALLERY_CATEGORY: 'category',
-
-            /**
-             * @description 图表图形路径
-             */
-            IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
-
-            /**
-             * @description 状态设置 值
-             */
-            VALUE: 'value'
-        }
-
-        const recordData = {
-            enabled: false
-        }
-
-        const StateDefaultValue = {
-            enable: {
-                [enumConst.TYPE]: enumConst.ENABLE_TYPE,
-                [enumConst.IMAGE_ORIGIN]: 'gallery',
-                [enumConst.IMAGE_GALLERY_CATEGORY]: 'switch',
-                [enumConst.IMAGE_GALLERY_IMAGE_PATH]: `${Proxy_Prefix}/images/thingskit/switch-on.svg`,
-            },
-            close: {
-                [enumConst.TYPE]: enumConst.CLOSE_TYPE,
-                [enumConst.IMAGE_ORIGIN]: 'gallery',
-                [enumConst.IMAGE_GALLERY_CATEGORY]: 'switch',
-                [enumConst.IMAGE_GALLERY_IMAGE_PATH]: `${Proxy_Prefix}/images/thingskit/switch-off.svg`,
-            }
-        }
-
-        function createUploadImgContainer(info) {
-            const enableEl = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${enumActionEl.ENABLE_FILTER}"] .${enumActionEl.PREVIEW_CONTAINER}`)
-            const closeEl = $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${enumActionEl.CLOSE_FILTER}"] .${enumActionEl.PREVIEW_CONTAINER}`)
-            generateUploadImgContainer({ el: enableEl })
-            generateUploadImgContainer({ el: closeEl })
-        }
-
-        function addRecord(filter, state, defaultValue) {
-            return `
-            <tr class="layui-form" lay-filter="${filter}">
-                <td>
-                    ${state}
-                </td>
-                <td>
-                    <div class="layui-form-item">
-                        <input class="layui-input" autocomplete="off" type="number" name="${enumConst.VALUE}" lay-verType="tips" lay-verify="required" />
-                        <input class="layui-input" autocomplete="off" style="display: none;" name="${enumConst.TYPE}" lay-verType="tips" lay-verify="required" />
-                    </div>
-                </td>
-                <td class=${enumActionEl.PREVIEW_CONTAINER}>
-                </td>
-              </tr>`
-        }
-
-        /**
-         * @descrition 回显数据
-         */
-        function echoData(info = {}) {
-            const { condition = [] } = info
-
-            condition.forEach(item => {
-                if (item[enumConst.TYPE] === enumConst.ENABLE_TYPE) {
-                    setRowFormValue(enumActionEl.ENABLE_FILTER, item)
-                } else if (item[enumConst.TYPE] === enumConst.CLOSE_TYPE) {
-                    setRowFormValue(enumActionEl.CLOSE_FILTER, item)
-                }
-            })
-
-            form.render()
-        }
-
-        /**
-         * @description 初始化数据
-         */
-        function initialData() {
-            setRowFormValue(enumActionEl.ENABLE_FILTER, StateDefaultValue.enable)
-            setRowFormValue(enumActionEl.CLOSE_FILTER, StateDefaultValue.close)
-        }
-
-        function setRowFormValue(formFilter, value = {}) {
-            form.val(formFilter, value)
-            $(`#${enumActionEl.TABLE_BODY_EL} tr[lay-filter="${formFilter}"] .${enumActionEl.SET_IMG_EL} img`).attr('src', value[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-            form.render()
-        }
-
-        async function submit(callback) {
-            if (!hasPermission()) return
-
-            const enableValue = form.val(enumActionEl.ENABLE_FILTER)
-            const closeValue = form.val(enumActionEl.CLOSE_FILTER)
-
-            const formVal = getDataSourceBindValue()
-
-            if (![formVal.deviceId && formVal.orgId].every(Boolean)) {
-                UseLayUi.topErrorMsg('请先选择数据源')
-                return
-            }
-
-            const formModel = {
-                configurationId,
-                contentId: currentPageId.id,
-                ...formVal,
-                id: graphId,
-                condition: [enableValue, closeValue],
-                type: event.data.type,
-                ...recordData
-            }
-            await to(autoSaveGraphInfo())
-            const [err, res] = await to(ConfigurationNodeApi.updateNodeAct(formModel))
-            if (err) return
-            overrideCurrentData('act', 'type', res)
-            echoActionType()
-            UseLayUi.successMsg()
-            callback()
-        }
-
-        function createLayerForm(type) {
-            const content = `
-            <table class="layui-table">
-                <colgroup>
-                <col width="150">
-                <col width="150">
-                <col>
-                </colgroup>
-                <thead>
-                <tr>
-                    <th>状态</th>
-                    <th>值</th>
-                    <th>展示图片</th>
-                </tr> 
-                </thead>
-                <tbody id="${enumActionEl.TABLE_BODY_EL}">
-                    ${addRecord(enumActionEl.ENABLE_FILTER, '开启')}
-                    ${addRecord(enumActionEl.CLOSE_FILTER, '关闭')}
-                </tbody>
-            </table>`
-
-            layer.open({
-                title: '状态设置',
-                content,
-                skin: 'event-layer__override',
-                btn: ['保存', '取消'],
-                offset: '100px',
-                area: '500px',
-                success(layero) {
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-                        'lay-submit': '',
-                        'lay-filter': enumActionEl.LAYER_SUBMIT_FILTER,
-                    })
-                    createUploadImgContainer()
-
-                    const info = getLayerBindInfo('act', type)
-                    const { condition = [], enabled } = info
-                    Object.assign(recordData, { enabled })
-
-                    if (info && condition.length) {
-                        echoData(info)
-                    } else {
-                        initialData()
-                    }
-                },
-                yes(index) {
-                    form.on(`submit(${enumActionEl.LAYER_SUBMIT_FILTER})`, data => {
-                        submit(() => {
-                            layer.close(index)
-                            // getNodeBindInfo()
-                        })
-                    })
-                },
-                btn2() {
-
-                },
-            })
-        }
-
-        createLayerForm(event.data.type)
-    }
-
-    /**
-     * @description 生成数据源组件
-     * @param {object} options
-     * @param {string} [options.overrideClass = ''] options.overrideClass
-     * @param {boolean} [options.validate = true ] options.validate
-     */
-    function generateDataSourceComponent(options = {}) {
-        const { overrideClass = '', validate = true } = options
-        const componentFilter = `data-source__component-filter-${Date.now()}`
-        const componentId = `data-source__component-${Date.now()}`
-
-        const validateRule = validate ? { layVerify: 'required', layVerType: 'tips' } : {}
-
-        const enumDataSourceConst = {
-            ORG_ID: 'orgId',
-            DEVICE_ID: 'deviceId',
-            SLAVE_DEVICE_ID: 'slaveDeviceId',
-            ATTR: 'attr',
-            GATEWAY: 'GATEWAY',
-        }
-        /**
-         * @description
-         * @type {{id: string, deviceType: string, name: string}[]}
-         */
-        let deviceList = []
-
-        const component = document.createElement('div')
-
-        $(component)
-            .addClass(`layui-form data-source__component-style ${overrideClass}`)
-            .attr({
-                id: componentId,
-                'lay-filter': componentFilter,
-            })
-
-        init()
-
-        function init() {
-            generatorOrgTres()
-            generatorDeviceSelect()
-            generatorSlaveDevice()
-            generatorAttrSelect()
-        }
-
-
-        /**
-         * @description 根据组织ID获取设备
-         */
-        async function getDevicesByOrgId(organizationId) {
-            if (organizationId) {
-                const items = deviceList = await ConfigurationNodeApi.getMasterDevice(organizationId);
-                $(`#${componentId} `).find(`select[name="${enumDataSourceConst.DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items }))
-                form.render('select', componentFilter)
-            }
-        }
-
-        /**
-         * @description 通过主设备ID获取从设备
-         */
-        async function getSlaveDeviceByMasterDeviceId(orgId, deviceId) {
-            if (deviceId && currentCheckedOrgNode) {
-                const items = await ConfigurationNodeApi.getSlaveDevice(orgId, deviceId);
-                $(`#${componentId} `).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: items }))
-                form.render('select', componentFilter)
-            }
-        }
-
-        /**
-         * @description 根据设备ID获取属性
-         */
-        async function getAttrByDeviceId(tbDeviceId) {
-            if (tbDeviceId) {
-                const [err, res] = await to(ConfigurationNodeApi.getDeviceAttr(tbDeviceId))
-                $(`#${componentId} `).find(`select[name="${enumDataSourceConst.ATTR}"]`).html(UseLayUi.generateOptionTemplate({ dataSource: res }))
-                form.render('select', componentFilter)
-            }
-        }
-
-
-        /**
-         * @description 生成组织选择
-         */
-        async function generatorOrgTres() {
-            const orgContainerId = `data-source__component--org-${Date.now()}`
-            const orgContainer = `<div id="${orgContainerId}"></div>`
-            $(component).append(orgContainer)
-
-            const [err, res] = await to(ConfigurationNodeApi.getOrgTree())
-            if (err) return
-            treeList = res
-
-            UseLayUi.createTreeSelect({
-                elem: `#${orgContainerId}`,
-                layFilter: enumDataSourceConst.ORG_ID,
-                label: '组织',
-                singleUsage: false,
-                className: 'data-source__component-select',
-                ...validateRule,
-                treeProps: {
-                    data: treeList,
-                    onlyIconControl: true,
-                    click(node) {
-                        currentCheckedOrgNode = node.data.id
-                        form.val(componentFilter, {
-                            [enumDataSourceConst.DEVICE_ID]: null,
-                            [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
-                            [enumDataSourceConst.ATTR]: null,
-                        })
-                        getDevicesByOrgId(node.data.id)
-                    },
-                },
-            })
-        }
-
-        /**
-         * @description 生成设备选择器
-         */
-        function generatorDeviceSelect() {
-            const deviceSelect = UseLayUi.createSelect({
-                label: '设备',
-                bindValueFiled: enumDataSourceConst.DEVICE_ID,
-                layFilter: `${componentFilter}--${enumDataSourceConst.DEVICE_ID}`,
-                className: 'data-source__component-select',
-                ...validateRule,
-                onClick(data) {
-                    const { value } = data
-                    const selected = deviceList.find(item => item.id === value)
-                    form.val(componentFilter, {
-                        [enumDataSourceConst.SLAVE_DEVICE_ID]: null,
-                        [enumDataSourceConst.ATTR]: null,
-                    })
-                    if (!selected) return
-                    if (selected.deviceType === enumDataSourceConst.GATEWAY) {
-                        $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`)
-                            .attr('lay-verify', 'required').attr('lay-verType', 'tips')
-                            .parentsUntil(`#${componentId}`).show()
-                        getSlaveDeviceByMasterDeviceId(currentCheckedOrgNode, selected.id)
-                    } else {
-                        $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`)
-                            .attr('lay-verify', '').attr('lay-verType', 'tips')
-                            .parentsUntil(`#${componentId}`).hide()
-                        getAttrByDeviceId(selected.id)
-                    }
-                },
-            })
-            $(component).append(deviceSelect)
-        }
-
-        /**
-         * @description 生成从设备选择器
-         */
-        function generatorSlaveDevice() {
-            const slaveDeviceSelect = UseLayUi.createSelect({
-                label: '子设备',
-                bindValueFiled: enumDataSourceConst.SLAVE_DEVICE_ID,
-                layFilter: `${componentFilter}--${enumDataSourceConst.SLAVE_DEVICE_ID}`,
-                className: 'data-source__component-select',
-                onClick(data) {
-                    const { value } = data
-                    form.val(componentFilter, {
-                        [enumDataSourceConst.ATTR]: null,
-                    })
-                    getAttrByDeviceId(value)
-                },
-            })
-            $(component).append(slaveDeviceSelect)
-        }
-
-        /**
-         * @description 生成属性选择器
-         */
-        function generatorAttrSelect() {
-            const attrsSelect = UseLayUi.createSelect({
-                label: '属性',
-                bindValueFiled: enumDataSourceConst.ATTR,
-                layFilter: `${componentFilter}--${enumDataSourceConst.ATTR}`,
-                className: 'data-source__component-select',
-                ...validateRule,
-            })
-            $(component).append(attrsSelect)
-        }
-
-        /**
-         * @description 回显数据
-         * @param {{orgId: string, deviceId: string, slaveDeviceId?: string, attr: string}} dataSource
-         */
-        function echoDataSource(dataSource = {}) {
-            const { orgId, deviceId, slaveDeviceId, attr } = dataSource
-            const queue = []
-            if (orgId) {
-                currentCheckedOrgNode = orgId
-                queue.push(getDevicesByOrgId(orgId))
-            }
-            if (slaveDeviceId) {
-                queue.push(getSlaveDeviceByMasterDeviceId(orgId, deviceId))
-                $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).parentsUntil(`#${componentId}`).show()
-                queue.push(getAttrByDeviceId(slaveDeviceId))
-            } else {
-                $(`#${componentId}`).find(`select[name="${enumDataSourceConst.SLAVE_DEVICE_ID}"]`).parentsUntil(`#${componentId}`).hide()
-                queue.push(getAttrByDeviceId(deviceId))
-            }
-            Promise.all(queue)
-                .finally(() => {
-                    const orgNode = UseLayUi.findTreeObjectByField(treeList, currentCheckedOrgNode)
-                    $(`#${componentId} input[name="${enumDataSourceConst.ORG_ID}"]`).parent().find('span').html(orgNode?.name)
-                    form.val(componentFilter, {
-                        orgId,
-                        deviceId,
-                        slaveDeviceId,
-                        attr,
-                    })
-                })
-        }
-
-        /**
-         * 
-         * @returns  {{orgId: string, attr: string, deviceId: string, slaveDeviceId: string}}
-         */
-        function getValue() {
-            return form.val(componentFilter)
-        }
-
-        return { component, getValue, componentId, componentFilter, echoDataSource }
-    }
-
-    /**
-     * @description 生成上传弹出层组件
-     */
-    function generateUploadLayerComponent(callback) {
-
-        const enumActionEl = {
-            /**
-             * @description 图片选中区域节点
-             */
-            IMG_SELECT_CONTAINER_EL: 'imgSelectContainerEl',
-
-            /**
-             * @description 切换图片来源控制
-             */
-            SWITCH_IMG_ORIGIN_FILTER: 'switchImgOriginFilter',
-
-            /**
-             * @description 图片选中侧边栏节点
-             */
-            VAR_IMG_CONTAINER_SIDEBAR: 'var-image__container-sidebar',
-
-            /**
-             * @description 图库图形选择区域
-             */
-            VAR_IMG_CONTAINER_CONTENT: 'var-image__container-content',
-
-            /**
-             * @description 图库图形项
-             */
-            VAR_IMG_ITEM: 'var-image__img-item',
-
-            /**
-             * @description 图库图形选中控制
-             */
-            VAR_IMG_ITEM_CHECKED: 'var-image__img-item--checked',
-
-            /**
-             * @description 图库图形类别节点
-             */
-            VAR_IMG_CATEGORY: 'var-image__category',
-
-            /**
-             * @description 图库图形类别选择状态
-             */
-            VAR_IMG_CATEGORY_CHECKED: 'var-image__category--checked',
-
-            /**
-             * @description 本地上传图片节点
-             */
-            UPLOAD_LOCAL_FILE_EL: 'var-image__container--local',
-
-            /**
-             * @description 本地上传图片状态
-             */
-            IMAGE_UPLOAD_STATE_EL: 'var-image__upload-state',
-
-            /**
-             * @description 预览图片状态
-             */
-            IMAGE_PREVIEW_EL: 'preview__img--preview',
-
-            /**
-             * @description 本地图片上传删除按钮
-             */
-            IMAGE_DEL_PREVIEW_EL: 'var-image__del-icon',
-        }
-
-        const enumConst = {
-            /**
-             * @description 图片来源
-             */
-            IMAGE_ORIGIN: 'imageOrigin',
-
-            /**
-             * @description 图库图形类别
-             */
-            IMAGE_GALLERY_CATEGORY: 'category',
-
-            /**
-             * @description 图表图形路径
-             */
-            IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
-        }
-
-        /**
-         * @description 图片来源枚举类型
-         */
-        const enumImageOriginType = {
-            LOCAL: 'local',
-            GALLERY: 'gallery',
-        }
-
-        let imageState = {}
-
-        /**
-         * @description 设置选中样式
-         * @param event
-         * @param nodeClass
-         * @param styleClass
-         */
-        function setImageSelectedStyle(event, nodeClass, styleClass) {
-            if (!$(event.target).hasClass(nodeClass)) return
-            $(`.${nodeClass}`).each(function () {
-                $(this).removeClass(styleClass)
-            })
-            $(event.target).addClass(styleClass)
-        }
-
-        /**
-         * @description 切换图库图形
-         * @param event
-         */
-        function switchGalleryLib(event) {
-            const key = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
-            const category = sidebarInstance.getVariableImageLib(key)
-            if (key && category) {
-                $(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).html(
-                    category.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, ''),
-                )
-            }
-        }
-
-        /**
-         * @description 图片来源事件监听
-         */
-        function generatorSelectImgEventListener() {
-            $(`#${enumActionEl.VAR_IMG_CONTAINER_CONTENT}`).on('click', event => {
-                setImageSelectedStyle(event, enumActionEl.VAR_IMG_ITEM, enumActionEl.VAR_IMG_ITEM_CHECKED)
-                imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = $(event.target).find('img').attr('src')
-            })
-            $(`#${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}`).on('click', event => {
-                setImageSelectedStyle(event, enumActionEl.VAR_IMG_CATEGORY, enumActionEl.VAR_IMG_CATEGORY_CHECKED)
-                imageState[enumConst.IMAGE_GALLERY_CATEGORY] = $(event.target).attr(enumConst.IMAGE_GALLERY_CATEGORY)
-                imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
-                switchGalleryLib(event)
-            })
-        }
-
-
-        /**
-         * @description 创建本地图片上传区域
-         */
-        function createLocalFileContainer() {
-            return `
-                <div id="${enumActionEl.UPLOAD_LOCAL_FILE_EL}" class="layui-upload">
-                    <div class="preview__img">
-                        <img src="" class="layui-upload-img" id="${enumActionEl.IMAGE_PREVIEW_EL}">
-                        <div class="var_image__add-icon">+</div>
-                        <div class="var-image__del-icon">x</div>
-                    </div>
-                    <div class="layui-upload-list"></div>
-                </div>
-                <div style="margin-top: 10px;" id="${enumActionEl.IMAGE_UPLOAD_STATE_EL}"></div>
-                <div style="margin-top: 10px;">图片格式支持png、jpg(jpeg)、gif, 大小不能超过5M</div>`
-        }
-
-        /**
-     * @description 创建图库图形上传区域
-     */
-        function createGalleryFileContainer() {
-            const category = sidebarInstance.getAllVariableImageLib()
-            const defaultShow = category[0] || { lib: [] }
-            return `
-                <div class="var-image__container--gallery">
-                        <div id="${enumActionEl.VAR_IMG_CONTAINER_SIDEBAR}">
-                            ${category.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_CATEGORY}" ${enumConst.IMAGE_GALLERY_CATEGORY}="${next.key}">${next.label}</div>`, '')}
-                        </div>
-                        <div id="${enumActionEl.VAR_IMG_CONTAINER_CONTENT}">
-                        ${defaultShow.lib.reduce((prev, next) => prev + `<div class="${enumActionEl.VAR_IMG_ITEM}" title="${next.name}"><img src="${next.staticPath}" alt=""></div>`, '')}
-                        </div>
-                    </div>`
-        }
-
-        /**
-         * @description 上传
-         */
-        function uploadFileEvent() {
-            $(`.${enumActionEl.IMAGE_DEL_PREVIEW_EL}`).on('click', (event) => {
-                event.stopPropagation()
-                $(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', '')
-                imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = null
-            })
-            upload.render({
-                elem: `#${enumActionEl.UPLOAD_LOCAL_FILE_EL}`,
-                auto: false,
-                size: 1024 * 5,
-                url: '/yt/oss/upload',
-                method: 'post',
-                choose(obj) {
-                    obj.preview(async function (index, file, result) {
-                        const formData = new FormData()
-                        formData.set('file', file)
-                        $(`#${enumActionEl.IMAGE_UPLOAD_STATE_EL}`).html('上传中...')
-                        const [err, res] = await to(ConfigurationNodeApi.uploadImg(formData))
-                        if (!err) {
-                            $(`#${enumActionEl.IMAGE_PREVIEW_EL}`).attr('src', result)
-                            const { fileStaticUri = '' } = res
-                            imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH] = fileStaticUri
-                            $(`#${enumActionEl.IMAGE_UPLOAD_STATE_EL}`).html('上传成功').css({ color: '#5fb878' })
-                        } else {
-                            $(`#${enumActionEl.IMAGE_UPLOAD_STATE_EL}`).html('上传失败').css({ color: 'red' })
-                        }
-                    });
-                },
-            });
-        }
-
-        /**
-         * @description 切换
-         */
-        function switchUploadImgTypeEventListener() {
-            form.on(`radio(${enumActionEl.SWITCH_IMG_ORIGIN_FILTER})`, event => {
-                const { value } = event
-                imageState = {}
-                if (value === enumImageOriginType.LOCAL) {
-                    $(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createLocalFileContainer())
-                    imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.LOCAL
-                    uploadFileEvent()
-                } else if (value === enumImageOriginType.GALLERY) {
-                    $(`#${enumActionEl.IMG_SELECT_CONTAINER_EL}`).html(createGalleryFileContainer())
-                    const defaultChecked = $(`.${enumActionEl.VAR_IMG_CATEGORY}`).eq(0)
-                    defaultChecked.addClass(enumActionEl.VAR_IMG_CATEGORY_CHECKED)
-                    imageState[enumConst.IMAGE_GALLERY_CATEGORY] = defaultChecked.attr(enumConst.IMAGE_GALLERY_CATEGORY)
-                    imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.GALLERY
-                    generatorSelectImgEventListener()
-                }
-            })
-        }
-
-
-        /**
-         * @description 初始化并设置默认值
-         */
-        function initSelectImg() {
-            switchUploadImgTypeEventListener()
-            uploadFileEvent()
-            imageState[enumConst.IMAGE_ORIGIN] = enumImageOriginType.LOCAL
-            form.render()
-        }
-
-        /**
-         * @description 创建上传图片layer
-         */
-        function createUploadImgLayer() {
-            const content = `
-			<div class="layui-form">
-					<div class="layui-form-item">
-						<div class="var-image__radio">
-							<input type="radio" lay-filter="${enumActionEl.SWITCH_IMG_ORIGIN_FILTER}" name="${enumConst.IMAGE}" value="${enumImageOriginType.LOCAL}" title="本地图片" checked="">
-							<input type="radio" lay-filter="${enumActionEl.SWITCH_IMG_ORIGIN_FILTER}" name="${enumConst.IMAGE}" value="${enumImageOriginType.GALLERY}" title="图库图形">
-						</div>
-					</div>
-			</div>
-			<div id="${enumActionEl.IMG_SELECT_CONTAINER_EL}">
-				${createLocalFileContainer()}
-			</div>
-		`
-
-            layer.open({
-                title: '图片',
-                type: 1,
-                content,
-                skin: 'event-layer__override',
-                area: '600px',
-                btn: ["应用", "取消"],
-                shade: ["0.7", "#fafafa"],
-                yes(index) {
-                    layer.close(index)
-                    if (callback && typeof callback === 'function') callback(imageState)
-                },
-                but2(index, layero) {
-                    imageState = {}
-                    layer.close(index)
-                },
-                // zIndex: layer.zIndex,
-                async success(layero, index) {
-                    // layer.setTop(layero);
-                    $(layero).addClass('layui-form').find('.layui-layer-btn0').attr({
-                        'lay-submit': '',
-                        'lay-filter': enumActionEl.IMAGE_LAYER_FILTER,
-                    })
-                    initSelectImg()
-                },
-            })
-        }
-
-        createUploadImgLayer()
-
-        return { record: imageState }
-    }
-
-
-    /**
-     * @description TODO 图片上传容器
-     * @param {} option
-     * @param {} option.el
-     */
-    function generateUploadImgContainer({ el }) {
-
-
-        const enumConst = {
-            /**
-             * @description 图片来源
-             */
-            IMAGE_ORIGIN: 'imageOrigin',
-
-            /**
-             * @description 图库图形类别
-             */
-            IMAGE_GALLERY_CATEGORY: 'category',
-
-            /**
-             * @description 图表图形路径
-             */
-            IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
-        }
-
-        const enumActionEl = {
-
-            CONTAINER_FILTER: 'imgContainerFilter',
-
-            /**
-             * @description 
-             */
-            SET_IMG_EL: 'variableImageTableSetImgEl',
-
-            /**
-             * @description 预览
-             */
-            PREVIEW_IMG_CONTAINER: 'img__container',
-
-            /**
-             * @description 删除
-             */
-            DEL_PREVIEW_IMG: 'img__delete',
-        }
-
-        const getFormFilter = `${enumActionEl.CONTAINER_FILTER}-${Date.now() - Math.random()}`
-
-        function createTemplate() {
-            return `
-            <div class="layui-form ${enumActionEl.SET_IMG_EL}" lay-filter="${getFormFilter}">
-                <input name="${enumConst.IMAGE_GALLERY_CATEGORY}" type="text" style="display: none">
-                <input name="${enumConst.IMAGE_GALLERY_IMAGE_PATH}" type="text" style="display: none">
-                <input name="${enumConst.IMAGE_ORIGIN}" type="text" style="display: none">
-                <div class="${enumActionEl.PREVIEW_IMG_CONTAINER}">
-                    <img src="" alt="">
-                    <div class="${enumActionEl.DEL_PREVIEW_IMG}">x</div>
-                    <div class="add__button">+</div>
-                </div>
-            </div>
-            `
-        }
-
-        /**
-         * @description 设置回显
-         * @param {} value 
-         */
-        function setValue(value = {}) {
-            form.val(getFormFilter, value)
-        }
-
-        /**
-         * @description 获取值
-         * @returns 
-         */
-        function getValue() {
-            return form.val(getFormFilter) || {}
-        }
-
-        function mount() {
-            if (!el) throw Error('mount element is required')
-            $(el).append(createTemplate())
-            generateEventLinstenner()
-        }
-
-        // TODO 生成容器监听事件
-        function generateEventLinstenner() {
-            $(el).on('click', `.${enumActionEl.SET_IMG_EL}`, (event) => {
-                if ($(event.target).hasClass(enumActionEl.DEL_PREVIEW_IMG)) {
-                    $(el).find(`div[lay-filter="${getFormFilter}"] img`).attr('src', '')
-                    form.val(getFormFilter, {
-                        [enumConst.IMAGE_ORIGIN]: null,
-                        [enumConst.IMAGE_GALLERY_CATEGORY]: null,
-                        [enumConst.IMAGE_GALLERY_IMAGE_PATH]: null,
-                    })
-                    return
-                }
-                generateUploadLayerComponent((imageState) => {
-                    $(el).find('img').attr('src', imageState[enumConst.IMAGE_GALLERY_IMAGE_PATH])
-                    form.val(getFormFilter, imageState)
-                })
-            })
-        }
-
-        mount()
-        return { getValue, setValue }
-    }
-
-    function createHelpMessage(message, className) {
-        return `
-        <div class="thingskit-help-message ${className}">
-            <img src="${Proxy_Prefix}/images/thingskit/question.svg"/>
-            <div class="thingskit-help-container">
-            <div class="thingskit-help-content">${message}</div>
-            <div class="thingskit-help-arrow"></div>
-            </div>
-        </div>
-        `
-    }
-
-    function hasPermission() {
-        let flag = hasSavePermission()
-        if (!flag) UseLayUi.topErrorMsg('没有权限')
-        return flag
-    }
-
-    //  异步设置此处才能生效 -- 设置默认select和样式和初始化侧边栏生成组件和事件绑定
-    setTimeout(() => {
-
-        function proxyFn(fn) {
-            return (...args) => {
-                const currentDataSource = getDataSourceBindValue() || {}
-
-                to(ConfigurationNodeApi.updateNodeInfo({
-                    configurationId,
-                    contentId: currentPageId.id,
-                    nodeId: graphId,
-                    [enumCategory.DATA_SOURCE]: currentDataSource
-                }))
-                fn.apply(null, args)
-            }
-        }
-
-        // TODO 数据交互事件
-        $(`#${enumDynamicEffectType.IMAGE}`).click({ type: enumDynamicEffectType.IMAGE }, proxyFn(handleSettingVarImage));
-
-        $(`#${enumInteractionType.DOWN}`).click({ type: enumInteractionType.DOWN }, proxyFn(handleDownOrUpEvent));
-        $(`#${enumInteractionType.UP}`).click({ type: enumInteractionType.UP }, proxyFn(handleDownOrUpEvent));
-        $(`#${enumInteractionType.SINGLE}`).click({ type: enumInteractionType.SINGLE }, proxyFn(handleClickOrDbClick));
-        $(`#${enumInteractionType.DOUBLE}`).click({ type: enumInteractionType.DOUBLE }, proxyFn(handleClickOrDbClick));
-        // 数据动效事件
-        $(`#${enumDynamicEffectType.FLASH}`).click({ type: enumDynamicEffectType.FLASH }, proxyFn(handleDataDynamicEffect));
-        $(`#${enumDynamicEffectType.DISPLAY}`).click({ type: enumDynamicEffectType.DISPLAY }, proxyFn(handleDataDynamicEffect));
-        $(`#${enumDynamicEffectType.ROTATE}`).click({ type: enumDynamicEffectType.ROTATE }, proxyFn(handleDataDynamicEffect));
-        $(`#${enumDynamicEffectType.RUNNING}`).click({ type: enumDynamicEffectType.RUNNING }, proxyFn(handleDataDynamicEffect))
-
-        $(`#${enumDynamicEffectType.SWITCH}`).click({ type: enumDynamicEffectType.SWITCH }, proxyFn(handleStateSetting))
-
-    });
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel = function (format, editorUi, container) {
-    BaseFormatPanel.call(this, format, editorUi, container);
-    this.init();
-};
-
-mxUtils.extend(StyleFormatPanel, BaseFormatPanel);
-
-/**
- *
- */
-StyleFormatPanel.prototype.defaultStrokeColor = "black";
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.init = function () {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var ss = ui.getSelectionState();
-
-    if (!ss.containsLabel && ss.cells.length > 0) {
-        if (
-            ss.containsImage &&
-            ss.vertices.length == 1 &&
-            ss.style.shape == "image" &&
-            ss.style.image != null &&
-            ss.style.image.substring(0, 19) == "data:image/svg+xml;"
-        ) {
-            this.container.appendChild(this.addSvgStyles(this.createPanel()));
-        }
-
-        if (ss.fill) {
-            this.container.appendChild(this.addFill(this.createPanel()));
-        }
-
-        this.container.appendChild(this.addStroke(this.createPanel()));
-        this.container.appendChild(this.addLineJumps(this.createPanel()));
-        var opacityPanel = this.createRelativeOption(
-            mxResources.get("opacity"),
-            mxConstants.STYLE_OPACITY,
-        );
-        opacityPanel.style.paddingTop = "8px";
-        opacityPanel.style.paddingBottom = "8px";
-        this.container.appendChild(opacityPanel);
-        this.container.appendChild(this.addEffects(this.createPanel()));
-    }
-
-    // TODO thingsKit 编辑样式 隐藏
-    // var opsPanel = this.addEditOps(this.createPanel());
-
-    // if (opsPanel.firstChild != null) {
-    //     mxUtils.br(opsPanel);
-    // }
-
-    // this.container.appendChild(this.addStyleOps(opsPanel));
-};
-
-/**
- * Use browser for parsing CSS.
- */
-StyleFormatPanel.prototype.getCssRules = function (css) {
-    var doc = document.implementation.createHTMLDocument("");
-    var styleElement = document.createElement("style");
-
-    mxUtils.setTextContent(styleElement, css);
-    doc.body.appendChild(styleElement);
-
-    return styleElement.sheet.cssRules;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addSvgStyles = function (container) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var ss = ui.getSelectionState();
-    container.style.paddingTop = "6px";
-    container.style.paddingBottom = "6px";
-    container.style.fontWeight = "bold";
-    container.style.display = "none";
-
-    try {
-        var exp = ss.style.editableCssRules;
-
-        if (exp != null) {
-            var regex = new RegExp(exp);
-
-            var data = ss.style.image.substring(ss.style.image.indexOf(",") + 1);
-            var xml = window.atob ? atob(data) : Base64.decode(data, true);
-            var svg = mxUtils.parseXml(xml);
-
-            if (svg != null) {
-                var styles = svg.getElementsByTagName("style");
-
-                for (var i = 0; i < styles.length; i++) {
-                    var rules = this.getCssRules(mxUtils.getTextContent(styles[i]));
-
-                    for (var j = 0; j < rules.length; j++) {
-                        this.addSvgRule(
-                            container,
-                            rules[j],
-                            svg,
-                            styles[i],
-                            rules,
-                            j,
-                            regex,
-                        );
-                    }
-                }
-            }
-        }
-    } catch (e) {
-        // ignore
-    }
-
-    return container;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addSvgRule = function (
-    container,
-    rule,
-    svg,
-    styleElem,
-    rules,
-    ruleIndex,
-    regex,
-) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-
-    if (regex.test(rule.selectorText)) {
-        function rgb2hex(rgb) {
-            rgb = rgb.match(
-                /^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i,
-            );
-
-            return rgb && rgb.length === 4
-                ? "#" +
-                ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) +
-                ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) +
-                ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2)
-                : "";
-        }
-
-        var addStyleRule = mxUtils.bind(this, function (rule, key, label) {
-            var value = mxUtils.trim(rule.style[key]);
-
-            if (value != "" && value.substring(0, 4) != "url(") {
-                var option = this.createColorOption(
-                    label + " " + rule.selectorText,
-                    function () {
-                        return rgb2hex(value);
-                    },
-                    mxUtils.bind(this, function (color) {
-                        rules[ruleIndex].style[key] = color;
-                        var cssTxt = "";
-
-                        for (var i = 0; i < rules.length; i++) {
-                            cssTxt += rules[i].cssText + " ";
-                        }
-
-                        styleElem.textContent = cssTxt;
-                        var xml = mxUtils.getXml(svg.documentElement);
-
-                        graph.setCellStyles(
-                            mxConstants.STYLE_IMAGE,
-                            "data:image/svg+xml," +
-                            (window.btoa ? btoa(xml) : Base64.encode(xml, true)),
-                            ui.getSelectionState().cells,
-                        );
-                    }),
-                    "#ffffff",
-                    {
-                        install: function (apply) {
-                            // ignore
-                        },
-                        destroy: function () {
-                            // ignore
-                        },
-                    },
-                );
-
-                container.appendChild(option);
-
-                // Shows container if rules are added
-                container.style.display = "";
-            }
-        });
-
-        addStyleRule(rule, "fill", mxResources.get("fill"));
-        addStyleRule(rule, "stroke", mxResources.get("line"));
-        addStyleRule(rule, "stop-color", mxResources.get("gradient"));
-    }
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addEditOps = function (div) {
-    var ss = this.editorUi.getSelectionState();
-    var btn = null;
-
-    if (ss.cells.length == 1) {
-        btn = mxUtils.button(
-            mxResources.get("editStyle"),
-            mxUtils.bind(this, function (evt) {
-                this.editorUi.actions.get("editStyle").funct();
-            }),
-        );
-
-        btn.setAttribute(
-            "title",
-            mxResources.get("editStyle") +
-            " (" +
-            this.editorUi.actions.get("editStyle").shortcut +
-            ")",
-        );
-        btn.style.width = "210px";
-        btn.style.marginBottom = "2px";
-
-        div.appendChild(btn);
-    }
-
-    if (ss.image && ss.cells.length > 0) {
-        var btn2 = mxUtils.button(
-            mxResources.get("editImage"),
-            mxUtils.bind(this, function (evt) {
-                this.editorUi.actions.get("image").funct();
-            }),
-        );
-
-        btn2.setAttribute("title", mxResources.get("editImage"));
-        btn2.style.marginBottom = "2px";
-
-        if (btn == null) {
-            btn2.style.width = "210px";
-        } else {
-            btn.style.width = "104px";
-            btn2.style.width = "104px";
-            btn2.style.marginLeft = "2px";
-        }
-
-        div.appendChild(btn2);
-    }
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addFill = function (container) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var ss = ui.getSelectionState();
-    container.style.paddingTop = "6px";
-    container.style.paddingBottom = "6px";
-
-    // Adds gradient direction option
-    var gradientSelect = document.createElement("select");
-    gradientSelect.style.position = "absolute";
-    gradientSelect.style.left = "104px";
-    gradientSelect.style.width = "70px";
-    gradientSelect.style.height = "22px";
-    gradientSelect.style.padding = "0px";
-    gradientSelect.style.marginTop = "-3px";
-    gradientSelect.style.borderRadius = "4px";
-    gradientSelect.style.border = "1px solid rgb(160, 160, 160)";
-    gradientSelect.style.boxSizing = "border-box";
-
-    var fillStyleSelect = gradientSelect.cloneNode(false);
-
-    // Stops events from bubbling to color option event handler
-    mxEvent.addListener(gradientSelect, "click", function (evt) {
-        mxEvent.consume(evt);
-    });
-    mxEvent.addListener(fillStyleSelect, "click", function (evt) {
-        mxEvent.consume(evt);
-    });
-
-    var defs =
-        ss.vertices.length >= 1
-            ? graph.stylesheet.getDefaultVertexStyle()
-            : graph.stylesheet.getDefaultEdgeStyle();
-
-    var gradientPanel = this.createCellColorOption(
-        mxResources.get("gradient"),
-        mxConstants.STYLE_GRADIENTCOLOR,
-        defs[mxConstants.STYLE_GRADIENTCOLOR] != null
-            ? defs[mxConstants.STYLE_GRADIENTCOLOR]
-            : "#ffffff",
-        function (color) {
-            if (color == null || color == mxConstants.NONE) {
-                gradientSelect.style.display = "none";
-            } else {
-                gradientSelect.style.display = "";
-            }
-        },
-        function (color) {
-            graph.updateCellStyles(
-                { gradientColor: color },
-                graph.getSelectionCells(),
-            );
-        },
-    );
-
-    var fillKey =
-        ss.style.shape == "image"
-            ? mxConstants.STYLE_IMAGE_BACKGROUND
-            : mxConstants.STYLE_FILLCOLOR;
-
-    var fillPanel = this.createCellColorOption(
-        mxResources.get("fill"),
-        fillKey,
-        "default",
-        null,
-        mxUtils.bind(this, function (color) {
-            graph.setCellStyles(fillKey, color, ss.cells);
-        }),
-        graph.shapeBackgroundColor,
-    );
-
-    fillPanel.style.fontWeight = "bold";
-    var tmpColor = mxUtils.getValue(ss.style, fillKey, null);
-    gradientPanel.style.display =
-        tmpColor != null &&
-            tmpColor != mxConstants.NONE &&
-            ss.fill &&
-            ss.style.shape != "image"
-            ? ""
-            : "none";
-
-    var directions = [
-        mxConstants.DIRECTION_NORTH,
-        mxConstants.DIRECTION_EAST,
-        mxConstants.DIRECTION_SOUTH,
-        mxConstants.DIRECTION_WEST,
-        mxConstants.DIRECTION_RADIAL,
-    ];
-
-    for (var i = 0; i < directions.length; i++) {
-        var gradientOption = document.createElement("option");
-        gradientOption.setAttribute("value", directions[i]);
-        mxUtils.write(gradientOption, mxResources.get(directions[i]));
-        gradientSelect.appendChild(gradientOption);
-    }
-
-    gradientPanel.appendChild(gradientSelect);
-
-    for (var i = 0; i < Editor.roughFillStyles.length; i++) {
-        var fillStyleOption = document.createElement("option");
-        fillStyleOption.setAttribute("value", Editor.roughFillStyles[i].val);
-        mxUtils.write(fillStyleOption, Editor.roughFillStyles[i].dispName);
-        fillStyleSelect.appendChild(fillStyleOption);
-    }
-
-    fillPanel.appendChild(fillStyleSelect);
-
-    var listener = mxUtils.bind(this, function () {
-        ss = ui.getSelectionState();
-        var value = mxUtils.getValue(
-            ss.style,
-            mxConstants.STYLE_GRADIENT_DIRECTION,
-            mxConstants.DIRECTION_SOUTH,
-        );
-        var fillStyle = mxUtils.getValue(ss.style, "fillStyle", "auto");
-
-        // Handles empty string which is not allowed as a value
-        if (value == "") {
-            value = mxConstants.DIRECTION_SOUTH;
-        }
-
-        gradientSelect.value = value;
-        fillStyleSelect.value = fillStyle;
-        container.style.display = ss.fill ? "" : "none";
-
-        var fillColor = mxUtils.getValue(ss.style, fillKey, null);
-
-        if (
-            !ss.fill ||
-            fillColor == null ||
-            fillColor == mxConstants.NONE ||
-            ss.style.shape == "filledEdge"
-        ) {
-            fillStyleSelect.style.display = "none";
-            gradientPanel.style.display = "none";
-        } else {
-            fillStyleSelect.style.display = ss.style.sketch == "1" ? "" : "none";
-            gradientPanel.style.display =
-                !ss.containsImage &&
-                    (ss.style.sketch != "1" || fillStyle == "solid" || fillStyle == "auto")
-                    ? ""
-                    : "none";
-        }
-    });
-
-    graph.getModel().addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            graph.getModel().removeListener(listener);
-        },
-    });
-    listener();
-
-    mxEvent.addListener(gradientSelect, "change", function (evt) {
-        graph.setCellStyles(
-            mxConstants.STYLE_GRADIENT_DIRECTION,
-            gradientSelect.value,
-            ss.cells,
-        );
-        ui.fireEvent(
-            new mxEventObject(
-                "styleChanged",
-                "keys",
-                [mxConstants.STYLE_GRADIENT_DIRECTION],
-                "values",
-                [gradientSelect.value],
-                "cells",
-                ss.cells,
-            ),
-        );
-        mxEvent.consume(evt);
-    });
-
-    mxEvent.addListener(fillStyleSelect, "change", function (evt) {
-        graph.setCellStyles("fillStyle", fillStyleSelect.value, ss.cells);
-        ui.fireEvent(
-            new mxEventObject(
-                "styleChanged",
-                "keys",
-                ["fillStyle"],
-                "values",
-                [fillStyleSelect.value],
-                "cells",
-                ss.cells,
-            ),
-        );
-        mxEvent.consume(evt);
-    });
-
-    container.appendChild(fillPanel);
-    container.appendChild(gradientPanel);
-
-    // Adds custom colors
-    var custom = this.getCustomColors();
-
-    for (var i = 0; i < custom.length; i++) {
-        container.appendChild(
-            this.createCellColorOption(
-                custom[i].title,
-                custom[i].key,
-                custom[i].defaultValue,
-            ),
-        );
-    }
-
-    return container;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.getCustomColors = function () {
-    var ss = this.editorUi.getSelectionState();
-    var result = [];
-
-    if (ss.swimlane) {
-        result.push({
-            title: mxResources.get("laneColor"),
-            key: "swimlaneFillColor",
-            defaultValue: "default",
-        });
-    }
-
-    return result;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addStroke = function (container) {
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-    var ss = ui.getSelectionState();
-
-    container.style.paddingTop = "6px";
-    container.style.paddingBottom = "4px";
-    container.style.whiteSpace = "normal";
-
-    var colorPanel = document.createElement("div");
-    colorPanel.style.fontWeight = "bold";
-
-    if (!ss.stroke) {
-        colorPanel.style.display = "none";
-    }
-
-    // Adds gradient direction option
-    var styleSelect = document.createElement("select");
-    styleSelect.style.position = "absolute";
-    styleSelect.style.height = "22px";
-    styleSelect.style.padding = "0px";
-    styleSelect.style.marginTop = "-3px";
-    styleSelect.style.boxSizing = "border-box";
-    styleSelect.style.left = "94px";
-    styleSelect.style.width = "80px";
-    styleSelect.style.border = "1px solid rgb(160, 160, 160)";
-    styleSelect.style.borderRadius = "4px";
-
-    var styles = ["sharp", "rounded", "curved"];
-
-    for (var i = 0; i < styles.length; i++) {
-        var styleOption = document.createElement("option");
-        styleOption.setAttribute("value", styles[i]);
-        mxUtils.write(styleOption, mxResources.get(styles[i]));
-        styleSelect.appendChild(styleOption);
-    }
-
-    mxEvent.addListener(styleSelect, "change", function (evt) {
-        graph.getModel().beginUpdate();
-        try {
-            var keys = [mxConstants.STYLE_ROUNDED, mxConstants.STYLE_CURVED];
-            // Default for rounded is 1
-            var values = ["0", null];
-
-            if (styleSelect.value == "rounded") {
-                values = ["1", null];
-            } else if (styleSelect.value == "curved") {
-                values = [null, "1"];
-            }
-
-            for (var i = 0; i < keys.length; i++) {
-                graph.setCellStyles(keys[i], values[i], ss.cells);
-            }
-
-            ui.fireEvent(
-                new mxEventObject(
-                    "styleChanged",
-                    "keys",
-                    keys,
-                    "values",
-                    values,
-                    "cells",
-                    ss.cells,
-                ),
-            );
-        } finally {
-            graph.getModel().endUpdate();
-        }
-
-        mxEvent.consume(evt);
-    });
-
-    // Stops events from bubbling to color option event handler
-    mxEvent.addListener(styleSelect, "click", function (evt) {
-        mxEvent.consume(evt);
-    });
-
-    var strokeKey =
-        ss.style.shape == "image"
-            ? mxConstants.STYLE_IMAGE_BORDER
-            : mxConstants.STYLE_STROKECOLOR;
-    var label =
-        ss.style.shape == "image"
-            ? mxResources.get("border")
-            : mxResources.get("line");
-
-    var lineColor = this.createCellColorOption(
-        label,
-        strokeKey,
-        "default",
-        null,
-        mxUtils.bind(this, function (color) {
-            graph.setCellStyles(strokeKey, color, ss.cells);
-        }),
-        graph.shapeForegroundColor,
-    );
-
-    lineColor.appendChild(styleSelect);
-    colorPanel.appendChild(lineColor);
-
-    // Used if only edges selected
-    var stylePanel = colorPanel.cloneNode(false);
-    stylePanel.style.fontWeight = "normal";
-    stylePanel.style.whiteSpace = "nowrap";
-    stylePanel.style.position = "relative";
-    stylePanel.style.paddingLeft = "0px";
-    stylePanel.style.marginBottom = "2px";
-    stylePanel.style.overflow = "hidden";
-    stylePanel.style.marginTop = "2px";
-    stylePanel.style.width = "220px";
-    stylePanel.className = "geToolbarContainer";
-
-    var addItem = mxUtils.bind(
-        this,
-        function (menu, width, cssName, keys, values) {
-            var item = this.editorUi.menus.styleChange(
-                menu,
-                "",
-                keys,
-                values,
-                "geIcon",
-                null,
-            );
-
-            var pat = document.createElement("div");
-            pat.style.width = width + "px";
-            pat.style.height = "1px";
-            pat.style.borderBottom = "1px " + cssName + " " + this.defaultStrokeColor;
-            pat.style.paddingTop = "6px";
-
-            item.firstChild.firstChild.style.padding = "0px 4px 0px 4px";
-            item.firstChild.firstChild.style.width = width + "px";
-            item.firstChild.firstChild.appendChild(pat);
-
-            return item;
-        },
-    );
-
-    var pattern = this.editorUi.toolbar.addMenuFunctionInContainer(
-        stylePanel,
-        "geSprite-orthogonal",
-        mxResources.get("pattern"),
-        false,
-        mxUtils.bind(this, function (menu) {
-            addItem(
-                menu,
-                75,
-                "solid",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                [null, null],
-            ).setAttribute("title", mxResources.get("solid"));
-            addItem(
-                menu,
-                75,
-                "dashed",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", null],
-            ).setAttribute("title", mxResources.get("dashed"));
-            addItem(
-                menu,
-                75,
-                "dotted",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", "1 1"],
-            ).setAttribute("title", mxResources.get("dotted") + " (1)");
-            addItem(
-                menu,
-                75,
-                "dotted",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", "1 2"],
-            ).setAttribute("title", mxResources.get("dotted") + " (2)");
-            addItem(
-                menu,
-                75,
-                "dotted",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", "1 4"],
-            ).setAttribute("title", mxResources.get("dotted") + " (3)");
-        }),
-    );
-
-    // Used for mixed selection (vertices and edges)
-    var altStylePanel = stylePanel.cloneNode(false);
-
-    var edgeShape = this.editorUi.toolbar.addMenuFunctionInContainer(
-        altStylePanel,
-        "geSprite-connection",
-        mxResources.get("connection"),
-        false,
-        mxUtils.bind(this, function (menu) {
-            this.editorUi.menus
-                .styleChange(
-                    menu,
-                    "",
-                    [
-                        mxConstants.STYLE_SHAPE,
-                        mxConstants.STYLE_STARTSIZE,
-                        mxConstants.STYLE_ENDSIZE,
-                        "width",
-                    ],
-                    [null, null, null, null],
-                    "geIcon geSprite geSprite-connection",
-                    null,
-                    true,
-                )
-                .setAttribute("title", mxResources.get("line"));
-            this.editorUi.menus
-                .styleChange(
-                    menu,
-                    "",
-                    [
-                        mxConstants.STYLE_SHAPE,
-                        mxConstants.STYLE_STARTSIZE,
-                        mxConstants.STYLE_ENDSIZE,
-                        "width",
-                    ],
-                    ["link", null, null, null],
-                    "geIcon geSprite geSprite-linkedge",
-                    null,
-                    true,
-                )
-                .setAttribute("title", mxResources.get("link"));
-            this.editorUi.menus
-                .styleChange(
-                    menu,
-                    "",
-                    [
-                        mxConstants.STYLE_SHAPE,
-                        mxConstants.STYLE_STARTSIZE,
-                        mxConstants.STYLE_ENDSIZE,
-                        "width",
-                    ],
-                    ["flexArrow", null, null, null],
-                    "geIcon geSprite geSprite-arrow",
-                    null,
-                    true,
-                )
-                .setAttribute("title", mxResources.get("arrow"));
-            this.editorUi.menus
-                .styleChange(
-                    menu,
-                    "",
-                    [
-                        mxConstants.STYLE_SHAPE,
-                        mxConstants.STYLE_STARTSIZE,
-                        mxConstants.STYLE_ENDSIZE,
-                        "width",
-                    ],
-                    ["arrow", null, null, null],
-                    "geIcon geSprite geSprite-simplearrow",
-                    null,
-                    true,
-                )
-                .setAttribute("title", mxResources.get("simpleArrow"));
-        }),
-    );
-
-    var altPattern = this.editorUi.toolbar.addMenuFunctionInContainer(
-        altStylePanel,
-        "geSprite-orthogonal",
-        mxResources.get("pattern"),
-        false,
-        mxUtils.bind(this, function (menu) {
-            addItem(
-                menu,
-                33,
-                "solid",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                [null, null],
-            ).setAttribute("title", mxResources.get("solid"));
-            addItem(
-                menu,
-                33,
-                "dashed",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", null],
-            ).setAttribute("title", mxResources.get("dashed"));
-            addItem(
-                menu,
-                33,
-                "dotted",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", "1 1"],
-            ).setAttribute("title", mxResources.get("dotted") + " (1)");
-            addItem(
-                menu,
-                33,
-                "dotted",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", "1 2"],
-            ).setAttribute("title", mxResources.get("dotted") + " (2)");
-            addItem(
-                menu,
-                33,
-                "dotted",
-                [mxConstants.STYLE_DASHED, mxConstants.STYLE_DASH_PATTERN],
-                ["1", "1 4"],
-            ).setAttribute("title", mxResources.get("dotted") + " (3)");
-        }),
-    );
-
-    var stylePanel2 = stylePanel.cloneNode(false);
-
-    // Stroke width
-    var input = document.createElement("input");
-    input.style.position = "absolute";
-    input.style.textAlign = "right";
-    input.style.marginTop = "2px";
-    input.style.width = "52px";
-    input.style.height = "21px";
-    input.style.left = "146px";
-    input.style.border = "1px solid rgb(160, 160, 160)";
-    input.style.borderRadius = "4px";
-    input.style.boxSizing = "border-box";
-    input.setAttribute("title", mxResources.get("linewidth"));
-
-    stylePanel.appendChild(input);
-
-    var altInput = input.cloneNode(true);
-    altStylePanel.appendChild(altInput);
-
-    function update(evt) {
-        // Maximum stroke width is 999
-        var value = parseFloat(input.value);
-        value = Math.min(999, Math.max(0, isNaN(value) ? 1 : value));
-
-        if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)) {
-            graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, ss.cells);
-            ui.fireEvent(
-                new mxEventObject(
-                    "styleChanged",
-                    "keys",
-                    [mxConstants.STYLE_STROKEWIDTH],
-                    "values",
-                    [value],
-                    "cells",
-                    ss.cells,
-                ),
-            );
-        }
-
-        input.value = value + " pt";
-        mxEvent.consume(evt);
-    }
-
-    function altUpdate(evt) {
-        // Maximum stroke width is 999
-        var value = parseFloat(altInput.value);
-        value = Math.min(999, Math.max(0, isNaN(value) ? 1 : value));
-
-        if (value != mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1)) {
-            graph.setCellStyles(mxConstants.STYLE_STROKEWIDTH, value, ss.cells);
-            ui.fireEvent(
-                new mxEventObject(
-                    "styleChanged",
-                    "keys",
-                    [mxConstants.STYLE_STROKEWIDTH],
-                    "values",
-                    [value],
-                    "cells",
-                    ss.cells,
-                ),
-            );
-        }
-
-        altInput.value = value + " pt";
-        mxEvent.consume(evt);
-    }
-
-    var stepper = this.createStepper(input, update, 1, 9);
-    stepper.style.display = input.style.display;
-    stepper.style.marginTop = "2px";
-    stepper.style.left = "198px";
-    stylePanel.appendChild(stepper);
-
-    var altStepper = this.createStepper(altInput, altUpdate, 1, 9);
-    altStepper.style.display = altInput.style.display;
-    altStepper.style.marginTop = "2px";
-    altInput.style.position = "absolute";
-    altStepper.style.left = "198px";
-    altStylePanel.appendChild(altStepper);
-
-    mxEvent.addListener(input, "blur", update);
-    mxEvent.addListener(input, "change", update);
-
-    mxEvent.addListener(altInput, "blur", altUpdate);
-    mxEvent.addListener(altInput, "change", altUpdate);
-
-    var edgeStyle = this.editorUi.toolbar.addMenuFunctionInContainer(
-        stylePanel2,
-        "geSprite-orthogonal",
-        mxResources.get("waypoints"),
-        false,
-        mxUtils.bind(this, function (menu) {
-            if (ss.style.shape != "arrow") {
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        [null, null, null],
-                        "geIcon geSprite geSprite-straight",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("straight"));
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        ["orthogonalEdgeStyle", null, null],
-                        "geIcon geSprite geSprite-orthogonal",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("orthogonal"));
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_ELBOW,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        ["elbowEdgeStyle", null, null, null],
-                        "geIcon geSprite geSprite-horizontalelbow",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("simple"));
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_ELBOW,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        ["elbowEdgeStyle", "vertical", null, null],
-                        "geIcon geSprite geSprite-verticalelbow",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("simple"));
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_ELBOW,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        ["isometricEdgeStyle", null, null, null],
-                        "geIcon geSprite geSprite-horizontalisometric",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("isometric"));
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_ELBOW,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        ["isometricEdgeStyle", "vertical", null, null],
-                        "geIcon geSprite geSprite-verticalisometric",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("isometric"));
-
-                if (ss.style.shape == "connector") {
-                    this.editorUi.menus
-                        .edgeStyleChange(
-                            menu,
-                            "",
-                            [
-                                mxConstants.STYLE_EDGE,
-                                mxConstants.STYLE_CURVED,
-                                mxConstants.STYLE_NOEDGESTYLE,
-                            ],
-                            ["orthogonalEdgeStyle", "1", null],
-                            "geIcon geSprite geSprite-curved",
-                            null,
-                            true,
-                        )
-                        .setAttribute("title", mxResources.get("curved"));
-                }
-
-                this.editorUi.menus
-                    .edgeStyleChange(
-                        menu,
-                        "",
-                        [
-                            mxConstants.STYLE_EDGE,
-                            mxConstants.STYLE_CURVED,
-                            mxConstants.STYLE_NOEDGESTYLE,
-                        ],
-                        ["entityRelationEdgeStyle", null, null],
-                        "geIcon geSprite geSprite-entity",
-                        null,
-                        true,
-                    )
-                    .setAttribute("title", mxResources.get("entityRelation"));
-            }
-        }),
-    );
-
-    var lineStart = this.editorUi.toolbar.addMenuFunctionInContainer(
-        stylePanel2,
-        "geSprite-startclassic",
-        mxResources.get("linestart"),
-        false,
-        mxUtils.bind(this, function (menu) {
-            if (
-                ss.style.shape == "connector" ||
-                ss.style.shape == "flexArrow" ||
-                ss.style.shape == "filledEdge"
-            ) {
-                var item = this.editorUi.menus.edgeStyleChange(
-                    menu,
-                    "",
-                    [mxConstants.STYLE_STARTARROW, "startFill"],
-                    [mxConstants.NONE, 0],
-                    "geIcon",
-                    null,
-                    false,
-                );
-                item.setAttribute("title", mxResources.get("none"));
-
-                var font = document.createElement("font");
-                font.style.fontSize = "10px";
-                mxUtils.write(font, mxResources.get("none"));
-                item.firstChild.firstChild.appendChild(font);
-
-                if (ss.style.shape == "connector" || ss.style.shape == "filledEdge") {
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_CLASSIC, 1],
-                            null,
-                            null,
-                            false,
-                            Format.classicFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_CLASSIC_THIN, 1],
-                            null,
-                            null,
-                            false,
-                            Format.classicThinFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_OPEN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.openFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_OPEN_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.openThinFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["openAsync", 0],
-                            null,
-                            null,
-                            false,
-                            Format.openAsyncFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_BLOCK, 1],
-                            null,
-                            null,
-                            false,
-                            Format.blockFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_BLOCK_THIN, 1],
-                            null,
-                            null,
-                            false,
-                            Format.blockThinFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["async", 1],
-                            null,
-                            null,
-                            false,
-                            Format.asyncFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_OVAL, 1],
-                            null,
-                            null,
-                            false,
-                            Format.ovalFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_DIAMOND, 1],
-                            null,
-                            null,
-                            false,
-                            Format.diamondFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_DIAMOND_THIN, 1],
-                            null,
-                            null,
-                            false,
-                            Format.diamondThinFilledMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_CLASSIC, 0],
-                            null,
-                            null,
-                            false,
-                            Format.classicMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_CLASSIC_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.classicThinMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_BLOCK, 0],
-                            null,
-                            null,
-                            false,
-                            Format.blockMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_BLOCK_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.blockThinMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["async", 0],
-                            null,
-                            null,
-                            false,
-                            Format.asyncMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_OVAL, 0],
-                            null,
-                            null,
-                            false,
-                            Format.ovalMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_DIAMOND, 0],
-                            null,
-                            null,
-                            false,
-                            Format.diamondMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            [mxConstants.ARROW_DIAMOND_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.diamondThinMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["box", 0],
-                            null,
-                            null,
-                            false,
-                            Format.boxMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["halfCircle", 0],
-                            null,
-                            null,
-                            false,
-                            Format.halfCircleMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["dash", 0],
-                            null,
-                            null,
-                            false,
-                            Format.dashMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["cross", 0],
-                            null,
-                            null,
-                            false,
-                            Format.crossMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["circlePlus", 0],
-                            null,
-                            null,
-                            false,
-                            Format.circlePlusMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["circle", 1],
-                            null,
-                            null,
-                            false,
-                            Format.circleMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["baseDash", 0],
-                            null,
-                            null,
-                            false,
-                            Format.baseDashMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["ERone", 0],
-                            null,
-                            null,
-                            false,
-                            Format.EROneMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["ERmandOne", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERmandOneMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["ERmany", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERmanyMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["ERoneToMany", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERoneToManyMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["ERzeroToOne", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERzeroToOneMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["ERzeroToMany", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERzeroToManyMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["doubleBlock", 0],
-                            null,
-                            null,
-                            false,
-                            Format.doubleBlockMarkerImage.src,
-                        ),
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW, "startFill"],
-                            ["doubleBlock", 1],
-                            null,
-                            null,
-                            false,
-                            Format.doubleBlockFilledMarkerImage.src,
-                        ),
-                    );
-                } else {
-                    this.editorUi.menus
-                        .edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_STARTARROW],
-                            [mxConstants.ARROW_BLOCK],
-                            "geIcon geSprite geSprite-startblocktrans",
-                            null,
-                            false,
-                        )
-                        .setAttribute("title", mxResources.get("block"));
-                }
-
-                menu.div.style.width = "40px";
-
-                window.setTimeout(
-                    mxUtils.bind(this, function () {
-                        if (menu.div != null) {
-                            mxUtils.fit(menu.div);
-                        }
-                    }),
-                    0,
-                );
-            }
-        }),
-    );
-
-    var lineEnd = this.editorUi.toolbar.addMenuFunctionInContainer(
-        stylePanel2,
-        "geSprite-endclassic",
-        mxResources.get("lineend"),
-        false,
-        mxUtils.bind(this, function (menu) {
-            if (
-                ss.style.shape == "connector" ||
-                ss.style.shape == "flexArrow" ||
-                ss.style.shape == "filledEdge"
-            ) {
-                var item = this.editorUi.menus.edgeStyleChange(
-                    menu,
-                    "",
-                    [mxConstants.STYLE_ENDARROW, "endFill"],
-                    [mxConstants.NONE, 0],
-                    "geIcon",
-                    null,
-                    false,
-                );
-                item.setAttribute("title", mxResources.get("none"));
-
-                var font = document.createElement("font");
-                font.style.fontSize = "10px";
-                mxUtils.write(font, mxResources.get("none"));
-                item.firstChild.firstChild.appendChild(font);
-
-                if (ss.style.shape == "connector" || ss.style.shape == "filledEdge") {
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_CLASSIC, 1],
-                            null,
-                            null,
-                            false,
-                            Format.classicFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_CLASSIC_THIN, 1],
-                            null,
-                            null,
-                            false,
-                            Format.classicThinFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_OPEN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.openFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_OPEN_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.openThinFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["openAsync", 0],
-                            null,
-                            null,
-                            false,
-                            Format.openAsyncFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_BLOCK, 1],
-                            null,
-                            null,
-                            false,
-                            Format.blockFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_BLOCK_THIN, 1],
-                            null,
-                            null,
-                            false,
-                            Format.blockThinFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["async", 1],
-                            null,
-                            null,
-                            false,
-                            Format.asyncFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_OVAL, 1],
-                            null,
-                            null,
-                            false,
-                            Format.ovalFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_DIAMOND, 1],
-                            null,
-                            null,
-                            false,
-                            Format.diamondFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_DIAMOND_THIN, 1],
-                            null,
-                            null,
-                            false,
-                            Format.diamondThinFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_CLASSIC, 0],
-                            null,
-                            null,
-                            false,
-                            Format.classicMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_CLASSIC_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.classicThinMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_BLOCK, 0],
-                            null,
-                            null,
-                            false,
-                            Format.blockMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_BLOCK_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.blockThinMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["async", 0],
-                            null,
-                            null,
-                            false,
-                            Format.asyncMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_OVAL, 0],
-                            null,
-                            null,
-                            false,
-                            Format.ovalMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_DIAMOND, 0],
-                            null,
-                            null,
-                            false,
-                            Format.diamondMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            [mxConstants.ARROW_DIAMOND_THIN, 0],
-                            null,
-                            null,
-                            false,
-                            Format.diamondThinMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["box", 0],
-                            null,
-                            null,
-                            false,
-                            Format.boxMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["halfCircle", 0],
-                            null,
-                            null,
-                            false,
-                            Format.halfCircleMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["dash", 0],
-                            null,
-                            null,
-                            false,
-                            Format.dashMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["cross", 0],
-                            null,
-                            null,
-                            false,
-                            Format.crossMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["circlePlus", 0],
-                            null,
-                            null,
-                            false,
-                            Format.circlePlusMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["circle", 0],
-                            null,
-                            null,
-                            false,
-                            Format.circleMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["baseDash", 0],
-                            null,
-                            null,
-                            false,
-                            Format.baseDashMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["ERone", 0],
-                            null,
-                            null,
-                            false,
-                            Format.EROneMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["ERmandOne", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERmandOneMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["ERmany", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERmanyMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["ERoneToMany", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERoneToManyMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["ERzeroToOne", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERzeroToOneMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["ERzeroToMany", 0],
-                            null,
-                            null,
-                            false,
-                            Format.ERzeroToManyMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["doubleBlock", 0],
-                            null,
-                            null,
-                            false,
-                            Format.doubleBlockMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                    Format.processMenuIcon(
-                        this.editorUi.menus.edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW, "endFill"],
-                            ["doubleBlock", 1],
-                            null,
-                            null,
-                            false,
-                            Format.doubleBlockFilledMarkerImage.src,
-                        ),
-                        "scaleX(-1)",
-                    );
-                } else {
-                    this.editorUi.menus
-                        .edgeStyleChange(
-                            menu,
-                            "",
-                            [mxConstants.STYLE_ENDARROW],
-                            [mxConstants.ARROW_BLOCK],
-                            "geIcon geSprite geSprite-endblocktrans",
-                            null,
-                            false,
-                        )
-                        .setAttribute("title", mxResources.get("block"));
-                }
-
-                menu.div.style.width = "40px";
-
-                window.setTimeout(
-                    mxUtils.bind(this, function () {
-                        if (menu.div != null) {
-                            mxUtils.fit(menu.div);
-                        }
-                    }),
-                    0,
-                );
-            }
-        }),
-    );
-
-    var elt = this.addArrow(edgeShape, 8);
-    elt.nextSibling.style.position = "relative";
-    elt.nextSibling.style.top = "-2px";
-    elt = this.addArrow(edgeStyle, 10);
-    elt.nextSibling.style.position = "relative";
-    elt.nextSibling.style.top = "-3px";
-    edgeStyle.getElementsByTagName("img")[0].style.top = "-1px";
-    this.addArrow(lineStart);
-    this.addArrow(lineEnd);
-
-    var symbol = this.addArrow(pattern, 9);
-    symbol.className = "geIcon";
-    symbol.style.width = "auto";
-
-    var altSymbol = this.addArrow(altPattern, 9);
-    altSymbol.className = "geIcon";
-    altSymbol.style.width = "22px";
-
-    var solid = document.createElement("div");
-    solid.style.width = "84px";
-    solid.style.height = "1px";
-    solid.style.borderBottom = "1px solid " + this.defaultStrokeColor;
-    solid.style.marginBottom = "7px";
-    symbol.appendChild(solid);
-
-    var altSolid = document.createElement("div");
-    altSolid.style.width = "23px";
-    altSolid.style.height = "1px";
-    altSolid.style.borderBottom = "1px solid " + this.defaultStrokeColor;
-    altSolid.style.marginBottom = "7px";
-    altSymbol.appendChild(altSolid);
-
-    pattern.style.height = "15px";
-    pattern.style.marginLeft = "16px";
-    altPattern.style.height = "15px";
-    altPattern.style.marginLeft = "3px";
-    edgeShape.style.marginLeft = "10px";
-    edgeShape.style.height = "15px";
-    edgeStyle.style.marginLeft = "10px";
-    edgeStyle.style.height = "17px";
-    lineStart.style.marginLeft = "3px";
-    lineStart.style.height = "17px";
-    lineEnd.style.marginLeft = "3px";
-    lineEnd.style.height = "17px";
-
-    container.appendChild(colorPanel);
-    container.appendChild(altStylePanel);
-    container.appendChild(stylePanel);
-
-    var arrowPanel = stylePanel.cloneNode(false);
-    arrowPanel.style.padding = "5px 4px 6px 0px";
-    arrowPanel.style.fontWeight = "normal";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.marginLeft = "0px";
-    span.style.marginBottom = "12px";
-    span.style.marginTop = "2px";
-    span.style.fontWeight = "normal";
-    span.style.width = "76px";
-
-    mxUtils.write(span, mxResources.get("lineend"));
-    arrowPanel.appendChild(span);
-
-    var endSpacingUpdate, endSizeUpdate;
-    var endSpacing = this.addUnitInput(arrowPanel, "pt", 98, 52, function () {
-        endSpacingUpdate.apply(this, arguments);
-    });
-    var endSize = this.addUnitInput(arrowPanel, "pt", 30, 52, function () {
-        endSizeUpdate.apply(this, arguments);
-    });
-
-    mxUtils.br(arrowPanel);
-
-    var spacer = document.createElement("div");
-    spacer.style.height = "8px";
-    arrowPanel.appendChild(spacer);
-
-    span = span.cloneNode(false);
-    mxUtils.write(span, mxResources.get("linestart"));
-    arrowPanel.appendChild(span);
-
-    var startSpacingUpdate, startSizeUpdate;
-    var startSpacing = this.addUnitInput(arrowPanel, "pt", 98, 52, function () {
-        startSpacingUpdate.apply(this, arguments);
-    });
-    var startSize = this.addUnitInput(arrowPanel, "pt", 30, 52, function () {
-        startSizeUpdate.apply(this, arguments);
-    });
-
-    mxUtils.br(arrowPanel);
-    this.addLabel(arrowPanel, mxResources.get("spacing"), 98, 52);
-    this.addLabel(arrowPanel, mxResources.get("size"), 30, 52);
-    mxUtils.br(arrowPanel);
-
-    var perimeterPanel = colorPanel.cloneNode(false);
-    perimeterPanel.style.fontWeight = "normal";
-    perimeterPanel.style.position = "relative";
-    perimeterPanel.style.paddingLeft = "16px";
-    perimeterPanel.style.marginBottom = "2px";
-    perimeterPanel.style.marginTop = "6px";
-    perimeterPanel.style.borderWidth = "0px";
-    perimeterPanel.style.paddingBottom = "18px";
-
-    var span = document.createElement("div");
-    span.style.position = "absolute";
-    span.style.marginLeft = "3px";
-    span.style.marginBottom = "12px";
-    span.style.marginTop = "1px";
-    span.style.fontWeight = "normal";
-    span.style.width = "120px";
-    mxUtils.write(span, mxResources.get("perimeter"));
-    perimeterPanel.appendChild(span);
-
-    var perimeterUpdate;
-    var perimeterSpacing = this.addUnitInput(
-        perimeterPanel,
-        "pt",
-        30,
-        52,
-        function () {
-            perimeterUpdate.apply(this, arguments);
-        },
-    );
-
-    if (ss.edges.length == ss.cells.length) {
-        container.appendChild(stylePanel2);
-        container.appendChild(arrowPanel);
-    } else if (ss.vertices.length == ss.cells.length) {
-        container.appendChild(perimeterPanel);
-    }
-
-    var listener = mxUtils.bind(this, function (sender, evt, force) {
-        ss = ui.getSelectionState();
-
-        if (force || document.activeElement != input) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1),
-            );
-            input.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != altInput) {
-            var tmp = parseFloat(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_STROKEWIDTH, 1),
-            );
-            altInput.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        styleSelect.style.visibility =
-            ss.style.shape == "connector" || ss.style.shape == "filledEdge"
-                ? ""
-                : "hidden";
-
-        if (mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == "1") {
-            styleSelect.value = "curved";
-        } else if (
-            mxUtils.getValue(ss.style, mxConstants.STYLE_ROUNDED, null) == "1"
-        ) {
-            styleSelect.value = "rounded";
-        }
-
-        if (mxUtils.getValue(ss.style, mxConstants.STYLE_DASHED, null) == "1") {
-            if (
-                mxUtils.getValue(ss.style, mxConstants.STYLE_DASH_PATTERN, null) == null
-            ) {
-                solid.style.borderBottom = "1px dashed " + this.defaultStrokeColor;
-            } else {
-                solid.style.borderBottom = "1px dotted " + this.defaultStrokeColor;
-            }
-        } else {
-            solid.style.borderBottom = "1px solid " + this.defaultStrokeColor;
-        }
-
-        altSolid.style.borderBottom = solid.style.borderBottom;
-
-        // Updates toolbar icon for edge style
-        var edgeStyleDiv = edgeStyle.getElementsByTagName("div")[0];
-
-        if (edgeStyleDiv != null) {
-            var es = mxUtils.getValue(ss.style, mxConstants.STYLE_EDGE, null);
-
-            if (
-                mxUtils.getValue(ss.style, mxConstants.STYLE_NOEDGESTYLE, null) == "1"
-            ) {
-                es = null;
-            }
-
-            if (
-                es == "orthogonalEdgeStyle" &&
-                mxUtils.getValue(ss.style, mxConstants.STYLE_CURVED, null) == "1"
-            ) {
-                edgeStyleDiv.className = "geSprite geSprite-curved";
-            } else if (es == "straight" || es == "none" || es == null) {
-                edgeStyleDiv.className = "geSprite geSprite-straight";
-            } else if (es == "entityRelationEdgeStyle") {
-                edgeStyleDiv.className = "geSprite geSprite-entity";
-            } else if (es == "elbowEdgeStyle") {
-                edgeStyleDiv.className =
-                    "geSprite " +
-                    (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
-                        "vertical"
-                        ? "geSprite-verticalelbow"
-                        : "geSprite-horizontalelbow");
-            } else if (es == "isometricEdgeStyle") {
-                edgeStyleDiv.className =
-                    "geSprite " +
-                    (mxUtils.getValue(ss.style, mxConstants.STYLE_ELBOW, null) ==
-                        "vertical"
-                        ? "geSprite-verticalisometric"
-                        : "geSprite-horizontalisometric");
-            } else {
-                edgeStyleDiv.className = "geSprite geSprite-orthogonal";
-            }
-        }
-
-        // Updates icon for edge shape
-        var edgeShapeDiv = edgeShape.getElementsByTagName("div")[0];
-
-        if (edgeShapeDiv != null) {
-            if (ss.style.shape == "link") {
-                edgeShapeDiv.className = "geSprite geSprite-linkedge";
-            } else if (ss.style.shape == "flexArrow") {
-                edgeShapeDiv.className = "geSprite geSprite-arrow";
-            } else if (ss.style.shape == "arrow") {
-                edgeShapeDiv.className = "geSprite geSprite-simplearrow";
-            } else {
-                edgeShapeDiv.className = "geSprite geSprite-connection";
-            }
-        }
-
-        if (ss.edges.length == ss.cells.length) {
-            altStylePanel.style.display = "";
-            stylePanel.style.display = "none";
-        } else {
-            altStylePanel.style.display = "none";
-            stylePanel.style.display = "";
-        }
-
-        if (
-            Graph.lineJumpsEnabled &&
-            ss.edges.length > 0 &&
-            ss.vertices.length == 0 &&
-            ss.lineJumps
-        ) {
-            container.style.borderBottomStyle = "none";
-        }
-
-        function updateArrow(marker, fill, elt, prefix) {
-            var markerDiv = elt.getElementsByTagName("div")[0];
-
-            if (markerDiv != null) {
-                markerDiv.className = ui.getCssClassForMarker(
-                    prefix,
-                    ss.style.shape,
-                    marker,
-                    fill,
-                );
-                markerDiv.nextSibling.style.marginLeft = "1px";
-                markerDiv.nextSibling.style.paddingRight = "5px";
-
-                if (markerDiv.className == "geSprite geSprite-noarrow") {
-                    markerDiv.innerHTML = mxUtils.htmlEntities(mxResources.get("none"));
-                    markerDiv.style.backgroundImage = "none";
-                    markerDiv.style.verticalAlign = "top";
-                    markerDiv.style.marginTop = "4px";
-                    markerDiv.style.fontSize = "10px";
-                    markerDiv.style.filter = "none";
-                    markerDiv.style.color = this.defaultStrokeColor;
-                    markerDiv.nextSibling.style.marginTop = "0px";
-                } else {
-                    markerDiv.nextSibling.style.position = "relative";
-                    markerDiv.nextSibling.style.top = "-2px";
-                }
-            }
-
-            return markerDiv;
-        }
-
-        var sourceDiv = updateArrow(
-            mxUtils.getValue(ss.style, mxConstants.STYLE_STARTARROW, null),
-            mxUtils.getValue(ss.style, "startFill", "1"),
-            lineStart,
-            "start",
-        );
-        var targetDiv = updateArrow(
-            mxUtils.getValue(ss.style, mxConstants.STYLE_ENDARROW, null),
-            mxUtils.getValue(ss.style, "endFill", "1"),
-            lineEnd,
-            "end",
-        );
-
-        // Special cases for markers
-        if (sourceDiv != null && targetDiv != null) {
-            if (ss.style.shape == "arrow") {
-                sourceDiv.className = "geSprite geSprite-noarrow";
-                targetDiv.className = "geSprite geSprite-endblocktrans";
-            } else if (ss.style.shape == "link") {
-                sourceDiv.className = "geSprite geSprite-noarrow";
-                targetDiv.className = "geSprite geSprite-noarrow";
-            }
-        }
-
-        mxUtils.setOpacity(edgeStyle, ss.style.shape == "arrow" ? 30 : 100);
-
-        if (
-            ss.style.shape != "connector" &&
-            ss.style.shape != "flexArrow" &&
-            ss.style.shape != "filledEdge"
-        ) {
-            mxUtils.setOpacity(lineStart, 30);
-            mxUtils.setOpacity(lineEnd, 30);
-        } else {
-            mxUtils.setOpacity(lineStart, 100);
-            mxUtils.setOpacity(lineEnd, 100);
-        }
-
-        if (force || document.activeElement != startSize) {
-            var tmp = parseInt(
-                mxUtils.getValue(
-                    ss.style,
-                    mxConstants.STYLE_STARTSIZE,
-                    mxConstants.DEFAULT_MARKERSIZE,
-                ),
-            );
-            startSize.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != startSpacing) {
-            var tmp = parseInt(
-                mxUtils.getValue(
-                    ss.style,
-                    mxConstants.STYLE_SOURCE_PERIMETER_SPACING,
-                    0,
-                ),
-            );
-            startSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != endSize) {
-            var tmp = parseInt(
-                mxUtils.getValue(
-                    ss.style,
-                    mxConstants.STYLE_ENDSIZE,
-                    mxConstants.DEFAULT_MARKERSIZE,
-                ),
-            );
-            endSize.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != startSpacing) {
-            var tmp = parseInt(
-                mxUtils.getValue(
-                    ss.style,
-                    mxConstants.STYLE_TARGET_PERIMETER_SPACING,
-                    0,
-                ),
-            );
-            endSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-
-        if (force || document.activeElement != perimeterSpacing) {
-            var tmp = parseInt(
-                mxUtils.getValue(ss.style, mxConstants.STYLE_PERIMETER_SPACING, 0),
-            );
-            perimeterSpacing.value = isNaN(tmp) ? "" : tmp + " pt";
-        }
-    });
-
-    startSizeUpdate = this.installInputHandler(
-        startSize,
-        mxConstants.STYLE_STARTSIZE,
-        mxConstants.DEFAULT_MARKERSIZE,
-        0,
-        999,
-        " pt",
-    );
-    startSpacingUpdate = this.installInputHandler(
-        startSpacing,
-        mxConstants.STYLE_SOURCE_PERIMETER_SPACING,
-        0,
-        -999,
-        999,
-        " pt",
-    );
-    endSizeUpdate = this.installInputHandler(
-        endSize,
-        mxConstants.STYLE_ENDSIZE,
-        mxConstants.DEFAULT_MARKERSIZE,
-        0,
-        999,
-        " pt",
-    );
-    endSpacingUpdate = this.installInputHandler(
-        endSpacing,
-        mxConstants.STYLE_TARGET_PERIMETER_SPACING,
-        0,
-        -999,
-        999,
-        " pt",
-    );
-    perimeterUpdate = this.installInputHandler(
-        perimeterSpacing,
-        mxConstants.STYLE_PERIMETER_SPACING,
-        0,
-        0,
-        999,
-        " pt",
-    );
-
-    this.addKeyHandler(input, listener);
-    this.addKeyHandler(startSize, listener);
-    this.addKeyHandler(startSpacing, listener);
-    this.addKeyHandler(endSize, listener);
-    this.addKeyHandler(endSpacing, listener);
-    this.addKeyHandler(perimeterSpacing, listener);
-
-    graph.getModel().addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            graph.getModel().removeListener(listener);
-        },
-    });
-    listener();
-
-    return container;
-};
-
-/**
- * Adds UI for configuring line jumps.
- */
-StyleFormatPanel.prototype.addLineJumps = function (container) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var ss = ui.getSelectionState();
-
-    if (
-        Graph.lineJumpsEnabled &&
-        ss.edges.length > 0 &&
-        ss.vertices.length == 0 &&
-        ss.lineJumps
-    ) {
-        container.style.padding = "2px 0px 24px 14px";
-
-        var span = document.createElement("div");
-        span.style.position = "absolute";
-        span.style.maxWidth = "82px";
-        span.style.overflow = "hidden";
-        span.style.textOverflow = "ellipsis";
-
-        mxUtils.write(span, mxResources.get("lineJumps"));
-        container.appendChild(span);
-
-        var styleSelect = document.createElement("select");
-        styleSelect.style.position = "absolute";
-        styleSelect.style.height = "21px";
-        styleSelect.style.padding = "0px";
-        styleSelect.style.marginTop = "-2px";
-        styleSelect.style.boxSizing = "border-box";
-        styleSelect.style.right = "76px";
-        styleSelect.style.width = "54px";
-        styleSelect.style.border = "1px solid rgb(160, 160, 160)";
-        styleSelect.style.borderRadius = "4px";
-
-        var styles = ["none", "arc", "gap", "sharp", "line"];
-
-        for (var i = 0; i < styles.length; i++) {
-            var styleOption = document.createElement("option");
-            styleOption.setAttribute("value", styles[i]);
-            mxUtils.write(styleOption, mxResources.get(styles[i]));
-            styleSelect.appendChild(styleOption);
-        }
-
-        mxEvent.addListener(styleSelect, "change", function (evt) {
-            graph.getModel().beginUpdate();
-            try {
-                graph.setCellStyles("jumpStyle", styleSelect.value, ss.cells);
-                ui.fireEvent(
-                    new mxEventObject(
-                        "styleChanged",
-                        "keys",
-                        ["jumpStyle"],
-                        "values",
-                        [styleSelect.value],
-                        "cells",
-                        ss.cells,
-                    ),
-                );
-            } finally {
-                graph.getModel().endUpdate();
-            }
-
-            mxEvent.consume(evt);
-        });
-
-        // Stops events from bubbling to color option event handler
-        mxEvent.addListener(styleSelect, "click", function (evt) {
-            mxEvent.consume(evt);
-        });
-
-        container.appendChild(styleSelect);
-
-        var jumpSizeUpdate;
-
-        var jumpSize = this.addUnitInput(container, "pt", 16, 42, function () {
-            jumpSizeUpdate.apply(this, arguments);
-        });
-
-        jumpSizeUpdate = this.installInputHandler(
-            jumpSize,
-            "jumpSize",
-            Graph.defaultJumpSize,
-            0,
-            999,
-            " pt",
-        );
-
-        var listener = mxUtils.bind(this, function (sender, evt, force) {
-            ss = ui.getSelectionState();
-            styleSelect.value = mxUtils.getValue(ss.style, "jumpStyle", "none");
-
-            if (force || document.activeElement != jumpSize) {
-                var tmp = parseInt(
-                    mxUtils.getValue(ss.style, "jumpSize", Graph.defaultJumpSize),
-                );
-                jumpSize.value = isNaN(tmp) ? "" : tmp + " pt";
-            }
-        });
-
-        this.addKeyHandler(jumpSize, listener);
-
-        graph.getModel().addListener(mxEvent.CHANGE, listener);
-        this.listeners.push({
-            destroy: function () {
-                graph.getModel().removeListener(listener);
-            },
-        });
-        listener();
-    } else {
-        container.style.display = "none";
-    }
-
-    return container;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addEffects = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var ss = ui.getSelectionState();
-
-    div.style.paddingTop = "4px";
-    div.style.paddingBottom = "0px";
-
-    var table = document.createElement("table");
-
-    table.style.width = "210px";
-    table.style.fontWeight = "bold";
-    table.style.tableLayout = "fixed";
-    var tbody = document.createElement("tbody");
-    var row = document.createElement("tr");
-    row.style.padding = "0px";
-    var left = document.createElement("td");
-    left.style.padding = "0px";
-    left.style.width = "50%";
-    left.setAttribute("valign", "top");
-
-    var right = left.cloneNode(true);
-    right.style.paddingLeft = "8px";
-    row.appendChild(left);
-    row.appendChild(right);
-    tbody.appendChild(row);
-    table.appendChild(tbody);
-    div.appendChild(table);
-
-    var current = left;
-    var count = 0;
-
-    var addOption = mxUtils.bind(this, function (label, key, defaultValue) {
-        var opt = this.createCellOption(label, key, defaultValue);
-        opt.style.width = "100%";
-        current.appendChild(opt);
-        current = current == left ? right : left;
-        count++;
-    });
-
-    var listener = mxUtils.bind(this, function (sender, evt, force) {
-        ss = ui.getSelectionState();
-
-        left.innerHTML = "";
-        right.innerHTML = "";
-        current = left;
-
-        if (ss.rounded) {
-            addOption(mxResources.get("rounded"), mxConstants.STYLE_ROUNDED, 0);
-        }
-
-        if (ss.swimlane) {
-            addOption(mxResources.get("divider"), "swimlaneLine", 1);
-        }
-
-        if (!ss.containsImage) {
-            addOption(mxResources.get("shadow"), mxConstants.STYLE_SHADOW, 0);
-        }
-
-        if (ss.glass) {
-            addOption(mxResources.get("glass"), mxConstants.STYLE_GLASS, 0);
-        }
-
-        addOption(mxResources.get("sketch"), "sketch", 0);
-    });
-
-    graph.getModel().addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            graph.getModel().removeListener(listener);
-        },
-    });
-    listener();
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-StyleFormatPanel.prototype.addStyleOps = function (div) {
-    div.style.paddingTop = "10px";
-    div.style.paddingBottom = "10px";
-
-    this.addActions(div, ["setAsDefaultStyle"]);
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramStylePanel = function (format, editorUi, container) {
-    BaseFormatPanel.call(this, format, editorUi, container);
-    this.init();
-};
-
-mxUtils.extend(DiagramStylePanel, BaseFormatPanel);
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramStylePanel.prototype.init = function () {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    this.darkModeChangedListener = mxUtils.bind(this, function () {
-        this.format.cachedStyleEntries = [];
-    });
-
-    ui.addListener("darkModeChanged", this.darkModeChangedListener);
-    this.container.appendChild(this.addView(this.createPanel()));
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramStylePanel.prototype.addView = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-    var model = graph.getModel();
-    var gridColor = graph.view.gridColor;
-
-    div.style.whiteSpace = "normal";
-
-    var sketch =
-        graph.currentVertexStyle["sketch"] == "1" &&
-        graph.currentEdgeStyle["sketch"] == "1";
-    var rounded = graph.currentVertexStyle["rounded"] == "1";
-    var curved = graph.currentEdgeStyle["curved"] == "1";
-
-    var opts = document.createElement("div");
-    opts.style.marginRight = "16px";
-    div.style.paddingTop = "8px";
-
-    var table = document.createElement("table");
-
-    table.style.width = "210px";
-    table.style.fontWeight = "bold";
-
-    var tbody = document.createElement("tbody");
-    var row = document.createElement("tr");
-    row.style.padding = "0px";
-
-    var left = document.createElement("td");
-    left.style.padding = "0px";
-    left.style.width = "50%";
-    left.setAttribute("valign", "middle");
-
-    var right = left.cloneNode(true);
-    right.style.paddingLeft = "8px";
-
-    // Sketch
-    if (urlParams["sketch"] != "1") {
-        opts.style.paddingBottom = "12px";
-        row.appendChild(left);
-
-        left.appendChild(
-            this.createOption(
-                mxResources.get("sketch"),
-                function () {
-                    return sketch;
-                },
-                function (checked) {
-                    sketch = checked;
-
-                    if (checked) {
-                        graph.currentEdgeStyle["sketch"] = "1";
-                        graph.currentVertexStyle["sketch"] = "1";
-                    } else {
-                        delete graph.currentEdgeStyle["sketch"];
-                        delete graph.currentVertexStyle["sketch"];
-                    }
-
-                    graph.updateCellStyles(
-                        { sketch: checked ? "1" : null },
-                        graph.getVerticesAndEdges(),
-                    );
-                },
-                null,
-                function (div) {
-                    div.style.width = "auto";
-                },
-            ),
-        );
-    }
-
-    row.appendChild(right);
-    tbody.appendChild(row);
-    table.appendChild(tbody);
-
-    // Rounded
-    right.appendChild(
-        this.createOption(
-            mxResources.get("rounded"),
-            function () {
-                return rounded;
-            },
-            function (checked) {
-                rounded = checked;
-
-                if (checked) {
-                    graph.currentEdgeStyle["rounded"] = "1";
-                    graph.currentVertexStyle["rounded"] = "1";
-                } else {
-                    delete graph.currentEdgeStyle["rounded"];
-                    delete graph.currentVertexStyle["rounded"];
-                }
-
-                graph.updateCellStyles(
-                    { rounded: checked ? "1" : "0" },
-                    graph.getVerticesAndEdges(),
-                );
-            },
-            null,
-            function (div) {
-                div.style.width = "auto";
-            },
-        ),
-    );
-
-    // Curved
-    if (urlParams["sketch"] != "1") {
-        left = left.cloneNode(false);
-        right = right.cloneNode(false);
-        row = row.cloneNode(false);
-        row.appendChild(left);
-        row.appendChild(right);
-        tbody.appendChild(row);
-
-        left.appendChild(
-            this.createOption(
-                mxResources.get("curved"),
-                function () {
-                    return curved;
-                },
-                function (checked) {
-                    curved = checked;
-
-                    if (checked) {
-                        graph.currentEdgeStyle["curved"] = "1";
-                    } else {
-                        delete graph.currentEdgeStyle["curved"];
-                    }
-
-                    graph.updateCellStyles(
-                        { curved: checked ? "1" : null },
-                        graph.getVerticesAndEdges(false, true),
-                    );
-                },
-                null,
-                function (div) {
-                    div.style.width = "auto";
-                },
-            ),
-        );
-    }
-
-    opts.appendChild(table);
-    div.appendChild(opts);
-
-    var defaultStyles = [
-        "fillColor",
-        "strokeColor",
-        "fontColor",
-        "gradientColor",
-    ];
-
-    var updateCells = mxUtils.bind(this, function (styles, graphStyle) {
-        var cells = graph.getVerticesAndEdges();
-
-        model.beginUpdate();
-        try {
-            for (var i = 0; i < cells.length; i++) {
-                var style = graph.getCellStyle(cells[i]);
-
-                // Handles special label background color
-                if (style["labelBackgroundColor"] != null) {
-                    graph.updateCellStyles(
-                        {
-                            labelBackgroundColor:
-                                graphStyle != null ? graphStyle.background : null,
-                        },
-                        [cells[i]],
-                    );
-                }
-
-                var edge = model.isEdge(cells[i]);
-                var newStyle = model.getStyle(cells[i]);
-                var current = edge ? graph.currentEdgeStyle : graph.currentVertexStyle;
-
-                for (var j = 0; j < styles.length; j++) {
-                    if (
-                        (style[styles[j]] != null &&
-                            style[styles[j]] != mxConstants.NONE) ||
-                        (styles[j] != mxConstants.STYLE_FILLCOLOR &&
-                            styles[j] != mxConstants.STYLE_STROKECOLOR)
-                    ) {
-                        newStyle = mxUtils.setStyle(
-                            newStyle,
-                            styles[j],
-                            current[styles[j]],
-                        );
-                    }
-                }
-
-                model.setStyle(cells[i], newStyle);
-            }
-        } finally {
-            model.endUpdate();
-        }
-    });
-
-    var removeStyles = mxUtils.bind(this, function (style, styles, defaultStyle) {
-        if (style != null) {
-            for (var j = 0; j < styles.length; j++) {
-                if (
-                    (style[styles[j]] != null && style[styles[j]] != mxConstants.NONE) ||
-                    (styles[j] != mxConstants.STYLE_FILLCOLOR &&
-                        styles[j] != mxConstants.STYLE_STROKECOLOR)
-                ) {
-                    style[styles[j]] = defaultStyle[styles[j]];
-                }
-            }
-        }
-    });
-
-    var applyStyle = mxUtils.bind(
-        this,
-        function (style, result, cell, graphStyle, theGraph) {
-            if (style != null) {
-                if (cell != null) {
-                    // Handles special label background color
-                    if (result["labelBackgroundColor"] != null) {
-                        var bg = graphStyle != null ? graphStyle.background : null;
-                        theGraph = theGraph != null ? theGraph : graph;
-
-                        if (bg == null) {
-                            bg = theGraph.background;
-                        }
-
-                        if (bg == null) {
-                            bg = theGraph.defaultPageBackgroundColor;
-                        }
-
-                        result["labelBackgroundColor"] = bg;
-                    }
-                }
-
-                for (var key in style) {
-                    if (
-                        cell == null ||
-                        (result[key] != null && result[key] != mxConstants.NONE) ||
-                        (key != mxConstants.STYLE_FILLCOLOR &&
-                            key != mxConstants.STYLE_STROKECOLOR)
-                    ) {
-                        result[key] = style[key];
-                    }
-                }
-            }
-        },
-    );
-
-    if (urlParams["sketch"] != "1") {
-        var btn = mxUtils.button(
-            mxResources.get("reset"),
-            mxUtils.bind(this, function (evt) {
-                var all = graph.getVerticesAndEdges(true, true);
-
-                if (all.length > 0) {
-                    model.beginUpdate();
-                    try {
-                        graph.updateCellStyles({ sketch: null, rounded: null }, all);
-                        graph.updateCellStyles(
-                            { curved: null },
-                            graph.getVerticesAndEdges(false, true),
-                        );
-                    } finally {
-                        model.endUpdate();
-                    }
-                }
-
-                ui.clearDefaultStyle();
-            }),
-        );
-
-        btn.setAttribute("title", mxResources.get("reset"));
-        btn.style.textOverflow = "ellipsis";
-        btn.style.maxWidth = "90px";
-        right.appendChild(btn);
-    }
-
-    var createPreview = mxUtils.bind(
-        this,
-        function (commonStyle, vertexStyle, edgeStyle, graphStyle, container) {
-            // Wrapper needed to catch events
-            var div = document.createElement("div");
-            div.style.position = "absolute";
-            div.style.display = "inline-block";
-            div.style.overflow = "hidden";
-            div.style.pointerEvents = "none";
-            div.style.width = "100%";
-            div.style.height = "100%";
-            container.appendChild(div);
-
-            var graph2 = new Graph(div, null, null, graph.getStylesheet());
-
-            graph2.resetViewOnRootChange = false;
-            graph2.foldingEnabled = false;
-            graph2.gridEnabled = false;
-            graph2.autoScroll = false;
-            graph2.setTooltips(false);
-            graph2.setConnectable(false);
-            graph2.setPanning(false);
-            graph2.setEnabled(false);
-
-            graph2.getCellStyle = function (cell, resolve) {
-                resolve = resolve != null ? resolve : true;
-                var result = mxUtils.clone(graph.getCellStyle.apply(this, arguments));
-                var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
-                var appliedStyle = vertexStyle;
-
-                if (model.isEdge(cell)) {
-                    defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
-                    appliedStyle = edgeStyle;
-                }
-
-                removeStyles(result, defaultStyles, defaultStyle);
-                applyStyle(commonStyle, result, cell, graphStyle, graph2);
-                applyStyle(appliedStyle, result, cell, graphStyle, graph2);
-
-                if (resolve) {
-                    result = graph.postProcessCellStyle(cell, result);
-                }
-
-                return result;
-            };
-
-            // Avoid HTML labels to capture events in bubble phase
-            graph2.model.beginUpdate();
-            try {
-                var v1 = graph2.insertVertex(
-                    graph2.getDefaultParent(),
-                    null,
-                    "Shape",
-                    14,
-                    8,
-                    70,
-                    40,
-                    "strokeWidth=2;",
-                );
-                var e1 = graph2.insertEdge(
-                    graph2.getDefaultParent(),
-                    null,
-                    "Connector",
-                    v1,
-                    v1,
-                    "edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;endSize=5;strokeWidth=2;",
-                );
-                e1.geometry.points = [new mxPoint(32, 70)];
-                e1.geometry.offset = new mxPoint(0, 8);
-            } finally {
-                graph2.model.endUpdate();
-            }
-        },
-    );
-
-    // Entries
-    var entries = document.createElement("div");
-    entries.style.position = "relative";
-    div.appendChild(entries);
-
-    // Cached entries
-    if (this.format.cachedStyleEntries == null) {
-        this.format.cachedStyleEntries = [];
-    }
-
-    function addKeys(style, result) {
-        for (var key in style) {
-            result.push(key);
-        }
-
-        return result;
-    }
-
-    var addEntry = mxUtils.bind(
-        this,
-        function (commonStyle, vertexStyle, edgeStyle, graphStyle, index) {
-            var panel = this.format.cachedStyleEntries[index];
-
-            if (panel == null) {
-                panel = document.createElement("div");
-                panel.style.display = "inline-block";
-                panel.style.position = "relative";
-                panel.style.width = "96px";
-                panel.style.height = "90px";
-                panel.style.cursor = "pointer";
-                panel.style.border = "1px solid gray";
-                panel.style.borderRadius = "8px";
-                panel.style.margin = "2px";
-                panel.style.overflow = "hidden";
-
-                if (graphStyle != null && graphStyle.background != null) {
-                    panel.style.backgroundColor = graphStyle.background;
-                }
-
-                createPreview(commonStyle, vertexStyle, edgeStyle, graphStyle, panel);
-
-                mxEvent.addGestureListeners(
-                    panel,
-                    mxUtils.bind(this, function (evt) {
-                        panel.style.opacity = 0.5;
-                    }),
-                    null,
-                    mxUtils.bind(this, function (evt) {
-                        panel.style.opacity = 1;
-                        graph.currentVertexStyle = mxUtils.clone(graph.defaultVertexStyle);
-                        graph.currentEdgeStyle = mxUtils.clone(graph.defaultEdgeStyle);
-
-                        applyStyle(commonStyle, graph.currentVertexStyle);
-                        applyStyle(commonStyle, graph.currentEdgeStyle);
-                        applyStyle(vertexStyle, graph.currentVertexStyle);
-                        applyStyle(edgeStyle, graph.currentEdgeStyle);
-
-                        if (urlParams["sketch"] == "1") {
-                            sketch = Editor.sketchMode;
-                        }
-
-                        if (sketch) {
-                            graph.currentEdgeStyle["sketch"] = "1";
-                            graph.currentVertexStyle["sketch"] = "1";
-                        } else {
-                            graph.currentEdgeStyle["sketch"] = "0";
-                            graph.currentVertexStyle["sketch"] = "0";
-                        }
-
-                        if (rounded) {
-                            graph.currentVertexStyle["rounded"] = "1";
-                            graph.currentEdgeStyle["rounded"] = "1";
-                        } else {
-                            graph.currentVertexStyle["rounded"] = "0";
-                            graph.currentEdgeStyle["rounded"] = "1";
-                        }
-
-                        if (curved) {
-                            graph.currentEdgeStyle["curved"] = "1";
-                        } else {
-                            graph.currentEdgeStyle["curved"] = "0";
-                        }
-
-                        model.beginUpdate();
-                        try {
-                            updateCells(
-                                addKeys(commonStyle, defaultStyles.slice()),
-                                graphStyle,
-                            );
-
-                            var change = new ChangePageSetup(
-                                ui,
-                                graphStyle != null ? graphStyle.background : null,
-                            );
-                            change.ignoreImage = true;
-                            model.execute(change);
-
-                            model.execute(
-                                new ChangeGridColor(
-                                    ui,
-                                    graphStyle != null && graphStyle.gridColor != null
-                                        ? graphStyle.gridColor
-                                        : gridColor,
-                                ),
-                            );
-                        } finally {
-                            model.endUpdate();
-                        }
-                    }),
-                );
-
-                mxEvent.addListener(
-                    panel,
-                    "mouseenter",
-                    mxUtils.bind(this, function (evt) {
-                        var prev = graph.getCellStyle;
-                        var prevBg = graph.background;
-                        var prevGrid = graph.view.gridColor;
-
-                        graph.background =
-                            graphStyle != null ? graphStyle.background : null;
-                        graph.view.gridColor =
-                            graphStyle != null && graphStyle.gridColor != null
-                                ? graphStyle.gridColor
-                                : gridColor;
-
-                        graph.getCellStyle = function (cell, resolve) {
-                            resolve = resolve != null ? resolve : true;
-                            var result = mxUtils.clone(prev.apply(this, arguments));
-
-                            var defaultStyle = graph.stylesheet.getDefaultVertexStyle();
-                            var appliedStyle = vertexStyle;
-
-                            if (model.isEdge(cell)) {
-                                defaultStyle = graph.stylesheet.getDefaultEdgeStyle();
-                                appliedStyle = edgeStyle;
-                            }
-
-                            removeStyles(result, defaultStyles, defaultStyle);
-                            applyStyle(commonStyle, result, cell, graphStyle);
-                            applyStyle(appliedStyle, result, cell, graphStyle);
-
-                            if (resolve) {
-                                result = this.postProcessCellStyle(cell, result);
-                            }
-
-                            return result;
-                        };
-
-                        graph.refresh();
-                        graph.getCellStyle = prev;
-                        graph.background = prevBg;
-                        graph.view.gridColor = prevGrid;
-                    }),
-                );
-
-                mxEvent.addListener(
-                    panel,
-                    "mouseleave",
-                    mxUtils.bind(this, function (evt) {
-                        graph.refresh();
-                    }),
-                );
-
-                // Workaround for broken cache in IE11
-                if (!mxClient.IS_IE && !mxClient.IS_IE11) {
-                    this.format.cachedStyleEntries[index] = panel;
-                }
-            }
-
-            entries.appendChild(panel);
-        },
-    );
-
-    // Maximum palettes to switch the switcher
-    var maxEntries = 10;
-    var pageCount = Math.ceil(Editor.styles.length / maxEntries);
-    this.format.currentStylePage =
-        this.format.currentStylePage != null ? this.format.currentStylePage : 0;
-    var dots = [];
-
-    var addEntries = mxUtils.bind(this, function () {
-        if (dots.length > 0) {
-            dots[this.format.currentStylePage].style.background = "#84d7ff";
-        }
-
-        for (
-            var i = this.format.currentStylePage * maxEntries;
-            i <
-            Math.min(
-                (this.format.currentStylePage + 1) * maxEntries,
-                Editor.styles.length
-            );
-            i++
-        ) {
-            var s = Editor.styles[i];
-            addEntry(s.commonStyle, s.vertexStyle, s.edgeStyle, s.graph, i);
-        }
-    });
-
-    var selectPage = mxUtils.bind(this, function (index) {
-        if (index >= 0 && index < pageCount) {
-            dots[this.format.currentStylePage].style.background = "transparent";
-            entries.innerHTML = "";
-            this.format.currentStylePage = index;
-            addEntries();
-        }
-    });
-
-    if (pageCount > 1) {
-        // Selector
-        var switcher = document.createElement("div");
-        switcher.style.whiteSpace = "nowrap";
-        switcher.style.position = "relative";
-        switcher.style.textAlign = "center";
-        switcher.style.paddingTop = "4px";
-        switcher.style.width = "210px";
-
-        div.style.paddingBottom = "8px";
-
-        for (var i = 0; i < pageCount; i++) {
-            var dot = document.createElement("div");
-            dot.style.display = "inline-block";
-            dot.style.width = "6px";
-            dot.style.height = "6px";
-            dot.style.marginLeft = "4px";
-            dot.style.marginRight = "3px";
-            dot.style.borderRadius = "3px";
-            dot.style.cursor = "pointer";
-            dot.style.background = "transparent";
-            dot.style.border = "1px solid #b5b6b7";
-
-            mxUtils.bind(this, function (index, elt) {
-                mxEvent.addListener(
-                    dot,
-                    "click",
-                    mxUtils.bind(this, function () {
-                        selectPage(index);
-                    }),
-                );
-            })(i, dot);
-
-            switcher.appendChild(dot);
-            dots.push(dot);
-        }
-
-        div.appendChild(switcher);
-        addEntries();
-
-        if (pageCount < 15) {
-            var left = document.createElement("div");
-            left.style.position = "absolute";
-            left.style.left = "0px";
-            left.style.top = "0px";
-            left.style.bottom = "0px";
-            left.style.width = "24px";
-            left.style.height = "24px";
-            left.style.margin = "0px";
-            left.style.cursor = "pointer";
-            left.style.opacity = "0.5";
-            left.style.backgroundRepeat = "no-repeat";
-            left.style.backgroundPosition = "center center";
-            left.style.backgroundSize = "24px 24px";
-            left.style.backgroundImage = "url(" + Editor.previousImage + ")";
-
-            if (Editor.isDarkMode()) {
-                left.style.filter = "invert(100%)";
-            }
-
-            var right = left.cloneNode(false);
-            right.style.backgroundImage = "url(" + Editor.nextImage + ")";
-            right.style.left = "";
-            right.style.right = "2px";
-
-            switcher.appendChild(left);
-            switcher.appendChild(right);
-
-            mxEvent.addListener(
-                left,
-                "click",
-                mxUtils.bind(this, function () {
-                    selectPage(mxUtils.mod(this.format.currentStylePage - 1, pageCount));
-                }),
-            );
-
-            mxEvent.addListener(
-                right,
-                "click",
-                mxUtils.bind(this, function () {
-                    selectPage(mxUtils.mod(this.format.currentStylePage + 1, pageCount));
-                }),
-            );
-
-            // Hover state
-            function addHoverState(elt) {
-                mxEvent.addListener(elt, "mouseenter", function () {
-                    elt.style.opacity = "1";
-                });
-                mxEvent.addListener(elt, "mouseleave", function () {
-                    elt.style.opacity = "0.5";
-                });
-            }
-
-            addHoverState(left);
-            addHoverState(right);
-        }
-    } else {
-        addEntries();
-    }
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramStylePanel.prototype.destroy = function () {
-    BaseFormatPanel.prototype.destroy.apply(this, arguments);
-
-    if (this.darkModeChangedListener) {
-        this.editorUi.removeListener(this.darkModeChangedListener);
-        this.darkModeChangedListener = null;
-    }
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel = function (format, editorUi, container) {
-    BaseFormatPanel.call(this, format, editorUi, container);
-    this.init();
-};
-
-mxUtils.extend(DiagramFormatPanel, BaseFormatPanel);
-
-/**
- * Switch to disable page view.
- */
-DiagramFormatPanel.showPageView = true;
-
-/**
- * Specifies if the background image option should be shown. Default is true.
- */
-DiagramFormatPanel.prototype.showBackgroundImageOption = true;
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.init = function () {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    this.container.appendChild(this.addView(this.createPanel()));
-
-    if (graph.isEnabled()) {
-        this.container.appendChild(this.addOptions(this.createPanel()));
-        this.container.appendChild(this.addPaperSize(this.createPanel()));
-        this.container.appendChild(this.addStyleOps(this.createPanel()));
-    }
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.addView = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    div.appendChild(this.createTitle(mxResources.get("view")));
-
-    // Grid
-    this.addGridOption(div);
-
-    // Page View
-    if (DiagramFormatPanel.showPageView) {
-        div.appendChild(
-            this.createOption(
-                mxResources.get("pageView"),
-                function () {
-                    return graph.pageVisible;
-                },
-                function (checked) {
-                    ui.actions.get("pageView").funct();
-                },
-                {
-                    install: function (apply) {
-                        this.listener = function () {
-                            apply(graph.pageVisible);
-                        };
-
-                        ui.addListener("pageViewChanged", this.listener);
-                    },
-                    destroy: function () {
-                        ui.removeListener(this.listener);
-                    },
-                },
-            ),
-        );
-    }
-
-    if (graph.isEnabled()) {
-        // Background
-        var bg = this.createColorOption(
-            mxResources.get("background"),
-            function () {
-                return graph.background;
-            },
-            function (color) {
-                var change = new ChangePageSetup(ui, color);
-                change.ignoreImage = color != null && color != mxConstants.NONE;
-
-                graph.model.execute(change);
-            },
-            "#ffffff",
-            {
-                install: function (apply) {
-                    this.listener = function () {
-                        apply(graph.background);
-                    };
-
-                    ui.addListener("backgroundColorChanged", this.listener);
-                },
-                destroy: function () {
-                    ui.removeListener(this.listener);
-                },
-            },
-        );
-
-        if (this.showBackgroundImageOption) {
-            var label = bg.getElementsByTagName("span")[0];
-            label.style.display = "inline-block";
-            label.style.textOverflow = "ellipsis";
-            label.style.overflow = "hidden";
-            label.style.maxWidth = "68px";
-
-            if (mxClient.IS_FF) {
-                label.style.marginTop = "1px";
-            }
-
-            var btn = mxUtils.button(mxResources.get("change"), function (evt) {
-                ui.showBackgroundImageDialog(null, ui.editor.graph.backgroundImage);
-                mxEvent.consume(evt);
-            });
-
-            btn.className = "geColorBtn";
-            btn.style.position = "absolute";
-            btn.style.marginTop = "-3px";
-            btn.style.height = "22px";
-            btn.style.left = "118px";
-            btn.style.width = "56px";
-
-            bg.appendChild(btn);
-        }
-
-        div.appendChild(bg);
-    }
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.addOptions = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    div.appendChild(this.createTitle(mxResources.get("options")));
-
-    if (graph.isEnabled()) {
-        // Connection arrows
-        div.appendChild(
-            this.createOption(
-                mxResources.get("connectionArrows"),
-                function () {
-                    return graph.connectionArrowsEnabled;
-                },
-                function (checked) {
-                    ui.actions.get("connectionArrows").funct();
-                },
-                {
-                    install: function (apply) {
-                        this.listener = function () {
-                            apply(graph.connectionArrowsEnabled);
-                        };
-
-                        ui.addListener("connectionArrowsChanged", this.listener);
-                    },
-                    destroy: function () {
-                        ui.removeListener(this.listener);
-                    },
-                },
-            ),
-        );
-
-        // Connection points
-        div.appendChild(
-            this.createOption(
-                mxResources.get("connectionPoints"),
-                function () {
-                    return graph.connectionHandler.isEnabled();
-                },
-                function (checked) {
-                    ui.actions.get("connectionPoints").funct();
-                },
-                {
-                    install: function (apply) {
-                        this.listener = function () {
-                            apply(graph.connectionHandler.isEnabled());
-                        };
-
-                        ui.addListener("connectionPointsChanged", this.listener);
-                    },
-                    destroy: function () {
-                        ui.removeListener(this.listener);
-                    },
-                },
-            ),
-        );
-
-        // Guides
-        div.appendChild(
-            this.createOption(
-                mxResources.get("guides"),
-                function () {
-                    return graph.graphHandler.guidesEnabled;
-                },
-                function (checked) {
-                    ui.actions.get("guides").funct();
-                },
-                {
-                    install: function (apply) {
-                        this.listener = function () {
-                            apply(graph.graphHandler.guidesEnabled);
-                        };
-
-                        ui.addListener("guidesEnabledChanged", this.listener);
-                    },
-                    destroy: function () {
-                        ui.removeListener(this.listener);
-                    },
-                },
-            ),
-        );
-    }
-
-    return div;
-};
-
-/**
- *
- */
-DiagramFormatPanel.prototype.addGridOption = function (container) {
-    var fPanel = this;
-    var ui = this.editorUi;
-    var graph = ui.editor.graph;
-
-    var input = document.createElement("input");
-    input.style.position = "absolute";
-    input.style.textAlign = "right";
-    input.style.width = "48px";
-    input.style.marginTop = "-2px";
-    input.style.height = "21px";
-    input.style.border = "1px solid rgb(160, 160, 160)";
-    input.style.borderRadius = "4px";
-    input.style.boxSizing = "border-box";
-    input.value = this.inUnit(graph.getGridSize()) + " " + this.getUnit();
-
-    var stepper = this.createStepper(
-        input,
-        update,
-        this.getUnitStep(),
-        null,
-        null,
-        null,
-        this.isFloatUnit(),
-    );
-    input.style.display = graph.isGridEnabled() ? "" : "none";
-    stepper.style.display = input.style.display;
-
-    mxEvent.addListener(input, "keydown", function (e) {
-        if (e.keyCode == 13) {
-            graph.container.focus();
-            mxEvent.consume(e);
-        } else if (e.keyCode == 27) {
-            input.value = graph.getGridSize();
-            graph.container.focus();
-            mxEvent.consume(e);
-        }
-    });
-
-    function update(evt) {
-        var value = fPanel.isFloatUnit()
-            ? parseFloat(input.value)
-            : parseInt(input.value);
-        value = fPanel.fromUnit(
-            Math.max(fPanel.inUnit(1), isNaN(value) ? fPanel.inUnit(10) : value),
-        );
-
-        if (value != graph.getGridSize()) {
-            mxGraph.prototype.gridSize = value;
-            graph.setGridSize(value);
-        }
-
-        input.value = fPanel.inUnit(value) + " " + fPanel.getUnit();
-        mxEvent.consume(evt);
-    }
-
-    mxEvent.addListener(input, "blur", update);
-    mxEvent.addListener(input, "change", update);
-
-    input.style.right = "78px";
-    stepper.style.marginTop = "-17px";
-    stepper.style.right = "66px";
-
-    var panel = this.createColorOption(
-        mxResources.get("grid"),
-        function () {
-            var color = graph.view.gridColor;
-
-            return graph.isGridEnabled() ? color : null;
-        },
-        function (color) {
-            var enabled = graph.isGridEnabled();
-
-            if (color == mxConstants.NONE) {
-                graph.setGridEnabled(false);
-            } else {
-                graph.setGridEnabled(true);
-                ui.setGridColor(color);
-            }
-
-            input.style.display = graph.isGridEnabled() ? "" : "none";
-            stepper.style.display = input.style.display;
-
-            if (enabled != graph.isGridEnabled()) {
-                graph.defaultGridEnabled = graph.isGridEnabled();
-                ui.fireEvent(new mxEventObject("gridEnabledChanged"));
-            }
-        },
-        Editor.isDarkMode()
-            ? graph.view.defaultDarkGridColor
-            : graph.view.defaultGridColor,
-        {
-            install: function (apply) {
-                this.listener = function () {
-                    apply(graph.isGridEnabled() ? graph.view.gridColor : null);
-                };
-
-                ui.addListener("gridColorChanged", this.listener);
-                ui.addListener("gridEnabledChanged", this.listener);
-            },
-            destroy: function () {
-                ui.removeListener(this.listener);
-            },
-        },
-    );
-
-    panel.appendChild(input);
-    panel.appendChild(stepper);
-    container.appendChild(panel);
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.addDocumentProperties = function (div) {
-    // Hook for subclassers
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    div.appendChild(this.createTitle(mxResources.get("options")));
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.addPaperSize = function (div) {
-    var ui = this.editorUi;
-    var editor = ui.editor;
-    var graph = editor.graph;
-
-    div.appendChild(this.createTitle(mxResources.get("paperSize")));
-
-    var accessor = PageSetupDialog.addPageFormatPanel(
-        div,
-        "formatpanel",
-        graph.pageFormat,
-        function (pageFormat) {
-            if (
-                graph.pageFormat == null ||
-                graph.pageFormat.width != pageFormat.width ||
-                graph.pageFormat.height != pageFormat.height
-            ) {
-                var change = new ChangePageSetup(ui, null, null, pageFormat);
-                change.ignoreColor = true;
-                change.ignoreImage = true;
-
-                graph.model.execute(change);
-            }
-        },
-    );
-
-    this.addKeyHandler(accessor.widthInput, function () {
-        accessor.set(graph.pageFormat);
-    });
-    this.addKeyHandler(accessor.heightInput, function () {
-        accessor.set(graph.pageFormat);
-    });
-
-    var listener = function () {
-        accessor.set(graph.pageFormat);
-    };
-
-    ui.addListener("pageFormatChanged", listener);
-    this.listeners.push({
-        destroy: function () {
-            ui.removeListener(listener);
-        },
-    });
-
-    graph.getModel().addListener(mxEvent.CHANGE, listener);
-    this.listeners.push({
-        destroy: function () {
-            graph.getModel().removeListener(listener);
-        },
-    });
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.addStyleOps = function (div) {
-    this.addActions(div, ["editData"]);
-    this.addActions(div, ["clearDefaultStyle"]);
-
-    return div;
-};
-
-/**
- * Adds the label menu items to the given menu and parent.
- */
-DiagramFormatPanel.prototype.destroy = function () {
-    BaseFormatPanel.prototype.destroy.apply(this, arguments);
-
-    if (this.gridEnabledListener) {
-        this.editorUi.removeListener(this.gridEnabledListener);
-        this.gridEnabledListener = null;
-    }
-};
-
-// TODO UseLayUi
-class UseLayUi {
-
-    constructor() {
-    }
-
-    static isFunction = fn => {
-        const result = Object.prototype.toString.call(fn)
-        return result === '[object Function]' || result === '[object AsyncFunction]'
-    }
-
-    static dynamicAttr = (attr, value) => value ? `${attr}="${value}"` : ''
-
-    /**
-     * @description format data source to tree structure
-     * @param {object[]} data - data source
-     * @param {Function} [customSetValue = ((record) => ({ id: record.id, title: record.name }))] customSetValue - custom set value && need return value
-     * @param {string} [idField = 'id'] idField - id field
-     * @param {string} [titleField = 'name'] titleField - titleField field
-     * @param {string} [childrenField = 'children'] childrenField - children field
-     * @returns {object[]}
-     */
-    static formatTreeDataSource(data, customSetValue, idField = 'id', titleField = 'name', childrenField = 'children') {
-        if (!Array.isArray(data) && !data.length) return []
-        customSetValue = customSetValue || ((record) => ({ id: record[idField], title: record[titleField] }))
-        const fn = (data) => {
-            return data.reduce((prev, next = {}) => {
-                let children = []
-                if (next[childrenField] && next[childrenField].length) {
-                    children = fn(next.children)
-                }
-                return [...prev, { children, ...customSetValue(next) }]
-            }, [])
-        }
-        return fn(data)
-    }
-
-    /**
-     * @description 通过ID 找到对应节点
-     * @param dataSource
-     * @param value
-     * @param findField
-     * @param childrenField
-     * @returns {any}
-     */
-    static findTreeObjectByField(dataSource, value, findField = 'id', childrenField = 'children') {
-        const map = new Map()
-
-        function find(array) {
-            for (const item of array) {
-                map.set(item[findField], item)
-                if (map.has(item[value])) {
-                    break
-                }
-                if (item[childrenField] && Array.isArray(item[childrenField])) {
-                    find(item[childrenField])
-                }
-            }
-        }
-
-        if (Array.isArray(dataSource)) {
-            find(dataSource)
-            return map.get(value)
-        }
-    }
-
-    /**
-     * @description generator options template 生产下拉选项模板
-     * @param options
-     * @param {object[]} [dataSource]  options.dataSource
-     * @param {boolean} [addPlaceholderOption = true]  options.addPlaceholderOption
-     * @param {string} [labelField = 'name']  options.labelField
-     * @param {string} [valueField = 'name']  options.valueField
-     * @returns {*}
-     */
-    static generateOptionTemplate(options) {
-        const { dataSource = [], addPlaceholderOption = true, labelField = 'name', valueField = 'id' } = options
-        let { renderFn } = options
-        renderFn = renderFn || ((record) => {
-            if (typeof record === 'object') {
-                return `<option value="${record[valueField]}" ${record.disabled ? 'disabled=""' : ''}>${record[labelField]}</option>`
-            } else {
-                return `<option value="${record}">${record}</option>`
-            }
-        })
-        const optionsList = dataSource.map(renderFn)
-        if (addPlaceholderOption) optionsList.unshift('<option value="">请选择</option>')
-        return optionsList.join('')
-    }
-
-    /**
-     * @description create single usage controls
-     * @param {string} content
-     */
-    static createSingleUseFormItem(content, props = '') {
-        return `
-    <div class="layui-form" ${props}>
-      ${content}
-    </div>
-    `
-    }
-
-    /**
-     * @description 判断节点是否在某个节点之内
-     * @param {HTMLElement} parentNode
-     * @param {HTMLElement} childrenNode
-     * @param {boolean} [containsItsOwn = false] containsItsOwn - 是否包含自身
-     * @returns {boolean|*}
-     */
-    static isInNode(parentNode, childrenNode, containsItsOwn = false) {
-        return parentNode === childrenNode
-            ? containsItsOwn
-            : parentNode.contains(childrenNode)
-    }
-
-    /**
-     * @description create layui single select template
-     * @param {string} [options.layFilter] options.layFilter
-     * @param {string} [options.bindValueFiled] options.bindValueFiled
-     * @param {string} [options.layVerify] options.layVerify
-     * @param {string} [options.layVerType] options.layVerType
-     * @param {Function} [options.renderFn] options.renderFn
-     * @param {Array} [options.dataSource = []] options.dataSource
-     * @param {string} [options.valueField = id] options.valueField
-     * @param {string} [options.labelField = name] options.labelField - dataSource
-     * @param {string} [options.label = 选择框] options.label - select label
-     * @param {string} [options.className = ''] options.className - css class name
-     * @param {Function} [options.onClick] options.onClick - select on click
-     * @returns {string}
-     */
-    static createSelect(options) {
-        const { form, jquery: $ } = layui
-
-        const {
-            elem,
-            layFilter,
-            bindValueFiled,
-            layVerify,
-            layVerType,
-            renderFn,
-            dataSource = [],
-            valueField = 'id',
-            labelField = 'name',
-            label = '',
-            className = '',
-            onClick,
-            singleUsage = true,
-        } = options
-
-        const formatDataSource = (dataSource) => {
-            return dataSource.map(record => {
-                return {
-                    value: record[valueField],
-                    label: record[labelField],
-                }
-            })
-        }
-
-        const getOptionList = (dataSource) => {
-            if (renderFn && this.isFunction(renderFn)) {
-                return dataSource.map(record => renderFn(record))
-            }
-            return formatDataSource(dataSource).map(record => {
-                return `<option value="${record[valueField]}" ${record.disable ? 'disabled=""' : ''}>${record[labelField]}</option>`
-            })
-        }
-
-        const generateOptionTemplate = (dataSource, addPlaceholderOption = true) => {
-            const optionsList = getOptionList(dataSource)
-            if (addPlaceholderOption) optionsList.unshift('<option value="">请选择</option>')
-            return optionsList.join('')
-        }
-
-        if (layFilter) {
-            form.on(`select(${layFilter})`, (data) => {
-                if (onClick && this.isFunction(onClick)) {
-                    onClick(data)
-                }
-            })
-        }
-
-        let template = `
-      <div class="layui-form-item ${className}">
-        <label class="layui-form-label">${label}</label>
-        <div class="layui-input-block"> 
-          <select name="${bindValueFiled}" ${this.dynamicAttr('lay-filter', layFilter)} ${this.dynamicAttr('lay-verify', layVerify)} ${this.dynamicAttr('lay-verType', layVerType)}>
-            ${generateOptionTemplate(dataSource)}
-          </select>
-        </div>
-      </div>`
-
-        const updateOptions = (dataSource) => {
-            if (!elem) return
-            const optionList = generateOptionTemplate(dataSource)
-            $(elem).find('select').html(optionList)
-            form.render('select', layFilter)
-        }
-
-        template = singleUsage ? UseLayUi.createSingleUseFormItem(template, '') : template
-
-
-        function mount() {
-            if (elem) {
-                UseLayUi.nextTick(() => {
-                    $(elem).html(template)
-                })
-                return { template, updateOptions }
-            }
-            return template
-        }
-
-        return mount()
-    }
-
-    // TODO Tree Select
-    /**
-     * @description create a tree select controls
-     * @param {string} [options.layFilter] options.layFilter
-     * @param {string} [options.label] options.label
-     * @param {object} [options.treeProps] options.treeProps
-     * @param {HTMLDivElement} [options.elem] options.elem
-     * @param {boolean} [options.singleUsage = true] options.singleUsage
-     * @param {Function} [options.customSetTree = ((record) => ({ id: record.id, title: record.name }))] options.customSetTree
-     * @param {boolean} [options.autoFormatDataSource = true] options.autoFormatDataSource
-     * @param {string} [options.layVerify] options.layVerify
-     * @param {string} [options.layVerType] options.layVerType
-     * @param {Function} [options.treeProps.onReady] options.treeProps.onReady
-     */
-    static createTreeSelect(options) {
-        const CLASS_NAME = 'things-kit-tree-select'
-        const SELECT_CLS = 'things-kit-tree-select__tree'
-        const { tree, jquery: $, form } = layui
-
-        const {
-            layFilter,
-            label,
-            treeProps = {},
-            elem,
-            className = '',
-            singleUsage = true,
-            customSetTree = undefined,
-            autoFormatDataSource = true,
-            labelField = 'name',
-            valueField = 'id',
-            childrenField = 'children',
-            layVerify,
-            layVerType,
-        } = options
-
-        let { data = [], click, onReady } = treeProps
-
-        let template = `
-            <div class="layui-form-item ${CLASS_NAME} ${className}">
-                <label class="layui-form-label">${label}</label>
-                <div class="layui-input-block">
-                <div class="layui-unselect layui-form-select ${SELECT_CLS}">
-                    <div class="layui-select-title">
-                    <span class="layui-input layui-unselect tree-select__label">请选择</span>
-                    <input ${this.dynamicAttr('lay-verify', layVerify)} ${this.dynamicAttr('lay-verType', layVerType)} type="text" style="visibility: hidden; position: absolute; top: 0" name="${layFilter}">
-                    <i class="layui-edge"></i> 
-                    </div>
-                    <dl class="layui-anim layui-anim-upbit">
-                    <dd>
-                        <ul class="tree-select__tree-mount"></ul>
-                    </dd>
-                    </dl>
-                </div>
-                </div>
-            </div>`
-
-        template = singleUsage ? UseLayUi.createSingleUseFormItem(template) : template
-
-        /**
-         * @description 设置下拉树值
-         * @param {string} id - layui tree 树形结构 title字段
-         * @param {string} title - layui tree 树形结构 id字段
-         */
-        function setValue({ id, title }) {
-            $(elem)
-                .find('.layui-form-select').removeClass('layui-form-selected').end()
-                .find(".layui-select-title span").html(title).end()
-                .find(`input[name='${layFilter}']`).val(id);
-        }
-
-        // init mount
-        function mount() {
-            // mount select container
-            $(elem).html(template)
-
-            // mount tree
-            // UseLayUi.nextTick(() => {
-            tree.render({
-                ...treeProps,
-                ...(autoFormatDataSource ? { data: UseLayUi.formatTreeDataSource(data, customSetTree, valueField, labelField, childrenField) } : {}),
-                elem: $(elem).find('.tree-select__tree-mount'),
-                click(node) {
-                    setValue(node.data)
-                    if (UseLayUi.isFunction(click)) click(node)
-                },
-            })
-
-            // focus
-            $(`.${SELECT_CLS}`).off('click')
-                .on("click", ".layui-select-title", function (e) {
-                    $(document).find('.layui-form-select').removeClass('layui-form-selected')
-                    $(this).parents(`.${SELECT_CLS}`).toggleClass("layui-form-selected");
-                    layui.stope(e);
-                })
-                .on('click', '.layui-anim', (e) => {
-                    layui.stope(e)
-                })
-                .on("click", "dl i", function (e) {
-                    layui.stope(e);
-                })
-
-            // blur
-            // $(document)
-            // 	.on("click", function (e) {
-            // 		const target = e.target
-            // 		const parentNode = $(`.${CLASS_NAME} .tree-select__tree-mount`)
-            // 		if (!parentNode) return
-            // 		console.log($.contains(parentNode, target))
-            // 		// const showClose = UseLayUi.isInNode(parentNode, target, true)
-            // 		// if (showClose) return
-            // 		// $(`.${ SELECT_CLS }`).removeClass("layui-form-selected")
-            // 	});
-
-            if (UseLayUi.isFunction(onReady)) {
-                onReady(setValue)
-            }
-            // })
-            form.render()
-        }
-
-        mount()
-    }
-
-    static createCheckBox(options) {
-        const { jquery: $, form } = layui
-        const CLASS_NAME = 'things-kit__checkbox'
-        let {
-            elem,
-            singleUsage = true,
-            layFilter = '',
-            layVerify = '',
-            label = '',
-            laySkin = 'primary',
-            dataSource = [],
-            customSetValue,
-            labelField = 'name',
-            valueField = 'id',
-            checkedField = 'checked',
-            onChange,
-        } = options
-        customSetValue = customSetValue || ((record) => ({ value: record.id, title: record.name }))
-        if (!Array.isArray(dataSource)) {
-            dataSource = [dataSource]
-        }
-
-        function createOptions(dataSource) {
-            return dataSource.map((record) => {
-                return `<input 
-                            type="checkbox" lay-skin="${laySkin}" 
-                            ${UseLayUi.dynamicAttr('name', record[valueField])} 
-                            ${UseLayUi.dynamicAttr('title', record[labelField])}
-                            ${UseLayUi.dynamicAttr('lay-filter', layFilter)} 
-                            ${UseLayUi.dynamicAttr('lay-verify', layVerify)} 
-                            ${UseLayUi.dynamicAttr('checked', record[checkedField])}
-                        >`
-            })
-        }
-
-        let template = `
-            <div class="layui-form-item ${CLASS_NAME}" >
-                <label class="layui-form-label">${label}</label>
-                <div class="layui-input-block">
-                ${createOptions(dataSource).join('')}
-                </div>
-            </div>`
-
-        template = singleUsage ? UseLayUi.createSingleUseFormItem(template) : template
-
-        function mount() {
-            if (!elem) return template
-            $(elem).empty()
-            $(elem).append(template)
-            form.on(`checkbox(${layFilter})`, (data) => {
-                onChange && (onChange(data))
-            })
-            form.render()
-        }
-
-        return mount()
-    }
-
-    /**
-     * @description 创建树形组件
-     * @param {object} options
-     * @param {string | object} options.elem - 挂载节点
-     * @param {object[]} [data] options.data - 数据源
-     * @param {string} [id] options.id - 用于基础方法传参使用
-     * @param {boolean} [showCheckbox = false] options.showCheckbox - 显示复选框
-     * @param {boolean|string[]} [edit] options.edit - 是否开启节点操作
-     * @param {boolean} [accordion = false] options.accordion - 手风琴
-     * @param {boolean} [onlyIconControl = false] options.onlyIconControl - 仅允许左侧图标展开收缩
-     * @param {boolean} [isJump = false] options.isJump - 跳转
-     * @param {boolean} [showLine = true] options.showLine - 显示连接线
-     * @param {object} [text] options.text - 自定义默认值
-     * @param {string} [valueField = 'id'] options.valueField - 值字段
-     * @param {string} [labelField = 'name'] options.labelField - 标签字段
-     * @param {string} [childrenField = 'children'] options.childrenField - 后代节点字段
-     * @param {Function} [customSetValue] options.customSetValue - 后代节点字段
-     * @param {boolean} [autoFormatValue = true] options.autoFormatValue - 自动格式化值
-     */
-    static createTree(options = {}) {
-        const { tree } = layui
-        const {
-            data = [],
-            valueField = 'id',
-            labelField = 'name',
-            childrenField = 'children',
-            customSetValue,
-            autoFormatValue = true,
-        } = options
-        tree.render({
-            ...options,
-            data: autoFormatValue ? UseLayUi.formatTreeDataSource(data, customSetValue, valueField, labelField, childrenField) : data,
-        })
-    }
-
-
-    static nextTick(fn) {
-        new Promise((resolve) => {
-            resolve()
-        }).then(() => {
-            fn()
-        })
-    }
-
-    static msg(msg, options) {
-        const { layer } = layui
-        layer.msg(msg, options)
-    }
-
-    static successMsg(msg = '操作成功', options) {
-        UseLayUi.msg(msg, { ...options, icon: 6 })
-    }
-
-    static errorMsg(msg = '操作失败', options) {
-        UseLayUi.msg(msg, { ...options, icon: 5 })
-    }
-
-    static topMsg(msg, options, icon) {
-        const { layer } = layui
-        layer.msg(`<div style="padding: 20px; display: flex; align-items: center;"><i class="layui-layer-ico layui-layer-ico${icon}" style="width: 30px;height: 30px;"></i><span style="margin-left: 5px">${msg}</span></div>`, { ...options, type: 1, icon, time: 2000, })
-    }
-
-    static topSuccessMsg(msg = '操作成功', options) {
-        this.topMsg(msg, options, 6)
-    }
-
-    static topErrorMsg(msg = '操作失败', options) {
-        this.topMsg(msg, options, 5)
-    }
-
-    static topInfoMsg(msg = '提示', options) {
-        this.topMsg(msg, options, 0)
-    }
-}
-
-
-/**
- * @description use to function capture await throw error
- * @param promise
- * @param errorExt - Additional Information you can pass to the err object
- */
-function to(promise, errorExt) {
-    return promise
-        .then((data) => [null, data])
-        .catch((err) => {
-            if (errorExt) {
-                const parsedError = Object.assign({}, err, errorExt)
-                return [parsedError, undefined]
-            }
-            return [err, undefined]
-        })
-}
-
-
-class EventCenter {
-
-    /**
-     * @description 调度中心
-     * @type {Map<string, Function[]>}
-     */
-    eventStack
-
-    /**
-     * @description 实例化EventCenter
-     */
-    constructor() {
-        this.eventStack = new Map()
-    }
-
-    /**
-     * @description 监听事件
-     * @param {string | number} eventName - 事件名
-     * @param {Function} callback - 事件处理方法
-     */
-    on(eventName, callback) {
-        if (this.eventStack.has(eventName)) {
-            this.eventStack.get(eventName).push(callback)
-            return
-        }
-        this.eventStack.set(eventName, [callback])
-    }
-
-    /**
-     * @description 触发事件
-     * @param {string | number} eventName  - 事件名
-     * @param {any} args - 参数
-     */
-    emit(eventName, ...args) {
-        if (this.eventStack.has(eventName))
-            this.eventStack.get(eventName).forEach(fn => fn(...args))
-    }
-
-    /**
-     * @description 移除事件
-     * @param {string} eventName - 时间名
-     */
-    off(eventName) {
-        if (this.eventStack.has(eventName))
-            this.eventStack.delete(eventName)
-    }
-
-    /**
-     * @description 清除事件
-     */
-    clean(eventName) {
-        this.eventStack.clear()
-    }
-
-
-}
-
-class Ws {
-    /**
-     * @description url 连接地址
-     */
-    url
-
-    /**
-     * @description 协议
-     */
-    protocols
-
-    /**
-     * @description socket open时 拓展
-     * @type {Function}
-     * @param {Ws} instance - 实例
-     */
-    onopenCallback
-
-    /**
-     * @description socket error时 拓展
-     * @type {Function}
-     * @param {Ws} instance - 实例
-     */
-    onerrorCallback
-
-    /**
-     * @description socket close时 拓展
-     * @type {Function}
-     * @param {Ws} instance - 实例
-     */
-    oncloseCallback
-
-    /**
-     * @description socket message时 拓展
-     * @type {Function}
-     * @param {object} data - event.data  message数据
-     * @param {MessageEvent} event - event  事件对象
-     * @param {Ws} instance - Ws 实例
-     */
-    onmessageCallback
-
-    /**
-     * @description socket 实例
-     * @type {WebSocket}
-     */
-    ws
-
-    /**
-     * @description 重连标志
-     * @type {boolean}
-     */
-    isReconnectionLoading = false
-
-    /**
-     * @description 重连定时器
-     */
-    timeId = null
-
-    /**
-     * @description 手动关闭标志位
-     * @type {boolean}
-     */
-    isCustomClose = false
-
-    /**
-     * @description 消息队列 重新连接后会将之前断开期间发送的消息重新推送
-     * @type {Array}
-     */
-    errorStack = []
-
-    /**
-     * @description 实例
-     */
-    static instance
-
-    /**
-     * @description 创建websocket实例
-     * @param {string} option.url - 连接路径
-     * @param {string} [option.protocols] option.protocols - 协议
-     * @param {Function} [option.onopenCallback] option.onopenCallback - socket open时 拓展
-     * @param {Function} [option.onerrorCallback] option.onerrorCallback - socket error时 拓展
-     * @param {Function} [option.oncloseCallback] option.oncloseCallback - socket close时 拓展
-     * @param {Function} [option.onmessageCallback] option.onmessageCallback - socket message时 拓展
-     */
-    constructor(option) {
-        const { url, protocols, onopenCallback, onerrorCallback, oncloseCallback, onmessageCallback } = option
-        if (!url) throw new Error('param url in Ws constructor is required')
-        this.url = url
-        this.protocols = protocols
-        this.onopenCallback = onopenCallback
-        this.onerrorCallback = onerrorCallback
-        this.oncloseCallback = oncloseCallback
-        this.onmessageCallback = onmessageCallback
-        this.createWs()
-    }
-
-    /**
-     * @description
-     */
-    createWs() {
-        this.ws = new WebSocket(this.url, this.protocols)
-        this.onopen()
-        this.onerror()
-        this.onclose()
-        this.onmessage()
-    }
-
-    /**
-     * @description 建立连接时
-     */
-    onopen() {
-        this.ws.onopen = () => {
-            this.errorStack.forEach(message => {
-                this.send(message)
-            })
-            this.errorStack = []
-            this.isReconnectionLoading = false
-            if (typeof this.onopenCallback === 'function') this.onopenCallback(this)
-        }
-    }
-
-    /**
-     * @description 连接发生错误
-     */
-    onerror() {
-        this.ws.onerror = (err) => {
-            this.reconnection()
-            this.isReconnectionLoading = false
-            if (typeof this.onerrorCallback === 'function') this.onerrorCallback(this)
-        }
-    }
-
-    /**
-     * @description 连接断开时
-     */
-    onclose() {
-        this.ws.onclose = () => {
-            if (this.isCustomClose) return
-
-            this.reconnection()
-            this.isReconnectionLoading = false
-
-            if (typeof this.oncloseCallback === 'function') this.oncloseCallback(this)
-        }
-    }
-
-    /**
-     * @description 接受消息
-     */
-    onmessage() {
-        this.ws.onmessage = (event) => {
-            try {
-                const data = JSON.parse(event.data)
-                if (typeof this.onmessageCallback === 'function') this.onmessageCallback(data, event, this)
-
-            } catch (error) {
-                // throw new Error(error)
-                console.error(error)
-            }
-        }
-    }
-
-    /**
-     * @description 断开重连
-     */
-    reconnection() {
-        if (this.isReconnectionLoading) return
-
-        this.isReconnectionLoading = true
-        clearTimeout(this.timeId)
-        this.timeId = setTimeout(() => {
-            this.createWs()
-        }, 60000)
-    }
-
-    /**
-     * @description 发送消息
-     */
-    send(message) {
-        if (!this.ws || this.ws.readyState !== 1) {
-            this.errorStack.push(message)
-            return
-        }
-
-        this.ws.send(message)
-    }
-
-    /**
-     * @description 手动关闭
-     */
-    close() {
-        this.isCustomClose = true
-        this.ws.close()
-    }
-
-    /**
-     * @description 手动开启
-     */
-    start() {
-        this.isCustomClose = false
-        this.reconnection()
-    }
-
-    /**
-     * @description 销毁
-     */
-    destroy() {
-        this.close()
-        this.ws = null
-        this.errorStack = null
-        Ws.instance = null
-    }
-
-    /**
-     * @description 单例模式
-     * @param {string} option.url - 连接路径
-     * @param {string} [option.protocols] option.protocols - 协议
-     * @param {Function} [option.onopenCallback] option.onopenCallback - socket open时 拓展
-     * @param {Function} [option.onerrorCallback] option.onerrorCallback - socket error时 拓展
-     * @param {Function} [option.oncloseCallback] option.oncloseCallback - socket close时 拓展
-     * @param {Function} [option.onmessageCallback] option.onmessageCallback - socket message时 拓展
-     * @return {Ws} instance
-     */
-    static getInstance(option) {
-        if (!this.instance) {
-            this.instance = new Ws(option)
-        }
-        return this.instance
-    }
-}
-
-/**
- * @description 切换页面时触发 /src/main/webapp/js/diagramly/Pages.js  row: 461
- * @param editorUi
- * @param currentPage
- */
-function previewAction(editorUi, currentPage) {
-    if (!editorUi.editor.graph.isLightboxView()) return
-    DispatchCenter.getInstance(editorUi, currentPage)
-
-    /**
-     * @description 编辑模式下editor对象的editable为true
-     * @param editorUi
-     * @return {boolean}
-     */
-    function isPreviewMode(editorUi = {}) {
-        const { editor: { editable } = {} } = editorUi
-        return !!editable
-    }
-}
-
-
-/**
- * @description 调度中心
- */
-class DispatchCenter {
-
-    /**
-     * @description 节点映射
-     * @type {Map<string, Map<string, object>>}
-     */
-    nodeMapping
-
-    /**
-     * @description cmd ID 与 node 映射关系
-     * @type {Map<number, string>}
-     */
-    cmdIdMapping = new Map()
-
-    /**
-     * @description
-     */
-    editorUi
-
-    /**
-     * @description 当前页信息
-     */
-    currentPage
-
-    /**
-     * @description 当前页中的所有cell
-     */
-    contentAllCell
-
-    /**
-     * @description 图源信息
-     */
-    graph
-
-    /**
-     * @description socket instance
-     * @type {Ws}
-     */
-    socket
-
-    /**
-     * @description 事件总线
-     * @type {EventCenter}
-     */
-    eventBus
-
-    /**
-     * @description 页面数据
-     * @type {{dataSources: [], act: [], event: []}}
-     */
-    contentData
-
-    /**
-     * @description 处理数据源实例
-     * @type {HandleDataSource}
-     */
-    dataSourceHandlerInstance
-
-    /**
-     * @description 处理数据动效实例
-     * @type {HandleDynamicEffect}
-     */
-    dynamicEffectInstance
-
-    /**
-     * @description 处理数据交互实例
-     * @type {HandleDataInteraction}
-     */
-    dataInteractionInstance
-
-    /**
-     * @description 更新队列
-     * @type {UpdateQueue}
-     */
-    updateQueueInstance
-
-    /**
-     * @description cmd id
-     */
-    cmdIdPrimaryKey = 0
-
-    /**
-     * @description 当前实例
-     * @type {DispatchCenter}
-     */
-    static instance
-
-    /**
-     * @description 原页面ID 原页面content id
-     */
-    static rawContentId
-
-    /**
-     * @description 判断事件监听器时候已经绑定过
-     */
-    static eventListenerIsExist = false
-
-    static enumEventType = {
-        DOWN: 'DOWN',
-        UP: 'UP',
-        SINGLE: 'SINGLE',
-        DOUBLE: 'DOUBLE',
-    }
-
-    static enumDynamicEffectType = {
-        DISPLAY: 'DISPLAY',
-        FLASH: 'FLASH',
-        ROTATE: 'ROTATE',
-        SWITCH: 'SWITCH',
-    }
-
-    static enumPageType = {
-        PAGE: 'PAGE',
-        LINK: 'LINK',
-        PROPS: 'PROPS',
-        PARAMS_SETTING: 'PARAMS_SETTING'
-    }
-
-
-    constructor(editorUi, currentPage) {
-        this.nodeMapping = new Map()
-        this.editorUi = editorUi
-        this.init(editorUi, currentPage)
-    }
-
-    /**
-     * @description 初始化实例
-     * @param editorUi
-     * @param currentPage
-     */
-    async init(editorUi, currentPage) {
-        this.createEventBus()
-        this.saveContentInfo(editorUi, currentPage)
-        this.connectSocket()
-        await this.getContentDataNode()
-        this.dataSourceHandlerInstance = new HandleDataSource(this)
-        this.dataInteractionInstance = new HandleDataInteraction(this)
-        this.dynamicEffectInstance = new HandleDynamicEffect(this)
-        this.updateQueueInstance = new UpdateQueue(this)
-    }
-
-    /**
-     * @description 建立socket连接
-     */
-    connectSocket() {
-        Ws.instance?.destroy?.()
-        this.socket = Ws.getInstance({ url: GLOBAL_WS_URL(), onmessageCallback: this.socketOnmessage })
-    }
-
-    /**
-     * @description 处理webSocket消息
-     * @param message
-     * @param event
-     * @param ws
-     */
-    socketOnmessage(message, event, ws) {
-        const { subscriptionId, data } = message
-        DispatchCenter.instance.publishEvent(subscriptionId, data, message, event, ws)
-    }
-
-    /**
-     * @description 创建事件中心
-     */
-    createEventBus() {
-        this.eventBus = new EventCenter()
-    }
-
-    /**
-     * @description 保存部分页面信息到实例上
-     * @param editorUi
-     * @param currentPage
-     */
-    saveContentInfo(editorUi, currentPage) {
-        const editor = editorUi.editor
-        this.graph = editor.graph
-        this.currentPage = currentPage
-        this.contentAllCell = this.graph.getDefaultParent().children || []
-    }
-
-    /**
-     * @description 获取页面绑定的节点信息
-     */
-    async getContentDataNode() {
-        const { node: { id } = {} } = this.currentPage
-        if (!id) return
-        const [err, res] = await to(ConfigurationNodeApi.getConfigurationInfo('CONTENT', id))
-        this.contentData = res
-    }
-
-    /**
-     * @description 发送消息去获取实时数据
-     */
-    sendMessageToGetRealTimeData(message) {
-        if (typeof message !== 'string') message = JSON.stringify(message)
-        this.socket.send(message)
-    }
-
-    /**
-     * @description  通过传入NodeId获取cmdId
-     * @param nodeId
-     * @return {number}
-     */
-    getCmdId(nodeId) {
-        const cmdId = this.cmdIdPrimaryKey++
-        this.cmdIdMapping.set(cmdId, nodeId)
-        return cmdId
-    }
-
-    /**
-     * @description 生成节点映射表
-     * @param dataSources
-     * @return {{cmdId: number, entityType: string, keys: *, scope: string, entityId: *}[]}
-     */
-    generatorDataSourceMapping(dataSources = []) {
-        return dataSources.map((datum) => {
-            const { deviceId, attr, nodeId, slaveDeviceId } = datum
-            const cmdId = this.getCmdId(nodeId)
-            const sendMsgTemplate = {
-                entityType: "DEVICE",
-                entityId: slaveDeviceId ? slaveDeviceId : deviceId,
-                scope: "LATEST_TELEMETRY",
-                cmdId,
-                keys: attr,
-            }
-            this.subscribeDataSources(datum, cmdId, attr)
-            return sendMsgTemplate
-        })
-    }
-
-    /**
-     * @description 分发事件
-     */
-    publishEvent(eventName, data, message, event, ws) {
-        // data = data ? data : {}
-        this.eventBus.emit(eventName, message, event, ws)
-        // console.log(arguments)
-        // Object.keys(data).forEach(() => {
-        //     this.eventBus.emit(eventName, message, event, ws)
-        // })
-    }
-
-    /**
-     * @description 订阅数据源
-     * @param datum
-     * @param eventName
-     * @param key
-     */
-    subscribeDataSources(datum, eventName, key) {
-        const node = this.contentAllCell.find(item => item.id === datum.nodeId)
-        this.eventBus.on(eventName, (message) => {
-            node && this.updatePage(() => {
-                const { data } = message
-                const [[timespan, value]] = data[key]
-                node.setValue(value)
-            }, node)
-        })
-    }
-
-    /**
-     * @description 更新页面
-     * @param callback
-     * @param cell
-     */
-    updatePage(callback, cell) {
-        this.graph.getModel().beginUpdate()
-        try {
-            callback()
-            this.graph.refresh(cell);
-        } finally {
-            this.graph.getModel().endUpdate()
-        }
-    }
-
-
-    /**
-     * @description 返回 DispatchCenter 实例 当contentID变化时重新创建实例
-     * @param editorUi
-     * @param currentPage
-     * @return {*}
-     */
-    static getInstance(editorUi, currentPage = {}) {
-        const { node: { id } = {} } = currentPage
-        if (!id) return
-        if (!DispatchCenter.instance || DispatchCenter.rawContentId !== id) {
-            DispatchCenter.instance?.dynamicEffectInstance?.cleanSetInterval?.()
-            DispatchCenter.instance?.updateQueueInstance?.cleanAllUpdateQueue?.()
-            DispatchCenter.instance = new DispatchCenter(editorUi, currentPage)
-            DispatchCenter.rawContentId = id
-        }
-
-        return DispatchCenter.instance
-    }
-
-}
-
-class HandleDataSource {
-
-    static enumConst = {
-
-        /**
-         * @description 聚合方式
-         */
-        AGG: 'agg',
-
-        /**
-         * @description 间隔方式
-         */
-        INTERVAL: 'interval',
-
-        /**
-         * @description 单位
-         */
-        UNIT: 'unit',
-
-        /**
-         * @description 开始时间
-         */
-        STARTTs: 'startTs',
-
-        /**
-         * @description 结束时间
-         */
-        ENDTs: 'endTs',
-
-        /**
-         * @description 范围
-         */
-        EFFECT_SCOPE: 'effectScope',
-
-        /**
-         * @description 绑定数据类型
-         */
-        DATA_TYPE: 'dataType'
-    }
-
-
-    static enumDataBindType = {
-
-        /**
-         * @description 历史
-         */
-        HISTORY: 'historyCmds',
-
-        /**
-         * @description 事实
-         */
-        REAL: 'tsSubCmds'
-    }
-
-    /**
-     * @description 数据源节点映射
-     * @type {Map<string, object>}
-     */
-    dataSourceNodeMapping = new Map()
-
-    /**
-     * @description 派发队列
-     * @type {DispatchCenter}
-     */
-    DispatchInstance
-
-    constructor(DispatchInstance) {
-        this.DispatchInstance = DispatchInstance
-        this.generatorCommonDataSourceMapping()
-        this.generatorChartDataSourceMapping()
-    }
-
-    get graph() {
-        return this.DispatchInstance.graph
-    }
-
-    /**
-     * @description 普通数据源绑定列表
-     */
-    get commonDataSourceBindList() {
-        return this.DispatchInstance.contentData?.dataSources?.filter(item => !item.additional && item.attr) || []
-    }
-
-    /**
-     * @description 图表数据源绑定列表
-     */
-    get chartDataSourceBindList() {
-        return this.DispatchInstance.contentData?.dataSources?.filter(item => item.additional) || []
-    }
-
-    get cmdIdMapping() {
-        return this.DispatchInstance.cmdIdMapping
-    }
-
-    get basicAttr() {
-        return Sidebar.prototype.enumCellBasicAttribute
-    }
-
-    get componentType() {
-        return Sidebar.prototype.enumComponentType
-    }
-
-    get contentAllCell() {
-        return this.graph.getDefaultParent().children || []
-    }
-
-    /**
-     * @description 生成普通数据源绑定映射关系
-     * @param dataSources
-     * @return {{cmdId: number, entityType: string, keys: *, scope: string, entityId: *}[]}
-     */
-    generatorCommonDataSourceMapping() {
-        const msg = this.commonDataSourceBindList.map((datum) => {
-            const { deviceId, attr, nodeId, slaveDeviceId } = datum
-            const cmdId = this.getCmdId(nodeId)
-            const sendMsgTemplate = {
-                entityType: "DEVICE",
-                entityId: slaveDeviceId ? slaveDeviceId : deviceId,
-                scope: "LATEST_TELEMETRY",
-                cmdId,
-                keys: attr,
-            }
-            this.dataSourceNodeMapping.set(nodeId, datum)
-            this.subscribeEvent(cmdId, this.updateCommonDataSource.bind(this))
-            return sendMsgTemplate
-        })
-        const { REAL } = HandleDataSource.enumDataBindType
-        if (msg.length) this.sendMsg({ [REAL]: msg })
-    }
-
-
-    /**
-     * @description 图表数据源绑定关系
-     * @param {any[]} dataSource 
-     */
-    generatorChartDataSourceMapping() {
-        const realList = []
-        const historyList = []
-        const { HISTORY, REAL } = HandleDataSource.enumDataBindType
-        const { STARTTs, ENDTs } = HandleDataSource.enumConst
-        for (const item of this.chartDataSourceBindList) {
-            const { additional = {}, deviceId, attr, nodeId, slaveDeviceId } = item
-            if (!attr) continue
-            const { agg, interval = 1000, dataType, effectScope = 0 } = additional
-            const cmdId = this.getCmdId(nodeId)
-            const template = {
-                entityType: "DEVICE",
-                entityId: slaveDeviceId ? slaveDeviceId : deviceId,
-                cmdId,
-                interval: Number(interval),
-                agg,
-                keys: attr,
-            }
-            let scope = isNaN(effectScope) ? 0 : Number(effectScope)
-            if (dataType === HISTORY) {
-                template[STARTTs] = Date.now() - scope
-                template[ENDTs] = Date.now()
-                historyList.push(template)
-                this.subscribeEvent(cmdId, (message) => {
-                    this.updateHistoryDataSource(message, agg)
-                })
-            }
-            else if (dataType === REAL) {
-                template[STARTTs] = Date.now() - scope
-                // template['timeWindow'] = interval
-                realList.push(template)
-                this.subscribeEvent(cmdId, (message) => {
-                    this.updateRealTimeDataSource(message, agg)
-                })
-            }
-            this.dataSourceNodeMapping.set(nodeId, item)
-        }
-
-        if (historyList.length || realList.length) this.sendMsg({ [HISTORY]: historyList, [REAL]: realList })
-    }
-
-    /**
-     * @description 订阅事件 绑定回调
-     * @param eventName
-     * @param callback
-     */
-    subscribeEvent(eventName, callback) {
-        this.DispatchInstance.eventBus.on(eventName, callback)
-    }
-
-    /**
-     * @description 更新变量值
-     * @param {} message 
-     */
-    updateCommonDataSource(message) {
-        const { subscriptionId } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        const { attr } = this.getBindData(subscriptionId)
-        node && this.updatePage(() => {
-            const { data } = message
-            const type = this.getComponentType(node)
-            if (type === this.componentType.SWITCH) {
-                this.handleSwitchComponent(message)
-                return
-            }
-
-            if (type === this.componentType.PARAMS_SETTING_BUTTON) {
-                this.handleParamSettingButton(message)
-                return
-            }
-
-            if (type === this.componentType.IMAGE) {
-                this.handleImageComponent(message)
-                return
-            }
-
-            if (!data) return
-            const [[timespan, value]] = data[attr]
-            node.setValue(value)
-        }, node)
-    }
-
-    /**
-     * @description 处理switch 组件
-     * @param {} message 
-     */
-    handleSwitchComponent(message) {
-        const { subscriptionId, data = {} } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        const { nodeId, attr } = this.getBindData(subscriptionId)
-        const [[timespan, receiveValue] = []] = data[attr] || []
-        const switchConfig = this.DispatchInstance.contentData.act.find(item => item.id === nodeId && item.type === 'SWITCH')
-        const { condition = [] } = switchConfig || {}
-        let reg = /image=[^;]+/g
-        let flag = false
-        const { SWITCH_STATE, SWITCH_VALUE, SWITCH_SEND_VALUE } = Sidebar.prototype.enumComponentType
-        const { SWITCH_STATE_NONE } = Sidebar.prototype.enumComponentTypeValue
-
-        const getSendValue = (type) => {
-            return (condition.find(item => item.type !== type) || {}).value
-        }
-        for (const item of condition) {
-            const { value, imagePath, type } = item || {}
-            if (Number(receiveValue) === Number(value)) {
-                flag = true
-                this.updatePage(() => {
-                    const style = node.getStyle()
-                    const sendValue = getSendValue(type)
-                    node.setStyle(style.replace(reg, `image=${imagePath}`))
-                    node.setAttribute('label', '')
-                    node.setAttribute(SWITCH_VALUE, receiveValue)
-                    node.setAttribute(SWITCH_SEND_VALUE, sendValue)
-                    node.setAttribute(SWITCH_STATE, type)
-                }, node)
-                break
-            }
-        }
-        if (!flag) {
-            this.updatePage(() => {
-                const style = node.getStyle()
-                node.setStyle(style.replace(reg, `image=images/thingskit/not-standard-value.svg`))
-                node.setAttribute('label', receiveValue)
-                node.setAttribute(SWITCH_VALUE, receiveValue)
-                node.setAttribute(SWITCH_STATE, SWITCH_STATE_NONE)
-            }, node)
-        }
-
-    }
-
-    handleParamSettingButton(message) {
-        const { subscriptionId, data = {} } = message
-        if (!data) return
-        const node = this.getNodeByCmdId(subscriptionId)
-        const { attr } = this.getBindData(subscriptionId)
-        const [[timespan, receiveValue] = []] = data[attr] || []
-        this.updatePage(() => {
-            node.setAttribute('label', `<button class="param-setting-button">${receiveValue}</button>`)
-        }, node)
-    }
-
-    handleImageComponent(message) {
-        const { subscriptionId, data = {} } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        const { attr } = this.getBindData(subscriptionId)
-        const [[timespan, receiveValue] = []] = data[attr] || []
-        this.updatePage(() => {
-            node.setAttribute('label', `<img class="basic-component__image" alt="图片" src="${receiveValue}" />`)
-        }, node)
-    }
-
-    /**
-     * @description 更新实时数据
-     * @param {} message 
-     * @param {} agg  聚合方式
-     */
-    updateRealTimeDataSource(message, agg) {
-        const { data = {}, subscriptionId } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        if (!node) return
-        const enumConst = Sidebar.prototype.enumCellBasicAttribute
-        const chartInstanceMap = Sidebar.prototype.chartsInstanceMapping
-        const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
-        const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
-        const instance = chartInstanceMap.get(chartInstanceId)
-        const { attr = [[]] } = this.getBindData(subscriptionId)
-        const realDataList = data[attr] || []
-
-        const action = agg === 'NONE' ? 'unshift' : 'push'
-
-        // chart insstance 是否已经接受过一次消息推送
-        const isActive = instance.isActive
-        if (!isActive) {
-            instance.isActive = true
-            const chartOption = this.getChartComponentOption(chartInstanceType, { chartType: chartInstanceType, attr, dataList: realDataList, action, nodeId: node.id })
-            instance.setOption(chartOption)
-
-        } else {
-            const oldOptions = instance.getOption()
-            const options = this.getRealTimeUpdateChartOption(chartInstanceType, { oldOptions, dataList: realDataList })
-            if (!instance) clearInterval(interval)
-            instance && instance.setOption(options)
-        }
-    }
-
-    /**
-     * @description 更新历史数据
-     */
-    updateHistoryDataSource(message, agg) {
-        const { data = {}, subscriptionId } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        if (!node) return
-        const enumConst = Sidebar.prototype.enumCellBasicAttribute
-        const chartInstanceMap = Sidebar.prototype.chartsInstanceMapping
-        const chartInstanceId = node.getAttribute(enumConst.CHART_INSTANCE_ID)
-        const chartInstanceType = node.getAttribute(enumConst.COMPONENT_TYPE)
-        const instance = chartInstanceMap.get(chartInstanceId)
-        const { attr = [[]] } = this.getBindData(subscriptionId)
-        const historyDataList = data[attr] || []
-        const showNumberOf = 4
-        const action = agg === 'NONE' ? 'unshift' : 'push'
-
-        const chartOption = this.getChartComponentOption(chartInstanceType, { dataList: historyDataList, attr, chartType: chartInstanceType, action })
-
-        let interval
-        // TODO 清除定时器
-        function autoMove() {
-            if (seriesValue.length <= 5) return
-            interval = setInterval(() => {
-                if (Number(chartOption.dataZoom[0].endValue) === seriesValue.length - 1) {
-                    chartOption.dataZoom[0].endValue = showNumberOf
-                    chartOption.dataZoom[0].startValue = 0
-                } else {
-                    chartOption.dataZoom[0].endValue = chartOption.dataZoom[0].endValue + 1
-                    chartOption.dataZoom[0].startValue = chartOption.dataZoom[0].startValue + 1
-                }
-                if (!chartInstanceMap.has(chartInstanceId)) {
-                    clearInterval(interval)
-                    return
-                }
-                instance && instance.setOption(chartOption)
-
-            }, 2000);
-        }
-
-        function stop() {
-            clearInterval(interval)
-        }
-
-        function goMove() {
-            autoMove()
-        }
-
-        instance.setOption(chartOption)
-        // instance.on('mouseover', stop)
-        // instance.on('mouseout', goMove)
-        // autoMove()
-    }
-
-    getChartComponentOption(chartInstanceType, params) {
-        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
-        switch (chartInstanceType) {
-            case LINE_CHART:
-                return this.getBasicChartOption(Object.assign(params, { chartType: 'line' }))
-            case BAR_CHART:
-                return this.getBasicChartOption(Object.assign(params, { chartType: 'bar' }))
-            case DASHBOARD_CHART:
-                return this.getDashboardChartOption(params)
-            default:
-                return {}
-        }
-    }
-
-    getRealTimeUpdateChartOption(chartInstanceType, params) {
-        const { LINE_CHART, BAR_CHART, DASHBOARD_CHART } = Sidebar.prototype.enumComponentType
-        switch (chartInstanceType) {
-            case LINE_CHART:
-                return this.getRealTimeUpdateBasicChartOption(params)
-            case BAR_CHART:
-                return this.getRealTimeUpdateBasicChartOption(params)
-            case DASHBOARD_CHART:
-                return this.getRealTimeUpdateDashboardChartOption(params)
-            default:
-                return {}
-        }
-    }
-
-    /**
-     * 
-     * @param {@} params 
-     * @returns 
-     */
-    getBasicChartOption(params = { dataList: [], attr: '', chartType: 'bar', action }) {
-        const { dataList = [], attr = '', chartType = 'bar', action } = params
-
-        const xAxisData = []
-        const seriesValue = []
-
-        dataList.forEach(item => {
-            const [timespan, value] = item
-            xAxisData[action](new Date(Number(timespan)).toLocaleTimeString())
-            seriesValue[action](Number(value))
-        })
-
-        return {
-            title: {
-                subtext: dataList.length ? '' : '暂无数据',
-                x: 'center',
-                y: 'center',
-                itemGap: -20,
-                subtextStyle: {
-                    fontSize: 16
-                }
-            },
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    type: 'shadow'
-                }
-            },
-            grid: {
-                left: '3%',
-                right: '3%',
-                bottom: '3%',
-                containLabel: true,
-            },
-            xAxis: {
-                name: '时间',
-                type: 'category',
-                data: xAxisData,
-                boundaryGap: true,
-                axisLabel: {
-                    rotate: 70
-                },
-                axisPointer: {
-                    label: {
-                        formatter() {
-                            return attr
-                        }
-                    }
-                }
-            },
-            yAxis: {
-                type: 'value'
-            },
-            series: [
-                {
-                    data: seriesValue,
-                    type: chartType,
-                }
-            ],
-            dataZoom: [
-                {
-                    show: true,
-                    type: 'inside'
-                }
-            ]
-        }
-    }
-
-    getRealTimeUpdateBasicChartOption(params = { oldOptions: {}, dataList: [] }) {
-        const { oldOptions, dataList } = params
-        const xAxisData = oldOptions.xAxis[0].data || []
-        const seriesValue = oldOptions.series[0].data || []
-        const oldEndValue = Number(oldOptions.dataZoom[0].endValue) || 0
-        const oldStartValue = Number(oldOptions.dataZoom[0].startValue) || 0
-        const showNumberOf = 4
-
-        for (let i = dataList.length - 1; i >= 0; i--) {
-            const [timespan, value] = dataList[i]
-            xAxisData.push(new Date(Number(timespan)).toLocaleTimeString())
-            seriesValue.push(Number(value))
-        }
-
-        if (Number(oldOptions.dataZoom[0].endValue) === seriesValue.length - 1) {
-            oldOptions.dataZoom[0].endValue = showNumberOf
-            oldOptions.dataZoom[0].startValue = 0
-        } else {
-            oldOptions.dataZoom[0].endValue = oldOptions.dataZoom[0].endValue + 1
-            oldOptions.dataZoom[0].startValue = oldOptions.dataZoom[0].startValue + 1
-        }
-
-        return {
-            title: {
-                subtext: ''
-            },
-            xAxis: {
-                data: xAxisData
-            },
-            series: [
-                {
-                    data: seriesValue
-                }
-            ],
-            dataZoom: [
-                {
-                    show: true,
-                    type: 'inside',
-                }
-            ]
-        }
-    }
-
-    getDashboardChartOption(params = { dataList: [], nodeId }) {
-        const { dataList = [], nodeId } = params
-        const dataSource = this.DispatchInstance.contentData.dataSources.find(item => item.nodeId === nodeId) || {}
-        const { additional: { unit = '°C' } = {} } = dataSource
-
-        const [timespan, value] = dataList[0] || []
-        return {
-            series: [
-                {
-                    type: 'gauge',
-                    center: ['50%', '60%'],
-                    radius: '100%',
-                    startAngle: 200,
-                    endAngle: -20,
-                    min: 0,
-                    max: 100,
-                    splitNumber: 10,
-                    itemStyle: {
-                        color: '#5479c6'
-                        // color: '#FFAB91'
-                    },
-                    progress: {
-                        show: true,
-                        width: 30
-                    },
-                    pointer: {
-                        show: false
-                    },
-                    axisLine: {
-                        lineStyle: {
-                            width: 30
-                        }
-                    },
-                    axisTick: {
-                        distance: 0,
-                        splitNumber: 5,
-                        lineStyle: {
-                            width: 2,
-                            color: '#999'
-                        }
-                    },
-                    splitLine: {
-                        distance: 0,
-                        length: 14,
-                        lineStyle: {
-                            width: 3,
-                            color: '#999'
-                        }
-                    },
-                    axisLabel: {
-                        distance: 35,
-                        color: '#999',
-                        fontSize: 20
-                    },
-                    anchor: {
-                        show: false
-                    },
-                    title: {
-                        show: false
-                    },
-                    detail: {
-                        valueAnimation: true,
-                        width: '60%',
-                        lineHeight: 40,
-                        borderRadius: 8,
-                        offsetCenter: [0, '-15%'],
-                        fontSize: 25,
-                        fontWeight: 'bolder',
-                        formatter: `{value} ${unit}`,
-                        color: 'auto'
-                    },
-                    data: [
-                        {
-                            value
-                        }
-                    ]
-                },
-            ]
-        }
-    }
-
-    /**
-     * @description 获取仪表盘配置
-     */
-    getRealTimeUpdateDashboardChartOption(params = { dataList: [] }) {
-        const { dataList = [], oldOptions } = params
-        const [timespan, value] = dataList[0] || []
-        console.log(value)
-        return {
-            series: [
-                {
-                    data: [
-                        {
-                            value
-                        }
-                    ]
-                },
-            ]
-        }
-    }
-
-    /**
-     * @description 获取绑定的数据
-     * @param subscriptionId
-     * @param actionType
-     * @return {*}
-     */
-    getBindData(subscriptionId) {
-        const nodeId = this.getNodeIdByCmdId(subscriptionId)
-        const temp = this.dataSourceNodeMapping.get(nodeId) || {}
-        return temp
-    }
-
-    /**
-     * @description 获取cmdId
-     * @param {string} nodeId 
-     * @returns 
-     */
-    getCmdId(nodeId) {
-        return this.DispatchInstance.getCmdId(nodeId)
-    }
-
-    /**
-     * @description 通过cmdID获取节点id
-     * @param subscriptionId
-     * @return {string}
-     */
-    getNodeIdByCmdId(subscriptionId) {
-        return this.DispatchInstance.cmdIdMapping.get(subscriptionId)
-    }
-
-    /**
-    * @description 通过cmdID 获取节点
-    * @param subscriptionId
-    * @return {*}
-    */
-    getNodeByCmdId(subscriptionId) {
-        const nodeId = this.getNodeIdByCmdId(subscriptionId)
-        return this.contentAllCell.find(item => item.id === nodeId)
-    }
-
-    getComponentType(node) {
-        return node.getAttribute(this.basicAttr.COMPONENT_TYPE)
-    }
-
-    /**
-     * @description 发送socket 消息
-     * @param {any} msg 
-     * @returns 
-     */
-    sendMsg(msg) {
-        return this.DispatchInstance.sendMessageToGetRealTimeData(msg)
-    }
-
-    updatePage(callback, cell) {
-        return this.DispatchInstance.updatePage(callback, cell)
-    }
-}
-
-class HandleDataInteraction {
-    /**
-     * @description 事件分发中心实例
-     * @type {DispatchCenter}
-     */
-    DispatchInstance
-
-    /**
-     * @description 事件映射
-     * @type {Map<>}
-     */
-    static eventMapping = new Map()
-
-    constructor(DispatchInstance) {
-        this.DispatchInstance = DispatchInstance
-        HandleDataInteraction.eventMapping = new Map()
-        this.init()
-    }
-
-    init() {
-        this.generatorEventMapping()
-        this.createGraphEventListener()
-    }
-
-    get eventMapping() {
-        return HandleDataInteraction.eventMapping
-    }
-
-    /**
-     * @description DispatchCenter 实例中保存的 graph 对象
-     * @return {*}
-     */
-    get graph() {
-        return this.DispatchInstance.graph
-    }
-
-    /**
-     * @description DispatchCenter 实例中保存的 editorUi 对象
-     * @return {*}
-     */
-    get editorUi() {
-        return this.DispatchInstance.editorUi
-    }
-
-    /**
-     * @description DispatchCenter 实例中保存的 contentAllCell 对象
-     * @return {*}
-     */
-    get eventList() {
-        const { event = [] } = this.DispatchInstance.contentData
-        return event
-    }
-
-    /**
-     * @description 获取页面数据
-     */
-    get contentData() {
-        return DispatchCenter.instance.contentData
-    }
-
-    get contentAllCell() {
-        return this.graph.getDefaultParent().children || []
-    }
-
-    /**
-     * @description 事件映射
-     */
-    generatorEventMapping() {
-        const event = this.eventList
-        for (const item of event) {
-            const { content, id: nodeId, enabled, type } = item
-            if (!enabled) continue
-            if (!this.eventMapping.has(nodeId)) this.eventMapping.set(nodeId, new Map())
-            const temp = this.eventMapping.get(nodeId)
-            temp.set(type, content)
-        }
-    }
-
-    createGraphEventListener() {
-        if (DispatchCenter.eventListenerIsExist) return
-
-        const graphDblClick = this.graph.dblClick;
-        this.graph.dblClick = (...args) => {
-            this.handleDoubleClickEvent(...args)
-            graphDblClick.apply(this.graph, args)
-        }
-
-        const graphClick = this.graph.click;
-        this.graph.click = (...args) => {
-            this.handleClickEvent(...args)
-            graphClick.apply(this.graph, args)
-        }
-
-        const mouseDownEvent = this.throttle(this.handleMouseDownEvent)
-        const mouseUpEvent = this.throttle(this.handleMouseUpEvent)
-        const graphFireMouseEvent = this.graph.fireMouseEvent;
-        this.graph.fireMouseEvent = (eventName, event, sender) => {
-            if (eventName === mxEvent.MOUSE_DOWN) {
-                // this.handleMouseDownEvent(eventName, event, sender)
-                mouseDownEvent(eventName, event, sender)
-            }
-            if (eventName === mxEvent.MOUSE_UP) {
-                mouseUpEvent(eventName, event, sender)
-                // this.handleMouseUpEvent(eventName, event, sender)
-            }
-            graphFireMouseEvent.apply(this.graph, [eventName, event, sender]);
-        };
-
-        DispatchCenter.eventListenerIsExist = true
-    }
-
-    /**
-     * @description 处理按下事件
-     * @param eventName
-     * @param event
-     * @param sender
-     */
-    handleMouseDownEvent(eventName, event, sender) {
-        const { state } = event
-        if (!state) return
-        const { cell = {} } = state
-        const { id } = cell || {}
-        const temp = this.eventMapping.get(id)
-        if (temp && temp.has(DispatchCenter.enumEventType.DOWN)) {
-            const content = temp.get(DispatchCenter.enumEventType.DOWN)
-            this.sendInstruction(content.data)
-        }
-    }
-
-    /**
-     * @description 处理抬起事件
-     * @param eventName
-     * @param event
-     * @param sender
-     */
-    handleMouseUpEvent(eventName, event, sender) {
-        const { state } = event
-        if (!state) return
-        const { cell = {} } = state
-        const { id } = cell || {}
-        const temp = this.eventMapping.get(id)
-        if (temp && temp.has(DispatchCenter.enumEventType.UP)) {
-            const content = temp.get(DispatchCenter.enumEventType.UP)
-            this.sendInstruction(content.data)
-        }
-    }
-
-    /**
-     * @description 鼠标单击事件事件
-     * @param event
-     */
-    handleClickEvent(event) {
-        const { state } = event
-        if (!state) return
-        const { cell = {} } = state
-        const { id } = cell || {}
-        const temp = this.eventMapping.get(id)
-        if (temp && temp.has(DispatchCenter.enumEventType.SINGLE)) {
-            const content = temp.get(DispatchCenter.enumEventType.SINGLE)
-            const { type, value } = content
-            if (type === DispatchCenter.enumPageType.PAGE && value) {
-                this.jumpPage(value)
-            } else if (type === DispatchCenter.enumPageType.LINK && value) {
-                window.open(value)
-            } else if (type === DispatchCenter.enumPageType.PARAMS_SETTING) {
-                this.paramsSetting(id, content)
-            }
-        }
-    }
-
-    /**
-     * @description 鼠标双击事件
-     * @param event
-     * @param cell
-     */
-    handleDoubleClickEvent(event, cell = {}) {
-        if (!cell) return
-        const { id } = cell
-        const temp = this.eventMapping.get(id)
-        if (temp && temp.has(DispatchCenter.enumEventType.DOUBLE)) {
-            const content = temp.get(DispatchCenter.enumEventType.DOUBLE)
-            const { type, value } = content
-            if (type === DispatchCenter.enumPageType.PAGE && value) {
-                this.jumpPage(value)
-            } else if (type === DispatchCenter.enumPageType.LINK && value) {
-                window.open(value)
-            }
-        }
-    }
-
-
-    /**
-     * @description 下发指令
-     * @param list
-     */
-    sendInstruction(list = []) {
-        const queue = []
-        const fn = async (way, deviceId, data) => {
-            const [err, res = []] = await to(ConfigurationNodeApi.deviceIsOnLine(deviceId))
-            const { value } = res[0] || {}
-            if (value) {
-                await to(ConfigurationNodeApi.sendInstruction(way, deviceId, data))
-            } else {
-                UseLayUi.errorMsg('设备不在线!')
-            }
-        }
-        for (const item of list) {
-            const { deviceId, slaveDeviceId, value, way } = item
-            if (!value || !deviceId) continue
-            const data = {
-                method: "methodThingskit",
-                params: JSON.parse(value),
-            }
-            if (deviceId) {
-                queue.push(() => {
-                    fn(way, deviceId, data)
-                })
-            }
-            // if (slaveDeviceId) {
-            //     queue.push(() => {
-            //         fn(way, slaveDeviceId, data)
-            //     })
-            // } else if (deviceId) {
-            //     queue.push(() => {
-            //         fn(way, deviceId, data)
-            //     })
-            // }
-        }
-
-        Promise.all(queue.map(fn => fn()))
-    }
-
-    throttle(fn, time = 1000) {
-        let now = Date.now
-        let oldTime = now()
-        return (...args) => {
-            let newTime = now()
-            if (newTime - oldTime > time) {
-                oldTime = now()
-                fn.apply(this, args)
-            }
-        }
-    }
-
-    /**
-     * @description 跳转页面
-     */
-    jumpPage(page) {
-        try {
-            this.editorUi.handleCustomLink(`data:page/id,${page}`)
-        } catch (error) {
-            throw error
-        }
-    }
-
-    /**
-     * @description 参数设置
-     */
-    paramsSetting(nodeId, content) {
-        const { layer, jquery: $, form } = layui
-        const { SWITCH_STATE, SWITCH_VALUE, SWITCH_SEND_VALUE, SWITCH, PARAMS_SETTING_BUTTON } = Sidebar.prototype.enumComponentType
-        const { SWITCH_STATE_NONE } = Sidebar.prototype.enumComponentTypeValue
-        const { COMPONENT_TYPE } = Sidebar.prototype.enumCellBasicAttribute
-        const contentData = this.contentData
-        const currentNode = this.contentAllCell.find(item => item.id === nodeId)
-
-        const enumConst = {
-            VALUE: 'value',
-            ISSUED_WAY: 'way',
-            ONE_WAY: 'oneway',
-            TWO_WAY: 'twoway',
-            ATTR_PLACEHOLDER: 'attrPlaceholder'
-        }
-
-        const enumActionEl = {
-            CONTAINER: 'container',
-            EDITOR: 'editor',
-            ISSUED_WAY_FILTER: 'wayFilter'
-
-        }
-
-        function createContent() {
-            return `
-            <div>
-                <div class="layui-form" lay-filter="${enumActionEl.ISSUED_WAY_FILTER}">
-                    <div class="layui-form-item">
-                        <label class="layui-form-label">下发值</label>
-                        <div class="layui-input-block">
-                            <input type="text" name="${enumConst.VALUE}" lay-verify="required" autocomplete="off" placeholder="请输入下发值" class="layui-input">
-                        </div>
-                    </div>
-                </div>
-            </div>`
-        }
-
-        function jsonParse(value) {
-            try {
-                return JSON.parse(value)
-            } catch (error) {
-                return {}
-            }
-        }
-
-        function handleSwitchComponent() {
-            const state = currentNode.getAttribute(SWITCH_STATE)
-            const value = currentNode.getAttribute(SWITCH_SEND_VALUE)
-            if (state === SWITCH_STATE_NONE) {
-                return
-            }
-            layer.confirm('是否确认下发命令？', async function (index) {
-                defaultHandler(value, () => layer.close(index))
-            });
-
-
-        }
-
-        function replaceAttrPlaceholder(oldValue = {}, replaceAttr = '', replaceValue = '', newValue = {},) {
-            if (typeof oldValue !== 'object') return newValue
-
-            for (const key of Object.keys(oldValue)) {
-                if (key === enumConst.ATTR_PLACEHOLDER) {
-                    newValue[replaceAttr] = replaceValue
-                    continue
-                }
-                if (typeof oldValue[key] === 'object') {
-                    newValue[key] = replaceAttrPlaceholder(oldValue[key], replaceAttr, replaceValue)
-                    continue
-                }
-                newValue[key] = oldValue[key]
-            }
-
-            return newValue
-        }
-
-        const submitThrottle = this.throttle(submit)
-        async function submit(callback) {
-            const { value } = form.val(enumActionEl.ISSUED_WAY_FILTER)
-            defaultHandler(value, callback)
-        }
-
-        async function defaultHandler(value, callback) {
-            let { deviceId, attr } = contentData.dataSources.find(item => item.nodeId === nodeId) || {}
-            let { command, way } = content
-            const validate = new Validate([
-                { value, required: true, message: '下发值是必填项' },
-                { value: deviceId, required: true, message: '未绑定设备' },
-                { value: way, required: true, message: '未绑定指令下发方式(单向/双向)' },
-                { value: command, required: true, message: '未设置下发命令' },
-                { value: attr, required: true, message: '未绑定设备属性' },
-            ])
-            if (!validate.begin()) return
-            if (typeof command === 'string') command = jsonParse(command)
-            const data = replaceAttrPlaceholder(command, attr, value)
-            const instructionData = {
-                method: "methodThingskit",
-                params: data,
-            }
-
-            const [err, res = []] = await to(ConfigurationNodeApi.deviceIsOnLine(deviceId))
-            const { value: onlineFlag } = res[0] || {}
-            if (onlineFlag) {
-                const [err, res] = await to(ConfigurationNodeApi.sendInstruction(way, deviceId, instructionData))
-                if (!err) {
-                    UseLayUi.topSuccessMsg('操作成功')
-                    callback && typeof callback === 'function' && callback()
-                }
-            } else {
-                UseLayUi.topErrorMsg('设备不在线!')
-            }
-        }
-
-        function createLayer() {
-
-            layer.open({
-                title: '参数设置',
-                content: createContent(),
-                area: '400px',
-                btn: ["应用", "取消"],
-                yes(index) {
-                    submitThrottle(() => {
-                        layer.close(index)
-                    })
-                },
-                but2(index, layero) {
-
-                },
-                async success(layero, index) {
-                    $('.layui-layer-setwin a').removeAttr('href')
-                    form.render()
-                },
-            })
-        }
-
-
-        function startProcess() {
-            const componentType = currentNode.getAttribute(COMPONENT_TYPE)
-            const handle = {
-                [SWITCH]: handleSwitchComponent,
-                [PARAMS_SETTING_BUTTON]: createLayer
-            }
-
-            try {
-                handle[componentType]()
-            } catch (error) {
-
-            }
-        }
-        startProcess()
-    }
-}
-
-/**
- * @description 处理数据动效
- */
-class HandleDynamicEffect {
-
-    /**
-     * @description 事件分发中心实例
-     * @type {DispatchCenter}
-     */
-    DispatchInstance
-
-    /**
-     * @description 开启的数据动效
-     * @type {any[]}
-     */
-    enableActList
-
-    /**
-     * @description 视频记录列表
-     */
-    videoRecordList
-
-    /**
-     * @description 动效节点映射
-     * @type {Map<string, {display: boolean, value: Map<string, any>}>}
-     */
-    actNodeMapping = new Map()
-
-    /**
-     * @description clear setInterval
-     */
-    cleanSetInterval
-
-    static enumConst = {
-        MAX: 'max',
-        MIN: 'min',
-    }
-
-    static enumActType = {
-        FLASH: 'FLASH',
-        DISPLAY: 'DISPLAY',
-        ROTATE: 'ROTATE',
-        IMAGE: 'IMAGE',
-        RUNNING: 'RUNNING'
-    }
-
-    static enumDisplayType = {
-        SHOW: 'show',
-        HIDDEN: 'hidden',
-    }
-
-    static enumRunningType = {
-        RUN: 'run',
-        STOP: 'stop'
-    }
-
-    static enumVideoConst = {
-        ORG_ID: 'orgId',
-        RECORD_ID: 'id',
-        VIDEO_URL: 'videoUrl',
-        ACCESSMODE: 'accessMode',
-        VIDEO_FLAG: 'videoComponentFlag'
-    }
-
-    static enumVarImageConst = {
-
-        /**
-         * @description 最小值
-         */
-        MIN: 'min',
-
-        /**
-         * @description 最大值
-         */
-        MAX: 'max',
-
-        /**
-         * @description 图片字段 key
-         */
-        IMAGE: 'image',
-
-        /**
-         * @description 颜色
-         */
-        COLOR: 'color',
-
-        /**
-         * @description 图片来源
-         */
-        IMAGE_ORIGIN: 'imageOrigin',
-
-        /**
-         * @description 图库图形类别
-         */
-        IMAGE_GALLERY_CATEGORY: 'category',
-
-        /**
-         * @description 图表图形路径
-         */
-        IMAGE_GALLERY_IMAGE_PATH: 'imagePath',
-
-        /**
-         * @description 默认图片 flag
-         */
-        DEFAULT_IMAGE_FLAG: 'defaultImageFlag'
-    }
-
-    static enumVideoAccessMode = {
-        MANUAL_ENTER: 0,
-        STREAMING: 1
-    }
-
-    constructor(DispatchInstance) {
-        this.DispatchInstance = DispatchInstance
-        this.init()
-    }
-
-    init() {
-        this.getEnableActList()
-        this.getVideoRecord()
-        this.generatorMappingRelation()
-    }
-
-    get graph() {
-        return this.DispatchInstance.graph
-    }
-
-    /**
-     * @description 只更新一次的更新事件
-     * @returns {*}
-     */
-    get insertOnceUpdateFn() {
-        return this.DispatchInstance.updateQueueInstance.insertOnceUpdateFn.bind(this.DispatchInstance.updateQueueInstance)
-    }
-
-    /**
-     * @description 将持续更新时间放入更新队列
-     * @returns {*}
-     */
-    get insertContinueUpdateFn() {
-        return this.DispatchInstance.updateQueueInstance.insertContinueUpdateFn.bind(this.DispatchInstance.updateQueueInstance)
-    }
-
-    /**
-     * @description 从更新队列中删除更新
-     * @returns {*}
-     */
-    get delUpdateFn() {
-        return this.DispatchInstance.updateQueueInstance.delUpdateFn.bind(this.DispatchInstance.updateQueueInstance)
-    }
-
-    get contentAllCell() {
-        return this.graph.getDefaultParent().children || []
-    }
-
-    /**
-     * @description 筛选出视频数据源
-     */
-    getVideoRecord() {
-        const { dataSources = [] } = this.DispatchInstance.contentData
-        const { VIDEO_FLAG } = HandleDynamicEffect.enumVideoConst
-        this.videoRecordList = dataSources.filter(item => item?.additional?.[VIDEO_FLAG])
-    }
-
-    /**
-     * @description 获取已开启的数据动效
-     */
-    getEnableActList() {
-        const { act = [] } = this.DispatchInstance.contentData
-        // 过滤页面中没有的节点及未开启动效的节点
-        this.enableActList = act.filter(item => this.contentAllCell.find(each => each.id === item.id) && item.enabled)
-        // this.enableActList = act.filter(item => item.enabled)
-    }
-
-    /**
-     * @description 生成映射关系 && 初始化推送消息
-     */
-    generatorMappingRelation() {
-        this.videoPlay()
-        const tsSubCmds = []
-        this.enableActList.forEach(each => {
-            const { id, type, attr, deviceId, slaveDeviceId } = each
-
-            if (!this.actNodeMapping.has(id)) this.actNodeMapping.set(id, { display: true, value: new Map() })
-            const temp = this.actNodeMapping.get(id)
-            temp.value.set(type, each)
-
-            const cmdId = this.DispatchInstance.getCmdId(id)
-
-            tsSubCmds.push(this.generatorMessage(slaveDeviceId ? slaveDeviceId : deviceId, cmdId, attr))
-
-            this.subscribeEvent(cmdId, this.dispatch(type))
-        })
-        if (tsSubCmds.length) this.sendMsg({ tsSubCmds })
-    }
-
-    /**
-     * @description 推送消息
-     * @param msg
-     */
-    sendMsg(msg) {
-        this.DispatchInstance.sendMessageToGetRealTimeData(msg)
-    }
-
-    /**
-     * @description 订阅事件 绑定回调
-     * @param eventName
-     * @param callback
-     */
-    subscribeEvent(eventName, callback) {
-        this.DispatchInstance.eventBus.on(eventName, callback)
-    }
-
-    /**
-     * @description 创建消息
-     * @param deviceId
-     * @param cmdId
-     * @param attr
-     * @return {{cmdId, entityType: string, keys, scope: string, entityId}}
-     */
-    generatorMessage(deviceId, cmdId, attr) {
-        return {
-            entityType: "DEVICE",
-            entityId: deviceId,
-            scope: "LATEST_TELEMETRY",
-            cmdId,
-            keys: attr,
-        }
-    }
-
-    /**
-     * @description 分发事件
-     * @param type
-     * @return Function
-     */
-    dispatch(type) {
-        let invoke = () => {
-        }
-        switch (type) {
-            case HandleDynamicEffect.enumActType.ROTATE:
-                invoke = this.rotate.bind(this)
-                break
-            case HandleDynamicEffect.enumActType.DISPLAY:
-                invoke = this.display.bind(this)
-                break
-            case HandleDynamicEffect.enumActType.FLASH:
-                invoke = this.flash.bind(this)
-                break
-            case HandleDynamicEffect.enumActType.IMAGE:
-                invoke = this.varImage.bind(this)
-                break
-            case HandleDynamicEffect.enumActType.RUNNING:
-                invoke = this.running.bind(this)
-                break
-        }
-        return invoke
-    }
-
-    /**
-     * @description 旋转
-     * @param message
-     * @param attr
-     */
-    rotate(message) {
-        const { subscriptionId, data } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        const key = node.id + DispatchCenter.enumDynamicEffectType.ROTATE
-        if (!this.validatePriority(node.id)) {
-            this.delUpdateFn(key)
-            return
-        }
-        const { flag } = this.validate(subscriptionId, DispatchCenter.enumDynamicEffectType.ROTATE, data)
-        let deg = 0
-        const updateFn = () => {
-            if (deg === 360) deg = 0
-            deg += 20
-            let style = node.getStyle()
-            const reg = /rotation=(-?)\w+(;?)/g
-            style = style.replace(reg, '')
-            style += `rotation=${deg};`
-            node.setStyle(style)
-            this.graph.updateCellStyles(style, node)
-        }
-        if (!flag) {
-            this.delUpdateFn(key)
-            return
-        }
-        this.insertContinueUpdateFn(node, updateFn, key)
-    }
-
-    /**
-     * @description 显示与隐藏
-     * @param message
-     * @param attr
-     */
-    display(message) {
-        const { subscriptionId, data = {} } = message
-        const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.DISPLAY, data)
-        if (!flag) return
-        const node = this.getNodeByCmdId(subscriptionId)
-        let isShow = false
-        if (condition.type === HandleDynamicEffect.enumDisplayType.SHOW) {
-            isShow = true
-        } else if (condition.type === HandleDynamicEffect.enumDisplayType.HIDDEN) {
-            isShow = false
-        }
-        const updateFn = () => {
-            if (!isShow) {
-                Object.keys(HandleDynamicEffect.enumActType).forEach(key => {
-                    const delKey = node.id + key
-                    this.delUpdateFn(delKey)
-                })
-                const temp = this.actNodeMapping.get(node.id)
-                temp.display = false
-            } else {
-                const temp = this.actNodeMapping.get(node.id)
-                temp.display = true
-            }
-
-            node.setVisible(isShow)
-        }
-        this.insertOnceUpdateFn(node, updateFn)
-    }
-
-    /**
-     * @description 闪烁
-     * @param message
-     * @param attr
-     */
-    flash(message) {
-        const { subscriptionId, data } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        const key = node.id + DispatchCenter.enumDynamicEffectType.FLASH
-        if (!this.validatePriority(node.id)) {
-            this.delUpdateFn(key)
-            return
-        }
-        const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.FLASH, data)
-        let flashFlag = false
-        const updateFn = () => {
-            node.setVisible(flashFlag)
-            flashFlag = !flashFlag
-        }
-        if (!flag) {
-            flashFlag = true
-            this.insertOnceUpdateFn(node, updateFn)
-            this.delUpdateFn(key)
-            return
-        }
-        this.insertContinueUpdateFn(node, updateFn, key)
-    }
-
-    /**
-     * @description 处理变量图片
-     */
-    varImage(message) {
-        const { subscriptionId, data } = message
-        const node = this.getNodeByCmdId(subscriptionId)
-        const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.IMAGE, data)
-        if (flag && node) {
-            const { imagePath } = condition
-            this.insertOnceUpdateFn(
-                node,
-                () => {
-                    node.setStyle(`image;image=${imagePath};imageAspect=0;`)
-                })
-        } else if (!flag && node) {
-            const { condition = [], attr } = this.getBindData(subscriptionId, HandleDynamicEffect.enumActType.IMAGE)
-            const flag = HandleDynamicEffect.enumVarImageConst.DEFAULT_IMAGE_FLAG
-            const defaultBindData = condition.find(item => item[flag])
-            if (defaultBindData) {
-                const { imagePath } = defaultBindData
-                if (!imagePath) return
-                this.insertOnceUpdateFn(
-                    node,
-                    () => {
-                        node.setStyle(`image;image=${imagePath};imageAspect=0;`)
-                    })
-            }
-        }
-    }
-
-    running(message) {
-        const { subscriptionId, data = {} } = message
-        const { flag, condition } = this.validate(subscriptionId, HandleDynamicEffect.enumActType.RUNNING, data)
-        if (!flag) return
-        const node = this.getNodeByCmdId(subscriptionId)
-        let isRun = false
-        if (condition.type === HandleDynamicEffect.enumRunningType.RUN) {
-            isRun = true
-        } else if (condition.type === HandleDynamicEffect.enumRunningType.STOP) {
-            isRun = false
-        }
-
-        const updateFn = () => {
-            const reg = /flowAnimation[^;]+/
-            const style = node.getStyle()
-            node.setStyle(style.replace(reg, `flowAnimation=${isRun ? 1 : 0}`))
-        }
-        this.insertOnceUpdateFn(node, updateFn)
-    }
-
-    /**
-     * @description 播放视频
-     */
-    videoPlay() {
-        const enumAccessMode = HandleDynamicEffect.enumVideoAccessMode
-        const reg = /(?:.*)(?<=\.)/
-        const graph = this.graph
-        const createVideoTemplate = this.createVideoTemplate
-        const videoPlayConfig = {
-            controls: true,
-            autoPlay: true,
-            // bigPlayButton: true,
-            // textTrackDisplay: false,
-            // posterImage: false,
-            // errorDisplay: false,
-        }
-        for (const record of this.videoRecordList) {
-            const { additional = {}, nodeId } = record
-            const { accessMode, videoUrl, id } = additional
-            const cell = this.getCellByCellId(nodeId)
-            if (!cell) continue
-            if (Number(accessMode) === enumAccessMode.MANUAL_ENTER) {
-                handleVideoPlay(videoPlayConfig, cell, videoUrl)
-            } else {
-                getStreamingVideoPlayUrl(id, nodeId)
-            }
-        }
-
-        async function getStreamingVideoPlayUrl(id, cell) {
-            const [err, res = {}] = await to(ConfigurationNodeApi.getStreamingVideoPlayUrl(id))
-            const { url } = res?.data || {}
-            if (!url) return
-            handleVideoPlay({ ...videoPlayConfig, hls: { withCredentials: true } }, cell, url)
-        }
-
-        function handleVideoPlay(videoPlayConfig, cell, videoUrl) {
-            if (!cell) return
-            const { geometry = {} } = cell
-            const { width, height } = geometry
-            const idEl = getIdEl()
-            graph.getModel().beginUpdate()
-            try {
-                let type
-                if (videoUrl.replace(reg, '') === 'm3u8') type = 'application/x-mpegURL'
-                const template = createVideoTemplate(idEl, width, height, videoUrl, type)
-                cell.setAttribute('label', template)
-                graph.refresh(cell);
-            } finally {
-                graph.getModel().endUpdate()
-                videojs(idEl, videoPlayConfig, function () {
-                    this.play()
-                })
-            }
-        }
-
-        function getIdEl() {
-            return `video-play__${Date.now()}`
-        }
-    }
-
-
-    createVideoTemplate(idEl, width, height, videoUrl, videoType = 'video/mp4') {
-        const poster = `${Proxy_Prefix}/images/youtube.png`
-        const template = `<video id="${idEl}" class="video-js" controls preload="auto" muted="muted" width="${width}" height="${height}" poster="${poster}" data-setup='{}'>
-                                <source src="${videoUrl}" type="${videoType}">
-                                <p class="vjs-no-js">
-                                    要查看此视频,请启用JavaScript,并考虑升级web浏览器.
-                                </p>
-                        </video>`
-        return template
-    }
-    /**
-     * @description 获取cell 通过cell id
-     */
-    getCellByCellId(id) {
-        const allCell = this.contentAllCell || []
-        return allCell.find(item => item.id === id)
-    }
-
-
-    /**
-     * @description 验证是否满足条件列表中的任意一条
-     * @param subscriptionId
-     * @param type
-     * @param value
-     * @return {{flag: boolean, condition: {}}}
-     */
-    validate(subscriptionId, type, value) {
-        const { condition = [], attr } = this.getBindData(subscriptionId, type)
-        const result = { condition: {}, flag: false }
-        for (let i = 0; i < condition.length; i++) {
-            const { min, max } = condition[i]
-            const [timespan, realValue] = value[attr][0]
-            result.flag = this.isExistInArea(min, max, realValue)
-            if (result.flag) {
-                result.condition = condition[i]
-                break
-            }
-        }
-        return result
-    }
-
-    /**
-     * @description 判断一个数是否在区间范围内
-     * @param min 最小值
-     * @param max 最大值
-     * @param value 值
-     * @return {boolean}
-     */
-    isExistInArea(min, max, value) {
-        return Number(value) >= Number(min) && Number(value) <= Number(max)
-    }
-
-    /**
-     * @description 获取绑定的数据
-     * @param subscriptionId
-     * @param actionType
-     * @return {*}
-     */
-    getBindData(subscriptionId, actionType) {
-        const nodeId = this.getNodeIdByCmdId(subscriptionId)
-        const temp = this.actNodeMapping.get(nodeId)
-        return temp.value.get(actionType)
-    }
-
-    /**
-     * @description 通过cmdID获取节点id
-     * @param subscriptionId
-     * @return {string}
-     */
-    getNodeIdByCmdId(subscriptionId) {
-        return this.DispatchInstance.cmdIdMapping.get(subscriptionId)
-    }
-
-    /**
-     * @description 通过cmdID 获取节点
-     * @param subscriptionId
-     * @return {*}
-     */
-    getNodeByCmdId(subscriptionId) {
-        const nodeId = this.getNodeIdByCmdId(subscriptionId)
-        return this.contentAllCell.find(item => item.id === nodeId)
-    }
-
-    /**
-     * @description 验证数据动效优先级 显示隐藏优先级最高
-     * @param {string} nodeId 
-     * @returns 
-     */
-    validatePriority(nodeId) {
-        return this.actNodeMapping.get(nodeId).display
-    }
-
-}
-
-class UpdateQueue {
-
-    /**
-     * @description 图实例
-     */
-    graph
-
-    /**
-     * @description 更新队列
-     * @type { Map<number, {cell: any, fn: Function, key: string}[]> }
-     */
-    updateQueueMapping = new Map()
-
-    /**
-     * @description 时间队列
-     * @type { Map<number, Function> }
-     */
-    timeQueue = new Map()
-
-    constructor(DispatchCenterInstance) {
-        this.graph = DispatchCenterInstance.graph
-        window.timeMap = this.timeQueue
-    }
-
-    /**
-     * @description 创建更新队列
-     * @param {number} time 
-     */
-    createUpdateQueue(time) {
-        const callback = () => {
-            this.graph.getModel().beginUpdate()
-            try {
-                const updateQueue = this.updateQueueMapping.get(time)
-                updateQueue.forEach(each => {
-                    const { cell: updateCell, fn: updateFn } = each
-                    updateFn()
-                    this.graph.refresh(updateCell);
-                })
-            } finally {
-                this.graph.getModel().endUpdate()
-            }
-        }
-        const cleanFn = RAFSetInterval(callback, time)
-        this.timeQueue.set(time, cleanFn)
-    }
-
-    createIntervalQueue(time, callback) {
-        const cleanFn = RAFSetInterval(callback, time)
-        this.timeQueue.set(time, cleanFn)
-    }
-
-    /**
-     * @description 持续更新
-     * @param cell 更新cell
-     * @param fn 更新方法
-     * @param key key
-     * @param time 间隔事时间
-     */
-    insertContinueUpdateFn(cell, fn, key, time = 100) {
-        if (!this.updateQueueMapping.has(time)) {
-            this.updateQueueMapping.set(time, [])
-        }
-        if (!this.timeQueue.get(time)) {
-            this.createUpdateQueue(time)
-        }
-        if (this.updateQueueMapping.get(time).find(item => item.key === key)) {
-            return
-        }
-        this.updateQueueMapping.get(time).push({ cell, fn, key })
-    }
-
-    /**
-     * @description 只更新一次
-     * @param cell 更新cell
-     * @param fn 更新方法
-     */
-    insertOnceUpdateFn(cell, fn) {
-        this.graph.getModel().beginUpdate()
-        try {
-            fn()
-            this.graph.refresh(cell);
-        } finally {
-            this.graph.getModel().endUpdate()
-        }
-    }
-
-    /**
-     * @description 从更新队列中移除不再更新的事件
-     * @param key
-     * @param time
-     */
-    delUpdateFn(key, time = 100) {
-        let temp = this.updateQueueMapping.get(time)
-        if (temp) {
-            const index = temp.findIndex(item => item.key === key)
-            if (~index) {
-                temp.splice(index, 1)
-                if (!temp.length) {
-                    const cleanFn = this.timeQueue.get(time)
-                    cleanFn()
-                    this.timeQueue.delete(time)
-                }
-            }
-        }
-    }
-
-    /**
-     * @description 清楚所有更新队列
-     */
-    cleanAllUpdateQueue() {
-        this.timeQueue.forEach(cleanFn => {
-            cleanFn()
-        })
-    }
-}
-
-class RAFSetTimeoutImp {
-    constructor(callback, time = 0) {
-        this.callback = callback;
-        this.time = time;
-        this.now = Date.now;
-        this.current = this.now();
-        this.old = this.now();
-        const fn = () => {
-            if (this.current - this.old > this.time) {
-                this.callback();
-                this.old = this.now();
-                this.clean();
-                return;
-            }
-            this.current = this.now();
-            this.instance = window.requestAnimationFrame(fn);
-        };
-        this.instance = window.requestAnimationFrame(fn);
-    }
-
-    clean() {
-        window.cancelAnimationFrame(this.instance);
-        this.instance = null;
-    }
-}
-
-function RAFSetTimeout(callback, time) {
-    const instance = new RAFSetTimeoutImp(callback, time);
-    return instance.clean.bind(instance);
-}
-
-class RAFSetIntervalImp {
-    constructor(callback, time = 0) {
-        this.callback = callback;
-        this.time = time;
-        this.now = Date.now;
-        this.current = this.now();
-        this.old = this.now();
-        const fn = () => {
-            if (this.current - this.old > this.time) {
-                this.callback();
-                this.old = this.now();
-            }
-            this.current = this.now();
-            this.instance = window.requestAnimationFrame(fn);
-        };
-        this.instance = window.requestAnimationFrame(fn);
-    }
-
-    clean() {
-        window.cancelAnimationFrame(this.instance);
-        this.instance = null
-    }
-}
-
-function RAFSetInterval(callback, time) {
-    const instance = new RAFSetIntervalImp(callback, time);
-    return instance.clean.bind(instance);
-}
-
-
-class Validate {
-    /**
-     * @description
-     * @type {{value: any, message: string, required?: boolean, validator?: any}[]} list 
-     */
-    list = []
-
-    /**
-    * @description
-    * @param {{value: any, message: string, required?: boolean, validator?: any}[]} ruleList 
-    */
-    constructor(ruleList = []) {
-        this.list = ruleList
-    }
-
-    /**
-     * @description 设置规则
-     * @param {{value: any, message: string, required?: boolean, validator?: any}} rule 
-     */
-    set(rule) {
-        this.list.push(rule)
-    }
-
-    begin() {
-        for (const rule of this.list) {
-            const { required, value, message, validator } = rule
-            if (required && !value) {
-                UseLayUi.topErrorMsg(message)
-                return false
-            }
-        }
-        return true
-    }
-}

@@ -22,26 +22,26 @@
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="mobile-web-app-capable" content="yes">
 	<meta name="theme-color" content="#d89000">
 	<meta name="theme-color" content="#d89000">
 
 
-	<link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1663582316568">
+	<link rel="stylesheet" href="./js/plugin/layui/css/layui.css?v=1664184574262">
 
 
 	<!-- load configure file -->
 	<!-- load configure file -->
-	<script src="./js/config/config.js?v=1663582316568"></script>
+	<script src="./js/config/config.js?v=1664184574262"></script>
 
 
 	<!-- crypto-js	-->
 	<!-- crypto-js	-->
-	<script src="./js/plugin/crypto-js/crypto-js.js?v=1663582316568"></script>
+	<script src="./js/plugin/crypto-js/crypto-js.js?v=1664184574262"></script>
 
 
 	<!-- storage persistent	-->
 	<!-- storage persistent	-->
-	<script src="./js/const/persistentStorage.js?v=1663582316568"></script>
+	<script src="./js/const/persistentStorage.js?v=1664184574262"></script>
 	<!-- Global const -->
 	<!-- Global const -->
-	<script src="./js/const/const.js?v=1663582316568"></script>
+	<script src="./js/const/const.js?v=1664184574262"></script>
 
 
 	<!-- Axios	-->
 	<!-- Axios	-->
-	<script src="./js/plugin/axios/axios.min.js?v=1663582316568"></script>
-	<script src="./js/plugin/axios/DefHttp.js?v=1663582316568"></script>
-	<script src="./js/api/index.js?v=1663582316568"></script>
+	<script src="./js/plugin/axios/axios.min.js?v=1664184574262"></script>
+	<script src="./js/plugin/axios/DefHttp.js?v=1664184574262"></script>
+	<script src="./js/api/index.js?v=1664184574262"></script>
 
 
 	<!-- load script -->
 	<!-- load script -->
-	<script src="./js/config/loadScript.js?v=1663582316568"></script>
+	<script src="./js/config/loadScript.js?v=1664184574262"></script>
 
 
 	<!-- act editor -->
 	<!-- act editor -->
 	<!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> -->
 	<!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/ace.js"></script> -->
@@ -54,7 +54,7 @@
 	<!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> -->
 	<!-- <script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script> -->
 	<!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> -->
 	<!-- <script src="https://oss.yuntengcloud.com/iotdocs/thingskit-scada/video.min.js"></script> -->
 
 
-	<script src="./js/plugin/layui/layui.js?v=1663582316568"></script>
+	<script src="./js/plugin/layui/layui.js?v=1664184574262"></script>
 	<!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
 	<!-- <link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/layui/2.6.8/css/layui.min.css"
 		integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
 		integrity="sha512-iQBJbsNHXUcgEIgWThd2dr8tOdKPvICwqjPEZYY81z3eMya44A5MiAqfWSCh+Ee1YzNYkdrI982Qhwgr8LEYOQ=="
 		crossorigin="anonymous" referrerpolicy="no-referrer" />
 		crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -63,7 +63,7 @@
 		crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
 		crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
 
 
 	<!-- 引入修改样式	-->
 	<!-- 引入修改样式	-->
-	<link rel="stylesheet" href="./styles/formatChange.css?v=1663582316568">
+	<link rel="stylesheet" href="./styles/formatChange.css?v=1664184574262">
 
 
 	<script type="text/javascript">
 	<script type="text/javascript">
 		/**
 		/**
@@ -306,7 +306,7 @@
 				var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
 				var supportedDomain = (hostName.substring(hostName.length - 8, hostName.length) === '.draw.io') ||
 					(hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
 					(hostName.substring(hostName.length - 13, hostName.length) === '.diagrams.net');
 
 
-				const releaseVersion = '1663582316568'
+				const releaseVersion = '1664184574262'
 				const appMinSrc = Enable_OSS ? `${OSS_Prefix}app.min.js?v=${releaseVersion}` : `js/app.min.js?v=${releaseVersion}`
 				const appMinSrc = Enable_OSS ? `${OSS_Prefix}app.min.js?v=${releaseVersion}` : `js/app.min.js?v=${releaseVersion}`
 				function loadAppJS() {
 				function loadAppJS() {
 					mxscript(appMinSrc, function () {
 					mxscript(appMinSrc, function () {