@canlooks/can-ui 0.0.42 → 0.0.43

package/dist/esm/utils/gesture.d.ts

@@ -0,0 +1,69 @@
+import React, { HTMLAttributes, MouseEventHandler } from 'react';
+type Point = [number, number];
+export type DragInfo<D = any> = {
+    /** 开始位置 */
+    start: Point;
+    /** 当前位置 */
+    current: Point;
+    /** 拖拽距离，往右下拖拽为正数，往左上拖拽为负数 */
+    diff: Point;
+    /** {@link GestureOptions.onDragStart}的返回值 */
+    data: D;
+};
+export interface DragEndInfo<D = any> extends DragInfo<D> {
+    /** 从按下到抬起经过的时长（ms） */
+    duration: number;
+    /** 拖拽速度（px/ms） */
+    speed: Point;
+}
+export type PinchStartInfo = {
+    /** 两指中点 */
+    startMiddle: Point;
+    /** 两指间距 */
+    startSpacing: number;
+};
+export interface PinchInfo<P = any> extends PinchStartInfo {
+    currentMiddle: Point;
+    diffMiddle: Point;
+    currentSpacing: number;
+    diffSpacing: number;
+    data: P;
+}
+type SharedGestureOptions = {
+    disabled?: boolean;
+    /** 通常无需使用，若元素受zoom样式的影响，可传入zoom值修正 */
+    zoom?: number;
+    /** 托管点击事件 */
+    onClick?: MouseEventHandler;
+};
+export interface DraggableGestureOptions<D = any> extends SharedGestureOptions {
+    /** 按下后经过一段时间才触发拖拽事件，单位ms */
+    delay?: number;
+    /** 拖拽一段距离后才触发拖拽事件，单位px */
+    distance?: number;
+    onDragStart?(e: React.PointerEvent): D;
+    onDrag?(info: DragInfo<D>, e: PointerEvent): void;
+    onDragEnd?(info: DragEndInfo<D>): void;
+    onDragCancel?(info: DragEndInfo<D>): void;
+    /** 若设为true，则会禁用浏览器默认拖拽行为，通常在触屏端使用，默认为`true` */
+    preventNativeTouchMove?: boolean;
+}
+export interface PinchableGestureOptions<P = any> extends SharedGestureOptions {
+    onPinchStart?(info: PinchStartInfo): P;
+    onPinch?(info: PinchInfo<P>): void;
+    onPinchEnd?(info: PinchInfo<P>): void;
+}
+export declare function useDraggable<D = any>({ disabled, ...options }: DraggableGestureOptions<D>): HandleProps;
+export declare function usePinchable<P = any>({ disabled, ...options }: PinchableGestureOptions<P>): HandleProps;
+export interface GestureOptions<D = any, P = any> extends Omit<DraggableGestureOptions<D>, 'disabled'>, Omit<PinchableGestureOptions<P>, 'disabled'> {
+    /** 是否可拖拽，默认为`true` */
+    draggable?: boolean;
+    /** 是否可捏合缩放，默认为`false` */
+    pinchable?: boolean;
+}
+export type HandleProps = Required<Pick<HTMLAttributes<Element>, 'onPointerDown'>> & Pick<HTMLAttributes<Element>, 'onTouchStart' | 'onClick'>;
+export declare function useGesture<D = any, P = any>(options: GestureOptions<D, P>): {
+    draggableHandles: HandleProps;
+    pinchableHandles: HandleProps;
+};
+export {};

package/dist/esm/utils/gesture.js

@@ -0,0 +1,245 @@
+import { useCallback, useRef } from 'react';
+import { useTheme } from '../components/theme';
+import { useSync } from './hooks';
+export function useDraggable({ disabled, ...options }) {
+    return useGesture({ draggable: !disabled, ...options }).draggableHandles;
+}
+export function usePinchable({ disabled, ...options }) {
+    return useGesture({ draggable: false, pinchable: !disabled, ...options }).pinchableHandles;
+}
+export function useGesture(options) {
+    const { zoom } = useTheme();
+    const syncOptions = useSync({
+        zoom,
+        draggable: true,
+        distance: 0,
+        preventNativeTouchMove: true,
+        ...options
+    });
+    const pointerEventMap = useRef(new Map());
+    const isDragged = useRef(false);
+    const dragStartPosition = useRef([0, 0]);
+    const dragStartTime = useRef(0);
+    const delayTimeout = useRef(void 0);
+    const data = useRef(void 0);
+    const isPinching = useRef(false);
+    const pinchStartMiddle = useRef([0, 0]);
+    const pinchStartSpacing = useRef(0);
+    const isRollback = useRef(false);
+    /**
+     * --------------------------------------------------------------------------------
+     * Drag 部分
+     */
+    const dragStartFn = (e) => {
+        isDragged.current = false;
+        dragStartPosition.current = [e.clientX, e.clientY];
+        dragStartTime.current = Date.now();
+        data.current = syncOptions.current.onDragStart?.(e);
+        document.documentElement.style.userSelect = 'none';
+    };
+    const draggingPointerDown = useCallback((e) => {
+        const { draggable, delay } = syncOptions.current;
+        if (!draggable || pointerEventMap.current.size >= 1) {
+            return;
+        }
+        if (delay) {
+            delayTimeout.current = setTimeout(() => {
+                delayTimeout.current = void 0;
+                dragStartFn(e);
+            }, delay);
+        }
+        else {
+            dragStartFn(e);
+        }
+        addEventListener('pointermove', draggingPointerMove);
+        addEventListener('pointerup', draggingPointerUp);
+        addEventListener('pointercancel', draggingPointerCancel);
+    }, []);
+    const settleDragInfo = ({ clientX, clientY }) => {
+        const diffX = (clientX - dragStartPosition.current[0]) / syncOptions.current.zoom;
+        const diffY = (clientY - dragStartPosition.current[1]) / syncOptions.current.zoom;
+        return {
+            start: dragStartPosition.current,
+            current: [clientX, clientY],
+            diff: [diffX, diffY],
+            data: data.current
+        };
+    };
+    const draggingPointerMove = useCallback((e) => {
+        e.preventDefault();
+        const dragInfo = settleDragInfo(e);
+        if (!isRollback.current) {
+            const absDiffX = Math.abs(dragInfo.diff[0]);
+            const absDiffY = Math.abs(dragInfo.diff[1]);
+            if (delayTimeout.current) {
+                if (absDiffX > 5 || absDiffY > 5) {
+                    // 延时尚未结束，但偏移量过大，取消拖拽
+                    draggingPointerCancel(e);
+                }
+                return;
+            }
+            const { distance } = syncOptions.current;
+            if (absDiffX < distance || absDiffY < distance) {
+                // 拖拽距离未达到起步距离
+                return;
+            }
+        }
+        isDragged.current = true;
+        syncOptions.current.onDrag?.(dragInfo, e);
+    }, []);
+    const cancelDragFn = () => {
+        delayTimeout.current && clearTimeout(delayTimeout.current);
+        delayTimeout.current = void 0;
+        document.documentElement.style.userSelect = '';
+        removeEventListener('pointermove', draggingPointerMove);
+        removeEventListener('pointerup', draggingPointerUp);
+        removeEventListener('pointercancel', draggingPointerCancel);
+        preventFn.current && removeEventListener('touchmove', preventFn.current);
+    };
+    const settleDragEndInfo = (e) => {
+        const dragInfo = settleDragInfo(e);
+        const duration = Date.now() - dragStartTime.current;
+        return {
+            ...dragInfo,
+            duration,
+            speed: [
+                Math.abs(dragInfo.diff[0] / duration),
+                Math.abs(dragInfo.diff[1] / duration)
+            ]
+        };
+    };
+    const draggingPointerCancel = useCallback((e) => {
+        cancelDragFn();
+        const callback = syncOptions.current.onDragCancel || syncOptions.current.onDragEnd;
+        callback?.(settleDragEndInfo(e));
+    }, []);
+    const draggingPointerUp = useCallback((e) => {
+        cancelDragFn();
+        syncOptions.current.onDragEnd?.(settleDragEndInfo(e));
+    }, []);
+    /**
+     * --------------------------------------------------------------------------------
+     * Pinch 部分
+     */
+    const calPinchInfo = () => {
+        const [{ clientX: x1, clientY: y1 }, { clientX: x2, clientY: y2 }] = pointerEventMap.current.values();
+        const a = Math.abs(x2 - x1);
+        const b = Math.abs(y2 - y1);
+        return {
+            middle: [(x1 + x2) / 2, (y1 + y2) / 2],
+            spacing: Math.sqrt(a * a + b * b)
+        };
+    };
+    const pinchingCancelListened = useRef(false);
+    const pinchingPointerDown = useCallback((e) => {
+        if (!syncOptions.current.pinchable || pointerEventMap.current.size >= 2) {
+            return;
+        }
+        pointerEventMap.current.set(e.pointerId, e);
+        if (pointerEventMap.current.size === 2) {
+            draggingPointerCancel(e.nativeEvent);
+            isPinching.current = true;
+            document.documentElement.style.userSelect = 'none';
+            const { middle: startMiddle, spacing: startSpacing } = calPinchInfo();
+            pinchStartMiddle.current = startMiddle;
+            pinchStartSpacing.current = startSpacing;
+            data.current = syncOptions.current.onPinchStart?.({ startMiddle, startSpacing });
+            addEventListener('pointermove', pinchingPointerMove);
+        }
+        if (pinchingCancelListened.current) {
+            return;
+        }
+        pinchingCancelListened.current = true;
+        addEventListener('pointerup', pinchingPointerUp);
+        addEventListener('pointercancel', pinchingPointerCancel);
+    }, []);
+    const settlePinchInfo = () => {
+        const { middle: currentMiddle, spacing: currentSpacing } = calPinchInfo();
+        const diffMiddleX = (currentMiddle[0] - pinchStartMiddle.current[0]) / syncOptions.current.zoom;
+        const diffMiddleY = (currentMiddle[1] - pinchStartMiddle.current[1]) / syncOptions.current.zoom;
+        return {
+            startMiddle: pinchStartMiddle.current,
+            currentMiddle,
+            diffMiddle: [diffMiddleX, diffMiddleY],
+            startSpacing: pinchStartSpacing.current,
+            currentSpacing,
+            diffSpacing: currentSpacing - pinchStartSpacing.current,
+            data: data.current
+        };
+    };
+    const pinchingPointerMove = useCallback((e) => {
+        const event = pointerEventMap.current.get(e.pointerId);
+        if (!event) {
+            return;
+        }
+        e.preventDefault();
+        event.clientX = e.clientX;
+        event.clientY = e.clientY;
+        syncOptions.current.onPinch?.(settlePinchInfo());
+    }, []);
+    const debounce = useRef(void 0);
+    const pinchingPointerCancel = useCallback((e) => {
+        isPinching.current = false;
+        pointerEventMap.current.delete(e.pointerId);
+        if (!pointerEventMap.current.size) {
+            pinchingCancelListened.current = false;
+            removeEventListener('pointermove', pinchingPointerMove);
+            removeEventListener('pointerup', pinchingPointerUp);
+            removeEventListener('pointercancel', pinchingPointerCancel);
+        }
+    }, []);
+    const pinchingPointerUp = useCallback((e) => {
+        if (isPinching.current) {
+            if (debounce.current) {
+                clearTimeout(debounce.current);
+                debounce.current = void 0;
+                isRollback.current
+                    = pinchingCancelListened.current
+                        = false;
+                document.documentElement.style.userSelect = '';
+                syncOptions.current.onPinchEnd?.(settlePinchInfo());
+            }
+            else {
+                debounce.current = setTimeout(() => {
+                    isRollback.current = true;
+                    dragStartFn(pointerEventMap.current.values().next().value);
+                }, 50);
+            }
+        }
+        pinchingPointerCancel(e);
+    }, []);
+    /**
+     * --------------------------------------------------------------------------------
+     * 托管touch与click事件
+     */
+    const preventFn = useRef(void 0);
+    const onTouchStart = useCallback(() => {
+        preventFn.current = (e) => {
+            e.cancelable && e.preventDefault();
+        };
+        addEventListener('touchmove', preventFn.current, { passive: false });
+    }, []);
+    const onClick = useCallback((e) => {
+        if (isDragged.current || isPinching.current) {
+            // 已经触发了拖拽或捏合，避免触发点击事件
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else {
+            syncOptions.current.onClick?.(e);
+        }
+    }, []);
+    const { preventNativeTouchMove, pinchable } = syncOptions.current;
+    return {
+        draggableHandles: {
+            onPointerDown: draggingPointerDown,
+            onClick,
+            ...preventNativeTouchMove && !pinchable && { onTouchStart }
+        },
+        pinchableHandles: {
+            onPointerDown: pinchingPointerDown,
+            onClick,
+            ...preventNativeTouchMove && pinchable && { onTouchStart }
+        }
+    };
+}

package/dist/esm/utils/index.d.ts

@@ -3,6 +3,7 @@ export * from './curd';
 export * from './dataGrid';
 export * from './dnd';
 export * from './form';
+export * from './gesture';
 export * from './hooks';
 export * from './keyboard';
 export * from './polyfill';

package/dist/esm/utils/index.js

@@ -3,6 +3,7 @@ export * from './curd';
 export * from './dataGrid';
 export * from './dnd';
 export * from './form';
+export * from './gesture';
 export * from './hooks';
 export * from './keyboard';
 export * from './polyfill';

package/dist/esm/utils/style.js

@@ -89,7 +89,7 @@ export function useTouchRipple(colorPropsValue) {
         return Color(colorTransfer(colorPropsValue, theme)).alpha(.6).string();
     }, [colorPropsValue, theme]);
     return (element) => {
-        typeof element.animate === 'function' && element.animate([
+        element.animate([
             {
                 outlineWidth: '0',
                 outlineStyle: 'solid',

package/dist/esm/utils/utils.d.ts

@@ -116,8 +116,6 @@ export declare function findPredecessor(target: Element, callback: (el: Element)
 export declare function listenAllPredecessorsScroll(target: Element | Document, listener: (e: Event) => void): () => void;
 /**
  * 将数值限制在某个范围内
- * @param value
- * @param {[min, max]}
  */
 export declare function range(value: number, min?: number, max?: number): number;
 /**

package/dist/esm/utils/utils.js

@@ -262,8 +262,6 @@ export function listenAllPredecessorsScroll(target, listener) {
 }
 /**
  * 将数值限制在某个范围内
- * @param value
- * @param {[min, max]}
  */
 export function range(value, min = -Infinity, max = Infinity) {
     return Math.max(min, Math.min(max, value));