| 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
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215 | 1×
1×
1×
1×
324×
324×
324×
324×
324×
324×
324×
324×
324×
324×
1×
616×
308×
308×
1×
324×
324×
1×
308×
308×
1×
24055×
24055×
24055×
24055×
1×
24055×
24055×
5596×
5596×
969×
969×
2×
2×
2×
2×
34×
34×
31×
31×
184×
184×
204×
204×
6660×
6660×
6650×
6650×
2×
2×
33×
33×
6×
6×
156×
7×
149×
156×
3079×
3079×
10×
10×
431×
431×
1×
6550×
1×
431×
431×
431×
431×
431×
431×
431×
431×
431×
1×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
1×
969×
969×
120×
849×
849×
824×
824×
824×
824×
824×
824×
323×
197×
197×
197×
197×
197×
501×
495×
495×
495×
495×
495×
495×
824×
698×
692×
692×
692×
692×
692×
692×
692×
692×
698×
698×
694×
824×
824×
25×
849×
849×
849×
1×
848×
510×
83×
427×
14×
14×
14×
849×
849×
849×
824×
824×
849×
60×
60×
1×
950×
950×
950×
950×
950×
1×
60×
60×
1×
69×
69×
69×
69×
69×
69×
69×
2×
2×
2×
2×
2×
2×
1×
60×
60×
60×
1×
4×
4×
4×
4×
4×
4×
4×
4×
4×
1×
2×
2×
1×
2×
2×
1×
36×
36×
36×
36×
36×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
31×
5×
5×
5×
31×
13×
13×
5×
5×
5×
5×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
3×
3×
3×
3×
31×
3×
1×
1×
1×
3×
3×
3×
3×
3×
3×
3×
3×
3×
28×
31×
31×
31×
31×
1×
33×
33×
33×
33×
33×
29×
29×
29×
29×
29×
29×
20×
9×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
29×
12×
12×
4×
4×
4×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
3×
29×
29×
3×
29×
3×
3×
29×
29×
29×
29×
29×
1×
4×
4×
4×
4×
4×
4×
4×
2×
2×
1×
1×
2×
2×
2×
2×
1×
1×
2×
4×
1×
31×
31×
31×
27×
27×
31×
31×
31×
31×
31×
31×
1×
9×
9×
9×
9×
9×
9×
9×
9×
9×
1×
2×
2×
2×
2×
2×
2×
2×
2×
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
1×
2×
2×
2×
2×
2×
2×
2×
1×
2×
2×
2×
2×
2×
2×
2×
1×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
2×
1×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
36×
1×
60×
60×
60×
60×
60×
60×
2×
60×
60×
60×
60×
60×
60×
60×
60×
3×
60×
60×
1×
5800×
5800×
44×
5756×
5756×
2×
5756×
5756×
676×
676×
676×
676×
676×
676×
676×
676×
676×
676×
119×
557×
27×
27×
27×
19×
530×
3×
3×
3×
3×
3×
3×
3×
3×
3×
676×
676×
1×
184×
184×
182×
1×
182×
132×
182×
182×
182×
182×
182×
182×
182×
182×
182×
182×
182×
182×
182×
182×
1×
204×
204×
204×
204×
204×
204×
204×
204×
204×
204×
204×
204×
109×
204×
204×
204×
204×
204×
204×
204×
204×
1×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
692×
56×
51×
80×
80×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
56×
34×
56×
56×
692×
1×
692×
692×
748×
748×
748×
86×
41×
41×
86×
46×
46×
86×
47×
47×
47×
47×
47×
1×
56×
56×
56×
80×
56×
1×
156×
156×
128×
128×
128×
128×
128×
128×
7×
7×
7×
7×
7×
7×
1×
1×
6×
7×
121×
121×
121×
121×
121×
121×
121×
121×
10×
128×
128×
128×
128×
128×
128×
1×
1×
| define(["require", "exports", "@syncfusion/ej2-base"], function (require, exports, ej2_base_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var UndoRedo = (function () {
function UndoRedo(parent) {
this.undoRedoStep = 0;
this.undoRedoColl = [];
this.appliedUndoRedoColl = [];
this.tempUndoRedoColl = [];
this.tempUndoRedoStep = 0;
this.isPreventing = false;
this.preventEditComplete = false;
this.preventApplyEditComplete = false;
this.parent = parent;
this.addEventListener();
}
UndoRedo.prototype.destroy = function () {
if (this.parent.isDestroyed) {
return;
}
this.removeEventListener();
};
UndoRedo.prototype.addEventListener = function () {
this.parent.on('undo-redo', this.undoRedo, this);
this.parent.on('destroyed', this.destroy, this);
};
UndoRedo.prototype.removeEventListener = function () {
this.parent.off('undo-redo', this.undoRedo);
this.parent.off('destroyed', this.destroy);
};
UndoRedo.prototype.initializeUrPvtProp = function () {
Eif (this.parent.lowerCanvas) {
this.lowerContext = this.parent.lowerCanvas.getContext('2d');
}
Eif (this.parent.upperCanvas) {
this.upperContext = this.parent.upperCanvas.getContext('2d');
}
};
UndoRedo.prototype.undoRedo = function (args) {
this.initializeUrPvtProp();
switch (args.prop) {
case 'updateUndoRedoColl':
this.updateUrc(args.value['operation'], args.value['previousObj'], args.value['previousObjColl'], args.value['previousPointColl'], args.value['previousSelPointColl'], args.value['previousCropObj'], args.value['previousText'], args.value['currentText'], args.value['previousFilter'], args.value['isCircleCrop']);
break;
case 'refreshUrc':
this.refreshUrc(args.value['bool']);
break;
case 'updateCurrUrc':
this.updateCurrUrc(args.value['type'], args.value['isCancel']);
break;
case 'call-undo':
this.callUndo();
break;
case 'call-redo':
this.callRedo();
break;
case 'undo':
this.undo();
break;
case 'redo':
this.redo();
break;
case 'updateUrObj':
this.updateUrObj(args.value['objColl'], args.value['operation']);
break;
case 'updateUndoRedo':
this.updateUndoRedo(args.value ? args.value['operation'] : null);
break;
case 'getAppliedUndoRedoColl':
args.value['obj']['appliedUndoRedoColl'] = this.appliedUndoRedoColl;
break;
case 'getUndoRedoStep':
args.value['obj']['undoRedoStep'] = this.undoRedoStep;
break;
case 'setUndoRedoStep':
this.undoRedoStep = args.value['step'];
break;
case 'undoDefault':
this.undoDefault(args.value['obj']);
break;
case 'setPreventUR':
this.isPreventing = args.value['bool'];
break;
case 'updateUndoRedoStack':
if (args.value && args.value['isPenDraw']) {
this.updateUndoRedoStack(args.value['isPenDraw']);
}
else {
this.updateUndoRedoStack();
}
break;
case 'preventEditComplete':
args.value['obj']['bool'] = this.preventEditComplete;
break;
case 'preventApplyEditComplete':
this.preventApplyEditComplete = args.value['bool'];
break;
case 'reset':
this.reset();
break;
}
};
UndoRedo.prototype.getModuleName = function () {
return 'undo-redo';
};
UndoRedo.prototype.reset = function () {
this.tempCurrSelPoint = null;
this.undoRedoStep = 0;
this.undoRedoColl = [];
this.appliedUndoRedoColl = [];
this.tempActObj = null;
this.tempUndoRedoColl = [];
this.tempUndoRedoStep = 0;
this.isPreventing = false;
this.preventEditComplete = this.preventApplyEditComplete = false;
};
UndoRedo.prototype.refreshUrc = function (refreshToolbar) {
var parent = this.parent;
Iif (parent.isImageUpdated) {
return;
}
refreshToolbar = refreshToolbar ? refreshToolbar : false;
Eif (refreshToolbar) {
parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: true } });
this.tempUndoRedoColl = ej2_base_1.extend([], this.appliedUndoRedoColl, [], true);
this.tempUndoRedoStep = this.undoRedoStep;
}
parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
this.undoRedoColl = this.undoRedoColl.slice(0, this.undoRedoStep);
this.appliedUndoRedoColl = this.appliedUndoRedoColl.slice(0, this.undoRedoStep);
parent.isUndoRedo = parent.currObjType.isUndoAction = false;
parent.notify('toolbar', { prop: 'enable-disable-btns' });
};
UndoRedo.prototype.updateCurrUrc = function (type, isCancel) {
var parent = this.parent;
if (parent.isResize || this.isPreventing || parent.noPushUndo) {
return;
}
parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
if (type === 'ok') {
parent.notify('draw', { prop: 'setShapeTextInsert', onPropertyChange: false, value: { bool: false } });
var collection = this.tempUndoRedoColl.length > 0 ?
ej2_base_1.extend([], this.tempUndoRedoColl, [], true) :
ej2_base_1.extend([], this.undoRedoColl, [], true);
var prevObj = this.undoRedoColl[this.undoRedoColl.length - 1];
var appliedURColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
var prevTransform = prevObj ? ej2_base_1.extend({}, prevObj.previousObj, {}, true)
: null;
if (ej2_base_1.isNullOrUndefined(appliedURColl)) {
if (this.undoRedoColl[0]) {
prevObj.previousCropObj = collection[0].previousCropObj;
prevObj.previousObj = collection[0].previousObj;
prevObj.previousObjColl = collection[0].previousObjColl;
prevObj.previousPointColl = collection[0].previousPointColl;
prevObj.previousText = collection[0].previousText;
}
}
else if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
prevObj.previousCropObj = appliedURColl.currentCropObj;
prevObj.previousObj = appliedURColl.currentObj;
prevObj.previousObjColl = appliedURColl.currentObjColl;
prevObj.previousPointColl = appliedURColl.currentPointColl;
prevObj.previousText = appliedURColl.currentText;
Iif (prevObj.operation === 'frame' && prevObj.previousObj && prevTransform) {
prevObj.previousObj.defaultZoom = prevTransform.defaultZoom;
prevObj.previousObj.zoomFactor = prevTransform.zoomFactor;
prevObj.previousObj.cropZoom = prevTransform.cropZoom;
}
}
if (prevObj) {
if (prevObj.operation !== 'imageHFlip' && prevObj.operation !== 'imageVFlip') {
var obj = this.getZeroZoomObjPointValue(prevObj.currentObjColl, prevObj.currentPointColl);
prevObj.currentObjColl = obj['obj'];
prevObj.currentPointColl = obj['point'];
var adjObj = { adjustmentLevel: null };
parent.notify('filter', { prop: 'getAdjustmentLevel', onPropertyChange: false, value: { obj: adjObj } });
prevObj.currentObj.adjustmentLevel = ej2_base_1.extend({}, adjObj['adjustmentLevel'], {}, true);
parent.notify('filter', { prop: 'setTempAdjVal' });
prevObj.currentObj.currentFilter = parent.currentFilter;
}
this.appliedUndoRedoColl.push(prevObj);
if (!isCancel) {
this.triggerActionCompletedEvent(prevObj.operation);
}
}
this.tempUndoRedoColl = [];
this.tempUndoRedoStep = 0;
}
else Iif (this.tempUndoRedoColl.length > 0) {
this.appliedUndoRedoColl = ej2_base_1.extend([], this.tempUndoRedoColl, [], true);
this.undoRedoStep = this.tempUndoRedoStep;
this.tempUndoRedoColl = [];
this.tempUndoRedoStep = 0;
}
var lastObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
var lastPrevObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 2];
if (this.appliedUndoRedoColl.length > 16) {
this.appliedUndoRedoColl.splice(0, 1);
}
else if (!isCancel && lastObj && lastPrevObj) {
if ((((lastObj.operation === 'shapeTransform' && lastPrevObj.operation === 'shapeTransform') ||
(lastObj.operation === 'shapeInsert' && lastPrevObj.operation === 'shapeInsert')) &&
JSON.stringify(lastObj.currentObjColl) === JSON.stringify(lastPrevObj.currentObjColl)) ||
(lastObj.operation === 'freehand-draw' && lastPrevObj.operation === 'freehand-draw' &&
JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl)) ||
(lastObj.operation === 'freehanddrawCustomized' && lastPrevObj.operation === 'freehanddrawCustomized' &&
JSON.stringify(lastObj.currentPointColl) === JSON.stringify(lastPrevObj.currentPointColl))) {
this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
}
else if (this.undoRedoStep !== this.appliedUndoRedoColl.length - 1) {
lastObj = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1];
lastPrevObj = this.appliedUndoRedoColl[this.undoRedoStep];
Iif (lastObj && lastPrevObj && lastObj.operation === 'shapeTransform' &&
lastPrevObj.operation === 'shapeTransform' &&
JSON.stringify(lastObj.currentObjColl) === JSON.stringify(lastPrevObj.previousObjColl)) {
this.appliedUndoRedoColl.splice(this.appliedUndoRedoColl.length - 1, 1);
this.undoRedoColl = [];
this.undoRedoColl = ej2_base_1.extend([], this.appliedUndoRedoColl, [], true);
return;
}
}
}
this.undoRedoColl = [];
this.undoRedoColl = ej2_base_1.extend([], this.appliedUndoRedoColl, [], true);
if (type === 'ok') {
this.undoRedoStep = this.undoRedoColl.length;
parent.notify('toolbar', { prop: 'enable-disable-btns' });
}
if (parent.transform.zoomFactor > 0) {
parent.togglePan = true;
parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
}
};
UndoRedo.prototype.triggerActionCompletedEvent = function (action) {
var parent = this.parent;
var actionMap = { 'brightness': 'fine-tune', 'contrast': 'fine-tune', 'hue': 'fine-tune',
'saturation': 'fine-tune', 'opacity': 'fine-tune', 'blur': 'fine-tune', 'exposure': 'fine-tune',
'default': 'filter', 'chrome': 'filter', 'cold': 'filter', 'warm': 'filter',
'grayscale': 'filter', 'sepia': 'filter', 'invert': 'filter',
'deleteObj': 'shape-delete', 'deleteFreehandDrawing': 'freehand-draw-delete',
'shapeInsert': 'shape-insert', 'shapeTransform': 'shape-customize',
'freehanddrawCustomized': 'freehand-draw-customize'
};
var actionResult = actionMap[action] || action;
var actionArgs = { action: actionResult, actionEventArgs: parent.editCompleteArgs };
parent.triggerEditCompleteEvent(actionArgs);
};
UndoRedo.prototype.getUndoRedoAction = function (action) {
var actionMap = { 'brightness': 'fine-tune', 'contrast': 'fine-tune', 'hue': 'fine-tune',
'saturation': 'fine-tune', 'opacity': 'fine-tune', 'blur': 'fine-tune', 'exposure': 'fine-tune',
'default': 'filter', 'chrome': 'filter', 'cold': 'filter', 'warm': 'filter',
'grayscale': 'filter', 'sepia': 'filter', 'invert': 'filter',
'deleteObj': 'shape-delete', 'deleteFreehandDrawing': 'freehand-drawing-delete',
'shapeInsert': 'shape-insert', 'shapeTransform': 'shape-customize', 'imageRotate': 'shape-customize',
'freehanddraw': 'freehand-draw', 'freehanddrawCustomized': 'freehand-draw-customize',
'textAreaCustomization': 'text-area-customization', 'imageHFlip': 'shape-customize',
'imageVFlip': 'shape-customize', 'bgColor': 'background-color', 'updateImage': 'image-update'
};
return actionMap[action] || action;
};
UndoRedo.prototype.cancelCropSelection = function () {
var parent = this.parent;
var isCropSelection = false;
var splitWords;
Iif (parent.activeObj.shape) {
splitWords = parent.activeObj.shape.split('-');
}
Iif (parent.currObjType.isCustomCrop || (splitWords && splitWords[0] === 'crop')) {
isCropSelection = true;
}
Iif (isCropSelection) {
parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null } });
}
if (this.tempUndoRedoColl.length !== 0 || this.tempUndoRedoStep !== 0) {
this.appliedUndoRedoColl = ej2_base_1.extend([], this.tempUndoRedoColl, [], true);
this.undoRedoColl = ej2_base_1.extend([], this.tempUndoRedoColl, [], true);
this.undoRedoStep = this.tempUndoRedoStep;
this.tempUndoRedoColl = [];
this.tempUndoRedoStep = 0;
parent.notify('toolbar', { prop: 'setEnableDisableUndoRedo', value: { isPrevent: false } });
}
};
UndoRedo.prototype.refreshToolbarActions = function () {
var parent = this.parent;
Iif (parent.activeObj.shape) {
parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
parent.notify('toolbar', { prop: 'update-toolbar-items', onPropertyChange: false });
}
else {
parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
}
};
UndoRedo.prototype.applyCurrentChanges = function () {
var parent = this.parent;
parent.currObjType.isFiltered = false;
Eif (parent.transform.zoomFactor === 0) {
parent.togglePan = false;
parent.notify('selection', { prop: 'setDragCanvas', value: { bool: false } });
}
Eif (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
}
Iif (parent.togglePen) {
parent.togglePen = false;
parent.upperCanvas.style.cursor = parent.cursor = 'default';
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
}
Iif (this.appliedUndoRedoColl.length > 0) {
this.undoRedoColl = ej2_base_1.extend([], this.appliedUndoRedoColl, [], true);
}
};
UndoRedo.prototype.callUndo = function () {
this.applyCurrentChanges();
this.undo();
};
UndoRedo.prototype.callRedo = function () {
this.applyCurrentChanges();
this.redo();
};
UndoRedo.prototype.undo = function () {
var parent = this.parent;
this.cancelCropSelection();
parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: false } });
Eif (!parent.disabled && parent.isImageLoaded) {
if (this.undoRedoStep > 0) {
this.refreshToolbarActions();
Iif (parent.activeObj.activePoint && parent.activeObj.activePoint.width !== 0) {
this.tempActObj = parent.activeObj;
}
parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
this.undoRedoStep--;
parent.notify('toolbar', { prop: 'enable-disable-btns' });
Eif (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
}
parent.isUndoRedo = true;
var obj = this.undoRedoColl[this.undoRedoStep];
Iif (this.undoRedoColl.length === this.undoRedoStep) {
parent.currObjType.isUndoAction = false;
}
else {
parent.currObjType.isUndoAction = true;
}
Iif (obj.operation !== 'textAreaCustomization' &&
(parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
parent.textArea.style.display = 'none';
}
parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: true } });
var activeObj = void 0;
parent.cropObj = ej2_base_1.extend({}, obj.previousCropObj, {}, true);
parent.afterCropActions = obj.previousObj.afterCropActions;
this.lowerContext.filter = obj.previousObj.filter;
parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.previousObj.adjustmentLevel } });
parent.notify('filter', { prop: 'setTempAdjVal' });
parent.currentFilter = obj.previousObj.currentFilter;
parent.notify('filter', { prop: 'setTempFilVal' });
parent.canvasFilter = this.lowerContext.filter;
parent.initialAdjustmentValue = this.lowerContext.filter;
parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
var editCompleteArgs = { action: this.getUndoRedoAction(obj.operation) };
var isSelected = void 0;
if (obj.operation === 'freehanddraw' || obj.operation === 'freehand-draw') {
var object = { isSelected: null };
parent.notify('freehand-draw', { prop: 'getFHDSelected', onPropertyChange: false, value: { obj: object } });
isSelected = object['isSelected'];
}
switch (obj.operation) {
case 'shapeTransform':
case 'brightness':
case 'contrast':
case 'hue':
case 'saturation':
case 'opacity':
case 'blur':
case 'exposure':
case 'default':
case 'chrome':
case 'cold':
case 'warm':
case 'grayscale':
case 'blackandwhite':
case 'sepia':
case 'invert':
case 'sharpen':
case 'imageRotate':
case 'shapeInsert':
this.shapeTransform(obj.previousObjColl, obj.previousPointColl);
break;
case 'freehanddraw':
case 'freehand-draw':
this.updateFreehandDraw(obj.previousPointColl, obj.previousSelPointColl);
parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
value: { value: parent.pointColl.length } });
Iif (isSelected) {
parent.notify('freehand-draw', { prop: 'resetFHDIdx' });
parent.notify('selection', { prop: 'resetFreehandDrawVariables' });
}
break;
case 'freehanddrawCustomized':
this.updateFreehandDrawCustomized(obj.previousObjColl, obj.previousPointColl);
break;
case 'deleteFreehandDrawing':
case 'deleteObj':
this.updateDelete(obj.operation, obj.previousObjColl, obj.previousPointColl, obj.previousSelPointColl);
break;
case 'textAreaCustomization':
this.shapeTransform(obj.previousObjColl, obj.previousPointColl);
this.updateTextAreaCustomization(activeObj, obj.previousObjColl);
break;
case 'text':
this.updateText(obj.previousObjColl, true);
break;
case 'frame':
parent.transform.zoomFactor = parent.transform.defaultZoomFactor = obj.previousObj.defaultZoom;
parent.setProperties({ zoomSettings: { zoomFactor: obj.previousObj.zoomFactor } }, true);
parent.notify('transform', { prop: 'setPreviousZoomValue', onPropertyChange: false,
value: { previousZoomValue: parent.zoomSettings.zoomFactor } });
ej2_base_1.extend(parent.frameObj, obj.previousObj.frameObj);
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true, isPreventClearRect: null, isFrame: true } });
break;
case 'imageHFlip':
this.imageFlip('horizontal', obj.previousObjColl);
break;
case 'imageVFlip':
this.imageFlip('vertical', obj.previousObjColl);
break;
case 'bgColor':
parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: obj.previousObj.bgColor } });
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
break;
case 'updateImage':
parent.isImageUpdated = true;
parent.baseImg.src = obj.previousObj.imageSource;
setTimeout(function () {
Eif (parent.cropObj.straighten !== 0) {
parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
parent.noPushUndo = true;
parent.crop();
parent.noPushUndo = false;
}
else {
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
}
parent.isImageUpdated = false;
});
break;
default:
this.undoDefault(obj, true);
parent.notify('filter', { prop: 'set-adjustment', value: { operation: obj.operation } });
parent.notify('filter', { prop: 'update-filter', value: { operation: obj.operation, filter: obj.filter } });
break;
}
if (obj.operation === 'crop') {
if (obj.previousObj.currSelectionPoint) {
parent.currSelectionPoint = ej2_base_1.extend({}, obj.previousObj.currSelectionPoint, {}, true);
Eif (parent.currSelectionPoint && ej2_base_1.isNullOrUndefined(parent.currSelectionPoint.shape)) {
parent.currSelectionPoint = null;
}
}
parent.updateCropTransformItems();
parent.notify('draw', { prop: 'select', onPropertyChange: false,
value: { type: 'custom', startX: null, startY: null, width: null, height: null } });
Iif (parent.isCircleCrop) {
parent.isCircleCrop = false;
this.tempCurrSelPoint = ej2_base_1.extend({}, parent.currSelectionPoint, {}, true);
parent.currSelectionPoint = null;
}
var tempCircleCrop = parent.cancelCropSelection.isCircleCrop;
parent.cancelCropSelection.isCircleCrop = false;
parent.notify('draw', { prop: 'performCancel', value: { isContextualToolbar: null, isUndoRedo: true } });
parent.cancelCropSelection.isCircleCrop = tempCircleCrop;
parent.currObjType.isActiveObj = false;
Iif (parent.transform.straighten !== 0) {
parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: null } });
}
}
else Iif (obj.operation === 'resize' && parent.cropObj && parent.cropObj.activeObj) {
parent.currSelectionPoint = ej2_base_1.extend({}, parent.cropObj.activeObj, {}, true);
}
Iif ((this.undoRedoColl[this.undoRedoStep - 1]
&& this.undoRedoColl[this.undoRedoStep - 1].isCircleCrop)) {
parent.isCircleCrop = true;
parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
value: { context: this.lowerContext, isSave: null, isFlip: null } });
}
this.endUndoRedo(obj.operation, true);
var action = { action: 'undo', actionEventArgs: editCompleteArgs };
parent.triggerEditCompleteEvent(action);
}
}
};
UndoRedo.prototype.redo = function () {
var parent = this.parent;
this.cancelCropSelection();
parent.notify('draw', { prop: 'resetFrameZoom', onPropertyChange: false, value: { isOk: false } });
Eif (!parent.disabled && parent.isImageLoaded) {
if (this.undoRedoStep < this.appliedUndoRedoColl.length) {
this.refreshToolbarActions();
this.undoRedoStep++;
parent.notify('toolbar', { prop: 'enable-disable-btns' });
parent.isUndoRedo = true;
var obj = this.undoRedoColl[this.undoRedoStep - 1];
if (this.undoRedoColl.length === this.undoRedoStep) {
parent.currObjType.isUndoAction = false;
}
else {
parent.currObjType.isUndoAction = true;
}
Iif (obj.operation !== 'textAreaCustomization' &&
(parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block')) {
parent.textArea.style.display = 'none';
}
parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: true } });
parent.cropObj = ej2_base_1.extend({}, obj.currentCropObj, {}, true);
parent.afterCropActions = obj.currentObj.afterCropActions;
this.lowerContext.filter = obj.currentObj.filter;
Eif (parent.element.querySelector('.e-contextual-toolbar-wrapper')) {
parent.element.querySelector('.e-contextual-toolbar-wrapper').classList.add('e-hide');
}
parent.notify('filter', { prop: 'setAdjustmentLevel', onPropertyChange: false, value: { adjustmentLevel: obj.currentObj.adjustmentLevel } });
parent.notify('filter', { prop: 'setTempAdjVal' });
parent.currentFilter = obj.currentObj.currentFilter;
parent.notify('filter', { prop: 'setTempFilVal' });
parent.canvasFilter = this.lowerContext.filter;
parent.initialAdjustmentValue = this.lowerContext.filter;
parent.notify('filter', { prop: 'setBevelFilter', onPropertyChange: false, value: { bevelFilter: this.lowerContext.filter } });
var activeObj = void 0;
var editCompleteArgs = { action: this.getUndoRedoAction(obj.operation) };
switch (obj.operation) {
case 'shapeTransform':
case 'brightness':
case 'contrast':
case 'hue':
case 'saturation':
case 'opacity':
case 'blur':
case 'exposure':
case 'default':
case 'chrome':
case 'cold':
case 'warm':
case 'grayscale':
case 'blackandwhite':
case 'sepia':
case 'invert':
case 'sharpen':
case 'imageRotate':
case 'shapeInsert':
this.shapeTransform(obj.currentObjColl, obj.currentPointColl);
break;
case 'freehanddraw':
case 'freehand-draw':
this.updateFreehandDraw(obj.currentPointColl, obj.currentSelPointColl);
parent.notify('freehand-draw', { prop: 'setCurrentFreehandDrawIndex',
value: { value: parent.pointColl.length } });
break;
case 'freehanddrawCustomized':
this.updateFreehandDrawCustomized(obj.currentObjColl, obj.currentPointColl);
break;
case 'deleteFreehandDrawing':
case 'deleteObj':
this.updateDelete(obj.operation, obj.currentObjColl, obj.currentPointColl, obj.currentSelPointColl);
break;
case 'textAreaCustomization':
this.shapeTransform(obj.currentObjColl, obj.currentPointColl);
this.updateTextAreaCustomization(activeObj, obj.currentObjColl);
break;
case 'text':
this.updateText(obj.currentObjColl, false);
break;
case 'frame':
ej2_base_1.extend(parent.frameObj, obj.currentObj.frameObj);
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true, isPreventClearRect: null, isFrame: true } });
break;
case 'imageHFlip':
this.imageFlip('horizontal', obj.currentObjColl);
break;
case 'imageVFlip':
this.imageFlip('vertical', obj.currentObjColl);
break;
case 'bgColor':
parent.notify('draw', { prop: 'imageBackgroundColor', onPropertyChange: false, value: { color: obj.currentObj.bgColor } });
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
break;
case 'updateImage':
parent.isImageUpdated = true;
parent.baseImg.src = obj.currentObj.imageSource;
setTimeout(function () {
Eif (parent.cropObj.straighten !== 0) {
parent.notify('toolbar', { prop: 'performCropTransformClick', value: { shape: 'crop-' + 'custom' } });
parent.noPushUndo = true;
parent.crop();
parent.noPushUndo = false;
}
else {
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
}
parent.isImageUpdated = false;
});
break;
default:
parent.objColl = [];
parent.pointColl = [];
parent.freehandCounter = 0;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: [] } } });
parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.currentObj, isUndoRedo: true } });
parent.img.destLeft = obj.currentObj.destPoints.startX;
parent.img.destTop = obj.currentObj.destPoints.startY;
activeObj = ej2_base_1.extend({}, parent.activeObj, {}, true);
parent.objColl = ej2_base_1.extend([], obj.currentObjColl, [], true);
parent.pointColl = ej2_base_1.extend([], obj.currentPointColl, [], true);
parent.freehandCounter = parent.pointColl.length;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: ej2_base_1.extend([], obj.currentSelPointColl, [], true) } } });
parent.transform.straighten = 0;
this.lowerContext.filter = 'none';
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
this.lowerContext.filter = obj.currentObj.filter;
parent.prevStraightenedDegree = parent.transform.straighten;
parent.activeObj = activeObj;
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
Iif (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
}
parent.notify('filter', { prop: 'set-adjustment', value: { operation: obj.operation } });
parent.notify('filter', { prop: 'update-filter', value: { operation: obj.operation } });
break;
}
Iif (obj.operation === 'crop' && obj.isCircleCrop) {
parent.isCircleCrop = true;
parent.currSelectionPoint = ej2_base_1.extend({}, this.tempCurrSelPoint, {}, true);
this.tempCurrSelPoint = null;
}
if (obj.operation === 'crop' && !obj.isCircleCrop) {
parent.isCircleCrop = false;
}
if (obj.operation === 'crop' && obj.currentObj.currSelectionPoint) {
parent.currSelectionPoint = ej2_base_1.extend({}, obj.currentObj.currSelectionPoint, {}, true);
parent.notify('draw', { prop: 'setStraightenActObj', value: { activeObj: parent.currSelectionPoint } });
}
Iif (parent.currSelectionPoint && ej2_base_1.isNullOrUndefined(parent.currSelectionPoint.shape)) {
parent.currSelectionPoint = null;
}
Iif (obj.operation === 'resize' && parent.cropObj && parent.cropObj.activeObj) {
parent.currSelectionPoint = ej2_base_1.extend({}, parent.cropObj.activeObj, {}, true);
}
this.endUndoRedo(obj.operation, false);
var action = { action: 'redo', actionEventArgs: editCompleteArgs };
parent.triggerEditCompleteEvent(action);
}
}
};
UndoRedo.prototype.imageFlip = function (type, objColl) {
var parent = this.parent;
this.shapeTransform(objColl, null);
parent.activeObj = ej2_base_1.extend({}, parent.objColl[parent.objColl.length - 1], {}, true);
var _a = parent.activeObj, shape = _a.shape, isHorImageFlip = _a.isHorImageFlip, isVerImageFlip = _a.isVerImageFlip;
parent.objColl.pop();
Eif (shape && shape === 'image') {
if (type === 'horizontal') {
Iif (ej2_base_1.isNullOrUndefined(isHorImageFlip) && isVerImageFlip) {
parent.activeObj.isHorImageFlip = true;
parent.activeObj.isVerImageFlip = null;
parent.horizontalFlip(this.upperContext, true);
}
else {
if (ej2_base_1.isNullOrUndefined(isHorImageFlip) || !isHorImageFlip) {
parent.activeObj.isHorImageFlip = true;
}
else {
parent.activeObj.isHorImageFlip = null;
}
parent.horizontalFlip(this.upperContext, true);
}
}
else Eif (type === 'vertical') {
Iif (ej2_base_1.isNullOrUndefined(isVerImageFlip) && isHorImageFlip) {
parent.activeObj.isVerImageFlip = true;
parent.activeObj.isHorImageFlip = null;
parent.verticalFlip(this.upperContext, true);
}
else {
if (ej2_base_1.isNullOrUndefined(isVerImageFlip) || !isVerImageFlip) {
parent.activeObj.isVerImageFlip = true;
}
else {
parent.activeObj.isVerImageFlip = null;
}
parent.verticalFlip(this.upperContext, true);
}
}
parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: true } });
}
else {
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
}
};
UndoRedo.prototype.shapeTransform = function (objColl, pointColl) {
var parent = this.parent;
parent.objColl = ej2_base_1.extend([], objColl, [], true);
if (pointColl) {
parent.pointColl = ej2_base_1.extend([], pointColl, [], true);
parent.freehandCounter = parent.pointColl.length;
}
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
parent.isUndoRedo = true;
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
};
UndoRedo.prototype.updateFreehandDraw = function (pointColl, selPointColl) {
var parent = this.parent;
parent.pointColl = pointColl;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: selPointColl } } });
parent.freehandCounter = parent.pointColl.length;
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
parent.isUndoRedo = true;
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
};
UndoRedo.prototype.updateFreehandDrawCustomized = function (objColl, pointColl) {
var parent = this.parent;
parent.objColl = ej2_base_1.extend([], objColl, [], true);
parent.pointColl = pointColl;
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
parent.isUndoRedo = true;
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
};
UndoRedo.prototype.updateDelete = function (operation, objColl, pointColl, selPointColl) {
var parent = this.parent;
Eif (operation === 'deleteFreehandDrawing') {
parent.pointColl = pointColl;
parent.freehandCounter = parent.pointColl.length;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: selPointColl } } });
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
}
else if (operation === 'deleteObj') {
parent.objColl = objColl;
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
}
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
parent.isUndoRedo = true;
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
};
UndoRedo.prototype.updateTextAreaCustomization = function (activeObj, objColl) {
var parent = this.parent;
parent.objColl = ej2_base_1.extend([], objColl, [], true);
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
parent.isUndoRedo = true;
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
for (var i = 0, len = objColl.length; i < len; i++) {
Iif (this.tempActObj) {
if (this.tempActObj.currIndex === objColl[i].currIndex) {
activeObj = ej2_base_1.extend({}, objColl[i], {}, true);
parent.objColl.splice(i, 1);
break;
}
}
else {
activeObj = ej2_base_1.extend({}, objColl[objColl.length - 1], {}, true);
parent.objColl.splice(i, 1);
break;
}
}
Eif (activeObj) {
this.updateTextBox(activeObj);
}
Eif (parent.textArea.style.display === 'block' || parent.textArea.style.display === 'inline-block') {
parent.notify('shape', { prop: 'redrawActObj', onPropertyChange: false,
value: { x: null, y: null, isMouseDown: null } });
}
};
UndoRedo.prototype.updateText = function (objColl, allowActiveObj) {
var parent = this.parent;
Iif (this.tempActObj) {
parent.activeObj = ej2_base_1.extend({}, this.tempActObj, {}, true);
}
Iif (objColl.length === 0 && parent.objColl.length === 1) {
this.tempActObj = ej2_base_1.extend({}, parent.objColl[0], {}, true);
}
else {
for (var i = 0, iLen = parent.objColl.length; i < iLen; i++) {
Iif (parent.objColl[i] && ej2_base_1.isNullOrUndefined(objColl[i])) {
this.tempActObj = ej2_base_1.extend({}, parent.objColl[i], {}, true);
break;
}
Iif (objColl[i].currIndex !== parent.objColl[i].currIndex) {
this.tempActObj = ej2_base_1.extend({}, parent.objColl[i], {}, true);
break;
}
}
}
if (allowActiveObj) {
parent.activeObj = ej2_base_1.extend({}, this.tempActObj, {}, true);
}
parent.objColl = ej2_base_1.extend([], objColl, [], true);
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: true } });
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
parent.isUndoRedo = true;
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
};
UndoRedo.prototype.updateTextBox = function (obj) {
var parent = this.parent;
this.upperContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
this.lowerContext.clearRect(0, 0, parent.lowerCanvas.width, parent.lowerCanvas.height);
parent.notify('draw', { prop: 'redrawImgWithObj', onPropertyChange: false });
parent.notify('toolbar', { prop: 'destroy-qa-toolbar', onPropertyChange: false });
var textArea = parent.textArea;
textArea.style.display = 'block';
textArea.style.fontFamily = obj.textSettings.fontFamily;
textArea.style.fontSize = obj.textSettings.fontSize + 'px';
textArea.style.color = obj.strokeSettings.strokeColor;
textArea.style.fontWeight = obj.textSettings.bold ? 'bold' : 'normal';
textArea.style.fontStyle = obj.textSettings.italic ? 'italic' : 'normal';
textArea.style.textDecoration = (obj.textSettings.underline && obj.textSettings.strikethrough) ? 'underline line-through' :
(obj.textSettings.underline) ? 'underline' :
(obj.textSettings.strikethrough) ? 'line-through' :
'none';
textArea.style.border = '2px solid ' + parent.themeColl[parent.theme]['primaryColor'];
textArea.value = obj.keyHistory;
parent.activeObj = ej2_base_1.extend({}, obj, {}, true);
parent.notify('shape', { prop: 'updateFontStyles', onPropertyChange: false,
value: { isTextBox: null } });
parent.textArea.style.width = parent.activeObj.activePoint.width + 'px';
};
UndoRedo.prototype.undoDefault = function (obj, isUndoRedo) {
this.lowerContext.filter = obj.previousObj.filter;
var parent = this.parent;
parent.objColl = [];
parent.pointColl = [];
parent.freehandCounter = 0;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: [] } } });
var isCircleCrop = !isUndoRedo ? obj.isCircleCrop : false;
parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: obj.previousObj, isUndoRedo: isUndoRedo, isCircleCrop: isCircleCrop } });
parent.prevStraightenedDegree = parent.transform.straighten;
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
parent.img.destLeft = obj.previousObj.destPoints.startX;
parent.img.destTop = obj.previousObj.destPoints.startY;
var activeObj = ej2_base_1.extend({}, parent.activeObj, {}, true);
parent.objColl = ej2_base_1.extend([], obj.previousObjColl, [], true);
parent.pointColl = ej2_base_1.extend([], obj.previousPointColl, [], true);
parent.freehandCounter = parent.pointColl.length;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: ej2_base_1.extend([], obj.previousSelPointColl, [], true) } } });
parent.transform.straighten = 0;
this.lowerContext.filter = 'none';
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: null } });
this.lowerContext.filter = obj.previousObj.filter;
parent.activeObj = activeObj;
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
Iif (parent.activeObj.activePoint.width !== 0 && parent.activeObj.activePoint.height !== 0) {
parent.notify('draw', { prop: 'drawObject', onPropertyChange: false, value: { canvas: 'duplicate' } });
}
};
UndoRedo.prototype.endUndoRedo = function (operation, isUndo) {
var parent = this.parent;
var frameObj = { type: 'none', color: '#fff', size: 20, inset: 20, offset: 20, radius: 0, amount: 1, border: 'solid', gradientColor: '' };
Iif (((parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle') || parent.isCircleCrop) &&
JSON.stringify(parent.frameObj) !== JSON.stringify(frameObj)) {
parent.notify('draw', { prop: 'render-image', value: { isMouseWheel: true } });
}
parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
Iif (parent.isCircleCrop && ((isUndo && operation !== 'crop') || !isUndo)) {
parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
value: { context: this.lowerContext, isSave: null, isFlip: null } });
}
if (parent.transform.zoomFactor > 0) {
parent.notify('selection', { prop: 'setDragCanvas', value: { bool: true } });
}
parent.notify('draw', { prop: 'setCancelAction', onPropertyChange: false, value: { bool: false } });
Iif (parent.activeObj.shape && parent.activeObj.shape.split('-')[0] === 'crop') {
parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
isApplyBtn: true, isCropping: true, isZooming: null, cType: null } });
}
else {
parent.notify('toolbar', { prop: 'refresh-main-toolbar', onPropertyChange: false });
}
parent.notify('toolbar', { prop: 'enable-disable-btns' });
Eif (document.getElementById(parent.element.id + '_quickAccessToolbarArea')) {
document.getElementById(parent.element.id + '_quickAccessToolbarArea').style.display = 'none';
}
parent.notify('toolbar', { prop: 'enable-disable-btns' });
if (parent.transform.degree !== 0) {
parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
value: { xDiff: 0, yDiff: 0 } });
}
parent.notify('filter', { prop: 'setAdjustmentValue', onPropertyChange: false, value: { adjustmentValue: this.lowerContext.filter } });
parent.currObjType.isCustomCrop = false;
};
UndoRedo.prototype.updateUrc = function (operation, previousObj, previousObjColl, previousPointColl, previousSelPointColl, previousCropObj, previousText, currentText, previousFilter, isCircleCrop) {
var parent = this.parent;
if (parent.isResize || this.isPreventing) {
return;
}
var obj = { isInitialLoaded: false };
if (parent.currObjType.isUndoAction) {
this.refreshUrc(true);
}
parent.notify('draw', { prop: 'isInitialLoaded', onPropertyChange: false, value: { object: obj } });
if (!obj['isInitialLoaded'] && parent.allowUndoRedo) {
var object = { currObj: {} };
parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
var currentObj = object['currObj'];
currentObj.objColl = ej2_base_1.extend([], parent.objColl, [], true);
currentObj.pointColl = ej2_base_1.extend([], parent.pointColl, [], true);
currentObj.afterCropActions = ej2_base_1.extend([], parent.afterCropActions, [], true);
var selPointCollObj = { selPointColl: null };
parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
value: { obj: selPointCollObj } });
currentObj.selPointColl = ej2_base_1.extend([], selPointCollObj['selPointColl'], [], true);
if (operation === 'crop') {
currentObj.currSelectionPoint = ej2_base_1.extend({}, parent.currSelectionPoint, {}, true);
}
else if (operation === 'frame') {
previousObj.destPoints = { startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
currentObj.destPoints = { startX: parent.frameDestPoints.destLeft, startY: parent.frameDestPoints.destTop,
width: parent.frameDestPoints.destWidth, height: parent.frameDestPoints.destHeight };
if (!ej2_base_1.isNullOrUndefined(parent.tempFrameZoomLevel)) {
previousObj.defaultZoom = currentObj.defaultZoom = parent.tempFrameZoomLevel;
}
}
else if ((operation === 'imageHFlip' || operation === 'imageVFlip') && this.appliedUndoRedoColl.length > 0) {
var index = previousObjColl[previousObjColl.length - 1].currIndex;
previousObjColl = this.appliedUndoRedoColl[this.appliedUndoRedoColl.length - 1].currentObjColl;
Eif (index) {
for (var i = 0, len = previousObjColl.length; i < len; i++) {
Eif (previousObjColl[i].currIndex === index) {
var actObj = ej2_base_1.extend({}, previousObjColl[i], {}, true);
previousObjColl.splice(i, 1);
previousObjColl.push(actObj);
break;
}
}
}
}
this.undoRedoColl.push({ operation: operation, previousObj: previousObj, currentObj: currentObj,
previousObjColl: previousObjColl, currentObjColl: currentObj.objColl,
previousPointColl: previousPointColl, currentPointColl: currentObj.pointColl,
previousSelPointColl: previousSelPointColl, currentSelPointColl: currentObj.selPointColl,
previousCropObj: previousCropObj, currentCropObj: ej2_base_1.extend({}, parent.cropObj, {}, true),
previousText: previousText, currentText: currentText, filter: previousFilter, isCircleCrop: isCircleCrop });
parent.notify('toolbar', { prop: 'enable-disable-btns', onPropertyChange: false });
}
};
UndoRedo.prototype.updateUrObj = function (objColl, operation) {
var parent = this.parent;
if (parent.allowUndoRedo) {
if (parent.currObjType.isUndoAction && !parent.isShapeDrawing) {
this.refreshUrc(true);
}
if (ej2_base_1.isNullOrUndefined(parent.activeObj.imageRatio)) {
parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
}
parent.objColl.push(parent.activeObj);
var cropObj = ej2_base_1.extend({}, parent.cropObj, {}, true);
var object = { currObj: {} };
parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
var obj = object['currObj'];
obj.objColl = ej2_base_1.extend([], parent.objColl, [], true);
obj.pointColl = ej2_base_1.extend([], parent.pointColl, [], true);
obj.afterCropActions = ej2_base_1.extend([], parent.afterCropActions, [], true);
var selPointCollObj = { selPointColl: null };
parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
value: { obj: selPointCollObj } });
obj.selPointColl = ej2_base_1.extend([], selPointCollObj['selPointColl'], [], true);
var oper = operation ? operation : 'shapeTransform';
this.undoRedoColl.push({ operation: oper, previousObj: obj, currentObj: obj,
previousObjColl: objColl, currentObjColl: obj.objColl,
previousPointColl: obj.pointColl, currentPointColl: obj.pointColl,
previousSelPointColl: obj.selPointColl, currentSelPointColl: obj.selPointColl,
previousCropObj: cropObj, currentCropObj: cropObj });
parent.notify('selection', { prop: 'redrawShape', onPropertyChange: false,
value: { obj: parent.objColl[parent.objColl.length - 1] } });
}
};
UndoRedo.prototype.updateUndoRedo = function (operation) {
var parent = this.parent;
var prevCropObj = ej2_base_1.extend({}, parent.cropObj, {}, true);
var object = { currObj: {} };
parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
var prevObj = object['currObj'];
prevObj.objColl = ej2_base_1.extend([], parent.objColl, [], true);
prevObj.pointColl = ej2_base_1.extend([], parent.pointColl, [], true);
prevObj.afterCropActions = ej2_base_1.extend([], parent.afterCropActions, [], true);
var selPointCollObj = { selPointColl: null };
parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
value: { obj: selPointCollObj } });
prevObj.selPointColl = ej2_base_1.extend([], selPointCollObj['selPointColl'], [], true);
if (ej2_base_1.isNullOrUndefined(parent.activeObj.imageRatio)) {
parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
}
parent.objColl.push(parent.activeObj);
var oper = operation ? operation : 'shapeTransform';
this.updateUrc(oper, prevObj, prevObj.objColl, prevObj.pointColl, prevObj.selPointColl, prevCropObj);
parent.objColl.pop();
parent.notify('shape', { prop: 'applyActObj', onPropertyChange: false, value: { isMouseDown: null } });
parent.notify('shape', { prop: 'refreshActiveObj', onPropertyChange: false });
parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'shapes',
isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
parent.notify('toolbar', { prop: 'refresh-toolbar', onPropertyChange: false, value: { type: 'main',
isApplyBtn: null, isCropping: null, isZooming: null, cType: null } });
};
UndoRedo.prototype.getZeroZoomObjPointValue = function (obj, point) {
var parent = this.parent;
this.updateObjColl();
var object = { currObj: {} };
parent.notify('filter', { prop: 'getCurrentObj', onPropertyChange: false, value: { object: object } });
var currentObj = object['currObj'];
currentObj.objColl = ej2_base_1.extend([], parent.objColl, [], true);
currentObj.pointColl = ej2_base_1.extend([], parent.pointColl, [], true);
currentObj.afterCropActions = ej2_base_1.extend([], parent.afterCropActions, [], true);
var selPointCollObj = { selPointColl: null };
parent.notify('freehand-draw', { prop: 'getSelPointColl', onPropertyChange: false,
value: { obj: selPointCollObj } });
currentObj.selPointColl = ej2_base_1.extend([], selPointCollObj['selPointColl'], [], true);
var cropDimensionObj = { cropDimension: null };
parent.notify('transform', { prop: 'getCropDimension', onPropertyChange: false, value: { obj: cropDimensionObj } });
var getZeroZoomObjColl = ej2_base_1.extend([], parent.objColl, [], true);
var getZeroZoomPointColl = ej2_base_1.extend([], parent.pointColl, [], true);
var arrowObj = { arrowDimension: null };
this.parent.notify('draw', { prop: 'getArrowDimension', onPropertyChange: false, value: { obj: arrowObj } });
var tempArrowObj = ej2_base_1.extend({}, arrowObj['arrowDimension'], {}, true);
if (parent.transform.zoomFactor > 0 && (obj.length > 0 || point.length > 0)) {
if (obj.length > 0) {
for (var i = 0; i < obj.length; i++) {
Eif (obj[i].currIndex) {
continue;
}
else {
obj[i].currIndex = 'shape_' + (i + 1);
}
}
}
parent.objColl = obj;
parent.pointColl = point;
var isUndoRedo = parent.isUndoRedo;
var isCropTab = parent.isCropTab;
Eif (parent.transform.zoomFactor !== 0) {
parent.isUndoRedo = true;
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'zoom', pen: 'zoom', isPreventApply: true } });
parent.notify('freehand-draw', { prop: 'updateFHDColl', onPropertyChange: false });
parent.isCropTab = true;
var zoomSettings = ej2_base_1.extend({}, parent.zoomSettings, null, true);
Eif (parent.transform.zoomFactor > 0) {
parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
value: { zoomFactor: -parent.transform.zoomFactor, zoomPoint: null, isResize: null } });
}
else {
parent.notify('transform', { prop: 'zoomAction', onPropertyChange: false,
value: { zoomFactor: Math.abs(parent.transform.zoomFactor), zoomPoint: null, isResize: null } });
}
parent.zoomSettings = zoomSettings;
parent.isCropTab = isCropTab;
parent.isUndoRedo = isUndoRedo;
getZeroZoomObjColl = ej2_base_1.extend([], parent.objColl, [], true);
getZeroZoomPointColl = ej2_base_1.extend([], parent.pointColl, [], true);
parent.objColl = [];
parent.pointColl = [];
parent.freehandCounter = 0;
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: [] } } });
parent.notify('transform', { prop: 'setCropDimension', onPropertyChange: false,
value: { width: cropDimensionObj['cropDimension']['width'], height: cropDimensionObj['cropDimension']['height'] } });
var maxDimension = { width: cropDimensionObj['cropDimension']['width'], height: cropDimensionObj['cropDimension']['height'] };
maxDimension.width += (maxDimension.width * currentObj.defaultZoom);
maxDimension.height += (maxDimension.height * currentObj.defaultZoom);
parent.notify('draw', { prop: 'setZoomCropWidth', value: { width: maxDimension.width, height: maxDimension.height } });
parent.notify('draw', { prop: 'setCurrentObj', onPropertyChange: false, value: { obj: currentObj } });
parent.img.destLeft = currentObj.destPoints.startX;
parent.img.destTop = currentObj.destPoints.startY;
parent.panPoint.totalPannedPoint = currentObj.totalPannedPoint;
parent.panPoint.totalPannedClientPoint = currentObj.totalPannedClientPoint;
parent.panPoint.totalPannedInternalPoint = currentObj.totalPannedInternalPoint;
parent.objColl = ej2_base_1.extend([], currentObj.objColl, [], true);
parent.pointColl = ej2_base_1.extend([], currentObj.pointColl, [], true);
parent.freehandCounter = parent.pointColl.length;
parent.notify('draw', { prop: 'setArrowDimension', onPropertyChange: false, value: { arrowDimension: tempArrowObj } });
parent.notify('freehand-draw', { prop: 'setSelPointColl', onPropertyChange: false,
value: { obj: { selPointColl: ej2_base_1.extend([], currentObj.selPointColl, [], true) } } });
this.lowerContext.filter = 'none';
parent.transform.straighten = 0;
this.applyImgTranform();
parent.notify('shape', { prop: 'drawAnnotations', onPropertyChange: false,
value: { ctx: this.lowerContext, shape: 'iterate', pen: 'iterate', isPreventApply: null } });
parent.notify('freehand-draw', { prop: 'updateFHDCurPts', onPropertyChange: false });
this.lowerContext.filter = currentObj.filter;
if (parent.transform.degree !== 0) {
parent.notify('transform', { prop: 'drawPannedImage', onPropertyChange: false,
value: { xDiff: 0, yDiff: 0 } });
}
parent.notify('draw', { prop: 'clearOuterCanvas', onPropertyChange: false, value: { context: this.lowerContext } });
Iif (parent.isCircleCrop || (parent.currSelectionPoint && parent.currSelectionPoint.shape === 'crop-circle')) {
parent.notify('crop', { prop: 'cropCircle', onPropertyChange: false,
value: { context: this.lowerContext, isSave: null, isFlip: null } });
}
}
}
return { obj: getZeroZoomObjColl, point: getZeroZoomPointColl };
};
UndoRedo.prototype.updateObjColl = function () {
var parent = this.parent;
for (var i = 0; i < parent.objColl.length; i++) {
var obj = parent.objColl[i];
var isUpdated = false;
if (obj.shape === 'line' || obj.shape === 'arrow') {
if (obj.activePoint.width < 0) {
obj.activePoint.width = Math.abs(obj.activePoint.width);
isUpdated = true;
}
if (obj.activePoint.height < 0) {
obj.activePoint.height = Math.abs(obj.activePoint.height);
isUpdated = true;
}
if (isUpdated) {
var activeObj = ej2_base_1.extend({}, parent.activeObj, {}, true);
parent.activeObj = obj;
parent.notify('shape', { prop: 'updImgRatioForActObj', onPropertyChange: false });
obj = parent.activeObj;
parent.activeObj = activeObj;
}
}
}
};
UndoRedo.prototype.applyImgTranform = function () {
var parent = this.parent;
var obj = ej2_base_1.extend({}, parent.activeObj, {}, true);
for (var i = 0, len = parent.objColl.length; i < len; i++) {
Iif (parent.objColl[i].shape === 'image') {
parent.activeObj = ej2_base_1.extend({}, parent.objColl[i], {}, true);
var ctx = parent.objColl[i].imageCanvas.getContext('2d');
parent.notify('selection', { prop: 'applyTransformToImg', onPropertyChange: false, value: { ctx: ctx } });
this.upperContext.clearRect(0, 0, parent.upperCanvas.width, parent.upperCanvas.height);
parent.notify('selection', { prop: 'setImageClarity', onPropertyChange: false, value: { bool: true } });
}
}
parent.activeObj = obj;
};
UndoRedo.prototype.updateUndoRedoStack = function (isPenDraw) {
var parent = this.parent;
if ((parent.activeObj.currIndex && parent.activeObj.activePoint.width !== 0 ||
parent.activeObj.activePoint.height !== 0 || (parent.activeObj.pointColl &&
parent.activeObj.pointColl.length > 0)) || isPenDraw) {
var isTextArea = parent.textArea.style.display === 'none' ? false : true;
var temp = parent.noPushUndo;
parent.noPushUndo = false;
parent.isUndoRedoStack = true;
this.preventEditComplete = true;
if (isPenDraw) {
var tempTogglePen = parent.togglePen;
var obj = { freehandDrawSelectedId: null };
parent.notify('freehand-draw', { prop: 'getFreehandDrawSelectedId', onPropertyChange: false, value: { obj: obj } });
parent.okBtn();
parent.noPushUndo = temp;
if (obj['freehandDrawSelectedId']) {
parent.noRedact = true;
parent.selectShape(obj['freehandDrawSelectedId']);
}
else {
parent.freeHandDraw(true);
}
parent.togglePen = tempTogglePen;
}
else Eif (parent.activeObj.currIndex) {
var shapeId = parent.activeObj.currIndex;
parent.okBtn();
parent.noPushUndo = temp;
parent.noRedact = true;
parent.selectShape(shapeId);
Iif (parent.drawingShape) {
parent.notify('selection', { prop: 'setCurrentDrawingShape', onPropertyChange: false, value: { value: parent.drawingShape.toLowerCase() } });
}
if (isTextArea) {
parent.enableTextEditing();
}
}
Eif (this.preventEditComplete) {
parent.isUndoRedoStack = this.preventEditComplete = false;
Eif (!this.preventApplyEditComplete) {
this.triggerActionCompletedEvent('shape-customize');
}
this.triggerActionCompletedEvent('shape-select');
}
parent.isUndoRedoStack = this.preventEditComplete = false;
}
};
return UndoRedo;
}());
exports.UndoRedo = UndoRedo;
});
|