fix: build not copy echarts

+/**
+ * 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
+    }
+}

@@ -90,6 +90,7 @@ function copyFileUsageOssServer(cb) {
     './src/main/webapp/js/shapes-14-6-5.min.js',
     './src/main/webapp/js/stencils.min.js',
     './src/main/webapp/js/extensions.min.js',
+    './src/main/webapp/js/plugin/echarts/echarts.js',
     './src/main/webapp/js/plugin/crypto-js/crypto-js.js',
     './src/main/webapp/js/plugin/ace/ace.js',
     './src/main/webapp/js/plugin/ace/mode-json.js',