@alpaca-editor/core 1.0.0

package/src/editor/PictureCropper.tsx

@@ -0,0 +1,505 @@
+import { Dialog } from "primereact/dialog";
+import { useEditContext } from "./client/editContext";
+import { ReactNode, useEffect, useRef, useState } from "react";
+import { Button } from "primereact/button";
+import DialogButtons from "./ui/DialogButtons";
+import { Rect } from "./utils";
+import { classNames } from "primereact/utils";
+import {
+  PictureField,
+  PictureRawValue,
+  PictureValue,
+  PictureVariant,
+} from "./fieldTypes";
+
+export function PictureCropper({
+  field,
+  onClose,
+  variantName: selectedVariantName,
+}: {
+  field: PictureField;
+  variantName: string;
+  onClose: () => void;
+}) {
+  const [pictureValue, setPictureValue] = useState<PictureValue>();
+  const [isValid, setIsValid] = useState<boolean>(true);
+  const [rawValue, setRawValue] = useState<PictureRawValue>();
+
+  const imageRef = useRef<HTMLDivElement>(null);
+  const [rect, setRect] = useState<Rect>();
+  const rectRef = useRef(rect);
+  const movingRef = useRef(false);
+  const [startPos, setStartPos] = useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+  const offset = useRef<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const editContext = useEditContext();
+
+  const EDGE_THRESHOLD = 10; // pixels from edge to detect resize
+
+  const [resizeEdge, setResizeEdge] = useState<string | null>(null);
+  const resizeEdgeRef = useRef<string | null>(null);
+
+  const getResizeEdge = (
+    pos: { x: number; y: number },
+    rect?: Rect,
+    bounds?: DOMRect
+  ) => {
+    if (!rect || !bounds) return null;
+
+    const x = pos.x * bounds.width;
+    const y = pos.y * bounds.height;
+    const rectX = rect.x * bounds.width;
+    const rectY = rect.y * bounds.height;
+    const rectWidth = rect.width * bounds.width;
+    const rectHeight = rect.height * bounds.height;
+
+    const isNearLeft = Math.abs(x - rectX) < EDGE_THRESHOLD;
+    const isNearRight = Math.abs(x - (rectX + rectWidth)) < EDGE_THRESHOLD;
+    const isNearTop = Math.abs(y - rectY) < EDGE_THRESHOLD;
+    const isNearBottom = Math.abs(y - (rectY + rectHeight)) < EDGE_THRESHOLD;
+
+    if (isNearLeft && isNearTop) return "nw";
+    if (isNearRight && isNearTop) return "ne";
+    if (isNearLeft && isNearBottom) return "sw";
+    if (isNearRight && isNearBottom) return "se";
+    if (isNearLeft) return "w";
+    if (isNearRight) return "e";
+    if (isNearTop) return "n";
+    if (isNearBottom) return "s";
+
+    return null;
+  };
+
+  useEffect(() => {
+    const deepCopy = JSON.parse(JSON.stringify(field.value));
+    setPictureValue(deepCopy);
+    const raw = field?.rawValue
+      ? (JSON.parse(field?.rawValue) as PictureRawValue)
+      : ({ Variants: [] } as PictureRawValue);
+    setRawValue(raw);
+  }, [field]);
+
+  const selectedVariant =
+    pictureValue && pictureValue.variants
+      ? pictureValue.variants?.find(
+          (x: PictureVariant) => x.name == selectedVariantName
+        )
+      : null;
+
+  useEffect(() => {
+    if (
+      selectedVariant?.region &&
+      (!selectedVariant.aspectRatioLock ||
+        Math.abs(
+          selectedVariant.aspectRatioLock -
+            (selectedVariant.region.width * selectedVariant.width) /
+              (selectedVariant.region.height * selectedVariant.height)
+        ) < 0.1) &&
+      selectedVariant.region.width > 0 &&
+      selectedVariant.region.height > 0
+    ) {
+      setRect({
+        width: selectedVariant.region.width,
+        height: selectedVariant.region.height,
+        y: selectedVariant.region.y,
+        x: selectedVariant.region.x,
+      });
+    } else {
+      setRect(undefined);
+    }
+  }, [selectedVariant]);
+
+  useEffect(() => {
+    if (!rect) return;
+    if (
+      (selectedVariant?.minWidth && selectedVariant.minWidth > widthPx) ||
+      (selectedVariant?.minHeight && selectedVariant?.minHeight > heightPx)
+    ) {
+      setIsValid(false);
+    } else setIsValid(true);
+    rectRef.current = rect;
+  }, [rect]);
+
+  useEffect(() => {
+    if (!rawValue) return;
+    if (!selectedVariantName) return;
+    if (selectedVariant) {
+      let selected = rawValue.Variants?.find(
+        (x) => x.Name == selectedVariantName
+      );
+      if (!selected) {
+        selected = {
+          Name: selectedVariantName,
+          MediaId: selectedVariant.mediaId!,
+        };
+        rawValue.Variants?.push(selected);
+      }
+      if (selected) {
+        if (rect)
+          selected.Region = {
+            X: rect.x,
+            Y: rect.y,
+            Width: rect.width,
+            Height: rect.height,
+          };
+        else selected.Region = undefined;
+        setRawValue(rawValue);
+      }
+    }
+  }, [rect]);
+
+  const handleMouseMove = (ev: React.MouseEvent) => {
+    if (!selectedVariant) return null;
+
+    const bounds = imageRef.current?.getBoundingClientRect();
+    if (!bounds) return;
+
+    const pos = {
+      x: (ev.clientX - bounds.left) / bounds.width,
+      y: (ev.clientY - bounds.top) / bounds.height,
+    };
+
+    // Update cursor on hover (when not dragging)
+    if (ev.buttons !== 1) {
+      const edge = getResizeEdge(pos, rect, bounds);
+      setResizeEdge(edge);
+      return;
+    }
+
+    if (ev.buttons === 1) {
+      if (!rectRef.current || !imageRef.current) return;
+      const rect = rectRef.current;
+
+      const bounds = imageRef.current.getBoundingClientRect();
+      const deltaX = ev.clientX - startPos.x;
+      const deltaY = ev.clientY - startPos.y;
+      if (resizeEdgeRef.current) {
+        const pos = {
+          x: (ev.clientX - bounds.left) / bounds.width,
+          y: (ev.clientY - bounds.top) / bounds.height,
+        };
+
+        let newRect = { ...rect };
+        const aspectRatio = selectedVariant.aspectRatioLock;
+        const originalAspectRatio =
+          selectedVariant.width / selectedVariant.height;
+
+        if (resizeEdgeRef.current.includes("w")) {
+          const newWidth = rect.width + rect.x - pos.x;
+          if (newWidth > 0) {
+            newRect.width = newWidth;
+            newRect.x = pos.x;
+            if (aspectRatio) {
+              newRect.height =
+                (newRect.width / aspectRatio) * originalAspectRatio;
+            }
+          }
+        }
+        if (resizeEdgeRef.current.includes("e")) {
+          newRect.width = pos.x - rect.x;
+          if (aspectRatio) {
+            newRect.height =
+              (newRect.width / aspectRatio) * originalAspectRatio;
+          }
+        }
+        if (resizeEdgeRef.current.includes("n")) {
+          const newHeight = rect.height + rect.y - pos.y;
+          if (newHeight > 0) {
+            newRect.height = newHeight;
+            newRect.y = pos.y;
+            if (aspectRatio) {
+              newRect.width =
+                (newRect.height * aspectRatio) / originalAspectRatio;
+            }
+          }
+        }
+        if (resizeEdgeRef.current.includes("s")) {
+          newRect.height = pos.y - rect.y;
+          if (aspectRatio) {
+            newRect.width =
+              (newRect.height * aspectRatio) / originalAspectRatio;
+          }
+        }
+
+        // Constrain to bounds
+        if (newRect.x < 0) newRect.x = 0;
+        if (newRect.y < 0) newRect.y = 0;
+        if (newRect.x + newRect.width > 1) newRect.width = 1 - newRect.x;
+        if (newRect.y + newRect.height > 1) newRect.height = 1 - newRect.y;
+
+        setRect(newRect);
+      } else if (movingRef.current) {
+        setRect({
+          ...rect,
+          x: Math.max(
+            0,
+            Math.min(
+              1 - rectRef.current.width,
+              (ev.clientX - bounds.left) / bounds.width - offset.current.x
+            )
+          ),
+          y: Math.max(
+            0,
+            Math.min(
+              1 - rectRef.current.height,
+              (ev.clientY - bounds.top) / bounds.height - offset.current.y
+            )
+          ),
+        });
+      } else {
+        const originalAspectRatio =
+          selectedVariant.width / selectedVariant.height;
+
+        const aspectRatio = selectedVariant.aspectRatioLock;
+
+        let width = (ev.clientX - bounds.left) / bounds.width - rect.x;
+        let height = (ev.clientY - bounds.top) / bounds.height - rect.y;
+
+        if (aspectRatio) {
+          if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            height = (width / aspectRatio) * originalAspectRatio;
+          } else {
+            width = (height * aspectRatio) / originalAspectRatio;
+          }
+        }
+
+        if (width + rect.x > 1) {
+          width = 1 - rect.x;
+          if (aspectRatio) height = (width / aspectRatio) * originalAspectRatio;
+        }
+
+        if (height + rect.y > 1) {
+          height = 1 - rect.y;
+          if (aspectRatio) width = (height * aspectRatio) / originalAspectRatio;
+        }
+
+        const newRect = { ...rect, width, height };
+        setRect(newRect);
+      }
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
+  };
+
+  const handleMouseUp = () => {
+    if (!rectRef.current || !rectRef.current.width || !rectRef.current.height) {
+      setRect(undefined);
+    }
+    movingRef.current = false;
+    resizeEdgeRef.current = null;
+    setResizeEdge(null);
+    // window.removeEventListener("mousemove", handleMouseMove);
+    window.removeEventListener("mouseup", handleMouseUp);
+  };
+
+  const isInRect = (pos: { x: number; y: number }, rect?: Rect) => {
+    if (!rect || !selectedVariant) return false;
+
+    return (
+      pos.x >= rect.x &&
+      pos.x <= rect.x + rect.width &&
+      pos.y >= rect.y &&
+      pos.y <= rect.y + rect.height
+    );
+  };
+
+  const handleMouseDown = (ev: React.MouseEvent) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+    const bounds = ev.currentTarget.getBoundingClientRect();
+    const pos = {
+      x: (ev.clientX - bounds.left) / bounds.width,
+      y: (ev.clientY - bounds.top) / bounds.height,
+    };
+
+    const edge = getResizeEdge(pos, rect, bounds);
+    if (edge) {
+      resizeEdgeRef.current = edge;
+      setResizeEdge(edge);
+    } else if (isInRect(pos, rect)) {
+      movingRef.current = true;
+      offset.current = {
+        x: pos.x - rect!.x,
+        y: pos.y - rect!.y,
+      };
+    } else {
+      setRect({
+        x: (ev.clientX - bounds.left) / bounds.width,
+        y: (ev.clientY - bounds.top) / bounds.height,
+        width: 0,
+        height: 0,
+      });
+    }
+
+    setStartPos({ x: ev.clientX, y: ev.clientY });
+
+    window.addEventListener("mouseup", handleMouseUp);
+  };
+
+  if (!selectedVariant) return null;
+
+  const imageBounds = imageRef.current?.getBoundingClientRect();
+  const scale = imageBounds ? selectedVariant.width / imageBounds.width : 0;
+  const widthPx = rect ? Math.round(rect.width * selectedVariant.width) : 0;
+  const heightPx = rect ? Math.round(rect.height * selectedVariant.height) : 0;
+
+  return (
+    <>
+      <Dialog
+        header={"Crop " + field.name + " - " + selectedVariantName}
+        pt={{ content: { style: { paddingLeft: "0" } } }}
+        visible={true}
+        style={{ width: "75vw", height: "75vh" }}
+        onHide={onClose}
+      >
+        <div className="flex gap-1 flex-col justify h-full">
+          <div className="flex-1 flex gap-2">
+            <div className="w-56 text-sm p-4 bg-gray-100 flex flex-col gap-3">
+              <LabelAndValue label="Variant:" value={selectedVariantName} />
+              <LabelAndValue
+                label="Image Dimensions:"
+                value={
+                  <>
+                    {selectedVariant.width} x {selectedVariant.height}
+                  </>
+                }
+              />
+              {selectedVariant.aspectRatioLock && (
+                <LabelAndValue
+                  label="Required Aspect Ratio:"
+                  value={selectedVariant.aspectRatioLockText}
+                />
+              )}
+              {selectedVariant.minWidth && (
+                <LabelAndValue
+                  label="Minimum Width:"
+                  value={selectedVariant.minWidth}
+                />
+              )}
+              {selectedVariant.minHeight && (
+                <LabelAndValue
+                  label="Minimum Height:"
+                  value={selectedVariant.minHeight}
+                />
+              )}
+              {rect && (
+                <>
+                  <LabelAndValue
+                    label="Selection:"
+                    value={
+                      <>
+                        {widthPx} x {heightPx}
+                      </>
+                    }
+                  />
+                  {selectedVariant.minWidth &&
+                    widthPx < selectedVariant.minWidth && (
+                      <div className="text-red-500">
+                        Minimum width not met!
+                      </div>
+                    )}
+                  {selectedVariant.minHeight &&
+                    heightPx < selectedVariant.minHeight && (
+                      <div className="text-red-500">
+                        Minimum height not met!
+                      </div>
+                    )}
+                </>
+              )}
+            </div>
+            <div className="flex-1 relative p-3">
+              <div className="absolute inset-0 top-3 select-none flex items-center justify-center">
+                <div
+                  ref={imageRef}
+                  className="relative cursor-crosshair max-h-full"
+                  style={{
+                    aspectRatio: `${selectedVariant.width}/${selectedVariant.height}`,
+                  }}
+                  onMouseDown={handleMouseDown}
+                  onMouseMove={handleMouseMove}
+                >
+                  <img
+                    className="object-scale-down"
+                    src={selectedVariant.originalSrc ?? selectedVariant.src}
+                  />
+                  {rect && (
+                    <div
+                      className={classNames(
+                        "absolute bg-opacity-70 border text-xs cursor-move",
+                        isValid
+                          ? "bg-blue-200 border-blue-400 text-blue-500"
+                          : "bg-red-200 border-red-400 text-red-500"
+                      )}
+                      style={{
+                        left: rect.x * 100 + "%",
+                        top: rect.y * 100 + "%",
+                        width: widthPx / scale + "px",
+                        height: heightPx / scale + "px",
+                        cursor: resizeEdge
+                          ? resizeEdge.length === 1
+                            ? `${resizeEdge}-resize`
+                            : `${resizeEdge}-resize`
+                          : "move",
+                      }}
+                    >
+                      {widthPx / scale > 50 && (
+                        <div
+                          className="absolute bottom-1 right-2 text-nowrap"
+                          style={{ textShadow: "white 1px 1px" }}
+                        >
+                          {widthPx} x {heightPx}
+                        </div>
+                      )}
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+          <DialogButtons>
+            <Button onClick={() => setRect(undefined)}>Reset</Button>
+            <Button
+              size="small"
+              disabled={!isValid}
+              onClick={() => {
+                if (pictureValue) {
+                  if (field) {
+                    editContext?.operations.editField({
+                      field: field.descriptor,
+                      rawValue: JSON.stringify(rawValue),
+                      refresh: "immediate",
+                    });
+                  }
+                }
+                onClose();
+              }}
+            >
+              Ok
+            </Button>
+            <Button onClick={onClose} size="small">
+              Cancel
+            </Button>
+          </DialogButtons>
+        </div>
+      </Dialog>
+    </>
+  );
+}
+
+function LabelAndValue({
+  label,
+  value,
+}: {
+  label: ReactNode;
+  value: ReactNode;
+}) {
+  return (
+    <div>
+      <div className="font-bold">{label}</div>
+      <div>{value}</div>
+    </div>
+  );
+}

package/src/editor/PictureEditor.tsx

@@ -0,0 +1,206 @@
+import { MouseEventHandler, useCallback, useState } from "react";
+import { useEditContext } from "./client/editContext";
+import { PictureCropper } from "./PictureCropper";
+import { PictureField, PictureRawValue } from "./fieldTypes";
+import { MediaSelectorMode } from "./media-selector/MediaSelector";
+
+export function PictureEditor({
+  field,
+  variantName,
+  style,
+  forwardScrollevents,
+  isPageEditor,
+}: {
+  field: PictureField;
+  variantName: string;
+  style?: React.CSSProperties;
+  forwardScrollevents?: boolean;
+  isPageEditor?: boolean;
+}) {
+  const [showMenu, setShowMenu] = useState(false);
+  const [showCropper, setShowCropper] = useState(false);
+  const editContext = useEditContext();
+
+  const variant = field.value?.variants?.find((v) => v.name === variantName);
+  const raw =
+    field?.rawValue && field?.rawValue[0] === "{"
+      ? (JSON.parse(field?.rawValue) as PictureRawValue)
+      : ({ Variants: [] } as PictureRawValue);
+
+  const rawVariant = raw.Variants?.find((x) => x.Name == variantName);
+
+  const reset = useCallback(() => {
+    raw.Variants = raw.Variants.filter((x) => x.Name !== variantName);
+    editContext!.operations.editField({
+      field: field.descriptor,
+      rawValue: JSON.stringify(raw),
+      refresh: "immediate",
+    });
+  }, [field, variant]);
+
+  const imageSelected = useCallback(
+    async (imageId: string) => {
+      const selected = raw.Variants?.find((x) => x.Name == variantName);
+      if (!selected) {
+        if (!raw.Variants) raw.Variants = [];
+        raw.Variants.push({
+          Name: variantName,
+          MediaId: imageId,
+        });
+      } else {
+        selected.MediaId = imageId;
+      }
+
+      editContext!.operations.editField({
+        field: field.descriptor,
+        rawValue: JSON.stringify(raw),
+        refresh: "immediate",
+      });
+    },
+    [field, variant]
+  );
+
+  const videoSelected = useCallback(
+    async (videoId: string) => {
+      const selected = raw.Variants?.find((x) => x.Name == variantName);
+      if (!selected) {
+        if (!raw.Variants) raw.Variants = [];
+        raw.Variants.push({
+          Name: variantName,
+          VideoId: videoId,
+        });
+      } else {
+        selected.VideoId = videoId;
+      }
+
+      editContext!.operations.editField({
+        field: field.descriptor,
+        rawValue: JSON.stringify(raw),
+        refresh: "immediate",
+      });
+    },
+    [field, variant]
+  );
+
+  async function selectMedia(mode: MediaSelectorMode) {
+    const selectedImageId = await editContext?.selectMedia({
+      selectedIdPath: variant?.idPath || "",
+      mode: mode,
+    });
+    if (selectedImageId) imageSelected(selectedImageId);
+  }
+
+  async function selectVideo() {
+    const selectedVideoId = await editContext?.selectMedia({
+      selectedIdPath: variant?.idPath || "",
+      mode: "video",
+    });
+    if (selectedVideoId) videoSelected(selectedVideoId);
+  }
+
+  const notEmpty = variant?.mediaId;
+
+  return (
+    <div
+      className="absolute inset-0 flex items-center justify-center"
+      onMouseEnter={() => setShowMenu(true)}
+      onMouseLeave={() => setShowMenu(false)}
+      onClick={() => {
+        if (!isPageEditor) return;
+        const itemId = field.descriptor.item?.id;
+        if (itemId) editContext?.select([itemId]);
+      }}
+      onWheel={(e) => {
+        if (forwardScrollevents)
+          editContext?.pageView.editorIframeRef!.current?.contentWindow?.document.documentElement?.scrollBy(
+            {
+              behavior: "instant",
+              left: 0,
+              top: e.deltaY,
+            }
+          );
+        editContext?.pageView.editorIframeRef!.current?.contentWindow?.document.body?.scrollBy(
+          {
+            behavior: "instant",
+            left: 0,
+            top: e.deltaY,
+          }
+        );
+      }}
+      style={style}
+      data-testid="select-media"
+    >
+      {showMenu && (
+        <div className="p-3 grid grid-cols-2 gap-1.5 items-stretch justify-center text-sm min-w-48">
+          <Btn
+            label="Select"
+            icon="pi pi-image"
+            onClick={() => selectMedia("images")}
+            testId="select-media-button"
+            className="min-w-[80px]"
+          />
+          {field.value?.allowVideos && (
+            <Btn
+              label="Video"
+              icon="pi pi-video"
+              onClick={() => selectVideo()}
+              testId="video-media-button"
+              className="min-w-[80px]"
+            />
+          )}
+          {notEmpty && (
+            <Btn
+              label="Crop"
+              icon="pi pi-expand"
+              onClick={() => {
+                setShowCropper(true);
+              }}
+              testId="crop-media-button"
+              className="min-w-[80px]"
+            />
+          )}
+          {rawVariant && (
+            <Btn
+              label="Reset"
+              icon="pi pi-times"
+              onClick={() => reset()}
+              testId="reset-media-button"
+              className="min-w-[80px]"
+            />
+          )}
+        </div>
+      )}
+      {showCropper && (
+        <PictureCropper
+          field={field}
+          onClose={() => setShowCropper(false)}
+          variantName={variantName}
+        />
+      )}
+    </div>
+  );
+}
+
+function Btn({
+  label,
+  icon,
+  onClick,
+  testId,
+  className,
+}: {
+  label: string;
+  icon: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  testId?: string;
+  className?: string;
+}) {
+  return (
+    <button
+      className={`btn bg-gray-500 text-white p-1.5 rounded-lg opacity-70 border hover:opacity-85 gap-1.5 flex items-center cursor-pointer ${className}`}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      <i className={icon} /> {label}
+    </button>
+  );
+}