pixedi 1.0.0

package/src/shared/components/ImageEditor/crop/crop.css

@@ -0,0 +1,180 @@
+.crop-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.crop-box {
+  position: absolute;
+  cursor: move;
+}
+
+.crop-tools {
+  position: absolute;
+  bottom: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--background);
+  display: flex;
+  height: 36px;
+  padding-left: 12px;
+  align-items: center;
+  border-radius: 4px;
+  box-sizing: border-box;
+  border: 1px solid var(--border);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.1),
+    0 2px 4px -1px rgba(0, 0, 0, 0.06);
+}
+
+.crop-tools-info {
+  display: inline-block;
+  min-width: 54px;
+  margin-top: -2px;
+}
+
+.crop-tools-info-label {
+  font-size: 12px;
+  line-height: 12px;
+  color: var(--muted-foreground);
+}
+
+.crop-tools-info-value {
+  font-size: 14px;
+  line-height: 14px;
+}
+
+.crop-b {
+  position: absolute;
+  background-color: var(--accent-blue);
+}
+.crop-b-t {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  cursor: ns-resize;
+}
+.crop-b-r {
+  top: 0;
+  right: 0;
+  width: 2px;
+  height: 100%;
+  cursor: ew-resize;
+}
+.crop-b-b {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  cursor: ns-resize;
+  transform: translateY(1px);
+}
+.crop-b-l {
+  top: 0;
+  left: -1px;
+  width: 2px;
+  height: 100%;
+  cursor: ew-resize;
+  transform: translateX(1px);
+}
+
+.crop-l-box {
+  position: absolute;
+  inset: 2px;
+  pointer-events: none;
+}
+.crop-l {
+  position: absolute;
+  border: 1px dashed var(--color-white);
+  opacity: 0.5;
+}
+.crop-l-v {
+  width: 33%;
+  height: 100%;
+  top: 0;
+  left: 33%;
+  border-top: 0;
+  border-bottom: 0;
+}
+.crop-l-h {
+  width: 100%;
+  height: 33%;
+  top: 33%;
+  left: 0;
+  border-right: 0;
+  border-left: 0;
+}
+
+.crop-ps {
+  position: absolute;
+  box-sizing: border-box;
+  width: 12px;
+  height: 12px;
+  border: 1px solid var(--accent-blue);
+  background-color: var(--overlay-bg-white);
+  border-radius: 50%;
+}
+.crop-ps-tl {
+  top: -5px;
+  left: -5px;
+  cursor: nwse-resize;
+}
+.crop-ps-t {
+  top: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: ns-resize;
+}
+.crop-ps-tr {
+  top: -5px;
+  right: -5px;
+  cursor: nesw-resize;
+}
+.crop-ps-r {
+  top: 50%;
+  right: -5px;
+  transform: translateY(-50%);
+  cursor: ew-resize;
+}
+.crop-ps-br {
+  bottom: -5px;
+  right: -5px;
+  cursor: nwse-resize;
+}
+.crop-ps-b {
+  bottom: -5px;
+  left: 50%;
+  transform: translateX(-50%);
+  cursor: ns-resize;
+}
+.crop-ps-bl {
+  bottom: -5px;
+  left: -5px;
+  cursor: nesw-resize;
+}
+.crop-ps-l {
+  top: 50%;
+  left: -5px;
+  transform: translateY(-50%);
+  cursor: ew-resize;
+}
+
+.crop-p-b {
+  position: absolute;
+  inset: 0;
+  box-sizing: border-box;
+  border: 2px solid var(--accent-blue);
+}
+.crop-p-p {
+  position: absolute;
+  width: 32px;
+  height: 32px;
+  right: -16px;
+  bottom: -16px;
+  background-color: var(--overlay-bg-white);
+  border-radius: 50%;
+  border: 3px solid var(--accent-blue);
+  box-sizing: border-box;
+}

package/src/shared/components/ImageEditor/crop/index.ts

@@ -0,0 +1,8 @@
+export { Crop } from "./Crop";
+import { CropTools } from "./CropTools";
+export { CropBorders } from "./CropBorders";
+export { CropLines } from "./CropLines";
+export { CropPointers } from "./CropPointers";
+export { useCropInteraction } from "./useCropInteraction";
+export { CropPointer } from "./CropPointer";
+export { CropTools };

package/src/shared/components/ImageEditor/crop/useCropInteraction.ts

@@ -0,0 +1,230 @@
+import { useEffect, useRef } from "react";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { getCropPoints } from "../utils";
+import type { CropRect, Direction } from "../types";
+import { emitCropUpdate } from "../eventBus";
+import { useMobile } from "../hooks";
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+function pct(px: number, total: number): number {
+  return (px / total) * 100;
+}
+
+function applyRect(
+  el: HTMLDivElement,
+  xPct: number,
+  yPct: number,
+  wPct: number,
+  hPct: number,
+): void {
+  el.style.left = `${xPct}%`;
+  el.style.top = `${yPct}%`;
+  el.style.width = `${wPct}%`;
+  el.style.height = `${hPct}%`;
+}
+
+function applyClipPath(
+  img: HTMLImageElement,
+  xPct: number,
+  yPct: number,
+  wPct: number,
+  hPct: number,
+): void {
+  img.style.clipPath = `xywh(${xPct}% ${yPct}% ${wPct}% ${hPct}%)`;
+}
+
+type UseCropInteractionArgs = {
+  imgRef: React.RefObject<HTMLImageElement | null>;
+  cropRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export const useCropInteraction = ({
+  imgRef,
+  cropRef,
+}: UseCropInteractionArgs) => {
+  const { getCurrentAction, getLastHistoryItem } = useImageEditorContext();
+  const mobile = useMobile();
+
+  const startPointRef = useRef<{ x: number; y: number } | null>(null);
+  const directionRef = useRef<Direction | "">("");
+  const posRef = useRef<{ xPct: number; yPct: number }>({ xPct: 0, yPct: 0 });
+  const cropRectRef = useRef<CropRect>({ x: 0, y: 0, w: 0, h: 0 });
+
+  const handleCropStart = (
+    e: React.MouseEvent | React.TouchEvent,
+    type: Direction,
+    cursor?: string,
+  ) => {
+    if (!cropRef.current) return;
+
+    e.stopPropagation();
+
+    cropRectRef.current = {
+      x: cropRef.current.offsetLeft,
+      y: cropRef.current.offsetTop,
+      w: cropRef.current.offsetWidth,
+      h: cropRef.current.offsetHeight,
+    };
+
+    const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+    const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+    startPointRef.current = { x: clientX, y: clientY };
+    directionRef.current = type;
+
+    if (!mobile) {
+      cropRef.current.style.cursor = `${cursor}-resize`;
+      document.body.style.cursor = `${cursor}-resize`;
+    }
+  };
+
+  useEffect(() => {
+    const handleDragStart = (e: MouseEvent | TouchEvent) => {
+      if (cropRef.current) {
+        const parent = cropRef.current.parentElement;
+        if (parent) {
+          posRef.current = {
+            xPct: pct(cropRef.current.offsetLeft, parent.offsetWidth),
+            yPct: pct(cropRef.current.offsetTop, parent.offsetHeight),
+          };
+        }
+      }
+      const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+      const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      startPointRef.current = { x: clientX, y: clientY };
+      document.body.style.cursor = "move";
+    };
+
+    const handleMove = (e: MouseEvent | TouchEvent) => {
+      if (!imgRef.current || !cropRef.current || !startPointRef.current) return;
+
+      const elCrop = cropRef.current;
+      const elImage = imgRef.current;
+      const parent = elCrop.parentElement;
+      if (!parent) return;
+
+      const parentW = parent.offsetWidth;
+      const parentH = parent.offsetHeight;
+
+      if (directionRef.current) {
+        handleResize(e, elCrop, elImage, parentW, parentH);
+        return;
+      }
+
+      handleDrag(e, elCrop, elImage, parentW, parentH);
+    };
+
+    const handleResize = (
+      e: MouseEvent | TouchEvent,
+      elCrop: HTMLDivElement,
+      elImage: HTMLImageElement,
+      parentW: number,
+      parentH: number,
+    ) => {
+      const action = getCurrentAction();
+      if (!action || action.name !== "crop" || !startPointRef.current) return;
+
+      const { isFree, ratio } = action.args;
+      const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+      const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      const { x, y, w, h } = getCropPoints(
+        directionRef.current as Direction,
+        isFree,
+        ratio,
+        startPointRef.current.x,
+        startPointRef.current.y,
+        clientX,
+        clientY,
+        parentW,
+        parentH,
+        cropRectRef.current,
+        elCrop,
+      );
+
+      const xPct = pct(x, parentW);
+      const yPct = pct(y, parentH);
+      const wPct = pct(w, parentW);
+      const hPct = pct(h, parentH);
+
+      applyRect(elCrop, xPct, yPct, wPct, hPct);
+      applyClipPath(elImage, xPct, yPct, wPct, hPct);
+
+      const lastHistoryItem = getLastHistoryItem();
+      if (!lastHistoryItem) return;
+      const { width: imgW, height: imgH } = lastHistoryItem;
+      emitCropUpdate({
+        x: Math.round((xPct / 100) * imgW),
+        y: Math.round((yPct / 100) * imgH),
+        w: Math.round((wPct / 100) * imgW),
+        h: Math.round((hPct / 100) * imgH),
+      });
+    };
+
+    const handleDrag = (
+      e: MouseEvent | TouchEvent,
+      elCrop: HTMLDivElement,
+      elImage: HTMLImageElement,
+      parentW: number,
+      parentH: number,
+    ) => {
+      if (!startPointRef.current) return;
+      console.log("HandleDrag");
+      const frmWidth = elCrop.offsetWidth;
+      const frmHeight = elCrop.offsetHeight;
+
+      const clientX = "clientX" in e ? e.clientX : e.touches[0].clientX;
+      const clientY = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      const dxPct = pct(clientX - startPointRef.current.x, parentW);
+      const dyPct = pct(clientY - startPointRef.current.y, parentH);
+      startPointRef.current = { x: clientX, y: clientY };
+
+      const maxXPct = pct(parentW - frmWidth, parentW);
+      const maxYPct = pct(parentH - frmHeight, parentH);
+
+      const leftPct = clamp(posRef.current.xPct + dxPct, 0, maxXPct);
+      const topPct = clamp(posRef.current.yPct + dyPct, 0, maxYPct);
+      const wPct = pct(frmWidth, parentW);
+      const hPct = pct(frmHeight, parentH);
+
+      posRef.current = { xPct: leftPct, yPct: topPct };
+
+      applyRect(elCrop, leftPct, topPct, wPct, hPct);
+      applyClipPath(elImage, leftPct, topPct, wPct, hPct);
+
+      const { width: imgW, height: imgH } = getLastHistoryItem();
+      emitCropUpdate({
+        x: Math.round((leftPct / 100) * imgW),
+        y: Math.round((topPct / 100) * imgH),
+        w: Math.round((wPct / 100) * imgW),
+        h: Math.round((hPct / 100) * imgH),
+      });
+    };
+
+    const handleMoveEnd = () => {
+      if (!cropRef.current) return;
+
+      startPointRef.current = null;
+      directionRef.current = "";
+      cropRef.current.style.cursor = "move";
+      document.body.style.cursor = "auto";
+    };
+
+    if (!cropRef.current) return;
+
+    const controller = new AbortController();
+    const { signal } = controller;
+
+    cropRef.current.addEventListener("mousedown", handleDragStart, { signal });
+    cropRef.current.addEventListener("touchstart", handleDragStart, { signal });
+    document.addEventListener("mousemove", handleMove, { signal });
+    document.addEventListener("touchmove", handleMove, { signal });
+    document.addEventListener("mouseup", handleMoveEnd, { signal });
+    document.addEventListener("touchend", handleMoveEnd, { signal });
+
+    return () => controller.abort();
+  }, [getCurrentAction, getLastHistoryItem, imgRef, cropRef]);
+
+  return { handleCropStart };
+};

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

@@ -0,0 +1,8 @@
+import type { CropRect } from "./types";
+
+export const eventBus = new EventTarget();
+
+export const emitCropUpdate = (detail: CropRect) => {
+  const event = new CustomEvent<CropRect>("crop-update", { detail });
+  eventBus.dispatchEvent(event);
+};

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

@@ -0,0 +1,48 @@
+import { useRef } from "react";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { Crop } from "../crop";
+import { CropTools } from "../crop";
+import "./frame.css";
+import { ResizeTools } from "../resize";
+
+export const Frame = () => {
+  const { getLastHistoryItem, currentAction } = useImageEditorContext();
+  const frameRef = useRef<HTMLDivElement>(null);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const { width, height, base64 } = getLastHistoryItem();
+
+  const isCrop = currentAction?.name === "crop";
+  const isResize = currentAction?.name === "resize";
+  const isFade = isCrop || isResize;
+
+  const handleResizing = (scale: number) => {
+    if (frameRef.current) {
+      frameRef.current.style.transform = `scale(${scale / 100})`;
+    }
+  };
+
+  const frameClassName = `frame ${isFade ? "mask" : ""}`;
+  const imageClassName = `frame-image ${isFade ? "frame-image--faded" : ""}`;
+
+  return (
+    <div className={frameClassName}>
+      <div
+        ref={frameRef}
+        style={{
+          aspectRatio: `${width} / ${height}`,
+        }}
+        className="frame-preview"
+      >
+        <img
+          ref={imageRef}
+          src={base64}
+          alt="Image"
+          className={imageClassName}
+        />
+        {isCrop && <Crop key={currentAction?.args?.id} />}
+      </div>
+      {isResize && <ResizeTools onResizing={handleResizing} />}
+      {isCrop && <CropTools />}
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/frame/frame.css

@@ -0,0 +1,40 @@
+.frame {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-height: 0;
+  position: relative;
+  overflow: hidden;
+  justify-content: center;
+  align-items: center;
+  padding: 16px;
+  box-sizing: border-box;
+}
+
+.frame--faded {
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.frame-preview {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+  min-height: 0;
+  min-width: 0;
+  flex-shrink: 1;
+  display: block;
+  user-select: none;
+  transition: transform 0.2s ease;
+}
+
+.frame-image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.frame-image--faded {
+  opacity: 0.4;
+}

package/src/shared/components/ImageEditor/frame/index.ts

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

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

@@ -0,0 +1,81 @@
+import { useState } from "react";
+import { ArrowLeft, Check, Undo, Redo, Loader } from "../assets/icons";
+import { useImageEditorContext } from "../provider/useImageEditorContext";
+import { Button } from "../ui";
+import type { FuncSaveArgs } from "../types";
+import "./header.css";
+
+type HeaderProps = {
+  onBack: () => void;
+  onSave: FuncSaveArgs;
+};
+
+export const Header = ({ onBack, onSave }: HeaderProps) => {
+  const [isSaving, setIsSaving] = useState(false);
+  const {
+    history,
+    undo,
+    redo,
+    resetHistory,
+    resetHistoryAfterSave,
+    getLastHistoryItem,
+  } = useImageEditorContext();
+
+  const { base64 } = getLastHistoryItem();
+  const showHistory = history.items.length > 1 && !isSaving;
+  const disabledUndo = history.pointer === 0;
+  const disabledRedo = history.pointer === history.items.length - 1;
+  const disableSave = history.items.length < 2 || isSaving;
+
+  const handleSave = async () => {
+    if (!base64) return;
+    setIsSaving(true);
+    try {
+      await onSave(base64);
+      resetHistoryAfterSave();
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <div className="header">
+      <Button variant="ghost" className="btn-rect" onClick={onBack}>
+        <ArrowLeft />
+      </Button>
+
+      <div className="header-tools">
+        {showHistory && (
+          <div className="header-history">
+            <Button
+              variant="outline"
+              disabled={disabledUndo}
+              className="btn-rect"
+              onClick={undo}
+            >
+              <Undo />
+            </Button>
+            <div className="header-history-text">
+              {history.pointer + 1}/{history.items.length}
+            </div>
+            <Button
+              variant="outline"
+              disabled={disabledRedo}
+              className="btn-rect"
+              onClick={redo}
+            >
+              <Redo />
+            </Button>
+          </div>
+        )}
+        <Button variant="outline" disabled={isSaving} onClick={resetHistory}>
+          Reset
+        </Button>
+        <Button disabled={disableSave} onClick={handleSave}>
+          {isSaving ? <Loader /> : <Check />}
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/shared/components/ImageEditor/header/header.css

@@ -0,0 +1,27 @@
+.header {
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-left: 8px;
+  padding-right: 8px;
+  box-sizing: border-box;
+  background-color: var(--background);
+  border-bottom: 1px solid var(--border);
+}
+
+.header-tools {
+  display: flex;
+  gap: 8px;
+}
+
+.header-history {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.header-history-text {
+  color: var(--muted-foreground);
+  font-size: 14px;
+}

package/src/shared/components/ImageEditor/header/index.ts

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

package/src/shared/components/ImageEditor/hooks/index.ts

@@ -0,0 +1,5 @@
+export { useImageLoader } from "./useImageLoader";
+export { useImageProcessor } from "./useImageProcessor";
+export { useMobile } from "./useMobile";
+export { useBellow } from "./useBellow";
+export { useAbove } from "./useAbove";

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

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { breakpoints, type Breakpoint } from "../types";
+
+export function useAbove(breakpoint: Breakpoint): boolean {
+  const [isAbove, setIsAbove] = useState(
+    () => window.innerWidth >= breakpoints[breakpoint],
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setIsAbove(window.innerWidth >= breakpoints[breakpoint]);
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isAbove;
+}

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

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+import { breakpoints, type Breakpoint } from "../types";
+
+export function useBellow(breakpoint: Breakpoint): boolean {
+  const [isBellow, setIsBellow] = useState(
+    () => window.innerWidth < breakpoints[breakpoint],
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setIsBellow(window.innerWidth < breakpoints[breakpoint]);
+    }
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isBellow;
+}