@madgex/design-system 13.4.0 → 13.5.0

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

@@ -0,0 +1,229 @@
+/**
+ * Compute the dimension of the crop area based on image size and aspect ratio
+ * @param imgWidth width of the src image in pixels
+ * @param imgHeight height of the src image in pixels
+ * @param aspect aspect ratio of the crop
+ */
+export function getCropSize(imgWidth = 0, imgHeight = 0, aspect) {
+  if (imgWidth >= imgHeight * aspect) {
+    return {
+      width: imgHeight * aspect,
+      height: imgHeight,
+    };
+  }
+  return {
+    width: imgWidth,
+    height: imgWidth / aspect,
+  };
+}
+
+/**
+ * Ensure a new image position stays in the crop area.
+ * @param position new x/y position requested for the image
+ * @param imageSize width/height of the src image
+ * @param cropSize width/height of the crop area
+ * @param  zoom zoom value
+ * @returns
+ */
+export function restrictPosition(position, imageSize, cropSize, zoom) {
+  return {
+    x: restrictPositionCoord(position.x, imageSize.width, cropSize.width, zoom),
+    y: restrictPositionCoord(position.y, imageSize.height, cropSize.height, zoom),
+  };
+}
+
+function restrictPositionCoord(position, imageSize, cropSize, zoom) {
+  // Default max position calculation
+  let maxPosition = (imageSize * zoom) / 2 - cropSize / 2;
+  // Allow free movement of the image inside the crop area if zoom is less than 1
+  // But limit the image's position to inside the cropBox
+  if (zoom < 1) {
+    maxPosition = cropSize / 2 - (imageSize * zoom) / 2;
+  }
+  return Math.min(maxPosition, Math.max(position, -maxPosition));
+}
+
+/**
+ * Compute the output cropped area of the image in percentages and pixels.
+ * x/y are the top-left coordinates on the src image
+ * @param  crop x/y position of the current center of the image
+ * @param  imageSize width/height of the src image (default is size on the screen, natural is the original size)
+ * @param  cropSize width/height of the crop area
+ * @param aspect aspect value
+ * @param zoom zoom value
+ * @param restrictPosition whether we should limit or not the cropped area
+ */
+export function computeCroppedArea({ crop, imageSize, cropSize, aspect, zoom, restrictPosition = true }) {
+  if (!cropSize?.width) return;
+  const limitAreaFn = restrictPosition ? limitArea : (_, value) => value;
+  const croppedAreaPercentages = {
+    x: limitAreaFn(100, (((imageSize.width - cropSize.width / zoom) / 2 - crop.x / zoom) / imageSize.width) * 100),
+    y: limitAreaFn(100, (((imageSize.height - cropSize.height / zoom) / 2 - crop.y / zoom) / imageSize.height) * 100),
+    width: limitAreaFn(100, ((cropSize.width / imageSize.width) * 100) / zoom),
+    height: limitAreaFn(100, ((cropSize.height / imageSize.height) * 100) / zoom),
+  };
+
+  // we compute the pixels size naively
+  const widthInPixels = limitAreaFn(
+    imageSize.naturalWidth,
+    (croppedAreaPercentages.width * imageSize.naturalWidth) / 100,
+    true,
+  );
+  const heightInPixels = limitAreaFn(
+    imageSize.naturalHeight,
+    (croppedAreaPercentages.height * imageSize.naturalHeight) / 100,
+    true,
+  );
+  const isImgWiderThanHigh = imageSize.naturalWidth >= imageSize.naturalHeight * aspect;
+
+  // then we ensure the width and height exactly match the aspect (to avoid rounding approximations)
+  // if the image is wider than high, when zoom is 0, the crop height will be equals to image height
+  // thus we want to compute the width from the height and aspect for accuracy.
+  // Otherwise, we compute the height from width and aspect.
+  const sizePixels = isImgWiderThanHigh
+    ? {
+        width: Math.round(heightInPixels * aspect),
+        height: heightInPixels,
+      }
+    : {
+        width: widthInPixels,
+        height: Math.round(widthInPixels / aspect),
+      };
+  const croppedAreaPixels = {
+    ...sizePixels,
+    x: limitAreaFn(
+      imageSize.naturalWidth - sizePixels.width,
+      (croppedAreaPercentages.x * imageSize.naturalWidth) / 100,
+      true,
+    ),
+    y: limitAreaFn(
+      imageSize.naturalHeight - sizePixels.height,
+      (croppedAreaPercentages.y * imageSize.naturalHeight) / 100,
+      true,
+    ),
+  };
+  return { percent: croppedAreaPercentages, pixels: croppedAreaPixels };
+}
+
+/**
+ * Ensure the returned value is between 0 and max
+ * @param max
+ * @param value
+ * @param shouldRound
+ */
+function limitArea(max, value, shouldRound = false) {
+  const v = shouldRound ? Math.round(value) : value;
+  return Math.min(max, Math.max(0, v));
+}
+
+const createImage = (url) =>
+  new Promise((resolve, reject) => {
+    const image = new Image();
+    image.addEventListener('load', () => resolve(image));
+    image.addEventListener('error', (error) => reject(error));
+    image.setAttribute('crossOrigin', 'anonymous'); // needed to avoid cross-origin issues
+    image.src = url;
+  });
+const RAD_TO_DEG = Math.PI / 180;
+
+/**
+ *
+ * @param {object} options
+ * @param {HTMLImageElement} options.imageEl
+ * @param {{x:number, y:number, width: number, height: number}} options.crop realsize in pixels vs original image dimensions, crop bounding box, origin 0 is center
+ * @param {number} options.rotateDeg degrees
+ * @param {string} options.format optional, default `png`
+ * @param {string} options.backgroundFill, optional, e.g. `#fff`
+ * @param {number} options.width, optional, fixed output width
+ * @param {number} options.height, optional, fixed output height
+ * @returns
+ */
+export async function getCroppedImage({
+  imageEl: origImageEl,
+  crop,
+  rotateDeg = 0,
+  format = 'png',
+  backgroundFill,
+  width,
+  height,
+}) {
+  if (!origImageEl || !crop) return null;
+
+  const imageEl = await createImage(origImageEl.src);
+  const canvas = document.createElement('canvas');
+  const ctx = canvas.getContext('2d');
+  if (!ctx) return null;
+
+  const scaleX = width ? width / crop.width : 1;
+  const scaleY = height ? height / crop.height : 1;
+
+  // const scaleX = imageEl.naturalWidth / imageEl.width;
+  // const scaleY = imageEl.naturalHeight / imageEl.height;
+
+  canvas.width = Math.floor(crop.width * scaleX);
+  canvas.height = Math.floor(crop.height * scaleY);
+
+  ctx.imageSmoothingQuality = 'high';
+
+  const cropX = crop.x * scaleX;
+  const cropY = crop.y * scaleY;
+
+  const rotateRads = rotateDeg * RAD_TO_DEG;
+  const centerX = (imageEl.naturalWidth / 2) * scaleX;
+  const centerY = (imageEl.naturalHeight / 2) * scaleY;
+
+  ctx.save();
+  // background fill color
+  if (backgroundFill) {
+    ctx.fillStyle = backgroundFill;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+
+  // Move the crop origin to the canvas origin (0,0)
+  ctx.translate(-cropX, -cropY);
+  // Move the origin to the center of the original image
+  ctx.translate(centerX, centerY);
+  // Rotate around the origin
+  ctx.rotate(rotateRads);
+  // Move the center of the image to the origin (0,0)
+  ctx.translate(-centerX, -centerY);
+
+  ctx.drawImage(
+    imageEl,
+    0, // canvas is translated, origin is "0"
+    0, // canvas is translated, origin is "0"
+    imageEl.naturalWidth, // source image size
+    imageEl.naturalHeight, // source image size
+    0, // canvas is translated, origin is "0"
+    0, // canvas is translated, origin is "0"
+    imageEl.naturalWidth * scaleX, // destination image size
+    imageEl.naturalHeight * scaleY, // destination image size
+  );
+
+  // As Base64 string
+  // return canvas.toDataURL('image/jpeg');
+  // As a blob
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        try {
+          resolve(blob);
+        } catch (error) {
+          reject(error);
+        }
+      },
+      `image/${format}`,
+      0.9,
+    );
+  });
+}
+/**
+ * Strip all HTML from a string. Useful as Safari does not support `setHTML`, a safe XSS function
+ * @param {string} htmlString
+ * @returns {string} clean text string
+ */
+export function stripHTML(htmlString) {
+  if (!htmlString) return htmlString;
+  let doc = new DOMParser().parseFromString(htmlString, 'text/html');
+  return doc.body.textContent || '';
+}

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: {},
+};