dialkit 1.4.0 → 1.4.1

package/dist/vue/index.js

@@ -2106,6 +2106,10 @@ var ICON_PAUSE = [
   "M16.75 3C15.2312 3 14 4.23122 14 5.75V18.25C14 19.7688 15.2312 21 16.75 21H17.25C18.7688 21 20 19.7688 20 18.25V5.75C20 4.23122 18.7688 3 17.25 3H16.75Z"
 ];
 var ICON_PLAY = "M9.24394 2.36758C7.41419 1.18362 5 2.49701 5 4.67639V19.3238C5 21.5032 7.41419 22.8166 9.24394 21.6326L20.5624 14.3089C22.2371 13.2253 22.2372 10.775 20.5624 9.69129L9.24394 2.36758Z";
+var ICON_REPLAY = [
+  "M12 2.5C17.2466 2.50016 21.5 6.7534 21.5 12C21.5 17.2466 17.2466 21.4998 12 21.5C7.52191 21.5 3.76987 18.4025 2.76465 14.2344C2.63517 13.6975 2.96508 13.1578 3.50195 13.0283C4.03883 12.8988 4.57851 13.2288 4.70801 13.7656C5.5016 17.0563 8.46701 19.5 12 19.5C16.142 19.4998 19.5 16.142 19.5 12C19.5 7.85796 16.142 4.50016 12 4.5C9.32981 4.5 6.98389 5.89541 5.6543 8H7.5C8.05228 8 8.5 8.44772 8.5 9C8.5 9.55228 8.05228 10 7.5 10H3.5C2.94772 10 2.5 9.55228 2.5 9V5C2.5 4.44772 2.94772 4 3.5 4C4.05228 4 4.5 4.44772 4.5 5V6.16797C6.2376 3.93677 8.95063 2.5 12 2.5Z",
+  "M10 9.94043C10 9.33379 10.6826 8.97849 11.1797 9.32617L14.1221 11.3857C14.5486 11.6843 14.5486 12.3157 14.1221 12.6143L11.1797 14.6738C10.6826 15.0215 10 14.6662 10 14.0596V9.94043Z"
+];
 var ICON_TIMELINE = [
   "M18.868 10C20.8517 10.0003 22.2886 11.8914 21.7577 13.8027L20.369 18.8027C20.0083 20.1012 18.826 20.9999 17.4784 21H6.51941C5.17179 21 3.98948 20.1012 3.62878 18.8027L2.24011 13.8027C1.7092 11.8913 3.14603 10.0003 5.12976 10H18.868Z",
   "M18.9989 6.5C19.5511 6.50007 19.9989 6.94776 19.9989 7.5C19.9989 8.05224 19.5511 8.49993 18.9989 8.5H4.9989C4.44661 8.5 3.9989 8.05228 3.9989 7.5C3.9989 6.94772 4.44661 6.5 4.9989 6.5H18.9989Z",
@@ -4786,8 +4790,11 @@ var SECOND_TICK_STEPS = [
 ];
 var MIN_TIMELINE_MAX_ZOOM = 8;
 var PLAYHEAD_FLAG_WIDTH = 52;
+var PLAYHEAD_FLAG_EDGE_OVERHANG = 1;
 var POPOVER_WIDTH = 280;
 var ZOOM_DRAG_DISTANCE = 180;
+var DEFAULT_DOCK_MAX_HEIGHT = 400;
+var MIN_DOCK_MAX_HEIGHT = 120;
 var DialTimeline = defineComponent19({
   name: "DialKitTimeline",
   props: {
@@ -4805,10 +4812,36 @@ var DialTimeline = defineComponent19({
     const timelines = ref15(TimelineStore.getTimelines());
     const dockVisible = ref15(TimelineUiStore.getVisible());
     const mounted = ref15(false);
+    const dockMaxHeight = ref15(DEFAULT_DOCK_MAX_HEIGHT);
+    const dockRef = ref15(null);
     const controllerId = /* @__PURE__ */ Symbol("dialkit-timeline-visibility");
     let unsubscribeTimelines;
     let unsubscribeVisibility;
     let unregisterController;
+    let resizeCleanup = null;
+    const handleResizePointerDown = (event) => {
+      if (!dockRef.value) return;
+      event.preventDefault();
+      event.stopPropagation();
+      resizeCleanup?.();
+      const pointerY = event.clientY;
+      const startHeight = dockRef.value.getBoundingClientRect().height;
+      const move = (next) => {
+        next.preventDefault();
+        const viewportMax = Math.max(MIN_DOCK_MAX_HEIGHT, window.innerHeight - 24);
+        dockMaxHeight.value = clamp(startHeight + pointerY - next.clientY, MIN_DOCK_MAX_HEIGHT, viewportMax);
+      };
+      const finish = () => {
+        window.removeEventListener("pointermove", move);
+        window.removeEventListener("pointerup", finish);
+        window.removeEventListener("pointercancel", finish);
+        resizeCleanup = null;
+      };
+      window.addEventListener("pointermove", move, { passive: false });
+      window.addEventListener("pointerup", finish);
+      window.addEventListener("pointercancel", finish);
+      resizeCleanup = finish;
+    };
     onMounted13(() => {
       mounted.value = true;
       unsubscribeVisibility = TimelineUiStore.subscribe(() => {
@@ -4835,6 +4868,7 @@ var DialTimeline = defineComponent19({
       unregisterController?.();
       unsubscribeTimelines?.();
       unsubscribeVisibility?.();
+      resizeCleanup?.();
     });
     return () => {
       if (!props.productionEnabled || !mounted.value || timelines.value.length === 0) return null;
@@ -4844,7 +4878,19 @@ var DialTimeline = defineComponent19({
           "data-theme": props.theme,
           hidden: !dockVisible.value
         }, [
-          h19("div", { class: "dialkit-timeline-dock" }, timelines.value.map((meta) => h19(TimelineSection, {
+          h19("div", {
+            class: "dialkit-timeline-resize-handle",
+            role: "separator",
+            "aria-label": "Resize timeline height",
+            "aria-orientation": "horizontal",
+            title: "Drag to resize timeline",
+            onPointerdown: handleResizePointerDown
+          }),
+          h19("div", {
+            ref: dockRef,
+            class: "dialkit-timeline-dock",
+            style: { maxHeight: `min(${dockMaxHeight.value}px, calc(100vh - 24px))` }
+          }, timelines.value.map((meta) => h19(TimelineSection, {
             key: meta.id,
             meta,
             defaultOpen: props.defaultOpen,
@@ -4885,6 +4931,23 @@ var PlayPauseButton = defineComponent19({
     };
   }
 });
+var ReplayButton = defineComponent19({
+  props: { onReplay: { type: Function, required: true } },
+  setup(props) {
+    return () => h19("button", {
+      class: "dialkit-toolbar-add",
+      title: "Replay",
+      "aria-label": "Replay",
+      onClick: props.onReplay
+    }, [
+      h19(
+        "svg",
+        { viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true" },
+        ICON_REPLAY.map((path) => h19("path", { d: path, fill: "currentColor" }))
+      )
+    ]);
+  }
+});
 var iconStyle = {
   position: "absolute",
   inset: 0,
@@ -4961,8 +5024,6 @@ var TimelinePlayheadFlag = defineComponent19({
     viewEnd: { type: Number, required: true },
     laneWidth: { type: Number, required: true },
     ruler: Object,
-    headerClearStart: { type: Number, required: true },
-    headerClearEnd: { type: Number, required: true },
     onResetView: { type: Function, required: true }
   },
   setup(props) {
@@ -4990,13 +5051,20 @@ var TimelinePlayheadFlag = defineComponent19({
     return () => {
       if (time.value < props.viewStart || time.value > props.viewEnd || props.laneWidth <= 0) return null;
       const x = clamp((time.value - props.viewStart) * props.pxPerSecond, 0, props.laneWidth);
-      const left = x - PLAYHEAD_FLAG_WIDTH / 2;
-      const placement = left >= props.headerClearStart && left + PLAYHEAD_FLAG_WIDTH <= props.headerClearEnd ? "raised" : "lowered";
+      const flagCenter = clamp(
+        x,
+        PLAYHEAD_FLAG_WIDTH / 2 - PLAYHEAD_FLAG_EDGE_OVERHANG,
+        props.laneWidth - PLAYHEAD_FLAG_WIDTH / 2 + PLAYHEAD_FLAG_EDGE_OVERHANG
+      );
+      const flagOffset = flagCenter - x;
+      const edge = flagOffset > 0.5 ? "start" : flagOffset < -0.5 ? "end" : "center";
       return h19("div", {
         class: "dialkit-timeline-playhead-control",
-        "data-edge": "center",
-        "data-placement": placement,
-        style: { left: `calc(var(--dial-timeline-label-w) + ${x}px)` },
+        "data-edge": edge,
+        style: {
+          left: `calc(var(--dial-timeline-label-w) + ${x}px)`,
+          "--dial-timeline-playhead-flag-offset": `${flagOffset}px`
+        },
         role: "slider",
         "aria-label": "Timeline current time",
         "aria-valuemin": 0,
@@ -5037,8 +5105,10 @@ var TimelinePlayheadFlag = defineComponent19({
           cleanup = finish;
         }
       }, [
-        h19("div", { class: "dialkit-timeline-playhead-flag" }, time.value.toFixed(2)),
-        h19("div", { class: "dialkit-timeline-playhead-stem" })
+        h19("div", { class: "dialkit-timeline-playhead-stem" }),
+        h19("div", { class: "dialkit-timeline-playhead-anchor" }, [
+          h19("div", { class: "dialkit-timeline-playhead-flag" }, time.value.toFixed(2))
+        ])
       ]);
     };
   }
@@ -5070,33 +5140,21 @@ var TimelineSection = defineComponent19({
     const presets = ref15(DialStore.getPresets(props.meta.id));
     const activePresetId = ref15(DialStore.getActivePresetId(props.meta.id));
     const laneAreaRef = ref15(null);
-    const titleRef = ref15(null);
-    const actionsRef = ref15(null);
+    const horizontalScrollRef = ref15(null);
     const laneWidth = ref15(0);
-    const flagClearRange = ref15({ start: 0, end: 0 });
     let unsubscribeValues;
     let resizeObserver;
     const measure = () => {
-      if (!laneAreaRef.value || !titleRef.value || !actionsRef.value) return;
-      const ruler = laneAreaRef.value.getBoundingClientRect();
-      const title = titleRef.value.getBoundingClientRect();
-      const actions = actionsRef.value.getBoundingClientRect();
-      laneWidth.value = ruler.width;
-      flagClearRange.value = {
-        start: Math.round(title.right + 10 - ruler.left),
-        end: Math.round(actions.left - 10 - ruler.left)
-      };
+      if (laneAreaRef.value) laneWidth.value = laneAreaRef.value.getBoundingClientRect().width;
     };
     const connectMeasure = async () => {
       resizeObserver?.disconnect();
       if (!open.value) return;
       await nextTick4();
-      if (!laneAreaRef.value || !titleRef.value || !actionsRef.value) return;
+      if (!laneAreaRef.value) return;
       measure();
       resizeObserver = new ResizeObserver(measure);
       resizeObserver.observe(laneAreaRef.value);
-      resizeObserver.observe(titleRef.value);
-      resizeObserver.observe(actionsRef.value);
     };
     onMounted13(() => {
       unsubscribeValues = DialStore.subscribe(props.meta.id, () => {
@@ -5128,6 +5186,13 @@ var TimelineSection = defineComponent19({
     watch8([() => props.meta.duration, zoom], () => {
       viewStart.value = clampViewStart(viewStart.value, props.meta.duration, props.meta.duration / zoom.value);
     });
+    watch8([open, pxPerSecond, safeViewStart], async () => {
+      await nextTick4();
+      const scroller = horizontalScrollRef.value;
+      if (!scroller || pxPerSecond.value <= 0) return;
+      const next = safeViewStart.value * pxPerSecond.value;
+      if (Math.abs(scroller.scrollLeft - next) > 0.5) scroller.scrollLeft = next;
+    });
     const centerViewAt = (time) => {
       if (zoom.value <= 1 || props.meta.duration <= 0) return;
       const duration = props.meta.duration / zoom.value;
@@ -5137,6 +5202,26 @@ var TimelineSection = defineComponent19({
       zoom.value = 1;
       viewStart.value = 0;
     };
+    const handleReplay = () => {
+      viewStart.value = 0;
+      TimelineStore.replay(props.meta.id);
+    };
+    const handleHorizontalScroll = (event) => {
+      if (pxPerSecond.value <= 0) return;
+      viewStart.value = clampViewStart(
+        event.currentTarget.scrollLeft / pxPerSecond.value,
+        props.meta.duration,
+        visibleDuration.value
+      );
+    };
+    const handleTimelineWheel = (event) => {
+      const scroller = horizontalScrollRef.value;
+      if (!scroller || zoom.value <= 1) return;
+      const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.shiftKey ? event.deltaY : 0;
+      if (delta === 0) return;
+      event.preventDefault();
+      scroller.scrollLeft += delta;
+    };
     let zoomDrag = null;
     let rulerScrub = null;
     let trackScrub = null;
@@ -5320,7 +5405,7 @@ var TimelineSection = defineComponent19({
     return () => h19("div", { class: "dialkit-timeline-section" }, [
       h19("div", { class: "dialkit-timeline-header", "data-open": open.value || void 0 }, [
         h19("div", { class: "dialkit-timeline-identity" }, [
-          h19("span", { ref: titleRef, class: "dialkit-timeline-title" }, props.meta.name)
+          h19("span", { class: "dialkit-timeline-title" }, props.meta.name)
         ]),
         !open.value ? h19(TimelineOverview, {
           id: props.meta.id,
@@ -5329,8 +5414,9 @@ var TimelineSection = defineComponent19({
           viewEnd: viewEnd.value,
           onNavigate: centerViewAt
         }) : null,
-        h19("div", { ref: actionsRef, class: "dialkit-timeline-actions" }, [
+        h19("div", { class: "dialkit-timeline-actions" }, [
           h19(PlayPauseButton, { id: props.meta.id }),
+          h19(ReplayButton, { onReplay: handleReplay }),
           h19("button", { class: "dialkit-toolbar-add", title: "Add timeline version", "aria-label": "Add timeline version", onClick: handleAddPreset }, [
             h19(
               "svg",
@@ -5364,6 +5450,7 @@ var TimelineSection = defineComponent19({
       ]),
       open.value ? h19("div", {
         class: "dialkit-timeline-body",
+        onWheel: handleTimelineWheel,
         onPointerdown: (event) => {
           const target = event.target;
           if (target.closest(".dialkit-timeline-label, button")) return;
@@ -5457,11 +5544,17 @@ var TimelineSection = defineComponent19({
           viewEnd: viewEnd.value,
           laneWidth: laneWidth.value,
           ruler: laneAreaRef.value ?? void 0,
-          headerClearStart: flagClearRange.value.start,
-          headerClearEnd: flagClearRange.value.end,
           onResetView: resetView
         }) : null
-      ])]) : null,
+      ]), zoom.value > 1 ? h19("div", { class: "dialkit-timeline-scroll-row" }, [
+        h19("div", { class: "dialkit-timeline-label" }),
+        h19("div", {
+          ref: horizontalScrollRef,
+          class: "dialkit-timeline-horizontal-scroll",
+          "aria-label": "Timeline horizontal scroll",
+          onScroll: handleHorizontalScroll
+        }, [h19("div", { style: { width: `${laneWidth.value * zoom.value}px` } })])
+      ]) : null]) : null,
       popover.value ? h19(ClipPopover, {
         panelId: props.meta.id,
         popover: popover.value,