@alpaca-editor/core 1.0.3938 → 1.0.3941

package/src/editor/MobileLayout.tsx

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

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

@@ -1,503 +0,0 @@
-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="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} 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="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={{
-                    aspectRatio: `${selectedVariant.width}/${selectedVariant.height}`,
-                  }}
-                  onMouseDown={handleMouseDown}
-                  onMouseMove={handleMouseMove}
-                >
-                  <img
-                    className="object-scale-down"
-                    src={selectedVariant.originalSrc ?? selectedVariant.src}
-                  />
-                  {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>
-  );
-}