@alpaca-editor/core 1.0.3942 → 1.0.3944

package/src/editor/PictureEditor.tsx

@@ -0,0 +1,301 @@
+import {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { useEditContext } from "./client/editContext";
+import { PictureCropper } from "./PictureCropper";
+import { PictureField, PictureRawValue } from "./fieldTypes";
+import { MediaSelectorMode } from "./media-selector/MediaSelector";
+import { loadFieldButtons } from "./services/editService";
+import { FieldButton } from "./pageModel";
+import {
+  FieldActionsOverlay,
+  FieldActionsOverlayRef,
+} from "./FieldActionsOverlay";
+
+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 [fieldButtons, setFieldButtons] = useState<FieldButton[]>([]);
+  const fieldActionsOverlay = useRef<FieldActionsOverlayRef>(null);
+  const editContext = useEditContext();
+
+  // Load field buttons when component mounts
+  useEffect(() => {
+    const loadButtons = async () => {
+      if (field.descriptor) {
+        try {
+          const buttons = await loadFieldButtons(field.descriptor);
+          setFieldButtons(buttons);
+        } catch (error) {
+          console.warn("Failed to load field buttons:", error);
+        }
+      }
+    };
+    loadButtons();
+  }, [field.descriptor]);
+
+  // Field action handlers
+  const handleActionClick = useCallback(
+    async (action: FieldButton): Promise<void> => {
+      editContext?.triggerFieldAction(field.descriptor, action);
+    },
+    [editContext, field.descriptor],
+  );
+
+  const handleParameterizedActionExecute = useCallback(
+    async (
+      action: FieldButton,
+      parameters: Record<string, string>,
+    ): Promise<void> => {
+      editContext?.triggerFieldAction(field.descriptor, action, parameters);
+    },
+    [editContext, field.descriptor],
+  );
+
+  const variant = field.value?.variants?.find((v) => v.name === variantName);
+  const raw = (() => {
+    try {
+      return field?.rawValue && field?.rawValue[0] === "{"
+        ? (JSON.parse(field?.rawValue) as PictureRawValue)
+        : ({ Variants: [] } as PictureRawValue);
+    } catch (error) {
+      console.warn("Failed to parse picture field raw value:", error);
+      return { 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="grid min-w-48 grid-cols-2 items-stretch justify-center gap-1.5 p-3 text-sm">
+          <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]"
+            />
+          )}
+          {fieldButtons.map((button) => (
+            <Btn
+              key={button.id}
+              label={button.label}
+              icon={
+                button.isGenerator
+                  ? "pi pi-cog"
+                  : button.icon && button.icon.trim() !== ""
+                    ? button.icon
+                    : "pi pi-bolt"
+              }
+              onClick={(e) => {
+                if (button.parameters && button.parameters.length > 0) {
+                  fieldActionsOverlay.current?.show(e, button);
+                } else {
+                  handleActionClick(button);
+                }
+              }}
+              testId={`field-action-${button.id}`}
+              className="min-w-[80px]"
+            />
+          ))}
+        </div>
+      )}
+      {showCropper && (
+        <PictureCropper
+          field={field}
+          onClose={() => setShowCropper(false)}
+          variantName={variantName}
+        />
+      )}
+      <FieldActionsOverlay
+        ref={fieldActionsOverlay}
+        generatorButtons={fieldButtons}
+        onActionClick={handleActionClick}
+        onParameterizedActionExecute={handleParameterizedActionExecute}
+        currentOverlay={editContext?.currentOverlay}
+        fieldId={field.id}
+        setCurrentOverlay={editContext?.setCurrentOverlay || (() => {})}
+        hideBackButton={true}
+      />
+    </div>
+  );
+}
+
+function Btn({
+  label,
+  icon,
+  onClick,
+  testId,
+  className,
+}: {
+  label: string;
+  icon: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  testId?: string;
+  className?: string;
+}) {
+  const isImageUrl =
+    icon.startsWith("http://") ||
+    icon.startsWith("https://") ||
+    icon.startsWith("/");
+
+  return (
+    <button
+      className={`btn flex cursor-pointer items-center gap-1.5 rounded-lg border bg-gray-500 p-1.5 text-white opacity-70 hover:opacity-85 ${className}`}
+      onClick={onClick}
+      data-testid={testId}
+    >
+      {isImageUrl ? (
+        <img src={icon} alt="" className="h-4 w-4" />
+      ) : (
+        <i className={icon} />
+      )}{" "}
+      {label}
+    </button>
+  );
+}

package/src/editor/PictureEditorDialog.tsx

@@ -0,0 +1,381 @@
+import { Dialog } from "primereact/dialog";
+
+import { useEditContext } from "./client/editContext";
+
+import { useCallback, useEffect, useState } from "react";
+import { Button } from "primereact/button";
+import DialogButtons from "./ui/DialogButtons";
+
+import { getPictureValue } from "./services/editService";
+import {
+  PictureField,
+  PictureRawValue,
+  PictureRawVariant,
+  PictureValue,
+} from "./fieldTypes";
+
+import {
+  MediaPictureParams,
+  PictureParams,
+  getRenderedPictureVariant,
+} from "./picture-shared";
+import { Field } from "./pageModel";
+
+export function PictureEditorDialog({
+  field,
+  onCancel,
+  onOk,
+  params,
+}: {
+  field: PictureField;
+  onOk: (link: PictureValue) => void;
+  onCancel: () => void;
+  params?: PictureParams | MediaPictureParams;
+}) {
+  const [selectedVariantName, setSelectedVariantName] = useState<string>();
+  const [pictureValue, setPictureValue] = useState<PictureValue>();
+  const [rawValue, setRawValue] = useState<PictureRawValue>();
+  const emptyRect = () => ({
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+  });
+  const [rect, setRect] = useState(emptyRect());
+
+  const editContext = useEditContext();
+  useEffect(() => {
+    setSelectedVariantName(field?.value?.variants[0].name);
+  }, []);
+
+  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);
+    if (!field?.value?.variants[0].src)
+      selectMedia(field?.value?.variants[0].name, raw);
+  }, [field]);
+
+  async function selectMedia(variantName?: string, raw?: PictureRawValue) {
+    const chosenImage = await editContext?.selectMedia({
+      selectedIdPath: selectedVariant?.idPath || "",
+      mode: "images",
+    });
+    if (chosenImage)
+      imageSelected(
+        chosenImage,
+        variantName ?? selectedVariantName,
+        raw ?? rawValue
+      );
+  }
+
+  const selectedVariant =
+    pictureValue && pictureValue.variants
+      ? pictureValue.variants?.find((x) => x.name == selectedVariantName)
+      : null;
+
+  useEffect(() => {
+    if (
+      selectedVariant?.region &&
+      (!selectedVariant.aspectRatioLock ||
+        Math.abs(
+          selectedVariant.aspectRatioLock -
+            selectedVariant.region.width / selectedVariant.region.height
+        ) < 0.1)
+    )
+      setRect({
+        width: selectedVariant.region.width,
+        height: selectedVariant.region.height,
+        top: selectedVariant.region.y,
+        left: selectedVariant.region.x,
+      });
+    else {
+      setRect(emptyRect());
+    }
+  }, [selectedVariantName]);
+
+  const getPictureFieldValue = async (
+    field: Field,
+    rawValue: PictureRawValue
+  ): Promise<PictureValue | null> => {
+    if (!editContext?.pageView.site) return null;
+
+    return getPictureValue(
+      field,
+      rawValue,
+      editContext.pageView.site?.name,
+      editContext.sessionId
+    );
+  };
+
+  const imageSelected = useCallback(
+    async (
+      imageId: string,
+      variantName?: string,
+      rawValue?: PictureRawValue
+    ) => {
+      if (!variantName || !rawValue) return;
+
+      const selected = rawValue.Variants?.find((x) => x.Name == variantName);
+      if (!selected) {
+        if (!rawValue.Variants) rawValue.Variants = [];
+        rawValue.Variants.push({
+          Name: variantName,
+          MediaId: imageId,
+        });
+      } else {
+        selected.MediaId = imageId;
+      }
+      setRawValue(rawValue);
+      const newValue = await getPictureFieldValue(field, rawValue);
+      if (newValue) {
+        setPictureValue(newValue);
+      }
+    },
+    []
+  );
+  const updateRawValue = async (rawValue: PictureRawValue) => {
+    setRawValue(rawValue);
+    const newValue = await getPictureFieldValue(field, rawValue);
+    if (newValue) {
+      setPictureValue(newValue);
+    }
+  };
+
+  const setVariantCrop = async () => {
+    if (!rawValue) return;
+    if (!selectedVariantName) return;
+
+    if (selectedVariant) {
+      let selected = rawValue.Variants?.find(
+        (x: PictureRawVariant) => x.Name == selectedVariantName
+      );
+      if (!selected) {
+        selected = {
+          Name: selectedVariantName,
+          MediaId: selectedVariant.mediaId!,
+        };
+        rawValue.Variants?.push(selected);
+      }
+      if (selected) {
+        selected.Region = {
+          X: rect.left,
+          Y: rect.top,
+          Width: rect.width,
+          Height: rect.height,
+        };
+        await updateRawValue(rawValue);
+      }
+    }
+  };
+
+  const usage = getUsage(pictureValue, params);
+
+  return (
+    <>
+      <Dialog
+        header={"Edit " + field.name}
+        visible={true}
+        style={{ width: "70vw", height: "70vh" }}
+        onHide={onCancel}
+      >
+        <div className="flex gap-1 flex-col justify h-full">
+          <div className="flex-1 flex gap-2">
+            <div className=" h-full border-r pt-3 w-48 relative">
+              <div className="absolute inset-0 overflow-y-auto flex flex-col gap-6">
+                {pictureValue &&
+                  pictureValue.variants?.map((variant) => (
+                    <div
+                      key={variant.name}
+                      onClick={() => setSelectedVariantName(variant.name)}
+                      className="text-xs flex flex-col items-center justify-center gap-1 cursor-pointer"
+                    >
+                      <div
+                        className={
+                          "flex justify-center items-center h-40 w-40 border relative" +
+                          (selectedVariantName == variant.name
+                            ? " shadow-xl "
+                            : "")
+                        }
+                      >
+                        {variant.src && <img src={variant.thumbSrc} />}
+                      </div>
+                      <div className="w-40">
+                        <div>{variant.name}</div>
+                        <div>{variant.aspectRatioLockText}</div>
+                        <div>
+                          <div className="break-all">
+                            Name: {variant.mediaItemName}
+                          </div>
+                          <div>
+                            Orig. size: {variant.width} x {variant.height}
+                          </div>
+                          {(variant.width < 1 || variant.height < 1) && (
+                            <span>
+                              {" "}
+                              <i className="pi pi-exclamation-triangle text-red-600 "></i>
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+              </div>
+              {usage && <div className="text-xs">{usage}</div>}
+            </div>
+            <div className="flex-1 relative p-3">
+              <div className="absolute inset-0 top-3 overflow-auto select-none flex align-center justify-center">
+                {selectedVariant && (
+                  <div
+                    className="relative"
+                    onDoubleClick={() => selectMedia()}
+                    onMouseDown={(ev) => {
+                      ev.preventDefault();
+                      ev.stopPropagation();
+                      const bounds = ev.currentTarget.getBoundingClientRect();
+
+                      setRect({
+                        left: (ev.clientX - bounds.left) / bounds.width,
+                        top: (ev.clientY - bounds.top) / bounds.height,
+                        width: 0,
+                        height: 0,
+                      });
+                    }}
+                    onMouseMoveCapture={(ev) => {
+                      if (ev.buttons === 1) {
+                        const bounds = ev.currentTarget.getBoundingClientRect();
+
+                        const width =
+                          (ev.clientX - bounds.left) / bounds.width - rect.left;
+
+                        const newRect = {
+                          ...rect,
+                          width,
+                          height: selectedVariant.aspectRatioLock
+                            ? width / selectedVariant.aspectRatioLock
+                            : (ev.clientY - bounds.top) / bounds.height -
+                              rect.top,
+                        };
+
+                        setRect(newRect);
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                      }
+                    }}
+                    onMouseUp={() => setVariantCrop()}
+                  >
+                    <img
+                      src={selectedVariant.originalSrc ?? selectedVariant.src}
+                      className="object-contain h-full w-full"
+                    />
+                    <div
+                      className="absolute bg-opacity-70 bg-gray-300"
+                      style={{
+                        left: rect.left * 100 + "%",
+                        top: rect.top * 100 + "%",
+                        width: rect.width * 100 + "%",
+                        height: rect.height * 100 + "%",
+                      }}
+                    />
+                  </div>
+                )}
+                {selectedVariant && (
+                  <div
+                    className="absolute top-0 right-0 cursor-pointer text-sm flex flex-col gap-1 items-center p-2 bg-gray-100 bg-opacity-70"
+                    onClick={() => selectMedia()}
+                  >
+                    <i className="pi pi-pencil text-xl"></i>
+                    Choose
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+          <DialogButtons>
+            <Button
+              size="small"
+              onClick={() => {
+                if (pictureValue) {
+                  if (field) {
+                    editContext?.operations.editField({
+                      field: field.descriptor,
+                      rawValue: JSON.stringify(rawValue),
+                      refresh: "immediate",
+                    });
+                  }
+                  onOk(pictureValue);
+                }
+              }}
+            >
+              Ok
+            </Button>
+            <Button
+              onClick={() => {
+                onCancel();
+              }}
+              size="small"
+            >
+              Cancel
+            </Button>
+          </DialogButtons>
+        </div>
+      </Dialog>
+    </>
+  );
+}
+function getUsage(
+  pictureValue: PictureValue | undefined,
+  params: PictureParams | MediaPictureParams | undefined
+) {
+  if (!params) return;
+  if (!pictureValue) return;
+  if (pictureValue.variants.length <= 1) return;
+  const mediaParams =
+    typeof params === "object" && "default" in params ? params : undefined;
+
+  if (mediaParams) {
+    const sources = Object.keys(mediaParams ?? {});
+    const variants = sources
+      .map((source) => ({
+        source,
+        variant: getRenderedPictureVariant(
+          mediaParams[source],
+          pictureValue.variants
+        ),
+      }))
+      .filter((x) => x.variant);
+
+    return (
+      <>
+        This field rendering is using these variants:
+        <table>
+          {variants.map((v) => (
+            <tr>
+              <td>{v.source}</td>
+              <td>
+                <b>{v.variant.name}</b>
+              </td>
+            </tr>
+          ))}
+        </table>
+      </>
+    );
+  }
+  return (
+    <>
+      This field rendering is using the variant{" "}
+      <b>
+        {
+          getRenderedPictureVariant(
+            params as PictureParams,
+            pictureValue.variants
+          )?.name
+        }
+        .
+      </b>
+    </>
+  );
+}