@pisell/materials 1.0.1062 → 1.0.1064

package/es/components/pisellTimeNavigator/PisellTimeNavigator.js

@@ -4,6 +4,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -32,9 +36,11 @@ var CURSOR_MOVES_NOW_RESERVE_PX = 56;
 var CURSOR_MOVES_H_PADDING_PX = 8;
 /** cursor-moves 横向：每格最小宽度（再小刻度不可读） */
 var CURSOR_MOVES_MIN_CELL_PX = 8;
+/** 密度层高度：时间轴 48px 内留少量上下边距 */
+var DENSITY_LAYER_HEIGHT = 46;
 
-/**
- * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
+/**
+ * PisellTimeNavigator：可拖动的时间导航轴，时间范围内浏览、选择、控制
  */
 export function PisellTimeNavigator(props) {
   var _context$engine;
@@ -74,12 +80,14 @@ export function PisellTimeNavigator(props) {
     _props$timeFormat = props.timeFormat,
     timeFormat = _props$timeFormat === void 0 ? 'HH:mm' : _props$timeFormat,
     renderNowButton = props.renderNowButton,
-    onUserInteraction = props.onUserInteraction;
+    onUserInteraction = props.onUserInteraction,
+    densitySeriesProp = props.densitySeries,
+    loadDensityProp = props.loadDensity;
   var context = useEngineContext();
   locales.init(pisellTimeNavigatorLocales, (context === null || context === void 0 || (_context$engine = context.engine) === null || _context$engine === void 0 || (_context$engine = _context$engine.props) === null || _context$engine === void 0 ? void 0 : _context$engine.locale) || 'en');
 
-  /**
-   * 锚定日历日：传入 prop 时以 prop 为准；不传则每帧取当天 0 点（与历史行为一致，便于跨自然日）
+  /**
+   * 锚定日历日：传入 prop 时以 prop 为准；不传则每帧取当天 0 点（与历史行为一致，便于跨自然日）
    */
   var referenceDateFromProp = useMemo(function () {
     if (referenceDateProp == null) return undefined;
@@ -88,14 +96,53 @@ export function PisellTimeNavigator(props) {
   }, [referenceDateProp]);
   var referenceDate = referenceDateFromProp !== null && referenceDateFromProp !== void 0 ? referenceDateFromProp : dayjs().startOf('day');
   var isHorizontal = orientation === 'horizontal';
+
+  /** 按自然日稳定依赖，避免无 referenceDate prop 时每次 render 新建 dayjs 触发重复 loadDensity */
+  var referenceDayKey = referenceDateFromProp != null ? referenceDateFromProp.format('YYYY-MM-DD') : dayjs().format('YYYY-MM-DD');
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    densityLoaded = _useState2[0],
+    setDensityLoaded = _useState2[1];
+  var densityReqId = useRef(0);
+  var densityGradientId = useMemo(function () {
+    return "pisell-time-density-fill-".concat(Math.random().toString(36).slice(2, 8));
+  }, []);
+  useEffect(function () {
+    if (densitySeriesProp !== undefined) {
+      setDensityLoaded(undefined);
+      return;
+    }
+    if (!loadDensityProp) {
+      setDensityLoaded(undefined);
+      return;
+    }
+    var req = ++densityReqId.current;
+    var cancelled = false;
+    setDensityLoaded(undefined);
+    var refDay = dayjs(referenceDayKey).startOf('day');
+    void loadDensityProp({
+      referenceDate: refDay,
+      stepMinutes: stepMinutes
+    }).then(function (arr) {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(Array.isArray(arr) ? arr : []);
+    }).catch(function () {
+      if (cancelled || req !== densityReqId.current) return;
+      setDensityLoaded(undefined);
+    });
+    return function () {
+      cancelled = true;
+    };
+  }, [referenceDayKey, stepMinutes, loadDensityProp, densitySeriesProp]);
+  var resolvedDensity = densitySeriesProp !== undefined ? densitySeriesProp : densityLoaded;
   var isAxisMoves = cursorMode === 'axis-moves';
-  var _useState = useState({
+  var _useState3 = useState({
       w: 0,
       h: 0
     }),
-    _useState2 = _slicedToArray(_useState, 2),
-    viewportSize = _useState2[0],
-    setViewportSize = _useState2[1];
+    _useState4 = _slicedToArray(_useState3, 2),
+    viewportSize = _useState4[0],
+    setViewportSize = _useState4[1];
 
   /** 挂载和视口变化时同步尺寸（需在 cellSize 计算之前声明 state） */
   var viewportWrapRef = useRef(null);
@@ -142,14 +189,54 @@ export function PisellTimeNavigator(props) {
     orientation: orientation,
     cellSizePx: cellSizePx
   });
+  var horizontalDensityCurve = useMemo(function () {
+    if (!isHorizontal || !(resolvedDensity !== null && resolvedDensity !== void 0 && resolvedDensity.length)) return null;
+    var ticksN = axis.ticks.length;
+    var n = Math.min(resolvedDensity.length, ticksN);
+    if (n < 2) return null;
+    var slice = resolvedDensity.slice(0, n);
+    var maxV = Math.max.apply(Math, _toConsumableArray(slice).concat([0]));
+    var minV = Math.min.apply(Math, _toConsumableArray(slice).concat([0]));
+    var span = Math.max(1, maxV - minV);
+    var h = DENSITY_LAYER_HEIGHT;
+    var points = slice.map(function (v, i) {
+      var x = i * cellSizePx + cellSizePx / 2;
+      /** 映射到 [0,1]：最低值贴底，最高值接近顶部，基本吃满密度层高度 */
+      var t = (v - minV) / span;
+      var y = h - 1 - t * (h - 3);
+      return {
+        x: x,
+        y: y
+      };
+    });
+    var first = points[0];
+    var last = points[points.length - 1];
+    var linePath = "M ".concat(first.x, " ").concat(first.y);
+    for (var i = 0; i < points.length - 1; i += 1) {
+      var p0 = points[i];
+      var p1 = points[i + 1];
+      var cx = (p0.x + p1.x) / 2;
+      var cy = (p0.y + p1.y) / 2;
+      linePath += " Q ".concat(p0.x, " ").concat(p0.y, " ").concat(cx, " ").concat(cy);
+    }
+    linePath += " T ".concat(last.x, " ").concat(last.y);
+    var areaPath = "".concat(linePath, " L ").concat(last.x, " ").concat(h, " L ").concat(first.x, " ").concat(h, " Z");
+    return {
+      points: points,
+      linePath: linePath,
+      areaPath: areaPath,
+      h: h,
+      w: axis.totalLengthPx
+    };
+  }, [isHorizontal, resolvedDensity, axis.ticks, axis.totalLengthPx, cellSizePx]);
   var isControlled = valueProp !== undefined;
-  var _useState3 = useState(function () {
+  var _useState5 = useState(function () {
       var v = valueProp !== null && valueProp !== void 0 ? valueProp : defaultValue;
       return parseValue(v, referenceDate);
     }),
-    _useState4 = _slicedToArray(_useState3, 2),
-    internalValue = _useState4[0],
-    setInternalValue = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 2),
+    internalValue = _useState6[0],
+    setInternalValue = _useState6[1];
   var value = isControlled ? valueProp != null ? parseValue(valueProp, referenceDate) : null : internalValue;
   var effectiveValue = value !== null && value !== void 0 ? value : axis.rangeStart;
   var scrollRef = useRef(null);
@@ -159,17 +246,17 @@ export function PisellTimeNavigator(props) {
   var valueUpdatedByScrollRef = useRef(false);
   /** 手指是否仍按在滚动区域上；仅当完全松手后才执行吸附 */
   var isPointerDownRef = useRef(false);
-  var _useState5 = useState({
+  var _useState7 = useState({
       scrollLeft: 0,
       scrollTop: 0
     }),
-    _useState6 = _slicedToArray(_useState5, 2),
-    scrollPosition = _useState6[0],
-    setScrollPosition = _useState6[1];
-  /** 每分钟更新一次，使当前时间线/渐变块随真实时间移动 */
-  var _useState7 = useState(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    setNowTick = _useState8[1];
+    scrollPosition = _useState8[0],
+    setScrollPosition = _useState8[1];
+  /** 每分钟更新一次，使当前时间线/渐变块随真实时间移动 */
+  var _useState9 = useState(0),
+    _useState10 = _slicedToArray(_useState9, 2),
+    setNowTick = _useState10[1];
   useEffect(function () {
     var id = setInterval(function () {
       return setNowTick(function (n) {
@@ -208,6 +295,43 @@ export function PisellTimeNavigator(props) {
   var axisStartMarginW = isHorizontal && !isAxisMoves ? CURSOR_MOVES_H_PADDING_PX : Math.max(0, halfViewportW - dotOffsetPx);
   var axisStartMarginH = Math.max(0, halfViewportH - dotOffsetPx);
 
+  /**
+   * 横向 axis-wrap：无 Now 时用 width:100% + minWidth:自然内容宽，铺满滚动视口；内容更长时仍可横向滚动。
+   * 依赖 effectiveViewportW（须在 viewportSize 之后计算）。
+   */
+  var horizontalAxisWrapStyle = useMemo(function () {
+    if (!isHorizontal) return null;
+    var minHeight = 48;
+    if (isAxisMoves) {
+      var _natural = axis.totalLengthPx + (effectiveViewportW - cellSizePx);
+      if (!showNowButton) {
+        return {
+          width: '100%',
+          minWidth: _natural,
+          minHeight: minHeight,
+          boxSizing: 'border-box'
+        };
+      }
+      return {
+        width: _natural,
+        minHeight: minHeight
+      };
+    }
+    var natural = CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX;
+    if (!showNowButton) {
+      return {
+        width: '100%',
+        minWidth: natural,
+        minHeight: minHeight,
+        boxSizing: 'border-box'
+      };
+    }
+    return {
+      width: natural,
+      minHeight: minHeight
+    };
+  }, [isHorizontal, isAxisMoves, axis.totalLengthPx, effectiveViewportW, cellSizePx, showNowButton]);
+
   /** 拖动中：用连续映射按 1 分钟步长显示时间（不吸附到 stepMinutes） */
   var handleScroll = useCallback(function (data) {
     /** 程序性滚动到中心（如点 Now）过程中不更新任何状态，避免时间轴再动、value 被覆盖 */
@@ -327,9 +451,9 @@ export function PisellTimeNavigator(props) {
   // 以点为基准：有留白时 targetScroll = cursorOffsetPx - dotOffsetPx（使该点对准视口中心）
   var SCROLL_SYNC_THRESHOLD_PX = 2;
   var hasScrollPadding = isHorizontal ? effectiveViewportW > 0 : effectiveViewportH > 0;
-  /**
-   * 竖向：上留白用 axis marginTop，下留白用 axis marginBottom（均为半屏）
-   * axis-wrap 高度 = marginTop + 轴内容 + marginBottom
+  /**
+   * 竖向：上留白用 axis marginTop，下留白用 axis marginBottom（均为半屏）
+   * axis-wrap 高度 = marginTop + 轴内容 + marginBottom
    */
   var verticalTailPx = effectiveViewportH / 2;
   var verticalWrapHeight = axisStartMarginH + axis.totalLengthPx + verticalTailPx;
@@ -519,11 +643,7 @@ export function PisellTimeNavigator(props) {
     onPointerLeave: inertiaHandlers.onPointerUp
   }, /*#__PURE__*/React.createElement("div", {
     className: "pisell-time-navigator-axis-wrap",
-    style: isHorizontal ? isAxisMoves ? {
-      width: axis.totalLengthPx + (effectiveViewportW - cellSizePx),
-      minHeight: 48
-    } : {
-      width: CURSOR_MOVES_H_PADDING_PX + axis.totalLengthPx + CURSOR_MOVES_H_PADDING_PX,
+    style: isHorizontal ? horizontalAxisWrapStyle !== null && horizontalAxisWrapStyle !== void 0 ? horizontalAxisWrapStyle : {
       minHeight: 48
     } : {
       width: '100%'
@@ -555,7 +675,45 @@ export function PisellTimeNavigator(props) {
     orientation: orientation,
     pastTimeFade: pastTimeFade,
     businessHoursPx: businessHoursPx
-  }), /*#__PURE__*/React.createElement(ScaleLayer, {
+  }), horizontalDensityCurve ? /*#__PURE__*/React.createElement("svg", {
+    className: "pisell-time-navigator-density-layer",
+    width: horizontalDensityCurve.w,
+    height: horizontalDensityCurve.h,
+    viewBox: "0 0 ".concat(horizontalDensityCurve.w, " ").concat(horizontalDensityCurve.h),
+    preserveAspectRatio: "none",
+    "aria-hidden": true
+  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+    id: densityGradientId,
+    x1: "0",
+    y1: "0",
+    x2: "0",
+    y2: "1"
+  }, /*#__PURE__*/React.createElement("stop", {
+    offset: "0%",
+    stopColor: "#ff9c66",
+    stopOpacity: "0.32"
+  }), /*#__PURE__*/React.createElement("stop", {
+    offset: "100%",
+    stopColor: "#ff9c66",
+    stopOpacity: "0.02"
+  }))), /*#__PURE__*/React.createElement("path", {
+    d: horizontalDensityCurve.areaPath,
+    fill: "url(#".concat(densityGradientId, ")")
+  }), /*#__PURE__*/React.createElement("path", {
+    d: horizontalDensityCurve.linePath,
+    fill: "none",
+    stroke: "#ff8a4a",
+    strokeWidth: 1.8,
+    vectorEffect: "non-scaling-stroke"
+  }), horizontalDensityCurve.points.map(function (p, i) {
+    return /*#__PURE__*/React.createElement("circle", {
+      key: i,
+      cx: p.x,
+      cy: p.y,
+      r: 1.4,
+      fill: "#ff8a4a"
+    });
+  })) : null, /*#__PURE__*/React.createElement(ScaleLayer, {
     orientation: orientation,
     ticks: axis.ticks,
     stepMinutes: stepMinutes,

package/es/components/pisellTimeNavigator/PisellTimeNavigator.less

@@ -128,6 +128,15 @@
   flex-shrink: 0;
 }
 
+.pisell-time-navigator-density-layer {
+  position: absolute;
+  left: 0;
+  top: 1px;
+  z-index: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
 /* 背景层（营业时间、过去时间淡化等；当前时间渐变已拆出为独立块） */
 .pisell-time-navigator-background {
   position: absolute;
@@ -369,6 +378,8 @@
 
   &--horizontal {
     height: 100%;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   &--vertical {

package/es/components/pisellTimeNavigator/components/CursorLayer.d.ts

@@ -11,10 +11,16 @@ export interface CursorLayerProps {
     fixedCenter?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    /** cursor-moves：允许拖指针改时间 */
+    dragInteractive?: boolean;
+    onDragPointerDown?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerMove?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerUp?: React.PointerEventHandler<HTMLDivElement>;
+    onDragPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
 }
 /**
  * 时间指示器层：竖线/横线 + 时间气泡
  * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
  * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
  */
-export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, }: CursorLayerProps): JSX.Element | null;
+export declare function CursorLayer({ orientation, value, timeFormat, locale, isRealtime, offsetPx, fixedCenter, style, className, dragInteractive, onDragPointerDown, onDragPointerMove, onDragPointerUp, onDragPointerCancel, }: CursorLayerProps): JSX.Element | null;

package/es/components/pisellTimeNavigator/components/CursorLayer.js

@@ -10,10 +10,10 @@ import classNames from 'classnames';
 var CURSOR_LINE_WIDTH_H = 3;
 var CURSOR_LINE_HEIGHT_V = 2;
 
-/**
- * 时间指示器层：竖线/横线 + 时间气泡
- * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
- * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
+/**
+ * 时间指示器层：竖线/横线 + 时间气泡
+ * 对齐基准为内部的竖线/横线，不是整块（气泡）的边或中心。
+ * 横向：竖线 3px；竖向：横线 2px。Realtime 态 #FF692E，浏览态 #344054
  */
 export function CursorLayer(_ref) {
   var orientation = _ref.orientation,
@@ -24,20 +24,40 @@ export function CursorLayer(_ref) {
     offsetPx = _ref.offsetPx,
     fixedCenter = _ref.fixedCenter,
     style = _ref.style,
-    className = _ref.className;
+    className = _ref.className,
+    dragInteractive = _ref.dragInteractive,
+    onDragPointerDown = _ref.onDragPointerDown,
+    onDragPointerMove = _ref.onDragPointerMove,
+    onDragPointerUp = _ref.onDragPointerUp,
+    onDragPointerCancel = _ref.onDragPointerCancel;
   if (value == null) return null;
   var label = locale ? value.locale(locale).format(timeFormat) : value.format(timeFormat);
   var isHorizontal = orientation === 'horizontal';
   /** 以竖线/横线中心为 offsetPx，故定位到 offsetPx - 线宽/2 */
   var lineOffset = offsetPx - (isHorizontal ? CURSOR_LINE_WIDTH_H / 2 : CURSOR_LINE_HEIGHT_V / 2);
+  var positionStyle = fixedCenter ? style !== null && style !== void 0 ? style : {} : dragInteractive && isHorizontal ? _objectSpread(_objectSpread({}, style), {}, {
+    left: offsetPx,
+    transform: 'translateX(-50%)',
+    width: 36
+  }) : dragInteractive && !isHorizontal ? _objectSpread(_objectSpread({}, style), {}, {
+    top: offsetPx,
+    transform: 'translateX(-50%) translateY(-50%)',
+    height: 40
+  }) : _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, isHorizontal ? 'left' : 'top', lineOffset));
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-time-navigator-cursor', "pisell-time-navigator-cursor--".concat(orientation), {
       'pisell-time-navigator-cursor--realtime': isRealtime
     }, {
       'pisell-time-navigator-cursor--fixed': fixedCenter
+    }, {
+      'pisell-time-navigator-cursor--draggable': dragInteractive
     }, className),
-    style: fixedCenter ? style : _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, isHorizontal ? 'left' : 'top', lineOffset)),
-    "aria-hidden": true
+    style: positionStyle,
+    "aria-hidden": true,
+    onPointerDown: dragInteractive ? onDragPointerDown : undefined,
+    onPointerMove: dragInteractive ? onDragPointerMove : undefined,
+    onPointerUp: dragInteractive ? onDragPointerUp : undefined,
+    onPointerCancel: dragInteractive ? onDragPointerCancel : undefined
   }, /*#__PURE__*/React.createElement("span", {
     className: "pisell-time-navigator-cursor-line"
   }), /*#__PURE__*/React.createElement("span", {

package/es/components/pisellTimeNavigator/components/GestureLayer.d.ts

@@ -23,9 +23,11 @@ export interface GestureLayerProps {
     onPointerMove?: React.PointerEventHandler;
     onPointerUp?: React.PointerEventHandler;
     onPointerLeave?: React.PointerEventHandler;
+    /** 轴上任意指针按下（含惯性拖轴） */
+    onUserInteraction?: () => void;
     children: React.ReactNode;
 }
 /**
  * 交互层：点击刻度跳转、键盘左右/上下 + 回车
  */
-export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, children, }: GestureLayerProps): JSX.Element;
+export declare function GestureLayer({ orientation, cellSizePx, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, stepMinutes, snapFn, scrollPosition, viewportSize, onPointerDown, onPointerMove, onPointerUp, onPointerLeave, onUserInteraction, children, }: GestureLayerProps): JSX.Element;

package/es/components/pisellTimeNavigator/components/GestureLayer.js

@@ -18,9 +18,11 @@ export function GestureLayer(_ref) {
     onPointerMove = _ref.onPointerMove,
     onPointerUp = _ref.onPointerUp,
     onPointerLeave = _ref.onPointerLeave,
+    onUserInteraction = _ref.onUserInteraction,
     children = _ref.children;
   var isHorizontal = orientation === 'horizontal';
   var handleClick = useCallback(function (e) {
+    onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
     var viewport = e.currentTarget.parentElement;
     if (!viewport) return;
     var vRect = viewport.getBoundingClientRect();
@@ -32,7 +34,7 @@ export function GestureLayer(_ref) {
     var candidate = snapToStep ? snapFn(t) : t;
     if (isInDisabledRanges(candidate)) return;
     onSelectTime(candidate);
-  }, [isHorizontal, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn]);
+  }, [isHorizontal, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, onUserInteraction]);
   var handleKeyDown = useCallback(function (e) {
     var scrollContentCenter = orientation === 'horizontal' ? scrollPosition.scrollLeft + viewportSize.w / 2 : scrollPosition.scrollTop + viewportSize.h / 2;
     var centerOffset = Math.max(0, scrollContentCenter - axisStartMarginPx);
@@ -40,7 +42,10 @@ export function GestureLayer(_ref) {
     if (currentTime == null) return;
     if (e.key === 'Enter') {
       var candidate = snapToStep ? snapFn(currentTime) : currentTime;
-      if (!isInDisabledRanges(candidate)) onSelectTime(candidate);
+      if (!isInDisabledRanges(candidate)) {
+        onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
+        onSelectTime(candidate);
+      }
       e.preventDefault();
       return;
     }
@@ -53,14 +58,18 @@ export function GestureLayer(_ref) {
     }
     e.preventDefault();
     var snapped = snapToStep ? snapFn(next) : next;
-    if (!isInDisabledRanges(snapped)) onSelectTime(snapped);
-  }, [orientation, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, stepMinutes, scrollPosition.scrollLeft, scrollPosition.scrollTop, viewportSize.w, viewportSize.h]);
+    if (!isInDisabledRanges(snapped)) {
+      onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
+      onSelectTime(snapped);
+    }
+  }, [orientation, axisStartMarginPx, offsetToTime, onSelectTime, isInDisabledRanges, snapToStep, snapFn, stepMinutes, scrollPosition.scrollLeft, scrollPosition.scrollTop, viewportSize.w, viewportSize.h, onUserInteraction]);
   var handlePointerDown = useCallback(function (e) {
+    onUserInteraction === null || onUserInteraction === void 0 || onUserInteraction();
     if (onPointerDown) {
       e.currentTarget.setPointerCapture(e.pointerId);
       onPointerDown(e);
     }
-  }, [onPointerDown]);
+  }, [onPointerDown, onUserInteraction]);
   var handlePointerUp = useCallback(function (e) {
     if (onPointerUp) {
       e.currentTarget.releasePointerCapture(e.pointerId);

package/es/components/pisellTimeNavigator/components/ScaleLayer.d.ts

@@ -9,9 +9,14 @@ export interface ScaleLayerProps {
     locale?: string;
     style?: React.CSSProperties;
     className?: string;
+    /**
+     * 横向每格宽度（px），须与 useTimeAxis 的 cellSizePx 一致；
+     * 不传时样式表默认 82（axis-moves）；cursor-moves 压缩比例时必传
+     */
+    horizontalCellSizePx?: number;
 }
 /**
  * 刻度层：渲染时间刻度与标签
  * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
  */
-export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, }: ScaleLayerProps): JSX.Element;
+export declare function ScaleLayer({ orientation, ticks, stepMinutes, majorStepMinutes, timeFormat, locale, style, className, horizontalCellSizePx, }: ScaleLayerProps): JSX.Element;

package/es/components/pisellTimeNavigator/components/ScaleLayer.js

@@ -1,8 +1,14 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 import React from 'react';
 import classNames from 'classnames';
-/**
- * 刻度层：渲染时间刻度与标签
- * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
+/**
+ * 刻度层：渲染时间刻度与标签
+ * 横向：整点数字 + 小圆点；竖向：整点/半点数字 + 分割线
  */
 export function ScaleLayer(_ref) {
   var orientation = _ref.orientation,
@@ -12,7 +18,8 @@ export function ScaleLayer(_ref) {
     timeFormat = _ref.timeFormat,
     locale = _ref.locale,
     style = _ref.style,
-    className = _ref.className;
+    className = _ref.className,
+    horizontalCellSizePx = _ref.horizontalCellSizePx;
   var isHorizontal = orientation === 'horizontal';
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('pisell-time-navigator-scale', "pisell-time-navigator-scale--".concat(orientation), className),
@@ -22,13 +29,28 @@ export function ScaleLayer(_ref) {
     /** 横向整点只展示小时，非整点用 timeFormat；竖向沿用 timeFormat */
     var label = isHorizontal && isMajor ? locale ? tick.locale(locale).format('H') : tick.format('H') : locale ? tick.locale(locale).format(timeFormat) : tick.format(timeFormat);
     if (isHorizontal) {
+      var cw = horizontalCellSizePx != null && horizontalCellSizePx > 0 ? horizontalCellSizePx : undefined;
+      var compactPad = cw != null ? cw < 36 ? 2 : cw < 52 ? 6 : 10 : undefined;
       return /*#__PURE__*/React.createElement("div", {
         key: i,
         className: classNames('pisell-time-navigator-scale-cell', 'pisell-time-navigator-scale-cell--h', {
           'pisell-time-navigator-scale-cell--major': isMajor
-        })
+        }),
+        style: cw != null ? _objectSpread({
+          width: cw,
+          minWidth: cw,
+          maxWidth: cw,
+          flex: '0 0 auto',
+          boxSizing: 'border-box'
+        }, compactPad != null ? {
+          padding: compactPad
+        } : {}) : undefined
       }, isMajor && /*#__PURE__*/React.createElement("span", {
-        className: "pisell-time-navigator-scale-label"
+        className: "pisell-time-navigator-scale-label",
+        style: cw != null && cw < 48 ? {
+          fontSize: Math.max(10, Math.round(cw * 0.32)),
+          lineHeight: 1.15
+        } : undefined
       }, label), !isMajor && /*#__PURE__*/React.createElement("span", {
         className: "pisell-time-navigator-scale-dot",
         "aria-hidden": true

package/es/components/pisellTimeNavigator/types.d.ts

@@ -142,6 +142,17 @@ export interface PisellTimeNavigatorProps {
      * 自定义 Now 按钮内容（覆盖默认文案与图标时使用）
      */
     renderNowButton?: () => ReactNode;
+    /**
+     * 横向轴上与刻度槽位数一致的密度序列（任意正数，内部按最大值归一化折线高度）
+     */
+    densitySeries?: number[];
+    /**
+     * 未传 `densitySeries` 时按 `referenceDate` 拉取；日历日变更会重新请求，过期响应丢弃
+     */
+    loadDensity?: (params: {
+        referenceDate: Dayjs;
+        stepMinutes: number;
+    }) => Promise<number[]>;
     /**
      * 用户开始操作时间轴（拖轴、点刻度、键盘、拖指针等）时回调；用于上层关闭「跟随当前」等。
      */

package/es/index.d.ts

@@ -129,7 +129,7 @@ export { default as PisellRow } from './components/pisellRow';
 export { default as Div } from './components/div';
 export { default as PisellBasicGrid } from './components/PisellBasicGrid';
 export { default as PisellScrollView } from './components/PisellScrollView';
-export { PisellFloorMapLayout, FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable, } from './components/pisellFloorMapLayout';
+export { PisellFloorMapLayout, FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable, FloorMapImageElement, FLOOR_MAP_IMAGE_ELEMENT_KIND, renderFloorMapFallbackPlaceholder, isFloorMapImageElementKind, } from './components/pisellFloorMapLayout';
 export type { FloorMapViewConfig, FloorMapSceneElement, FloorMapCanvasNameI18n, FloorMapMergedItem, FloorMapDataSources, FloorMapItemBase, FloorMapRenderOptions, } from './components/pisellFloorMapLayout';
 /** PisellLayouts 命名空间另含 PisellFloorMapLayoutProps 等；平面图场景细粒度类型见上方 */
 export { default as PisellViewGrid } from './components/pisellViewGrid';

package/es/index.js

@@ -134,7 +134,7 @@ export { default as Div } from "./components/div";
 export { default as PisellBasicGrid } from "./components/PisellBasicGrid";
 // 类型已在 PisellLayouts 命名空间中导出
 export { default as PisellScrollView } from "./components/PisellScrollView";
-export { PisellFloorMapLayout, FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable } from "./components/pisellFloorMapLayout";
+export { PisellFloorMapLayout, FloorMapLayoutProvider, useFloorMapLayoutContext, EMPTY_FLOOR_MAP_LAYOUT_CONTEXT, mergeFloorMapLayoutPropsFromContext, getFigmaTableCardFromMerged, renderFigmaStyleTableCard, renderFigmaStyleRoundTableCard, getRenderItemByKindTable, getRenderItemByKindRoundTable, FloorMapImageElement, FLOOR_MAP_IMAGE_ELEMENT_KIND, renderFloorMapFallbackPlaceholder, isFloorMapImageElementKind } from "./components/pisellFloorMapLayout";
 /** PisellLayouts 命名空间另含 PisellFloorMapLayoutProps 等；平面图场景细粒度类型见上方 */
 export { default as PisellViewGrid } from "./components/pisellViewGrid";