@semantic-components/ui-lab 0.63.0 → 0.65.0

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

@@ -1,95 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,459 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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';