lynx-console 0.5.0 → 0.6.1

package/src/components/FloatingButton.tsx

@@ -1,5 +1,8 @@
 import type { ReactNode } from "@lynx-js/react";
-import { useLongPressDrag } from "../hooks/useLongPressDrag";
+import {
+  type InitialPosition,
+  useLongPressDrag,
+} from "../hooks/useLongPressDrag";
 import { useThemeColors } from "../styles/ThemeContext";
 import { duration } from "../styles/theme";
 import "./FloatingButton.css";
@@ -7,6 +10,7 @@ import "./FloatingButton.css";
 interface FloatingButtonProps {
   bindtap: () => void;
   children: ReactNode;
+  initialPosition?: InitialPosition;
 }
 
 const SHINE_STYLES = {
@@ -26,10 +30,16 @@ const SHINE_STYLES = {
   },
 } as const;
 
-export const FloatingButton = ({ bindtap, children }: FloatingButtonProps) => {
+export const FloatingButton = ({
+  bindtap,
+  children,
+  initialPosition,
+}: FloatingButtonProps) => {
   const colors = useThemeColors();
-  const { phase, right, bottom, clearTimer, handlers } =
-    useLongPressDrag(bindtap);
+  const { phase, positionStyle, clearTimer, handlers } = useLongPressDrag(
+    bindtap,
+    { initialPosition },
+  );
 
   const handleReload = () => {
     try {
@@ -46,10 +56,8 @@ export const FloatingButton = ({ bindtap, children }: FloatingButtonProps) => {
   return (
     <view
       className={"fb-wrapper"}
-      consume-slide-event={[[-180, 180]]}
       style={{
-        right: `${right}px`,
-        bottom: `${bottom}px`,
+        ...positionStyle,
         transform: isDragging ? "scale(1.05)" : "scale(1)",
         transition: `transform ${duration.d4} cubic-bezier(0.4, 0, 0.2, 1)`,
       }}

package/src/components/LogPanel.tsx

@@ -154,6 +154,8 @@ export const LogPanel = ({ logs, clearLogs }: LogPanelProps) => {
       ?.invoke({
         method: "scrollToPosition",
         params: { position: logsRef.current.length - 1, smooth },
+        // 연속 로그로 진행 중이던 smooth 스크롤이 중단될 때 나는 무해한 경고를 무시
+        fail: () => {},
       })
       .exec();
   };

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { useConsole } from "./useConsole";
+export { useLatestFcp } from "./useLatestFcp";
 export { useNetwork } from "./useNetwork";
 export { usePerformance } from "./usePerformance";

package/src/hooks/useLatestFcp.ts

@@ -0,0 +1,48 @@
+import { useEffect, useState } from "@lynx-js/react";
+import type { PerformanceEntryData } from "../types";
+
+interface FcpMetric {
+  name: string;
+  duration: number;
+}
+
+interface MetricFcpRawEntry {
+  totalFcp?: FcpMetric;
+  lynxFcp?: FcpMetric;
+  fcp?: FcpMetric;
+}
+
+const pickFcp = (entry: PerformanceEntryData): FcpMetric | undefined => {
+  if (entry.entryType !== "metric" || entry.name !== "fcp") return undefined;
+  const raw = entry.rawEntry as MetricFcpRawEntry | undefined;
+  if (raw?.totalFcp?.duration !== undefined) return raw.totalFcp;
+  if (raw?.lynxFcp?.duration !== undefined) return raw.lynxFcp;
+  return undefined;
+};
+
+export const useLatestFcp = (): FcpMetric | undefined => {
+  const [fcp, setFcp] = useState<FcpMetric | undefined>(() => {
+    const performances = globalThis.__LYNX_CONSOLE__?.state?.performances ?? [];
+    for (let i = performances.length - 1; i >= 0; i--) {
+      const entry = performances[i];
+      if (!entry) continue;
+      const found = pickFcp(entry);
+      if (found) return found;
+    }
+    return undefined;
+  });
+
+  useEffect(() => {
+    const state = globalThis.__LYNX_CONSOLE__?.state;
+    if (!state?.subscribePerformance) return;
+
+    const unsubscribe = state.subscribePerformance((entry) => {
+      const found = pickFcp(entry);
+      if (found) setFcp(found);
+    });
+
+    return unsubscribe;
+  }, []);
+
+  return fcp;
+};

package/src/hooks/useLongPressDrag.ts

@@ -7,19 +7,86 @@ const MOVE_THRESHOLD = 5;
 const DEFAULT_RIGHT = 16;
 const DEFAULT_BOTTOM = 84;
 
-let savedRight = DEFAULT_RIGHT;
-let savedBottom = DEFAULT_BOTTOM;
+type VerticalAxis = "top" | "bottom";
+type HorizontalAxis = "left" | "right";
+
+export interface InitialPosition {
+  top?: number;
+  left?: number;
+  right?: number;
+  bottom?: number;
+}
+
+interface ResolvedAnchors {
+  vertical: VerticalAxis;
+  horizontal: HorizontalAxis;
+  x: number;
+  y: number;
+}
+
+function resolveAnchors(initial?: InitialPosition): ResolvedAnchors {
+  // top/left이 명시되면 그것이 anchor가 돼요. 둘 다 명시되면 top/left가 이겨요.
+  const vertical: VerticalAxis = initial?.top !== undefined ? "top" : "bottom";
+  const horizontal: HorizontalAxis =
+    initial?.left !== undefined ? "left" : "right";
+
+  const y =
+    vertical === "top"
+      ? (initial?.top ?? 0)
+      : (initial?.bottom ?? DEFAULT_BOTTOM);
+  const x =
+    horizontal === "left"
+      ? (initial?.left ?? 0)
+      : (initial?.right ?? DEFAULT_RIGHT);
+
+  return { vertical, horizontal, x, y };
+}
+
+interface SavedState {
+  vertical: VerticalAxis;
+  horizontal: HorizontalAxis;
+  x: number;
+  y: number;
+}
+
+let saved: SavedState | null = null;
+
+interface UseLongPressDragOptions {
+  initialPosition?: InitialPosition;
+}
 
-export function useLongPressDrag(onTap: () => void) {
-  const [right, setRight] = useState(savedRight);
-  const [bottom, setBottom] = useState(savedBottom);
+export function useLongPressDrag(
+  onTap: () => void,
+  options?: UseLongPressDragOptions,
+) {
+  const anchors = resolveAnchors(options?.initialPosition);
+
+  // 저장된 위치는 anchor 조합이 동일할 때만 복원해요.
+  const snapshot = saved;
+  let initX = anchors.x;
+  let initY = anchors.y;
+  if (
+    snapshot !== null &&
+    snapshot.vertical === anchors.vertical &&
+    snapshot.horizontal === anchors.horizontal
+  ) {
+    initX = snapshot.x;
+    initY = snapshot.y;
+  }
+
+  const [x, setX] = useState(initX);
+  const [y, setY] = useState(initY);
   const [phase, setPhase] = useState<"idle" | "dragging" | "releasing">("idle");
-  const [tempRight, setTempRight] = useState(savedRight);
-  const [tempBottom, setTempBottom] = useState(savedBottom);
+  const [tempX, setTempX] = useState(initX);
+  const [tempY, setTempY] = useState(initY);
 
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const draggingRef = useRef(false);
-  const startRef = useRef({ x: 0, y: 0, r: 0, b: 0 });
+  const startRef = useRef({ x: 0, y: 0, ax: 0, ay: 0 });
+
+  // anchor 방향에 따라 드래그 부호 결정. right/bottom anchor면 드래그 방향과 값 변화가 반대.
+  const xSign = anchors.horizontal === "right" ? -1 : 1;
+  const ySign = anchors.vertical === "bottom" ? -1 : 1;
 
   const clearTimer = () => {
     if (timerRef.current) {
@@ -32,16 +99,16 @@ export function useLongPressDrag(onTap: () => void) {
     startRef.current = {
       x: e.detail.x,
       y: e.detail.y,
-      r: right,
-      b: bottom,
+      ax: x,
+      ay: y,
     };
     draggingRef.current = false;
 
     timerRef.current = setTimeout(() => {
       draggingRef.current = true;
       setPhase("dragging");
-      setTempRight(right);
-      setTempBottom(bottom);
+      setTempX(x);
+      setTempY(y);
     }, LONG_PRESS_DURATION);
   };
 
@@ -58,19 +125,22 @@ export function useLongPressDrag(onTap: () => void) {
 
     if (!draggingRef.current) return;
 
-    // right/bottom 기준이므로 방향 반전
-    setTempRight(startRef.current.r - dx);
-    setTempBottom(startRef.current.b - dy);
+    setTempX(startRef.current.ax + xSign * dx);
+    setTempY(startRef.current.ay + ySign * dy);
   };
 
   const handleTouchEnd = () => {
     clearTimer();
 
     if (draggingRef.current) {
-      setRight(tempRight);
-      setBottom(tempBottom);
-      savedRight = tempRight;
-      savedBottom = tempBottom;
+      setX(tempX);
+      setY(tempY);
+      saved = {
+        vertical: anchors.vertical,
+        horizontal: anchors.horizontal,
+        x: tempX,
+        y: tempY,
+      };
       setPhase("releasing");
       draggingRef.current = false;
       setTimeout(() => setPhase("idle"), 300);
@@ -80,11 +150,17 @@ export function useLongPressDrag(onTap: () => void) {
   };
 
   const isDragging = phase === "dragging";
+  const currentX = isDragging ? tempX : x;
+  const currentY = isDragging ? tempY : y;
+
+  const positionStyle = {
+    [anchors.horizontal]: `${currentX}px`,
+    [anchors.vertical]: `${currentY}px`,
+  } as { top?: string; left?: string; right?: string; bottom?: string };
 
   return {
     phase,
-    right: isDragging ? tempRight : right,
-    bottom: isDragging ? tempBottom : bottom,
+    positionStyle,
     clearTimer,
     handlers: {
       catchtouchstart: handleTouchStart,

package/src/index.tsx

@@ -10,7 +10,7 @@ import { ConsolePanel } from "./components/ConsolePanel.jsx";
 import "./components/FloatingButton.css";
 import "./styles/tokens.css";
 import { FloatingButton } from "./components/FloatingButton.jsx";
-import { usePerformance } from "./hooks/usePerformance";
+import { useLatestFcp } from "./hooks/useLatestFcp";
 import { ThemeProvider } from "./styles/ThemeContext";
 import { getColors } from "./styles/theme";
 import type { CustomTab } from "./types";
@@ -25,46 +25,29 @@ export interface LynxConsoleProps {
   theme?: "light" | "dark";
   safeAreaInsetBottom?: string;
   customTabs?: CustomTab[];
-}
-
-interface FcpMetric {
-  name: string;
-  duration: number;
-}
-
-interface MetricFcpEntry {
-  totalFcp?: FcpMetric;
-  lynxFcp?: FcpMetric;
-  fcp?: FcpMetric;
+  initialPosition?: {
+    top?: number;
+    left?: number;
+    right?: number;
+    bottom?: number;
+  };
 }
 
 const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
   (
-    { theme = "light", safeAreaInsetBottom = "50px", customTabs },
+    {
+      theme = "light",
+      safeAreaInsetBottom = "50px",
+      customTabs,
+      initialPosition,
+    },
     ref: ForwardedRef<LynxConsoleHandle>,
   ) => {
     const [isOpen, setIsOpen] = useState(false);
     const [shouldClose, setShouldClose] = useState(false);
-    const { performances } = usePerformance();
+    const latestFcp = useLatestFcp();
     const colors = useMemo(() => getColors(theme), [theme]);
 
-    const latestFcp = useMemo(() => {
-      for (let i = performances.length - 1; i >= 0; i--) {
-        const perf = performances[i];
-        if (perf && perf.entryType === "metric" && perf.name === "fcp") {
-          const metricEntry = perf.rawEntry as MetricFcpEntry | undefined;
-          // totalFcp를 먼저 시도하고, 없으면 lynxFcp 반환
-          if (metricEntry?.totalFcp?.duration !== undefined) {
-            return metricEntry.totalFcp;
-          }
-          if (metricEntry?.lynxFcp?.duration !== undefined) {
-            return metricEntry.lynxFcp;
-          }
-        }
-      }
-      return undefined;
-    }, [performances]);
-
     useImperativeHandle(ref, () => ({
       open: () => {
         setIsOpen(true);
@@ -94,7 +77,10 @@ const LynxConsole = forwardRef<LynxConsoleHandle, LynxConsoleProps>(
             color: colors.fg.neutral,
           }}
         >
-          <FloatingButton bindtap={handleOpenBottomSheet}>
+          <FloatingButton
+            bindtap={handleOpenBottomSheet}
+            initialPosition={initialPosition}
+          >
             <text
               className="fb-title t4"
               style={{ fontWeight: "400", color: colors.palette.staticWhite }}