@semantic-components/ui-lab 0.62.0 → 0.63.0

package/src/lib/components/image-cropper/image-cropper-controls.ts

@@ -0,0 +1,95 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_IMAGE_CROPPER } from './image-cropper';
+
+@Component({
+  selector: '[sc-image-cropper-controls]',
+  template: `
+    <div class="flex items-center gap-2">
+      <button
+        type="button"
+        class="inline-flex size-8 items-center justify-center rounded-md border bg-background hover:bg-accent disabled:opacity-50"
+        [disabled]="cropper.zoom() <= 0.1"
+        (click)="cropper.zoomOut()"
+        aria-label="Zoom out"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          class="size-4"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+          <path d="M8 11h6" />
+        </svg>
+      </button>
+
+      <div class="flex items-center gap-2 min-w-[120px]">
+        <input
+          type="range"
+          min="0.1"
+          max="3"
+          step="0.1"
+          [value]="cropper.zoom()"
+          (input)="onZoomChange($event)"
+          class="w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer"
+        />
+      </div>
+
+      <button
+        type="button"
+        class="inline-flex size-8 items-center justify-center rounded-md border bg-background hover:bg-accent disabled:opacity-50"
+        [disabled]="cropper.zoom() >= 3"
+        (click)="cropper.zoomIn()"
+        aria-label="Zoom in"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          class="size-4"
+        >
+          <circle cx="11" cy="11" r="8" />
+          <path d="m21 21-4.3-4.3" />
+          <path d="M11 8v6" />
+          <path d="M8 11h6" />
+        </svg>
+      </button>
+
+      <span class="text-sm text-muted-foreground min-w-[50px] text-center">
+        {{ (cropper.zoom() * 100).toFixed(0) }}%
+      </span>
+    </div>
+  `,
+  host: {
+    'data-slot': 'image-cropper-controls',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScImageCropperControls {
+  readonly cropper = inject(SC_IMAGE_CROPPER);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('flex items-center gap-4 py-2', this.classInput()),
+  );
+
+  onZoomChange(event: Event): void {
+    const value = parseFloat((event.target as HTMLInputElement).value);
+    this.cropper.setZoom(value);
+  }
+}

package/src/lib/components/image-cropper/image-cropper-preview.ts

@@ -0,0 +1,66 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  inject,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+import { SC_IMAGE_CROPPER } from './image-cropper';
+
+@Component({
+  selector: '[sc-image-cropper-preview]',
+  template: `
+    <div
+      class="overflow-hidden bg-muted"
+      [style.width.px]="width()"
+      [style.height.px]="height()"
+    >
+      <img
+        [src]="cropper.src()"
+        class="max-w-none"
+        [style.width.px]="imageWidth()"
+        [style.height.px]="imageHeight()"
+        [style.transform]="transform()"
+        alt="Crop preview"
+      />
+    </div>
+  `,
+  host: {
+    'data-slot': 'image-cropper-preview',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScImageCropperPreview {
+  readonly cropper = inject(SC_IMAGE_CROPPER);
+
+  readonly classInput = input<string>('', { alias: 'class' });
+  readonly width = input<number>(100);
+  readonly height = input<number>(100);
+
+  protected readonly class = computed(() =>
+    cn('inline-block rounded-md border', this.classInput()),
+  );
+
+  protected readonly imageWidth = computed(() => {
+    const crop = this.cropper.cropArea();
+    return (this.width() / crop.width) * this.cropper.containerHeight() * 2;
+  });
+
+  protected readonly imageHeight = computed(() => {
+    const crop = this.cropper.cropArea();
+    return (this.height() / crop.height) * this.cropper.containerHeight() * 2;
+  });
+
+  protected readonly transform = computed(() => {
+    const crop = this.cropper.cropArea();
+    const scaleX = this.width() / crop.width;
+    const scaleY = this.height() / crop.height;
+    const translateX = -crop.x * scaleX;
+    const translateY = -crop.y * scaleY;
+    return `translate(${translateX}px, ${translateY}px)`;
+  });
+}

package/src/lib/components/image-cropper/image-cropper.ts

@@ -0,0 +1,459 @@
+import {
+  afterNextRender,
+  Directive,
+  InjectionToken,
+  input,
+  model,
+  OnDestroy,
+  output,
+  signal,
+} from '@angular/core';
+
+export interface CropArea {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+}
+
+export interface CropResult {
+  dataUrl: string;
+  blob: Blob | null;
+  width: number;
+  height: number;
+}
+
+/**
+ * Injection token for ScImageCropper
+ */
+export interface ScImageCropper {
+  // Inputs
+  src: () => string;
+  aspectRatio: () => number | null;
+  minWidth: () => number;
+  minHeight: () => number;
+  containerHeight: () => number;
+  showGrid: () => boolean;
+  disabled: () => boolean;
+  outputType: () => 'image/png' | 'image/jpeg' | 'image/webp';
+  outputQuality: () => number;
+
+  // Models
+  cropArea: ReturnType<typeof model<CropArea>>;
+  zoom: ReturnType<typeof model<number>>;
+
+  // Outputs
+  cropChange: ReturnType<typeof output<CropArea>>;
+  imageLoaded: ReturnType<typeof output<{ width: number; height: number }>>;
+
+  // State
+  imageNaturalWidth: ReturnType<typeof signal<number>>;
+  imageNaturalHeight: ReturnType<typeof signal<number>>;
+  imageLoaded$: ReturnType<typeof signal<boolean>>;
+  isDragging: boolean;
+  isResizing: boolean;
+  resizeHandle: string;
+  startX: number;
+  startY: number;
+  startCropArea: CropArea;
+
+  // Methods
+  onImageLoad: (width: number, height: number) => void;
+  initializeCropArea: (containerWidth: number) => void;
+  getScaledImageWidth: () => number;
+  getScaledImageHeight: () => number;
+  startDragging: (clientX: number, clientY: number) => void;
+  startResizing: (clientX: number, clientY: number, handle: string) => void;
+  handleDrag: (
+    clientX: number,
+    clientY: number,
+    containerWidth: number,
+  ) => void;
+  handleResize: (
+    clientX: number,
+    clientY: number,
+    containerWidth: number,
+  ) => void;
+  stopInteraction: () => void;
+  crop: (
+    imageElement: HTMLImageElement,
+    canvasElement: HTMLCanvasElement,
+    containerWidth: number,
+  ) => Promise<CropResult>;
+  resetCropArea: (containerWidth: number) => void;
+  setZoom: (value: number) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+}
+
+export const SC_IMAGE_CROPPER = new InjectionToken<ScImageCropper>(
+  'SC_IMAGE_CROPPER',
+);
+
+@Directive({
+  selector: '[sc-image-cropper]',
+  exportAs: 'scImageCropper',
+  providers: [
+    { provide: SC_IMAGE_CROPPER, useExisting: ScImageCropperDirective },
+  ],
+  host: {
+    'data-slot': 'image-cropper',
+    '[attr.data-disabled]': 'disabled() || null',
+  },
+})
+export class ScImageCropperDirective implements ScImageCropper, OnDestroy {
+  // Configuration inputs
+  readonly src = input.required<string>();
+  readonly aspectRatio = input<number | null>(null);
+  readonly minWidth = input<number>(50);
+  readonly minHeight = input<number>(50);
+  readonly containerHeight = input<number>(400);
+  readonly showGrid = input<boolean>(true);
+  readonly disabled = input<boolean>(false);
+  readonly outputType = input<'image/png' | 'image/jpeg' | 'image/webp'>(
+    'image/png',
+  );
+  readonly outputQuality = input<number>(0.92);
+
+  // Models for two-way binding
+  readonly cropArea = model<CropArea>({
+    x: 50,
+    y: 50,
+    width: 200,
+    height: 200,
+  });
+  readonly zoom = model<number>(1);
+
+  // Outputs
+  readonly cropChange = output<CropArea>();
+  readonly imageLoaded = output<{ width: number; height: number }>();
+
+  // Internal state signals
+  readonly imageNaturalWidth = signal(0);
+  readonly imageNaturalHeight = signal(0);
+  readonly imageLoaded$ = signal(false);
+
+  // Drag/resize state (not signals since they change frequently)
+  isDragging = false;
+  isResizing = false;
+  resizeHandle = '';
+  startX = 0;
+  startY = 0;
+  startCropArea: CropArea = { x: 0, y: 0, width: 0, height: 0 };
+
+  private readonly boundMouseMove = this.onMouseMove.bind(this);
+  private readonly boundMouseUp = this.onMouseUp.bind(this);
+  private readonly boundTouchMove = this.onTouchMove.bind(this);
+  private readonly boundTouchEnd = this.onTouchEnd.bind(this);
+
+  constructor() {
+    afterNextRender(() => {
+      document.addEventListener('mousemove', this.boundMouseMove);
+      document.addEventListener('mouseup', this.boundMouseUp);
+      document.addEventListener('touchmove', this.boundTouchMove, {
+        passive: false,
+      });
+      document.addEventListener('touchend', this.boundTouchEnd);
+    });
+  }
+
+  ngOnDestroy(): void {
+    document.removeEventListener('mousemove', this.boundMouseMove);
+    document.removeEventListener('mouseup', this.boundMouseUp);
+    document.removeEventListener('touchmove', this.boundTouchMove);
+    document.removeEventListener('touchend', this.boundTouchEnd);
+  }
+
+  // Public methods for child components
+  getScaledImageWidth(): number {
+    return this.imageNaturalWidth() * this.zoom();
+  }
+
+  getScaledImageHeight(): number {
+    return this.imageNaturalHeight() * this.zoom();
+  }
+
+  onImageLoad(width: number, height: number): void {
+    this.imageNaturalWidth.set(width);
+    this.imageNaturalHeight.set(height);
+    this.imageLoaded$.set(true);
+
+    this.imageLoaded.emit({ width, height });
+  }
+
+  initializeCropArea(containerWidth: number): void {
+    const containerH = this.containerHeight();
+    const imgW = this.getScaledImageWidth();
+    const imgH = this.getScaledImageHeight();
+
+    // Calculate displayed image dimensions within container
+    const scale = Math.min(containerWidth / imgW, containerH / imgH, 1);
+    const displayedW = imgW * scale;
+    const displayedH = imgH * scale;
+
+    // Center the crop area
+    const aspectRatio = this.aspectRatio();
+    let cropW = Math.min(displayedW * 0.8, displayedW);
+    let cropH = Math.min(displayedH * 0.8, displayedH);
+
+    if (aspectRatio !== null) {
+      if (cropW / aspectRatio <= displayedH) {
+        cropH = cropW / aspectRatio;
+      } else {
+        cropW = cropH * aspectRatio;
+      }
+    }
+
+    const x = (containerWidth - cropW) / 2;
+    const y = (containerH - cropH) / 2;
+
+    this.cropArea.set({
+      x: Math.max(0, x),
+      y: Math.max(0, y),
+      width: cropW,
+      height: cropH,
+    });
+  }
+
+  startDragging(clientX: number, clientY: number): void {
+    this.isDragging = true;
+    this.startX = clientX;
+    this.startY = clientY;
+    this.startCropArea = { ...this.cropArea() };
+  }
+
+  startResizing(clientX: number, clientY: number, handle: string): void {
+    this.isResizing = true;
+    this.resizeHandle = handle;
+    this.startX = clientX;
+    this.startY = clientY;
+    this.startCropArea = { ...this.cropArea() };
+  }
+
+  handleDrag(clientX: number, clientY: number, containerWidth: number): void {
+    const deltaX = clientX - this.startX;
+    const deltaY = clientY - this.startY;
+
+    const containerH = this.containerHeight();
+    const crop = this.startCropArea;
+
+    let newX = crop.x + deltaX;
+    let newY = crop.y + deltaY;
+
+    // Constrain to container
+    newX = Math.max(0, Math.min(newX, containerWidth - crop.width));
+    newY = Math.max(0, Math.min(newY, containerH - crop.height));
+
+    this.cropArea.set({
+      ...this.cropArea(),
+      x: newX,
+      y: newY,
+    });
+
+    this.cropChange.emit(this.cropArea());
+  }
+
+  handleResize(clientX: number, clientY: number, containerWidth: number): void {
+    const deltaX = clientX - this.startX;
+    const deltaY = clientY - this.startY;
+    const crop = this.startCropArea;
+    const aspectRatio = this.aspectRatio();
+    const minW = this.minWidth();
+    const minH = this.minHeight();
+    const containerH = this.containerHeight();
+
+    let newX = crop.x;
+    let newY = crop.y;
+    let newW = crop.width;
+    let newH = crop.height;
+
+    switch (this.resizeHandle) {
+      case 'se':
+        newW = Math.max(minW, crop.width + deltaX);
+        newH =
+          aspectRatio !== null
+            ? newW / aspectRatio
+            : Math.max(minH, crop.height + deltaY);
+        break;
+      case 'sw':
+        newW = Math.max(minW, crop.width - deltaX);
+        newH =
+          aspectRatio !== null
+            ? newW / aspectRatio
+            : Math.max(minH, crop.height + deltaY);
+        newX = crop.x + crop.width - newW;
+        break;
+      case 'ne':
+        newW = Math.max(minW, crop.width + deltaX);
+        newH =
+          aspectRatio !== null
+            ? newW / aspectRatio
+            : Math.max(minH, crop.height - deltaY);
+        newY = crop.y + crop.height - newH;
+        break;
+      case 'nw':
+        newW = Math.max(minW, crop.width - deltaX);
+        newH =
+          aspectRatio !== null
+            ? newW / aspectRatio
+            : Math.max(minH, crop.height - deltaY);
+        newX = crop.x + crop.width - newW;
+        newY = crop.y + crop.height - newH;
+        break;
+      case 'n':
+        newH = Math.max(minH, crop.height - deltaY);
+        if (aspectRatio !== null) newW = newH * aspectRatio;
+        newY = crop.y + crop.height - newH;
+        break;
+      case 's':
+        newH = Math.max(minH, crop.height + deltaY);
+        if (aspectRatio !== null) newW = newH * aspectRatio;
+        break;
+      case 'w':
+        newW = Math.max(minW, crop.width - deltaX);
+        if (aspectRatio !== null) newH = newW / aspectRatio;
+        newX = crop.x + crop.width - newW;
+        break;
+      case 'e':
+        newW = Math.max(minW, crop.width + deltaX);
+        if (aspectRatio !== null) newH = newW / aspectRatio;
+        break;
+    }
+
+    // Constrain to container
+    if (newX < 0) {
+      newW += newX;
+      newX = 0;
+    }
+    if (newY < 0) {
+      newH += newY;
+      newY = 0;
+    }
+    if (newX + newW > containerWidth) {
+      newW = containerWidth - newX;
+    }
+    if (newY + newH > containerH) {
+      newH = containerH - newY;
+    }
+
+    // Maintain aspect ratio after constraints
+    if (aspectRatio !== null) {
+      if (newW / aspectRatio > newH) {
+        newW = newH * aspectRatio;
+      } else {
+        newH = newW / aspectRatio;
+      }
+    }
+
+    this.cropArea.set({
+      x: newX,
+      y: newY,
+      width: Math.max(minW, newW),
+      height: Math.max(minH, newH),
+    });
+
+    this.cropChange.emit(this.cropArea());
+  }
+
+  stopInteraction(): void {
+    this.isDragging = false;
+    this.isResizing = false;
+  }
+
+  private onMouseMove(event: MouseEvent): void {
+    if (this.isDragging || this.isResizing) {
+      // Will be handled by container component
+    }
+  }
+
+  private onTouchMove(event: TouchEvent): void {
+    if (this.isDragging || this.isResizing) {
+      event.preventDefault();
+    }
+  }
+
+  private onMouseUp(): void {
+    this.stopInteraction();
+  }
+
+  private onTouchEnd(): void {
+    this.stopInteraction();
+  }
+
+  async crop(
+    imageElement: HTMLImageElement,
+    canvasElement: HTMLCanvasElement,
+    containerWidth: number,
+  ): Promise<CropResult> {
+    const crop = this.cropArea();
+    const containerH = this.containerHeight();
+
+    // Calculate the scale between displayed image and natural image
+    const displayedW = this.getScaledImageWidth();
+    const displayedH = this.getScaledImageHeight();
+    const scale = Math.min(
+      containerWidth / displayedW,
+      containerH / displayedH,
+      1,
+    );
+
+    const offsetX = (containerWidth - displayedW * scale) / 2;
+    const offsetY = (containerH - displayedH * scale) / 2;
+
+    // Convert crop area to natural image coordinates
+    const naturalScale = this.imageNaturalWidth() / (displayedW * scale);
+    const srcX = (crop.x - offsetX) * naturalScale;
+    const srcY = (crop.y - offsetY) * naturalScale;
+    const srcW = crop.width * naturalScale;
+    const srcH = crop.height * naturalScale;
+
+    // Set canvas size to crop dimensions
+    canvasElement.width = srcW;
+    canvasElement.height = srcH;
+
+    const ctx = canvasElement.getContext('2d');
+    if (!ctx) {
+      throw new Error('Could not get canvas context');
+    }
+
+    // Draw cropped portion
+    ctx.drawImage(imageElement, srcX, srcY, srcW, srcH, 0, 0, srcW, srcH);
+
+    // Get result
+    const dataUrl = canvasElement.toDataURL(
+      this.outputType(),
+      this.outputQuality(),
+    );
+
+    return new Promise((resolve) => {
+      canvasElement.toBlob(
+        (blob) => {
+          resolve({
+            dataUrl,
+            blob,
+            width: srcW,
+            height: srcH,
+          });
+        },
+        this.outputType(),
+        this.outputQuality(),
+      );
+    });
+  }
+
+  resetCropArea(containerWidth: number): void {
+    this.initializeCropArea(containerWidth);
+  }
+
+  setZoom(value: number): void {
+    this.zoom.set(Math.max(0.1, Math.min(3, value)));
+  }
+
+  zoomIn(): void {
+    this.setZoom(this.zoom() + 0.1);
+  }
+
+  zoomOut(): void {
+    this.setZoom(this.zoom() - 0.1);
+  }
+}

package/src/lib/components/image-cropper/index.ts

@@ -0,0 +1,10 @@
+export {
+  SC_IMAGE_CROPPER,
+  ScImageCropperDirective,
+  ScImageCropperDirective as ScImageCropper,
+} from './image-cropper';
+export type { CropArea, CropResult } from './image-cropper';
+export { ScImageCropperContainer } from './image-cropper-container';
+export { ScImageCropperControls } from './image-cropper-controls';
+export { ScImageCropperPreview } from './image-cropper-preview';
+export { ScImageCropperAspectRatio } from './image-cropper-aspect-ratio';