pixedi 1.0.0 → 1.0.2

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

@@ -1,138 +0,0 @@
-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>
-  );
-};

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

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

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

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

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

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

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

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