@madgex/design-system 13.3.2 → 13.5.0

package/src/components/image-cropper/helpers.spec.js

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { getCropSize, restrictPosition, computeCroppedArea, stripHTML } from './helpers.js';
+
+// ------------------------------
+// getCropSize
+// ------------------------------
+describe('getCropSize', () => {
+  it('returns correct size when image is wider than aspect', () => {
+    const result = getCropSize(1000, 500, 1);
+    expect(result).toEqual({ width: 500, height: 500 });
+  });
+
+  it('returns correct size when image is taller than aspect', () => {
+    const result = getCropSize(400, 800, 1);
+    expect(result).toEqual({ width: 400, height: 400 });
+  });
+});
+
+// ------------------------------
+// restrictPosition
+// ------------------------------
+describe('restrictPosition', () => {
+  it('clamps values correctly for zoom >= 1', () => {
+    const position = { x: 500, y: -500 };
+    const imageSize = { width: 1000, height: 1000 };
+    const cropSize = { width: 500, height: 500 };
+    const zoom = 1;
+
+    const result = restrictPosition(position, imageSize, cropSize, zoom);
+
+    // max = 1000/2 - 500/2 = 250
+    expect(result).toEqual({ x: 250, y: -250 });
+  });
+
+  it('uses reversed clamp when zoom < 1', () => {
+    const position = { x: 300, y: -300 };
+    const imageSize = { width: 1000, height: 1000 };
+    const cropSize = { width: 500, height: 500 };
+    const zoom = 0.5;
+
+    const result = restrictPosition(position, imageSize, cropSize, zoom);
+
+    // max = cropSize/2 - (imageSize * zoom)/2 = 250 - 500/2 = 0
+    expect(result).toEqual({ x: 0, y: -0 });
+  });
+});
+
+// ------------------------------
+// computeCroppedArea
+// ------------------------------
+describe('computeCroppedArea', () => {
+  it('computes correct percentages and pixels', () => {
+    const crop = { x: 0, y: 0 };
+    const imageSize = {
+      width: 1000,
+      height: 500,
+      naturalWidth: 1000,
+      naturalHeight: 500,
+    };
+    const cropSize = { width: 500, height: 250 };
+    const zoom = 1;
+    const aspect = 2;
+
+    const result = computeCroppedArea({
+      crop,
+      imageSize,
+      cropSize,
+      aspect,
+      zoom,
+    });
+
+    expect(result).toBeDefined();
+    expect(result.percent.width).toBe(50);
+    expect(result.pixels.width).toBe(Math.round(result.pixels.height * aspect));
+  });
+
+  it('returns undefined if cropSize has no width', () => {
+    const result = computeCroppedArea({
+      crop: { x: 0, y: 0 },
+      imageSize: {
+        width: 1000,
+        height: 500,
+        naturalWidth: 1000,
+        naturalHeight: 500,
+      },
+      cropSize: { width: 0, height: 250 },
+      aspect: 2,
+      zoom: 1,
+    });
+
+    expect(result).toBeUndefined();
+  });
+});
+
+// ------------------------------
+// stripHTML
+// ------------------------------
+describe('stripHTML', () => {
+  it('removes all HTML tags', () => {
+    const result = stripHTML(
+      `<div>Hello <b>World</b></div><img src=x onerror=alert('bang')><script>alert('bang);</script>`,
+    );
+    expect(result).toBe(`Hello Worldalert('bang);`);
+  });
+
+  it('returns input when falsy', () => {
+    expect(stripHTML('')).toBe('');
+    expect(stripHTML(null)).toBe(null);
+    expect(stripHTML(undefined)).toBe(undefined);
+  });
+});

package/src/components/image-cropper/image-cropper-standalone.scss

@@ -0,0 +1,2 @@
+/* relying on purgecss to remove unused css */
+@import '../../scss/index.scss';

package/src/components/image-cropper/image-cropper-touch-area.js

@@ -0,0 +1,270 @@
+/**
+ * MdsImageCropperTouchArea
+ *
+ * Handle mouse drag, touch drag, mouse wheel to zoom, pinch to zoom. A11y keypress to pan (drag)
+ *
+ * Emit position and zoom updates
+ *
+ */
+export class MdsImageCropperTouchArea extends HTMLElement {
+  /** on drag start, record initial position to calculate offset */
+  #dragStartPosition = { x: 0, y: 0 };
+  /** on drag start, record initial position, to calculate new offset position */
+  #dragStartRecordedPosition = { x: 0, y: 0 };
+  /** used to calculate zoom amount on pinch move */
+  #lastPinchDistance = 0;
+  /** reference to animationFrame, drag calculations are done per frame (not per drag event) */
+  #rafDragTimeout = null;
+  /** reference to animationFrame, zoom calculations are done per frame (not per drag event) */
+  #rafZoomTimeout = null;
+
+  #zoomSpeed = 1;
+
+  constructor() {
+    super();
+  }
+  get rootNode() {
+    return this;
+  }
+  get #document() {
+    return this.getRootNode({ composed: true });
+  }
+  connectedCallback() {
+    this.create();
+    // ensure this is focusable for keyboard arrow control
+    this.setAttribute('tabindex', '0');
+  }
+
+  disconnectedCallback() {
+    this.destroy();
+  }
+  #dispatchEvent(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { detail, bubbles: true, composed: true }));
+  }
+  create() {
+    this.addEventListener('gesturestart', this.#onGesturePreventZoomSafari);
+    this.addEventListener('gesturechange', this.#onGesturePreventZoomSafari);
+
+    this.addEventListener('touchstart', this.#onTouchStart);
+    this.addEventListener('mousedown', this.#onMouseDown);
+    this.addEventListener('wheel', this.#onWheel, { passive: false }); // ensure passive on ios
+    this.addEventListener('keydown', this.#onKeydown);
+  }
+
+  /** destroy remove events */
+  destroy() {
+    this.removeEventListener('gesturestart', this.#onGesturePreventZoomSafari);
+    this.removeEventListener('gesturechange', this.#onGesturePreventZoomSafari);
+
+    this.removeEventListener('touchstart', this.#onTouchStart);
+    this.removeEventListener('mousedown', this.#onMouseDown);
+    this.removeEventListener('wheel', this.#onWheel);
+    this.removeEventListener('keydown', this.#onKeydown);
+
+    this.#removeDragEventListeners();
+  }
+  get #position() {
+    const x = this.getAttribute('position-x');
+    const y = this.getAttribute('position-y');
+    return { x: x ? parseFloat(x) : 0, y: y ? parseFloat(y) : 0 };
+  }
+  set #position({ x, y }) {
+    this.#dispatchEvent('position', { x, y });
+  }
+  get #zoom() {
+    return parseFloat(this.getAttribute('zoom') || '1');
+  }
+  set #zoom(newZoom) {
+    this.#dispatchEvent('zoom', newZoom);
+  }
+  get #minZoom() {
+    return parseFloat(this.getAttribute('min-zoom') || '1');
+  }
+  get #maxZoom() {
+    return parseFloat(this.getAttribute('max-zoom') || '3');
+  }
+
+  /** Return the point that is the center of point a and b */
+  #getCenter(a, b) {
+    return {
+      x: (b.x + a.x) / 2,
+      y: (b.y + a.y) / 2,
+    };
+  }
+  /** Distance between two points */
+  #getDistanceBetweenPoints(pointA, pointB) {
+    return Math.sqrt(Math.pow(pointA.y - pointB.y, 2) + Math.pow(pointA.x - pointB.x, 2));
+  }
+
+  // Event Handlers
+  /** this is to prevent Safari on iOS >= 10 to zoom the page */
+  #onGesturePreventZoomSafari = (e) => {
+    e.preventDefault();
+  };
+  #onMouseDown = (e) => {
+    e.preventDefault();
+    // add mouse events only if mouse detected (no conflict with touch events)
+    this.#document.addEventListener('mousemove', this.#onMouseMove);
+    this.#document.addEventListener('mouseup', this.#onDragStopped);
+    this.#onDragStart({ x: e.clientX, y: e.clientY });
+  };
+  #onMouseMove = (e) => {
+    this.#onDrag({ x: e.clientX, y: e.clientY });
+  };
+  #onTouchStart = (e) => {
+    e.preventDefault();
+    // add touch events only if touch detected (no conflict with mouse events)
+    this.#document.addEventListener('touchmove', this.#onTouchMove, { passive: false }); // iOS 11 defaults to passive: true
+    this.#document.addEventListener('touchend', this.#onDragStopped);
+
+    if (e.touches.length === 2) {
+      this.#onPinchStart(e);
+    } else if (e.touches.length === 1) {
+      this.#onDragStart({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+    }
+  };
+  #onTouchMove = (e) => {
+    // Prevent whole page from scrolling on iOS.
+    e.preventDefault();
+    if (e.touches.length === 2) {
+      this.#onPinchMove(e);
+    } else if (e.touches.length === 1) {
+      this.#onDrag({ x: e.touches[0].clientX, y: e.touches[0].clientY });
+    }
+  };
+  /**
+   * on touch or mouse start, record the starting position
+   * @param {object} startingPosition
+   */
+  #onDragStart({ x, y }) {
+    this.#dragStartPosition = { x, y };
+    this.#dragStartRecordedPosition = { x: this.#position.x, y: this.#position.y };
+  }
+
+  /**
+   * used by both touchmove and mousemove, updates position on requestAnimationFrame
+   * @param {{x:number, y:number}} point current point, used to calculate drag offset
+   */
+  #onDrag({ x, y }) {
+    if (this.#rafDragTimeout) window.cancelAnimationFrame(this.#rafDragTimeout);
+
+    this.#rafDragTimeout = window.requestAnimationFrame(() => {
+      if (x === undefined || y === undefined) return;
+      const offsetX = x - this.#dragStartPosition.x;
+      const offsetY = y - this.#dragStartPosition.y;
+      const requestedPosition = {
+        x: this.#dragStartRecordedPosition.x + offsetX,
+        y: this.#dragStartRecordedPosition.y + offsetY,
+      };
+      this.#position = requestedPosition;
+    });
+  }
+  /**
+   * used for both mouseup and touchend
+   */
+  #onDragStopped = () => {
+    this.#removeDragEventListeners();
+    this.#dispatchEvent('dragstopped');
+  };
+
+  #onPinchStart = (e) => {
+    const pointA = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    const pointB = { x: e.touches[1].clientX, y: e.touches[1].clientY };
+    this.#lastPinchDistance = this.#getDistanceBetweenPoints(pointA, pointB);
+    this.#onDragStart(this.#getCenter(pointA, pointB));
+  };
+
+  #onPinchMove = (e) => {
+    const pointA = { x: e.touches[0].clientX, y: e.touches[0].clientY };
+    const pointB = { x: e.touches[1].clientX, y: e.touches[1].clientY };
+    const center = this.#getCenter(pointA, pointB);
+    this.#onDrag(center);
+
+    if (this.#rafZoomTimeout) window.cancelAnimationFrame(this.#rafZoomTimeout);
+    this.#rafZoomTimeout = window.requestAnimationFrame(() => {
+      const distance = this.#getDistanceBetweenPoints(pointA, pointB);
+      const newZoom = this.#zoom * (distance / this.#lastPinchDistance);
+      this.#updateZoomAndPosition(newZoom, center);
+      this.#lastPinchDistance = distance;
+    });
+  };
+
+  #onWheel = (e) => {
+    e.preventDefault();
+    const point = { x: e.clientX, y: e.clientY };
+    const newZoom = this.#zoom - (e.deltaY * this.#zoomSpeed) / 200;
+    this.#updateZoomAndPosition(newZoom, point);
+  };
+
+  #onKeydown = (e) => {
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        this.#position = { x: this.#position.x, y: this.#position.y + 10 };
+        break;
+      case 'ArrowUp':
+        e.preventDefault();
+        this.#position = { x: this.#position.x, y: this.#position.y - 10 };
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        this.#position = { x: this.#position.x - 10, y: this.#position.y };
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        this.#position = { x: this.#position.x + 10, y: this.#position.y };
+        break;
+      case 'PageUp':
+        e.preventDefault();
+        this.#zoom = Math.min(this.#maxZoom, Math.max(this.#zoom + 0.1, this.#minZoom));
+        break;
+      case 'PageDown':
+        e.preventDefault();
+        this.#zoom = Math.min(this.#maxZoom, Math.max(this.#zoom - 0.1, this.#minZoom));
+        break;
+      default:
+        return;
+    }
+  };
+
+  #removeDragEventListeners() {
+    this.#document.removeEventListener('mousemove', this.#onMouseMove);
+    this.#document.removeEventListener('mouseup', this.#onDragStopped);
+    this.#document.removeEventListener('touchmove', this.#onTouchMove);
+    this.#document.removeEventListener('touchend', this.#onDragStopped);
+  }
+
+  #getPointOnContainer({ x, y }) {
+    const containerRect = this.getBoundingClientRect();
+    if (!containerRect) {
+      throw new Error('The element is not mounted');
+    }
+    return {
+      x: containerRect.width / 2 - (x - containerRect.left),
+      y: containerRect.height / 2 - (y - containerRect.top),
+    };
+  }
+  #getPointRelativeToPosition({ x, y }) {
+    return {
+      x: (x + this.#position.x) / this.#zoom,
+      y: (y + this.#position.y) / this.#zoom,
+    };
+  }
+  /**
+   * set a new zoom level, using the point location of the user's zoom on the screen to also update the position
+   * @param {number} newZoom float
+   * @param {{x:number, y: number}} point point based on area
+   */
+  #updateZoomAndPosition(newZoom, point) {
+    const zoomPoint = this.#getPointOnContainer(point);
+    const zoomTarget = this.#getPointRelativeToPosition(zoomPoint);
+
+    this.#zoom = Math.min(this.#maxZoom, Math.max(newZoom, this.#minZoom));
+
+    const requestedPosition = {
+      x: zoomTarget.x * this.#zoom - zoomPoint.x,
+      y: zoomTarget.y * this.#zoom - zoomPoint.y,
+    };
+    this.#position = requestedPosition;
+  }
+}

package/src/components/image-cropper/image-cropper.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  title: 'Image Cropper',
+  label: 'Image Cropper',
+  status: 'wip',
+  context: {},
+};