@arronqzy/react-view 1.0.22 → 1.0.24

package/src/panel/components/config/PanelConfigTextSection.tsx

@@ -0,0 +1,268 @@
+import { useCallback, useEffect, useRef } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Checkbox,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import type { PanelElement } from "../../types";
+import { cssTextLineHeight, cssTextAlignStyle } from "../../utils/panelElementDefaults";
+import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
+
+export function PanelConfigTextSection({
+  element,
+  helpers,
+  updateElement,
+}: {
+  element: PanelElement;
+  helpers: ConfigSectionHelpers;
+  updateElement: UpdateElement;
+}) {
+  const { t } = useI18n();
+  const { renderSection, renderFieldGroup, renderColorField } = helpers;
+  const selectedElement = element;
+  const textEditorRef = useRef<HTMLDivElement | null>(null);
+
+  const updateSelectedText = useCallback(
+    (patch: Partial<PanelElement>) => {
+      if (selectedElement.materialType !== "text") return;
+      updateElement(selectedElement.id, patch);
+    },
+    [selectedElement, updateElement]
+  );
+
+  useEffect(() => {
+    if (selectedElement.materialType !== "text") return;
+    const nextHtml =
+      selectedElement.textHtml ?? `<p>${t("panel.defaults.doubleClickTextHtml")}</p>`;
+    if (textEditorRef.current && textEditorRef.current.innerHTML !== nextHtml) {
+      textEditorRef.current.innerHTML = nextHtml;
+    }
+  }, [selectedElement.id, selectedElement.materialType, selectedElement.textHtml]);
+
+  const execTextCommand = (cmd: "bold" | "italic" | "underline") => {
+    textEditorRef.current?.focus();
+    document.execCommand(cmd);
+    const next = textEditorRef.current?.innerHTML ?? "";
+    if (selectedElement.materialType === "text") {
+      updateElement(selectedElement.id, { textHtml: next || "<p><br/></p>" });
+    }
+  };
+
+  return (
+    <>
+      {
+            renderSection(
+              "textConfig",
+              t("panel.config.sectionText"),
+              <>
+                {renderFieldGroup(
+                  t("panel.config.groupTextContent"),
+                  <>
+                    <div className="flex items-center gap-1">
+                      <button
+                        type="button"
+                        className="rounded border border-border px-2 py-1 text-[11px] hover:bg-accent"
+                        onClick={() => execTextCommand("bold")}
+                      >
+                        B
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded border border-border px-2 py-1 text-[11px] italic hover:bg-accent"
+                        onClick={() => execTextCommand("italic")}
+                      >
+                        I
+                      </button>
+                      <button
+                        type="button"
+                        className="rounded border border-border px-2 py-1 text-[11px] underline hover:bg-accent"
+                        onClick={() => execTextCommand("underline")}
+                      >
+                        U
+                      </button>
+                    </div>
+                    <div
+                      ref={textEditorRef}
+                      data-config-field="textHtml"
+                      data-panel-user-text=""
+                      className="min-h-[120px] rounded border border-border bg-background px-2 py-1.5 leading-6 outline-none"
+                      style={{
+                        fontFamily: selectedElement.textFontFamily || undefined,
+                        fontSize: selectedElement.textFontSize
+                          ? `${selectedElement.textFontSize}px`
+                          : undefined,
+                        fontWeight: selectedElement.textFontWeight || undefined,
+                        color: selectedElement.textColor || undefined,
+                        lineHeight: cssTextLineHeight(selectedElement.textLineHeight),
+                        ...cssTextAlignStyle(selectedElement.textAlign),
+                      }}
+                      contentEditable
+                      suppressContentEditableWarning
+                      onInput={(e) => {
+                        const nextHtml = (e.currentTarget as HTMLDivElement).innerHTML;
+                        updateSelectedText({
+                          textHtml: nextHtml || "<p><br/></p>",
+                        });
+                      }}
+                    />
+                  </>
+                )}
+                {renderFieldGroup(
+                  t("panel.config.groupTextStyle"),
+                  <>
+                    <label className="block space-y-1">
+                      <div>{t("panel.config.fontFamily")}</div>
+                      <Input
+                        value={selectedElement.textFontFamily ?? ""}
+                        onChange={(e) =>
+                          updateSelectedText({
+                            textFontFamily: e.target.value || undefined,
+                          })
+                        }
+                        placeholder={t("panel.config.fontFamilyPlaceholder")}
+                        className="h-7"
+                      />
+                    </label>
+                    <div className="grid grid-cols-2 gap-2">
+                      <label className="block space-y-1">
+                        <div>{t("panel.config.fontSizePx")}</div>
+                        <Input
+                          type="number"
+                          min={8}
+                          max={200}
+                          step={1}
+                          value={selectedElement.textFontSize ?? 14}
+                          onChange={(e) =>
+                            updateSelectedText({
+                              textFontSize: Math.max(8, Number(e.target.value) || 14),
+                            })
+                          }
+                          className="h-7"
+                        />
+                      </label>
+                      <label className="block space-y-1">
+                        <div>{t("panel.config.fontWeight")}</div>
+                        <Select
+                          value={selectedElement.textFontWeight ?? "400"}
+                          onValueChange={(value) =>
+                            updateSelectedText({
+                              textFontWeight: value,
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7">
+                            <SelectValue placeholder={t("panel.config.selectFontWeight")} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="300">300</SelectItem>
+                            <SelectItem value="400">400</SelectItem>
+                            <SelectItem value="500">500</SelectItem>
+                            <SelectItem value="600">600</SelectItem>
+                            <SelectItem value="700">700</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </label>
+                    </div>
+                    <div className="grid grid-cols-2 gap-2">
+                      <label className="block space-y-1">
+                        <div>{t("panel.config.textAlign")}</div>
+                        <Select
+                          value={selectedElement.textAlign ?? "left"}
+                          onValueChange={(value) =>
+                            updateSelectedText({
+                              textAlign: value as PanelElement["textAlign"],
+                            })
+                          }
+                        >
+                          <SelectTrigger className="h-7">
+                            <SelectValue placeholder={t("panel.config.selectTextAlign")} />
+                          </SelectTrigger>
+                          <SelectContent>
+                            <SelectItem value="left">{t("panel.config.alignLeft")}</SelectItem>
+                            <SelectItem value="center">{t("panel.config.alignCenter")}</SelectItem>
+                            <SelectItem value="middle">{t("panel.config.alignMiddle")}</SelectItem>
+                            <SelectItem value="right">{t("panel.config.alignRight")}</SelectItem>
+                            <SelectItem value="justify">{t("panel.config.alignJustify")}</SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </label>
+                      <label className="block space-y-1">
+                        <div className="flex items-center justify-between gap-2">
+                          <span>{t("panel.config.lineHeight")}</span>
+                          <label className="flex items-center gap-1 font-normal">
+                            <Checkbox
+                              checked={selectedElement.textLineHeight === "auto"}
+                              className="h-3.5 w-3.5 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                              onCheckedChange={(checked) =>
+                                updateSelectedText({
+                                  textLineHeight: checked === true ? "auto" : 1.6,
+                                })
+                              }
+                            />
+                            <span>{t("panel.config.lineHeightAuto")}</span>
+                          </label>
+                        </div>
+                        <Input
+                          type="number"
+                          min={1}
+                          max={3}
+                          step={0.1}
+                          disabled={selectedElement.textLineHeight === "auto"}
+                          placeholder={t("panel.config.lineHeightAuto")}
+                          value={
+                            selectedElement.textLineHeight === "auto"
+                              ? ""
+                              : (selectedElement.textLineHeight ?? 1.6)
+                          }
+                          onChange={(e) =>
+                            updateSelectedText({
+                              textLineHeight: Math.min(
+                                3,
+                                Math.max(1, Number(e.target.value) || 1.6)
+                              ),
+                            })
+                          }
+                          className="h-7"
+                        />
+                      </label>
+                    </div>
+                    {renderColorField(
+                      t("panel.config.textColor"),
+                      selectedElement.textColor ?? "",
+                      (next) =>
+                        updateSelectedText({
+                          textColor: next || undefined,
+                        })
+                    )}
+                  </>
+                )}
+                {renderFieldGroup(
+                  t("panel.config.groupInputAbility"),
+                  <label className="flex items-center gap-2">
+                    <Checkbox
+                      checked={selectedElement.textAllowInput ?? true}
+                      className="h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                      onCheckedChange={(checked) =>
+                        updateSelectedText({
+                          textAllowInput: checked !== false,
+                        })
+                      }
+                    />
+                    <span>{t("panel.config.allowCanvasInput")}</span>
+                  </label>,
+                  undefined,
+                  { groupKey: "textInputAbility", defaultOpen: false }
+                )}
+              </>,
+              true,
+              [t("panel.material.text"), t("panel.config.searchKwRichText"), t("panel.config.fontFamily"), t("panel.config.color"), t("panel.config.textAlign"), t("panel.config.lineHeight"), t("panel.config.searchKwInput")]
+            )
+      }
+    </>
+  );
+}

package/src/panel/components/config/PanelConfigVideoSection.tsx

@@ -0,0 +1,133 @@
+import React, { useCallback, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import { Checkbox, Input } from "@arronqzy/ui";
+import type { PanelElement } from "../../types";
+import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
+import { getPanelMessages } from "../../constants/messages";
+import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
+
+export function PanelConfigVideoSection({
+  element,
+  helpers,
+  updateElement,
+}: {
+  element: PanelElement;
+  helpers: ConfigSectionHelpers;
+  updateElement: UpdateElement;
+}) {
+  const { t } = useI18n();
+  const messages = React.useMemo(() => getPanelMessages(t), [t]);
+  const { renderSection, renderFieldGroup } = helpers;
+  const selectedElement = element;
+  const [videoStatus, setVideoStatus] = useState("");
+
+  const updateSelectedVideo = useCallback(
+    (patch: Partial<PanelElement>) => {
+      if (selectedElement.materialType !== "video") return;
+      updateElement(selectedElement.id, patch);
+    },
+    [selectedElement, updateElement]
+  );
+  const handleUploadVideoFile = useCallback(
+    async (file: File) => {
+      if (selectedElement.materialType !== "video") return;
+      try {
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readVideoFailed, "video");
+          updateSelectedVideo({ videoSrc: base64 });
+          setVideoStatus(messages.videoLocalSaved);
+          try {
+            const form = new FormData();
+            form.append("file", file);
+            const resp = await fetch("/api/upload", { method: "POST", body: form });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
+            const data = (await resp.json()) as { url?: string };
+            if (data.url) {
+              updateSelectedVideo({ videoRemoteUrl: data.url });
+              setVideoStatus(messages.videoRemoteUploaded);
+            }
+          } catch {
+            setVideoStatus(messages.videoServerUploadFailed);
+          }
+        });
+      } catch (error) {
+        setVideoStatus(
+          error instanceof Error ? error.message : messages.readVideoFailed
+        );
+      }
+    },
+    [messages, selectedElement, t, updateSelectedVideo]
+  );
+
+  return (
+    <>
+      {
+            renderSection(
+              "videoConfig",
+              t("panel.config.sectionVideo"),
+              <>
+                {renderFieldGroup(
+                  t("panel.config.groupVideoSource"),
+                  <>
+                    <label className="block space-y-1">
+                      <div>{t("panel.config.videoUrl")}</div>
+                      <Input
+                        value={selectedElement.videoRemoteUrl ?? ""}
+                        onChange={(e) =>
+                          updateSelectedVideo({
+                            videoRemoteUrl: e.target.value || undefined,
+                            videoSrc: e.target.value || selectedElement.videoSrc,
+                          })
+                        }
+                        placeholder="https://example.com/video.mp4"
+                        className="h-7"
+                      />
+                    </label>
+                    <div className="flex items-center gap-2">
+                      <label className="inline-flex cursor-pointer items-center rounded border border-border px-2 py-1 text-[11px] hover:bg-accent">
+                        {t("panel.config.uploadVideo")}
+                        <Input
+                          type="file"
+                          accept="video/*"
+                          className="hidden"
+                          onChange={async (e) => {
+                            const file = e.target.files?.[0];
+                            e.currentTarget.value = "";
+                            if (!file) return;
+                            await handleUploadVideoFile(file);
+                          }}
+                        />
+                      </label>
+                    </div>
+                    {videoStatus ? (
+                      <div className="rounded border border-border/60 bg-background px-2 py-1.5 text-[11px] text-muted-foreground">
+                        {videoStatus}
+                      </div>
+                    ) : null}
+                    <video
+                      controls
+                      className="h-36 w-full rounded border border-border/60 bg-black/80 object-contain"
+                      src={selectedElement.videoSrc || selectedElement.videoRemoteUrl || ""}
+                    />
+                    <label className="flex items-center gap-2">
+                      <Checkbox
+                        checked={selectedElement.mediaAutoPauseOnEdit !== false}
+                        className="h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40"
+                        onCheckedChange={(checked) =>
+                          updateSelectedVideo({
+                            mediaAutoPauseOnEdit: checked !== false,
+                          })
+                        }
+                      />
+                      <span>{t("panel.config.autoPauseMedia")}</span>
+                    </label>
+                  </>
+                )}
+              </>,
+              true,
+              [t("panel.material.video"), "url", t("panel.config.searchKwUpload"), t("panel.config.searchKwPreview"), t("panel.config.searchKwAutoPause"), "media"]
+            )
+      }
+    </>
+  );
+}

package/src/panel/components/config/PanelConfigViewportSection.tsx

@@ -0,0 +1,139 @@
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../../types";
+import { VIEWPORT_OVERFLOW_MODES, normalizeViewportOverflow, type ViewportOverflowMode } from "../../utils/viewportPlacement";
+import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
+
+export function PanelConfigViewportSection({
+  element,
+  helpers,
+  updateElement,
+  layers,
+  setReferenceCopyMode,
+}: {
+  element: PanelElement;
+  helpers: ConfigSectionHelpers;
+  updateElement: UpdateElement;
+  layers: PanelLayer[];
+  setReferenceCopyMode?: (id: string, mode: ReferenceCopyMode) => void;
+}) {
+  const { t } = useI18n();
+  const { renderSection, renderFieldGroup } = helpers;
+  const selectedElement = element;
+  return (
+    <>
+      {
+            renderSection(
+              "viewportConfig",
+              t("panel.config.sectionViewport"),
+              <>
+                {renderFieldGroup(
+                  t("panel.config.groupRefSource"),
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.refLayer")}</div>
+                    <Select
+                      value={selectedElement.refLayerId ?? "__none__"}
+                      onValueChange={(value) =>
+                        updateElement(selectedElement.id, {
+                          refLayerId: value === "__none__" ? undefined : value,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.pleaseSelectLayer")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">{t("panel.config.noneNoRef")}</SelectItem>
+                        {layers
+                          .filter((l) => l.id !== selectedElement.layerId)
+                          .map((l) => (
+                            <SelectItem key={l.id} value={l.id}>
+                              {l.name}
+                            </SelectItem>
+                          ))}
+                      </SelectContent>
+                    </Select>
+                  </label>
+                )}
+                {renderFieldGroup(
+                  t("panel.config.groupCopyStrategy"),
+                  <>
+                    <label className="block space-y-1">
+                      <div>{t("panel.config.copyMode")}</div>
+                      <Select
+                        value={selectedElement.refCopyMode ?? "shallow"}
+                        onValueChange={(value) =>
+                          setReferenceCopyMode?.(
+                            selectedElement.id,
+                            value as ReferenceCopyMode
+                          )
+                        }
+                      >
+                        <SelectTrigger className="h-7">
+                          <SelectValue placeholder={t("panel.config.selectCopyMode")} />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="shallow">{t("panel.config.shallowFollow")}</SelectItem>
+                          <SelectItem value="deep">{t("panel.config.deepFreeze")}</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </label>
+                  </>,
+                  <>{t("panel.config.copyStrategyHint")}</>,
+                  { groupKey: "viewportCopyStrategy", defaultOpen: false }
+                )}
+                {renderFieldGroup(
+                  t("panel.config.groupViewportOverflow"),
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.viewportOverflow")}</div>
+                    <Select
+                      value={normalizeViewportOverflow(selectedElement.viewportOverflow)}
+                      onValueChange={(value) =>
+                        updateElement(selectedElement.id, {
+                          viewportOverflow: value as ViewportOverflowMode,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.viewportOverflow")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {VIEWPORT_OVERFLOW_MODES.map((mode) => (
+                          <SelectItem key={mode} value={mode}>
+                            {mode === "scroll-x"
+                              ? t("panel.config.viewportOverflowScrollX")
+                              : mode === "scroll-y"
+                                ? t("panel.config.viewportOverflowScrollY")
+                                : mode === "scroll"
+                                  ? t("panel.config.viewportOverflowScroll")
+                                  : t("panel.config.viewportOverflowClip")}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  </label>
+                )}
+              </>,
+              true,
+              [
+                t("panel.config.searchKwViewport"),
+                "viewport",
+                t("panel.config.refLayer"),
+                t("panel.config.viewportOverflow"),
+                t("panel.config.viewportOverflowScrollX"),
+                t("panel.config.viewportOverflowClip"),
+                t("panel.material.shallowCopy"),
+                t("panel.material.deepCopy"),
+              ],
+              <>{t("panel.config.viewportHint")}</>
+            )
+      }
+    </>
+  );
+}

package/src/panel/components/config/helpers.ts

@@ -0,0 +1,85 @@
+import type React from "react";
+import type { PanelChartConfig, PanelElement } from "../../types";
+
+export type UpdateElement = (
+  id: string,
+  patch: Partial<PanelElement>,
+  options?: { batchId?: string; meta?: Record<string, unknown> }
+) => void;
+
+export type RenderSection = (
+  key: string,
+  title: string,
+  children: React.ReactNode,
+  defaultOpen?: boolean,
+  searchTerms?: string[],
+  hint?: React.ReactNode
+) => React.ReactNode;
+
+export type RenderFieldGroup = (
+  title: string,
+  children: React.ReactNode,
+  hint?: React.ReactNode,
+  options?: { groupKey?: string; defaultOpen?: boolean }
+) => React.ReactNode;
+
+export type RenderColorField = (
+  label: string,
+  value: string,
+  onTextChange: (next: string) => void
+) => React.ReactNode;
+
+export type ConfigSectionHelpers = {
+  renderSection: RenderSection;
+  renderFieldGroup: RenderFieldGroup;
+  renderColorField: RenderColorField;
+  hasSearch: boolean;
+  normalizedSearch: string;
+  isSectionExpanded: (key: string, defaultValue?: boolean) => boolean;
+  setSectionExpanded: (key: string, next: boolean) => void;
+  optionCheckboxClass: string;
+  optionInputClass: string;
+  optionSelectTriggerClass: string;
+  renderOptionLabel: (label: string, keyPath: string, desc: string) => React.ReactNode;
+  renderFormatterLabel: (label?: string) => React.ReactNode;
+};
+
+export const OPTION_CHECKBOX_CLASS =
+  "h-4 w-4 border-2 border-foreground/80 bg-background ring-1 ring-foreground/40 data-[state=checked]:border-primary data-[state=checked]:ring-primary/40";
+export const OPTION_INPUT_CLASS =
+  "h-7 border border-border/60 bg-background/90 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:border-border/60";
+export const OPTION_SELECT_TRIGGER_CLASS =
+  "h-7 border border-border/60 bg-muted/40 shadow-none ring-0 focus:ring-0 focus:ring-offset-0 focus:border-border/60 data-[state=open]:border-border/60";
+
+export function mergeOptionPatch(
+  base: Record<string, unknown> | undefined,
+  patch: Record<string, unknown>
+): Record<string, unknown> {
+  const output: Record<string, unknown> = { ...(base ?? {}) };
+  for (const [key, value] of Object.entries(patch)) {
+    const prev = output[key];
+    if (
+      value &&
+      typeof value === "object" &&
+      !Array.isArray(value) &&
+      prev &&
+      typeof prev === "object" &&
+      !Array.isArray(prev)
+    ) {
+      output[key] = mergeOptionPatch(
+        prev as Record<string, unknown>,
+        value as Record<string, unknown>
+      );
+    } else {
+      output[key] = value;
+    }
+  }
+  return output;
+}
+
+export function patchChart(
+  chart: PanelChartConfig | undefined,
+  patch: Partial<PanelChartConfig>
+): PanelChartConfig {
+  return { ...(chart ?? {}), ...patch };
+}