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
<div nz-row nzType="flex" nzGutter = '16' class="editor-reading-wrap">
<div nz-col nzSpan="12">
<div class="upload-wrap" [style.display]="!picId ? 'block' : 'none'" #uploadImage>
<app-upload-image-with-preview
[picUrl]="picId"
(imageUploaded)="onImageUploadSuccess($event)"
></app-upload-image-with-preview>
</div>
<div class="edit-wrap" *ngIf="picId">
<!--<img [src]="picId | resource" alt="" #img>-->
<angular-cropper [cropperOptions]="cropperConfig"
[imageUrl]="picId"
#angularCropper></angular-cropper>
</div>
</div>
<div nz-col nzSpan="12">
<div nz-row>
<div nz-col nzSpan="24" style="text-align:right;">
<button nz-button
(click)="changeImage()"
style="margin-left: 1rem">
<i class="anticon anticon-upload"></i><span>Change Image</span>
</button>
<button nz-button
(click)="addPart()"
style="margin-left: 1rem">
<i class="anticon anticon-plus"></i><span>Add Crop</span>
</button>
<hr>
</div>
</div>
<div nz-row>
<div nz-col nzSpan="12"
#partConfigBoxes
*ngFor="let part of cropperParts;let i = index"
class="part-item" >
<div class="part-item-wrap" style="margin-right: 2.5rem;">
<i class="anticon anticon-edit"
nz-tooltip nzTitle="edit mode"
*ngIf="currentEditPartIndex !== i"
(click)="editPart(i)"></i>
<i class="anticon anticon-close-square dynamic-delete-button"
nz-popconfirm
nzTitle="Are you sure?"
(nzOnConfirm)="confirmRemovePart(i,$event)"
nz-tooltip></i>
<i class="anticon anticon-logout"
*ngIf="currentEditPartIndex === i"
nz-tooltip nzTitle="exit edit mode"
(click)="exitEditPart($event, i)"></i>
<div class="part-view-wrap">
<div class="part-view"
(click)="previewUserSelectPart(i)"
[ngStyle]="part.previewCss">
<img *ngIf="currentEditPartIndex !== i"
[ngStyle]="part.imgCss"
(load)="initPart($event, i)"
[src]="picId">
</div>
</div>
<div class="part-text-wrap" >
<div *ngIf="currentEditPartIndex === i" style="height:2.5rem;">
<input nz-input
class="part-word"
[style.fontWeight] = "900"
nzSize="default"
autofocus
[(ngModel)]="part.word"
[value]="part.word"
(ngModelChange)="onChangePartWord($event, i)"
(keydown.enter)="savePart($event, i)"
(keydown.esc)="exitEditPart($event, i)"
>
<!--(blur)="savePart($event, i)"-->
<!--[(ngModel)]="part.word"-->
<!--(ngModelChange)="onChangePartWord($event, i)"-->
<!--(focus)="setCurrentInputField($event)"-->
<i class="anticon anticon-check-square"
nz-tooltip nzTitle="save"
(click)="savePart($event,i)"></i>
</div>
<div *ngIf="currentEditPartIndex !== i" class="text-word" style="">
{{part.word}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>