@alpaca-editor/core 1.0.0

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>
+    </>
+  );
+}

package/src/editor/PublishDialog.ignore

@@ -0,0 +1,74 @@
+import { Dialog } from "primereact/dialog";
+
+import { Workbox as WorkboxWidget } from "./sidebar/Workbox";
+
+import DialogButtons from "./DialogButtons";
+import { Button } from "primereact/button";
+
+
+export function PublishDialog({
+  // lockItems,
+  // unlockItems,
+
+  visible,
+  onHide,
+  page,
+}: {
+  // lockItems: (item: ItemDescriptor[]) => void;
+  // unlockItems: (item: ItemDescriptor[]) => void;
+  executeWorkflowCommand: (item: ItemDescriptor, commandId: string) => void;
+  visible: boolean;
+  onHide: () => void;
+  page: Page;
+}) {
+  const allUnlocked =
+    page._editor!.workbox.items.filter((x) => x.hasLock).length > 0;
+  const allInFinalState =
+    page._editor!.workbox.items.filter((x) => !x.isFinalState).length > 0;
+  return (
+    <>
+      <Dialog
+        header={"Publish page " + page.name}
+        style={{ width: "70vw", height: "70vh" }}
+        onHide={onHide}
+        visible={visible}
+      >
+        <div className="a-w-full a-h-full a-flex a-flex-col">
+          <WorkboxWidget />
+
+          <DialogButtons>
+            {/* {allUnlocked && (
+              <Button
+                onClick={() => {
+                  unlockItems(
+                    page.workbox.items
+                      .filter((x) => x.hasLock)
+                      .map((x) => x.item)
+                  );
+                }}
+                size="small"
+              >
+                Unlock all
+              </Button>
+            )} */}
+            {allInFinalState && (
+              <Button size="small" onClick={() => {}}>
+                Publish
+              </Button>
+            )}
+            {!(allInFinalState || !allUnlocked) && (
+              <Button
+                onClick={() => {
+                  onHide();
+                }}
+                size="small"
+              >
+                Cancel
+              </Button>
+            )}
+          </DialogButtons>
+        </div>
+      </Dialog>
+    </>
+  );
+}

package/src/editor/ScrollingContentTree.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from "react";
+import { ItemTreeNodeData } from "./services/contentService";
+
+import ContentTree from "./ContentTree";
+import { FullItem } from "./pageModel";
+import { contentItemId } from "../config/config";
+import { useEditContext } from "./client/editContext";
+
+export function ScrollingContentTree({
+  selectedItemId,
+  onSelectionChange,
+  rootItemId,
+}: {
+  selectedItemId?: string;
+  onSelectionChange?: (itemIds: ItemTreeNodeData[]) => void;
+  rootItemId?: string;
+}) {
+  const [selectedItem, setSelectdItem] = useState<FullItem | null>(null);
+  const editContext = useEditContext();
+
+  useEffect(() => {
+    const loadItem = async () => {
+      if (!selectedItemId) return;
+      const item = await editContext!.itemsRepository.getItem({
+        id: selectedItemId,
+        language: editContext!.currentItemDescriptor?.language ?? "en",
+        version: 0,
+      });
+      if (item) setSelectdItem(item);
+    };
+    loadItem();
+  }, [selectedItemId]);
+
+  return (
+    <div className="absolute inset-0 overflow-auto">
+      <ContentTree
+        language={editContext!.currentItemDescriptor?.language ?? "en"}
+        rootItemId={rootItemId ?? contentItemId}
+        expandIdPath={selectedItem?.idPath}
+        selectedItemIds={selectedItemId ? [selectedItemId] : []}
+        selectionMode="single"
+        className="h-full p-1"
+        onSelectionChange={onSelectionChange}
+      />
+    </div>
+  );
+}