sa2kit 1.6.89 → 1.6.90

package/dist/index.mjs

@@ -7489,9 +7489,24 @@ var createImageElement = (pageIndex) => ({
 });
 var FestivalCardConfigEditor = ({ value, onChange }) => {
   const [activePageIndex, setActivePageIndex] = useState(0);
+  const [activeElementId, setActiveElementId] = useState(null);
+  const [draggingElementId, setDraggingElementId] = useState(null);
+  const previewRef = useRef(null);
+  const dragStateRef = useRef(null);
   const page = value.pages[activePageIndex];
   const canEditPage = Boolean(page);
   const pageOptions = useMemo(() => value.pages.map((_, index) => index), [value.pages]);
+  const backgroundElement = useMemo(
+    () => page?.elements.find(
+      (element) => element.type === "image" && Boolean(element.isBackground)
+    ),
+    [page]
+  );
+  const foregroundElements = useMemo(
+    () => (page?.elements ?? []).filter((element) => !(element.type === "image" && element.isBackground)),
+    [page]
+  );
+  const clampPercent = (valueToClamp) => Math.max(0, Math.min(100, Number.isFinite(valueToClamp) ? valueToClamp : 0));
   const handlePageCountChange = (nextRaw) => {
     const next = Number.isFinite(nextRaw) ? Math.max(1, Math.min(12, Math.floor(nextRaw))) : value.pages.length;
     const resized = resizeFestivalCardPages(value, next);
@@ -7528,6 +7543,38 @@ var FestivalCardConfigEditor = ({ value, onChange }) => {
       pages: value.pages.map((p, index) => index === activePageIndex ? { ...p, ...patch } : p)
     });
   };
+  const moveElementWithPointer = (elementId, clientX, clientY, rect) => {
+    const bounds = rect || previewRef.current?.getBoundingClientRect();
+    if (!bounds || bounds.width <= 0 || bounds.height <= 0) return;
+    const x = clampPercent((clientX - bounds.left) / bounds.width * 100);
+    const y = clampPercent((clientY - bounds.top) / bounds.height * 100);
+    updateElement(elementId, { x, y });
+  };
+  const handleElementPointerDown = (event, elementId) => {
+    if (!previewRef.current) return;
+    event.preventDefault();
+    const rect = previewRef.current.getBoundingClientRect();
+    dragStateRef.current = {
+      pointerId: event.pointerId,
+      elementId,
+      rect
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+    setActiveElementId(elementId);
+    setDraggingElementId(elementId);
+    moveElementWithPointer(elementId, event.clientX, event.clientY, rect);
+  };
+  const handlePreviewPointerMove = (event) => {
+    const dragState = dragStateRef.current;
+    if (!dragState || dragState.pointerId !== event.pointerId) return;
+    moveElementWithPointer(dragState.elementId, event.clientX, event.clientY, dragState.rect);
+  };
+  const endPointerDrag = (event) => {
+    const dragState = dragStateRef.current;
+    if (!dragState || dragState.pointerId !== event.pointerId) return;
+    dragStateRef.current = null;
+    setDraggingElementId(null);
+  };
   const numberFieldClassName = "w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-900 outline-none focus:border-sky-400 focus:ring-2 focus:ring-sky-100";
   return /* @__PURE__ */ React69__default.createElement("div", { className: "rounded-2xl border border-slate-200 bg-white p-4 text-slate-900 shadow-sm" }, /* @__PURE__ */ React69__default.createElement("div", { className: "grid gap-3" }, /* @__PURE__ */ React69__default.createElement("label", { className: "grid gap-1.5" }, /* @__PURE__ */ React69__default.createElement("span", { className: "text-sm font-medium text-slate-700" }, "\u9875\u9762\u6570\u91CF"), /* @__PURE__ */ React69__default.createElement(
     "input",
@@ -7621,6 +7668,73 @@ var FestivalCardConfigEditor = ({ value, onChange }) => {
       className: "rounded-lg bg-sky-600 px-3 py-2 text-sm font-medium text-white"
     },
     "+ \u56FE\u7247"
+  )), /* @__PURE__ */ React69__default.createElement("div", { className: "mb-3" }, /* @__PURE__ */ React69__default.createElement("div", { className: "mb-2 flex items-center justify-between" }, /* @__PURE__ */ React69__default.createElement("div", { className: "text-xs font-semibold tracking-wide text-slate-500" }, "\u62D6\u62FD\u5B9A\u4F4D\uFF08\u76F4\u63A5\u62D6\u52A8\u5143\u7D20\u8C03\u6574 X / Y\uFF09"), /* @__PURE__ */ React69__default.createElement("div", { className: "text-xs text-slate-500" }, draggingElementId ? "\u62D6\u62FD\u4E2D..." : "\u53EF\u62D6\u62FD")), /* @__PURE__ */ React69__default.createElement(
+    "div",
+    {
+      ref: previewRef,
+      onPointerMove: handlePreviewPointerMove,
+      onPointerUp: endPointerDrag,
+      onPointerCancel: endPointerDrag,
+      className: "relative aspect-[3/4] w-full touch-none overflow-hidden rounded-xl border border-slate-300 bg-slate-900",
+      style: {
+        backgroundColor: page?.background?.color || "#0f172a",
+        backgroundImage: backgroundElement ? `url(${backgroundElement.src})` : page?.background?.image ? `url(${page.background.image})` : void 0,
+        backgroundSize: "cover",
+        backgroundPosition: "center"
+      }
+    },
+    /* @__PURE__ */ React69__default.createElement("div", { className: "absolute inset-0 bg-slate-950/20" }),
+    foregroundElements.map((element) => {
+      const isActive = activeElementId === element.id;
+      const isDragging = draggingElementId === element.id;
+      return /* @__PURE__ */ React69__default.createElement(
+        "div",
+        {
+          key: element.id,
+          role: "button",
+          tabIndex: 0,
+          onPointerDown: (event) => handleElementPointerDown(event, element.id),
+          onClick: () => setActiveElementId(element.id),
+          className: `absolute select-none rounded-md ${isDragging ? "cursor-grabbing" : "cursor-grab"} ${isActive ? "ring-2 ring-sky-300" : "ring-1 ring-white/40"}`,
+          style: {
+            left: `${element.x}%`,
+            top: `${element.y}%`,
+            width: `${element.width ?? 70}%`,
+            height: element.height ? `${element.height}%` : void 0,
+            transform: "translate(-50%, -50%)",
+            zIndex: isActive ? 4 : 2
+          }
+        },
+        element.type === "text" ? /* @__PURE__ */ React69__default.createElement(
+          "div",
+          {
+            className: "w-full rounded-md bg-black/20 px-2 py-1",
+            style: {
+              color: element.color || "#f8fafc",
+              fontSize: element.fontSize || 18,
+              fontWeight: element.fontWeight || 500,
+              fontFamily: element.fontFamily || "inherit",
+              textAlign: element.align || "left",
+              lineHeight: 1.35,
+              whiteSpace: "pre-wrap"
+            }
+          },
+          element.content || "\u6587\u672C"
+        ) : /* @__PURE__ */ React69__default.createElement(
+          "img",
+          {
+            src: element.src,
+            alt: element.alt || "festival-card-image",
+            draggable: false,
+            className: "h-full w-full pointer-events-none",
+            style: {
+              objectFit: element.fit || "cover",
+              borderRadius: element.borderRadius || 0
+            }
+          }
+        )
+      );
+    })
   )), /* @__PURE__ */ React69__default.createElement("div", { className: "grid max-h-[340px] gap-2.5 overflow-auto pr-1" }, (page?.elements ?? []).map((element) => /* @__PURE__ */ React69__default.createElement("div", { key: element.id, className: "rounded-xl border border-slate-200 bg-slate-50 p-3" }, /* @__PURE__ */ React69__default.createElement("div", { className: "mb-2 flex items-center justify-between" }, /* @__PURE__ */ React69__default.createElement("div", { className: "text-xs font-semibold tracking-wide text-slate-500" }, element.type.toUpperCase()), /* @__PURE__ */ React69__default.createElement(
     "button",
     {