@alpaca-editor/core 1.0.3942 → 1.0.3943

package/src/editor/MobileLayout.tsx

@@ -0,0 +1,68 @@
+import { cn } from "../lib/utils";
+import { MainLayoutProps } from "./MainLayout";
+import { ViewSelector } from "./sidebar/ViewSelector";
+import { useEditContext } from "./client/editContext";
+import { Splitter, SplitterPanel } from "./ui/Splitter";
+import { SidebarView } from "./sidebar/SidebarView";
+
+export function MobileLayout(props: MainLayoutProps) {
+  const editContext = useEditContext();
+
+  if (!editContext) return null;
+
+  let className = props.className;
+
+  if (!editContext?.configuration.editor.embedded) {
+    className = cn("fixed inset-0", props.className);
+  }
+
+  const panels: SplitterPanel[] = [
+    {
+      name: "center",
+      defaultSize: "auto",
+      content: props.centerPanelView,
+    },
+  ];
+
+  const viewsWithLeftSidebar = editContext.configuration.editor.views.filter(
+    (v) => v.leftSidebar,
+  );
+
+  if (viewsWithLeftSidebar.length > 0) {
+    panels.push({
+      name: "sidebar",
+      hidden: !props.view.leftSidebar,
+      defaultSize: 250,
+      content: (
+        <div className="relative h-full w-full">
+          {viewsWithLeftSidebar.map((v) => (
+            <SidebarView
+              key={v.name}
+              sidebar={v.leftSidebar!}
+              editContext={editContext}
+              active={props.view.name === v.name && !!v.leftSidebar}
+            />
+          ))}
+        </div>
+      ),
+    });
+  }
+
+  return (
+    <div className={cn("flex flex-col select-none", className)}>
+      {editContext?.configuration.editor.titlebar}
+
+      <Splitter
+        panels={panels}
+        direction="vertical"
+        localStorageKey="mobile-layout-splitter"
+      />
+
+      {!props.view.hideViewSelector && <ViewSelector />}
+      {/* <div className="text-2xs fixed right-0 bottom-0 z-50 flex flex-col rounded-tl-2xl bg-gray-50/70 px-1 pt-1 text-center font-mono text-gray-400">
+        <div title={buildDate}>{version}</div>
+      </div> */}
+      {/* Sidebars rendered above */}
+    </div>
+  );
+}

package/src/editor/NewEditorClient.tsx

@@ -0,0 +1,11 @@
+"use client";
+
+import { EditorConfiguration } from "../config/types";
+
+export function NewEditorClient(props: {
+  className?: string;
+  configuration: EditorConfiguration;
+}) {
+  console.log(props);
+  return <div>Hello</div>;
+}

package/src/editor/PictureCropper.tsx

@@ -0,0 +1,568 @@
+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 [actualImageDimensions, setActualImageDimensions] = useState<{
+    width: number;
+    height: number;
+  } | null>(null);
+
+  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 actualWidth =
+          selectedVariant.width > 0
+            ? selectedVariant.width
+            : actualImageDimensions?.width || 0;
+        const actualHeight =
+          selectedVariant.height > 0
+            ? selectedVariant.height
+            : actualImageDimensions?.height || 0;
+        const originalAspectRatio =
+          actualHeight > 0 ? actualWidth / actualHeight : 1;
+
+        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")) {
+          const newWidth = pos.x - rect.x;
+          if (newWidth > 0) {
+            newRect.width = newWidth;
+            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")) {
+          const newHeight = pos.y - rect.y;
+          if (newHeight > 0) {
+            newRect.height = newHeight;
+            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 actualWidth =
+          selectedVariant.width > 0
+            ? selectedVariant.width
+            : actualImageDimensions?.width || 0;
+        const actualHeight =
+          selectedVariant.height > 0
+            ? selectedVariant.height
+            : actualImageDimensions?.height || 0;
+        const originalAspectRatio =
+          actualHeight > 0 ? actualWidth / actualHeight : 1;
+
+        const aspectRatio = selectedVariant.aspectRatioLock;
+
+        const currentX = (ev.clientX - bounds.left) / bounds.width;
+        const currentY = (ev.clientY - bounds.top) / bounds.height;
+
+        const minX = Math.min(rect.x, currentX);
+        const maxX = Math.max(rect.x, currentX);
+        const minY = Math.min(rect.y, currentY);
+        const maxY = Math.max(rect.y, currentY);
+
+        let width = maxX - minX;
+        let height = maxY - minY;
+
+        if (aspectRatio) {
+          if (Math.abs(deltaX) > Math.abs(deltaY)) {
+            height = (width / aspectRatio) * originalAspectRatio;
+          } else {
+            width = (height * aspectRatio) / originalAspectRatio;
+          }
+        }
+
+        if (width + minX > 1) {
+          width = 1 - minX;
+          if (aspectRatio) height = (width / aspectRatio) * originalAspectRatio;
+        }
+
+        if (height + minY > 1) {
+          height = 1 - minY;
+          if (aspectRatio) width = (height * aspectRatio) / originalAspectRatio;
+        }
+
+        // Ensure final dimensions are non-negative
+        width = Math.max(0, width);
+        height = Math.max(0, height);
+
+        const newRect = { x: minX, y: minY, 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 actualWidth =
+    selectedVariant.width > 0
+      ? selectedVariant.width
+      : actualImageDimensions?.width || 0;
+  const actualHeight =
+    selectedVariant.height > 0
+      ? selectedVariant.height
+      : actualImageDimensions?.height || 0;
+  const scale =
+    imageBounds && actualWidth > 0 ? actualWidth / imageBounds.width : 1;
+  const widthPx = rect ? Math.round(rect.width * actualWidth) : 0;
+  const heightPx = rect ? Math.round(rect.height * actualHeight) : 0;
+
+  return (
+    <>
+      <Dialog
+        header={"Crop " + field.name + " - " + selectedVariantName}
+        pt={{ content: { style: { paddingLeft: "0" } } }}
+        visible={true}
+        style={{ width: "75vw", height: "75vh" }}
+        onHide={onClose}
+      >
+        <div className="justify flex h-full flex-col gap-1">
+          <div className="flex flex-1 gap-2">
+            <div className="flex w-56 flex-col gap-3 bg-gray-100 p-4 text-sm">
+              <LabelAndValue label="Variant:" value={selectedVariantName} />
+              <LabelAndValue
+                label="Image Dimensions:"
+                value={
+                  selectedVariant.width > 0 && selectedVariant.height > 0 ? (
+                    <>
+                      {selectedVariant.width} x {selectedVariant.height}
+                    </>
+                  ) : actualImageDimensions ? (
+                    <>
+                      {actualImageDimensions.width} x{" "}
+                      {actualImageDimensions.height} (actual)
+                    </>
+                  ) : (
+                    <span className="text-gray-500">Loading...</span>
+                  )
+                }
+              />
+              {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="relative flex-1 p-3">
+              <div className="absolute inset-0 top-3 flex items-center justify-center select-none">
+                <div
+                  ref={imageRef}
+                  className="relative max-h-full cursor-crosshair"
+                  style={{
+                    ...(actualWidth > 0 && actualHeight > 0
+                      ? { aspectRatio: `${actualWidth}/${actualHeight}` }
+                      : {}),
+                  }}
+                  onMouseDown={handleMouseDown}
+                  onMouseMove={handleMouseMove}
+                >
+                  <img
+                    className="max-h-full max-w-full object-scale-down"
+                    src={selectedVariant.originalSrc ?? selectedVariant.src}
+                    onLoad={(e) => {
+                      const img = e.target as HTMLImageElement;
+                      setActualImageDimensions({
+                        width: img.naturalWidth,
+                        height: img.naturalHeight,
+                      });
+                    }}
+                  />
+                  {rect && (
+                    <div
+                      className={classNames(
+                        "absolute cursor-move border text-xs opacity-70",
+                        isValid
+                          ? "border-blue-400 bg-blue-200 text-blue-500"
+                          : "border-red-400 bg-red-200 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 right-2 bottom-1 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>
+  );
+}