@waveform-playlist/ui-components 11.1.0 → 11.3.0

package/dist/index.mjs

@@ -334,7 +334,7 @@ var AutomaticScrollCheckbox = ({
 };
 
 // src/components/Channel.tsx
-import { useLayoutEffect as useLayoutEffect2 } from "react";
+import { useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 import styled9 from "styled-components";
 
 // src/wfpl-theme.ts
@@ -784,9 +784,17 @@ var Channel = (props) => {
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH, clipOriginX);
+  const dataVersionRef = useRef3(0);
+  const prevDataRef = useRef3(data);
+  if (prevDataRef.current !== data) {
+    dataVersionRef.current += 1;
+    prevDataRef.current = data;
+  }
+  const drawVersion = `${dataVersionRef.current}-${bits}-${waveHeight}-${devicePixelRatio}-${length}-${barWidth}-${barGap}-${drawMode}-${waveformColorToCss(waveOutlineColor)}-${waveformColorToCss(waveFillColor)}`;
   useLayoutEffect2(() => {
     const step = barWidth + barGap;
     for (const [canvasIdx, canvas] of canvasMapRef.current.entries()) {
+      if (canvas.dataset.drawVersion === drawVersion) continue;
       const globalPixelOffset = canvasIdx * MAX_CANVAS_WIDTH;
       const ctx = canvas.getContext("2d");
       const h2 = Math.floor(waveHeight / 2);
@@ -818,6 +826,7 @@ var Channel = (props) => {
             }
           }
         }
+        canvas.dataset.drawVersion = drawVersion;
       }
     }
   }, [
@@ -831,6 +840,7 @@ var Channel = (props) => {
     length,
     barWidth,
     barGap,
+    drawVersion,
     drawMode,
     visibleChunkIndices,
     index
@@ -1425,7 +1435,7 @@ var PianoRollChannel = ({
 };
 
 // src/components/Playhead.tsx
-import { useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useRef as useRef4, useEffect as useEffect3 } from "react";
 import styled16 from "styled-components";
 import { jsx as jsx13, jsxs as jsxs4 } from "react/jsx-runtime";
 var PlayheadLine = styled16.div.attrs((props) => ({
@@ -1485,8 +1495,8 @@ var PlayheadWithMarker = ({
   getAudioContextTime,
   getPlaybackTime
 }) => {
-  const containerRef = useRef3(null);
-  const animationFrameRef = useRef3(null);
+  const containerRef = useRef4(null);
+  const animationFrameRef = useRef4(null);
   useEffect3(() => {
     const updatePosition = () => {
       if (containerRef.current) {
@@ -1547,7 +1557,7 @@ var PlayheadWithMarker = ({
 
 // src/components/Playlist.tsx
 import styled17, { withTheme } from "styled-components";
-import { useRef as useRef4, useCallback as useCallback3 } from "react";
+import { useRef as useRef5, useCallback as useCallback3 } from "react";
 import { jsx as jsx14, jsxs as jsxs5 } from "react/jsx-runtime";
 var Wrapper3 = styled17.div`
   display: flex;
@@ -1619,7 +1629,7 @@ var Playlist = ({
   trackControlsSlots,
   timescaleGapHeight = 0
 }) => {
-  const scrollAreaRef = useRef4(null);
+  const scrollAreaRef = useRef5(null);
   const handleRef = useCallback3(
     (el) => {
       scrollAreaRef.current = el;
@@ -1683,7 +1693,7 @@ var Selection = ({
 };
 
 // src/components/LoopRegion.tsx
-import { useCallback as useCallback4, useRef as useRef5, useState } from "react";
+import { useCallback as useCallback4, useRef as useRef6, useState } from "react";
 import styled19 from "styled-components";
 import { Fragment as Fragment2, jsx as jsx16, jsxs as jsxs6 } from "react/jsx-runtime";
 var LoopRegionOverlayDiv = styled19.div.attrs((props) => ({
@@ -1835,9 +1845,9 @@ var LoopRegionMarkers = ({
   maxPosition = Infinity
 }) => {
   const [draggingMarker, setDraggingMarker] = useState(null);
-  const dragStartX = useRef5(0);
-  const dragStartPosition = useRef5(0);
-  const dragStartEnd = useRef5(0);
+  const dragStartX = useRef6(0);
+  const dragStartPosition = useRef6(0);
+  const dragStartEnd = useRef6(0);
   const width = Math.max(0, endPosition - startPosition);
   const handleMarkerMouseDown = useCallback4(
     (e, marker) => {
@@ -1958,8 +1968,8 @@ var TimescaleLoopRegion = ({
   maxPosition = Infinity
 }) => {
   const [, setIsCreating] = useState(false);
-  const createStartX = useRef5(0);
-  const containerRef = useRef5(null);
+  const createStartX = useRef6(0);
+  const containerRef = useRef6(null);
   const hasLoopRegion = endPosition > startPosition;
   const handleBackgroundMouseDown = useCallback4(
     (e) => {
@@ -2301,7 +2311,7 @@ var usePlayoutStatus = () => useContext8(PlayoutStatusContext);
 var usePlayoutStatusUpdate = () => useContext8(PlayoutStatusUpdateContext);
 
 // src/components/SpectrogramChannel.tsx
-import { useRef as useRef6, useEffect as useEffect6 } from "react";
+import { useRef as useRef7, useEffect as useEffect6 } from "react";
 import styled20 from "styled-components";
 import { MAX_CANVAS_WIDTH as MAX_CANVAS_WIDTH3 } from "@waveform-playlist/core";
 import { jsx as jsx23 } from "react/jsx-runtime";
@@ -2342,10 +2352,10 @@ var SpectrogramChannel = ({
 }) => {
   const channelIndex = channelIndexProp ?? index;
   const { canvasRef, canvasMapRef } = useChunkedCanvasRefs();
-  const registeredIdsRef = useRef6([]);
-  const transferredCanvasesRef = useRef6(/* @__PURE__ */ new WeakSet());
-  const workerApiRef = useRef6(workerApi);
-  const onCanvasesReadyRef = useRef6(onCanvasesReady);
+  const registeredIdsRef = useRef7([]);
+  const transferredCanvasesRef = useRef7(/* @__PURE__ */ new WeakSet());
+  const workerApiRef = useRef7(workerApi);
+  const onCanvasesReadyRef = useRef7(onCanvasesReady);
   const clipOriginX = useClipViewportOrigin();
   const visibleChunkIndices = useVisibleChunkIndices(length, MAX_CANVAS_WIDTH3, clipOriginX);
   useEffect6(() => {
@@ -2576,7 +2586,7 @@ var SmartChannel = ({
 };
 
 // src/components/SpectrogramLabels.tsx
-import { useRef as useRef7, useLayoutEffect as useLayoutEffect4 } from "react";
+import { useRef as useRef8, useLayoutEffect as useLayoutEffect4 } from "react";
 import styled21 from "styled-components";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var LABELS_WIDTH = 72;
@@ -2628,7 +2638,7 @@ var SpectrogramLabels = ({
   renderMode = "spectrogram",
   hasClipHeaders = false
 }) => {
-  const canvasRef = useRef7(null);
+  const canvasRef = useRef8(null);
   const devicePixelRatio = useDevicePixelRatio();
   const spectrogramHeight = renderMode === "both" ? Math.floor(waveHeight / 2) : waveHeight;
   const totalHeight = numChannels * waveHeight;
@@ -3245,7 +3255,7 @@ var SliderWrapper = styled32.label`
 `;
 
 // src/components/TrackMenu.tsx
-import React20, { useState as useState6, useEffect as useEffect7, useRef as useRef8, useCallback as useCallback5 } from "react";
+import React20, { useState as useState6, useEffect as useEffect7, useRef as useRef9, useCallback as useCallback5 } from "react";
 import { createPortal } from "react-dom";
 import styled33 from "styled-components";
 import { jsx as jsx35, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -3292,8 +3302,8 @@ var TrackMenu = ({ items: itemsProp }) => {
   const close = useCallback5(() => setOpen(false), []);
   const items = typeof itemsProp === "function" ? itemsProp(close) : itemsProp;
   const [dropdownPos, setDropdownPos] = useState6({ top: 0, left: 0 });
-  const buttonRef = useRef8(null);
-  const dropdownRef = useRef8(null);
+  const buttonRef = useRef9(null);
+  const dropdownRef = useRef9(null);
   const updatePosition = useCallback5(() => {
     if (!buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();