@max-ts/kit 1.10.3 → 1.10.4

package/lib/components/ScalableContainer/ScalableContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalableContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/ScalableContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,iBAAS,iBAAiB,CAAC,EAC1B,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,WAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,sBAAsB,+BAiGxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"ScalableContainer.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/ScalableContainer.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC;AAGtD,iBAAS,iBAAiB,CAAC,EAC1B,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,WAAmB,EACnB,cAAc,EACd,iBAAiB,EACjB,OAAO,EACP,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACR,EAAE,sBAAsB,+BAmGxB;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/lib/components/ScalableContainer/useLogic.d.ts

@@ -6,6 +6,7 @@ export declare function useLogic({ initialScale, minScale, maxScale, onScaleChan
         transition: string;
     };
     cursor: string;
+    handleClickCapture: (event: React.MouseEvent<HTMLDivElement>) => void;
     handlePointerDown: (event: React.PointerEvent<HTMLDivElement>) => void;
     handlePointerEnd: (event: React.PointerEvent<HTMLDivElement>) => void;
     handlePointerMove: (event: React.PointerEvent<HTMLDivElement>) => void;

package/lib/components/ScalableContainer/useLogic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,sBAAsB,EACtB,MAAM,SAAS,CAAC;AAOjB,KAAK,cAAc,GAAG,IAAI,CACzB,sBAAsB,EACpB,cAAc,GACd,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,mBAAmB,CACrB,CAAC;AAuBF,wBAAgB,QAAQ,CAAC,EACxB,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,cAAc,EACd,iBAAiB,GACjB,EAAE,cAAc;;;;;;+BAqDP,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;8BAyClC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;+BAnBlC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;;6BAmDlC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;8BAbhC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;;;;;;EAmGzC"}
+{"version":3,"file":"useLogic.d.ts","sourceRoot":"","sources":["../../../src/components/ScalableContainer/useLogic.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAEX,sBAAsB,EACtB,MAAM,SAAS,CAAC;AAQjB,KAAK,cAAc,GAAG,IAAI,CACzB,sBAAsB,EACpB,cAAc,GACd,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,mBAAmB,CACrB,CAAC;AAuBF,wBAAgB,QAAQ,CAAC,EACxB,YAAgB,EAChB,QAAc,EACd,QAAY,EACZ,cAAc,EACd,iBAAiB,GACjB,EAAE,cAAc;;;;;;gCAyIP,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;+BAjFhC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;8BAyDlC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;+BAjClC,KAAK,CAAC,YAAY,CAAC,cAAc,CAAC;;6BAiFlC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;8BAbhC,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;;;;;;;EAoGzC"}

package/lib/index.mjs

@@ -4542,6 +4542,7 @@ const DEFAULT_POSITION = {
     y: 0
 };
 const OVERLAY_TIMEOUT = 1500;
+const DRAG_THRESHOLD = 4;
 const ZOOM_FACTOR = 1.5;
 const WHEEL_ZOOM_FACTOR = 0.05;
 function clampScale(value, minScale, maxScale) {
@@ -4554,7 +4555,7 @@ function getDistance(firstTouch, secondTouch) {
 }
 function shouldSkipDragStart(target) {
     if (!(target instanceof Element)) return false;
-    return Boolean(target.closest('button, a, input, textarea, select, label, path, summary, [role="button"], [contenteditable="true"]'));
+    return Boolean(target.closest('button, a, input, textarea, select, label, path, circle, ellipse, polygon, polyline, line, summary, [role="button"], [contenteditable="true"], [data-scalable-container-interactive]'));
 }
 function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1, maxScale = 4, onScaleChanged, onPositionChanged }) {
     const initialClampedScale = clampScale(initialScale, minScale, maxScale);
@@ -4565,6 +4566,9 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
     const scaleRef = useRef(initialClampedScale);
     const positionRef = useRef(DEFAULT_POSITION);
     const dragStartRef = useRef(DEFAULT_POSITION);
+    const dragOriginRef = useRef(DEFAULT_POSITION);
+    const isDraggingRef = useRef(false);
+    const didDragRef = useRef(false);
     const activePointersRef = useRef(new Map());
     const initialPinchDistanceRef = useRef(0);
     const initialPinchScaleRef = useRef(initialClampedScale);
@@ -4608,13 +4612,15 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
     const handlePointerDown = useCallback((event)=>{
         if ('mouse' === event.pointerType && 0 !== event.button) return;
         if (shouldSkipDragStart(event.target)) return;
-        event.currentTarget.setPointerCapture(event.pointerId);
         activePointersRef.current.set(event.pointerId, {
             x: event.clientX,
             y: event.clientY
         });
         if (1 === activePointersRef.current.size) {
-            setIsDragging(true);
+            dragOriginRef.current = {
+                x: event.clientX,
+                y: event.clientY
+            };
             dragStartRef.current = {
                 x: event.clientX - positionRef.current.x,
                 y: event.clientY - positionRef.current.y
@@ -4627,10 +4633,21 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
             x: event.clientX,
             y: event.clientY
         });
-        if (1 === activePointersRef.current.size) setPosition({
-            x: event.clientX - dragStartRef.current.x,
-            y: event.clientY - dragStartRef.current.y
-        });
+        if (1 === activePointersRef.current.size) {
+            if (!isDraggingRef.current) {
+                const deltaX = event.clientX - dragOriginRef.current.x;
+                const deltaY = event.clientY - dragOriginRef.current.y;
+                if (Math.sqrt(deltaX * deltaX + deltaY * deltaY) < DRAG_THRESHOLD) return;
+                event.currentTarget.setPointerCapture(event.pointerId);
+                isDraggingRef.current = true;
+                didDragRef.current = true;
+                setIsDragging(true);
+            }
+            setPosition({
+                x: event.clientX - dragStartRef.current.x,
+                y: event.clientY - dragStartRef.current.y
+            });
+        }
     }, [
         setPosition
     ]);
@@ -4638,12 +4655,23 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
         activePointersRef.current.delete(event.pointerId);
         const remainingPointer = activePointersRef.current.values().next().value;
         if (remainingPointer) {
+            dragOriginRef.current = remainingPointer;
             dragStartRef.current = {
                 x: remainingPointer.x - positionRef.current.x,
                 y: remainingPointer.y - positionRef.current.y
             };
-            setIsDragging(true);
-        } else setIsDragging(false);
+        }
+        isDraggingRef.current = false;
+        setIsDragging(false);
+        window.setTimeout(()=>{
+            didDragRef.current = false;
+        });
+    }, []);
+    const handleClickCapture = useCallback((event)=>{
+        if (!didDragRef.current) return;
+        event.preventDefault();
+        event.stopPropagation();
+        didDragRef.current = false;
     }, []);
     const handleTouchStart = useCallback((event)=>{
         if (2 !== event.touches.length) return;
@@ -4706,6 +4734,7 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
             transition: isDragging ? 'none' : 'transform 0.1s ease-out'
         },
         cursor: isDragging ? 'grabbing' : 'grab',
+        handleClickCapture,
         handlePointerDown,
         handlePointerEnd,
         handlePointerMove,
@@ -4721,7 +4750,7 @@ function ScalableContainer_useLogic_useLogic({ initialScale = 1, minScale = 0.1,
     };
 }
 function ScalableContainer({ initialScale = 1, minScale = 0.1, maxScale = 4, showToolbar = false, onScaleChanged, onPositionChanged, onWheel, className, children, style, ...props }) {
-    const { contentStyle, cursor, handlePointerDown, handlePointerEnd, handlePointerMove, handleTouchEnd, handleTouchMove, handleTouchStart, modifierKey, reset, showOverlay, viewportRef, zoomIn, zoomOut } = ScalableContainer_useLogic_useLogic({
+    const { contentStyle, cursor, handleClickCapture, handlePointerDown, handlePointerEnd, handlePointerMove, handleTouchEnd, handleTouchMove, handleTouchStart, modifierKey, reset, showOverlay, viewportRef, zoomIn, zoomOut } = ScalableContainer_useLogic_useLogic({
         initialScale,
         minScale,
         maxScale,
@@ -4794,6 +4823,7 @@ function ScalableContainer({ initialScale = 1, minScale = 0.1, maxScale = 4, sho
                 "data-slot": "scalable-container-content",
                 className: ScalableContainer_styles_css_content,
                 style: contentStyle,
+                onClickCapture: handleClickCapture,
                 onPointerDown: handlePointerDown,
                 onPointerMove: handlePointerMove,
                 onPointerUp: handlePointerEnd,

package/lib/stories/ScalableContainer.stories.d.ts

@@ -11,4 +11,5 @@ export default _default;
 export declare function Basic(): import("react").JSX.Element;
 export declare function WithToolbar(): import("react").JSX.Element;
 export declare function InsideScrollablePage(): import("react").JSX.Element;
+export declare function InteractiveContent(): import("react").JSX.Element;
 //# sourceMappingURL=ScalableContainer.stories.d.ts.map

package/lib/stories/ScalableContainer.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScalableContainer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ScalableContainer.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAGjD,wBAO2C;AAqB3C,wBAAgB,KAAK,gCAYpB;AAED,wBAAgB,WAAW,gCA2B1B;AAED,wBAAgB,oBAAoB,gCAoBnC"}
+{"version":3,"file":"ScalableContainer.stories.d.ts","sourceRoot":"","sources":["../../src/stories/ScalableContainer.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;;;;;;;;;AAGjD,wBAO2C;AAqB3C,wBAAgB,KAAK,gCAYpB;AAED,wBAAgB,WAAW,gCA2B1B;AAED,wBAAgB,oBAAoB,gCAoBnC;AAED,wBAAgB,kBAAkB,gCAyCjC"}

package/lib/styles.css

@@ -2713,7 +2713,7 @@ a.outline__1af895x4:hover {
 .style__uma6hu0 {
   padding: var(--spacing-1) var(--spacing-2);
   width: 100%;
-  font-weight: var(--fontWeight-semibold);
+  font-weight: var(--fontWeight-medium);
   font-size: var(--fontSize-sm);
   overflow-wrap: break-word;
   background-color: var(--colors-background-paper);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@max-ts/kit",
-  "version": "1.10.3",
+  "version": "1.10.4",
   "main": "./lib/index.js",
   "module": "./lib/index.mjs",
   "types": "./lib/index.d.ts",