pixedi 1.0.0

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

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

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

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

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

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

package/src/shared/config/routes.ts

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

package/src/shared/features/gallery/GalleryPage.tsx

@@ -0,0 +1,33 @@
+import { imagesData } from "@/app/entries";
+import { ImageCard } from "@/shared/components/ImageCard";
+import { Preloader } from "@/shared/components/ui";
+import { useImagePreload } from "@/shared/hooks";
+
+export const GalleryPage = () => {
+  const isLoaded = useImagePreload(imagesData.map((image) => image.original));
+
+  if (!isLoaded) {
+    return (
+      <div className="w-full min-h-screen flex items-center justify-center">
+        <Preloader size={64} />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={`
+        max-w-4xl mx-6 
+        my-6 
+        grid content-start gap-6 
+        grid-cols-1 
+        sm:grid-cols-2
+        md:grid-cols-3 md:mx-auto
+      `}
+    >
+      {imagesData.map((image) => (
+        <ImageCard key={image.id} image={image} />
+      ))}
+    </div>
+  );
+};

package/src/shared/features/gallery/ImageEditPage.tsx

@@ -0,0 +1,37 @@
+import { useParams, useNavigate } from "react-router";
+import { imagesData } from "@/app/entries";
+import { ImageEditor } from "@/shared/components/ImageEditor";
+
+export const ImageEditPage = () => {
+  const navigate = useNavigate();
+  const { id } = useParams<{ id: string }>();
+  const image = imagesData.find((img) => img.id === id);
+
+  if (!image) {
+    return <div>Image not found</div>;
+  }
+
+  const handleSave = async (base64: string) => {
+    return new Promise<void>((resolve) => {
+      setTimeout(() => {
+        // TODO: Save the image
+        console.log(base64);
+        resolve();
+      }, 2000);
+    });
+  };
+
+  const handleCancel = () => {
+    navigate("/");
+  };
+
+  return (
+    <div className="w-full h-screen">
+      <ImageEditor
+        image={image.original}
+        onBack={handleCancel}
+        onSave={handleSave}
+      />
+    </div>
+  );
+};

package/src/shared/features/gallery/index.ts

@@ -0,0 +1,2 @@
+export { GalleryPage } from "./GalleryPage";
+export { ImageEditPage } from "./ImageEditPage";

package/src/shared/hooks/index.ts

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

package/src/shared/hooks/useImagePreload.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+
+export function useImagePreload(
+  imageUrls: string[],
+  delay: number = 1000,
+): boolean {
+  const [loadedUrls, setLoadedUrls] = useState<string[]>([]);
+
+  const isAlreadyLoaded =
+    imageUrls.length === loadedUrls.length &&
+    imageUrls.every((url, i) => url === loadedUrls[i]);
+
+  useEffect(() => {
+    if (imageUrls.length === 0 || isAlreadyLoaded) {
+      return;
+    }
+
+    let isMounted = true;
+
+    const minimumDelayPromise = new Promise((resolve) =>
+      setTimeout(resolve, delay),
+    );
+
+    const imagePromises = imageUrls.map((src) => {
+      return new Promise<void>((resolve) => {
+        const img = new Image();
+        img.src = src;
+        img.onload = () => resolve();
+        img.onerror = () => resolve();
+      });
+    });
+
+    Promise.all([...imagePromises, minimumDelayPromise]).then(() => {
+      if (isMounted) {
+        setLoadedUrls(imageUrls);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+    };
+  }, [imageUrls, isAlreadyLoaded]);
+
+  if (imageUrls.length === 0) {
+    return true;
+  }
+
+  return isAlreadyLoaded;
+}