From b2baf6361c4755c72f601bb0842b6371fc45de87 Mon Sep 17 00:00:00 2001
From: Catouse <catouse@gmail.com>
Date: Mon, 20 Jan 2020 11:04:13 +0800
Subject: [PATCH] * improve contextmenu in flowchart.

---
 docs/examples/flowchart.fsm.js |  1 -
 src/js/flowchart.js            | 31 +++++++++++++++++--------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/docs/examples/flowchart.fsm.js b/docs/examples/flowchart.fsm.js
index 655c4b228..12df30cff 100644
--- a/docs/examples/flowchart.fsm.js
+++ b/docs/examples/flowchart.fsm.js
@@ -242,7 +242,6 @@ if ($.zui.FlowChart) {
     $.zui.FlowChart.addPlugin('fsm', {
         defaultOptions: defaultOptions,
         style: [
-            '.flowchart-contextmenu {min-width: 360px}',
             '.flowchart-contextmenu .col-xs-4 {width: 25%}',
             '#{id} .flowchart-element-fsm_fork, #{id} .flowchart-element-fsm_merge {align-items: flex-start!important;}',
             '#{id} .flowchart-element-FSM_ActState:before {content: " "; position: absolute; width: 30px; height: 30px; top: 4px; left: 4px; background: #888; border-radius: 50%; border: 1px solid #333}'
diff --git a/src/js/flowchart.js b/src/js/flowchart.js
index 468b5627f..2125cc855 100644
--- a/src/js/flowchart.js
+++ b/src/js/flowchart.js
@@ -2631,6 +2631,17 @@
                 e.returnValue = false;
                 return false;
             });
+
+            $(document).on('change', '.flowchart-' + that.id + '-type-selector', function() {
+                var $select = $(this);
+                var nodeID = $select.data('id');
+                var node = that.getElement(nodeID);
+                if (node) {
+                    node.changeType($select.val());
+                    that.render(node);
+                }
+                $.zui.ContextMenu.hide();
+            });
         }
 
         $canvas.on('click', function(e) {
@@ -2970,30 +2981,22 @@
         }
         var items = [];
         if (!that.options.readonly) {
-            var typeButtonsHTML = [];
+            var typeOptions = [];
             $.each(that.types, function(name, typeInfo) {
                 if ((typeInfo.isNode === ele.isNode) && !typeInfo.internal) {
-                    typeButtonsHTML.push('<div class="col-xs-4" style="padding: 2px"><a class="btn btn-mini' + (ele.type === name ? ' btn-success' : '') + '" data-type="'+ name + '" style="display: block;">' + (typeInfo.displayName || typeInfo.name) + '</a></div>');
+                    typeOptions.push('<option' + (ele.type === name ? ' selected' : '') + ' value="' + name + '">' + (typeInfo.displayName || typeInfo.name) + '</option>');
                 }
             });
             items.push({
                 id: 'type',
                 html: [
-                    '<div style="padding: 3px 20px; white-space: nowrap;">',
-                        '<span class="btn btn-mini disabled" style="background: none; border: none;padding: 0">' + that.lang.type + '</span>',
-                        '<div class="row">',
-                        typeButtonsHTML.join(''),
+                    '<div class="input-group" style="margin: 5px 10px 0 10px; min-width: 170px">',
+                        '<span class="input-group-addon">' + that.lang.type + '</span>',
+                        '<select class="form-control flowchart-' + that.id + '-type-selector" data-id="' + ele.id + '">',
+                        typeOptions.join(''),
                         '</div>',
                     '</div>'
                 ].join(''),
-                onClick: function(e) {
-                    var $btn = $(e.target).closest('.btn');
-                    var type = $btn.data('type');
-                    if (type !== ele.type) {
-                        ele.changeType(type);
-                        that.render(ele);
-                    }
-                }
             }, '-');
             items.push({
                 id: 'edit',
-- 
GitLab