@syncfusion/ej2-image-editor 22.2.11 → 23.1.36

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 (118) hide show
  1. package/CHANGELOG.md +10 -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 +4269 -687
  5. package/dist/es6/ej2-image-editor.es2015.js.map +1 -1
  6. package/dist/es6/ej2-image-editor.es5.js +4232 -641
  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 +12 -12
  12. package/src/image-editor/action/crop.js +47 -30
  13. package/src/image-editor/action/draw.d.ts +16 -0
  14. package/src/image-editor/action/draw.js +827 -81
  15. package/src/image-editor/action/export.d.ts +3 -0
  16. package/src/image-editor/action/export.js +84 -20
  17. package/src/image-editor/action/filter.d.ts +0 -1
  18. package/src/image-editor/action/filter.js +28 -41
  19. package/src/image-editor/action/freehand-draw.js +42 -32
  20. package/src/image-editor/action/selection.d.ts +6 -0
  21. package/src/image-editor/action/selection.js +380 -66
  22. package/src/image-editor/action/shape.d.ts +8 -0
  23. package/src/image-editor/action/shape.js +286 -91
  24. package/src/image-editor/action/transform.d.ts +9 -0
  25. package/src/image-editor/action/transform.js +402 -52
  26. package/src/image-editor/action/undo-redo.d.ts +1 -0
  27. package/src/image-editor/action/undo-redo.js +138 -10
  28. package/src/image-editor/base/enum.d.ts +38 -1
  29. package/src/image-editor/base/enum.js +39 -0
  30. package/src/image-editor/base/image-editor-model.d.ts +16 -2
  31. package/src/image-editor/base/image-editor.d.ts +134 -7
  32. package/src/image-editor/base/image-editor.js +611 -69
  33. package/src/image-editor/base/interface.d.ts +233 -2
  34. package/src/image-editor/renderer/toolbar.d.ts +25 -0
  35. package/src/image-editor/renderer/toolbar.js +1273 -72
  36. package/styles/bootstrap-dark.css +68 -1
  37. package/styles/bootstrap.css +68 -1
  38. package/styles/bootstrap4.css +68 -1
  39. package/styles/bootstrap5-dark.css +68 -1
  40. package/styles/bootstrap5.css +68 -1
  41. package/styles/fabric-dark.css +68 -1
  42. package/styles/fabric.css +68 -1
  43. package/styles/fluent-dark.css +68 -1
  44. package/styles/fluent.css +68 -1
  45. package/styles/highcontrast-light.css +70 -3
  46. package/styles/highcontrast.css +69 -7
  47. package/styles/image-editor/_bootstrap-dark-definition.scss +1 -0
  48. package/styles/image-editor/_bootstrap-definition.scss +1 -0
  49. package/styles/image-editor/_bootstrap4-definition.scss +1 -0
  50. package/styles/image-editor/_bootstrap5-definition.scss +1 -0
  51. package/styles/image-editor/_fabric-dark-definition.scss +1 -0
  52. package/styles/image-editor/_fabric-definition.scss +1 -0
  53. package/styles/image-editor/_fluent-definition.scss +1 -0
  54. package/styles/image-editor/_fusionnew-definition.scss +1 -0
  55. package/styles/image-editor/_highcontrast-definition.scss +2 -1
  56. package/styles/image-editor/_highcontrast-light-definition.scss +2 -1
  57. package/styles/image-editor/_layout.scss +92 -0
  58. package/styles/image-editor/_material-dark-definition.scss +1 -0
  59. package/styles/image-editor/_material-definition.scss +1 -0
  60. package/styles/image-editor/_material3-definition.scss +2 -1
  61. package/styles/image-editor/_tailwind-definition.scss +1 -0
  62. package/styles/image-editor/_theme.scss +4 -2
  63. package/styles/image-editor/bootstrap-dark.css +68 -1
  64. package/styles/image-editor/bootstrap-dark.scss +1 -1
  65. package/styles/image-editor/bootstrap.css +68 -1
  66. package/styles/image-editor/bootstrap.scss +1 -1
  67. package/styles/image-editor/bootstrap4.css +68 -1
  68. package/styles/image-editor/bootstrap4.scss +1 -1
  69. package/styles/image-editor/bootstrap5-dark.css +68 -1
  70. package/styles/image-editor/bootstrap5-dark.scss +1 -1
  71. package/styles/image-editor/bootstrap5.css +68 -1
  72. package/styles/image-editor/bootstrap5.scss +1 -1
  73. package/styles/image-editor/fabric-dark.css +68 -1
  74. package/styles/image-editor/fabric-dark.scss +1 -1
  75. package/styles/image-editor/fabric.css +68 -1
  76. package/styles/image-editor/fabric.scss +1 -1
  77. package/styles/image-editor/fluent-dark.css +68 -1
  78. package/styles/image-editor/fluent-dark.scss +1 -1
  79. package/styles/image-editor/fluent.css +68 -1
  80. package/styles/image-editor/fluent.scss +1 -1
  81. package/styles/image-editor/highcontrast-light.css +70 -3
  82. package/styles/image-editor/highcontrast-light.scss +1 -1
  83. package/styles/image-editor/highcontrast.css +69 -7
  84. package/styles/image-editor/highcontrast.scss +1 -1
  85. package/styles/image-editor/icons/_bootstrap-dark.scss +1 -0
  86. package/styles/image-editor/icons/_bootstrap.scss +1 -0
  87. package/styles/image-editor/icons/_bootstrap4.scss +1 -0
  88. package/styles/image-editor/icons/_bootstrap5.scss +1 -0
  89. package/styles/image-editor/icons/_fabric-dark.scss +1 -0
  90. package/styles/image-editor/icons/_fabric.scss +1 -0
  91. package/styles/image-editor/icons/_fluent.scss +1 -0
  92. package/styles/image-editor/icons/_fusionnew.scss +1 -0
  93. package/styles/image-editor/icons/_highcontrast-light.scss +1 -0
  94. package/styles/image-editor/icons/_highcontrast.scss +1 -0
  95. package/styles/image-editor/icons/_material-dark.scss +1 -0
  96. package/styles/image-editor/icons/_material.scss +1 -0
  97. package/styles/image-editor/icons/_material3.scss +1 -0
  98. package/styles/image-editor/icons/_tailwind.scss +1 -0
  99. package/styles/image-editor/material-dark.css +68 -2
  100. package/styles/image-editor/material-dark.scss +1 -1
  101. package/styles/image-editor/material.css +68 -2
  102. package/styles/image-editor/material.scss +1 -1
  103. package/styles/image-editor/material3-dark.css +73 -4
  104. package/styles/image-editor/material3-dark.scss +1 -1
  105. package/styles/image-editor/material3.css +73 -4
  106. package/styles/image-editor/material3.scss +1 -1
  107. package/styles/image-editor/tailwind-dark.css +68 -2
  108. package/styles/image-editor/tailwind-dark.scss +1 -1
  109. package/styles/image-editor/tailwind.css +68 -2
  110. package/styles/image-editor/tailwind.scss +1 -1
  111. package/styles/material-dark.css +68 -2
  112. package/styles/material.css +68 -2
  113. package/styles/material3-dark.css +73 -4
  114. package/styles/material3-dark.scss +1 -1
  115. package/styles/material3.css +73 -4
  116. package/styles/material3.scss +1 -1
  117. package/styles/tailwind-dark.css +68 -2
  118. package/styles/tailwind.css +68 -2
@@ -14,6 +14,9 @@ export declare class Export {
14
14
  private toSVGImg;
15
15
  private toBlobFn;
16
16
  private exportToCanvas;
17
+ private drawAnnotation;
18
+ private downScaleImgCanvas;
19
+ private updateFrame;
17
20
  private downloadImg;
18
21
  private exportTransformedImage;
19
22
  private exportRotate;
@@ -39,6 +39,9 @@ var Export = /** @class */ (function () {
39
39
  case 'exportToCanvas':
40
40
  this.exportToCanvas(args.value['object']);
41
41
  break;
42
+ case 'drawAnnotation':
43
+ this.drawAnnotation(args.value['context'], args.value['ratio']);
44
+ break;
42
45
  }
43
46
  };
44
47
  Export.prototype.getModuleName = function () {
@@ -165,13 +168,31 @@ var Export = /** @class */ (function () {
165
168
  var parent = this.parent;
166
169
  var width;
167
170
  var height;
168
- if (parent.currSelectionPoint) {
171
+ if (this.parent.aspectWidth) {
172
+ if (!isBlazor()) {
173
+ parent.notify('toolbar', { prop: 'resizeClick', value: { bool: false } });
174
+ }
175
+ else {
176
+ parent.performResizeClick();
177
+ }
178
+ parent.currentToolbar = 'resize-toolbar';
179
+ parent.okBtn();
180
+ if (parent.transform.degree % 90 === 0 && parent.transform.degree % 180 !== 0) {
181
+ width = this.parent.aspectHeight;
182
+ height = this.parent.aspectWidth;
183
+ }
184
+ else {
185
+ width = this.parent.aspectWidth;
186
+ height = this.parent.aspectHeight;
187
+ }
188
+ }
189
+ else if (parent.currSelectionPoint) {
169
190
  width = parent.img.srcWidth;
170
191
  height = parent.img.srcHeight;
171
192
  }
172
193
  else {
173
- width = parent.baseImg.width;
174
- height = parent.baseImg.height;
194
+ width = parent.baseImgCanvas.width;
195
+ height = parent.baseImgCanvas.height;
175
196
  }
176
197
  var obj = { width: 0, height: 0 };
177
198
  parent.notify('crop', { prop: 'calcRatio', onPropertyChange: false,
@@ -199,16 +220,31 @@ var Export = /** @class */ (function () {
199
220
  tempCanvas.style.maxWidth = maxDimension.width + 'px';
200
221
  tempCanvas.style.maxHeight = maxDimension.height + 'px';
201
222
  var temp = this.lowerContext.filter;
202
- parent.notify('filter', { prop: 'updateBrightFilter', onPropertyChange: false });
203
223
  tempContext.filter = this.lowerContext.filter;
204
- tempContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
224
+ this.downScaleImgCanvas(tempContext, width, height);
225
+ this.updateFrame(tempContext);
205
226
  this.lowerContext.filter = temp;
206
227
  if (parent.transform.degree !== 0 || parent.transform.currFlipState !== '') {
207
228
  this.updateSaveContext(tempContext);
208
229
  this.exportTransformedImage(tempContext);
209
230
  }
231
+ this.drawAnnotation(tempContext, ratio);
232
+ if (parent.isCircleCrop) {
233
+ parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
234
+ value: { context: tempContext, isSave: true, isFlip: null } });
235
+ }
236
+ this.updateFrame(tempContext, true);
237
+ this.lowerContext.filter = tempContextFilter;
238
+ parent.canvasFilter = tempContextFilter;
239
+ if (object) {
240
+ object['canvas'] = tempCanvas;
241
+ }
242
+ return tempCanvas;
243
+ };
244
+ Export.prototype.drawAnnotation = function (tempContext, ratio) {
245
+ var parent = this.parent;
210
246
  if (parent.objColl.length > 0) {
211
- var temp_1 = tempContext.filter;
247
+ var temp = tempContext.filter;
212
248
  tempContext.filter = 'none';
213
249
  var tempObjColl = extend([], parent.objColl, [], true);
214
250
  for (var i = 0, len = parent.objColl.length; i < len; i++) {
@@ -239,10 +275,15 @@ var Export = /** @class */ (function () {
239
275
  (parent.objColl[i].pointColl[l].y - parent.img.destTop) * ratio.height;
240
276
  }
241
277
  }
278
+ else if (parent.objColl[i].shape === 'image') {
279
+ parent.activeObj = extend({}, parent.objColl[i], {}, true);
280
+ parent.notify('selection', { prop: 'upgradeImageQuality', onPropertyChange: false });
281
+ parent.objColl[i] = extend({}, parent.activeObj, {}, true);
282
+ }
242
283
  parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'saveContext', obj: parent.objColl[i], isCropRatio: null,
243
284
  points: null, isPreventDrag: true, saveContext: tempContext, isPreventSelection: null } });
244
285
  }
245
- tempContext.filter = temp_1;
286
+ tempContext.filter = temp;
246
287
  parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
247
288
  parent.objColl = tempObjColl;
248
289
  }
@@ -263,16 +304,35 @@ var Export = /** @class */ (function () {
263
304
  value: { context: tempContext, points: null } });
264
305
  parent.pointColl = tempPointColl;
265
306
  }
266
- if (parent.isCircleCrop) {
267
- parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
268
- value: { context: tempContext, isSave: true, isFlip: null } });
307
+ };
308
+ Export.prototype.downScaleImgCanvas = function (ctx, width, height) {
309
+ var parent = this.parent;
310
+ var canvas = parent.baseImgCanvas;
311
+ var img = parent.baseImg;
312
+ var obj = { width: 0, height: 0 };
313
+ parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
314
+ value: { width: img.width, height: img.height, obj: obj, isImgShape: null } });
315
+ if (obj['width'] > width && obj['height'] > height) {
316
+ var tempCanvas = parent.createElement('canvas', {
317
+ id: parent.element.id + '_downScaleCanvas', attrs: { name: 'canvasImage' }
318
+ });
319
+ tempCanvas.width = this.parent.img.srcWidth;
320
+ tempCanvas.height = this.parent.img.srcHeight;
321
+ tempCanvas.getContext('2d').drawImage(canvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, tempCanvas.width, tempCanvas.height);
322
+ parent.notify('draw', { prop: 'downScale', value: { canvas: tempCanvas, width: width, height: height } });
323
+ ctx.drawImage(tempCanvas, 0, 0);
269
324
  }
270
- this.lowerContext.filter = tempContextFilter;
271
- parent.canvasFilter = tempContextFilter;
272
- if (object) {
273
- object['canvas'] = tempCanvas;
325
+ else {
326
+ ctx.drawImage(parent.baseImgCanvas, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, 0, 0, width, height);
327
+ }
328
+ };
329
+ Export.prototype.updateFrame = function (tempContext, isAnnotation) {
330
+ if (this.parent.frameObj.type !== 'none') {
331
+ var temp = tempContext.filter;
332
+ tempContext.filter = 'none';
333
+ this.parent.notify('draw', { prop: 'applyFrame', value: { ctx: tempContext, frame: this.parent.frameObj.type, preventImg: isAnnotation } });
334
+ tempContext.filter = temp;
274
335
  }
275
- return tempCanvas;
276
336
  };
277
337
  Export.prototype.downloadImg = function (blob, fileName) {
278
338
  var a = document.createElement('a');
@@ -333,18 +393,22 @@ var Export = /** @class */ (function () {
333
393
  var newWidth;
334
394
  var newHeight;
335
395
  if (degree % 90 === 0 && degree % 180 !== 0) {
336
- newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
337
- newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
396
+ newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.height : this.parent.img.srcHeight;
397
+ newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.width : this.parent.img.srcWidth;
338
398
  }
339
399
  else if (degree % 180 === 0 || degree === 0) {
340
- newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.width : this.parent.img.srcWidth;
341
- newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImg.height : this.parent.img.srcHeight;
400
+ newWidth = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.width : this.parent.img.srcWidth;
401
+ newHeight = isNullOrUndefined(this.parent.currSelectionPoint) ? this.parent.baseImgCanvas.height : this.parent.img.srcHeight;
402
+ }
403
+ if (!isNullOrUndefined(this.parent.aspectWidth)) {
404
+ newWidth = this.parent.aspectWidth;
405
+ newHeight = this.parent.aspectHeight;
342
406
  }
343
407
  tempCanvas.width = newWidth;
344
408
  tempCanvas.height = newHeight;
345
409
  var obj = { width: 0, height: 0 };
346
410
  this.parent.notify('transform', { prop: 'calcMaxDimension', onPropertyChange: false,
347
- value: { width: newWidth, height: newHeight, obj: obj } });
411
+ value: { width: newWidth, height: newHeight, obj: obj, isImgShape: null } });
348
412
  var maxDimension = obj;
349
413
  tempCanvas.style.maxWidth = maxDimension.width + 'px';
350
414
  tempCanvas.style.maxHeight = maxDimension.height + 'px';
@@ -14,7 +14,6 @@ export declare class Filter {
14
14
  private filter;
15
15
  private updatePrivateVariables;
16
16
  getModuleName(): string;
17
- private updateBrightFilter;
18
17
  private reset;
19
18
  private updateFinetunes;
20
19
  private initFilter;
@@ -2,9 +2,9 @@ import { isNullOrUndefined, extend } from '@syncfusion/ej2-base';
2
2
  var Filter = /** @class */ (function () {
3
3
  function Filter(parent) {
4
4
  this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
5
- exposure: 0, sharpen: false, bw: false }; // for toolbar slider value
5
+ exposure: 0, transparency: 100, sharpen: false, bw: false }; // for toolbar slider value
6
6
  this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0,
7
- exposure: 0, sharpen: false, bw: false }; // for temp toolbar slider value
7
+ exposure: 0, transparency: 100, sharpen: false, bw: false }; // for temp toolbar slider value
8
8
  this.adjustmentValue = ''; // for internal slider value
9
9
  this.isBrightnessAdjusted = false;
10
10
  this.appliedFilter = '';
@@ -37,9 +37,6 @@ var Filter = /** @class */ (function () {
37
37
  case 'update-finetunes':
38
38
  this.updateFinetunes();
39
39
  break;
40
- case 'updateBrightFilter':
41
- this.updateBrightFilter();
42
- break;
43
40
  case 'set-adjustment':
44
41
  this.setAdjustment(args.value['operation']);
45
42
  break;
@@ -59,6 +56,12 @@ var Filter = /** @class */ (function () {
59
56
  this.getCurrentObj(args.value['object']);
60
57
  break;
61
58
  case 'getAdjustmentLevel':
59
+ if (isNullOrUndefined(this.parent.activeObj.imageTransparency)) {
60
+ this.adjustmentLevel.transparency = 100;
61
+ }
62
+ else {
63
+ this.adjustmentLevel.transparency = this.parent.activeObj.imageTransparency * 100;
64
+ }
62
65
  args.value['obj']['adjustmentLevel'] = this.adjustmentLevel;
63
66
  break;
64
67
  case 'setAdjustmentLevel':
@@ -96,19 +99,11 @@ var Filter = /** @class */ (function () {
96
99
  Filter.prototype.getModuleName = function () {
97
100
  return 'filter';
98
101
  };
99
- Filter.prototype.updateBrightFilter = function () {
100
- var splitWords = this.lowerContext.filter.split(' ');
101
- if (this.isBrightnessAdjusted && splitWords.length > 0 && !isNullOrUndefined(splitWords[4])) {
102
- var opacityValue = parseFloat(splitWords[4].split('(')[1]);
103
- splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
104
- this.lowerContext.filter = splitWords.join(' ');
105
- }
106
- };
107
102
  Filter.prototype.reset = function () {
108
103
  this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0,
109
- blur: 0, exposure: 0, sharpen: false, bw: false };
104
+ blur: 0, exposure: 0, transparency: 100, sharpen: false, bw: false };
110
105
  this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0,
111
- blur: 0, exposure: 0, sharpen: false, bw: false };
106
+ blur: 0, exposure: 0, transparency: 100, sharpen: false, bw: false };
112
107
  this.adjustmentValue = this.parent.getDefaultFilter();
113
108
  this.isBrightnessAdjusted = false;
114
109
  this.appliedFilter = '';
@@ -171,7 +166,6 @@ var Filter = /** @class */ (function () {
171
166
  brightnessValue = parseFloat(splitWords[0].split('(')[1]);
172
167
  }
173
168
  var brightness = this.getFilterValue(this.adjustmentLevel.brightness);
174
- var saturation = this.getFilterValue(this.adjustmentLevel.saturation);
175
169
  var excludedTypes = ['brightness', 'contrast', 'hue', 'saturation', 'exposure', 'opacity', 'blur'];
176
170
  if (excludedTypes.indexOf(type) === -1) {
177
171
  if (isNullOrUndefined(isPreview) && (this.adjustmentLevel.sharpen || this.adjustmentLevel.bw)) {
@@ -185,9 +179,6 @@ var Filter = /** @class */ (function () {
185
179
  parent.isUndoRedo = false;
186
180
  }
187
181
  }
188
- if (brightness !== 1) {
189
- splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
190
- }
191
182
  var saturate;
192
183
  var bright;
193
184
  var saturatePercent;
@@ -195,10 +186,16 @@ var Filter = /** @class */ (function () {
195
186
  var saturatePercentage;
196
187
  switch (type) {
197
188
  case 'brightness':
198
- if (parseFloat(splitWords[3].split('(')[1]) !== 100) {
199
- value += 0.1;
200
- }
189
+ value = this.getFilterValue(this.adjustmentLevel.exposure) + (value * 0.005);
201
190
  splitWords[0] = 'brightness(' + value + ')';
191
+ if (this.adjustmentLevel.brightness !== 0) {
192
+ value = (this.adjustmentLevel.opacity / 100) - (this.adjustmentLevel.opacity * 0.3) / 100;
193
+ splitWords[4] = 'opacity(' + value + ')';
194
+ }
195
+ else {
196
+ value = this.adjustmentLevel.opacity / 100;
197
+ splitWords[4] = 'opacity(' + value + ')';
198
+ }
202
199
  this.adjustmentValue = splitWords.join(' ');
203
200
  break;
204
201
  case 'contrast':
@@ -211,9 +208,6 @@ var Filter = /** @class */ (function () {
211
208
  break;
212
209
  case 'saturation':
213
210
  splitWords[3] = 'saturate(' + value + '%)';
214
- if (saturation !== 1) {
215
- splitWords[0] = 'brightness(' + (brightnessValue + 0.09) + ')';
216
- }
217
211
  this.adjustmentValue = splitWords.join(' ');
218
212
  break;
219
213
  case 'opacity':
@@ -221,6 +215,7 @@ var Filter = /** @class */ (function () {
221
215
  value -= 0.2;
222
216
  }
223
217
  splitWords[4] = 'opacity(' + value + ')';
218
+ opacityValue = value;
224
219
  this.adjustmentValue = splitWords.join(' ');
225
220
  break;
226
221
  case 'blur':
@@ -228,9 +223,6 @@ var Filter = /** @class */ (function () {
228
223
  this.adjustmentValue = splitWords.join(' ');
229
224
  break;
230
225
  case 'exposure':
231
- if (brightness !== 1) {
232
- splitWords[4] = 'opacity(' + (opacityValue - 0.3) + ')';
233
- }
234
226
  if (value > 1) {
235
227
  value -= 1;
236
228
  value += brightness;
@@ -346,19 +338,10 @@ var Filter = /** @class */ (function () {
346
338
  parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
347
339
  value: { type: 'initial', isPreventDestination: null, isRotatePan: null } });
348
340
  this.appliedFilter = this.lowerContext.filter;
349
- this.lowerContext.drawImage(parent.baseImg, parent.img.srcLeft, parent.img.srcTop, parent.img.srcWidth, parent.img.srcHeight, parent.img.destLeft, parent.img.destTop, parent.img.destWidth, parent.img.destHeight);
341
+ parent.notify('draw', { prop: 'drawImage', onPropertyChange: false });
350
342
  parent.notify('draw', { prop: 'updateCurrTransState', onPropertyChange: false,
351
343
  value: { type: 'reverse', isPreventDestination: null, isRotatePan: null } });
352
344
  parent.notify('draw', { prop: 'setRotateZoom', onPropertyChange: false, value: { isRotateZoom: false } });
353
- if (brightness !== 1) {
354
- splitWords[4] = 'opacity(' + opacityValue + ')';
355
- }
356
- else if (saturation !== 1) {
357
- splitWords[0] = 'brightness(' + brightnessValue + ')';
358
- }
359
- if ((type === 'exposure' && brightness !== 1) || (type === 'saturation' && saturation !== 1)) {
360
- splitWords[0] = 'brightness(' + brightnessValue + ')';
361
- }
362
345
  splitWords = this.setTempFilterValue(brightness, isPreview, splitWords, type);
363
346
  if (isNullOrUndefined(isPreview)) {
364
347
  this.lowerContext.filter = splitWords.join(' ');
@@ -422,7 +405,6 @@ var Filter = /** @class */ (function () {
422
405
  parent.notify('freehand-draw', { prop: 'apply-pen-draw', onPropertyChange: false });
423
406
  this.adjustmentLevel["" + type] = value;
424
407
  switch (type) {
425
- case 'brightness':
426
408
  case 'contrast':
427
409
  case 'exposure':
428
410
  value = this.getFilterValue(value);
@@ -663,8 +645,9 @@ var Filter = /** @class */ (function () {
663
645
  var obj = { cropZoom: 0, defaultZoom: 0, totalPannedPoint: { x: 0, y: 0 }, totalPannedClientPoint: { x: 0, y: 0 },
664
646
  totalPannedInternalPoint: { x: 0, y: 0 }, tempFlipPanPoint: { x: 0, y: 0 }, activeObj: {},
665
647
  rotateFlipColl: [], degree: 0, currFlipState: '', zoomFactor: 0, previousZoomValue: 0,
666
- destPoints: { startX: 0, startY: 0, width: 0, height: 0 },
667
- srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: this.isBrightnessAdjusted };
648
+ destPoints: { startX: 0, startY: 0, width: 0, height: 0 }, frame: 'none',
649
+ srcPoints: { startX: 0, startY: 0, width: 0, height: 0 }, filter: '', isBrightAdjust: this.isBrightnessAdjusted,
650
+ aspectWidth: null, aspectHeight: null };
668
651
  obj.cropZoom = parent.transform.cropZoomFactor;
669
652
  obj.defaultZoom = parent.transform.defaultZoomFactor;
670
653
  obj.zoomFactor = parent.zoomSettings.zoomFactor;
@@ -682,6 +665,10 @@ var Filter = /** @class */ (function () {
682
665
  obj.srcPoints = { startX: parent.img.srcLeft, startY: parent.img.srcTop, endX: 0, endY: 0,
683
666
  width: parent.img.srcWidth, height: parent.img.srcHeight };
684
667
  obj.filter = this.lowerContext.filter;
668
+ obj.aspectWidth = parent.aspectWidth;
669
+ obj.aspectHeight = parent.aspectHeight;
670
+ obj.frame = parent.frameObj.type;
671
+ obj.frameObj = extend({}, parent.frameObj);
685
672
  if (dummyObj) {
686
673
  dummyObj['currObj'] = obj;
687
674
  }
@@ -508,39 +508,45 @@ var FreehandDrawing = /** @class */ (function () {
508
508
  parent.pointColl[parent.freehandCounter].flipState = parent.transform.currFlipState;
509
509
  parent.freehandCounter++;
510
510
  }
511
- for (var n = 0; n < parent.freehandCounter; n++) {
512
- parent.points = extend([], parent.pointColl[n].points);
513
- this.pointCounter = 0;
514
- var len = parent.points.length;
515
- var controlPoint1 = void 0;
516
- var controlPoint2 = void 0;
517
- var startPoint = void 0;
518
- var endPoint = void 0;
519
- var minStrokeWidth = void 0;
520
- var maxStrokeWidth = void 0;
521
- if (len > 0) {
522
- context.fillStyle = parent.pointColl[n].strokeColor;
523
- minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = parent.pointColl[n].strokeWidth;
524
- }
525
- if (len === 1) {
526
- controlPoint1 = controlPoint2 = startPoint = endPoint = parent.points[0];
527
- this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
528
- }
529
- for (var l = 0; l < len - 3; l++) {
530
- if (parent.points[l + 1] && parent.points[l + 2] && parent.points[l + 2]) {
531
- controlPoint1 = (this.calcCurveCP(parent.points[l + 0], parent.points[l + 1], parent.points[l + 2])).controlPoint2;
532
- controlPoint2 = (this.calcCurveCP(parent.points[l + 1], parent.points[l + 2], parent.points[l + 3])).controlPoint1;
533
- if (l === 0) {
534
- startPoint = parent.points[l];
535
- }
536
- else {
537
- startPoint = parent.points[l + 1];
538
- }
539
- endPoint = parent.points[l + 2];
511
+ if (parent.freehandCounter > 0) {
512
+ for (var n = 0; n < parent.freehandCounter; n++) {
513
+ parent.points = extend([], parent.pointColl[n].points);
514
+ this.pointCounter = 0;
515
+ var len = parent.points.length;
516
+ var controlPoint1 = void 0;
517
+ var controlPoint2 = void 0;
518
+ var startPoint = void 0;
519
+ var endPoint = void 0;
520
+ var minStrokeWidth = void 0;
521
+ var maxStrokeWidth = void 0;
522
+ if (len > 0) {
523
+ context.fillStyle = parent.pointColl[n].strokeColor;
524
+ minStrokeWidth = maxStrokeWidth = this.penStrokeWidth = parent.pointColl[n].strokeWidth;
525
+ }
526
+ if (len === 1) {
527
+ controlPoint1 = controlPoint2 = startPoint = endPoint = parent.points[0];
540
528
  this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
541
529
  }
530
+ for (var l = 0; l < len - 3; l++) {
531
+ if (parent.points[l + 1] && parent.points[l + 2] && parent.points[l + 2]) {
532
+ controlPoint1 = (this.calcCurveCP(parent.points[l + 0], parent.points[l + 1], parent.points[l + 2])).controlPoint2;
533
+ controlPoint2 = (this.calcCurveCP(parent.points[l + 1], parent.points[l + 2], parent.points[l + 3])).controlPoint1;
534
+ if (l === 0) {
535
+ startPoint = parent.points[l];
536
+ }
537
+ else {
538
+ startPoint = parent.points[l + 1];
539
+ }
540
+ endPoint = parent.points[l + 2];
541
+ this.startDraw(context, controlPoint1, controlPoint2, startPoint, endPoint, minStrokeWidth, maxStrokeWidth);
542
+ }
543
+ }
544
+ context.closePath();
545
+ }
546
+ if (context !== this.upperContext) {
547
+ parent.notify('draw', { prop: 'applyFrame', value: { ctx: this.lowerContext, frame: parent.frameObj.type, preventImg: true } });
548
+ this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
542
549
  }
543
- context.closePath();
544
550
  }
545
551
  context.filter = temp;
546
552
  };
@@ -626,6 +632,9 @@ var FreehandDrawing = /** @class */ (function () {
626
632
  if (!isBlazor()) {
627
633
  parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
628
634
  }
635
+ else {
636
+ parent.updateToolbar(parent.element, 'imageLoaded');
637
+ }
629
638
  };
630
639
  FreehandDrawing.prototype.selectFhd = function (index) {
631
640
  var _this = this;
@@ -668,7 +677,8 @@ var FreehandDrawing = /** @class */ (function () {
668
677
  shapeChangingArgs.currentShapeSettings.strokeWidth;
669
678
  parent.pointColl[_this.fhdSelIdx].points = shapeChangingArgs.currentShapeSettings.points;
670
679
  _this.freehandRedraw(_this.upperContext);
671
- parent.updateToolbar(parent.element, 'colorToolbar');
680
+ parent.updateToolbar(parent.element, 'imageLoaded');
681
+ parent.updateToolbar(parent.element, 'pen');
672
682
  });
673
683
  }
674
684
  else {
@@ -719,7 +729,7 @@ var FreehandDrawing = /** @class */ (function () {
719
729
  parent.freehandCounter -= 1;
720
730
  this.fhdHovIdx = this.fhdSelIdx = null;
721
731
  parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
722
- parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
732
+ parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: null } });
723
733
  if (!isBlazor()) {
724
734
  parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
725
735
  }
@@ -40,6 +40,7 @@ export declare class Selection {
40
40
  private shapeResizingArgs;
41
41
  private shapeMovingArgs;
42
42
  private selectionResizingArgs;
43
+ private isImageClarity;
43
44
  constructor(parent: ImageEditor);
44
45
  destroy(): void;
45
46
  private addEventListener;
@@ -69,6 +70,7 @@ export declare class Selection {
69
70
  private preventTextDraggingInvertly;
70
71
  private preventInverseResize;
71
72
  private getScaleRatio;
73
+ private findImageRatio;
72
74
  private updateNWPoints;
73
75
  private updateNPoints;
74
76
  private updateNEPoints;
@@ -77,6 +79,7 @@ export declare class Selection {
77
79
  private updateSWPoints;
78
80
  private updateSPoints;
79
81
  private updateSEPoints;
82
+ private resizeImg;
80
83
  private adjustNWPoints;
81
84
  private adjustNEPoints;
82
85
  private adjustSWPoints;
@@ -111,6 +114,7 @@ export declare class Selection {
111
114
  private touchStartHandler;
112
115
  private unwireEvent;
113
116
  private keyDownEventHandler;
117
+ private performEnterAction;
114
118
  private isKeyBoardCrop;
115
119
  private beforeSaveEvent;
116
120
  private handleScroll;
@@ -122,6 +126,7 @@ export declare class Selection {
122
126
  private findTarget;
123
127
  private findTargetObj;
124
128
  private shapeEvent;
129
+ private upgradeImageQuality;
125
130
  private targetTouches;
126
131
  private calculateScale;
127
132
  private getDistance;
@@ -137,4 +142,5 @@ export declare class Selection {
137
142
  private updatePrevShapeSettings;
138
143
  private getRectanglePoints;
139
144
  private getTransRotationPoint;
145
+ private getNumTextValue;
140
146
  }