all files / diagram/objects/ context-menu.js

90.51% Statements 267/295
82.35% Branches 154/187
94.87% Functions 37/39
97.64% Lines 248/254
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 42165× 36878× 79027× 42165×     42165× 42165× 126495× 79043× 161104× 161104× 161104× 161104× 79043× 36878×       45183× 3018×           82061× 161104× 42165×                                       53× 53× 53× 53× 53× 53× 53×   53×   51×   51× 25×   26×   51× 51× 51× 51× 51×                           51×   51× 51× 51× 51× 38× 532× 532× 114× 76×     418× 190× 152×       228×     38× 38× 38× 38× 38× 38×   51× 33× 38× 38×     51×   26×   377×   18× 18× 18× 18× 17×                               24× 24× 16×     532×   16× 16× 16× 16× 16×   299× 299× 299× 293×   135×         22×             29× 29× 29× 29×     29× 29×   29× 29× 29× 185× 185× 185× 38× 114× 114×       29× 29× 29× 29× 29× 29× 29× 185× 185× 73×     29× 225× 225× 156× 156×     29×   29×     29×       290×   290× 290× 290×   19× 19×   19× 19×   19× 19×   19× 19×   19×   19×   23× 23×   23×   23×               149× 149×   290×   51× 51× 51×   46819×   532×   607×   532× 532×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   38× 38×   532×       532×   337×           53×                                      
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
var __generator = (this && this.__generator) || function (thisArg, body) {
    var _ = { label: 0, sent: function() { Iif (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
    function verb(n) { return function (v) { return step([n, v]); }; }
    function step(op) {
        Iif (f) throw new TypeError("Generator is already executing.");
        while (_) try {
            Iif (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
            Iif (y = 0, t) op = [op[0] & 2, t.value];
            switch (op[0]) {
                case 0: case 1: t = op; break;
                case 4: _.label++; return { value: op[1], done: false };
                case 5: _.label++; y = op[1]; op = [0]; continue;
                case 7: op = _.ops.pop(); _.trys.pop(); continue;
                default:
                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
                    Eif (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
                    if (t[2]) _.ops.pop();
                    _.trys.pop(); continue;
            }
            op = body.call(thisArg, _);
        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
    }
};
define(["require", "exports", "@syncfusion/ej2-base", "@syncfusion/ej2-navigations", "../enum/enum", "../../diagram/utility/dom-util"], function (require, exports, ej2_base_1, ej2_navigations_1, enum_1, dom_util_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.menuClass = {
        content: '.e-diagramcontent',
        copy: 'e-copy',
        paste: 'e-paste',
        undo: 'e-undo',
        redo: 'e-redo',
        cut: 'e-cut',
        selectAll: 'e-selectall',
        grouping: 'e-grouping',
        group: 'e-group',
        unGroup: 'e-ungroup',
        bringToFront: 'e-bringfront',
        sendToBack: 'e-sendback',
        moveForward: 'e-bringforward',
        sendBackward: 'e-sendbackward',
        order: 'e-order'
    };
    var DiagramContextMenu = (function () {
        function DiagramContextMenu(parent, service) {
            this.defaultItems = {};
            this.disableItems = [];
            this.hiddenItems = [];
            this.localeText = this.setLocaleKey();
            this.parent = parent;
            this.serviceLocator = service;
            this.addEventListener();
        }
        DiagramContextMenu.prototype.addEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.on('initial-load', this.render, this);
        };
        DiagramContextMenu.prototype.removeEventListener = function () {
            if (this.parent.isDestroyed) {
                return;
            }
            this.parent.off('initial-load', this.render);
        };
        DiagramContextMenu.prototype.render = function () {
            this.l10n = this.serviceLocator.getService('localization');
            this.element = dom_util_1.createHtmlElement('ul', { id: this.parent.element.id + '_contextMenu' });
            this.parent.element.appendChild(this.element);
            var target = '#' + this.parent.element.id;
            this.contextMenu = new ej2_navigations_1.ContextMenu({
                items: this.getMenuItems(),
                enableRtl: this.parent.enableRtl,
                enablePersistence: this.parent.enablePersistence,
                locale: this.parent.locale,
                target: target,
                select: this.contextMenuItemClick.bind(this),
                beforeOpen: this.contextMenuBeforeOpen.bind(this),
                onOpen: this.contextMenuOpen.bind(this),
                beforeItemRender: this.BeforeItemRender.bind(this),
                onClose: this.contextMenuOnClose.bind(this),
                cssClass: 'e-diagram-menu',
                animationSettings: { effect: 'None' }
            });
            this.contextMenu.appendTo(this.element);
        };
        DiagramContextMenu.prototype.getMenuItems = function () {
            var menuItems = [];
            var orderItems = [];
            var groupItems = [];
            if (!this.parent.contextMenuSettings.showCustomMenuOnly) {
                for (var _i = 0, _a = this.getDefaultItems(); _i < _a.length; _i++) {
                    var item = _a[_i];
                    if (item.toLocaleLowerCase().indexOf('group') !== -1) {
                        if (item.toLocaleLowerCase() !== 'grouping') {
                            groupItems.push(this.buildDefaultItems(item));
                        }
                    }
                    else if (item.toLocaleLowerCase().indexOf('order') !== -1) {
                        if (item.toLocaleLowerCase() !== 'order') {
                            orderItems.push(this.buildDefaultItems(item));
                        }
                    }
                    else {
                        menuItems.push(this.buildDefaultItems(item));
                    }
                }
                var groupMenus = this.buildDefaultItems('grouping');
                groupMenus.items = groupItems;
                menuItems.push(groupMenus);
                var orderMenus = this.buildDefaultItems('order');
                orderMenus.items = orderItems;
                menuItems.push(orderMenus);
            }
            if (this.parent.contextMenuSettings.items) {
                for (var _b = 0, _c = this.parent.contextMenuSettings.items; _b < _c.length; _b++) {
                    var customItem = _c[_b];
                    menuItems.push(customItem);
                }
            }
            return menuItems;
        };
        DiagramContextMenu.prototype.contextMenuOpen = function () {
            this.isOpen = true;
        };
        DiagramContextMenu.prototype.BeforeItemRender = function (args) {
            this.parent.trigger(enum_1.contextMenuBeforeItemRender, args);
        };
        DiagramContextMenu.prototype.contextMenuItemClick = function (args) {
            document.getElementById(this.parent.element.id + 'content').focus();
            this.parent.trigger(enum_1.contextMenuClick, args);
            var item = this.getKeyFromId(args.item.id);
            if (!args.cancel) {
                switch (item) {
                    case 'cut':
                        this.parent.cut();
                        break;
                    case 'copy':
                        this.parent.copy();
                        break;
                    case 'undo':
                        this.parent.undo();
                        break;
                    case 'redo':
                        this.parent.redo();
                        break;
                    case 'paste':
                        this.parent.paste();
                        break;
                    case 'selectAll':
                        this.parent.selectAll();
                        break;
                    case 'group':
                        this.parent.group();
                        break;
                    case 'unGroup':
                        this.parent.unGroup();
                        break;
                    case 'bringToFrontOrder':
                        this.parent.bringToFront();
                        break;
                    case 'moveForwardOrder':
                        this.parent.moveForward();
                        break;
                    case 'sendToBackOrder':
                        this.parent.sendToBack();
                        break;
                    case 'sendBackwardOrder':
                        this.parent.sendBackward();
                        break;
                }
            }
        };
        DiagramContextMenu.prototype.contextMenuOnClose = function (args) {
            var parent = 'parentObj';
            if (args.items.length > 0 && args.items[0]["" + parent] instanceof ej2_navigations_1.ContextMenu) {
                this.updateItemStatus();
            }
        };
        DiagramContextMenu.prototype.getLocaleText = function (item) {
            return this.l10n.getConstant(this.localeText["" + item]);
        };
        DiagramContextMenu.prototype.updateItemStatus = function () {
            this.contextMenu.showItems(this.hiddenItems, true);
            this.contextMenu.enableItems(this.disableItems, false, true);
            this.hiddenItems = [];
            this.disableItems = [];
            this.isOpen = false;
        };
        DiagramContextMenu.prototype.ensureItems = function (item, event) {
            var key = this.getKeyFromId(item.id);
            var dItem = this.defaultItems["" + key];
            if (this.getDefaultItems().indexOf(key) !== -1) {
                if (item.target && (event || this.parent.checkMenu) &&
                    !this.ensureTarget(item)) {
                    this.hiddenItems.push(item.id);
                }
            }
        };
        DiagramContextMenu.prototype.refreshItems = function () {
            this.updateItems();
            this.contextMenu.refresh();
        };
        DiagramContextMenu.prototype.updateItems = function () {
            var canInsert = true;
            for (var i = 0; i < this.parent.contextMenuSettings.items.length; i++) {
                var items = this.parent.contextMenuSettings.items[parseInt(i.toString(), 10)];
                for (var j = 0; j < this.contextMenu.items.length; j++) {
                    if (this.contextMenu.items[parseInt(j.toString(), 10)].text
                        === this.parent.contextMenuSettings.items[parseInt(i.toString(), 10)].text) {
                        canInsert = false;
                    }
                }
                if (canInsert) {
                    this.contextMenu.insertAfter([items], this.contextMenu.items[this.contextMenu.items.length - 1].text);
                }
            }
        };
        DiagramContextMenu.prototype.contextMenuBeforeOpen = function (args) {
            return __awaiter(this, void 0, void 0, function () {
                var diagramArgs, _i, _a, item, _b, _c, newItem, hidden, contextItems, i, item, i, item;
                return __generator(this, function (_d) {
                    if (!this.parent.checkMenu &&
                        (window.navigator.userAgent.indexOf('Linux') !== -1 || window.navigator.userAgent.indexOf('X11') !== -1)) {
                        this.parent.checkMenu = args.cancel = true;
                    }
                    Eif (this.parent.checkMenu) {
                        this.hiddenItems = [];
                    }
                    diagramArgs = args;
                    diagramArgs.hiddenItems = [];
                    for (_i = 0, _a = args.items; _i < _a.length; _i++) {
                        item = _a[_i];
                        this.ensureItems(item, args.event);
                        if (item.items.length) {
                            for (_b = 0, _c = item.items; _b < _c.length; _b++) {
                                newItem = _c[_b];
                                this.ensureItems(newItem, args.event);
                            }
                        }
                    }
                    this.eventArgs = args.event;
                    this.parent.trigger(enum_1.contextMenuOpen, diagramArgs);
                    hidden = true;
                    this.hiddenItems = this.hiddenItems.concat(diagramArgs.hiddenItems);
                    this.contextMenu.enableItems(this.disableItems, false, true);
                    contextItems = this;
                    for (i = 0; i < args.items.length; i++) {
                        item = args.items[parseInt(i.toString(), 10)];
                        if (contextItems.hiddenItems.indexOf(item.id) > -1) {
                            contextItems.contextMenu.hideItems([item.id], true);
                        }
                    }
                    for (i = 0; i < contextItems.contextMenu.items.length; i++) {
                        item = contextItems.contextMenu.items[parseInt(i.toString(), 10)];
                        if (contextItems.hiddenItems.indexOf(item.id) === -1) {
                            hidden = false;
                            contextItems.contextMenu.showItems([item.id], true);
                        }
                    }
                    if (hidden) {
                        diagramArgs.cancel = hidden;
                        this.hiddenItems = [];
                    }
                    if (this.parent.selectedItems.nodes.length && this.parent.selectedItems.nodes[0].isPhase
                        && !this.parent.contextMenuSettings.showCustomMenuOnly) {
                        args.cancel = true;
                    }
                    return [2];
                });
            });
        };
        DiagramContextMenu.prototype.ensureTarget = function (item) {
            var selectedLength = this.parent.selectedItems.nodes.length +
                this.parent.selectedItems.connectors.length;
            var itemText = this.getKeyFromId(item.id);
            var target = false;
            switch (itemText) {
                case 'undo':
                    target = this.parent.historyManager && this.parent.historyManager.canUndo ? true : false;
                    break;
                case 'redo':
                    target = this.parent.historyManager && this.parent.historyManager.canRedo ? true : false;
                    break;
                case 'paste':
                    target = this.parent.commandHandler.clipboardData.clipObject ? true : false;
                    break;
                case 'selectAll':
                    target = this.parent.nodes.length + this.parent.connectors.length ? true : false;
                    break;
                case 'grouping':
                    target = ((selectedLength > 1) || (this.parent.selectedItems.nodes[0] && this.parent.selectedItems.nodes[0].children
                        && this.parent.selectedItems.nodes[0].children.length > 1)) ? true : false;
                    break;
                case 'group':
                    target = selectedLength > 1;
                    break;
                case 'unGroup':
                    target = ((this.parent.selectedItems.nodes[0] && this.parent.selectedItems.nodes[0].children
                        && this.parent.selectedItems.nodes[0].children.length > 1)) ? true : false;
                    break;
                case 'cut':
                case 'copy':
                case 'order':
                case 'bringToFrontOrder':
                case 'moveForwardOrder':
                case 'sendToBackOrder':
                case 'sendBackwardOrder':
                    target = selectedLength ? true : false;
                    break;
            }
            return target;
        };
        DiagramContextMenu.prototype.destroy = function () {
            this.contextMenu.destroy();
            ej2_base_1.remove(this.element);
            this.removeEventListener();
        };
        DiagramContextMenu.prototype.getModuleName = function () {
            return 'contextMenu';
        };
        DiagramContextMenu.prototype.generateID = function (item) {
            return this.parent.element.id + '_contextMenu_' + item;
        };
        DiagramContextMenu.prototype.getKeyFromId = function (id) {
            return id.replace(this.parent.element.id + '_contextMenu_', '');
        };
        DiagramContextMenu.prototype.buildDefaultItems = function (item) {
            var menuItem;
            switch (item) {
                case 'copy':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.copy };
                    break;
                case 'cut':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.cut };
                    break;
                case 'paste':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.paste };
                    break;
                case 'undo':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.undo };
                    break;
                case 'redo':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.redo };
                    break;
                case 'grouping':
                    menuItem = { target: exports.menuClass.content };
                    break;
                case 'group':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.group };
                    break;
                case 'unGroup':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.unGroup };
                    break;
                case 'order':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.order };
                    break;
                case 'bringToFrontOrder':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.bringToFront };
                    break;
                case 'moveForwardOrder':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.moveForward };
                    break;
                case 'sendToBackOrder':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.sendToBack };
                    break;
                case 'sendBackwardOrder':
                    menuItem = { target: exports.menuClass.content, iconCss: exports.menuClass.sendBackward };
                    break;
                case 'selectAll':
                    menuItem = { target: exports.menuClass.content };
                    break;
            }
            this.defaultItems["" + item] = {
                text: this.getLocaleText(item), id: this.generateID(item),
                target: menuItem.target, iconCss: menuItem.iconCss ? 'e-icons ' + menuItem.iconCss : ''
            };
            return this.defaultItems["" + item];
        };
        DiagramContextMenu.prototype.getDefaultItems = function () {
            return [
                'copy',
                'cut', 'paste', 'undo', 'redo', 'selectAll', 'grouping', 'group', 'unGroup', 'order',
                'bringToFrontOrder', 'moveForwardOrder', 'sendToBackOrder', 'sendBackwardOrder'
            ];
        };
        DiagramContextMenu.prototype.setLocaleKey = function () {
            return {
                'copy': 'Copy',
                'cut': 'Cut',
                'paste': 'Paste',
                'undo': 'Undo',
                'redo': 'Redo',
                'selectAll': 'SelectAll',
                'grouping': 'Grouping',
                'group': 'Group',
                'unGroup': 'UnGroup',
                'order': 'Order',
                'bringToFrontOrder': 'BringToFront',
                'moveForwardOrder': 'MoveForward',
                'sendToBackOrder': 'SendToBack',
                'sendBackwardOrder': 'SendBackward'
            };
        };
        return DiagramContextMenu;
    }());
    exports.DiagramContextMenu = DiagramContextMenu;
});