@pisell/materials 1.8.20 → 1.8.22

package/lib/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -44,7 +44,12 @@ var import_locales = __toESM(require("./locales"));
 var import_PisellTimeNavigator = require("./PisellTimeNavigator.less");
 var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var CELL_SIZE_H = 82;
+var CURRENT_TIME_GRADIENT_WIDTH_H_PX = Math.round(CELL_SIZE_H * 1.7);
 var CELL_SIZE_V = 20;
+var CURSOR_MOVES_NOW_RESERVE_PX = 56;
+var CURSOR_MOVES_H_PADDING_PX = 8;
+var CURSOR_MOVES_MIN_CELL_PX = 8;
+var DENSITY_LAYER_HEIGHT = 46;
 function PisellTimeNavigator(props) {
   var _a, _b;
   const {
@@ -73,7 +78,10 @@ function PisellTimeNavigator(props) {
     style,
     locale,
     timeFormat = "HH:mm",
-    renderNowButton
+    renderNowButton,
+    onUserInteraction,
+    densitySeries: densitySeriesProp,
+    loadDensity: loadDensityProp
   } = props;
   const context = (0, import_useEngineContext.default)();
   import_utils2.locales.init(
@@ -87,7 +95,77 @@ function PisellTimeNavigator(props) {
   }, [referenceDateProp]);
   const referenceDate = referenceDateFromProp ?? (0, import_dayjs.default)().startOf("day");
   const isHorizontal = orientation === "horizontal";
-  const cellSizePx = isHorizontal ? CELL_SIZE_H : CELL_SIZE_V;
+  const referenceDayKey = referenceDateFromProp != null ? referenceDateFromProp.format("YYYY-MM-DD") : (0, import_dayjs.default)().format("YYYY-MM-DD");
+  const [densityLoaded, setDensityLoaded] = (0, import_react.useState)();
+  const densityReqId = (0, import_react.useRef)(0);
+  const densityGradientId = (0, import_react.useMemo)(
+    () => `pisell-time-density-fill-${Math.random().toString(36).slice(2, 8)}`,
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    if (densitySeriesProp !== void 0) {
+      setDensityLoaded(void 0);
+      return;
+    }
+    if (!loadDensityProp) {
+      setDensityLoaded(void 0);
+      return;
+    }
+    const req = ++densityReqId.current;
+    let cancelled = false;
+    setDensityLoaded(void 0);
+    const refDay = (0, import_dayjs.default)(referenceDayKey).startOf("day");
+    void loadDensityProp({ referenceDate: refDay, stepMinutes }).then((arr) => {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(Array.isArray(arr) ? arr : []);
+    }).catch(() => {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(void 0);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [referenceDayKey, stepMinutes, loadDensityProp, densitySeriesProp]);
+  const resolvedDensity = densitySeriesProp !== void 0 ? densitySeriesProp : densityLoaded;
+  const isAxisMoves = cursorMode === "axis-moves";
+  const [viewportSize, setViewportSize] = (0, import_react.useState)({ w: 0, h: 0 });
+  const viewportWrapRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    const el = viewportWrapRef.current;
+    if (!el) return;
+    const setSize = () => {
+      const w = el.clientWidth;
+      const h = el.clientHeight;
+      setViewportSize(
+        (prev) => prev.w === w && prev.h === h ? prev : { w, h }
+      );
+    };
+    setSize();
+    const ro = new ResizeObserver(setSize);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const horizontalSlotCount = (0, import_react.useMemo)(
+    () => isHorizontal ? (0, import_utils.getHorizontalAxisSlotCount)(range, referenceDate, stepMinutes) : 0,
+    [isHorizontal, range == null ? void 0 : range.start, range == null ? void 0 : range.end, referenceDate, stepMinutes]
+  );
+  const cellSizePx = (0, import_react.useMemo)(() => {
+    if (!isHorizontal) return CELL_SIZE_V;
+    if (isAxisMoves) return CELL_SIZE_H;
+    const n = horizontalSlotCount;
+    if (n <= 0) return CELL_SIZE_H;
+    const vpW = Math.max(1, viewportSize.w || 400);
+    const reserve = showNowButton ? CURSOR_MOVES_NOW_RESERVE_PX : 0;
+    const usable = Math.max(40, vpW - reserve - CURSOR_MOVES_H_PADDING_PX * 2);
+    const raw = Math.floor(usable / n);
+    return Math.max(CURSOR_MOVES_MIN_CELL_PX, Math.min(CELL_SIZE_H, raw));
+  }, [
+    isHorizontal,
+    isAxisMoves,
+    horizontalSlotCount,
+    viewportSize.w,
+    showNowButton
+  ]);
   const axis = (0, import_hooks.useTimeAxis)({
     range,
     stepMinutes,
@@ -95,6 +173,48 @@ function PisellTimeNavigator(props) {
     orientation,
     cellSizePx
   });
+  const horizontalDensityCurve = (0, import_react.useMemo)(() => {
+    if (!isHorizontal || !(resolvedDensity == null ? void 0 : resolvedDensity.length)) return null;
+    const ticksN = axis.ticks.length;
+    const n = Math.min(resolvedDensity.length, ticksN);
+    if (n < 2) return null;
+    const slice = resolvedDensity.slice(0, n);
+    const maxV = Math.max(...slice, 0);
+    const minV = Math.min(...slice, 0);
+    const span = Math.max(1, maxV - minV);
+    const h = DENSITY_LAYER_HEIGHT;
+    const points = slice.map((v, i) => {
+      const x = i * cellSizePx + cellSizePx / 2;
+      const t = (v - minV) / span;
+      const y = h - 1 - t * (h - 3);
+      return { x, y };
+    });
+    const first = points[0];
+    const last = points[points.length - 1];
+    let linePath = `M ${first.x} ${first.y}`;
+    for (let i = 0; i < points.length - 1; i += 1) {
+      const p0 = points[i];
+      const p1 = points[i + 1];
+      const cx = (p0.x + p1.x) / 2;
+      const cy = (p0.y + p1.y) / 2;
+      linePath += ` Q ${p0.x} ${p0.y} ${cx} ${cy}`;
+    }
+    linePath += ` T ${last.x} ${last.y}`;
+    const areaPath = `${linePath} L ${last.x} ${h} L ${first.x} ${h} Z`;
+    return {
+      points,
+      linePath,
+      areaPath,
+      h,
+      w: axis.totalLengthPx
+    };
+  }, [
+    isHorizontal,
+    resolvedDensity,
+    axis.ticks,
+    axis.totalLengthPx,
+    cellSizePx
+  ]);
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = (0, import_react.useState)(() => {
     const v = valueProp ?? defaultValue;
@@ -103,7 +223,6 @@ function PisellTimeNavigator(props) {
   const value = isControlled ? valueProp != null ? (0, import_utils.parseValue)(valueProp, referenceDate) : null : internalValue;
   const effectiveValue = value ?? axis.rangeStart;
   const scrollRef = (0, import_react.useRef)(null);
-  const viewportWrapRef = (0, import_react.useRef)(null);
   const scrollToCenterInProgressRef = (0, import_react.useRef)(false);
   const valueUpdatedByScrollRef = (0, import_react.useRef)(false);
   const isPointerDownRef = (0, import_react.useRef)(false);
@@ -111,13 +230,13 @@ function PisellTimeNavigator(props) {
     scrollLeft: 0,
     scrollTop: 0
   });
-  const [viewportSize, setViewportSize] = (0, import_react.useState)({ w: 0, h: 0 });
   const [, setNowTick] = (0, import_react.useState)(0);
   (0, import_react.useEffect)(() => {
     const id = setInterval(() => setNowTick((n) => n + 1), 60 * 1e3);
     return () => clearInterval(id);
   }, []);
-  const isAxisMoves = cursorMode === "axis-moves";
+  const cursorDragActiveRef = (0, import_react.useRef)(false);
+  const cursorDragBaseRef = (0, import_react.useRef)({ startClient: 0, startOffset: 0 });
   const getScrollContainer = (0, import_react.useCallback)(
     () => {
       var _a2, _b2;
@@ -125,21 +244,6 @@ function PisellTimeNavigator(props) {
     },
     []
   );
-  (0, import_react.useEffect)(() => {
-    const el = viewportWrapRef.current;
-    if (!el) return;
-    const setSize = () => {
-      const w = el.clientWidth;
-      const h = el.clientHeight;
-      setViewportSize(
-        (prev) => prev.w === w && prev.h === h ? prev : { w, h }
-      );
-    };
-    setSize();
-    const ro = new ResizeObserver(setSize);
-    ro.observe(el);
-    return () => ro.disconnect();
-  }, []);
   const inertiaHandlers = (0, import_hooks.useDragInertia)({
     enabled: inertia && !userInteractionLocked,
     orientation,
@@ -150,8 +254,41 @@ function PisellTimeNavigator(props) {
   const halfViewportW = effectiveViewportW / 2;
   const halfViewportH = effectiveViewportH / 2;
   const dotOffsetPx = isHorizontal ? cellSizePx / 2 : 0;
-  const axisStartMarginW = Math.max(0, halfViewportW - dotOffsetPx);
+  const axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
   const axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
+  const horizontalAxisWrapStyle = (0, import_react.useMemo)(() => {
+    if (!isHorizontal) return null;
+    const minHeight = 48;
+    if (isAxisMoves) {
+      const natural2 = axis.totalLengthPx + (effectiveViewportW - cellSizePx);
+      if (!showNowButton) {
+        return {
+          width: "100%",
+          minWidth: natural2,
+          minHeight,
+          boxSizing: "border-box"
+        };
+      }
+      return { width: natural2, minHeight };
+    }
+    const natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
+    if (!showNowButton) {
+      return {
+        width: "100%",
+        minWidth: natural,
+        minHeight,
+        boxSizing: "border-box"
+      };
+    }
+    return { width: natural, minHeight };
+  }, [
+    isHorizontal,
+    isAxisMoves,
+    axis.totalLengthPx,
+    effectiveViewportW,
+    cellSizePx,
+    showNowButton
+  ]);
   const handleScroll = (0, import_react.useCallback)(
     (data) => {
       if (scrollToCenterInProgressRef.current) return;
@@ -196,7 +333,7 @@ function PisellTimeNavigator(props) {
       const centerOffset = isHorizontal ? hasPadding ? scrollLeft + dotOffsetPx : scrollLeft + clientWidth / 2 : hasPadding ? scrollTop + dotOffsetPx : scrollTop + clientHeight / 2;
       const t = axis.offsetToTimeContinuous(centerOffset);
       if (!t) return;
-      const snapped = snapToStep ? (0, import_utils.snapToStepMinutes)(t, stepMinutes) : t.startOf("minute");
+      const snapped = snapToStep ? (0, import_utils.snapToStepMinutes)(t, stepMinutes) : t;
       if ((0, import_utils.isInDisabledRanges)(snapped, disabledRanges)) return;
       if (!isControlled) setInternalValue(snapped);
       onChange == null ? void 0 : onChange(snapped);
@@ -301,18 +438,38 @@ function PisellTimeNavigator(props) {
   const wallAligned = (0, import_dayjs.default)().startOf("minute");
   const currentTimeInRange = !wallAligned.isBefore(axis.rangeStart) && !wallAligned.isAfter(axis.rangeEnd);
   const currentTimeOffsetPx = currentTimeInRange ? axis.timeToOffset(wallAligned) : void 0;
+  const horizontalCurrentTimeHighlightStyle = (0, import_react.useMemo)(() => {
+    if (!isHorizontal || currentTimeOffsetPx == null || currentTimeOffsetPx < 0) {
+      return null;
+    }
+    const w = Math.min(CURRENT_TIME_GRADIENT_WIDTH_H_PX, currentTimeOffsetPx);
+    return {
+      left: axisStartMarginW + Math.max(0, currentTimeOffsetPx - w),
+      top: 0,
+      width: w,
+      height: 48
+    };
+  }, [isHorizontal, currentTimeOffsetPx, axisStartMarginW]);
   const SCROLL_SYNC_THRESHOLD_PX = 2;
   const hasScrollPadding = isHorizontal ? effectiveViewportW > 0 : effectiveViewportH > 0;
   const verticalTailPx = effectiveViewportH / 2;
   const verticalWrapHeight = axisStartMarginH + axis.totalLengthPx + verticalTailPx;
   const maxScrollPx = isHorizontal ? Math.max(0, axis.totalLengthPx - cellSizePx) : Math.max(0, verticalWrapHeight - effectiveViewportH);
   (0, import_react.useEffect)(() => {
-    var _a2, _b2;
+    var _a2, _b2, _c, _d;
+    if (!isAxisMoves && isHorizontal) {
+      const container2 = (_b2 = (_a2 = scrollRef.current) == null ? void 0 : _a2.getScrollContainer) == null ? void 0 : _b2.call(_a2);
+      if (container2 && container2.scrollLeft !== 0) {
+        container2.scrollTo({ left: 0, behavior: "auto" });
+      }
+      return;
+    }
+    if (!isAxisMoves && cursorDragActiveRef.current) return;
     if (valueUpdatedByScrollRef.current) {
       valueUpdatedByScrollRef.current = false;
       return;
     }
-    const container = (_b2 = (_a2 = scrollRef.current) == null ? void 0 : _a2.getScrollContainer) == null ? void 0 : _b2.call(_a2);
+    const container = (_d = (_c = scrollRef.current) == null ? void 0 : _c.getScrollContainer) == null ? void 0 : _d.call(_c);
     if (!container) return;
     const viewportPx = isHorizontal ? container.clientWidth : container.clientHeight;
     const targetScroll = hasScrollPadding ? Math.max(0, Math.min(cursorOffsetPx - dotOffsetPx, maxScrollPx)) : Math.max(
@@ -339,7 +496,8 @@ function PisellTimeNavigator(props) {
     hasScrollPadding,
     dotOffsetPx,
     cellSizePx,
-    axis.totalLengthPx
+    axis.totalLengthPx,
+    isAxisMoves
   ]);
   const scrollToCenterTime = (0, import_react.useCallback)(
     (t) => {
@@ -380,6 +538,75 @@ function PisellTimeNavigator(props) {
     const clamped = wall.isBefore(rangeStart) ? rangeStart : wall.isAfter(rangeEnd) ? rangeEnd : wall;
     handleChange(clamped);
   }, [range, referenceDate, handleChange]);
+  const applyOffsetToNavigatorValue = (0, import_react.useCallback)(
+    (offsetPx, snap) => {
+      const maxO = Math.max(0, axis.totalLengthPx - 1e-3);
+      const nextOff = Math.max(0, Math.min(offsetPx, maxO));
+      const t = axis.offsetToTimeContinuous(nextOff);
+      if (!t) return;
+      const out = snapToStep ? snap ? (0, import_utils.snapToStepMinutes)(t, stepMinutes) : t.startOf("minute") : t;
+      if ((0, import_utils.isInDisabledRanges)(out, disabledRanges)) return;
+      if (!isControlled) setInternalValue(out);
+      onChange == null ? void 0 : onChange(out);
+    },
+    [
+      axis.totalLengthPx,
+      axis.offsetToTimeContinuous,
+      snapToStep,
+      stepMinutes,
+      disabledRanges,
+      isControlled,
+      onChange
+    ]
+  );
+  const handleCursorDragPointerDown = (0, import_react.useCallback)(
+    (e) => {
+      if (userInteractionLocked || isAxisMoves) return;
+      e.preventDefault();
+      e.stopPropagation();
+      onUserInteraction == null ? void 0 : onUserInteraction();
+      cursorDragActiveRef.current = true;
+      cursorDragBaseRef.current = {
+        startClient: isHorizontal ? e.clientX : e.clientY,
+        startOffset: cursorOffsetPx
+      };
+      valueUpdatedByScrollRef.current = true;
+      e.currentTarget.setPointerCapture(e.pointerId);
+    },
+    [
+      userInteractionLocked,
+      isAxisMoves,
+      isHorizontal,
+      cursorOffsetPx,
+      onUserInteraction
+    ]
+  );
+  const handleCursorDragPointerMove = (0, import_react.useCallback)(
+    (e) => {
+      if (!cursorDragActiveRef.current) return;
+      const client = isHorizontal ? e.clientX : e.clientY;
+      const delta = client - cursorDragBaseRef.current.startClient;
+      const nextOff = cursorDragBaseRef.current.startOffset + delta;
+      applyOffsetToNavigatorValue(nextOff, false);
+    },
+    [isHorizontal, applyOffsetToNavigatorValue]
+  );
+  const handleCursorDragPointerUp = (0, import_react.useCallback)(
+    (e) => {
+      if (!cursorDragActiveRef.current) return;
+      cursorDragActiveRef.current = false;
+      try {
+        e.currentTarget.releasePointerCapture(e.pointerId);
+      } catch {
+      }
+      const client = isHorizontal ? e.clientX : e.clientY;
+      const delta = client - cursorDragBaseRef.current.startClient;
+      const nextOff = cursorDragBaseRef.current.startOffset + delta;
+      valueUpdatedByScrollRef.current = false;
+      applyOffsetToNavigatorValue(nextOff, true);
+    },
+    [isHorizontal, applyOffsetToNavigatorValue]
+  );
   const businessHoursPx = (0, import_react.useMemo)(() => {
     if (!businessHours) return void 0;
     const [s, e] = (0, import_utils.getRangeBounds)(businessHours, referenceDate);
@@ -460,6 +687,7 @@ function PisellTimeNavigator(props) {
               snapFn,
               scrollPosition,
               viewportSize,
+              onUserInteraction,
               onPointerDown: inertiaHandlers.onPointerDown,
               onPointerMove: inertiaHandlers.onPointerMove,
               onPointerUp: inertiaHandlers.onPointerUp,
@@ -469,24 +697,16 @@ function PisellTimeNavigator(props) {
               "div",
               {
                 className: "pisell-time-navigator-axis-wrap",
-                style: isHorizontal ? {
-                  width: axis.totalLengthPx + (effectiveViewportW - cellSizePx),
-                  minHeight: 48
-                } : {
+                style: isHorizontal ? horizontalAxisWrapStyle ?? { minHeight: 48 } : {
                   width: "100%"
                   /* 不设 height，由轴（marginTop + 内容 + marginBottom）自然撑开，避免固定高度与 margin 的 CSS 盒模型歧义 */
                 }
               },
-              isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /* @__PURE__ */ import_react.default.createElement(
+              horizontalCurrentTimeHighlightStyle && /* @__PURE__ */ import_react.default.createElement(
                 "div",
                 {
                   className: "pisell-time-navigator-current-gradient pisell-time-navigator-current-gradient--horizontal",
-                  style: {
-                    left: axisStartMarginW + Math.max(0, currentTimeOffsetPx - CELL_SIZE_H),
-                    top: 0,
-                    width: Math.min(CELL_SIZE_H, currentTimeOffsetPx),
-                    height: 48
-                  },
+                  style: horizontalCurrentTimeHighlightStyle,
                   "aria-hidden": true
                 }
               ),
@@ -517,6 +737,70 @@ function PisellTimeNavigator(props) {
                     businessHoursPx
                   }
                 ),
+                horizontalDensityCurve ? /* @__PURE__ */ import_react.default.createElement(
+                  "svg",
+                  {
+                    className: "pisell-time-navigator-density-layer",
+                    width: horizontalDensityCurve.w,
+                    height: horizontalDensityCurve.h,
+                    viewBox: `0 0 ${horizontalDensityCurve.w} ${horizontalDensityCurve.h}`,
+                    preserveAspectRatio: "none",
+                    "aria-hidden": true
+                  },
+                  /* @__PURE__ */ import_react.default.createElement("defs", null, /* @__PURE__ */ import_react.default.createElement(
+                    "linearGradient",
+                    {
+                      id: densityGradientId,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "1"
+                    },
+                    /* @__PURE__ */ import_react.default.createElement(
+                      "stop",
+                      {
+                        offset: "0%",
+                        stopColor: "#ff9c66",
+                        stopOpacity: "0.32"
+                      }
+                    ),
+                    /* @__PURE__ */ import_react.default.createElement(
+                      "stop",
+                      {
+                        offset: "100%",
+                        stopColor: "#ff9c66",
+                        stopOpacity: "0.02"
+                      }
+                    )
+                  )),
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "path",
+                    {
+                      d: horizontalDensityCurve.areaPath,
+                      fill: `url(#${densityGradientId})`
+                    }
+                  ),
+                  /* @__PURE__ */ import_react.default.createElement(
+                    "path",
+                    {
+                      d: horizontalDensityCurve.linePath,
+                      fill: "none",
+                      stroke: "#ff8a4a",
+                      strokeWidth: 1.8,
+                      vectorEffect: "non-scaling-stroke"
+                    }
+                  ),
+                  horizontalDensityCurve.points.map((p, i) => /* @__PURE__ */ import_react.default.createElement(
+                    "circle",
+                    {
+                      key: i,
+                      cx: p.x,
+                      cy: p.y,
+                      r: 1.4,
+                      fill: "#ff8a4a"
+                    }
+                  ))
+                ) : null,
                 /* @__PURE__ */ import_react.default.createElement(
                   import_components.ScaleLayer,
                   {
@@ -526,9 +810,19 @@ function PisellTimeNavigator(props) {
                     majorStepMinutes,
                     timeFormat,
                     locale,
-                    style: scaleStyle
+                    style: scaleStyle,
+                    horizontalCellSizePx: isHorizontal ? cellSizePx : void 0
                   }
                 ),
+                isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /* @__PURE__ */ import_react.default.createElement(
+                  "span",
+                  {
+                    className: "pisell-time-navigator-current-time-bubble",
+                    style: { left: currentTimeOffsetPx },
+                    "aria-hidden": true
+                  },
+                  locale ? wallAligned.locale(locale).format(timeFormat) : wallAligned.format(timeFormat)
+                ),
                 !isHorizontal && currentTimeOffsetPx != null && currentTimeOffsetPx >= 0 && /* @__PURE__ */ import_react.default.createElement(
                   "div",
                   {
@@ -552,7 +846,12 @@ function PisellTimeNavigator(props) {
                     locale,
                     isRealtime: realtime,
                     offsetPx: cursorOffsetPx,
-                    style: cursorStyle
+                    style: cursorStyle,
+                    dragInteractive: !userInteractionLocked,
+                    onDragPointerDown: handleCursorDragPointerDown,
+                    onDragPointerMove: handleCursorDragPointerMove,
+                    onDragPointerUp: handleCursorDragPointerUp,
+                    onDragPointerCancel: handleCursorDragPointerUp
                   }
                 )
               )