all files / maps/model/ export-image.js

100% Statements 95/95
89.33% Branches 67/75
100% Functions 11/11
100% Lines 95/95
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     23× 23×             23× 23× 23× 23× 23× 23× 23× 23×     19×       23× 14×           23×   23×           14× 14× 14×                 60× 60× 60× 60×   60× 60× 60× 60× 60× 40× 40×   60× 60× 12×           48×     60× 60×               60× 12×             48× 48× 48×     60×         23×   3430×        
define(["require", "exports", "@syncfusion/ej2-base", "../utils/helper"], function (require, exports, ej2_base_1, helper_1) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var ImageExport = (function () {
        function ImageExport(control) {
        }
        ImageExport.prototype.export = function (maps, type, fileName, allowDownload) {
            var promise = new Promise(function (resolve, reject) {
                var imageCanvasElement = ej2_base_1.createElement('canvas', {
                    id: 'ej2-canvas',
                    attrs: {
                        'width': maps.availableSize.width.toString(),
                        'height': maps.availableSize.height.toString()
                    }
                });
                var isDownload = !(ej2_base_1.Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
                var svgParent = document.getElementById(maps.element.id + '_Tile_SVG_Parent');
                var svgDataElement;
                var tileSvg;
                var svgObject = helper_1.getElementByID(maps.element.id + '_svg').cloneNode(true);
                var backgroundElement = svgObject.childNodes[0];
                var backgroundColor = backgroundElement.getAttribute('fill');
                if ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3' || maps.theme === 'Fluent2')
                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                    svgObject.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                }
                else if ((maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark' ||
                    maps.theme === 'Fluent2Dark' || maps.theme === 'Fluent2HighContrast')
                    && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                    svgObject.childNodes[0].setAttribute('fill', 'rgba(0, 0, 0, 1)');
                }
                if (!maps.isTileMap) {
                    svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                        svgObject.outerHTML + '</svg>';
                }
                else {
                    tileSvg = helper_1.getElementByID(maps.element.id + '_Tile_SVG').cloneNode(true);
                    svgDataElement = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
                        svgObject.outerHTML + tileSvg.outerHTML + '</svg>';
                }
                var url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgDataElement] :
                    [(new XMLSerializer()).serializeToString(svgObject)], { type: 'image/svg+xml' }));
                if (type === 'SVG') {
                    if (allowDownload) {
                        helper_1.triggerDownload(fileName, type, url, isDownload);
                    }
                    else {
                        resolve(null);
                    }
                }
                else {
                    var image_1 = new Image();
                    var ctxt_1 = imageCanvasElement.getContext('2d');
                    if (!maps.isTileMap) {
                        image_1.onload = (function () {
                            ctxt_1.drawImage(image_1, 0, 0);
                            window.URL.revokeObjectURL(url);
                            if (allowDownload) {
                                helper_1.triggerDownload(fileName, type, imageCanvasElement.toDataURL('image/png').replace('image/png', 'image/octet-stream'), isDownload);
                            }
                            else {
                                if (type === 'PNG') {
                                    resolve(imageCanvasElement.toDataURL('image/png'));
                                }
                                else Eif (type === 'JPEG') {
                                    resolve(imageCanvasElement.toDataURL('image/jpeg'));
                                }
                            }
                        });
                        image_1.src = url;
                    }
                    else {
                        maps.isExportInitialTileMap = true;
                        var svgParentElement = document.getElementById(maps.element.id + '_MapAreaBorder');
                        var top_1 = parseFloat(svgParentElement.getAttribute('y'));
                        var left_1 = parseFloat(svgParentElement.getAttribute('x'));
                        var imgxHttp = new XMLHttpRequest();
                        var imgTileLength_1 = maps.mapLayerPanel.tiles.length;
                        var _loop_1 = function (i) {
                            var tile = document.getElementById(maps.element.id + '_tile_' + (i - 1));
                            var exportTileImg = new Image();
                            exportTileImg.crossOrigin = 'Anonymous';
                            var background = maps.background ? maps.background : ((maps.theme === 'Tailwind' || maps.theme === 'Bootstrap5' || maps.theme === 'Fluent' || maps.theme === 'Material3') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) ? '#ffffff' :
                                (maps.theme === 'TailwindDark' || maps.theme === 'Bootstrap5Dark' || maps.theme === 'FluentDark' || maps.theme === 'Material3Dark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent') ? '#000000' : '#ffffff';
                            ctxt_1.fillStyle = background;
                            ctxt_1.fillRect(0, 0, maps.availableSize.width, maps.availableSize.height);
                            ctxt_1.font = maps.titleSettings.textStyle.size + ' Arial';
                            var titleElement = document.getElementById(maps.element.id + '_Map_title');
                            if (!ej2_base_1.isNullOrUndefined(titleElement)) {
                                ctxt_1.fillStyle = titleElement.getAttribute('fill');
                                ctxt_1.fillText(maps.titleSettings.text, parseFloat(titleElement.getAttribute('x')), parseFloat(titleElement.getAttribute('y')));
                            }
                            exportTileImg.onload = (function () {
                                if (i === 0 || i === imgTileLength_1 + 1) {
                                    if (i === 0) {
                                        ctxt_1.setTransform(1, 0, 0, 1, 0, 0);
                                        ctxt_1.rect(0, top_1, parseFloat(svgParent.style.width), parseFloat(svgParent.style.height));
                                        ctxt_1.clip();
                                    }
                                    else {
                                        ctxt_1.setTransform(1, 0, 0, 1, left_1, top_1);
                                    }
                                }
                                else {
                                    ctxt_1.setTransform(1, 0, 0, 1, parseFloat(tile.style.left) + left_1, parseFloat(tile.style.top) +
                                        top_1);
                                }
                                ctxt_1.drawImage(exportTileImg, 0, 0);
                                if (i === imgTileLength_1 + 1) {
                                    localStorage.setItem('local-canvasImage', imageCanvasElement.toDataURL('image/png'));
                                    var localBase64 = localStorage.getItem('local-canvasImage');
                                    if (allowDownload) {
                                        helper_1.triggerDownload(fileName, type, localBase64, isDownload);
                                        localStorage.removeItem('local-canvasImage');
                                        maps.isExportInitialTileMap = false;
                                    }
                                    else {
                                        maps.isExportInitialTileMap = false;
                                        if (type === 'PNG') {
                                            resolve(localBase64);
                                        }
                                        else Eif (type === 'JPEG') {
                                            resolve(imageCanvasElement.toDataURL('image/jpeg'));
                                        }
                                    }
                                }
                            });
                            if (i === 0 || i === imgTileLength_1 + 1) {
                                if (i === 0) {
                                    exportTileImg.src = url;
                                }
                                else {
                                    setTimeout(function () {
                                        exportTileImg.src = window.URL.createObjectURL(new Blob([(new XMLSerializer()).serializeToString(tileSvg)], { type: 'image/svg+xml' }));
                                    }, 300);
                                }
                            }
                            else {
                                imgxHttp.open('GET', tile.children[0].getAttribute('src'), true);
                                imgxHttp.send();
                                exportTileImg.src = tile.children[0].getAttribute('src');
                            }
                        };
                        for (var i = 0; i <= imgTileLength_1 + 1; i++) {
                            _loop_1(i);
                        }
                    }
                }
            });
            return promise;
        };
        ImageExport.prototype.getModuleName = function () {
            return 'ImageExport';
        };
        ImageExport.prototype.destroy = function () { };
        return ImageExport;
    }());
    exports.ImageExport = ImageExport;
});