@myoc/excalidraw 0.19.533 → 0.19.535

package/dist/dev/index.js

@@ -63,10 +63,10 @@ import {
   serializeAsJSON,
   strokeRectWithRotation_simple,
   zoomToFitBounds
-} from "./chunk-AR7I2OPB.js";
+} from "./chunk-X5K2WJMP.js";
 import {
   define_import_meta_env_default
-} from "./chunk-5CVRJMG3.js";
+} from "./chunk-K3XC3WHU.js";
 import {
   en_default
 } from "./chunk-SKCAT7JG.js";
@@ -10968,7 +10968,7 @@ var exportCanvas = async (type, elements, appState, files, {
     let blob = canvasToBlob(tempCanvas);
     if (appState.exportEmbedScene) {
       blob = blob.then(
-        (blob2) => import("./data/image-XXT3R6SF.js").then(
+        (blob2) => import("./data/image-MVVCJJVU.js").then(
           ({ encodePngMetadata: encodePngMetadata2 }) => encodePngMetadata2({
             blob: blob2,
             metadata: serializeAsJSON(elements, appState, files, "local")
@@ -24580,7 +24580,7 @@ var AppGifPlayback = class {
         }
       }
       if (didAdvanceFrame) {
-        this.app.scene.triggerUpdate();
+        this.app.imagePlaceholderUpdateEmitter.trigger();
       }
       if (shouldContinue) {
         this.playbackRaf = requestAnimationFrame(this.tick);
@@ -31512,10 +31512,13 @@ var GifPlaybackControls = ({
     0
   );
   const [gifGalleryScrollLeft, setGifGalleryScrollLeft] = React32.useState(0);
+  const [isGifGalleryDragging, setIsGifGalleryDragging] = React32.useState(false);
   const speedButtonRef = React32.useRef(null);
   const framesButtonRef = React32.useRef(null);
   const speedPickerRef = React32.useRef(null);
   const frameGalleryRef = React32.useRef(null);
+  const frameGalleryDragRef = React32.useRef(null);
+  const suppressNextFrameClickRef = React32.useRef(false);
   const [gifPopupPosition, setGifPopupPosition] = React32.useState(null);
   React32.useLayoutEffect(() => {
     const popup = liveAppState.openPopup;
@@ -31665,7 +31668,6 @@ var GifPlaybackControls = ({
       });
     };
     const wheelFrame = (event) => {
-      event.preventDefault();
       event.stopPropagation();
       commitFrame(frameIndex + (event.deltaY < 0 ? 1 : -1));
     };
@@ -31727,6 +31729,64 @@ var GifPlaybackControls = ({
       firstVisibleFrameIndex,
       lastVisibleFrameIndex
     );
+    const beginGalleryDrag = (event) => {
+      if (event.pointerType !== "mouse" || event.button !== 0) {
+        return;
+      }
+      frameGalleryDragRef.current = {
+        pointerId: event.pointerId,
+        startClientX: event.clientX,
+        startScrollLeft: event.currentTarget.scrollLeft,
+        didDrag: false
+      };
+      event.stopPropagation();
+    };
+    const updateGalleryDrag = (event) => {
+      const dragState = frameGalleryDragRef.current;
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+      const deltaX = event.clientX - dragState.startClientX;
+      if (!dragState.didDrag && Math.abs(deltaX) <= 3) {
+        return;
+      }
+      if (!dragState.didDrag) {
+        dragState.didDrag = true;
+        event.currentTarget.setPointerCapture?.(event.pointerId);
+        setIsGifGalleryDragging(true);
+      }
+      event.currentTarget.scrollLeft = dragState.startScrollLeft - deltaX;
+      setGifGalleryScrollLeft(event.currentTarget.scrollLeft);
+      event.preventDefault();
+      event.stopPropagation();
+    };
+    const endGalleryDrag = (event) => {
+      const dragState = frameGalleryDragRef.current;
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+      suppressNextFrameClickRef.current = dragState.didDrag;
+      frameGalleryDragRef.current = null;
+      if (event.currentTarget.hasPointerCapture?.(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      setIsGifGalleryDragging(false);
+      event.stopPropagation();
+    };
+    const cancelGalleryDrag = (event) => {
+      const dragState = frameGalleryDragRef.current;
+      if (!dragState || dragState.pointerId !== event.pointerId) {
+        return;
+      }
+      frameGalleryDragRef.current = null;
+      setIsGifGalleryDragging(false);
+      event.stopPropagation();
+    };
+    const stopGalleryTouchPropagation = (event) => {
+      if (event.pointerType !== "mouse") {
+        event.stopPropagation();
+      }
+    };
     return /* @__PURE__ */ jsxs58(
       "div",
       {
@@ -31772,7 +31832,6 @@ var GifPlaybackControls = ({
                   openPopup: liveAppState.openPopup === "gifSpeedPicker" ? null : "gifSpeedPicker"
                 }),
                 onWheel: (event) => {
-                  event.preventDefault();
                   event.stopPropagation();
                   stepSpeed(event.deltaY < 0 ? 1 : -1);
                 },
@@ -31844,7 +31903,9 @@ var GifPlaybackControls = ({
           liveAppState.openPopup === "gifFrameGallery" && /* @__PURE__ */ jsx112(
             "div",
             {
-              className: "gif-frame-gallery",
+              className: clsx48("gif-frame-gallery", {
+                "gif-frame-gallery--dragging": isGifGalleryDragging
+              }),
               style: {
                 ...gifPopupPosition ?? { left, top: galleryTop },
                 width: galleryViewportWidth
@@ -31858,8 +31919,25 @@ var GifPlaybackControls = ({
               onScroll: (event) => {
                 setGifGalleryScrollLeft(event.currentTarget.scrollLeft);
               },
+              onPointerDownCapture: stopGalleryTouchPropagation,
+              onPointerMoveCapture: stopGalleryTouchPropagation,
+              onPointerUpCapture: stopGalleryTouchPropagation,
+              onPointerCancelCapture: stopGalleryTouchPropagation,
+              onPointerDown: beginGalleryDrag,
+              onPointerMove: updateGalleryDrag,
+              onPointerUp: endGalleryDrag,
+              onPointerCancel: cancelGalleryDrag,
+              onLostPointerCapture: cancelGalleryDrag,
+              onClickCapture: (event) => {
+                if (suppressNextFrameClickRef.current) {
+                  suppressNextFrameClickRef.current = false;
+                  event.preventDefault();
+                  event.stopPropagation();
+                  return;
+                }
+                suppressNextFrameClickRef.current = false;
+              },
               onWheelCapture: (event) => {
-                event.preventDefault();
                 event.stopPropagation();
                 event.currentTarget.scrollLeft += event.deltaY;
                 setGifGalleryScrollLeft(event.currentTarget.scrollLeft);
@@ -46299,6 +46377,7 @@ var polyfill_default = polyfill;
 
 // index.tsx
 import {
+  configureGifWorkerUrl,
   getSceneVersion,
   hashElementsVersion as hashElementsVersion2,
   hashString as hashString2,
@@ -46683,6 +46762,7 @@ export {
   applyDarkModeFilter11 as applyDarkModeFilter,
   bumpVersion4 as bumpVersion,
   captureDragEventData,
+  configureGifWorkerUrl,
   convertToExcalidrawElements2 as convertToExcalidrawElements,
   defaultLang,
   elementsOverlappingBBox3 as elementsOverlappingBBox,