@arronqzy/react-view 1.0.22 → 1.0.23

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

@@ -0,0 +1,169 @@
+import { useI18n } from "@arronqzy/i18n/react";
+import { Input } from "@arronqzy/ui";
+import type { PanelElement } from "../../types";
+import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
+
+export function PanelConfigNodeInfo({
+  element,
+  helpers,
+  updateElement,
+  nodeZOrderLabel,
+  onAdjustNodeZOrder,
+}: {
+  element: PanelElement;
+  helpers: ConfigSectionHelpers;
+  updateElement: UpdateElement;
+  nodeZOrderLabel?: string;
+  onAdjustNodeZOrder?: (
+    nodeId: string,
+    action: "bringForward" | "sendBackward" | "bringToFront" | "sendToBack"
+  ) => void;
+}) {
+  const { t } = useI18n();
+  const { renderSection, renderFieldGroup } = helpers;
+  const selectedElement = element;
+  return (
+    <>
+              {renderSection(
+            "nodeInfo",
+            t("panel.config.sectionNodeInfo"),
+            <>
+              <label className="block space-y-1" data-config-field="name">
+                <div>{t("panel.config.nodeName")}</div>
+                <Input
+                  value={selectedElement.name ?? ""}
+                  onChange={(e) =>
+                    updateElement(selectedElement.id, {
+                      name: e.target.value || undefined,
+                    })
+                  }
+                  placeholder={t("panel.config.nodeNamePlaceholder")}
+                  className="h-7"
+                />
+              </label>
+              <div className="grid grid-cols-2 gap-2">
+                <label className="block space-y-1" data-config-field="x">
+                  <div>X</div>
+                  <Input
+                    type="number"
+                    value={selectedElement.x}
+                    onChange={(e) =>
+                      updateElement(selectedElement.id, {
+                        x: Number(e.target.value) || 0,
+                      })
+                    }
+                    className="h-7"
+                  />
+                </label>
+                <label className="block space-y-1" data-config-field="y">
+                  <div>Y</div>
+                  <Input
+                    type="number"
+                    value={selectedElement.y}
+                    onChange={(e) =>
+                      updateElement(selectedElement.id, {
+                        y: Number(e.target.value) || 0,
+                      })
+                    }
+                    className="h-7"
+                  />
+                </label>
+              </div>
+              <div className="grid grid-cols-2 gap-2">
+                <label className="block space-y-1" data-config-field="width">
+                  <div>{t("panel.config.width")}</div>
+                  <Input
+                    type="number"
+                    min={1}
+                    value={selectedElement?.width ?? 1}
+                    onChange={(e) => {
+                      if (!selectedElement) return;
+                      updateElement(selectedElement.id, {
+                        width: Math.max(1, Number(e.target.value) || 1),
+                      });
+                    }}
+                    className="h-7"
+                  />
+                </label>
+                <label className="block space-y-1" data-config-field="height">
+                  <div>{t("panel.config.height")}</div>
+                  <Input
+                    type="number"
+                    min={1}
+                    value={selectedElement.height}
+                    onChange={(e) =>
+                      updateElement(selectedElement.id, {
+                        height: Math.max(1, Number(e.target.value) || 1),
+                      })
+                    }
+                    className="h-7"
+                  />
+                </label>
+              </div>
+              {renderFieldGroup(
+                t("panel.config.groupNodeMore"),
+                <>
+              <div className="grid grid-cols-2 gap-2">
+                <label className="block space-y-1" data-config-field="rotate">
+                  <div>{t("panel.config.rotate")}</div>
+                  <Input
+                    type="number"
+                    value={selectedElement.rotate ?? 0}
+                    onChange={(e) =>
+                      updateElement(selectedElement.id, {
+                        rotate: Number(e.target.value) || 0,
+                      })
+                    }
+                    className="h-7"
+                  />
+                </label>
+              </div>
+              <div className="space-y-1.5">
+                <div className="text-[11px] text-muted-foreground">{t("panel.config.nodeZOrder")}</div>
+                <div className="text-[11px] text-muted-foreground/90">
+                  {t("panel.config.currentZIndex", { value: nodeZOrderLabel ?? "-" })}
+                </div>
+                <div className="grid grid-cols-2 gap-2">
+                  <button
+                    type="button"
+                    className="rounded border border-border bg-background px-2 py-1 text-[11px] hover:bg-accent"
+                    onClick={() => onAdjustNodeZOrder?.(selectedElement.id, "bringForward")}
+                  >
+                    {t("panel.menubar.bringForward")}
+                  </button>
+                  <button
+                    type="button"
+                    className="rounded border border-border bg-background px-2 py-1 text-[11px] hover:bg-accent"
+                    onClick={() => onAdjustNodeZOrder?.(selectedElement.id, "sendBackward")}
+                  >
+                    {t("panel.menubar.sendBackward")}
+                  </button>
+                  <button
+                    type="button"
+                    className="rounded border border-border bg-background px-2 py-1 text-[11px] hover:bg-accent"
+                    onClick={() => onAdjustNodeZOrder?.(selectedElement.id, "bringToFront")}
+                  >
+                    {t("panel.menubar.bringToFront")}
+                  </button>
+                  <button
+                    type="button"
+                    className="rounded border border-border bg-background px-2 py-1 text-[11px] hover:bg-accent"
+                    onClick={() => onAdjustNodeZOrder?.(selectedElement.id, "sendToBack")}
+                  >
+                    {t("panel.menubar.sendToBack")}
+                  </button>
+                </div>
+              </div>
+              <div className="truncate text-muted-foreground">ID: {selectedElement.id}</div>
+              <div className="text-muted-foreground">{t("panel.config.type")}: {selectedElement.materialType ?? selectedElement.id}</div>
+                </>,
+                undefined,
+                { groupKey: "nodeMore", defaultOpen: false }
+              )}
+            </>,
+            true,
+            [t("panel.config.name"), "id", t("panel.config.type"), t("panel.config.rotate"), t("panel.config.nodeZOrder"), t("panel.layers.lockShort"), "locked", "name"]
+          )}
+    </>
+  );
+}

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

@@ -0,0 +1,99 @@
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import type { PanelElement, PanelLayer, ReferenceCopyMode } from "../../types";
+import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
+
+export function PanelConfigReferenceSection({
+  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(
+              "reference",
+              t("panel.config.sectionReference"),
+              <>
+                {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: "referenceCopyStrategy", defaultOpen: false }
+                )}
+              </>,
+              true,
+              [t("panel.config.searchKwRef"), "ref", t("panel.config.layer"), t("panel.material.shallowCopy"), t("panel.material.deepCopy"), "snapshot"]
+            )
+      }
+    </>
+  );
+}

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

@@ -1,4 +1,9 @@
-import React, { useCallback, useMemo, useRef, useState } from "react";
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useI18n } from "@arronqzy/i18n/react";
 import {
   Button,
@@ -31,7 +36,6 @@ import type { PanelElement } from "../../types";
 import { readFileAsDataUrl } from "../../utils/async-work";
 import { randomId } from "../../utils/panelElementDefaults";
 import { ConfigHintIcon } from "../ConfigHintIcon";
-
 type UpdateElement = (
   id: string,
   patch: Partial<PanelElement>,

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

@@ -0,0 +1,249 @@
+import React, { useCallback, useState } from "react";
+import { useI18n } from "@arronqzy/i18n/react";
+import {
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@arronqzy/ui";
+import type { PanelElement, PanelElementStyle } from "../../types";
+import { readFileAsDataUrl, runBusyTask } from "../../utils/async-work";
+import { getPanelMessages } from "../../constants/messages";
+import { type ConfigSectionHelpers, type UpdateElement } from "./helpers";
+
+export function PanelConfigStyleSections({
+  element,
+  helpers,
+  updateElement,
+}: {
+  element: PanelElement;
+  helpers: ConfigSectionHelpers;
+  updateElement: UpdateElement;
+}) {
+  const { t } = useI18n();
+  const messages = React.useMemo(() => getPanelMessages(t), [t]);
+  const { renderSection, renderFieldGroup, renderColorField } = helpers;
+  const selectedElement = element;
+  const [uploadStatus, setUploadStatus] = useState("");
+
+  const updateSelectedStyle = useCallback(
+    (patch: Partial<PanelElementStyle>) => {
+      updateElement(selectedElement.id, {
+        style: { ...(selectedElement.style ?? {}), ...patch },
+      });
+    },
+    [selectedElement, updateElement]
+  );
+
+  const handleUploadBackgroundImage = useCallback(
+    async (file: File) => {
+      try {
+        await runBusyTask(t("common.uploadingFile"), async () => {
+          const base64 = await readFileAsDataUrl(file, messages.readImageFailed, "image");
+          updateSelectedStyle({
+            backgroundImage: `url("${base64}")`,
+          });
+          setUploadStatus(t("panel.config.uploadWrittenBase64"));
+          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) {
+              updateSelectedStyle({ backgroundImageRemoteUrl: data.url });
+              setUploadStatus(t("panel.config.uploadServerAndBase64"));
+            }
+          } catch {
+            setUploadStatus(t("panel.config.uploadServerFailedKeepBase64"));
+          }
+        });
+      } catch (error) {
+        setUploadStatus(
+          error instanceof Error ? error.message : messages.readImageFailed
+        );
+      }
+    },
+    [messages.readImageFailed, t, updateSelectedStyle]
+  );
+
+  return (
+    <>
+          {renderSection(
+            "styleBackground",
+            t("panel.config.sectionStyleBackground"),
+            <>
+              {renderFieldGroup(
+                t("panel.config.groupBgFill"),
+                <>
+                  {renderColorField(
+                    t("panel.config.backgroundColor"),
+                    selectedElement.style?.backgroundColor ?? "",
+                    (next) => updateSelectedStyle({ backgroundColor: next || undefined })
+                  )}
+                </>
+              )}
+              {renderFieldGroup(
+                t("panel.config.groupBgLayout"),
+                <>
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.backgroundImage")}</div>
+                    <Input
+                      value={selectedElement.style?.backgroundImage ?? ""}
+                      onChange={(e) => updateSelectedStyle({ backgroundImage: e.target.value || undefined })}
+                      placeholder='url("https://...") / linear-gradient(...)'
+                      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.uploadImage")}
+                      <Input
+                        type="file"
+                        accept="image/*"
+                        className="hidden"
+                        onChange={async (e) => {
+                          const file = e.target.files?.[0];
+                          e.currentTarget.value = "";
+                          if (!file) return;
+                          await handleUploadBackgroundImage(file);
+                        }}
+                      />
+                    </label>
+                    {uploadStatus ? (
+                      <span className="text-[11px] text-muted-foreground">{uploadStatus}</span>
+                    ) : null}
+                  </div>
+                  <div className="grid grid-cols-2 gap-2">
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.backgroundSize")}</div>
+                    <Select
+                      value={selectedElement.style?.backgroundSize ?? "__none__"}
+                      onValueChange={(value) =>
+                        updateSelectedStyle({
+                          backgroundSize: value === "__none__" ? undefined : value,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.selectBackgroundSize")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">{t("common.default")}</SelectItem>
+                        <SelectItem value="cover">cover</SelectItem>
+                        <SelectItem value="contain">contain</SelectItem>
+                        <SelectItem value="100% 100%">100% 100%</SelectItem>
+                        <SelectItem value="auto">auto</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.backgroundPosition")}</div>
+                    <Select
+                      value={selectedElement.style?.backgroundPosition ?? "__none__"}
+                      onValueChange={(value) =>
+                        updateSelectedStyle({
+                          backgroundPosition: value === "__none__" ? undefined : value,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.selectBackgroundPosition")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="__none__">{t("common.default")}</SelectItem>
+                        <SelectItem value="center">center</SelectItem>
+                        <SelectItem value="top">top</SelectItem>
+                        <SelectItem value="bottom">bottom</SelectItem>
+                        <SelectItem value="left">left</SelectItem>
+                        <SelectItem value="right">right</SelectItem>
+                        <SelectItem value="top left">top left</SelectItem>
+                        <SelectItem value="top right">top right</SelectItem>
+                        <SelectItem value="bottom left">bottom left</SelectItem>
+                        <SelectItem value="bottom right">bottom right</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                </div>
+                </>,
+                undefined,
+                { groupKey: "styleBgLayout", defaultOpen: false }
+              )}
+            </>,
+            false,
+            [t("panel.config.backgroundColor"), t("panel.config.backgroundImage"), "background", "backgroundSize", "backgroundPosition", t("panel.config.searchKwLayout")]
+          )}
+          {renderSection(
+            "styleBorder",
+            t("panel.config.sectionStyleBorder"),
+            <>
+              {renderFieldGroup(
+                t("panel.config.groupBorderGeometry"),
+                <div className="grid grid-cols-2 gap-2">
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.borderWidth")}</div>
+                    <Input
+                      type="number"
+                      min={0}
+                      value={selectedElement.style?.borderWidth ?? 0}
+                      onChange={(e) =>
+                        updateSelectedStyle({ borderWidth: Math.max(0, Number(e.target.value) || 0) })
+                      }
+                      className="h-7"
+                    />
+                  </label>
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.borderRadius")}</div>
+                    <Input
+                      type="number"
+                      min={0}
+                      value={selectedElement.style?.borderRadius ?? 0}
+                      onChange={(e) =>
+                        updateSelectedStyle({ borderRadius: Math.max(0, Number(e.target.value) || 0) })
+                      }
+                      className="h-7"
+                    />
+                  </label>
+                </div>
+              )}
+              {renderFieldGroup(
+                t("panel.config.groupBorderVisual"),
+                <div className="grid grid-cols-2 gap-2">
+                  <label className="block space-y-1">
+                    <div>{t("panel.config.borderStyle")}</div>
+                    <Select
+                      value={selectedElement.style?.borderStyle ?? "solid"}
+                      onValueChange={(value) =>
+                        updateSelectedStyle({
+                          borderStyle: value as NonNullable<PanelElementStyle["borderStyle"]>,
+                        })
+                      }
+                    >
+                      <SelectTrigger className="h-7">
+                        <SelectValue placeholder={t("panel.config.selectBorderStyle")} />
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value="none">none</SelectItem>
+                        <SelectItem value="solid">solid</SelectItem>
+                        <SelectItem value="dashed">dashed</SelectItem>
+                        <SelectItem value="dotted">dotted</SelectItem>
+                        <SelectItem value="double">double</SelectItem>
+                      </SelectContent>
+                    </Select>
+                  </label>
+                  {renderColorField(
+                    t("panel.config.borderColor"),
+                    selectedElement.style?.borderColor ?? "",
+                    (next) => updateSelectedStyle({ borderColor: next || undefined })
+                  )}
+                </div>
+              )}
+            </>,
+            false,
+            [t("panel.config.searchKwBorder"), "border", t("panel.config.searchKwWidth"), t("panel.config.searchKwRadius"), t("panel.config.color"), t("panel.config.searchKwStyle")]
+          )}
+    </>
+  );
+}