pixedi 1.0.0 → 1.0.2

package/src/shared/components/ImageEditor/utils.test.ts

@@ -1,136 +0,0 @@
-import { describe, expect, it } from "vitest";
-import {
-  degree2Rad,
-  getCropByNewSizes,
-  getCropPoints,
-  getInitalCrop,
-} from "./utils";
-
-const element = {
-  offsetLeft: 10,
-  offsetTop: 20,
-  offsetWidth: 80,
-  offsetHeight: 60,
-} as HTMLElement;
-
-describe("getInitalCrop", () => {
-  it.each([
-    [1, 200, 100, { x: 30, y: 10, w: 40, h: 80 }],
-    [
-      16 / 9,
-      200,
-      100,
-      { x: 14.444444444444446, y: 10, w: 71.11111111111111, h: 80 },
-    ],
-    [9 / 16, 200, 100, { x: 38.75, y: 10, w: 22.5, h: 80 }],
-    [1, 100, 200, { x: 10, y: 30, w: 80, h: 40 }],
-  ])(
-    "centers a %s crop inside a %sx%s frame",
-    (ratio, width, height, expected) => {
-      const crop = getInitalCrop(ratio, width, height);
-
-      expect(crop.x).toBeCloseTo(expected.x);
-      expect(crop.y).toBeCloseTo(expected.y);
-      expect(crop.w).toBeCloseTo(expected.w);
-      expect(crop.h).toBeCloseTo(expected.h);
-      expect(crop.x + crop.w / 2).toBeCloseTo(50);
-      expect(crop.y + crop.h / 2).toBeCloseTo(50);
-    },
-  );
-});
-
-describe("getCropPoints", () => {
-  it("keeps free-form edge resizing within the frame and minimum width", () => {
-    const crop = getCropPoints(
-      "r",
-      true,
-      1,
-      100,
-      0,
-      -100,
-      0,
-      100,
-      100,
-      { x: 10, y: 20, w: 40, h: 50 },
-      element,
-    );
-
-    expect(crop).toEqual({ x: 10, y: 20, w: 32, h: 50 });
-  });
-
-  it("keeps free-form corner resizing within parent bounds", () => {
-    const crop = getCropPoints(
-      "br",
-      true,
-      1,
-      0,
-      0,
-      200,
-      200,
-      100,
-      100,
-      { x: 20, y: 30, w: 40, h: 40 },
-      element,
-    );
-
-    expect(crop).toEqual({ x: 20, y: 30, w: 80, h: 70 });
-  });
-
-  it("preserves fixed ratios when the requested resize remains valid", () => {
-    const crop = getCropPoints(
-      "r",
-      false,
-      2,
-      100,
-      0,
-      120,
-      0,
-      200,
-      200,
-      { x: 50, y: 50, w: 80, h: 40 },
-      element,
-    );
-
-    expect(crop).toEqual({ x: 50, y: 45, w: 100, h: 50 });
-    expect(crop.w / crop.h).toBe(2);
-  });
-
-  it("restores the element rectangle for invalid fixed-ratio resizes", () => {
-    const crop = getCropPoints(
-      "r",
-      false,
-      2,
-      100,
-      0,
-      200,
-      0,
-      100,
-      100,
-      { x: 10, y: 20, w: 80, h: 40 },
-      element,
-    );
-
-    expect(crop).toEqual({ x: 10, y: 20, w: 80, h: 60 });
-  });
-});
-
-describe("crop utility helpers", () => {
-  it("rescales crop rectangles and clamps their visible bounds", () => {
-    expect(
-      getCropByNewSizes({ x: -1, y: 10, w: 80, h: 60 }, 100, 50, 50),
-    ).toEqual({
-      x: 0,
-      y: 20,
-      w: 100,
-      h: 50,
-    });
-  });
-
-  it.each([
-    [0, 0],
-    [90, Math.PI / 2],
-    [180, Math.PI],
-  ])("converts %s degrees to radians", (degrees, radians) => {
-    expect(degree2Rad(degrees)).toBeCloseTo(radians);
-  });
-});

package/src/shared/components/ImageEditor/utils.ts

@@ -1,497 +0,0 @@
-import type { CropRect, Direction } from "./types";
-
-const minSize = 32;
-
-const getDefaultCrop = (el: HTMLElement): CropRect => ({
-  x: el.offsetLeft,
-  y: el.offsetTop,
-  w: el.offsetWidth,
-  h: el.offsetHeight,
-});
-
-const getCropR = (
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  clientX: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  const { x } = crop;
-  let { y, w, h } = crop;
-
-  if (isFree) {
-    w += clientX - startX;
-    if (w + x > width) w = width - x;
-    if (w < minSize) w = minSize;
-  } else {
-    const difW = clientX - startX;
-    const difH = Math.round(difW / ratio);
-    w += difW;
-    h += difH;
-    y -= difH / 2;
-    if (
-      y < 0 ||
-      h + y > height ||
-      w + x > width ||
-      w < minSize ||
-      h < minSize
-    ) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropL = (
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  clientX: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  let { x, y, w, h } = crop;
-
-  if (isFree) {
-    const right = width - crop.w - crop.x;
-    x += clientX - startX;
-    if (x < 0) x = 0;
-    w = width - x - right;
-    if (w < minSize) {
-      w = minSize;
-      x = width - right - minSize;
-    }
-  } else {
-    const difW = clientX - startX;
-    const difH = Math.round(difW / ratio);
-    w -= difW;
-    h -= difH;
-    x += difW;
-    y += difH / 2;
-    if (y < 0 || x < 0 || h + y > height || w < minSize || h < minSize) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropT = (
-  isFree: boolean,
-  ratio: number,
-  startY: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  let { x, y, w, h } = crop;
-
-  const bottom = height - h - y;
-  if (isFree) {
-    y += clientY - startY;
-    if (y < 0) y = 0;
-    h = height - y - bottom;
-    if (h < minSize) {
-      h = minSize;
-      y = height - bottom - minSize;
-    }
-  } else {
-    const difH = clientY - startY;
-    const difW = Math.round(difH * ratio);
-    h -= difH;
-    w -= difW;
-    x += difW / 2;
-    y += difH;
-    if (y < 0 || x < 0 || w + x > width || w < minSize || h < minSize) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropB = (
-  isFree: boolean,
-  ratio: number,
-  startY: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  const { y } = crop;
-  let { x, w, h } = crop;
-
-  if (isFree) {
-    h += clientY - startY;
-    if (h + y > height) h = height - y;
-    if (h < minSize) h = minSize;
-  } else {
-    const difH = clientY - startY;
-    const difW = Math.round(difH * ratio);
-    h += difH;
-    w += difW;
-    x -= difW / 2;
-    if (
-      h + y > height ||
-      x < 0 ||
-      w + x > width ||
-      w < minSize ||
-      h < minSize
-    ) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropTL = (
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  startY: number,
-  clientX: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  let { x, y, w, h } = crop;
-
-  if (isFree) {
-    const right = width - crop.w - crop.x;
-    x += clientX - startX;
-    if (x < 0) x = 0;
-    w = width - x - right;
-    if (w < minSize) {
-      w = minSize;
-      x = width - right - minSize;
-    }
-
-    const bottom = height - h - y;
-    y += clientY - startY;
-    if (y < 0) y = 0;
-    h = height - y - bottom;
-    if (h < minSize) {
-      h = minSize;
-      y = height - bottom - minSize;
-    }
-  } else {
-    if (ratio >= 1) {
-      const difW = clientX - startX;
-      const difH = Math.round(difW / ratio);
-      w -= difW;
-      h -= difH;
-      x += difW;
-      y += difH;
-    } else {
-      const difH = clientY - startY;
-      const difW = Math.round(difH * ratio);
-      w -= difW;
-      h -= difH;
-      x += difW;
-      y += difH;
-    }
-    if (x < 0 || y < 0 || w < minSize || h < minSize) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropTR = (
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  startY: number,
-  clientX: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  const { x } = crop;
-  let { y, w, h } = crop;
-
-  if (isFree) {
-    w += clientX - startX;
-    if (w + x > width) w = width - x;
-    if (w < minSize) w = minSize;
-
-    const bottom = height - h - y;
-    y += clientY - startY;
-    if (y < 0) y = 0;
-    h = height - y - bottom;
-    if (h < minSize) {
-      h = minSize;
-      y = height - bottom - minSize;
-    }
-  } else {
-    if (ratio > 1) {
-      const difW = clientX - startX;
-      const difH = Math.round(difW / ratio);
-      w += difW;
-      h += difH;
-      y -= difH;
-    } else {
-      const difH = clientY - startY;
-      const difW = Math.round(difH * ratio);
-      w -= difW;
-      h -= difH;
-      y += difH;
-    }
-    if (w + x > width || y < 0 || w < minSize || h < minSize) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropBL = (
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  startY: number,
-  clientX: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  const { y } = crop;
-  let { x, w, h } = crop;
-
-  if (isFree) {
-    h += clientY - startY;
-    if (h + y > height) h = height - y;
-    if (h < minSize) h = minSize;
-
-    const right = width - crop.w - crop.x;
-    x += clientX - startX;
-    if (x < 0) x = 0;
-    w = width - x - right;
-    if (w < minSize) {
-      w = minSize;
-      x = width - right - minSize;
-    }
-  } else {
-    if (ratio >= 1) {
-      const difW = clientX - startX;
-      const difH = Math.round(difW / ratio);
-      w -= difW;
-      h -= difH;
-      x += difW;
-    } else {
-      const difH = clientY - startY;
-      const difW = Math.round(difH * ratio);
-      w += difW;
-      h += difH;
-      x -= difW;
-    }
-    if (h + y > height || x < 0 || w < minSize || h < minSize) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-const getCropBR = (
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  startY: number,
-  clientX: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  const { x, y } = crop;
-  let { w, h } = crop;
-
-  if (isFree) {
-    w += clientX - startX;
-    if (w + x > width) w = width - x;
-    if (w < minSize) w = minSize;
-
-    h += clientY - startY;
-    if (h + y > height) h = height - y;
-    if (h < minSize) h = minSize;
-  } else {
-    if (ratio >= 1) {
-      const difW = clientX - startX;
-      const difH = Math.round(difW / ratio);
-      w += difW;
-      h += difH;
-    } else {
-      const difH = clientY - startY;
-      const difW = Math.round(difH * ratio);
-      w += difW;
-      h += difH;
-    }
-    if (h + y > height || w + x > width || w < minSize || h < minSize) {
-      return getDefaultCrop(el);
-    }
-  }
-
-  return { x, y, w, h };
-};
-
-export const getCropPoints = (
-  dir: Direction,
-  isFree: boolean,
-  ratio: number,
-  startX: number,
-  startY: number,
-  clientX: number,
-  clientY: number,
-  width: number,
-  height: number,
-  crop: CropRect,
-  el: HTMLElement,
-): CropRect => {
-  if (dir === "r")
-    return getCropR(isFree, ratio, startX, clientX, width, height, crop, el);
-  if (dir === "l")
-    return getCropL(isFree, ratio, startX, clientX, width, height, crop, el);
-  if (dir === "t")
-    return getCropT(isFree, ratio, startY, clientY, width, height, crop, el);
-  if (dir === "b")
-    return getCropB(isFree, ratio, startY, clientY, width, height, crop, el);
-  if (dir === "tl")
-    return getCropTL(
-      isFree,
-      ratio,
-      startX,
-      startY,
-      clientX,
-      clientY,
-      width,
-      height,
-      crop,
-      el,
-    );
-  if (dir === "tr")
-    return getCropTR(
-      isFree,
-      ratio,
-      startX,
-      startY,
-      clientX,
-      clientY,
-      width,
-      height,
-      crop,
-      el,
-    );
-  if (dir === "bl")
-    return getCropBL(
-      isFree,
-      ratio,
-      startX,
-      startY,
-      clientX,
-      clientY,
-      width,
-      height,
-      crop,
-      el,
-    );
-  if (dir === "br")
-    return getCropBR(
-      isFree,
-      ratio,
-      startX,
-      startY,
-      clientX,
-      clientY,
-      width,
-      height,
-      crop,
-      el,
-    );
-  return { x: 0, y: 0, w: 0, h: 0 };
-};
-
-export const getInitalCrop = (
-  cropRatio: number,
-  width: number,
-  height: number,
-): CropRect => {
-  const offsetPercent = 0.1;
-  const frameRatio = width / height;
-  let wPx = 0;
-  let hPx = 0;
-
-  if (cropRatio === 1) {
-    wPx = (frameRatio > 1 ? height : width) * (1 - offsetPercent * 2);
-    hPx = wPx;
-  }
-
-  if (cropRatio > 1) {
-    if (frameRatio > cropRatio) {
-      hPx = height * (1 - offsetPercent * 2);
-      wPx = hPx * cropRatio;
-    } else {
-      wPx = width * (1 - offsetPercent * 2);
-      hPx = wPx / cropRatio;
-    }
-  }
-
-  if (cropRatio < 1) {
-    if (frameRatio > cropRatio) {
-      hPx = height * (1 - offsetPercent * 2);
-      wPx = hPx * cropRatio;
-    } else {
-      wPx = width * (1 - offsetPercent * 2);
-      hPx = wPx / cropRatio;
-    }
-  }
-
-  const w = (wPx / width) * 100;
-  const h = (hPx / height) * 100;
-  const x = ((width - wPx) / 2 / width) * 100;
-  const y = ((height - hPx) / 2 / height) * 100;
-  const xPx = Math.round((width - wPx) / 2);
-  const yPx = Math.round((height - hPx) / 2);
-
-  return { x, y, w, h, xPx, yPx, wPx, hPx };
-};
-
-export const getCropByNewSizes = (
-  crop: CropRect,
-  width: number,
-  height: number,
-  frameWidth: number,
-): CropRect => {
-  const diffPercent = width / frameWidth;
-  const x = Math.floor(crop.x * diffPercent);
-  const y = Math.floor(crop.y * diffPercent);
-  const w = Math.ceil(crop.w * diffPercent);
-  const h = Math.ceil(crop.h * diffPercent);
-  return {
-    x: x < 0 ? 0 : x,
-    y: y < 0 ? 0 : y,
-    w: w > width ? width : w,
-    h: h > height ? height : h,
-  };
-};
-
-export const degree2Rad = (degree: number): number => (degree * Math.PI) / 180;

package/src/shared/components/ui/index.ts

@@ -1 +0,0 @@
-export { Preloader } from "./preloader";

package/src/shared/components/ui/preloader.tsx

@@ -1,78 +0,0 @@
-type PreloaderProps = {
-  size?: number;
-  color?: string;
-  className?: string;
-  style?: React.CSSProperties;
-};
-
-function Preloader({
-  size = 36,
-  className,
-  style,
-  color = "currentColor",
-}: PreloaderProps) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      x="0px"
-      y="0px"
-      viewBox="0 0 80 80"
-      width={size}
-      height={size}
-      fill={color}
-      className={className}
-      style={style}
-    >
-      <path
-        d="M10,40c0,0,0-0.4,0-1.1c0-0.3,0-0.8,0-1.3c0-0.3,0-0.5,0-0.8c0-0.3,0.1-0.6,0.1-0.9c0.1-0.6,0.1-1.4,0.2-2.1
-		c0.2-0.8,0.3-1.6,0.5-2.5c0.2-0.9,0.6-1.8,0.8-2.8c0.3-1,0.8-1.9,1.2-3c0.5-1,1.1-2,1.7-3.1c0.7-1,1.4-2.1,2.2-3.1
-		c1.6-2.1,3.7-3.9,6-5.6c2.3-1.7,5-3,7.9-4.1c0.7-0.2,1.5-0.4,2.2-0.7c0.7-0.3,1.5-0.3,2.3-0.5c0.8-0.2,1.5-0.3,2.3-0.4l1.2-0.1
-		l0.6-0.1l0.3,0l0.1,0l0.1,0l0,0c0.1,0-0.1,0,0.1,0c1.5,0,2.9-0.1,4.5,0.2c0.8,0.1,1.6,0.1,2.4,0.3c0.8,0.2,1.5,0.3,2.3,0.5
-		c3,0.8,5.9,2,8.5,3.6c2.6,1.6,4.9,3.4,6.8,5.4c1,1,1.8,2.1,2.7,3.1c0.8,1.1,1.5,2.1,2.1,3.2c0.6,1.1,1.2,2.1,1.6,3.1
-		c0.4,1,0.9,2,1.2,3c0.3,1,0.6,1.9,0.8,2.7c0.2,0.9,0.3,1.6,0.5,2.4c0.1,0.4,0.1,0.7,0.2,1c0,0.3,0.1,0.6,0.1,0.9
-		c0.1,0.6,0.1,1,0.1,1.4C74,39.6,74,40,74,40c0.2,2.2-1.5,4.1-3.7,4.3s-4.1-1.5-4.3-3.7c0-0.1,0-0.2,0-0.3l0-0.4c0,0,0-0.3,0-0.9
-		c0-0.3,0-0.7,0-1.1c0-0.2,0-0.5,0-0.7c0-0.2-0.1-0.5-0.1-0.8c-0.1-0.6-0.1-1.2-0.2-1.9c-0.1-0.7-0.3-1.4-0.4-2.2
-		c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-0.8-0.7-1.7-1.1-2.6c-0.5-0.9-0.9-1.8-1.5-2.7c-0.6-0.9-1.2-1.8-1.9-2.7c-1.4-1.8-3.2-3.4-5.2-4.9
-		c-2-1.5-4.4-2.7-6.9-3.6c-0.6-0.2-1.3-0.4-1.9-0.6c-0.7-0.2-1.3-0.3-1.9-0.4c-1.2-0.3-2.8-0.4-4.2-0.5l-2,0c-0.7,0-1.4,0.1-2.1,0.1
-		c-0.7,0.1-1.4,0.1-2,0.3c-0.7,0.1-1.3,0.3-2,0.4c-2.6,0.7-5.2,1.7-7.5,3.1c-2.2,1.4-4.3,2.9-6,4.7c-0.9,0.8-1.6,1.8-2.4,2.7
-		c-0.7,0.9-1.3,1.9-1.9,2.8c-0.5,1-1,1.9-1.4,2.8c-0.4,0.9-0.8,1.8-1,2.6c-0.3,0.9-0.5,1.6-0.7,2.4c-0.2,0.7-0.3,1.4-0.4,2.1
-		c-0.1,0.3-0.1,0.6-0.2,0.9c0,0.3-0.1,0.6-0.1,0.8c0,0.5-0.1,0.9-0.1,1.3C10,39.6,10,40,10,40z"
-      >
-        <animateTransform
-          attributeType="xml"
-          attributeName="transform"
-          type="rotate"
-          from="0 40 40"
-          to="360 40 40"
-          dur="0.8s"
-          repeatCount="indefinite"
-        />
-      </path>
-      <path
-        fill="currentColor"
-        d="M62,40.1c0,0,0,0.2-0.1,0.7c0,0.2,0,0.5-0.1,0.8c0,0.2,0,0.3,0,0.5c0,0.2-0.1,0.4-0.1,0.7
-		c-0.1,0.5-0.2,1-0.3,1.6c-0.2,0.5-0.3,1.1-0.5,1.8c-0.2,0.6-0.5,1.3-0.7,1.9c-0.3,0.7-0.7,1.3-1,2.1c-0.4,0.7-0.9,1.4-1.4,2.1
-		c-0.5,0.7-1.1,1.4-1.7,2c-1.2,1.3-2.7,2.5-4.4,3.6c-1.7,1-3.6,1.8-5.5,2.4c-2,0.5-4,0.7-6.2,0.7c-1.9-0.1-4.1-0.4-6-1.1
-		c-1.9-0.7-3.7-1.5-5.2-2.6c-1.5-1.1-2.9-2.3-4-3.7c-0.6-0.6-1-1.4-1.5-2c-0.4-0.7-0.8-1.4-1.2-2c-0.3-0.7-0.6-1.3-0.8-2
-		c-0.2-0.6-0.4-1.2-0.6-1.8c-0.1-0.6-0.3-1.1-0.4-1.6c-0.1-0.5-0.1-1-0.2-1.4c-0.1-0.9-0.1-1.5-0.1-2c0-0.5,0-0.7,0-0.7
-		s0,0.2,0.1,0.7c0.1,0.5,0,1.1,0.2,2c0.1,0.4,0.2,0.9,0.3,1.4c0.1,0.5,0.3,1,0.5,1.6c0.2,0.6,0.4,1.1,0.7,1.8
-		c0.3,0.6,0.6,1.2,0.9,1.9c0.4,0.6,0.8,1.3,1.2,1.9c0.5,0.6,1,1.3,1.6,1.8c1.1,1.2,2.5,2.3,4,3.2c1.5,0.9,3.2,1.6,5,2.1
-		c1.8,0.5,3.6,0.6,5.6,0.6c1.8-0.1,3.7-0.4,5.4-1c1.7-0.6,3.3-1.4,4.7-2.4c1.4-1,2.6-2.1,3.6-3.3c0.5-0.6,0.9-1.2,1.3-1.8
-		c0.4-0.6,0.7-1.2,1-1.8c0.3-0.6,0.6-1.2,0.8-1.8c0.2-0.6,0.4-1.1,0.5-1.7c0.1-0.5,0.2-1,0.3-1.5c0.1-0.4,0.1-0.8,0.1-1.2
-		c0-0.2,0-0.4,0.1-0.5c0-0.2,0-0.4,0-0.5c0-0.3,0-0.6,0-0.8c0-0.5,0-0.7,0-0.7c0-1.1,0.9-2,2-2s2,0.9,2,2C62,40,62,40.1,62,40.1z"
-      >
-        <animateTransform
-          attributeType="xml"
-          attributeName="transform"
-          type="rotate"
-          from="0 40 40"
-          to="-360 40 40"
-          dur="0.6s"
-          repeatCount="indefinite"
-        />
-      </path>
-    </svg>
-  );
-}
-
-export { Preloader };

package/src/shared/config/index.ts

@@ -1,3 +0,0 @@
-import { ROUTES } from "./routes";
-
-export { ROUTES };

package/src/shared/config/routes.ts

@@ -1,4 +0,0 @@
-export const ROUTES = {
-  HOME: "/",
-  IMAGE_EDIT: "images/:id",
-};