@ldelia/react-media 0.6.1 → 0.6.3

package/dist/components/timeline/RangeSelectorCanvas/RangeSelectorCanvas.js

@@ -10,12 +10,25 @@ const OverlayCanvas = styled.canvas `
   height: 100%;
   color: cadetblue;
   cursor: pointer;
+  z-index: 2; // Ensure this canvas is on top of the TimeLineValue, otherwise we won't be able to change the range until the current TimelineValue position
 `;
+var DragMode;
+(function (DragMode) {
+    DragMode[DragMode["NONE"] = 0] = "NONE";
+    DragMode[DragMode["CREATE"] = 1] = "CREATE";
+    DragMode[DragMode["RESIZE_START"] = 2] = "RESIZE_START";
+    DragMode[DragMode["RESIZE_END"] = 3] = "RESIZE_END";
+})(DragMode || (DragMode = {}));
+const RESIZE_HANDLE_WIDTH = 10; // Width in pixels for the resize handle detection zone
 const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
     const canvasRef = useRef(null);
     const zoomContextValue = useContext(ZoomContext);
-    const [selection, setSelection] = useState({ start: null, end: null });
-    const [isDragging, setIsDragging] = useState(false);
+    const [selection, setSelection] = useState({
+        start: null,
+        end: null,
+    });
+    const [dragMode, setDragMode] = useState(DragMode.NONE);
+    const [cursorStyle, setCursorStyle] = useState('pointer');
     const getMousePointerPixelPosition = (e) => {
         const canvas = canvasRef.current;
         let rect = canvas.getBoundingClientRect();
@@ -32,66 +45,130 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
         context.fillRect(pixelX0, 0, pixelX1 - pixelX0, context.canvas.height);
         context.globalAlpha = 1.0;
     };
-    // Handle mouse down (start of selection)
+    // Check if mouse is near the start or end edge of the selection
+    const isNearSelectionEdge = (pixel) => {
+        if (selectedRange.length !== 2)
+            return { isNear: false, edge: null };
+        const startPixel = secondsToPixel(zoomContextValue, selectedRange[0]);
+        const endPixel = secondsToPixel(zoomContextValue, selectedRange[1]);
+        if (Math.abs(pixel - startPixel) <= RESIZE_HANDLE_WIDTH) {
+            return { isNear: true, edge: 'start' };
+        }
+        else if (Math.abs(pixel - endPixel) <= RESIZE_HANDLE_WIDTH) {
+            return { isNear: true, edge: 'end' };
+        }
+        return { isNear: false, edge: null };
+    };
+    // Handle mouse move for cursor style when not dragging
+    const handleMouseOver = (event) => {
+        const pixel = getMousePointerPixelPosition(event);
+        const { isNear } = isNearSelectionEdge(pixel);
+        if (isNear) {
+            setCursorStyle('col-resize');
+        }
+        else {
+            setCursorStyle('pointer');
+        }
+    };
+    // Handle mouse down (start of selection or resize)
     const handleMouseDown = (event) => {
         const canvas = canvasRef.current;
         if (!canvas)
             return;
         const pixel = getMousePointerPixelPosition(event);
         const second = pixelToSeconds(zoomContextValue, pixel);
-        setSelection({ start: second, end: null });
-        setIsDragging(true);
+        const { isNear, edge } = isNearSelectionEdge(pixel);
+        if (isNear && edge === 'start') {
+            setDragMode(DragMode.RESIZE_START);
+            setSelection({ start: selectedRange[0], end: selectedRange[1] });
+        }
+        else if (isNear && edge === 'end') {
+            setDragMode(DragMode.RESIZE_END);
+            setSelection({ start: selectedRange[0], end: selectedRange[1] });
+        }
+        else {
+            setDragMode(DragMode.CREATE);
+            setSelection({ start: second, end: null });
+        }
     };
-    // Handle mouse up (end of selection or single click)
+    // Handle mouse up (end of selection/resize or single click)
     const handleMouseUp = (event) => {
         const canvas = canvasRef.current;
         if (!canvas)
             return;
         const pixel = getMousePointerPixelPosition(event);
         const seconds = pixelToSeconds(zoomContextValue, pixel);
-        if (isDragging) {
-            setSelection(prevSelection => {
-                if (prevSelection.start === seconds) {
-                    onChange(seconds);
-                    return { start: null, end: null };
-                }
-                else {
-                    const curatedSelection = seconds < prevSelection.start ? [seconds, prevSelection.start] : [prevSelection.start, seconds];
-                    onRangeChange(curatedSelection);
-                    return {
-                        start: curatedSelection[0],
-                        end: curatedSelection[1],
-                    };
-                }
-            });
+        if (dragMode === DragMode.CREATE) {
+            if (selection.start === seconds) {
+                // Single click
+                onChange(seconds);
+                setSelection({ start: null, end: null });
+            }
+            else {
+                // Created a new selection
+                const curatedSelection = seconds < selection.start
+                    ? [seconds, selection.start]
+                    : [selection.start, seconds];
+                onRangeChange(curatedSelection);
+                setSelection({
+                    start: curatedSelection[0],
+                    end: curatedSelection[1],
+                });
+            }
+        }
+        else if (dragMode === DragMode.RESIZE_START ||
+            dragMode === DragMode.RESIZE_END) {
+            // Resizing completed
+            if (selection.start !== null && selection.end !== null) {
+                const curatedSelection = [
+                    Math.min(selection.start, selection.end),
+                    Math.max(selection.start, selection.end),
+                ];
+                onRangeChange(curatedSelection);
+            }
         }
-        setIsDragging(false);
+        setDragMode(DragMode.NONE);
     };
     // Handle mouse move (for dragging)
     const handleMouseMove = (event) => {
-        if (!isDragging)
-            return; // the mouse is moving over the canvas but the user has not clicked yet
+        // Update cursor first (always check this regardless of drag state)
+        handleMouseOver(event);
+        if (dragMode === DragMode.NONE)
+            return;
         const canvas = canvasRef.current;
         if (!canvas)
             return;
         const pixel = getMousePointerPixelPosition(event);
         const seconds = pixelToSeconds(zoomContextValue, pixel);
-        setSelection(prevSelection => {
-            return {
+        if (dragMode === DragMode.CREATE) {
+            setSelection((prevSelection) => ({
+                start: prevSelection.start,
+                end: seconds,
+            }));
+        }
+        else if (dragMode === DragMode.RESIZE_START) {
+            setSelection((prevSelection) => ({
+                start: seconds,
+                end: prevSelection.end,
+            }));
+        }
+        else if (dragMode === DragMode.RESIZE_END) {
+            setSelection((prevSelection) => ({
                 start: prevSelection.start,
                 end: seconds,
-            };
-        });
+            }));
+        }
     };
     useEffect(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
         canvas.width = canvas.offsetWidth;
         canvas.height = canvas.offsetHeight;
-        if (selectedRange.length !== 2 || zoomContextValue.timelineWrapperWidth === 0)
+        if (selectedRange.length !== 2 ||
+            zoomContextValue.timelineWrapperWidth === 0)
             return;
         drawRect(secondsToPixel(zoomContextValue, selectedRange[0]), secondsToPixel(zoomContextValue, selectedRange[1]));
-    }, [selectedRange]);
+    }, [selectedRange, zoomContextValue]);
     useEffect(() => {
         const canvas = canvasRef.current;
         // https://stackoverflow.com/questions/8696631/canvas-drawings-like-lines-are-blurry
@@ -101,6 +178,6 @@ const RangeSelectorCanvas = ({ selectedRange, onChange, onRangeChange, }) => {
             return;
         drawRect(secondsToPixel(zoomContextValue, selection.start), secondsToPixel(zoomContextValue, selection.end));
     }, [selection, zoomContextValue]);
-    return (React.createElement(OverlayCanvas, { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, className: 'media-timeline-range-selector-canvas' }));
+    return (React.createElement(OverlayCanvas, { ref: canvasRef, onMouseDown: handleMouseDown, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, style: { cursor: cursorStyle }, className: 'media-timeline-range-selector-canvas' }));
 };
 export default React.memo(RangeSelectorCanvas);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ldelia/react-media",
-  "version": "0.6.1",
+  "version": "0.6.3",
   "description": "A React components collection for media-related features.",
   "private": false,
   "keywords": [