@syncfusion/ej2-treemap 20.2.45 → 20.3.56

package/dist/es6/ej2-treemap.es2015.js

@@ -2118,6 +2118,7 @@ class LayoutPanel {
                         }
                     }
                     itemGroup.setAttribute('aria-label', item['name']);
+                    itemGroup.setAttribute('role', '');
                     itemGroup.setAttribute('tabindex', (this.treemap.tabIndex + i + 2).toString());
                     maintainSelection(this.treemap, itemGroup, 'treeMapSelection');
                     this.layoutGroup.appendChild(itemGroup);
@@ -2282,6 +2283,19 @@ class LayoutPanel {
         }
         return textValue;
     }
+    /**
+     *
+     * @returns {void}
+     * @private
+     */
+    destroy() {
+        this.treemap = null;
+        this.currentRect = null;
+        this.layoutGroup = null;
+        this.renderer = null;
+        this.renderItems = [];
+        this.parentData = [];
+    }
 }
 
 /**
@@ -2513,7 +2527,6 @@ class Print {
      */
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(control) {
-        this.control = control;
     }
     /**
      * This method is used to perform the print functionality in treemap.
@@ -2522,16 +2535,16 @@ class Print {
      * @returns {void}
      * @private
      */
-    print(elements) {
-        this.printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
-        this.printWindow.moveTo(0, 0);
-        this.printWindow.resizeTo(screen.availWidth, screen.availHeight);
+    print(treeMap, elements) {
+        let printWindow = window.open('', 'print', 'height=' + window.outerHeight + ',width=' + window.outerWidth + ',tabbar=no');
+        printWindow.moveTo(0, 0);
+        printWindow.resizeTo(screen.availWidth, screen.availHeight);
         const argsData = {
-            cancel: false, htmlContent: this.getHTMLContent(elements), name: beforePrint
+            cancel: false, htmlContent: this.getHTMLContent(treeMap, elements), name: beforePrint
         };
-        this.control.trigger(beforePrint, argsData, () => {
+        treeMap.trigger(beforePrint, argsData, () => {
             if (!argsData.cancel) {
-                print(argsData.htmlContent, this.printWindow);
+                print(argsData.htmlContent, printWindow);
             }
         });
     }
@@ -2542,7 +2555,7 @@ class Print {
      * @returns {Element} - Returns the element
      * @private
      */
-    getHTMLContent(elements) {
+    getHTMLContent(treeMap, elements) {
         const div = createElement('div');
         if (elements) {
             if (elements instanceof Array) {
@@ -2558,7 +2571,7 @@ class Print {
             }
         }
         else {
-            div.appendChild(this.control.element.cloneNode(true));
+            div.appendChild(treeMap.element.cloneNode(true));
         }
         return div;
     }
@@ -2572,17 +2585,12 @@ class Print {
         return 'Print';
     }
     /**
-     * To destroy the legend.
+     * To destroy the Print module.
      *
-     * @param {TreeMap} treemap - Specifies the treemap instance
      * @returns {void}
      * @private
      */
-    destroy(treemap) {
-        /**
-         * Destroy method performed here
-         */
-    }
+    destroy() { }
 }
 
 /**
@@ -2598,7 +2606,6 @@ class ImageExport {
      */
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(control) {
-        this.control = control;
     }
     /**
      * This method is used to perform the export functionality for the rendered treemap.
@@ -2609,22 +2616,22 @@ class ImageExport {
      * @returns {Promise} - Returns the promise string.
      * @private
      */
-    export(type, fileName, allowDownload) {
+    export(treeMap, type, fileName, allowDownload) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
             const element = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'height': this.control.availableSize.height.toString(),
-                    'width': this.control.availableSize.width.toString()
+                    'height': treeMap.availableSize.height.toString(),
+                    'width': treeMap.availableSize.width.toString()
                 }
             });
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             const svgData = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">' +
-                this.control.svgObject.outerHTML +
+                treeMap.svgObject.outerHTML +
                 '</svg>';
             const url = window.URL.createObjectURL(new Blob(type === 'SVG' ? [svgData] :
-                [(new XMLSerializer()).serializeToString(this.control.svgObject)], { type: 'image/svg+xml' }));
+                [(new XMLSerializer()).serializeToString(treeMap.svgObject)], { type: 'image/svg+xml' }));
             if (type === 'SVG') {
                 if (allowDownload) {
                     triggerDownload(fileName, type, url, isDownload);
@@ -2663,13 +2670,10 @@ class ImageExport {
     /**
      * To destroy the ImageExport.
      *
-     * @param {TreeMap} treemap - Specifies the instance of the treemap.
      * @returns {void}
      * @private
      */
-    destroy(treemap) {
-        // Destroy method performed here
-    }
+    destroy() { }
 }
 
 /**
@@ -2685,7 +2689,6 @@ class PdfExport {
      */
     // eslint-disable-next-line @typescript-eslint/explicit-member-accessibility
     constructor(control) {
-        this.control = control;
     }
     /**
      * This method is used to perform the export functionality for the rendered treemap.
@@ -2697,24 +2700,24 @@ class PdfExport {
      * @returns {Promise} - Returns the string.
      * @private
      */
-    export(type, fileName, orientation, allowDownload) {
+    export(treeMap, type, fileName, orientation, allowDownload) {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const promise = new Promise((resolve, reject) => {
             const element = createElement('canvas', {
                 id: 'ej2-canvas',
                 attrs: {
-                    'width': this.control.availableSize.width.toString(),
-                    'height': this.control.availableSize.height.toString()
+                    'width': treeMap.availableSize.width.toString(),
+                    'height': treeMap.availableSize.height.toString()
                 }
             });
             const isDownload = !(Browser.userAgent.toString().indexOf('HeadlessChrome') > -1);
             orientation = isNullOrUndefined(orientation) ? PdfPageOrientation.Landscape : orientation;
-            const exportElement = this.control.svgObject.cloneNode(true);
+            const exportElement = treeMap.svgObject.cloneNode(true);
             const backgroundElement = exportElement.childNodes[0];
             if (!isNullOrUndefined(backgroundElement)) {
                 const backgroundColor = backgroundElement.getAttribute('fill');
-                if ((this.control.theme === 'Tailwind' || this.control.theme === 'TailwindDark' || this.control.theme === 'Bootstrap5' || this.control.theme === 'Bootstrap5Dark'
-                    || this.control.theme === 'Fluent' || this.control.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
+                if ((treeMap.theme === 'Tailwind' || treeMap.theme === 'TailwindDark' || treeMap.theme === 'Bootstrap5' || treeMap.theme === 'Bootstrap5Dark'
+                    || treeMap.theme === 'Fluent' || treeMap.theme === 'FluentDark') && (backgroundColor === 'rgba(255,255,255, 0.0)' || backgroundColor === 'transparent')) {
                     exportElement.childNodes[0].setAttribute('fill', 'rgba(255,255,255, 1)');
                 }
             }
@@ -2728,7 +2731,7 @@ class PdfExport {
                 let imageString = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
                 document.pageSettings.orientation = orientation;
                 imageString = imageString.slice(imageString.indexOf(',') + 1);
-                document.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (this.control.availableSize.width - 60), this.control.availableSize.height);
+                document.pages.add().graphics.drawImage(new PdfBitmap(imageString), 0, 0, (treeMap.availableSize.width - 60), treeMap.availableSize.height);
                 if (allowDownload) {
                     document.save(fileName + '.pdf');
                     document.destroy();
@@ -2746,15 +2749,12 @@ class PdfExport {
         return 'PdfExport';
     }
     /**
-     * To destroy the ImageExport.
+     * To destroy the PdfExport.
      *
-     * @param {TreeMap} treemap - Specifies the treemap instance.
      * @returns {void}
      * @private
      */
-    destroy(treemap) {
-        // Destroy method performed here
-    }
+    destroy() { }
 }
 
 /* eslint-disable @typescript-eslint/ban-types */
@@ -2879,6 +2879,12 @@ let TreeMap = class TreeMap extends Component {
                 remove(this.svgObject);
             }
         }
+        if (isNullOrUndefined(this.renderer)) {
+            this.renderer = new SvgRenderer(this.element.id);
+        }
+        if (isNullOrUndefined(this.layout)) {
+            this.layout = new LayoutPanel(this);
+        }
         this.clearTemplate();
         const containerWidth = this.element.clientWidth;
         const containerHeight = this.element.clientHeight;
@@ -2961,6 +2967,7 @@ let TreeMap = class TreeMap extends Component {
             const titleBounds = new Rect(location.x, location.y, elementSize.width, elementSize.height);
             const element = renderTextElement(options, style, style.color || (type === 'title' ? this.themeStyle.titleFontColor : this.themeStyle.subTitleFontColor), groupEle);
             element.setAttribute('aria-label', title.description || title.text);
+            element.setAttribute('role', '');
             element.setAttribute('tabindex', (this.tabIndex + (type === 'title' ? 1 : 2)).toString());
             if ((type === 'title' && !title.subtitleSettings.text) || (type === 'subtitle')) {
                 height = (this.availableSize.height - titleBounds.y - titlePadding - this.margin.bottom);
@@ -3133,7 +3140,7 @@ let TreeMap = class TreeMap extends Component {
      */
     print(id) {
         if (this.allowPrint && this.printModule) {
-            this.printModule.print(id);
+            this.printModule.print(this, id);
         }
     }
     /**
@@ -3150,13 +3157,13 @@ let TreeMap = class TreeMap extends Component {
         if (type === 'PDF' && this.allowPdfExport && this.pdfExportModule) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return new Promise((resolve, reject) => {
-                resolve(this.pdfExportModule.export(type, fileName, orientation, allowDownload));
+                resolve(this.pdfExportModule.export(this, type, fileName, orientation, allowDownload));
             });
         }
         else if (this.allowImageExport && (type !== 'PDF') && this.imageExportModule) {
             // eslint-disable-next-line @typescript-eslint/no-explicit-any
             return new Promise((resolve, reject) => {
-                resolve(this.imageExportModule.export(type, fileName, allowDownload));
+                resolve(this.imageExportModule.export(this, type, fileName, allowDownload));
             });
         }
         return null;
@@ -3322,6 +3329,7 @@ let TreeMap = class TreeMap extends Component {
      */
     addTabIndex() {
         this.element.setAttribute('aria-label', this.description || 'TreeMap Element');
+        this.element.setAttribute('role', '');
         this.element.setAttribute('tabindex', this.tabIndex.toString());
     }
     /**
@@ -3330,28 +3338,30 @@ let TreeMap = class TreeMap extends Component {
      * @param e - Specifies the pointer event.
      */
     resizeOnTreeMap(e) {
-        this.isResize = true;
-        let args = {
-            name: resize,
-            cancel: false,
-            previousSize: this.availableSize,
-            currentSize: new Size(0, 0),
-            treemap: this
-        };
-        if (this.resizeTo) {
-            clearTimeout(this.resizeTo);
-        }
-        if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-treemap')) {
-            this.resizeTo = setTimeout(() => {
-                this.unWireEVents();
-                this.createSvg();
-                this.refreshing = true;
-                this.wireEVents();
-                args.currentSize = this.availableSize;
-                this.trigger(resize, args, (observedArgs) => {
-                    this.render();
-                });
-            }, 500);
+        if (!this.isDestroyed) {
+            this.isResize = true;
+            let args = {
+                name: resize,
+                cancel: false,
+                previousSize: this.availableSize,
+                currentSize: new Size(0, 0),
+                treemap: this
+            };
+            if (this.resizeTo) {
+                clearTimeout(this.resizeTo);
+            }
+            if (!isNullOrUndefined(this.element) && this.element.classList.contains('e-treemap')) {
+                this.resizeTo = setTimeout(() => {
+                    this.unWireEVents();
+                    this.createSvg();
+                    this.refreshing = true;
+                    this.wireEVents();
+                    args.currentSize = this.availableSize;
+                    this.trigger(resize, args, (observedArgs) => {
+                        this.render();
+                    });
+                }, 500);
+            }
         }
     }
     /**
@@ -3781,28 +3791,30 @@ let TreeMap = class TreeMap extends Component {
      * @private
      */
     onPropertyChanged(newProp, oldProp) {
-        let render = false;
-        for (const prop of Object.keys(newProp)) {
-            switch (prop) {
-                case 'background':
-                    this.renderBorder();
-                    break;
-                case 'height':
-                case 'width':
-                case 'layoutType':
-                case 'levels':
-                case 'drillDownView':
-                case 'renderDirection':
-                case 'leafItemSettings':
-                case 'legendSettings':
-                case 'dataSource':
-                    render = true;
-                    break;
+        if (!this.isDestroyed) {
+            let render = false;
+            for (const prop of Object.keys(newProp)) {
+                switch (prop) {
+                    case 'background':
+                        this.renderBorder();
+                        break;
+                    case 'height':
+                    case 'width':
+                    case 'layoutType':
+                    case 'levels':
+                    case 'drillDownView':
+                    case 'renderDirection':
+                    case 'leafItemSettings':
+                    case 'legendSettings':
+                    case 'dataSource':
+                        render = true;
+                        break;
+                }
+            }
+            if (render) {
+                this.createSvg();
+                this.renderElements();
             }
-        }
-        if (render) {
-            this.createSvg();
-            this.renderElements();
         }
     }
     /**
@@ -3816,6 +3828,7 @@ let TreeMap = class TreeMap extends Component {
      */
     destroy() {
         this.unWireEVents();
+        removeElement('treeMapMeasureText');
         this.drilledItems = [];
         this.levelSelection = [];
         this.legendId = [];
@@ -4949,15 +4962,25 @@ class TreeMapLegend {
     /**
      * To destroy the legend.
      *
-     * @param {TreeMap} treemap - Specifies treemap instance
      * @returns {void}
      * @private
      */
-    destroy(treemap) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        this.legendRenderingCollections = [];
+        this.legendCollections = [];
+        this.outOfRangeLegend = null;
+        this.totalPages = [];
+        this.translate = null;
+        this.legendBorderRect = null;
+        this.legendGroup = null;
+        this.legendNames = [];
+        this.defsElement = null;
+        this.legendLinearGradient = null;
+        this.legendInteractiveGradient = [];
+        this.legendItemRect = null;
         this.removeEventListener();
+        //TODO: The removeInteractivePointer method (calling method) is called in a timer in the mouseUpHandler method. Because of this handling, adding the below code results in a spec failure.
+        //this.treemap = null;
     }
     // eslint-disable-next-line valid-jsdoc
     /**
@@ -5192,12 +5215,16 @@ class TreeMapHighlight {
     /**
      * To destroy the hightlight.
      *
-     * @param {TreeMap} treeMap - Specifies the instance of the treemap.
      * @returns {void}
      * @private
      */
-    destroy(treeMap) {
+    destroy() {
+        this.shapeElement = null;
+        this.shapeHighlightCollection = [];
+        this.legendHighlightCollection = [];
+        this.currentElement = [];
         this.removeEventListener();
+        this.treemap = null;
     }
 }
 /**
@@ -5489,8 +5516,12 @@ class TreeMapSelection {
      * @returns {void}
      * @private
      */
-    destroy(treeMap) {
+    destroy() {
+        this.shapeElement = null;
+        this.shapeSelectionCollection = [];
+        this.legendSelectionCollection = [];
         this.removeEventListener();
+        this.treemap = null;
     }
 }
 
@@ -5550,7 +5581,9 @@ class TreeMapTooltip {
                 toolTipHeader = item['name'];
                 value = item['weight'];
                 toolTipData = item['data'];
-                markerFill = item['options']['fill'];
+                if (!isNullOrUndefined(item['options'])) {
+                    markerFill = item['options']['fill'];
+                }
                 if (this.treemap.enableRtl) {
                     tooltipContent = [textFormatter(this.tooltipSettings.format, toolTipData, this.treemap) ||
                             formatValue(value, this.treemap) + ' : ' + this.treemap.weightValuePath.toString()];
@@ -5684,15 +5717,17 @@ class TreeMapTooltip {
     /**
      * To destroy the tooltip.
      *
-     * @param {TreeMap} treeMap - Specifies the instance of the treemap
      * @returns {void}
      * @private
      */
-    destroy(treeMap) {
-        /**
-         * Destroy method performed here
-         */
+    destroy() {
+        if (!isNullOrUndefined(this.svgTooltip)) {
+            this.svgTooltip.destroy();
+        }
+        this.svgTooltip = null;
+        this.tooltipSettings = null;
         this.removeEventListener();
+        this.treemap = null;
     }
 }