|
1 | | -import { Component } from '@angular/core'; |
| 1 | +import { |
| 2 | + AfterViewInit, |
| 3 | + ChangeDetectionStrategy, |
| 4 | + Component, |
| 5 | + computed, |
| 6 | + effect, |
| 7 | + ElementRef, |
| 8 | + inject, |
| 9 | + input, |
| 10 | + output, |
| 11 | + signal, |
| 12 | +} from '@angular/core'; |
| 13 | + |
| 14 | +export interface CropSelection { |
| 15 | + top: number; |
| 16 | + right: number; |
| 17 | + bottom: number; |
| 18 | + left: number; |
| 19 | +} |
| 20 | + |
| 21 | +type DragHandle = |
| 22 | + | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' |
| 23 | + | 'top' | 'right' | 'bottom' | 'left' |
| 24 | + | 'move'; |
2 | 25 |
|
3 | 26 | @Component({ |
4 | 27 | selector: 'emr-crop', |
5 | | - imports: [], |
6 | 28 | templateUrl: './crop.html', |
7 | | - styleUrl: './crop.scss' |
| 29 | + styleUrl: './crop.scss', |
| 30 | + changeDetection: ChangeDetectionStrategy.OnPush, |
| 31 | + host: { |
| 32 | + '(document:mouseup)': 'onDragEnd()', |
| 33 | + '(document:mousemove)': 'onDrag($event)', |
| 34 | + }, |
8 | 35 | }) |
9 | | -export class Crop { |
| 36 | +export class Crop implements AfterViewInit { |
| 37 | + minWidth = input(20); |
| 38 | + minHeight = input(20); |
| 39 | + shape = input<'rectangle' | 'circle'>('rectangle'); |
| 40 | + selectionApplied = output<CropSelection>(); |
| 41 | + |
| 42 | + isCircle = computed(() => this.shape() === 'circle'); |
| 43 | + selection = signal<CropSelection>({ top: 20, right: 20, bottom: 20, left: 20 }); |
| 44 | + |
| 45 | + private elementRef = inject<ElementRef<HTMLElement>>(ElementRef); |
| 46 | + private activeDragHandle = signal<DragHandle | null>(null); |
| 47 | + private startDragPosition = signal<{ x: number; y: number } | null>(null); |
| 48 | + private startDragSelection = signal<CropSelection | null>(null); |
| 49 | + |
| 50 | + constructor() { |
| 51 | + effect(() => { |
| 52 | + // Handles dynamic changes of the `shape` input after initialization. |
| 53 | + if (this.isCircle() && this.elementRef.nativeElement.offsetWidth > 0) { |
| 54 | + this.resetSelectionToSquare(); |
| 55 | + } |
| 56 | + }); |
| 57 | + } |
| 58 | + |
| 59 | + ngAfterViewInit(): void { |
| 60 | + // Handles the initial case when the component loads with shape="circle". |
| 61 | + if (this.isCircle()) { |
| 62 | + this.resetSelectionToSquare(); |
| 63 | + } |
| 64 | + } |
| 65 | + |
| 66 | + private resetSelectionToSquare(): void { |
| 67 | + const hostEl = this.elementRef.nativeElement; |
| 68 | + const hostWidth = hostEl.offsetWidth; |
| 69 | + const hostHeight = hostEl.offsetHeight; |
| 70 | + |
| 71 | + // Center a square that is 80% of the smallest dimension. |
| 72 | + const size = Math.min(hostWidth, hostHeight) * 0.8; |
| 73 | + const left = (hostWidth - size) / 2; |
| 74 | + const top = (hostHeight - size) / 2; |
| 75 | + |
| 76 | + this.selection.set({ |
| 77 | + top: top, |
| 78 | + right: left, |
| 79 | + bottom: top, |
| 80 | + left: left, |
| 81 | + }); |
| 82 | + } |
| 83 | + |
| 84 | + selectionStyle = computed(() => ({ |
| 85 | + top: `${this.selection().top}px`, |
| 86 | + right: `${this.selection().right}px`, |
| 87 | + bottom: `${this.selection().bottom}px`, |
| 88 | + left: `${this.selection().left}px`, |
| 89 | + })); |
| 90 | + |
| 91 | + onDragStart(event: MouseEvent, handle: DragHandle): void { |
| 92 | + event.preventDefault(); |
| 93 | + event.stopPropagation(); |
| 94 | + this.activeDragHandle.set(handle); |
| 95 | + this.startDragPosition.set({ x: event.clientX, y: event.clientY }); |
| 96 | + this.startDragSelection.set(this.selection()); |
| 97 | + } |
| 98 | + |
| 99 | + onDragEnd(): void { |
| 100 | + this.activeDragHandle.set(null); |
| 101 | + } |
| 102 | + |
| 103 | + onDrag(event: MouseEvent): void { |
| 104 | + const handle = this.activeDragHandle(); |
| 105 | + if (!handle) return; |
| 106 | + |
| 107 | + const startPos = this.startDragPosition()!; |
| 108 | + const startSelection = this.startDragSelection()!; |
| 109 | + const dx = event.clientX - startPos.x; |
| 110 | + const dy = event.clientY - startPos.y; |
| 111 | + const hostRect = this.elementRef.nativeElement.getBoundingClientRect(); |
| 112 | + |
| 113 | + this.selection.update(() => { |
| 114 | + const newSelection = { ...startSelection }; |
| 115 | + |
| 116 | + if (handle === 'move') { |
| 117 | + const selectionWidth = hostRect.width - startSelection.left - startSelection.right; |
| 118 | + const selectionHeight = hostRect.height - startSelection.top - startSelection.bottom; |
| 119 | + newSelection.top = Math.max(0, Math.min(startSelection.top + dy, hostRect.height - selectionHeight)); |
| 120 | + newSelection.left = Math.max(0, Math.min(startSelection.left + dx, hostRect.width - selectionWidth)); |
| 121 | + newSelection.bottom = hostRect.height - newSelection.top - selectionHeight; |
| 122 | + newSelection.right = hostRect.width - newSelection.left - selectionWidth; |
| 123 | + return newSelection; |
| 124 | + } |
| 125 | + |
| 126 | + let currentDx = dx; |
| 127 | + let currentDy = dy; |
| 128 | + |
| 129 | + if (this.isCircle() && handle.includes('-')) { |
| 130 | + if (handle === 'top-left' || handle === 'bottom-right') { |
| 131 | + currentDy = currentDx; |
| 132 | + } else { |
| 133 | + currentDy = -currentDx; |
| 134 | + } |
| 135 | + } |
| 136 | + |
| 137 | + if (handle.includes('top')) newSelection.top = startSelection.top + currentDy; |
| 138 | + if (handle.includes('bottom')) newSelection.bottom = startSelection.bottom - currentDy; |
| 139 | + if (handle.includes('left')) newSelection.left = startSelection.left + currentDx; |
| 140 | + if (handle.includes('right')) newSelection.right = startSelection.right - currentDx; |
| 141 | + |
| 142 | + const minW = this.minWidth(); |
| 143 | + const minH = this.isCircle() ? minW : this.minHeight(); |
| 144 | + |
| 145 | + if (hostRect.width - newSelection.left - newSelection.right < minW) { |
| 146 | + if (handle.includes('left')) newSelection.left = hostRect.width - newSelection.right - minW; |
| 147 | + else newSelection.right = hostRect.width - newSelection.left - minW; |
| 148 | + } |
| 149 | + if (hostRect.height - newSelection.top - newSelection.bottom < minH) { |
| 150 | + if (handle.includes('top')) newSelection.top = hostRect.height - newSelection.bottom - minH; |
| 151 | + else newSelection.bottom = hostRect.height - newSelection.top - minH; |
| 152 | + } |
| 153 | + |
| 154 | + newSelection.top = Math.max(0, newSelection.top); |
| 155 | + newSelection.bottom = Math.max(0, newSelection.bottom); |
| 156 | + newSelection.left = Math.max(0, newSelection.left); |
| 157 | + newSelection.right = Math.max(0, newSelection.right); |
| 158 | + |
| 159 | + return newSelection; |
| 160 | + }); |
| 161 | + } |
10 | 162 |
|
| 163 | + applySelection(): void { |
| 164 | + this.selectionApplied.emit(this.selection()); |
| 165 | + } |
11 | 166 | } |
0 commit comments