@alpaca-editor/core 1.0.3939 → 1.0.3941

package/src/editor/PictureEditor.tsx

@@ -1,277 +0,0 @@
-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.length > 0 && (
-            <Btn
-              label="Actions"
-              icon="pi pi-bolt"
-              onClick={(e) => fieldActionsOverlay.current?.show(e)}
-              testId="field-actions-button"
-              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 || (() => {})}
-      />
-    </div>
-  );
-}
-
-function Btn({
-  label,
-  icon,
-  onClick,
-  testId,
-  className,
-}: {
-  label: string;
-  icon: string;
-  onClick: MouseEventHandler<HTMLButtonElement>;
-  testId?: string;
-  className?: string;
-}) {
-  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}
-    >
-      <i className={icon} /> {label}
-    </button>
-  );
-}

package/src/editor/PictureEditorDialog.tsx

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