Skip to content

Commit 521d07d

Browse files
rbaletrbalet
authored
fix: maxSize to signal
1 parent 7a7ac09 commit 521d07d

File tree

6 files changed

+53
-53
lines changed

6 files changed

+53
-53
lines changed

‎projects/ngx-image-cropper/src/lib/component/cropper.state.spec.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,15 +44,15 @@ describe('CropperState', () => {
4444
} as LoadedImage;
4545

4646
cropperState.setMaxSize(100, 100);
47-
expect(cropperState.maxSize).toEqual({width: 100, height: 100});
47+
expect(cropperState.maxSize()).toEqual({width: 100, height: 100});
4848
expect(cropperState.cropperScaledMinWidth).toBe(20);
4949
expect(cropperState.cropperScaledMinHeight).toBe(20);
5050
expect(cropperState.cropperScaledMaxWidth).toBe(100);
5151
expect(cropperState.cropperScaledMaxHeight).toBe(100);
5252
});
5353

5454
it('should resize cropper position based on new max size', () => {
55-
cropperState.maxSize = {width: 200, height: 200};
55+
cropperState.maxSize.set({ width: 200, height: 200 });
5656
cropperState.cropper.set({x1: 25, x2: 75, y1: 25, y2: 75});
5757
cropperState.resizeCropperPosition({width: 100, height: 100});
5858
expect(cropperState.cropper()).toEqual({x1: 50, x2: 150, y1: 50, y2: 150});

‎projects/ngx-image-cropper/src/lib/component/cropper.state.ts

+16-16
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ export class CropperState {
88
readonly cropper = signal<CropperPosition>({x1: 0, x2: 0, y1: 0, y2: 0});
99

1010
loadedImage?: LoadedImage;
11-
maxSize?: Dimensions;
11+
maxSize = signal<Dimensions>({ width: 0, height: 0 });
1212
transform: ImageTransform = {};
1313
options: CropperOptions = {
1414
format: 'png',
@@ -104,7 +104,7 @@ export class CropperState {
104104
}
105105

106106
setMaxSize(width: number, height: number): void {
107-
this.maxSize = {width, height};
107+
this.maxSize.set({ width, height });
108108
this.setCropperScaledMinSize();
109109
this.setCropperScaledMaxSize();
110110
}
@@ -121,7 +121,7 @@ export class CropperState {
121121

122122
setCropperScaledMinWidth(): void {
123123
this.cropperScaledMinWidth = this.options.cropperMinWidth > 0
124-
? Math.max(20, this.options.cropperMinWidth / this.loadedImage!.transformed.size.width * this.maxSize!.width)
124+
? Math.max(20, this.options.cropperMinWidth / this.loadedImage!.transformed.size.width * this.maxSize().width)
125125
: 20;
126126
}
127127

@@ -131,7 +131,7 @@ export class CropperState {
131131
} else if (this.options.cropperMinHeight > 0) {
132132
this.cropperScaledMinHeight = Math.max(
133133
20,
134-
this.options.cropperMinHeight / this.loadedImage!.transformed.size.height * this.maxSize!.height
134+
this.options.cropperMinHeight / this.loadedImage!.transformed.size.height * this.maxSize().height
135135
);
136136
} else {
137137
this.cropperScaledMinHeight = 20;
@@ -140,9 +140,9 @@ export class CropperState {
140140

141141
setCropperScaledMaxSize(): void {
142142
if (this.loadedImage?.transformed.size) {
143-
const ratio = this.loadedImage.transformed.size.width / this.maxSize!.width;
144-
this.cropperScaledMaxWidth = this.options.cropperMaxWidth > 20 ? this.options.cropperMaxWidth / ratio : this.maxSize!.width;
145-
this.cropperScaledMaxHeight = this.options.cropperMaxHeight > 20 ? this.options.cropperMaxHeight / ratio : this.maxSize!.height;
143+
const ratio = this.loadedImage.transformed.size.width / this.maxSize().width;
144+
this.cropperScaledMaxWidth = this.options.cropperMaxWidth > 20 ? this.options.cropperMaxWidth / ratio : this.maxSize().width;
145+
this.cropperScaledMaxHeight = this.options.cropperMaxHeight > 20 ? this.options.cropperMaxHeight / ratio : this.maxSize().height;
146146
if (this.options.maintainAspectRatio) {
147147
if (this.cropperScaledMaxWidth > this.cropperScaledMaxHeight * this.options.aspectRatio) {
148148
this.cropperScaledMaxWidth = this.cropperScaledMaxHeight * this.options.aspectRatio;
@@ -151,8 +151,8 @@ export class CropperState {
151151
}
152152
}
153153
} else {
154-
this.cropperScaledMaxWidth = this.maxSize!.width;
155-
this.cropperScaledMaxHeight = this.maxSize!.height;
154+
this.cropperScaledMaxWidth = this.maxSize().width;
155+
this.cropperScaledMaxHeight = this.maxSize().height;
156156
}
157157
}
158158

@@ -186,12 +186,12 @@ export class CropperState {
186186
}
187187

188188
resizeCropperPosition(oldMaxSize: Dimensions): void {
189-
if (oldMaxSize.width !== this.maxSize!.width || oldMaxSize.height !== this.maxSize!.height) {
189+
if (oldMaxSize.width !== this.maxSize().width || oldMaxSize.height !== this.maxSize().height) {
190190
this.cropper.update(cropper => ({
191-
x1: cropper.x1 * this.maxSize!.width / oldMaxSize.width,
192-
x2: cropper.x2 * this.maxSize!.width / oldMaxSize.width,
193-
y1: cropper.y1 * this.maxSize!.height / oldMaxSize.height,
194-
y2: cropper.y2 * this.maxSize!.height / oldMaxSize.height
191+
x1: cropper.x1 * this.maxSize().width / oldMaxSize.width,
192+
x2: cropper.x2 * this.maxSize().width / oldMaxSize.width,
193+
y1: cropper.y1 * this.maxSize().height / oldMaxSize.height,
194+
y2: cropper.y2 * this.maxSize().height / oldMaxSize.height
195195
}));
196196
}
197197
}
@@ -200,8 +200,8 @@ export class CropperState {
200200
return {
201201
x1: 0,
202202
y1: 0,
203-
x2: this.maxSize!.width,
204-
y2: this.maxSize!.height
203+
x2: this.maxSize().width,
204+
y2: this.maxSize().height
205205
};
206206
}
207207
}

‎projects/ngx-image-cropper/src/lib/component/image-cropper.component.html

+2-2
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
>
2020
<div
2121
class="ngx-ic-overlay"
22-
[style.width.px]="state.maxSize?.width || 0"
23-
[style.height.px]="state.maxSize?.height || 0"
22+
[style.width.px]="state.maxSize().width || 0"
23+
[style.height.px]="state.maxSize().height || 0"
2424
[style.margin-left]="state.options.alignImage === 'center' ? marginLeft : null"
2525
></div>
2626
<div

‎projects/ngx-image-cropper/src/lib/component/image-cropper.component.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -210,7 +210,7 @@ export class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
210210

211211
private reset(): void {
212212
this.state.loadedImage = undefined;
213-
this.state.maxSize = undefined;
213+
this.state.maxSize.set({ width: 0, height: 0 });
214214
this.imageVisible = false;
215215
}
216216

@@ -276,7 +276,7 @@ export class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
276276
this.cropperChange.emit(this.state.cropper());
277277
}
278278
this.imageVisible = true;
279-
this.cropperReady.emit({...this.state.maxSize!});
279+
this.cropperReady.emit(this.state.maxSize());
280280
this.doAutoCrop();
281281
} else {
282282
this.setImageMaxSizeRetries++;
@@ -296,7 +296,7 @@ export class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
296296
if (this.hidden) {
297297
this.resizedWhileHidden = true;
298298
} else {
299-
const oldMaxSize = {...this.state.maxSize!};
299+
const oldMaxSize = this.state.maxSize();
300300
this.setMaxSize();
301301
this.state.resizeCropperPosition(oldMaxSize);
302302
}
@@ -485,7 +485,7 @@ export class ImageCropperComponent implements OnChanges, OnInit, OnDestroy {
485485
if (this.sourceImage) {
486486
const sourceImageStyle = getComputedStyle(this.sourceImage.nativeElement);
487487
this.state.setMaxSize(parseFloat(sourceImageStyle.width), parseFloat(sourceImageStyle.height));
488-
this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.state.maxSize!.width / 2 + 'px)');
488+
this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.state.maxSize().width / 2 + 'px)');
489489
}
490490
}
491491

‎projects/ngx-image-cropper/src/lib/services/crop.service.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ export class CropService {
8888
}
8989

9090
private getRatio(cropperState: CropperState): number {
91-
return cropperState.loadedImage!.transformed.size.width / cropperState.maxSize!.width;
91+
return cropperState.loadedImage!.transformed.size.width / cropperState.maxSize().width;
9292
}
9393

9494
private getImagePosition(cropperState: CropperState): CropperPosition {

‎projects/ngx-image-cropper/src/lib/utils/cropper-position.utils.ts

+28-28
Original file line numberDiff line numberDiff line change
@@ -14,17 +14,17 @@ export function checkCropperSizeRestriction(cropperPosition: CropperPosition, cr
1414
const centerY = cropperPosition.y1 + cropperHeight / 2;
1515

1616
if (cropperState.options.cropperStaticHeight && cropperState.options.cropperStaticWidth) {
17-
cropperWidth = cropperState.maxSize!.width > cropperState.options.cropperStaticWidth
17+
cropperWidth = cropperState.maxSize().width > cropperState.options.cropperStaticWidth
1818
? cropperState.options.cropperStaticWidth
19-
: cropperState.maxSize!.width;
20-
cropperHeight = cropperState.maxSize!.height > cropperState.options.cropperStaticHeight
19+
: cropperState.maxSize().width;
20+
cropperHeight = cropperState.maxSize().height > cropperState.options.cropperStaticHeight
2121
? cropperState.options.cropperStaticHeight
22-
: cropperState.maxSize!.height;
22+
: cropperState.maxSize().height;
2323
} else {
24-
cropperWidth = Math.max(cropperState.cropperScaledMinWidth, Math.min(cropperWidth, cropperState.cropperScaledMaxWidth, cropperState.maxSize!.width));
25-
cropperHeight = Math.max(cropperState.cropperScaledMinHeight, Math.min(cropperHeight, cropperState.cropperScaledMaxHeight, cropperState.maxSize!.height));
24+
cropperWidth = Math.max(cropperState.cropperScaledMinWidth, Math.min(cropperWidth, cropperState.cropperScaledMaxWidth, cropperState.maxSize().width));
25+
cropperHeight = Math.max(cropperState.cropperScaledMinHeight, Math.min(cropperHeight, cropperState.cropperScaledMaxHeight, cropperState.maxSize().height));
2626
if (cropperState.options.maintainAspectRatio) {
27-
if (cropperState.maxSize!.width / cropperState.options.aspectRatio < cropperState.maxSize!.height) {
27+
if (cropperState.maxSize().width / cropperState.options.aspectRatio < cropperState.maxSize().height) {
2828
cropperHeight = cropperWidth / cropperState.options.aspectRatio;
2929
} else {
3030
cropperWidth = cropperHeight * cropperState.options.aspectRatio;
@@ -54,18 +54,18 @@ export function checkCropperWithinMaxSizeBounds(position: CropperPosition, cropp
5454
y1: 0
5555
};
5656
}
57-
if (position.x2 > cropperState.maxSize!.width) {
57+
if (position.x2 > cropperState.maxSize().width) {
5858
position = {
5959
...position,
60-
x1: position.x1 - (maintainSize ? (position.x2 - cropperState.maxSize!.width) : 0),
61-
x2: cropperState.maxSize!.width
60+
x1: position.x1 - (maintainSize ? (position.x2 - cropperState.maxSize().width) : 0),
61+
x2: cropperState.maxSize().width
6262
};
6363
}
64-
if (position.y2 > cropperState.maxSize!.height) {
64+
if (position.y2 > cropperState.maxSize().height) {
6565
position = {
6666
...position,
67-
y1: position.y1 - (maintainSize ? (position.y2 - cropperState.maxSize!.height) : 0),
68-
y2: cropperState.maxSize!.height
67+
y1: position.y1 - (maintainSize ? (position.y2 - cropperState.maxSize().height) : 0),
68+
y2: cropperState.maxSize().height
6969
};
7070
}
7171
return position;
@@ -143,16 +143,16 @@ export function resizeCropper(event: Event | BasicEvent, moveStart: MoveStart, c
143143
if (cropperPosition.x1 < 0) {
144144
cropperPosition.x2 -= cropperPosition.x1;
145145
cropperPosition.x1 = 0;
146-
} else if (cropperPosition.x2 > cropperState.maxSize!.width) {
147-
cropperPosition.x1 -= (cropperPosition.x2 - cropperState.maxSize!.width);
148-
cropperPosition.x2 = cropperState.maxSize!.width;
146+
} else if (cropperPosition.x2 > cropperState.maxSize().width) {
147+
cropperPosition.x1 -= (cropperPosition.x2 - cropperState.maxSize().width);
148+
cropperPosition.x2 = cropperState.maxSize().width;
149149
}
150150
if (cropperPosition.y1 < 0) {
151151
cropperPosition.y2 -= cropperPosition.y1;
152152
cropperPosition.y1 = 0;
153-
} else if (cropperPosition.y2 > cropperState.maxSize!.height) {
154-
cropperPosition.y1 -= (cropperPosition.y2 - cropperState.maxSize!.height);
155-
cropperPosition.y2 = cropperState.maxSize!.height;
153+
} else if (cropperPosition.y2 > cropperState.maxSize().height) {
154+
cropperPosition.y1 -= (cropperPosition.y2 - cropperState.maxSize().height);
155+
cropperPosition.y2 = cropperState.maxSize().height;
156156
}
157157
break;
158158
}
@@ -171,7 +171,7 @@ export function checkAspectRatio(position: string, cropperPosition: CropperPosit
171171
switch (position) {
172172
case 'top':
173173
cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
174-
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize!.width, 0);
174+
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
175175
overflowY = Math.max(0 - cropperPosition.y1, 0);
176176
if (overflowX > 0 || overflowY > 0) {
177177
cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
@@ -180,8 +180,8 @@ export function checkAspectRatio(position: string, cropperPosition: CropperPosit
180180
break;
181181
case 'bottom':
182182
cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
183-
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize!.width, 0);
184-
overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize!.height, 0);
183+
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
184+
overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
185185
if (overflowX > 0 || overflowY > 0) {
186186
cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
187187
cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : (overflowX / cropperState.options.aspectRatio);
@@ -198,7 +198,7 @@ export function checkAspectRatio(position: string, cropperPosition: CropperPosit
198198
break;
199199
case 'topright':
200200
cropperPosition.y1 = cropperPosition.y2 - (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
201-
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize!.width, 0);
201+
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
202202
overflowY = Math.max(0 - cropperPosition.y1, 0);
203203
if (overflowX > 0 || overflowY > 0) {
204204
cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
@@ -208,8 +208,8 @@ export function checkAspectRatio(position: string, cropperPosition: CropperPosit
208208
case 'right':
209209
case 'bottomright':
210210
cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
211-
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize!.width, 0);
212-
overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize!.height, 0);
211+
overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
212+
overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
213213
if (overflowX > 0 || overflowY > 0) {
214214
cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
215215
cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
@@ -219,7 +219,7 @@ export function checkAspectRatio(position: string, cropperPosition: CropperPosit
219219
case 'bottomleft':
220220
cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
221221
overflowX = Math.max(0 - cropperPosition.x1, 0);
222-
overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize!.height, 0);
222+
overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
223223
if (overflowX > 0 || overflowY > 0) {
224224
cropperPosition.x1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
225225
cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
@@ -229,8 +229,8 @@ export function checkAspectRatio(position: string, cropperPosition: CropperPosit
229229
cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
230230
cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
231231
const overflowX1 = Math.max(0 - cropperPosition.x1, 0);
232-
const overflowX2 = Math.max(cropperPosition.x2 - cropperState.maxSize!.width, 0);
233-
const overflowY1 = Math.max(cropperPosition.y2 - cropperState.maxSize!.height, 0);
232+
const overflowX2 = Math.max(cropperPosition.x2 - cropperState.maxSize().width, 0);
233+
const overflowY1 = Math.max(cropperPosition.y2 - cropperState.maxSize().height, 0);
234234
const overflowY2 = Math.max(0 - cropperPosition.y1, 0);
235235
if (overflowX1 > 0 || overflowX2 > 0 || overflowY1 > 0 || overflowY2 > 0) {
236236
cropperPosition.x1 += (overflowY1 * cropperState.options.aspectRatio) > overflowX1 ? (overflowY1 * cropperState.options.aspectRatio) : overflowX1;

0 commit comments

Comments
 (0)