@syncfusion/ej2-image-editor 22.2.9 → 22.2.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/ej2-image-editor.umd.min.js +2 -2
  3. package/dist/ej2-image-editor.umd.min.js.map +1 -1
  4. package/dist/es6/ej2-image-editor.es2015.js +114 -48
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +114 -48
  7. package/dist/es6/ej2-image-editor.es5.js.map +1 -1
  8. package/dist/global/ej2-image-editor.min.js +2 -2
  9. package/dist/global/ej2-image-editor.min.js.map +1 -1
  10. package/dist/global/index.d.ts +1 -1
  11. package/package.json +8 -8
  12. package/src/image-editor/action/freehand-draw.js +3 -0
  13. package/src/image-editor/action/selection.js +14 -9
  14. package/src/image-editor/renderer/toolbar.js +97 -39
  15. package/styles/image-editor/material.css +1 -1
  16. package/styles/material.css +1 -1
package/dist/global/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /*!
2
2
  * filename: index.d.ts
3
- * version : 22.2.9
3
+ * version : 22.2.11
4
4
  * Copyright Syncfusion Inc. 2001 - 2020. All rights reserved.
5
5
  * Use of this code is subject to the terms of our license.
6
6
  * A copy of the current license can be obtained at any time by e-mailing
package/package.json CHANGED
@@ -1,8 +1,8 @@
1
1
  {
2
2
  "_from": "@syncfusion/ej2-image-editor@*",
3
- "_id": "@syncfusion/ej2-image-editor@22.2.8",
3
+ "_id": "@syncfusion/ej2-image-editor@22.2.10",
4
4
  "_inBundle": false,
5
- "_integrity": "sha512-6WPcvPi5XBy7XyIJ7KeheLKnK57kzOHblo7J6t0ZbBfgE/ASS8CXPeHLiVZzRmD/4B60w/brJm1AG6kUWfkyxA==",
5
+ "_integrity": "sha512-eBIoOxPFr9uETyfD1UX79OoCSsyIMz1KIWVz7PsIBJfzJCSO5J+pxGOm2FkWt0KJrUeGBVb0xwYW7xhvDA2wJQ==",
6
6
  "_location": "/@syncfusion/ej2-image-editor",
7
7
  "_phantomChildren": {},
8
8
  "_requested": {
@@ -23,8 +23,8 @@
23
23
  "/@syncfusion/ej2-react-image-editor",
24
24
  "/@syncfusion/ej2-vue-image-editor"
25
25
  ],
26
- "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.2.8.tgz",
27
- "_shasum": "60b9ce316cd35b0123adf204bc754c1c7fa2f53c",
26
+ "_resolved": "https://nexus.syncfusion.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-22.2.10.tgz",
27
+ "_shasum": "dc022c0050e96ec45295004156d94db2a63b0a1b",
28
28
  "_spec": "@syncfusion/ej2-image-editor@*",
29
29
  "_where": "/jenkins/workspace/elease-automation_release_21.1.1/packages/included",
30
30
  "author": {
@@ -32,11 +32,11 @@
32
32
  },
33
33
  "bundleDependencies": false,
34
34
  "dependencies": {
35
- "@syncfusion/ej2-base": "~22.2.9",
35
+ "@syncfusion/ej2-base": "~22.2.10",
36
36
  "@syncfusion/ej2-buttons": "~22.2.9",
37
37
  "@syncfusion/ej2-inputs": "~22.2.9",
38
- "@syncfusion/ej2-navigations": "~22.2.8",
39
- "@syncfusion/ej2-popups": "~22.2.9",
38
+ "@syncfusion/ej2-navigations": "~22.2.11",
39
+ "@syncfusion/ej2-popups": "~22.2.11",
40
40
  "@syncfusion/ej2-splitbuttons": "~22.2.8"
41
41
  },
42
42
  "deprecated": false,
@@ -67,7 +67,7 @@
67
67
  "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
68
68
  },
69
69
  "typings": "index.d.ts",
70
- "version": "22.2.9",
70
+ "version": "22.2.11",
71
71
  "sideEffects": false,
72
72
  "homepage": "https://www.syncfusion.com/javascript-ui-controls"
73
73
  }
package/src/image-editor/action/freehand-draw.js CHANGED
@@ -260,6 +260,9 @@ var FreehandDrawing = /** @class */ (function () {
260
260
  if (e.type === 'mouseup') {
261
261
  this.processPoint(e.clientX - rect.left, e.clientY - rect.top, true, context);
262
262
  }
263
+ else if (e.type === 'touchend' && e.changedTouches) {
264
+ this.processPoint(e.changedTouches[0].clientX - rect.left, e.changedTouches[0].clientY - rect.top, true, context);
265
+ }
263
266
  else {
264
267
  if (!this.isFreehandPointMoved) {
265
268
  this.processPoint(this.freehandDownPoint.x - rect.left, this.freehandDownPoint.y - rect.top, true, context);
package/src/image-editor/action/selection.js CHANGED
@@ -3125,8 +3125,10 @@ var Selection = /** @class */ (function () {
3125
3125
  isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
3126
3126
  }
3127
3127
  else if (parent.activeObj.shape === 'text') {
3128
- parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
3129
- isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
3128
+ if (parent.textArea.style.display === 'none') {
3129
+ parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'text',
3130
+ isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
3131
+ }
3130
3132
  }
3131
3133
  else if (this.isFhdEditing) {
3132
3134
  parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'pen',
@@ -3143,7 +3145,7 @@ var Selection = /** @class */ (function () {
3143
3145
  || (parent.activeObj.shape === 'line' || parent.activeObj.shape === 'arrow' || parent.activeObj.shape === 'path')) {
3144
3146
  parent.updateToolbar(parent.element, parent.activeObj.shape);
3145
3147
  }
3146
- else if (parent.activeObj.shape === 'text') {
3148
+ else if (parent.activeObj.shape === 'text' && parent.textArea.style.display === 'none') {
3147
3149
  parent.updateToolbar(parent.element, 'text');
3148
3150
  }
3149
3151
  }
@@ -3470,12 +3472,12 @@ var Selection = /** @class */ (function () {
3470
3472
  }
3471
3473
  if (obj.keyHistory !== this.tempActiveObj.keyHistory ||
3472
3474
  (strokeColor && (strokeColor !== this.tempActiveObj.strokeSettings.strokeColor)) ||
3473
- obj.textSettings.fontFamily !== this.tempActiveObj.textSettings.fontFamily ||
3474
- Math.round(obj.textSettings.fontSize) !== Math.round(this.tempActiveObj.textSettings.fontSize) ||
3475
- Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio) ||
3476
- obj.textSettings.bold !== this.tempActiveObj.textSettings.bold ||
3477
- obj.textSettings.italic !== this.tempActiveObj.textSettings.italic ||
3478
- obj.textSettings.underline !== this.tempActiveObj.textSettings.underline) {
3475
+ (obj.textSettings && obj.textSettings.fontFamily !== this.tempActiveObj.textSettings.fontFamily) ||
3476
+ (obj.textSettings && Math.round(obj.textSettings.fontSize) !== Math.round(this.tempActiveObj.textSettings.fontSize)) ||
3477
+ (obj.textSettings && Math.round(obj.textSettings.fontRatio) !== Math.round(this.tempActiveObj.textSettings.fontRatio)) ||
3478
+ (obj.textSettings && obj.textSettings.bold !== this.tempActiveObj.textSettings.bold) ||
3479
+ (obj.textSettings && obj.textSettings.italic !== this.tempActiveObj.textSettings.italic) ||
3480
+ (obj.textSettings && obj.textSettings.underline !== this.tempActiveObj.textSettings.underline)) {
3479
3481
  isApply = true;
3480
3482
  }
3481
3483
  if (this.isInitialTextEdited && !isApply) {
@@ -4223,6 +4225,9 @@ var Selection = /** @class */ (function () {
4223
4225
  isInside = true;
4224
4226
  }
4225
4227
  }
4228
+ else if (parent.textArea.style.display === 'block') {
4229
+ isInside = true;
4230
+ }
4226
4231
  if (!isInside) {
4227
4232
  if (isNullOrUndefined(parent.activeObj.currIndex)) {
4228
4233
  parent.activeObj.currIndex = 'shape_' + (parent.objColl.length + 1);
package/src/image-editor/renderer/toolbar.js CHANGED
@@ -718,26 +718,36 @@ var ToolbarModule = /** @class */ (function () {
718
718
  ToolbarModule.prototype.renderAnnotationBtn = function (isContextualToolbar) {
719
719
  var _this = this;
720
720
  var parent = this.parent;
721
+ var isCustomized = false;
721
722
  var items = [];
722
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
723
+ var defItems = ['Ellipse', 'Arrow', 'Line', 'Rectangle', 'Pen', 'Path', 'Text'];
724
+ if (parent.toolbar) {
725
+ for (var i = 0; i < defItems.length; i++) {
726
+ if (parent.toolbar.indexOf(defItems[i]) !== -1) {
727
+ isCustomized = true;
728
+ break;
729
+ }
730
+ }
731
+ }
732
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Pen') > -1)) {
723
733
  items.push({ text: this.l10n.getConstant('Pen'), id: 'pen', iconCss: 'e-icons e-free-pen' });
724
734
  }
725
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
735
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Line') > -1)) {
726
736
  items.push({ text: this.l10n.getConstant('Line'), id: 'line', iconCss: 'e-icons e-line' });
727
737
  }
728
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
738
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Rectangle') > -1)) {
729
739
  items.push({ text: this.l10n.getConstant('Rectangle'), id: 'rectangle', iconCss: 'e-icons e-rectangle' });
730
740
  }
731
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
741
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Ellipse') > -1)) {
732
742
  items.push({ text: this.l10n.getConstant('Ellipse'), id: 'ellipse', iconCss: 'e-icons e-circle' });
733
743
  }
734
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
744
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Arrow') > -1)) {
735
745
  items.push({ text: this.l10n.getConstant('Arrow'), id: 'arrow', iconCss: 'e-icons e-arrow-right-up' });
736
746
  }
737
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
747
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Path') > -1)) {
738
748
  items.push({ text: this.l10n.getConstant('Path'), id: 'path', iconCss: 'e-icons e-critical-path' });
739
749
  }
740
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
750
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Text') > -1)) {
741
751
  items.push({ text: this.l10n.getConstant('Text'), id: 'text', iconCss: 'e-icons e-add-text' });
742
752
  }
743
753
  var obj = { freehandDrawSelectedId: null };
@@ -842,16 +852,26 @@ var ToolbarModule = /** @class */ (function () {
842
852
  var _this = this;
843
853
  var parent = this.parent;
844
854
  var items = [];
845
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
855
+ var isCustomized = false;
856
+ var defItems = ['CustomSelection', 'CircleSelection', 'SquareSelection', 'RatioSelection'];
857
+ if (parent.toolbar) {
858
+ for (var i = 0; i < defItems.length; i++) {
859
+ if (parent.toolbar.indexOf(defItems[i]) !== -1) {
860
+ isCustomized = true;
861
+ break;
862
+ }
863
+ }
864
+ }
865
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('CustomSelection') > -1)) {
846
866
  items.push({ text: this.l10n.getConstant('Custom'), id: 'custom', iconCss: 'e-icons e-custom' });
847
867
  }
848
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
868
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('CircleSelection') > -1)) {
849
869
  items.push({ text: this.l10n.getConstant('Circle'), id: 'circle', iconCss: 'e-icons e-circle' });
850
870
  }
851
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
871
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('SquareSelection') > -1)) {
852
872
  items.push({ text: this.l10n.getConstant('Square'), id: 'square', iconCss: 'e-icons e-square' });
853
873
  }
854
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
874
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('RatioSelection') > -1)) {
855
875
  items.push({ text: '3:2', id: '3:2', iconCss: 'e-icons e-custom-a' });
856
876
  items.push({ text: '4:3', id: '4:3', iconCss: 'e-icons e-custom-b' });
857
877
  items.push({ text: '5:4', id: '5:4', iconCss: 'e-icons e-custom-c' });
@@ -869,8 +889,8 @@ var ToolbarModule = /** @class */ (function () {
869
889
  shape = parent.currSelectionPoint.shape;
870
890
  }
871
891
  else {
872
- iconCss = 'e-custom';
873
- shape = 'custom';
892
+ iconCss = items[0].iconCss;
893
+ shape = items[0].id;
874
894
  }
875
895
  var drpDownBtn = new DropDownButton({
876
896
  open: function (args) {
@@ -952,15 +972,29 @@ var ToolbarModule = /** @class */ (function () {
952
972
  template: '<button id="' + parent.element.id + '_cropBtn"></button>'
953
973
  });
954
974
  toolbarItems.push({ align: 'Center', type: 'Separator' });
955
- toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
956
- tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
957
- toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
958
- tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
959
- toolbarItems.push({ align: 'Center', type: 'Separator' });
960
- toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
961
- tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
962
- toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
963
- tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
975
+ if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
976
+ parent.toolbar.indexOf('RotateLeft') > -1))) {
977
+ toolbarItems.push({ id: parent.element.id + '_rotateLeft', prefixIcon: 'e-icons e-anti-clock-wise',
978
+ tooltipText: this.l10n.getConstant('RotateLeft'), align: 'Center' });
979
+ }
980
+ if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
981
+ parent.toolbar.indexOf('RotateRight') > -1))) {
982
+ toolbarItems.push({ id: parent.element.id + '_rotateRight', prefixIcon: 'e-icons e-clock-wise',
983
+ tooltipText: this.l10n.getConstant('RotateRight'), align: 'Center' });
984
+ }
985
+ if (toolbarItems.length > 2) {
986
+ toolbarItems.push({ align: 'Center', type: 'Separator' });
987
+ }
988
+ if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
989
+ parent.toolbar.indexOf('HorizontalFlip') > -1))) {
990
+ toolbarItems.push({ id: parent.element.id + '_horizontalFlip', prefixIcon: 'e-icons e-horizontal-flip',
991
+ tooltipText: this.l10n.getConstant('HorizontalFlip'), align: 'Center' });
992
+ }
993
+ if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && (parent.toolbar.indexOf('Transform') > -1 ||
994
+ parent.toolbar.indexOf('VerticalFlip') > -1))) {
995
+ toolbarItems.push({ id: parent.element.id + '_verticalFlip', prefixIcon: 'e-icons e-vertical-flip',
996
+ tooltipText: this.l10n.getConstant('VerticalFlip'), align: 'Center' });
997
+ }
964
998
  if (!Browser.isDevice) {
965
999
  toolbarItems.push({ id: parent.element.id + '_ok', prefixIcon: 'e-icons e-check', cssClass: 'top-icon e-tick',
966
1000
  tooltipText: this.l10n.getConstant('OK'), align: 'Right' });
@@ -1066,7 +1100,9 @@ var ToolbarModule = /** @class */ (function () {
1066
1100
  toolbar.refreshOverflow();
1067
1101
  }
1068
1102
  }
1069
- parent.select('custom');
1103
+ if (document.getElementById(parent.element.id + '_cropBtn')) {
1104
+ parent.select(document.getElementById(parent.element.id + '_cropBtn').textContent.toLowerCase());
1105
+ }
1070
1106
  }
1071
1107
  });
1072
1108
  if (Browser.isDevice) {
@@ -1700,31 +1736,41 @@ var ToolbarModule = /** @class */ (function () {
1700
1736
  ToolbarModule.prototype.getAdjustmentToolbarItem = function () {
1701
1737
  var toolbarItems = [];
1702
1738
  var parent = this.parent;
1703
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
1739
+ var isCustomized = false;
1740
+ var defItems = ['Brightness', 'Contrast', 'Hue', 'Saturation', 'Exposure', 'Opacity', 'Blur'];
1741
+ if (parent.toolbar) {
1742
+ for (var i = 0; i < defItems.length; i++) {
1743
+ if (parent.toolbar.indexOf(defItems[i]) !== -1) {
1744
+ isCustomized = true;
1745
+ break;
1746
+ }
1747
+ }
1748
+ }
1749
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Brightness') > -1)) {
1704
1750
  toolbarItems.push({ id: parent.element.id + '_brightness', prefixIcon: 'e-icons e-brightness', cssClass: 'top-icon e-brightness',
1705
1751
  tooltipText: this.l10n.getConstant('Brightness'), align: 'Center' });
1706
1752
  }
1707
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
1753
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Contrast') > -1)) {
1708
1754
  toolbarItems.push({ id: parent.element.id + '_contrast', prefixIcon: 'e-icons e-contrast', cssClass: 'top-icon e-contrast',
1709
1755
  tooltipText: this.l10n.getConstant('Contrast'), align: 'Center' });
1710
1756
  }
1711
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
1757
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Hue') > -1)) {
1712
1758
  toolbarItems.push({ id: parent.element.id + '_hue', prefixIcon: 'e-icons e-fade', cssClass: 'top-icon e-fade',
1713
1759
  tooltipText: this.l10n.getConstant('Hue'), align: 'Center' });
1714
1760
  }
1715
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
1761
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Saturation') > -1)) {
1716
1762
  toolbarItems.push({ id: parent.element.id + '_saturation', prefixIcon: 'e-icons e-saturation', cssClass: 'top-icon e-saturation',
1717
1763
  tooltipText: this.l10n.getConstant('Saturation'), align: 'Center' });
1718
1764
  }
1719
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
1765
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Exposure') > -1)) {
1720
1766
  toolbarItems.push({ id: parent.element.id + '_exposure', prefixIcon: 'e-icons e-grain', cssClass: 'top-icon e-grain',
1721
1767
  tooltipText: this.l10n.getConstant('Exposure'), align: 'Center' });
1722
1768
  }
1723
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
1769
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Opacity') > -1)) {
1724
1770
  toolbarItems.push({ id: parent.element.id + '_opacity', prefixIcon: 'e-icons e-opacity', cssClass: 'top-icon e-opacity',
1725
1771
  tooltipText: this.l10n.getConstant('Opacity'), align: 'Center' });
1726
1772
  }
1727
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
1773
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Blur') > -1)) {
1728
1774
  toolbarItems.push({ id: parent.element.id + '_blur', prefixIcon: 'e-icons e-tint', cssClass: 'top-icon e-tint',
1729
1775
  tooltipText: this.l10n.getConstant('Blur'), align: 'Center' });
1730
1776
  }
@@ -1743,37 +1789,47 @@ var ToolbarModule = /** @class */ (function () {
1743
1789
  ToolbarModule.prototype.getFilterToolbarItem = function () {
1744
1790
  var toolbarItems = [];
1745
1791
  var parent = this.parent;
1746
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
1792
+ var isCustomized = false;
1793
+ var defItems = ['Default', 'Chrome', 'Cold', 'Warm', 'Grayscale', 'Sepia', 'Invert'];
1794
+ if (parent.toolbar) {
1795
+ for (var i = 0; i < defItems.length; i++) {
1796
+ if (parent.toolbar.indexOf(defItems[i]) !== -1) {
1797
+ isCustomized = true;
1798
+ break;
1799
+ }
1800
+ }
1801
+ }
1802
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Default') > -1)) {
1747
1803
  toolbarItems.push({ id: parent.element.id + '_default', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1748
1804
  tooltipText: this.l10n.getConstant('Default'), align: 'Center',
1749
1805
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_defaultCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Default') + '</span></div></div>' });
1750
1806
  }
1751
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
1807
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Chrome') > -1)) {
1752
1808
  toolbarItems.push({ id: parent.element.id + '_chrome', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1753
1809
  tooltipText: this.l10n.getConstant('Chrome'), align: 'Center',
1754
1810
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_chromeCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Chrome') + '</span></div></div>' });
1755
1811
  }
1756
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
1812
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Cold') > -1)) {
1757
1813
  toolbarItems.push({ id: parent.element.id + '_cold', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1758
1814
  tooltipText: this.l10n.getConstant('Cold'), align: 'Center',
1759
1815
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_coldCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Cold') + '</span></div></div>' });
1760
1816
  }
1761
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
1817
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Warm') > -1)) {
1762
1818
  toolbarItems.push({ id: parent.element.id + '_warm', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1763
1819
  tooltipText: this.l10n.getConstant('Warm'), align: 'Center',
1764
1820
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_warmCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Warm') + '</span></div></div>' });
1765
1821
  }
1766
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
1822
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Grayscale') > -1)) {
1767
1823
  toolbarItems.push({ id: parent.element.id + '_grayscale', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1768
1824
  tooltipText: this.l10n.getConstant('Grayscale'), align: 'Center',
1769
1825
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_grayscaleCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Grayscale') + '</span></div></div>' });
1770
1826
  }
1771
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
1827
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Sepia') > -1)) {
1772
1828
  toolbarItems.push({ id: parent.element.id + '_sepia', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1773
1829
  tooltipText: this.l10n.getConstant('Sepia'), align: 'Center',
1774
1830
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_sepiaCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Sepia') + '</span></div></div>' });
1775
1831
  }
1776
- if (isNullOrUndefined(parent.toolbar) || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
1832
+ if (isNullOrUndefined(parent.toolbar) || !isCustomized || (parent.toolbar && parent.toolbar.indexOf('Invert') > -1)) {
1777
1833
  toolbarItems.push({ id: parent.element.id + '_invert', prefixIcon: 'e-icons e-none', cssClass: 'top-icon e-none',
1778
1834
  tooltipText: this.l10n.getConstant('Invert'), align: 'Center',
1779
1835
  template: '<div class="filter-wrapper" style="box-sizing: content-box;"><canvas id=' + parent.element.id + '_invertCanvas' + '></canvas><div style="text-align:center;"><span>' + this.l10n.getConstant('Invert') + '</span></div></div>' });
@@ -2047,7 +2103,9 @@ var ToolbarModule = /** @class */ (function () {
2047
2103
  if (hdrWrapper) {
2048
2104
  hdrWrapper.style.display = 'none';
2049
2105
  }
2050
- document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
2106
+ if (document.getElementById(parent.currentFilter + 'Canvas')) {
2107
+ document.getElementById(parent.currentFilter + 'Canvas').parentElement.parentElement.classList.add('e-selected');
2108
+ }
2051
2109
  _this.enableDisableTbrBtn();
2052
2110
  toolbar.refreshOverflow();
2053
2111
  }
@@ -2838,7 +2896,7 @@ var ToolbarModule = /** @class */ (function () {
2838
2896
  for (var _i = 0, selectors_1 = selectors; _i < selectors_1.length; _i++) {
2839
2897
  var selector = selectors_1[_i];
2840
2898
  var element = document.querySelector(selector);
2841
- if (element.classList.contains('e-selected-btn')) {
2899
+ if (element && element.classList.contains('e-selected-btn')) {
2842
2900
  element.classList.remove('e-selected-btn');
2843
2901
  break;
2844
2902
  }
package/styles/image-editor/material.css CHANGED
@@ -1,4 +1,4 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
1
+ @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
2
  /* stylelint-disable-line no-empty-source */ /*! component's theme wise override definitions and variables */
3
3
  @keyframes tbar-popup-shadow {
4
4
  0% {
package/styles/material.css CHANGED
@@ -1,4 +1,4 @@
1
- @import url("https://fonts.googleapis.com/css?family=Roboto:400,500");
1
+ @import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700");
2
2
  /* stylelint-disable-line no-empty-source */ /*! component's theme wise override definitions and variables */
3
3
  @keyframes tbar-popup-shadow {
4
4
  0% {