pixedi 1.0.0

package/src/shared/components/ImageCard/ImageCard.tsx

@@ -0,0 +1,54 @@
+// import { motion, type Variants } from "motion/react";
+// import { Link } from "react-router";
+// import type { Image } from "@/shared/types";
+
+// type ImageCardProps = {
+//   image: Image;
+// };
+
+// export const ImageCard = ({ image }: ImageCardProps) => {
+//   const imageVariants: Variants = {
+//     rest: { scale: 1, opacity: 0.5 },
+//     hover: {
+//       scale: 1.1,
+//       opacity: 1,
+//     },
+//   };
+
+//   return (
+//     <Link to={`/images/${image.id}`}>
+//       <motion.div
+//         className={`
+//           relative
+//           w-full aspect-4/3
+//           overflow-hidden cursor-pointer box-border
+//           border border-neutral-400
+//         `}
+//         whileHover="hover"
+//         initial="rest"
+//         animate="rest"
+//       >
+//         <motion.div
+//           className="absolute inset-0 opacity-50"
+//           variants={imageVariants}
+//           transition={{ duration: 0.3, ease: "easeIn" }}
+//           style={{
+//             backgroundImage: `url(${image.thumbnail})`,
+//             backgroundSize: "cover",
+//             backgroundPosition: "center",
+//           }}
+//         />
+//       </motion.div>
+//     </Link>
+//   );
+// };
+
+type ImageCardProps = {
+  image: {
+    id: string;
+  };
+};
+
+export const ImageCard = ({ image }: ImageCardProps) => {
+  return <div>{image.id}</div>;
+};

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

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

package/src/shared/components/ImageEditor/ImageEditor.tsx

@@ -0,0 +1,48 @@
+import { Preloader } from "@/shared/components/ui";
+import { ImageEditorProvider } from "./provider/ImageEditorProvider";
+import { useImageLoader } from "./hooks";
+import { Header } from "./header";
+import { Frame } from "./frame";
+import { Sidebar } from "./sidebar";
+import type { FuncSaveArgs } from "./types";
+import "./index.css";
+
+type ImageEditorProps = {
+  image: string;
+  onSave: FuncSaveArgs;
+  onBack: () => void;
+};
+
+export const ImageEditor = ({ image, onSave, onBack }: ImageEditorProps) => {
+  const { loading, error, width, height, base64, extension } =
+    useImageLoader(image);
+
+  if (loading || error || !base64 || !extension) {
+    return (
+      <div className="picedi sys">
+        {loading && <Preloader size={48} />}
+        {error && <div className="text-red">{error}</div>}
+        {!loading && !error && (!base64 || !extension) && (
+          <div className="text-red">Failed to load image.</div>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <ImageEditorProvider
+      base64={base64}
+      width={width}
+      height={height}
+      ext={extension}
+    >
+      <div className="picedi main">
+        <Header onSave={onSave} onBack={onBack} />
+        <div className="grid">
+          <Frame />
+          <Sidebar />
+        </div>
+      </div>
+    </ImageEditorProvider>
+  );
+};

package/src/shared/components/ImageEditor/assets/icons.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+
+const baseSvgProps: React.ComponentPropsWithoutRef<"svg"> = {
+  xmlns: "http://w3.org",
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+};
+
+export const Check = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+);
+
+export const X = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M18 6 6 18" />
+    <path d="m6 6 12 12" />
+  </svg>
+);
+
+export const Lock = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <rect width="18" height="11" x="3" y="11" rx="2" ry="2" />
+    <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+  </svg>
+);
+
+export const ArrowLeft = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="m12 19-7-7 7-7" />
+    <path d="M19 12H5" />
+  </svg>
+);
+
+export const ChevronDown = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="m6 9 6 6 6-6" />
+  </svg>
+);
+
+export const Undo = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M3 7v6h6" />
+    <path d="M21 17a9 9 0 0 0-9-9 9 9 0 0 0-6 2.3L3 13" />
+  </svg>
+);
+
+export const Redo = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M21 7v6h-6" />
+    <path d="M3 17a9 9 0 0 1 9-9 9 9 0 0 1 6 2.3l3 2.7" />
+  </svg>
+);
+
+export const Settings = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915" />
+    <circle cx="12" cy="12" r="3" />
+  </svg>
+);
+
+export const Crop = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M6 2v14a2 2 0 0 0 2 2h14" />
+    <path d="M18 22V8a2 2 0 0 0-2-2H2" />
+  </svg>
+);
+
+export const Image = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+    <circle cx="9" cy="9" r="2" />
+    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+  </svg>
+);
+
+export const Square = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <rect width="18" height="18" x="3" y="3" rx="2" />
+  </svg>
+);
+
+export const Fullscreen = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M3 7V5a2 2 0 0 1 2-2h2" />
+    <path d="M17 3h2a2 2 0 0 1 2 2v2" />
+    <path d="M21 17v2a2 2 0 0 1-2 2h-2" />
+    <path d="M7 21H5a2 2 0 0 1-2-2v-2" />
+    <rect width="10" height="8" x="7" y="8" rx="1" />
+  </svg>
+);
+
+export const Loader = (props: React.ComponentPropsWithoutRef<"svg">) => (
+  <svg {...baseSvgProps} {...props}>
+    <path d="M21 12a9 9 0 1 1-6.219-8.56">
+      <animateTransform
+        attributeType="xml"
+        attributeName="transform"
+        type="rotate"
+        from="0 12 12"
+        to="360 12 12"
+        dur="0.8s"
+        repeatCount="indefinite"
+      />
+    </path>
+  </svg>
+);

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

@@ -0,0 +1,118 @@
+export type PresetOptions = {
+  value: string;
+  label: string;
+  w: number;
+  h: number;
+  rightLabel?: string;
+};
+
+export type Preset = {
+  value: string;
+  label: string;
+  options: Array<PresetOptions>;
+};
+
+export const presetsData: Array<Preset> = [
+  {
+    label: "Facebook",
+    value: "facebook",
+    options: [
+      {
+        value: "facebook-post",
+        label: "Post",
+        w: 1200,
+        h: 630,
+        rightLabel: "1200 x 630",
+      },
+      {
+        value: "facebook-cover",
+        label: "Cover",
+        w: 851,
+        h: 315,
+        rightLabel: "851 x 315",
+      },
+      {
+        value: "facebook-profile",
+        label: "Profile",
+        w: 170,
+        h: 170,
+        rightLabel: "170 x 170",
+      },
+      {
+        value: "facebook-story",
+        label: "Story",
+        w: 1080,
+        h: 1920,
+        rightLabel: "1080 x 1920",
+      },
+    ],
+  },
+  {
+    label: "Instagram",
+    value: "instagram",
+    options: [
+      {
+        value: "instagram-landscape",
+        label: "Landscape",
+        w: 1080,
+        h: 566,
+        rightLabel: "1080 x 566",
+      },
+      {
+        value: "instagram-portait",
+        label: "Portait",
+        w: 1080,
+        h: 1350,
+        rightLabel: "1080 x 1350",
+      },
+      {
+        value: "instagram-square",
+        label: "Square",
+        w: 1080,
+        h: 1080,
+        rightLabel: "1080 x 1080",
+      },
+      {
+        value: "instagram-story",
+        label: "Story",
+        w: 1080,
+        h: 1920,
+        rightLabel: "1080 x 1920",
+      },
+      {
+        value: "instagram-thumbnail",
+        label: "Thumbnail",
+        w: 161,
+        h: 161,
+        rightLabel: "161 x 161",
+      },
+    ],
+  },
+  {
+    label: "LinkedIn",
+    value: "linkedin",
+    options: [
+      {
+        value: "linkedin-blog-post",
+        label: "Blog Post",
+        w: 1200,
+        h: 627,
+        rightLabel: "1200 x 627",
+      },
+      {
+        value: "linkedin-cover",
+        label: "Cover",
+        w: 1128,
+        h: 191,
+        rightLabel: "1128 x 191",
+      },
+      {
+        value: "linkedin-profile",
+        label: "Profile",
+        w: 400,
+        h: 400,
+        rightLabel: "400 x 400",
+      },
+    ],
+  },
+];

package/src/shared/components/ImageEditor/crop/Crop.tsx

@@ -0,0 +1,60 @@
+import { useRef } from "react";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import {
+  CropBorders,
+  useCropInteraction,
+  CropPointers,
+  CropLines,
+  CropPointer,
+} from "../crop";
+import { getInitalCrop } from "../utils";
+import { useMobile } from "../hooks";
+import "./crop.css";
+
+export const Crop = () => {
+  const { getCurrentAction, getLastHistoryItem } = useImageEditorContext();
+  const currentAction = getCurrentAction();
+  const mobile = useMobile();
+
+  const imgRef = useRef<HTMLImageElement>(null);
+  const cropRef = useRef<HTMLDivElement>(null);
+
+  const { handleCropStart } = useCropInteraction({
+    imgRef,
+    cropRef,
+  });
+
+  if (!currentAction || currentAction.name !== "crop") {
+    return null;
+  }
+
+  const { width, height, base64 } = getLastHistoryItem();
+  const { x, y, w, h } = getInitalCrop(currentAction.args.ratio, width, height);
+
+  return (
+    <>
+      <img
+        ref={imgRef}
+        src={base64}
+        alt="Image"
+        className="crop-image"
+        style={{ clipPath: `xywh(${x}% ${y}% ${w}% ${h}%)` }}
+      />
+      <div
+        ref={cropRef}
+        className="crop-box"
+        style={{ width: `${w}%`, height: `${h}%`, top: `${y}%`, left: `${x}%` }}
+      >
+        <CropLines />
+        {mobile ? (
+          <CropPointer onMouseDown={handleCropStart} />
+        ) : (
+          <>
+            <CropBorders onMouseDown={handleCropStart} />
+            <CropPointers onMouseDown={handleCropStart} />
+          </>
+        )}
+      </div>
+    </>
+  );
+};

package/src/shared/components/ImageEditor/crop/CropBorders.tsx

@@ -0,0 +1,28 @@
+import type { Direction } from "../types";
+
+type CropBordersProps = {
+  onMouseDown: (e: React.MouseEvent, type: Direction, cursor: string) => void;
+};
+
+export const CropBorders = ({ onMouseDown }: CropBordersProps) => {
+  return (
+    <>
+      <span
+        className="crop-b crop-b-t"
+        onMouseDown={(e: React.MouseEvent) => onMouseDown(e, "t", "ns")}
+      />
+      <span
+        className="crop-b crop-b-r"
+        onMouseDown={(e) => onMouseDown(e, "r", "ew")}
+      />
+      <span
+        className="crop-b crop-b-b"
+        onMouseDown={(e) => onMouseDown(e, "b", "ns")}
+      />
+      <span
+        className="crop-b crop-b-l"
+        onMouseDown={(e) => onMouseDown(e, "l", "ew")}
+      />
+    </>
+  );
+};

package/src/shared/components/ImageEditor/crop/CropLines.tsx

@@ -0,0 +1,8 @@
+export const CropLines = () => {
+  return (
+    <div className="crop-l-box">
+      <span className="crop-l crop-l-v" />
+      <span className="crop-l crop-l-h" />
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/crop/CropPointer.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import type { Direction } from "../types";
+
+type CropPointerProps = {
+  onMouseDown: (
+    e: React.MouseEvent | React.TouchEvent,
+    type: Direction,
+    cursor?: string,
+  ) => void;
+};
+
+export const CropPointer = ({ onMouseDown }: CropPointerProps) => {
+  return (
+    <div className="crop-p-b">
+      <div
+        className="crop-p-p"
+        onTouchStart={(e) => onMouseDown(e, "br", "nwse")}
+      />
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/crop/CropPointers.tsx

@@ -0,0 +1,44 @@
+import type { Direction } from "../types";
+
+type CropPointersProps = {
+  onMouseDown: (e: React.MouseEvent, type: Direction, cursor: string) => void;
+};
+
+export const CropPointers = ({ onMouseDown }: CropPointersProps) => {
+  return (
+    <>
+      <span
+        className="crop-ps crop-ps-tl"
+        onMouseDown={(e) => onMouseDown(e, "tl", "nwse")}
+      />
+      <span
+        className="crop-ps crop-ps-t"
+        onMouseDown={(e) => onMouseDown(e, "t", "ns")}
+      />
+      <span
+        className="crop-ps crop-ps-tr"
+        onMouseDown={(e) => onMouseDown(e, "tr", "nesw")}
+      />
+      <span
+        className="crop-ps crop-ps-r"
+        onMouseDown={(e) => onMouseDown(e, "r", "ew")}
+      />
+      <span
+        className="crop-ps crop-ps-br"
+        onMouseDown={(e) => onMouseDown(e, "br", "nwse")}
+      />
+      <span
+        className="crop-ps crop-ps-b"
+        onMouseDown={(e) => onMouseDown(e, "b", "ns")}
+      />
+      <span
+        className="crop-ps crop-ps-bl"
+        onMouseDown={(e) => onMouseDown(e, "bl", "nesw")}
+      />
+      <span
+        className="crop-ps crop-ps-l"
+        onMouseDown={(e) => onMouseDown(e, "l", "ew")}
+      />
+    </>
+  );
+};

package/src/shared/components/ImageEditor/crop/CropTools.tsx

@@ -0,0 +1,138 @@
+import { useEffect, useRef, useState } from "react";
+import { Button, Separator } from "../ui";
+import type { CropRect } from "../types";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { eventBus } from "../eventBus";
+import { getInitalCrop } from "../utils";
+import { useImageProcessor } from "../hooks";
+import { Check, Loader, X } from "../assets/icons";
+
+export const CropTools = () => {
+  const {
+    setCurrentAction,
+    getCurrentAction,
+    getLastHistoryItem,
+    addToHistory,
+    setSidebar,
+  } = useImageEditorContext();
+  const { crop, resize } = useImageProcessor();
+  const [loading, setLoading] = useState(false);
+  const action = getCurrentAction();
+  const { base64, width, height } = getLastHistoryItem();
+
+  const leftRef = useRef<HTMLDivElement>(null);
+  const topRef = useRef<HTMLDivElement>(null);
+  const widthRef = useRef<HTMLDivElement>(null);
+  const heightRef = useRef<HTMLDivElement>(null);
+  const cropRectRef = useRef<CropRect | null>(null);
+
+  const handleClose = () => {
+    setCurrentAction(null);
+    setSidebar(true);
+  };
+
+  useEffect(() => {
+    if (action?.name !== "crop") {
+      return;
+    }
+    const { x, y, w, h } = getInitalCrop(action.args.ratio, width, height);
+    const xPx = Math.round((x / 100) * width);
+    const yPx = Math.round((y / 100) * height);
+    const wPx = Math.round((w / 100) * width);
+    const hPx = Math.round((h / 100) * height);
+
+    if (leftRef.current) leftRef.current.textContent = xPx.toString();
+    if (topRef.current) topRef.current.textContent = yPx.toString();
+    if (widthRef.current) widthRef.current.textContent = wPx.toString();
+    if (heightRef.current) heightRef.current.textContent = hPx.toString();
+    cropRectRef.current = { x: xPx, y: yPx, w: wPx, h: hPx };
+
+    const onCropUpdate = (event: Event) => {
+      const customEvent = event as CustomEvent<CropRect>;
+      const { x, y, w, h } = customEvent.detail;
+      cropRectRef.current = customEvent.detail;
+      if (leftRef.current) leftRef.current.textContent = x.toString();
+      if (topRef.current) topRef.current.textContent = y.toString();
+      if (widthRef.current) widthRef.current.textContent = w.toString();
+      if (heightRef.current) heightRef.current.textContent = h.toString();
+    };
+
+    eventBus.addEventListener("crop-update", onCropUpdate);
+
+    return () => {
+      eventBus.removeEventListener("crop-update", onCropUpdate);
+    };
+  }, [action, width, height]);
+
+  const handleSave = async () => {
+    if (!action || action.name !== "crop") {
+      return;
+    }
+    try {
+      setLoading(true);
+      if (!cropRectRef.current) {
+        return;
+      }
+      const { x, y, w, h } = cropRectRef.current;
+      const { preset } = action.args;
+      let processedBase64 = await crop(base64, x, y, w, h);
+
+      if (preset) {
+        const { w, h } = preset;
+        processedBase64 = await resize(processedBase64, w, h);
+      }
+
+      addToHistory({
+        name: "Crop",
+        base64: processedBase64,
+        width: preset ? preset.w : cropRectRef.current!.w,
+        height: preset ? preset.h : cropRectRef.current!.h,
+      });
+      setSidebar(true);
+    } catch (error) {
+      console.error("Failed to process image:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="crop-tools">
+      <div className="crop-tools-info">
+        <div className="crop-tools-info-label">left</div>
+        <div className="crop-tools-info-value semibold" ref={leftRef} />
+      </div>
+      <div className="crop-tools-info">
+        <div className="crop-tools-info-label">top</div>
+        <div className="crop-tools-info-value semibold" ref={topRef} />
+      </div>
+      <div className="crop-tools-info">
+        <div className="crop-tools-info-label">width</div>
+        <div className="crop-tools-info-value semibold" ref={widthRef} />
+      </div>
+      <div className="crop-tools-info">
+        <div className="crop-tools-info-label">height</div>
+        <div className="crop-tools-info-value semibold" ref={heightRef} />
+      </div>
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        className="text-green"
+        style={{ height: "36px", width: "36px" }}
+        disabled={loading}
+        onClick={handleSave}
+      >
+        {loading ? <Loader /> : <Check />}
+      </Button>
+      <Separator orientation="vertical" />
+      <Button
+        variant="ghost"
+        style={{ height: "36px", width: "36px" }}
+        disabled={loading}
+        onClick={handleClose}
+      >
+        <X className="text-red" />
+      </Button>
+    </div>
+  );
+};